/**
 * Amilon Multibrand Cuts - Custom Option (Cuts) Styles
 * Styles for product custom option buttons (simple/virtual) with 25px rounded borders
 */

/* Custom option cuts - buttons (replacing swatch UI) */
.multibrand-cuts-option-buttons {
    column-gap: 12px !important;
    row-gap: 8px !important;
}

/* Neutralize theme/Tailwind spacing collisions and enforce consistent gaps */
.multibrand-cuts-option-buttons > * {
    margin-left: 0 !important;
}

.multibrand-cuts-option-buttons .multibrand-cuts-option,
div.multibrand-cuts-option-buttons .multibrand-cuts-option,
div.multibrand-cuts-option-buttons label.multibrand-cuts-option {
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 80px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    height: 48px !important;
}

/*
 * Select-amount / link controls may sit outside .multibrand-cuts-option-buttons (e.g. below the pills row).
 * Keep the same pill shape (25px radius) as denomination pills; theme button resets often flatten corners.
 */
.multibrand-cuts-custom-option .multibrand-cuts-option,
.multibrand-cuts-custom-option button.multibrand-cuts-option,
.multibrand-cuts-custom-option a.multibrand-cuts-option {
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 80px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    height: 48px !important;
}

/* Legacy swatch options (if still referenced elsewhere) - rectangular with 25px rounded borders */
.swatch-attribute-options .swatch-option {
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 80px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    height: 48px !important;
}

/* Ensure all swatch option labels maintain the rounded rectangle style */
.swatch-attribute .swatch-option {
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Force padding on swatch options with maximum priority */
div.swatch-attribute-options .swatch-option,
div.swatch-attribute-options label.swatch-option,
body div.swatch-attribute-options .swatch-option,
body div.swatch-attribute-options label.swatch-option {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Reduce padding on swatch option text content */
div.swatch-attribute-options .swatch-option div,
div.swatch-attribute-options label.swatch-option div,
body div.swatch-attribute-options .swatch-option div,
body div.swatch-attribute-options label.swatch-option div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Select Amount button - maintain rounded rectangle style with padding */
.swatch-attribute-options button.swatch-option {
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    min-width: 80px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    height: 48px !important;
}

/* See more link button - maintain rounded rectangle style */
.swatch-attribute-options a.swatch-option {
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
}

/* Maximum priority rules to override any theme styles - Force inline styles priority */
/* These rules ensure that inline styles with !important always take precedence */
.swatch-attribute-options .swatch-option[style],
.swatch-attribute-options label.swatch-option[style],
.swatch-attribute .swatch-option[style] {
    /* Inline styles with !important will override any theme CSS */
    /* This selector ensures maximum specificity */
}

/* Force override theme background colors - highest specificity */
div.swatch-attribute-options .swatch-option[style*="background-color"],
div.swatch-attribute-options label.swatch-option[style*="background-color"],
div.swatch-attribute .swatch-attribute-options .swatch-option[style*="background-color"],
body div.swatch-attribute-options .swatch-option[style*="background-color"],
body div.swatch-attribute-options label.swatch-option[style*="background-color"] {
    /* Inline styles with !important take precedence */
    /* This selector ensures maximum specificity to override theme styles */
}

/* Force override theme text colors - highest specificity */
div.swatch-attribute-options .swatch-option[style*="color"],
div.swatch-attribute-options label.swatch-option[style*="color"],
div.swatch-attribute .swatch-attribute-options .swatch-option[style*="color"],
body div.swatch-attribute-options .swatch-option[style*="color"],
body div.swatch-attribute-options label.swatch-option[style*="color"] {
    /* Inline styles with !important take precedence */
    /* This selector ensures maximum specificity to override theme styles */
}

/* Force override theme border colors - highest specificity */
div.swatch-attribute-options .swatch-option[style*="border-color"],
div.swatch-attribute-options label.swatch-option[style*="border-color"],
div.swatch-attribute .swatch-attribute-options .swatch-option[style*="border-color"],
body div.swatch-attribute-options .swatch-option[style*="border-color"],
body div.swatch-attribute-options label.swatch-option[style*="border-color"] {
    /* Inline styles with !important take precedence */
    /* This selector ensures maximum specificity to override theme styles */
}

/* Select Amount button - force override theme styles with maximum specificity */
div.swatch-attribute-options button.swatch-option[style*="background-color"],
div.swatch-attribute-options button.swatch-option[style*="color"],
div.swatch-attribute-options button.swatch-option[style*="border-color"],
body div.swatch-attribute-options button.swatch-option[style*="background-color"],
body div.swatch-attribute-options button.swatch-option[style*="color"],
body div.swatch-attribute-options button.swatch-option[style*="border-color"] {
    /* Inline styles with !important take precedence */
    /* This selector ensures maximum specificity to override theme styles */
}

/* Text color inside swatch options - inherit from parent with highest priority */
div.swatch-attribute-options .swatch-option div,
div.swatch-attribute-options .swatch-option span,
div.swatch-attribute-options label.swatch-option div,
div.swatch-attribute-options label.swatch-option span,
body div.swatch-attribute-options .swatch-option div,
body div.swatch-attribute-options .swatch-option span {
    color: inherit !important;
}

/* Override any hover states from theme */
div.swatch-attribute-options .swatch-option:hover[style*="background-color"],
div.swatch-attribute-options label.swatch-option:hover[style*="background-color"],
div.swatch-attribute-options button.swatch-option:hover[style*="background-color"] {
    /* Inline styles with !important will override hover states */
}

/* Override any focus states from theme */
div.swatch-attribute-options .swatch-option:focus[style*="background-color"],
div.swatch-attribute-options label.swatch-option:focus[style*="background-color"],
div.swatch-attribute-options button.swatch-option:focus[style*="background-color"] {
    /* Inline styles with !important will override focus states */
}

/* Override any active states from theme */
div.swatch-attribute-options .swatch-option:active[style*="background-color"],
div.swatch-attribute-options label.swatch-option:active[style*="background-color"],
div.swatch-attribute-options button.swatch-option:active[style*="background-color"] {
    /* Inline styles with !important will override active states */
}

/* Select Amount button - ensure text is never bold and has correct padding */
div.swatch-attribute-options button.swatch-option,
div.swatch-attribute-options button.swatch-option span,
body div.swatch-attribute-options button.swatch-option,
body div.swatch-attribute-options button.swatch-option span {
    font-weight: normal !important;
}

/* Select Amount button - ensure padding */
div.swatch-attribute-options button.swatch-option,
body div.swatch-attribute-options button.swatch-option {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Select Amount button - ensure minimum width and height */
div.swatch-attribute-options button.swatch-option,
body div.swatch-attribute-options button.swatch-option {
    min-width: 80px !important;
    height: 48px !important;
}

/* Euro symbol - always black with maximum priority */
div.swatch-attribute-options button.swatch-option span[style*="color: #000000"],
div.swatch-attribute-options button.swatch-option span[style*="color:#000000"],
body div.swatch-attribute-options button.swatch-option span[style*="color: #000000"],
body div.swatch-attribute-options button.swatch-option span[style*="color:#000000"] {
    color: #000000 !important;
}

/* Euro symbol container - force black color and normal font weight */
div.swatch-attribute-options button.swatch-option .rounded-full,
body div.swatch-attribute-options button.swatch-option .rounded-full {
    color: #000000 !important;
    font-weight: normal !important;
}

/* Euro symbol - ensure it's never bold with maximum priority */
div.swatch-attribute-options button.swatch-option span.rounded-full,
div.swatch-attribute-options button.swatch-option .rounded-full,
body div.swatch-attribute-options button.swatch-option span.rounded-full,
body div.swatch-attribute-options button.swatch-option .rounded-full {
    font-weight: normal !important;
    font-style: normal !important;
}

/* Price hiding - CSS fallback when JavaScript/Alpine.js renders price dynamically */
/* These rules are applied conditionally via JavaScript, but serve as a fallback */
.amilon-hide-price .final-price,
.amilon-hide-price .final-price-excl-tax,
.amilon-hide-price .price-box.price-final_price .final-price,
.final-price[data-hide-price="true"],
.final-price.amilon-price-final[data-hide-price="true"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Hide price container when price should be hidden */
[role="group"][aria-label="Price"]:has(.final-price[data-hide-price="true"]),
.price-box:has(.final-price[data-hide-price="true"]) {
    display: none !important;
    visibility: hidden !important;
}