/* =====================================================================================
   ARYAÉ PREMIUM WOOCOMMERCE CHECKOUT STYLING (PRODUCTION READY)
   ===================================================================================== */

/* -------------------------------------------------------------------------------------
   1. CORE SHEET LAYOUT & COLUMN CONFIGURATIONS
   ------------------------------------------------------------------------------------- */

/* Force parent block container into a cohesive layout grid */
.aryae-lp-checkout .wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: 1fr 38% !important; /* Forms (Left), Summary Sidebar (Right) */
    gap: 36px !important;                       /* Spacing gap between both columns */
    align-items: start !important;              /* Allows sidebar to stay fluid for sticky tracking */
}

/* Main Forms Column Container (Left Side) */
.aryae-lp-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
    box-sizing: border-box;
    background: var(--color-off-white-1) !important;
    border: 1px solid var(--color-light-brown-1) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px 20px !important;
    width: 100% !important; 
    max-width: 100% !important;
    margin: 0 !important;
    grid-column: 1 !important;                 /* Anchors structural alignment to column 1 */
    grid-row: 1 !important;                    /* Forces vertical top height alignment match */
}

/* Sidebar Order Summary Container (Right Side) */
.aryae-lp-checkout .wc-block-checkout__sidebar {
    box-sizing: border-box;
    background: var(--color-off-white-1) !important;
    border: 1px solid var(--color-light-brown-1) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px 20px !important;
    width: 100% !important; 
    max-width: 100% !important;
    margin: 0 !important;
    grid-column: 2 !important;                 /* Anchors structural alignment to column 2 */
    grid-row: 1 !important;                    /* Forces vertical top height alignment match */
    
    /* Interactive Sticky Behavior */
    position: sticky !important;
    top: 100px !important;                      /* Buffer limit threshold from top screen frame */
    z-index: 30 !important;
    height: fit-content !important;
    overflow: visible !important;
}

/* -------------------------------------------------------------------------------------
   2. TYPOGRAPHY, CORE HEADERS & DATA FIELDS
   ------------------------------------------------------------------------------------- */

/* Structural Form Section Titles */
.aryae-lp-checkout .wc-block-components-title {
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
}

/* Form Inputs and Select Dropdowns Reset */
.aryae-lp-checkout .wc-block-components-text-input input,
.aryae-lp-checkout .wc-blocks-components-select select {
    background-color: white !important; 
    border: 1px solid var(--color-light-brown-1) !important; 
    border-radius: var(--radius-sm) !important;
    color: var(--color-black-1) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    height: 48px !important;
}

/* Form Fields Labels and Inner Target Placeholders */
.aryae-lp-checkout .wc-block-components-text-input label,
.aryae-lp-checkout .wc-blocks-components-select__label,
.aryae-lp-checkout .wc-block-components-text-input input::placeholder {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: var(--color-dark-brown-1) !important;
}

/* Spacing Adjustments for Form Rows */
.aryae-lp-checkout .wc-block-components-address-form__first_name {
    padding-bottom: 12px !important;
}
.aryae-lp-checkout .wc-block-components-country-input {
    padding-top: 12px !important;
}

/* -------------------------------------------------------------------------------------
   3. PAYMENT SYSTEM OPTIONS & CARDS
   ------------------------------------------------------------------------------------- */

/* Gateway Row Checkbox Container Highlight Group */
.aryae-lp-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    background: var(--colour-grad-6) !important; 
    border: 1px solid var(--color-light-brown-1) !important; 
    border-radius: var(--radius-md) !important;
}

/* Active Payment Text */
.aryae-lp-checkout .wc-block-components-payment-method-label {
    font-family: var(--font-secondary) !important;
    font-weight: 600 !important;
    color: var(--color-black-1) !important;
}

/* -------------------------------------------------------------------------------------
   4. ORDER SUMMARY ITEMS ROW SETTINGS
   ------------------------------------------------------------------------------------- */

/* Order Summary Box Section Title */
.aryae-lp-checkout .wc-block-components-checkout-order-summary__title-text {
    font-family: var(--font-secondary) !important;
    font-size: var(--font-label-size) !important;
    font-weight: var(--font-label-weight) !important;
    letter-spacing: var(--font-label-ls) !important;
    text-transform: uppercase;
    color: var(--color-dark-brown-1) !important;
    margin: 0 0 16px !important;
}


.aryae-lp-checkout .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
    border: none !important;
}

/* Product Item Row Structural Alignment */
.aryae-lp-checkout .wc-block-components-order-summary-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 0 !important;
}

/* Thumbnail Image Frame Spacers */
.aryae-lp-checkout .wc-block-components-order-summary-item__image {
    position: relative !important;
    width: 56px !important;   
    height: 56px !important;  
    flex-shrink: 0 !important;
}
.aryae-lp-checkout .wc-block-components-order-summary-item__image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: var(--radius-md) !important;
    max-width: 100% !important;
}

/* Thumbnail Overlay Badge Counts */
.aryae-lp-checkout .wc-block-components-order-summary-item__image .wc-block-components-order-summary-item__quantity {
    background: var(--color-dark-brown-1) !important;
    color: var(--color-off-white-1) !important;
    font-family: var(--font-secondary) !important;
    font-size: 0.7rem !important;
    font-weight: bold !important;
}

/* Product Meta Row Description Block */
.aryae-lp-checkout .wc-block-components-order-summary-item__description {
    flex-grow: 1 !important;
    padding-left: 16px !important;
    gap: 0 !important;
}

/* Product Title (.ar-caption mapping override) */
.aryae-lp-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    composes: ar-caption; 
    font-family: var(--font-header) !important;
    font-size: var(--font-body-sm-size) !important; 
    line-height: var(--font-body-sm-lh, 1.4) !important;
    text-transform: none;
    text-decoration: none !important;
    color: var(--color-black-1) !important;
    margin: 0 0 2px 0 !important;
}

/* Base Unit Price Text Grouping */
.aryae-lp-checkout .wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
    font-family: var(--font-secondary) !important;
    font-size: var(--font-body-sm-size) !important; 
    color: grey !important;
}

/* Individual Item Subtotal Value String (Far Right) */
.aryae-lp-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
    font-family: 'Cronde', sans-serif !important;
    font-size: var(--font-body-md-size) !important;
    font-weight: 600 !important;
    color: grey !important;
    letter-spacing: 0.1em !important;
}

.aryae-lp-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
    border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    padding-bottom: 16px;
    padding-top: 20px;
}

/* -------------------------------------------------------------------------------------
   5. CALCULATIONS LEDGER & TAX SHEETS
   ------------------------------------------------------------------------------------- */

/* Row Matrix Calculations Base Item */
.aryae-lp-checkout .wc-block-components-totals-item {
    padding: 0 0 10px !important;
    font-family: var(--font-secondary) !important;
    font-size: var(--font-body-sm-size) !important;
}
.aryae-lp-checkout .wc-block-components-totals-item__label {
    color: var(--color-dark-brown-1) !important;
}
.aryae-lp-checkout .wc-block-components-totals-item__value {
    font-weight: 600 !important;
    color: grey !important;
}

/* Core Dynamic Price Values (Cronde Font Enforcement Group) */
.aryae-lp-checkout .wc-block-components-totals-item__value,
.aryae-lp-checkout .wc-block-components-totals-footer-item-tax-value {
    font-family: 'Cronde', sans-serif !important;
    letter-spacing: 0.1em !important;
}

/* Voucher Promo Code Interactive Chip Tags */
.aryae-lp-checkout .wc-block-components-chip {
    background: rgba(169, 124, 80, 0.1) !important;
    border: 1px solid var(--color-light-brown-1) !important;
    color: var(--color-dark-brown-1) !important;
    font-family: var(--font-secondary) !important;
    text-transform: uppercase;
}
.aryae-lp-checkout .wc-block-components-chip__remove svg {
    fill: var(--color-dark-brown-1) !important;
}

/* Master Grand Total Summary Footer Highlight Section */
.aryae-lp-checkout .wc-block-components-totals-footer-item {
    border-top: 1px solid var(--color-light-brown-1) !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
}
.aryae-lp-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: var(--color-black-1) !important;
}
.aryae-lp-checkout .wc-block-components-totals-footer-item-tax-value {
    font-size: 1.3rem !important;
    font-weight: bold !important;
    color: var(--color-black-1) !important;
}

/* Terms Disclaimer Paragraphs below calculation block */
.aryae-lp-checkout .wc-block-components-checkout-step__description, 
.aryae-lp-checkout .wc-block-checkout__terms {
    font-size: var(--font-label-size) !important;
    color: grey !important;
    opacity: 0.8;
}

/* -------------------------------------------------------------------------------------
   6. ACTIONS PANEL, SUBMIT BUTTONS & SYSTEM BANNERS
   ------------------------------------------------------------------------------------- */

/* Action Row Alignment Parameters */
.aryae-lp-checkout .wc-block-checkout__actions .wc-block-checkout__actions_row {
    align-items: center;
    display: flex;
    font-size: var(--wp--preset--font-size--small, 14px);
    gap: 8px;
    justify-content: flex-start !important;
    line-height: 1.4;
}

/* Premium Place Order Action Button Style Group */
.aryae-lp-checkout .wc-block-components-checkout-place-order-button {
    background: var(--colour-grad-12) !important;
    color: var(--color-off-white-1) !important;
    font-family: var(--font-secondary) !important;
    font-weight: var(--font-label-weight) !important;
    letter-spacing: var(--font-label-ls);
    text-transform: uppercase;
    border: 1px solid var(--color-petal) !important;
    border-radius: var(--radius-md) !important;
    padding: 16px 24px !important;
    box-shadow: rgba(105, 74, 29, 0.08) 0 4px 12px !important;
    transition: all 0.3s ease 0s;
    width: auto !important;
    text-shadow: rgba(0,0,0,1) 1px 1px 5px !important;
}

/* Action Button Performance Hover Transitions */
.aryae-lp-checkout .wc-block-components-checkout-place-order-button:hover {
    transform: translate3d(0px, -2px, 0px);
    filter: brightness(109%);
    box-shadow: rgba(145, 113, 93, 0.14) 0px 20px 50px;
}

/* System Banner Notifications Frame */
.aryae-lp-checkout .wc-block-components-notice-banner {
    border-radius: var(--radius-md) !important;
}

/* -------------------------------------------------------------------------------------
   7. DESTRUCTIVE SYSTEM CLEARANCE AND GLOBAL CLEANUP STRIPS
   ------------------------------------------------------------------------------------- */

/* Remove default inner layout borders completely */
.aryae-lp-checkout .wp-block-woocommerce-checkout-order-summary-block,
.aryae-lp-checkout .wc-block-components-order-summary,
.aryae-lp-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block,
.aryae-lp-checkout .wc-block-components-totals-wrapper {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Clean up unnecessary UI blocks & default native layout navigation nodes */
.aryae-lp-checkout .wc-block-components-product-metadata,
.aryae-lp-checkout .wc-block-components-checkout-return-to-cart-button,
.aryae-lp-checkout .wc-block-checkout__shipping-option .wc-block-components-checkout-step {
    display: none !important;
}

/* -------------------------------------------------------------------------------------
   8. MEDIA QUERIES (MOBILE RESIZING LAYER)
   ------------------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .aryae-lp-checkout .wc-block-components-sidebar-layout {
        grid-template-columns: 1fr !important; /* Forces layout tracking back to a clean fluid single block row */
        gap: 24px !important;
    }
    .aryae-lp-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
    .aryae-lp-checkout .wc-block-checkout__sidebar {
        grid-column: 1 !important;
        grid-row: auto !important;             /* Returns items into normal stacked stream flow */
    }
    .aryae-lp-checkout .wc-block-checkout__sidebar {
        position: relative !important;         /* Disables floating sticky behaviors across mobile viewport configurations */
        top: 0 !important;
    }
}


/* =====================================================================================
   ARYAÉ PREMIUM EMPTY CART & EMPTY CHECKOUT STYLING 
   ===================================================================================== */


.aryae-lp-checkout .wc-block-checkout-empty {
    display: flex !important;
}

/* Override the grid layout to a single column ONLY when the checkout/cart is empty */
.aryae-lp-checkout .wc-block-components-sidebar-layout:has(.wc-block-checkout-empty) {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
}

/* Style the Empty Cart Block & Empty Checkout Wrappers into a centered minimalist card */
.aryae-lp-checkout .wc-block-checkout-empty {
    box-sizing: border-box !important;
    background: var(--colour-grad-12) !important;
    border: 1px solid var(--color-green-soft) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px 30px !important;
    max-width: 650px !important;
    margin: 0px auto !important; /* Centers the container elegantly on your canvas */
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: rgba(105, 74, 29, 0.02) 0 4px 20px !important;
}

/* -------------------------------------------------------------------------------------
   2. ICON & TYPOGRAPHY ADJUSTMENTS
   ------------------------------------------------------------------------------------- */

/* Soften the default shopping cart SVG icon to fit the Zen/nature tone */
.aryae-lp-checkout .wc-block-checkout-empty__image {
    fill: var(--color-green-soft) !important;
    opacity: 0.35; /* Blends it softly into the off-white background card */
    margin-bottom: 24px !important;
    width: 50px !important;  /* Elegant, non-aggressive scaling */
    height: 50px !important;
}

/* Empty State Headings / Titles */
.aryae-lp-checkout .wc-block-checkout-empty__title {
    font-family: var(--font-secondary) !important;
    font-size: 1.1 rem !important;
    font-weight: 600 !important;
    color: var(--color-green-soft) !important;
    margin: 0 0 12px 0 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}

/* Clean up the native WooCommerce description paragraph text */
.aryae-lp-checkout .wc-block-checkout-empty__description {
    font-size: 0 !important; /* Volts out the original text entirely */
    visibility: hidden !important;
}

/* Inject a custom minimalist brand statement back in its place */
.aryae-lp-checkout .wc-block-checkout-empty__description::after {
    content: "Explore our hand-blend perfume collection. Find your signature fragrance today and pick the perfect scent to tuck into your bag." !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: var(--font-body-sm-size, 13px) !important;
    line-height: var(--font-body-sm-lh, 1.5) !important;
    color: var(--color-green-soft) !important;
    visibility: visible !important; /* Brings the new text layer back into view */
    display: block !important;
    max-width: 480px !important;
    margin: 0 auto !important;
}

/* -------------------------------------------------------------------------------------
   NATIVE GENERATEBLOCKS EMPTY STATE VISIBILITY CONTROLLER
   ------------------------------------------------------------------------------------- */

/* 2. Reveal the button ONLY if an empty checkout layout wrapper is actively rendered */
.aryae-lp-checkout:has(.wc-block-checkout-empty) .show-only-when-basket-empty {
    display: flex !important;
    margin-top: 24px !important;
}