/* Truo Custom Checkout — tc-* namespace */
:root {
    --tc-bg:    #f8f7f4;
    --tc-white: #ffffff;
    --tc-border:#e5e1d8;
    --tc-ink:   #1a1814;
    --tc-muted: #7a7570;
    --tc-gold:  #b8952a;
    --tc-green: #2a7a4f;
    --tc-gbg:   #f0faf4;
    --tc-red:   #e53935;
    --tc-sh:    0 2px 20px rgba(26,24,20,.08);
    --tc-shl:   0 8px 40px rgba(26,24,20,.14);
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

#tc-wrap,
#tc-wrap * {
    font-family: 'Poppins', sans-serif !important;
}
body.woocommerce-checkout { background: var(--tc-bg) !important; }

#tc-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 16px 80px;
}

/* ── Card panel ─────────────────────────────────────────────────── */
.tc-card {
    background: var(--tc-white);
    border: 1px solid var(--tc-border);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--tc-sh);
    margin-bottom: 16px;
}

/* ── Typography ─────────────────────────────────────────────────── */
.tc-title    { font-size: 24px; font-weight: 700; color: var(--tc-ink); margin: 0 0 0px; letter-spacing: -.02em; }
.tc-sub      { font-size: 16px; color: var(--tc-muted); margin: 0 0 24px; }
/* Prevent iOS zoom on input focus — font-size must be >= 16px */
#tc-s1 .tc-field input {
    font-size: 16px !important;
}
/* ── Fields ─────────────────────────────────────────────────────── */
.tc-fields  { display: flex; flex-direction: column; gap: 14px; }
.tc-row2    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tc-field   { display: flex; flex-direction: column; gap: 5px; }
.tc-field label {
    font-size: 11px; font-weight: 700; color: var(--tc-muted);
    text-transform: uppercase; letter-spacing: .07em;
}
.tc-field input {
    padding: 14px 16px;
    border: 1.5px solid var(--tc-border); border-radius: 9px;
    font-size: 15px; color: var(--tc-ink); background: var(--tc-bg);
    outline: none; box-sizing: border-box; width: 100%;
    transition: border-color .18s, background .18s;
}
.tc-field input:focus { border-color: var(--tc-ink); background: #fff; }

/* ── Loyalty toggle bar ─────────────────────────────────────────── */
.tc-loyalty {
    border: 1.5px solid var(--tc-border); border-radius: 10px;
    padding: 14px 16px; transition: border-color .2s, background .2s; margin-top: 4px;
}
.tc-loyalty.tc-loyalty--on {
    border-color: var(--tc-gold);
    background: linear-gradient(135deg,#fffef8,#fef9e5);
}
.tc-loyalty-inner { display: flex; align-items: center; gap: 12px; }
.tc-loyalty-icon  { font-size: 20px; flex-shrink: 0; }
.tc-loyalty-text  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-loyalty-text strong { font-size: 13px; font-weight: 600; color: var(--tc-ink); }
.tc-loyalty-text span   { font-size: 12px; color: var(--tc-muted); }

/* Toggle switch */
.tc-switch { cursor: pointer; flex-shrink: 0; }
.tc-switch input { display: none; }
.tc-sw-track {
    width: 44px; height: 24px; background: var(--tc-border);
    border-radius: 100px; position: relative; display: block; transition: background .2s;
}
.tc-switch input:checked + .tc-sw-track { background: var(--tc-ink); }
.tc-sw-thumb {
    position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
    background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.tc-switch input:checked + .tc-sw-track .tc-sw-thumb { transform: translateX(20px); }

.tc-save-badge {
    display: none; margin-top: 10px; padding: 9px 12px;
    background: var(--tc-gbg); border: 1px solid #a8dfc0;
    border-radius: 8px; font-size: 13px; color: var(--tc-green); font-weight: 500;
}
.tc-save-badge.tc-badge--on { display: block; }

/* ── Buttons ────────────────────────────────────────────────────── */
.tc-btn {
    display: block; width: 100%; padding: 15px!important; margin-top: 22px;
    background: var(--tc-ink); color: #fff; border: none; border-radius: 10px;
    font-size: 16px; font-weight: 700; cursor: pointer; text-align: center;
    text-decoration: none; transition: background .18s, transform .1s; box-sizing: border-box;
}

.tc-btn:hover  { background: #2c2820; color: #fff; text-decoration: none; }
.tc-btn:active { transform: scale(.99); }

.tc-back-btn {
    background: none; border: none; color: var(--tc-muted); font-size: 13px;
    cursor: pointer; padding: 0; margin-bottom: 16px;
    display: flex; align-items: center; gap: 5px; transition: color .18s;
}
.tc-back-btn:hover { color: var(--tc-ink); }

.tc-privacy { text-align: center; font-size: 12px; color: var(--tc-muted); margin: 12px 0 0; }
.tc-privacy a { color: var(--tc-muted); text-decoration: underline; }

/* ── Timer ──────────────────────────────────────────────────────── */
.tc-timer {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #1a1814; border-radius: 12px; padding: 14px 24px;
    font-size: 15px; font-weight: 600; color: #f5d96e;
    margin-bottom: 22px; width: fit-content; margin-left: auto; margin-right: auto;
    box-shadow: 0 4px 16px rgba(26,24,20,.2);
}
.tc-timer svg    { flex-shrink: 0; color: #f5d96e; }
.tc-timer strong {
    font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800;
    min-width: 54px; text-align: center; color: #fff;
}
.tc-timer.tc-timer--red {
    background: var(--tc-red); color: #fff; animation: tc-pulse 1s infinite;
}
.tc-timer.tc-timer--red strong,
.tc-timer.tc-timer--red svg { color: #fff; }
@keyframes tc-pulse { 0%,100%{opacity:1} 50%{opacity:.75} }

/* ── Amount ─────────────────────────────────────────────────────── */
.tc-amount {
    font-size: 44px; font-weight: 800; color: var(--tc-ink);
    letter-spacing: -.03em; line-height: 1; margin-top: 8px; margin-bottom: 4px;
    text-align: center;
}

/* ── Mini cart ──────────────────────────────────────────────────── */
.tc-mini-cart {
    background: var(--tc-bg); border-radius: 9px;
    padding: 12px 14px; margin-bottom: 22px;
}
.tc-mini-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px; color: var(--tc-ink); padding: 4px 0;
}
.tc-mini-row + .tc-mini-row { border-top: 1px solid var(--tc-border); }
.tc-mini-row em     { font-style: normal; color: var(--tc-muted); font-size: 16px; margin-left: 4px; }
.tc-mini-row strong { font-weight: 600; }

/* ── Payment section ────────────────────────────────────────────── */
/*
 * We render only checkout/payment.php inside our own <form>.
 * No full form-checkout.php noise to hide — just style the gateway list.
 */
#tc-payment-wrap form.woocommerce-checkout { margin: 0 !important; padding: 0 !important; }
#tc-payment-wrap #payment                  { background: transparent !important; border: none !important; padding: 0 !important; }
#tc-payment-wrap #payment ul.payment_methods { margin: 0 0 16px; padding: 0; list-style: none; }
.woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box
{background-color: white!important;}
/* Gateway rows *//* ── Stripe payment box cleanup ─────────────────────────────────── */

/* Remove grey background from payment box */
#tc-payment-wrap .payment_box.payment_method_stripe {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 12px 0 0 !important;
    margin: 0 !important;
}

/* Hide the arrow/triangle above the payment box */
#tc-payment-wrap .payment_box::before,
#tc-payment-wrap .payment_box::after {
    display: none !important;
}

/* Hide "Credit / Debit Card" label and card icons */
#tc-payment-wrap .wc_payment_method label,
#tc-payment-wrap .stripe-cards-icon {
    display: none !important;
}

/* Hide the radio input (already hidden but belt-and-suspenders) */
#tc-payment-wrap .wc_payment_method .input-radio {
    display: none !important;
}

/* Remove the li border/background */
#tc-payment-wrap #payment ul.payment_methods li.wc_payment_method {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#tc-payment-wrap #payment ul.payment_methods li {
    border: 1.5px solid var(--tc-border); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 8px; background: var(--tc-bg);
    cursor: pointer; transition: border-color .18s, background .18s;
    list-style: none;
}
#tc-payment-wrap #payment ul.payment_methods li:has(input:checked) {
    border-color: var(--tc-ink); background: #fff;
}
#tc-payment-wrap #payment ul.payment_methods label { font-size: 14px; font-weight: 500; cursor: pointer; }

/* Hide country field and any WC field noise inside gateway descriptions */
#tc-payment-wrap .wc-stripe-upe-element + p,
#tc-payment-wrap #wc-stripe-new-payment-method-checkbox-wrap,
#tc-payment-wrap .wc-stripe-save-payment-method-checkbox { display: none !important; }

/* ── Split Card Element: number | expiry | cvc in one row ── */
/* Only applies when WC Stripe uses the old Card Element (3 separate iframes).  */
/* If you use the Payment Element (single iframe) this block has no effect.     */
#tc-payment-wrap .wc-stripe-elements-field {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
}
#tc-payment-wrap #wc-stripe-card-number-element  { grid-column: 1; }
#tc-payment-wrap #wc-stripe-card-expiry-element  { grid-column: 2; width: 90px; }
#tc-payment-wrap #wc-stripe-card-cvc-element     { grid-column: 3; width: 70px; }

/* Stripe element base styles — shared by both single and split element */
#tc-payment-wrap .StripeElement,
#tc-payment-wrap #wc-stripe-card-element,
#tc-payment-wrap #wc-stripe-card-number-element,
#tc-payment-wrap #wc-stripe-card-expiry-element,
#tc-payment-wrap #wc-stripe-card-cvc-element,
#tc-payment-wrap #wc-stripe-payment-element,
#tc-payment-wrap #payment-element {
    border: 1.5px solid var(--tc-border) !important;
    border-radius: 8px !important; padding: 12px 14px !important;
    background: var(--tc-bg) !important; min-height: 46px !important;
    box-sizing: border-box !important; margin-top: 8px;
    transition: border-color .18s !important;
}
#tc-payment-wrap .StripeElement--focus,
#tc-payment-wrap .StripeElement:focus-within { border-color: var(--tc-ink) !important; }

/* ── Hide noise around the submit button, but NOT the button itself ── */
#tc-payment-wrap .woocommerce-privacy-policy-text              { display: none !important; }
#tc-payment-wrap .woocommerce-terms-and-conditions-wrapper     { display: none !important; }

/* Un-style the .form-row wrapper so it's just a neutral container */
#tc-payment-wrap .woocommerce-checkout-payment .form-row {
    margin: 0 !important; padding: 0 !important;
    background: none !important; border: none !important;
}

/* ── Style the submit button — covers all WC Stripe variants ── */
#tc-payment-wrap #place_order,
#tc-payment-wrap button[type="submit"].button,
#tc-payment-wrap button[type="submit"],
#tc-payment-wrap .wc-stripe-submit,
#tc-payment-wrap input[type="submit"] {
    display: block !important;
    width: 100% !important; padding: 15px !important; margin-top: 16px !important;
    background: var(--tc-ink) !important; color: #fff !important;
    border: none !important; border-radius: 10px !important;
    font-size: 16px !important; font-weight: 700 !important;
    cursor: pointer !important; text-align: center !important;
    box-sizing: border-box !important; letter-spacing: 0 !important;
    text-transform: none !important; float: none !important;
    transition: background .18s !important;
}
#tc-payment-wrap #place_order:hover,
#tc-payment-wrap button[type="submit"]:hover,
#tc-payment-wrap .wc-stripe-submit:hover { background: #2c2820 !important; }

/* ── Secure note ────────────────────────────────────────────────── */
.tc-secure { text-align: center; font-size: 14px; color: var(--tc-muted); margin-top: 5px;font-weight:700; }

/* Fix fieldset padding and border inside payment wrap */
#tc-payment-wrap fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
/* ── Timeout modal ──────────────────────────────────────────────── */
.tc-modal-bg {
    /* Use min-height faux-viewport so position:fixed isn't needed */
    min-height: 400px; background: rgba(26,24,20,.55);
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px; margin-top: 16px;
}
.tc-modal {
    background: #fff; border-radius: 18px; padding: 36px 28px;
    max-width: 360px; width: calc(100% - 32px); text-align: center;
    box-shadow: var(--tc-shl);
}
.tc-modal h3 { font-size: 20px; font-weight: 700; color: var(--tc-ink); margin: 0 0 8px; }
.tc-modal p  { font-size: 14px; color: var(--tc-muted); margin: 0 0 22px; }

/* ── Error states ───────────────────────────────────────────────── */
.tc-field-error       { border-color: var(--tc-red) !important; }
.tc-error-msg         { font-size: 12px; color: var(--tc-red); margin-top: 3px; display: block; }
.tc-notice-error      { background:#fff0f0; border:1px solid #f5c0c0; border-radius:8px;
                         padding:10px 14px; font-size:13px; color:var(--tc-red); margin-bottom:14px; }
/* ── Order summary row ──────────────────────────────────────────── */
.tc-order-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
.tc-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--tc-ink);
}
.tc-order-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.tc-order-name em {
    font-style: normal;
    color: var(--tc-muted);
    font-weight: 400;
}
.tc-order-price {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .tc-card    { padding: 20px 16px; }
    .tc-row2    { grid-template-columns: 1fr; }
    .tc-amount  { font-size: 32px; }
    #tc-wrap    { padding: 12px 10px 60px; }
}

@media (max-width: 520px) {
    /* Heading & subheading */
    .tc-title    { font-size: 18px; }
    .tc-sub      { font-size: 12px; margin-bottom: 16px; }

    /* Timer */
    .tc-timer    { font-size: 12px; padding: 10px 16px; }
    .tc-timer strong { font-size: 16px; }

    /* Mini cart */
    .tc-mini-row { font-size: 12px; }
    .tc-mini-row em { font-size: 11px; }

    /* Amount */
    .tc-amount   { font-size: 28px; }

    /* Loyalty box */
    .tc-loyalty-text strong { font-size: 12px; }
    .tc-loyalty-text span   { font-size: 11px; }
    .tc-loyalty-icon        { font-size: 16px; }
    .tc-save-badge          { font-size: 11px; padding: 7px 10px; }

    /* Secure notice */
    .tc-secure   { font-size: 12px!important; margin-top:-5px;}

    /* Privacy note */
    .tc-privacy  { font-size: 11px; }
}