@import url('../../../o3-theme/src/css/custom.css');

/* === Brand colors === */
:root {
    --accent-color: #FFE6CA;
}

/* === Header === */

/* Entire header container gets accent — fills gaps around .header__search */
header > .container-xxl {
    background-color: var(--accent-color) !important;
}

/* Remove the 1px separator line above the nav row (main.min.css: ::after width:100vw) */
header .header__mainnav::after {
    display: none;
}

/* Nav row: 15px fallback (parent uses 0px); !important beats main.min.css */
header .header__mainnav {
    background-color: var(--page-bg) !important;
    margin-left: calc(-1 * var(--content-inner-margin, 15px)) !important;
    margin-right: calc(-1 * var(--content-inner-margin, 15px)) !important;
    padding-left: var(--content-inner-margin, 15px) !important;
    padding-right: var(--content-inner-margin, 15px) !important;
}

/* Search input — not covered by parent's custom.css */
.header__search input {
    background-color: var(--page-bg) !important;
}

.header__logo {
    max-width: 315px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .header__logo {
        flex: 0 0 315px;
    }
}

/* === Footer === */

.footer__logo {
    background-color: var(--accent-color);
    max-width: 1320px;
    margin: 0 auto;
    border-bottom: none;
}

/* o3-theme hides .footer__logo when background image is active */
body.has-bg-image footer .footer__logo {
    display: flex !important;
}

/* === Checkout / account info boxes === */

.card.bg-light {
    background-color: var(--accent-color) !important;
}

/* =====================================================================
   PRIMARY / SECONDARY color overrides
   main.min.css hardcodes o3-theme's green (#82BA00, #F2F8E6) in 24
   rules. These override them with CSS variables.
   ===================================================================== */

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
}

.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary) !important;
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--bs-primary);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

.dropdown-menu-dark {
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

.list-group {
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
}

/* Quantity +/- buttons: secondary when active, gray (#f5f5f5) when disabled */
.component__tobasket-minus:not(:disabled),
.component__tobasket-plus:not(:disabled) {
    background-color: var(--bs-secondary) !important;
    color: var(--bs-primary) !important;
}

.listing-point {
    background-color: var(--accent-color) !important;
}

.basket__voucher {
    background-color: var(--accent-color) !important;
}

.basket__summary,
.basket__proceed {
    background-color: var(--bs-secondary) !important;
}

.offcanvas__basket-costs {
    background-color: var(--bs-secondary) !important;
}

.thankyou,
.register_success {
    background-color: var(--accent-color) !important;
}

.account__menu a.active {
    background-color: var(--accent-color) !important;
}

.payment__payments .form-check-input:checked + .form-check-label,
.user__shippingaddress-change .form-check-input:checked + .form-check-label {
    background-color: var(--accent-color) !important;
}

/* Product card hearts: !important needed to beat Splide's layer specificity */
.component__productslider .component__productbox-noticelist,
.component__productslider .component__productbox-remove {
    top: 16px !important;
    right: 16px !important;
}

/* === Background image ===
   base.tpl's getResourceUrl() returns the parent theme path for child themes,
   causing the inline-style URL to 404. Override with correct child path.
   All properties declared explicitly — Chrome does not inherit background-attachment
   from a lower-specificity rule when background-image is won by a different rule. */
body.has-bg-image {
    background-image: url('/out/emo3theme/src/img/mein_hintergrundbild.jpg') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}

/* === SVG color overrides (templates hardcode stroke/fill="#82BA00") === */

/* .component__tobasket-minus svg path,
.component__tobasket-plus svg path {
    stroke: var(--bs-primary) !important;
} */

.start__manufacturer-item svg path {
    fill: var(--bs-primary) !important;
}

.footer__box-social {
    background-color: var(--bs-primary) !important;
}

/* === PDP Reviews: prevent SVG illustration from clipping on mobile === */

@media (max-width: 575.98px) {
    .details__reviews-empty {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "button" "svg";
    }

    .details__reviews-empty svg {
        justify-self: center;
        max-width: 100%;
        height: auto;
    }
}