/* ============================================================================
   ButterBoyz brand colours - paste into Admin > Custom CSS (shopCustom.css)

   Palette (taken from the old ButterBoyz shop, assets/scss/colors.scss)
     gold            #E9C46A   brand primary: backgrounds, borders, highlights
     gold hover      #D4AE4F
     gold active     #BF9A3C
     ink             #151E28   text ON gold (10.1:1 - gold with white text would fail AA)
     dark gold       #8A6914   gold used AS TEXT on white (5.1:1, passes AA 4.5:1)
     darker gold     #6B5210   hover for gold text / text on tinted alerts (6.7:1)
     gold tint       #FBF3E1   alert and list-group background
     orange          #FF5722   secondary - decoration only, never text

   Contrast (WCAG 2.1 AA: 4.5:1 text, 3:1 large text and controls)
     ink on gold #E9C46A .......... 10.1:1
     ink on gold hover #D4AE4F ..... 8.0:1
     ink on gold active #BF9A3C .... 6.3:1
     dark gold #8A6914 on white .... 5.1:1
     #6B5210 on tint #FBF3E1 ....... 6.7:1
   ========================================================================== */

/* Bootstrap 4 does not read CSS variables, so every selector below is explicit.
   The variable only serves the banner colours (classPrimary) in colors.css. */
:root {
    --bs-primary: #E9C46A;
    --bs-primary-rgb: 233, 196, 106;
}

/* Background colours */
.bg-primary {
    background-color: #E9C46A !important;
    color: #151E28 !important;
}

/* Border colours */
.border-primary {
    border-color: #E9C46A !important;
}

/* Text colours: gold as text uses the darker gold so it is readable on white */
.text-primary {
    color: #8A6914 !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: #6B5210 !important;
}

/* Buttons */
.btn-primary,
.btn-style-1 {
    background-color: #E9C46A !important;
    border-color: #E9C46A !important;
    color: #151E28 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-style-1:hover,
.btn-style-1:focus {
    background-color: #D4AE4F !important;
    border-color: #D4AE4F !important;
    color: #151E28 !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-style-1:active {
    background-color: #BF9A3C !important;
    border-color: #BF9A3C !important;
    color: #151E28 !important;
}

.btn-link {
    color: #8A6914 !important;
}

.btn-link:hover,
.btn-link:focus {
    color: #6B5210 !important;
}

.btn-outline-primary,
.btn-style-4 {
    color: #8A6914 !important;
    border-color: #8A6914 !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-style-4:hover,
.btn-style-4:focus {
    background-color: #E9C46A !important;
    border-color: #E9C46A !important;
    color: #151E28 !important;
}

.btn-style-2:hover,
.btn-style-2:focus {
    border-color: #E9C46A !important;
    color: #151E28 !important;
}

/* Alerts */
.alert-primary {
    background-color: #FBF3E1 !important;
    border-color: #E9C46A !important;
    color: #6B5210 !important;
}

/* Badges */
.badge-primary,
.badge.bg-primary,
.item-badge.classPrimary {
    background-color: #E9C46A !important;
    color: #151E28 !important;
}

/* List group */
.list-group-item-primary {
    background-color: #FBF3E1 !important;
    color: #6B5210 !important;
}

/* Forms: focus ring keeps a 3:1 contrast against white through the dark gold border */
.form-control:focus {
    border-color: #8A6914 !important;
    box-shadow: 0 0 0 0.2rem rgba(233, 196, 106, 0.45) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #E9C46A !important;
    border-color: #8A6914 !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(233, 196, 106, 0.45) !important;
}

/* Progress bars */
.progress-bar {
    background-color: #E9C46A !important;
    color: #151E28 !important;
}

/* Pagination */
.page-item.active .page-link {
    background-color: #E9C46A !important;
    border-color: #E9C46A !important;
    color: #151E28 !important;
}

.page-link {
    color: #8A6914;
}

.card-hover-gradient:hover {
    background-color: #E9C46A;
}

.btn-check:focus + .btn,
.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(233, 196, 106, 0.45);
}

/* Product names in the cart and lists use the compiled theme colour */
.item-name {
    color: #8A6914;
}

.item-name:hover,
.item-name:focus {
    color: #6B5210;
}


/* ============================================================================
   Cart drawer readability + accessible close button (same block as the
   myAroma file, with the gold tint instead of the orange one)
   ========================================================================== */

.cart-total-box,
.cart-body .cart-total-box,
.cart-total-box .cart-total-left,
.cart-total-box .cart-total-right,
.cart-total-box label,
.cart-total-box .control-label,
.cart-total-box .cart-total-row-discount label.control-label {
    color: #151E28 !important;
}

.cart-inner .cart-item,
.cart-inner .item-description,
.cart-inner .item-description .info,
.cart-inner .item-price-row,
.cart-inner .item-quantity {
    color: #151E28 !important;
}

.cart-inner .btn-text,
.cart-body .cart-items .cart-item .item-action .btn-text {
    color: #151E28 !important;
    text-decoration: underline;
}

.cart-inner .basket-subscription-options,
.cart-inner .basket-subscription-options label,
.cart-inner [data-subscription-choice-card] {
    color: #151E28 !important;
}

.cart-inner .cart-heading-row,
.cart-inner .cart-heading-row * {
    color: #151E28 !important;
}

.cart-inner .recom-heading,
.cart-recommend-container .recom-heading {
    color: #151E28 !important;
}

.cart-inner .cart-recommend-container .product-info,
.cart-recommend-container .product-info {
    color: #151E28 !important;
}

/* Cart close button: 40x40 target (2.5.8), visible keyboard focus (2.4.7, 1.4.11) */
.cart-inner .cart-heading-row .cart-close,
.cart-inner .cart-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: #151E28;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.cart-inner .cart-close:hover,
.cart-inner .cart-close:focus-visible {
    background-color: rgba(233, 196, 106, .35);
}

.cart-inner .cart-close:active {
    transform: translateY(-50%) scale(.9);
}

.cart-inner .cart-close:focus-visible {
    outline: 3px solid #151E28;
    outline-offset: 2px;
}

.cart-inner .cart-close:focus:not(:focus-visible) {
    outline: none;
}

.cart-inner .cart-close img {
    width: 14px;
    height: 14px;
    display: block;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .cart-inner .cart-close {
        transition: none;
    }

    .cart-inner .cart-close:active {
        transform: translateY(-50%);
    }
}


/* ============================================================================
   Header / footer / notice bar, matched to the production shop (butterboyz.de)
   ========================================================================== */

/* Dark top bar and footer */
.top-bar,
.footer-box {
    background-color: #2E2F2F !important;
    color: #FFFFFF !important;
}

.top-bar a,
.top-bar .dropdown-toggle,
.footer-box a,
.footer-box a:hover,
.footer-box a:focus {
    color: #FFFFFF !important;
}

/* Header icons and cart counter: gold instead of the compiled orange */
.icon,
a.icon {
    color: #E9C46A !important;
    border-color: #E9C46A !important;
}

.cart-count {
    background-color: #E9C46A !important;
    color: #151E28 !important;
}

/* Notice bar under the header (minimum order value): green with dark text */
.text-slider {
    background-color: #7CC98C !important;
    color: #151E28 !important;
}

.text-slider p,
.text-slider a {
    color: #151E28 !important;
}

/* Free-shipping / minimum order text in the top bar: white on the dark bar */
.top-bar .hotline-text {
    color: #FFFFFF !important;
}