/* Increase text size from 12px to 15px for desktop only - NO OTHER CHANGES */

/* ========================================
   TOP HEAD TEXT SIZE INCREASE - DESKTOP ONLY
   ======================================== */

/* Desktop only - increase text size from 12px to 15px */
@media (min-width: 768px) {
    div.top-head.flex {
        display: flex !important; /* Enable flexbox layout */
        justify-content: space-between !important; /* Space between left and right sections */
        align-items: center !important; /* Center align items vertically */
        flex-wrap: nowrap !important; /* Prevent wrapping */
        font-size: 15px !important; /* Increase from 12px to 15px */
        height: auto !important; /* Remove height constraint */
        min-height: auto !important; /* Remove min-height constraint */
        max-height: none !important; /* Remove max-height constraint */
        line-height: 1.4 !important; /* Adjust line height for larger text */
        padding: 4px 0 !important; /* Minimal vertical padding */
        margin: 0 !important; /* Minimal vertical margin */
    }

    /* Ensure all text elements within div.top-head.flex get the 15px size */
    div.top-head.flex * {
        font-size: 15px !important; /* Increase from 12px to 15px */
        line-height: 1.4 !important; /* Adjust line height for larger text */
    }

    /* Remove any height constraints from parent containers */
    div.top-head {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* Enable flexbox for child containers */
    .top-ul.flex, .contect-top.flex {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        flex-wrap: nowrap !important;
    }

    .top-ul.flex li, .contect-top.flex li {
        list-style: none !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* Mobile - keep original 12px size */
@media (max-width: 767px) {
    div.top-head.flex {
        font-size: 12px !important; /* Keep original 12px for mobile */
        height: auto !important; /* Remove height constraint */
        min-height: auto !important; /* Remove min-height constraint */
        max-height: none !important; /* Remove max-height constraint */
        line-height: 1.4 !important; /* Adjust line height */
        padding: 4px 0 !important; /* Minimal vertical padding */
        margin: 0 !important; /* Minimal vertical margin */
    }

    div.top-head.flex * {
        font-size: 12px !important; /* Keep original 12px for mobile */
        line-height: 1.4 !important; /* Adjust line height */
    }

    div.top-head {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
}

/* ========================================
   METHOD 1: GUARANTEED FIX - PHONE ICON OVERLAP
   Maximum CSS Specificity + Fixed Width
   ======================================== */

/* GUARANTEED FIX - Override everything with maximum specificity */
.Product-detail .container .product-full-details .product-details .add-call .call {
    min-width: 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    float: left !important;
    background: url(https://b2cimages.s3.amazonaws.com/generalimage/phone-icon.png) no-repeat !important;
    padding: 0 0 0 54px !important;
    height: 46px !important;
    margin-top: 1px !important;
    box-sizing: border-box !important;
}

/* ========================================
   PHONE ICON OVERLAP FIX - UNIVERSAL SOLUTION
   Targets all header implementations
   ======================================== */

/* Universal phone icon fix for all header types - MAXIMUM SPECIFICITY */
.top-contect .contect-top.flex li a,
.top-contect .contect-top li a,
ul.contect-top li a,
.contect-top > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Right-align icon and text within each link */
    gap: 8px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    color: #31383B !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
}

/* ========================================
   REQUEST CUSTOM QUOTE PAGE - PHONE ICON OVERLAP FIX
   Targets product detail section phone number
   ======================================== */

/* GUARANTEED FIX - Override everything with maximum specificity */
.Product-detail .container .product-full-details .product-details .add-call .call,
.Product-detail .container .product-full-details .product-details .call {
    min-width: 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    float: left !important;
    background: url(https://b2cimages.s3.amazonaws.com/generalimage/phone-icon.png) no-repeat !important;
    padding: 0 0 0 54px !important;
    height: 46px !important;
    margin-top: 1px !important;
    box-sizing: border-box !important;
}

/* ========================================
   SURGICAL FIX 1: REQUEST CUSTOM QUOTE BUTTON DESIGN
   Enhanced button design matching Add to Cart button
   ======================================== */

/* Enhanced Request Custom Quote button design */
#btncinora_Quote {
    background: linear-gradient(135deg, #30a8dc 0%, #1e7bb8 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(48, 168, 220, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 200px !important; /* Mobile/Tablet width */
    height: 46px !important; /* Match Add to Cart button effective height */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-family: 'Lato', Arial, sans-serif !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    float: left !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* DESKTOP ONLY: Increased width for better text fit */
@media (min-width: 768px) {
    #btncinora_Quote {
        min-width: 280px !important; /* Increased from 200px to 280px */
    }
}

/* MOBILE: Keep original width (already optimal) */
@media (max-width: 767px) {
    #btncinora_Quote {
        min-width: 200px !important; /* Keep original width */
    }
}

/* Hover effects */
#btncinora_Quote:hover {
    background: linear-gradient(135deg, #1e7bb8 0%, #1565a0 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(48, 168, 220, 0.4) !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
}

/* Active state */
#btncinora_Quote:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 6px rgba(48, 168, 220, 0.3) !important;
    background: linear-gradient(135deg, #1565a0 0%, #0f4c75 100%) !important;
}

/* Focus state */
#btncinora_Quote:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(48, 168, 220, 0.4) !important;
    border: 2px solid rgba(48, 168, 220, 0.6) !important;
}

/* ========================================
   SURGICAL FIX 2: QUESTION MARK ALIGNMENT
   Align question mark with Request Custom Quote button
   ======================================== */

/* Fix question mark vertical alignment with Request Custom Quote button */
#buttonDivCinoraCustomQuote {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 12px 10px 0 0 !important;
    position: relative !important; /* Changed from float: left to position: relative for tooltip positioning */
}

a.question-mark {
    display: flex !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-right: 14px !important; /* Creates horizontal gap like Add to Cart pages */
    float: none !important;
    position: relative !important; /* For tooltip positioning */
}

/* Modern tooltip for Custom Quote information */
.custom-quote-tooltip {
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important; /* Start from question mark */
    transform: none !important; /* Remove centering */
    background: #fff !important; /* Match site background */
    color: #424242 !important; /* Match site text color */
    border: 1px solid #30a8dc !important; /* Use site accent color */
    padding: 12px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-width: 280px !important; /* Fixed max width */
    min-width: 200px !important; /* Smaller min width */
    z-index: 1000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* Simple shadow */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    margin-bottom: 8px !important;
    font-family: 'Lato', Arial, sans-serif !important;
}

.custom-quote-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 20px !important; /* Arrow points to question mark */
    transform: none !important;
    border: 6px solid transparent !important;
    border-top-color: #30a8dc !important; /* Theme-colored arrow */
}

/* Show tooltip on hover */
a.question-mark:hover .custom-quote-tooltip,
a.question-mark:focus .custom-quote-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* DESKTOP: Optimal sizing */
@media (min-width: 768px) {
    .custom-quote-tooltip {
        max-width: 360px !important;
        min-width: 300px !important;
        font-size: 15px !important;
        padding: 18px 22px !important;
    }
}

/* TABLET: Medium sizing */
@media (min-width: 481px) and (max-width: 767px) {
    .custom-quote-tooltip {
        max-width: 300px !important;
        min-width: 260px !important;
        font-size: 14px !important;
        padding: 16px 20px !important;
    }
}

/* MOBILE: Right-aligned tooltip to prevent overflow */
@media (max-width: 480px) {
    .custom-quote-tooltip {
        position: absolute !important; /* Keep absolute positioning */
        bottom: 100% !important; /* Keep relative to question mark */
        right: 0 !important; /* Right-aligned to prevent overflow */
        left: auto !important;
        transform: none !important; /* Remove centering */
        max-width: calc(100vw - 40px) !important; /* Viewport-aware width */
        min-width: 200px !important;
        font-size: 12px !important;
        padding: 10px 14px !important;
        z-index: 1000 !important; /* Ensure it's on top */
    }
    
    .custom-quote-tooltip::after {
        right: 20px !important; /* Arrow points to question mark */
        left: auto !important;
        transform: none !important;
    }
    
    a.question-mark.active .custom-quote-tooltip {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* VERY SMALL MOBILE: Enhanced right-aligned */
@media (max-width: 360px) {
    .custom-quote-tooltip {
        position: absolute !important; /* Keep absolute positioning */
        bottom: 100% !important; /* Keep relative to question mark */
        right: 0 !important; /* Right-aligned to prevent overflow */
        left: auto !important;
        transform: none !important; /* Remove centering */
        max-width: calc(100vw - 20px) !important; /* Minimal margins */
        min-width: 180px !important;
        font-size: 11px !important;
        padding: 8px 12px !important;
        z-index: 1000 !important; /* Ensure it's on top */
    }
    
    .custom-quote-tooltip::after {
        right: 20px !important; /* Arrow points to question mark */
        left: auto !important;
        transform: none !important;
    }
}

/* ========================================
   SURGICAL FIX: DUAL MARGIN OPTIMIZATION
   Reduce both horizontal and vertical margins to 1%
   Desktop only (≥ 768px) - Mobile unaffected
   ======================================== */

@media (min-width: 768px) {
    .Product-detail .product-slider {
        margin-right: 1% !important; /* Reduce from 2% to 1% */
    }
    
    .Product-detail .product-details {
        margin-top: 1% !important; /* Reduce from 2% to 1% */
        width: 51% !important; /* Increase from 50% to 51% */
    }
}

/* Responsive adjustments for new header */
@media (min-width: 768px) and (max-width: 1024px) {
    .top-contect .contect-top.flex li a,
    .top-contect .contect-top li a,
    ul.contect-top li a,
    .contect-top > li > a {
        min-width: 180px !important;
    }
}

@media (min-width: 1025px) {
    .top-contect .contect-top.flex li a,
    .top-contect .contect-top li a,
    ul.contect-top li a,
    .contect-top > li > a {
        min-width: 200px !important;
    }
}

/* Mobile touch target optimization for new header */
@media (max-width: 767px) {
    .top-contect .contect-top.flex li a,
    .top-contect .contect-top li a,
    ul.contect-top li a,
    .contect-top > li > a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important; /* Right-align icon and text within each link */
        padding: 8px 12px !important;
    }
    
    /* MOBILE: Reset question mark spacing */
    .Product-detail .container .product-full-details .product-details a.question-mark {
        margin-right: 0 !important; /* Reset for mobile */
    }
}