/**
 * Strait-A Theme – WooCommerce Styles
 *
 * Provides clean styling for Cart, Checkout, Shop, and My Account pages
 * that matches the theme's dark aesthetic with gold accents.
 */

/* ==========================================================================
   WooCommerce Page Wrapper
   ========================================================================== */
.woocommerce-page {
    padding: 4rem 0;
    min-height: 60vh;
}

.woocommerce-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ==========================================================================
   Notices / Messages
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    border: 1px solid;
    list-style: none;
}

.woocommerce-message {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.3);
    color: #66d98e;
}

.woocommerce-info {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
    color: var(--kintsugi-gold, #d4af37);
}

.woocommerce-error {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
    color: #ff6b6b;
}

.woocommerce-message a,
.woocommerce-info a {
    color: var(--kintsugi-gold, #d4af37);
    text-decoration: underline;
}

/* ==========================================================================
   Cart Page
   ========================================================================== */
.woocommerce-cart .woocommerce-cart-form {
    margin-bottom: 2rem;
}

.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
}

.woocommerce table.shop_table th {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--ghost-white, #f0f0f0);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.woocommerce table.shop_table td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--ghost-white, #f0f0f0);
}

.woocommerce table.shop_table img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.375rem;
}

.woocommerce table.shop_table .product-remove a {
    color: #ff6b6b;
    font-size: 1.25rem;
    text-decoration: none;
}

.woocommerce table.shop_table .product-name a {
    color: var(--ghost-white, #f0f0f0);
    text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover {
    color: var(--kintsugi-gold, #d4af37);
}

/* Quantity input */
.woocommerce .quantity input[type="number"] {
    width: 60px;
    padding: 0.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    color: var(--ghost-white, #f0f0f0);
    font-size: 0.9rem;
}

/* Cart totals */
.woocommerce .cart_totals {
    max-width: 480px;
    margin-left: auto;
}

.woocommerce .cart_totals h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--kintsugi-gold, #d4af37);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--kintsugi-gold, #d4af37);
    color: #111;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: #e5c34a;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--kintsugi-gold, #d4af37);
    color: #111;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: #e5c34a;
}

/* ==========================================================================
   Checkout Page
   ========================================================================== */
.woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .woocommerce-checkout .col2-set {
        grid-template-columns: 1fr;
    }
}

.woocommerce-checkout h3 {
    font-size: 1.25rem;
    color: var(--kintsugi-gold, #d4af37);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

/* Form fields */
.woocommerce form .form-row {
    margin-bottom: 1rem;
}

.woocommerce form .form-row label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--ghost-white, #f0f0f0);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    color: var(--ghost-white, #f0f0f0);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--kintsugi-gold, #d4af37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.woocommerce form .form-row select {
    appearance: auto;
}

/* Order review */
.woocommerce-checkout #order_review {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 2rem;
    margin-top: 2rem;
}

.woocommerce-checkout #order_review h3 {
    margin-top: 0;
}

/* Payment methods */
.woocommerce-checkout #payment {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.woocommerce-checkout #payment ul.payment_methods li {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.woocommerce-checkout #payment ul.payment_methods li label {
    color: var(--ghost-white, #f0f0f0);
    cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 0.375rem;
    margin-top: 0.5rem;
    color: var(--ghost-muted, #999);
    font-size: 0.875rem;
}

.woocommerce-checkout #payment #place_order {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    margin-top: 1rem;
}

/* Guest checkout notice */
.woocommerce-checkout .showlogin,
.woocommerce-checkout .showcoupon {
    color: var(--kintsugi-gold, #d4af37);
    cursor: pointer;
    text-decoration: underline;
}

/* ==========================================================================
   Shop / Product Archive
   ========================================================================== */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce ul.products li.product {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.woocommerce ul.products li.product img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 1rem 1rem 0.5rem;
    font-size: 1rem;
    color: var(--ghost-white, #f0f0f0);
}

.woocommerce ul.products li.product .price {
    padding: 0 1rem;
    color: var(--kintsugi-gold, #d4af37);
    font-weight: 600;
}

.woocommerce ul.products li.product .button {
    margin: 1rem;
    display: block;
    text-align: center;
}

/* ==========================================================================
   My Account Page
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 220px;
    float: left;
    margin-right: 2rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--ghost-white, #f0f0f0);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--kintsugi-gold, #d4af37);
}

.woocommerce-account .woocommerce-MyAccount-content {
    overflow: hidden;
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 2rem;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ==========================================================================
   Empty Cart
   ========================================================================== */
.woocommerce .cart-empty {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.1rem;
    color: var(--ghost-muted, #999);
}

.woocommerce .return-to-shop a {
    display: inline-block;
    margin-top: 1rem;
}

/* ==========================================================================
   WooCommerce Block Cart & Checkout (newer WC versions)
   ========================================================================== */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    color: var(--ghost-white, #f0f0f0);
}

.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-checkout .wc-block-checkout__main {
    color: inherit;
}

/* Block-based inputs */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-combobox .components-combobox-control input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--ghost-white, #f0f0f0) !important;
    border-radius: 0.375rem !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus {
    border-color: var(--kintsugi-gold, #d4af37) !important;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15) !important;
}

/* Block-based buttons */
.wc-block-components-button:not(.is-link) {
    background-color: var(--kintsugi-gold, #d4af37) !important;
    color: #111 !important;
    border: none !important;
    border-radius: 0.5rem !important;
}

.wc-block-components-button:not(.is-link):hover {
    background-color: #e5c34a !important;
}


/* ==========================================================================
   STRIPE PAYMENT ELEMENT – COMPLETE MOBILE FIX (v2)
   Problem: Stripe Payment Element iframe renders too narrow on mobile,
   causing its internal fields to stack vertically and clip on the right.
   The root cause is excessive padding eating into available width.
   ========================================================================== */

/* ── 1. Let the payment section reach full viewport width on mobile ── */
@media (max-width: 768px) {

    /* Remove horizontal padding from the WooCommerce page container
       so the checkout section gets every pixel of screen width */
    .woocommerce-page .container,
    .woocommerce-checkout .container,
    .woocommerce-checkout .woocommerce {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* The checkout form wrapper – flush to edges */
    .woocommerce-checkout form.checkout,
    .woocommerce-checkout .woocommerce-checkout-payment {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* The #payment section – minimal padding so Stripe gets full width */
    .woocommerce-checkout #payment {
        padding: 0.75rem 0.5rem !important;
        border-radius: 0 !important;   /* edge-to-edge on small screens */
    }

    /* payment_box is the direct parent of the Stripe iframe mount point –
       strip padding so the iframe isn't doubly squeezed */
    .woocommerce-checkout #payment div.payment_box {
        padding: 0.5rem 0 !important;
        margin: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    /* ── 2. Stripe mount point and iframe – fill 100% of what's available ── */
    .StripeElement,
    .StripeElement--focus,
    .StripeElement--invalid,
    .StripeElement--complete,
    #wc-stripe-payment-element-form,
    #wc-stripe-card-element,
    .wc-stripe-elements-field,
    .stripe-card-element,
    [id^="stripe-"],
    [class*="stripe-element"],
    [class*="StripeElement"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Stripe's private iframe wrapper divs */
    .__PrivateStripeElement,
    .__PrivateStripeElement-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;   /* allow scroll if Stripe still clips */
        -webkit-overflow-scrolling: touch !important;
    }

    /* The actual iframe Stripe injects */
    .__PrivateStripeElement iframe,
    .__PrivateStripeElement-input iframe,
    #payment .payment_box iframe,
    .wc-stripe-elements-field iframe,
    [class*="StripeElement"] iframe,
    [id*="stripe"] iframe {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* ── 3. WooCommerce Blocks-based Stripe (newer WC) ── */
    .wc-block-components-payment-method-label,
    .wc-block-gateway-container,
    .wc-block-components-payment-pass-the-data {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* ── 4. Order review – reduce padding to give more breathing room ── */
    .woocommerce-checkout #order_review {
        padding: 1rem 0.75rem !important;
    }

    /* ── 5. Keep the Place Order button full-width and thumb-friendly ── */
    .woocommerce-checkout #payment #place_order {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        margin-top: 1rem !important;
        box-sizing: border-box !important;
    }

    /* ── 6. Bring back small amount of padding to the page itself
            so other content (headings, notices) isn't flush to screen edge ── */
    .woocommerce-page {
        padding: 1.5rem 0 !important;
    }

    .woocommerce-checkout h3,
    .woocommerce form .form-row {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Extra-small phones (< 400px) – every pixel counts */
@media (max-width: 400px) {
    .woocommerce-checkout #payment {
        padding: 0.5rem 0.25rem !important;
    }

    .woocommerce-checkout #payment div.payment_box {
        padding: 0.25rem 0 !important;
    }
}
   Responsive Tweaks
   ========================================================================== */
@media (max-width: 600px) {
    .woocommerce table.shop_table {
        font-size: 0.85rem;
    }

    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td {
        padding: 0.5rem;
    }

    .woocommerce table.shop_table img {
        width: 40px;
        height: 40px;
    }

    .woocommerce-page {
        padding: 2rem 0;
    }

    /* Checkout columns stack on mobile */
    .woocommerce-checkout .col2-set {
        grid-template-columns: 1fr !important;
    }

    /* Give the payment box breathing room and prevent iframe overflow */
    .woocommerce-checkout #payment {
        padding: 1rem !important;
    }

    .woocommerce-checkout #payment div.payment_box {
        padding: 0.75rem !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Stripe card fields full width on small screens */
    .StripeElement,
    .wc-stripe-elements-field,
    .__PrivateStripeElement,
    .__PrivateStripeElement iframe {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Order review padding */
    .woocommerce-checkout #order_review {
        padding: 1rem !important;
    }

    /* Place order button full width */
    .woocommerce-checkout #payment #place_order {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 0.875rem !important;
    }
}

/* ==========================================================================
   STRIPE TEXT VISIBILITY FIX
   
   Problem: body { color: #f8f8ff } (near-white) cascades into the Stripe
   mount point. Stripe's JS reads computed styles of the host element to set
   its internal iframe text color — so it renders WHITE text on a WHITE card.
   Users can type but see nothing.

   Fix: Force the Stripe mount point and its parent to have dark text and
   a white background so Stripe initialises with readable colours.
   CSS cannot reach inside the iframe itself, so we also inject an
   `appearance` override via wp_head JS (see inc/woocommerce.php).
   ========================================================================== */

/* The white card Stripe renders — give it a proper white background context */
.woocommerce-checkout #payment div.payment_box {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* Stripe mount point — dark text so Stripe JS reads the right inherited color */
#wc-stripe-payment-element-form,
#wc-stripe-card-element,
.wc-stripe-elements-field,
.stripe-card-element,
#payment .payment_box .woocommerce-SavedPaymentMethods,
.payment_box .wc-stripe-elements-field {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* Override theme ghost-white on the StripeElement mount div */
.StripeElement {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* Stripe "Link" / Payment Element outer wrapper — white so card looks right */
.wc-block-components-payment-method {
    color: #1a1a1a !important;
}

/* Ensure payment method list labels stay legible against dark theme bg */
.woocommerce-checkout #payment ul.payment_methods li label,
.woocommerce-checkout #payment ul.payment_methods li {
    color: var(--ghost-white, #f0f0f0) !important;
    background: transparent !important;
}