/* =========================================================================
   BUILD PRODUCT DETAIL PAGE - Metal Selector Override CSS
   Created: 2025-11-01
   Purpose: Override visual-metal-selector.css ONLY for BuildProductDetail page
   ========================================================================= */

/* SURGICAL CSS: Match Product Detail page EXACTLY (from Expert Panel Analysis) */

/* Level 4: Product Dropdown - MATCH PRODUCT DETAIL */
body .product-dropdown.product-dropdown {
    margin: 1px 0px !important;  /* Product Detail: 1px 0px */
    padding: 0px !important;
    float: left !important;  /* Product Detail HAS float: left */
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;  /* Product Detail: 14px (NOT 12px!) */
}

/* Level 3: Metal Selector Container - MATCH PRODUCT DETAIL */
body .metal-selector-container.metal-selector-container {
    margin: 2px 0px !important;  /* Product Detail: 2px 0px (NOT 0px 0px 2px!) */
}

/* Level 2: Metal Icon Row - MATCH PRODUCT DETAIL */
body .metal-icon-row.metal-icon-row {
    display: flex !important;
    gap: 10px !important;  /* Product Detail: 10px (NOT 12px!) */
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 2px 0px !important;  /* Product Detail: 2px 0px (NOT 0px 0px 6px!) */
    padding: 0px !important;
}

/* Level 1: Metal Icon Buttons - MATCH PRODUCT DETAIL */
body .metal-icon-button.metal-icon-button {
    margin: 3px 0px !important;  /* Product Detail: 3px 0px (NOT 8px 0px!) */
    padding: 1px 0px !important;  /* Product Detail: 1px 0px (NOT 0px!) */
}

/* Override ALL media query ranges to ensure 2px bottom margin */
@media (max-width: 479px) {
    .metal-selector-container {
        margin: 0 0 2px 0 !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .metal-selector-container {
        margin: 0 0 2px 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .metal-selector-container {
        margin: 0 0 2px 0 !important;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .metal-selector-container {
        margin: 0 0 2px 0 !important;
    }
}

@media (min-width: 1600px) {
    .metal-selector-container {
        margin: 0 0 2px 0 !important;
    }
}

/* =========================================================================
   PARENT CONTAINER FIXES - Critical for vertical alignment
   From Expert Panel Parent Container Deep Dive Analysis
   ========================================================================= */

/* Level 6: Product Full Details - Remove excessive margin */
body .product-full-details.product-full-details {
    margin: 0px !important;  /* Product Detail: 0px (NOT 12.9583px 0px!) */
}

/* Level 5: Product Details - Add top margin */
body .product-details.product-details {
    margin: 3px 0px !important;  /* Product Detail: 3px 0px (NOT 0px!) */
}

/* Level 4: Product Info - Change bottom margin to top margin */
body .product-info.product-info {
    margin: 3px 0px !important;  /* Product Detail: 3px 0px (NOT 0px 0px 6px!) */
}

/* =========================================================================
   RING SIZE DROPDOWN FIX - Prevent width/float from breaking flexbox
   ========================================================================= */

/* Fix ring size dropdown to work with flexbox - prevents wrapping to new line */
body .product-select2.product-select2 {
    width: auto !important;      /* Override 44%/100% width from _buildProductDetail.css */
    float: none !important;      /* No float in flexbox */
    flex-shrink: 0 !important;   /* Prevent shrinking */
    margin: 0 !important;        /* Remove any margins */
}

/* Ensure ring size guide icon (blue-mark) is always visible */
#find-ring-size {
    opacity: 1 !important;       /* Force visible (was being set to 0 by JS/CSS) */
    display: inline-block !important;
}

#find-ring-size img {
    opacity: 1 !important;       /* Force image visible */
    display: inline-block !important;
}

/* Metal display clean text styling for single-option products */
.metal-display-clean {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-family: 'Lato-Regular', Arial, sans-serif !important;
    font-size: 14px !important;
    color: #424242 !important;
    text-transform: uppercase !important;
}

.metal-icon {
    width: 33px !important;
    height: 33px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}

/* Metal-specific background images */
.metal-icon.wg-metalfilter { background-image: url(/B2CTheme/images/wg-metal-fliter.png) !important; }
.metal-icon.tt-metalfilter { background-image: url(/B2CTheme/images/tt-metal-fliter.png) !important; }
.metal-icon.yg-metalfilter { background-image: url(/B2CTheme/images/yg-metal-fliter.png) !important; }
.metal-icon.rg-metalfilter { background-image: url(/B2CTheme/images/rg-metal-fliter.png) !important; }
.metal-icon.pt-metalfilter { background-image: url(/B2CTheme/images/pt-metal-fliter.png) !important; }
.metal-icon.pp-metalfilter { background-image: url(/B2CTheme/images/pp-metal-fliter.png) !important; }

/* Mobile responsiveness - vertical stack */
@media (max-width: 479px) {
    .product-dropdown {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .metal-display-clean {
        font-size: 13px !important;
        gap: 6px !important;
    }

    .metal-icon {
        width: 28px !important;
        height: 28px !important;
    }
}