/* ========================================= */
/* --- 1. CUSTOM CHECKOUT TABS ---           */
/* ========================================= */

#checkout-personal-information-step .nav-link {
    background-color: #008080 !important; /* The Teal Color */
    color: #ffffff !important; /* White Text */
    border-radius: 5px !important; /* Rounded corners */
    padding: 10px 20px !important; /* Makes it a nice box shape */
    margin-right: 10px !important; /* Space between the two boxes */
    border: none !important;
    font-weight: bold;
    transition: all 0.3s ease;
}

/* Make the ACTIVE tab a highly contrasting color so it is obvious */
#checkout-personal-information-step .nav-link.active {
    background-color: #D35400 !important; /* A bold, contrasting Burnt Orange */
    color: #ffffff !important; /* Keep text white */
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3) !important; /* Slightly deeper shadow */
    transform: scale(1.02); /* Makes the active box pop out ever so slightly */
}

/* Make it light up slightly when they hover their mouse over it */
#checkout-personal-information-step .nav-link:hover {
    background-color: #009999 !important; /* Lighter Teal */
    color: #ffffff !important;
}


/* ========================================= */
/* --- 2. INVOICE CHECKBOX TEAL WRAPPER ---  */
/* ========================================= */

/* Target the specific div wrapping the invoice checkbox */
#checkout-addresses-step .form-check {
    background-color: #008080 !important; /* Teal background */
    padding: 12px 20px 12px 35px !important; /* Left padding gives room for the checkbox */
    border-radius: 5px !important;
    display: inline-block !important; /* Makes the box only as wide as the text */
    margin-top: 15px !important;
    border: 1px solid #005959 !important; /* Darker border for depth */
}

/* Ensure the text inside the teal box is white and bold */
#checkout-addresses-step .form-check .form-check-label {
    color: #ffffff !important;
    font-weight: bold !important;
    cursor: pointer; /* Makes it obvious it can be clicked */
}

/* Adjust the physical checkbox to line up nicely inside the padded box */
#checkout-addresses-step .form-check .form-check-input {
    margin-top: 4px !important;
    margin-left: -25px !important; /* Pulls the checkbox into the left padding area */
    cursor: pointer;
}


/* ========================================= */
/* --- 3. PAYMENT OPTIONS (STRIPE & PAYPAL) -*/
/* ========================================= */

.payment-option__form-check {
    background-color: #008080 !important; /* Teal background */
    padding: 15px 20px !important; /* Thick padding */
    border-radius: 5px !important; 
    margin-bottom: 15px !important; 
    display: flex !important; 
    align-items: center !important; 
    border: 1px solid #005959 !important; 
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease;
    
    /* NEW: Shrinks the box to fit the text perfectly */
    width: max-content !important; 
    /* NEW: Required for the click trick below */
    position: relative !important; 
}

/* Make the payment text white and bold */
.payment-option__form-check .payment-option__label {
    color: #ffffff !important;
    font-weight: bold !important;
    margin-bottom: 0 !important;
    margin-left: 15px !important; 
    cursor: pointer !important;
    font-size: 16px !important; 
}

/* NEW: Creates an invisible clickable layer over the entire teal box */
.payment-option__form-check .payment-option__label::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

/* Make the box light up slightly when hovered over */
.payment-option__form-check:hover {
    background-color: #009999 !important; 
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2) !important;
}


/* ========================================= */
/* --- 4. TERMS OF SERVICE BOX ---           */
/* ========================================= */

#conditions-to-approve {
    background-color: #008080 !important; /* Teal background */
    padding: 18px 20px !important; /* Padded box */
    border-radius: 5px !important;
    margin-top: 25px !important; /* Space above it */
    border: 1px solid #005959 !important;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1) !important;
}

/* Align the checkbox and text */
#conditions-to-approve ul li {
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
}

/* Add space between checkbox and text */
#conditions-to-approve .custom-checkbox {
    margin-right: 15px !important;
}

/* Make the ToS text white and bold */
#conditions-to-approve label {
    color: #ffffff !important;
    font-weight: bold !important;
    margin-bottom: 0 !important;
}

/* Make the clickable link Gold so it contrasts with the Teal */
#conditions-to-approve label a {
    color: #FFD700 !important; /* Bright Gold */
    text-decoration: underline !important;
    font-weight: 900 !important;
}

#conditions-to-approve label a:hover {
    color: #ffffff !important; /* Turns white on hover */
}

/* ========================================= */
/* --- 5. REPLACE STUBBORN STRIPE TEXT ---   */
/* ========================================= */

/* Step A: Shrink the original stubborn text to size zero so it disappears */
#payment-option-1-additional-information p,
#payment-option-1-additional-information section {
    font-size: 0 !important; 
}

/* Step B: Inject the new text perfectly into the empty space */
#payment-option-1-additional-information p::after,
#payment-option-1-additional-information section::after {
    content: "You will be redirected to Stripe Host Payment page." !important;
    font-size: 15px !important; /* Restores the font size for the new text */
    color: #6c757d !important; /* A professional grey color */
    display: block !important;
    margin-top: 5px !important;
    margin-left: 5px !important;
}

/* ========================================= */
/* --- 6. REMOVE TOP MENU HOVER DROPDOWN --- */
/* ========================================= */

/* Force hide the massive mega menu container layout completely */
#top-menu .sub-menu, 
#top-menu .dropdown-menu, 
#top-menu .js-sub-menu,
.popover.sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    box-shadow: none !important;
}
/* ========================================= */
/* --- 7. ACTIVE PLACE ORDER BUTTON GREEN ---*/
/* ========================================= */

/* When the button is unlocked and ready to click */
#payment-confirmation button:not(:disabled) {
    background-color: #2ecc71 !important; /* Smooth Emerald Green */
    border-color: #27ae60 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2) !important;
}

/* Give it a nice interactive dark green lift when hovered */
#payment-confirmation button:not(:disabled):hover {
    background-color: #27ae60 !important; /* Darker Green */
    transform: translateY(-1px); /* Slight lift effect */
}
/* =================================================== */
/* --- 8. TOP MENU FULL BOX CLICKABLE FIX (COMPACT) ---*/
/* =================================================== */

/* 1. Strip the padding from the outer menu containers so they don't block clicks */
#top-menu li, 
#top-menu .nav-item {
    padding: 0 !important; 
    cursor: pointer !important;
}

/* 2. Force the link to expand to 100% and drop padding to slim the buttons down */
#top-menu a,
#top-menu .dropdown-item {
    display: block !important;
    padding: 6px 15px !important; /* FIXED: Drastically reduced vertical padding from 15px down to 6px */
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   --- 9. DESKTOP VERTICAL COMPACTION & IMAGE AUTO-SCALING ---
   ========================================================================== */

@media (min-width: 992px) {
    
    /* CRUSH THE VERTICAL GAP ABOVE AND BELOW THE LOGO/SEARCH ROW */
    #header .header-top {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        margin-bottom: 0 !important;
    }
    #header .header-top .container,
    #header .header-top .row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* REMOVE EXTRA SPACE AROUND THE MAIN HORIZONTAL NAVIGATION BAR */
    .menu, 
    .ps-top-menu, 
    #top-menu-wrapper {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* SCALE DOWN PRODUCT IMAGE FORCEFULLY TO PULL THUMBNAILS UP ABOVE THE FOLD */
    .product-cover img, 
    .js-qv-product-cover,
    .images-container img,
    [id*="product-description-short"] img,
    .product-images img,
    img.img-fluid.js-qv-product-cover {
        max-height: 380px !important;   /* FIXED: Lowered restriction down to 380px to save massive space */
        width: auto !important;          /* Keeps mannequin proportions completely clean */
        max-width: 100% !important;
        margin: 0 auto !important;       /* Clean center alignment */
        object-fit: contain !important;  /* Eliminates accidental compression distortions */
        display: block !important;
    }

    /* PULL UP THE TEXT BLOCK AND ADD TO CART ROW SLIGHTLY */
    .product-information {
        padding-top: 0 !important;
    }
}