/* ==========================================================
   Swatch Upcharge Labels
   Price label uses real span, not ::after
   ========================================================== */

.swatch-opt .swatch-option {
    position: relative;
    overflow: visible;
}

/* Disable old pseudo-element upcharge labels if any old CSS is still cached */
.swatch-opt .swatch-option.has-swatch-price:not(.selected)::after {
    content: none !important;
    display: none !important;
}

/* Space only for swatches that actually have an upcharge */
.swatch-opt .swatch-option.has-swatch-price {
    margin-bottom: 24px !important;
}

/* Real upcharge label added by JS */
.swatch-opt .swatch-option .swatch-price-label {
    position: absolute;
    top: calc(100% + -18px);
    left: 50%;
    transform: translateX(-50%);
    display: block;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 500;
    color: #000000;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
    /* background: transparent !important; */
    border: 0 !important;
    box-shadow: none !important;
    background-color:#fff;
    border-radius:3px;
    padding:2px;
    opacity:.75;

}

/* Selected swatch checkmark in upper-right */
.swatch-opt .swatch-option.selected::after {
    content: "✓" !important;
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    left: auto !important;
    bottom: auto !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    border-radius: 50% !important;
    background: #014E83 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
    text-align: center !important;
    transform: none !important;
    z-index: 6 !important;
    pointer-events: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22) !important;
}

/* Slight depth on selected frame/configurable swatches */
.swatch-opt .swatch-option.selected {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Match the same selected checkmark on MageWorx custom option swatches (fabric/cushion). */
.product-options-wrapper .mageworx-swatch-option {
    position: relative;
    overflow: visible;
}

.product-options-wrapper .mageworx-swatch-option.selected::after {
    content: "✓" !important;
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    left: auto !important;
    bottom: auto !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    border-radius: 50% !important;
    background: #014E83 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
    text-align: center !important;
    transform: none !important;
    z-index: 6 !important;
    pointer-events: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22) !important;
}

/* Darken upcharge label when its swatch is selected */
.swatch-opt .swatch-option.selected .swatch-price-label {
    color: #4b5563; /* darker gray */
    font-weight: 700;
}

/*
    TEMP TEST MODE
    ----------------------------------------------------------
    Hover tooltip + swatch window CSS is intentionally disabled
    in JS toggles inside swatch-prices.js to isolate MageWorx
    custom option tooltip behavior.
*/

/* Hover/focus swatch name tooltip (keeps existing checkmark behavior intact) */
.swatch-opt .swatch-option .swatch-hover-name-label {
    position: absolute;
    left: 50%;
    top: -33px;
    transform: translateX(-50%) translateY(4px);
    padding: 7px 11px;
    border-radius: 4px;
    background: rgba(17, 24, 39, 0.94);
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 7;
    opacity: 0;
    visibility: hidden;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.swatch-opt .swatch-option .swatch-hover-name-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(17, 24, 39, 0.94);
}

.swatch-opt .swatch-option:hover .swatch-hover-name-label,
.swatch-opt .swatch-option:focus-visible .swatch-hover-name-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Per-attribute swatch windows (enabled by JS rules) */
.swatch-opt .swatch-attribute-options.swatch-window-enabled,
.product-options-wrapper .field .swatch-window-enabled.swatch-window-scope {
    max-height: var(--swatch-window-desktop-height, 260px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 7px;
    padding-right: 10px;
    scrollbar-width: auto;
    scrollbar-color: #6b7280 transparent;
}

/* Match selected custom-option value text style to frame selected option text */
.product-options-wrapper .field > span#value {
    color: #014e83;
    font-weight: 600;
    letter-spacing: .2px;
}

.swatch-opt .swatch-attribute-options.swatch-window-enabled::-webkit-scrollbar,
.product-options-wrapper .field .swatch-window-enabled.swatch-window-scope::-webkit-scrollbar {
    width: 12px;
}

.swatch-opt .swatch-attribute-options.swatch-window-enabled::-webkit-scrollbar-track,
.product-options-wrapper .field .swatch-window-enabled.swatch-window-scope::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.swatch-opt .swatch-attribute-options.swatch-window-enabled::-webkit-scrollbar-thumb,
.product-options-wrapper .field .swatch-window-enabled.swatch-window-scope::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 10px;
    border: 2px solid transparent;
}

.swatch-opt .swatch-attribute-options.swatch-window-enabled::-webkit-scrollbar-thumb:hover,
.product-options-wrapper .field .swatch-window-enabled.swatch-window-scope::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Keep tooltip visible within clipped scroll windows by showing it below swatches */
.swatch-opt .swatch-attribute-options.swatch-window-enabled .swatch-option .swatch-hover-name-label {
    top: calc(100% + 8px);
}

.swatch-opt .swatch-attribute-options.swatch-window-enabled .swatch-option .swatch-hover-name-label::after {
    top: -5px;
    border-top: 0;
    border-bottom: 5px solid rgba(17, 24, 39, 0.94);
}

/* MageWorx may inject selected option gallery thumbnails below swatches; hide them inside scroll windows. */
.product-options-wrapper .field .swatch-window-enabled.swatch-window-scope .option_images_gallery,
.product-options-wrapper .field .swatch-window-enabled.swatch-window-scope .mageworx-optionswatches-option-gallery {
    display: none !important;
}

@media (max-width: 768px) {
    .swatch-opt .swatch-attribute-options.swatch-window-enabled,
    .product-options-wrapper .field .swatch-window-enabled.swatch-window-scope {
        max-height: var(--swatch-window-mobile-height, 220px);
    }
}