/**
 * Premium Checkout Styling for The Secret Post
 * Applied to standard WooCommerce Checkout and order-pay endpoints.
 */

/* 1. Fields and Form Controls */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select {
    border: 1px solid rgba(143, 120, 104, 0.25) !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    background-color: #ffffff !important;
    color: #241915 !important;
    font-family: Georgia, serif !important;
    font-size: 15px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
    border-color: #6b4703 !important;
    box-shadow: 0 0 0 4px rgba(107, 71, 3, 0.1) !important;
    outline: none !important;
}

.woocommerce-checkout label {
    font-family: Georgia, serif !important;
    font-weight: 600 !important;
    color: #241915 !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
}

.woocommerce-checkout .required {
    color: #b02a37 !important;
    text-decoration: none !important;
}

/* 2. Order Review Table */
.woocommerce-checkout-review-order-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid rgba(143, 120, 104, 0.15) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fffdfc !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 16px 20px !important;
    font-family: Georgia, serif !important;
    border-top: 1px solid rgba(143, 120, 104, 0.1) !important;
    border-bottom: none !important;
    text-align: left !important;
}

.woocommerce-checkout-review-order-table thead th {
    border-top: none !important;
    background: rgba(143, 120, 104, 0.05) !important;
    font-weight: 700 !important;
    color: #241915 !important;
}

.woocommerce-checkout-review-order-table td.product-name {
    color: #5f4c43 !important;
    font-size: 15px !important;
}

.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table tr.order-total td,
.woocommerce-checkout-review-order-table tr.order-total th {
    font-weight: 700 !important;
    color: #241915 !important;
    font-size: 16px !important;
}

/* 3. Notices & Alerts */
.woocommerce-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    font-family: Georgia, serif !important;
    border-radius: 16px !important;
    padding: 18px 24px 18px 55px !important; /* Larger left padding to prevent icon overlapping */
    border: 1px solid rgba(143, 120, 104, 0.15) !important;
    background-color: #fffdf9 !important;
    box-shadow: 0 4px 12px rgba(36, 25, 21, 0.03) !important;
    color: #5f4c43 !important;
    margin-bottom: 24px !important;
    line-height: 1.5 !important;
    position: relative !important;
}

.woocommerce-message {
    border-left: 4px solid #9961a7 !important; /* Dunning Purple Accent */
}

.woocommerce-info {
    border-left: 4px solid #6b4703 !important; /* Theme Golden Brown Accent */
}

.woocommerce-error {
    border-left: 4px solid #b02a37 !important;
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 55px !important;
}

.woocommerce-error li {
    margin-bottom: 0 !important;
    list-style: none !important;
}

/* 4. Payment Methods Container */
#payment {
    background: #fffdf9 !important;
    border: 1px solid rgba(141, 95, 59, 0.15) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    margin-top: 24px !important;
}

#payment ul.payment_methods {
    border-bottom: 1px solid rgba(141, 95, 59, 0.1) !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    list-style: none !important;
    padding-left: 0 !important;
}

#payment ul.payment_methods li {
    margin-bottom: 12px !important;
}

#payment div.payment_box {
    background-color: rgba(141, 95, 59, 0.04) !important;
    border: 1px solid rgba(141, 95, 59, 0.08) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    color: #5f4c43 !important;
    font-family: Georgia, serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 10px 0 !important;
}

#payment div.payment_box::before {
    display: none !important; /* Remove standard CSS arrow */
}

/* 5. Checkout Buttons */
.woocommerce-checkout #place_order,
.woocommerce-checkout-payment #place_order,
.woocommerce-checkout button.button,
.woocommerce-checkout a.button,
.woocommerce-page button.button.alt,
.woocommerce-page #respond input#submit.alt {
    display: inline-block !important;
    background: #9961a7 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 36px !important;
    font-size: 14px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(153, 97, 167, 0.2) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    text-align: center !important;
    width: auto !important;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout-payment #place_order:hover,
.woocommerce-checkout button.button:hover,
.woocommerce-checkout a.button:hover,
.woocommerce-page button.button.alt:hover {
    background: #844c92 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(153, 97, 167, 0.3) !important;
    color: #ffffff !important;
}

.woocommerce-checkout #place_order:active,
.woocommerce-checkout button.button:active,
.woocommerce-checkout a.button:active {
    transform: translateY(0) !important;
}

/* Coupon section input height fix */
.woocommerce-form-coupon input.input-text {
    height: auto !important;
}





/* 8. Beautiful Floating Terms Alert */
.tsp-terms-alert {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    background: #fff5f5 !important;
    border: 1px solid #ffcccc !important;
    border-left: 5px solid #b02a37 !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(176, 42, 55, 0.12) !important;
    z-index: 100000 !important;
    font-family: Georgia, serif !important;
    font-size: 15px !important;
    color: #b02a37 !important;
    max-width: 400px !important;
    animation: tspSlideIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), tspShake 0.4s 0.3s !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

@keyframes tspSlideIn {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes tspShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* 9. Field Validation Error Highlight */
.tsp-input-error {
    border-color: #b02a37 !important;
    background-color: #fff9f9 !important;
    box-shadow: 0 0 0 4px rgba(176, 42, 55, 0.1) !important;
}

/* 10. Notices Layout - Side by Side */
.tsp-notices-row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
    width: 100% !important;
}
.tsp-notices-row .woocommerce-info,
.tsp-notices-row .woocommerce-form-coupon-toggle {
    flex: 1 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
    .tsp-notices-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* 11. Stripe Express Checkout Polish (Apple Pay / Google Pay) */
#wc-stripe-payment-request-wrapper {
    background: #fffdf9 !important;
    border: 1px solid rgba(141, 95, 59, 0.15) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 4px 15px rgba(36, 25, 21, 0.02) !important;
    box-sizing: border-box !important;
}
#wc-stripe-payment-request-button {
    border-radius: 12px !important;
    overflow: hidden !important;
}
#wc-stripe-payment-request-separator {
    font-family: Georgia, serif !important;
    font-size: 14px !important;
    color: #8f7868 !important;
    font-weight: 600 !important;
    margin: 20px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* 12. Checkboxes Polished to be Rounded Checks */
.woocommerce-checkout input[type="checkbox"],
.wcf-checkout-page input[type="checkbox"],
#shipping_address input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(141, 95, 59, 0.3) !important;
    border-radius: 50% !important; /* Perfect circles! */
    outline: none !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    margin-right: 10px !important;
    transition: all 0.2s ease !important;
}

.woocommerce-checkout input[type="checkbox"]:checked,
.wcf-checkout-page input[type="checkbox"]:checked,
#shipping_address input[type="checkbox"]:checked {
    border-color: #9961a7 !important;
    background-color: #9961a7 !important;
}

.woocommerce-checkout input[type="checkbox"]:checked::after,
.wcf-checkout-page input[type="checkbox"]:checked::after,
#shipping_address input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
}

/* 13. Sand-colored Background for Checkout Containers */
.woocommerce-checkout,
.wcf-checkout-page,
.woocommerce-order-pay {
    background-color: #fcfaf6 !important; /* Sand-colored background */
    padding: 40px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(141, 95, 59, 0.1) !important;
    box-shadow: 0 12px 40px rgba(59, 35, 21, 0.03) !important;
    max-width: 1250px !important; /* Made checkout wider on desktop */
    margin: 40px auto !important;
    box-sizing: border-box !important;
}

/* 14. Force Header and Main Navigation Menus on CartFlows Step Pages */
body.wcf-checkout-template-minimal header,
body.wcf-checkout-template-minimal .site-header,
body.wcf-checkout-template-minimal #masthead,
body.wcf-checkout-template-minimal nav,
body.wcf-checkout-template-minimal .main-header-bar,
body.wcf-checkout-template-minimal .main-navigation,
body.wcf-checkout-template-minimal .elementor-location-header,
body.cartflows-template-canvas header,
body.cartflows-template-canvas nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 99999 !important;
}





/* 17. Ship to a different address styling polish */
#ship-to-different-address {
    margin-top: 30px !important;
    padding: 15px 20px !important;
    background: rgba(141, 95, 59, 0.04) !important;
    border: 1px solid rgba(141, 95, 59, 0.1) !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: bold !important;
    color: #5b3a26 !important;
}
#ship-to-different-address label {
    margin-bottom: 0 !important;
    cursor: pointer !important;
}

/* 18. Style Stripe Link Retry / payment button to match the theme purple */
.woocommerce-checkout #payment button,
.woocommerce-checkout #payment input[type="submit"],
.woocommerce-checkout #payment .button,
#payment button.button,
#payment .button.retry,
.stripe-retry-button,
#stripe-retry-button,
button.retry,
.wc-stripe-payment-request-wrapper button,
#wc-stripe-payment-request-button button {
    background-color: #9961a7 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 999px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 12px rgba(153, 97, 167, 0.15) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    display: inline-block !important;
}

.woocommerce-checkout #payment button:hover,
.woocommerce-checkout #payment input[type="submit"]:hover,
.woocommerce-checkout #payment .button:hover,
#payment button.button:hover,
#payment .button.retry:hover,
.stripe-retry-button:hover,
#stripe-retry-button:hover,
button.retry:hover,
.wc-stripe-payment-request-wrapper button:hover,
#wc-stripe-payment-request-button button:hover {
    background-color: #844c92 !important;
    box-shadow: 0 6px 16px rgba(153, 97, 167, 0.25) !important;
    color: #ffffff !important;
}

/* 19. Mobile Responsiveness Polish */
@media (max-width: 767px) {
    /* Reduce container padding and margins to maximize width */
    .woocommerce-checkout,
    .wcf-checkout-page,
    .woocommerce-order-pay {
        padding: 12px 6px !important;
        margin: 10px auto !important;
        border-radius: 16px !important;
        border: none !important;
        box-shadow: none !important;
        background-color: #fcfaf6 !important;
    }

    /* Progress bar adjustments for smaller screens */
    .tsp-checkout-progress {
        margin-bottom: 25px !important;
        padding: 0 5px !important;
    }
    .tsp-step-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
    .tsp-step-label {
        font-size: 11px !important;
        margin-top: 6px !important;
    }
    .tsp-progress-step:not(:last-child)::after {
        top: 16px !important;
    }

    /* Form Fields and Labels */
    .form-row {
        margin-bottom: 12px !important;
    }
    .woocommerce-input-wrapper input,
    .woocommerce-input-wrapper select,
    .woocommerce-input-wrapper textarea,
    input.input-text {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    /* Checkout Navigation buttons */
    .tsp-checkout-nav {
        margin-top: 20px !important;
        padding-top: 15px !important;
    }
    .tsp-next-btn {
        padding: 12px 30px !important;
        font-size: 13px !important;
        width: 100% !important; /* Full width button on mobile */
        text-align: center !important;
    }
    .tsp-prev-btn {
        padding: 11px 20px !important;
        font-size: 12px !important;
    }

    /* Payment and Order Review Sections */
    #order_review,
    .wcf-order-review,
    .woocommerce-checkout-review-order {
        padding: 0 !important;
    }
    
    /* Order review table padding */
    .shop_table.woocommerce-checkout-review-order-table th,
    .shop_table.woocommerce-checkout-review-order-table td,
    .wcf-order-review th,
    .wcf-order-review td {
        padding: 10px 5px !important;
        font-size: 13px !important;
    }
    
    /* Expand table text and line heights */
    .shop_table td.product-name,
    .wcf-order-review td.product-name {
        line-height: 1.4 !important;
        font-size: 13px !important;
        word-break: break-word !important;
    }
    
    /* Adjust Stripe Link layout on mobile */
    #wc-stripe-payment-request-wrapper {
        padding: 10px 6px !important;
        margin-bottom: 20px !important;
    }
    
    /* Adjust Order Bump for small screens */
    .wcf-order-bump-wrap,
    #wcf-order-bump {
        padding: 12px 8px !important;
        margin-top: 15px !important;
    }

    /* Force 100% width on ALL checkout elements globally on mobile */
    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review,
    .woocommerce-checkout .col-1,
    .woocommerce-checkout .col-2,
    .wcf-checkout-page #customer_details,
    .wcf-checkout-page #order_review,
    .wcf-checkout-page .wcf-checkout-section-main,
    .wcf-checkout-page .wcf-checkout-section-side,
    .woocommerce-order-pay #order_review,
    ul.payment_methods,
    ul.payment_methods li,
    .payment_methods {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Restore comfortable padding to payment area on mobile to prevent elements from touching borders */
    .woocommerce-checkout #payment,
    .wcf-checkout-page #payment,
    .woocommerce-order-pay #payment,
    .woocommerce-order-pay .woocommerce-checkout-payment {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 14px 6px !important;
        box-sizing: border-box !important;
        background: #fffdf9 !important;
        border: 1px solid rgba(141, 95, 59, 0.1) !important;
        border-radius: 12px !important;
    }

    /* Style the payment box inner container to maximize content space */
    .woocommerce-checkout #payment div.payment_box,
    .wcf-checkout-page #payment div.payment_box,
    #payment div.payment_box,
    .payment_box {
        padding: 10px 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 8px !important;
    }

    /* Centralize and align terms and privacy text on mobile */
    .woocommerce-privacy-policy-text,
    .form-row.terms,
    .wc-terms-and-conditions {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 16px !important;
        text-align: left !important;
    }
    .woocommerce-form__label-for-checkbox {
        display: inline-flex !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .woocommerce-form__label-for-checkbox input[type="checkbox"] {
        margin-top: 4px !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
        width: 18px !important;
        height: 18px !important;
    }

    /* Centralize Place Order button and make it full width for comfortable touch target */
    .woocommerce-checkout #payment #place_order,
    .woocommerce-checkout-payment #place_order,
    #place_order {
        float: none !important;
        display: block !important;
        margin: 15px auto 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 16px 24px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Style the saved payment cards list for comfortable spacing and prevents text squeezing */
    ul.payment_methods li {
        padding: 15px 10px !important;
        border-bottom: 1px solid rgba(141, 95, 59, 0.08) !important;
        list-style: none !important;
    }
    ul.payment_methods li label {
        display: inline-block !important;
        width: calc(100% - 40px) !important;
        vertical-align: middle !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }
    ul.payment_methods li input[type="radio"] {
        vertical-align: middle !important;
        margin-right: 12px !important;
        width: 18px !important;
        height: 18px !important;
        display: inline-block !important;
    }

    /* Force show and style native select elements on mobile to prevent Select2 dropdown bugs */
    .woocommerce-checkout select,
    .wcf-checkout-page select,
    select.country_select,
    select.state_select {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 48px !important;
        background-color: #ffffff !important;
        border: 1px solid rgba(141, 95, 59, 0.2) !important;
        border-radius: 12px !important;
        padding: 10px 14px !important;
        font-family: Arial, sans-serif !important;
        font-size: 14px !important;
        color: #241915 !important;
        -webkit-appearance: select !important;
        -moz-appearance: select !important;
        appearance: select !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure the select2 span containers are hidden on mobile to avoid duplication */
    .woocommerce-checkout .select2-container,
    .wcf-checkout-page .select2-container {
        display: none !important;
    }
}

/* 20. Desktop Full-Width Layout for Order Bump and Payment at Bottom */
@media (min-width: 768px) {
    /* Force 100% width on payment and order bump since they are moved to the bottom of the form */
    form.checkout #payment,
    form.checkout .wcf-order-bump-wrap,
    form.checkout #wcf-order-bump,
    form.checkout .wcf-bump-order-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        clear: both !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }
}