/**
 * TitanCart Checkout — Isolated CSS
 *
 * Uses the "full-bleed breakout" technique: #tc-checkout stretches to
 * 100vw regardless of parent constraints, then uses padding to center
 * content at max 1200px. This works with ANY WordPress theme.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKOUT + RESET
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout,
#tc-checkout *,
#tc-checkout *::before,
#tc-checkout *::after {
    box-sizing: border-box !important;
    float: none !important;
}

/* Full-bleed: break out of ANY constrained parent */
#tc-checkout {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 40px max(24px, calc((100vw - 1152px) / 2)) 60px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    color: #111 !important;
    line-height: 1.5 !important;
}

/* ── Title ── */

#tc-checkout h1.tc-checkout__title {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -.5px !important;
    text-align: center !important;
    padding: 40px 0 32px !important;
    margin: 0 !important;
    color: #111 !important;
    width: 100% !important;
    display: block !important;
    border: none !important;
}

/* ── Error banner ── */

#tc-checkout .tc-checkout__error-banner {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    margin-bottom: 24px !important;
    /* display controlled by inline style="display:none" */
}

/* ═══════════════════════════════════════════════════════════════════════════
   TWO-COLUMN GRID
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout .tc-checkout__layout {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 36px !important;
    align-items: start !important;
    width: 100% !important;
}

#tc-checkout .tc-checkout__form-col {
    min-width: 0 !important;
    width: 100% !important;
}

#tc-checkout .tc-checkout__summary-col {
    min-width: 0 !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    #tc-checkout .tc-checkout__layout {
        grid-template-columns: 1fr !important;
    }
    #tc-checkout .tc-checkout__summary-col {
        order: -1 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout section.tc-checkout__step {
    background: #fff !important;
    border: 1.5px solid #e5e5e5 !important;
    border-radius: 14px !important;
    padding: 28px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block;
}

#tc-checkout .tc-checkout__step-heading {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: none !important;
    color: #111 !important;
}

#tc-checkout .tc-checkout__step-number {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

#tc-checkout .tc-checkout__login-prompt {
    background: #f9fafb !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: #666 !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}
#tc-checkout .tc-checkout__login-prompt a {
    color: #111 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM FIELDS
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout .tc-field {
    margin-bottom: 16px !important;
    width: 100% !important;
    display: block !important;
}

#tc-checkout .tc-field > label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-bottom: 6px !important;
    width: auto !important;
    float: none !important;
}

#tc-checkout .tc-field label span[aria-hidden] {
    color: #dc2626 !important;
}

#tc-checkout input[type="text"],
#tc-checkout input[type="email"],
#tc-checkout input[type="tel"],
#tc-checkout input[type="number"],
#tc-checkout input[type="url"],
#tc-checkout input[type="search"],
#tc-checkout input[type="password"],
#tc-checkout select,
#tc-checkout textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 11px 14px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #111 !important;
    background-color: #fff !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color .15s !important;
}

#tc-checkout input:focus,
#tc-checkout select:focus,
#tc-checkout textarea:focus {
    border-color: #111 !important;
    box-shadow: none !important;
    outline: none !important;
}

#tc-checkout input.tc-input--error,
#tc-checkout select.tc-input--error,
#tc-checkout textarea.tc-input--error {
    border: 1.5px solid #dc2626 !important;
}

#tc-checkout select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
}

#tc-checkout textarea {
    resize: vertical !important;
    min-height: 80px !important;
}

#tc-checkout .tc-field__error {
    display: block !important;
    font-size: 12px !important;
    color: #dc2626 !important;
    margin-top: 4px !important;
}
#tc-checkout .tc-field__error:empty {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM ROW GRIDS
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout .tc-form-row {
    display: grid !important;
    gap: 16px !important;
    width: 100% !important;
}
#tc-checkout .tc-form-row.tc-form-row--two-col {
    grid-template-columns: 1fr 1fr !important;
}
#tc-checkout .tc-form-row.tc-form-row--three-col {
    grid-template-columns: 1fr 1fr 1fr !important;
}
@media (max-width: 600px) {
    #tc-checkout .tc-form-row.tc-form-row--two-col,
    #tc-checkout .tc-form-row.tc-form-row--three-col {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKBOXES & RADIOS
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout .tc-field--checkbox {
    margin-bottom: 12px !important;
}
#tc-checkout .tc-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #333 !important;
    cursor: pointer !important;
    flex-direction: row !important;
}
#tc-checkout input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    accent-color: #111 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
}
#tc-checkout input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    accent-color: #111 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    -webkit-appearance: radio !important;
    appearance: radio !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHIPPING METHOD CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout .tc-shipping-methods {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
#tc-checkout .tc-shipping-method {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    width: 100% !important;
}
#tc-checkout .tc-shipping-method:hover {
    border-color: #999 !important;
}
#tc-checkout .tc-shipping-method__name {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111 !important;
}
#tc-checkout .tc-shipping-method__price {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYMENT METHOD CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout .tc-payment-methods {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}
#tc-checkout .tc-payment-method {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}
#tc-checkout .tc-payment-method:hover {
    border-color: #999 !important;
}
#tc-checkout .tc-payment-method__name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111 !important;
    flex: 1 !important;
}
#tc-checkout .tc-payment-method__desc {
    font-size: 12px !important;
    color: #888 !important;
    flex-basis: 100% !important;
    padding-left: 30px !important;
    margin-top: 4px !important;
}
#tc-checkout .tc-payment-fields {
    margin-bottom: 20px !important;
}
#tc-checkout .tc-checkout__no-payment {
    font-size: 14px !important;
    color: #888 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTES + PLACE ORDER
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout .tc-checkout__notes {
    margin-bottom: 24px !important;
}

#tc-checkout button.tc-btn,
#tc-checkout .tc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
}
#tc-checkout .tc-btn--primary {
    background: #111 !important;
    color: #fff !important;
}
#tc-checkout .tc-btn--primary:hover {
    background: #333 !important;
}
#tc-checkout .tc-btn--full {
    width: 100% !important;
}
#tc-checkout .tc-btn--large {
    padding: 16px 24px !important;
    font-size: 16px !important;
}
#tc-checkout .tc-btn--loading {
    opacity: .7 !important;
    pointer-events: none !important;
}

#tc-checkout .tc-checkout__legal {
    font-size: 12px !important;
    color: #999 !important;
    text-align: center !important;
    margin-top: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT PRODUCT LIST (above order summary, ShopNest style)
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout .tc-checkout__products {
    background: #fff !important;
    border: 1.5px solid #e5e5e5 !important;
    border-radius: 14px !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

#tc-checkout .tc-checkout__product-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 0 !important;
}

#tc-checkout .tc-checkout__products-sep {
    height: 1px !important;
    background: #f0f0f0 !important;
}

#tc-checkout .tc-checkout__product-img-wrap {
    width: 70px !important;
    aspect-ratio: var(--tc-img-ratio, 3 / 4) !important;
    height: auto !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #f8f8f8 !important;
}

#tc-checkout .tc-checkout__product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 10px !important;
}

#tc-checkout .tc-checkout__product-img--placeholder {
    width: 70px !important;
    height: 70px !important;
    background: #eee !important;
    border-radius: 10px !important;
}

#tc-checkout .tc-checkout__product-info {
    flex: 1 !important;
    min-width: 0 !important;
}

#tc-checkout .tc-checkout__product-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111 !important;
    margin: 0 0 2px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

#tc-checkout .tc-checkout__product-opts {
    font-size: 12px !important;
    color: #888 !important;
    margin: 0 !important;
}

#tc-checkout .tc-checkout__product-price {
    flex-shrink: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111 !important;
    white-space: nowrap !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ORDER SUMMARY SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

#tc-checkout .tc-checkout__summary {
    background: #f9fafb !important;
    border-radius: 14px !important;
    padding: 28px !important;
    position: sticky !important;
    top: 24px !important;
    width: 100% !important;
}
#tc-checkout .tc-checkout__summary-heading {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 20px !important;
    color: #111 !important;
    border: none !important;
    padding: 0 !important;
}

#tc-checkout .tc-checkout__summary-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
}
#tc-checkout .tc-checkout__summary-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
}
#tc-checkout .tc-checkout__summary-item:last-child {
    border-bottom: none !important;
}
#tc-checkout .tc-checkout__summary-item-name {
    font-size: 14px !important;
    color: #333 !important;
    flex: 1 !important;
}
#tc-checkout .tc-checkout__summary-item-qty {
    color: #888 !important;
    font-weight: 400 !important;
}
#tc-checkout .tc-checkout__summary-item-total {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111 !important;
    white-space: nowrap !important;
}

#tc-checkout .tc-checkout__summary-totals {
    width: 100% !important;
    border-collapse: collapse !important;
    border-top: 1px solid #e5e5e5 !important;
}
#tc-checkout .tc-checkout__summary-totals th,
#tc-checkout .tc-checkout__summary-totals td {
    padding: 8px 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border: none !important;
}
#tc-checkout .tc-checkout__summary-totals th {
    text-align: left !important;
    color: #666 !important;
}
#tc-checkout .tc-checkout__summary-totals td {
    text-align: right !important;
    color: #111 !important;
}
#tc-checkout .tc-checkout__summary-totals td em {
    font-size: 13px !important;
    color: #999 !important;
}
#tc-checkout .tc-checkout__summary-total-row th,
#tc-checkout .tc-checkout__summary-total-row td {
    font-size: 17px !important;
    font-weight: 600 !important;
    padding-top: 14px !important;
    border-top: 1px solid #e5e5e5 !important;
    color: #111 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   REWARD POINTS REDEMPTION
   ══════════════════════════════════════════════════════════════════ */

.tc-checkout__rewards {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}
.tc-checkout__rewards-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #92400E;
    border-bottom: 1px solid #FDE68A;
}
.tc-checkout__rewards-header i {
    color: #D97706;
    font-size: 16px;
}
.tc-checkout__rewards-balance {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: #B45309;
    background: #FEF3C7;
    padding: 3px 10px;
    border-radius: 20px;
}
.tc-checkout__rewards-body {
    padding: 14px 16px;
}
.tc-checkout__rewards-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.tc-checkout__rewards-row label {
    font-size: 13px;
    color: #78350F;
    font-weight: 500;
    white-space: nowrap;
}
.tc-checkout__rewards-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tc-checkout__rewards-input-wrap input {
    border: 1px solid #FDE68A;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    background: #fff;
    text-align: center;
}
.tc-checkout__rewards-value {
    font-size: 13px;
    color: #92400E;
    font-weight: 500;
}
.tc-checkout__rewards-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.tc-checkout__rewards-msg {
    font-size: 12px;
    font-weight: 500;
}
.tc-checkout__rewards-hint {
    font-size: 11px;
    color: #B45309;
    margin: 0;
}
#tc-summary-points-row td {
    color: #059669 !important;
    font-weight: 500;
}

@media (max-width: 480px) {
    .tc-checkout__rewards-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PAYMENT INSTRUCTIONS CARD (S210)
   Default styling for the offline-gateway (Bank Transfer / Check)
   instructions card rendered on the order-received and account
   order-detail pages. Themes/extensions can substitute their own
   chrome via the `titancart_payment_instructions_wrapper_class`
   and `..._heading_class` filters (PaymentsModule).
   ═══════════════════════════════════════════════════════════════════ */
.tc-payment-instructions-card {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.tc-payment-instructions-card__title {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0a0a0a;
}

.tc-payment-instructions__dl {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
    margin: 0 0 1rem;
}

.tc-payment-instructions__label {
    margin: 0;
    font-weight: 600;
    color: #525252;
}

.tc-payment-instructions__value {
    margin: 0;
    color: #0a0a0a;
    word-break: break-word;
}

.tc-payment-instructions__notes {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-left: 3px solid #2563eb;
    border-radius: 4px;
    color: #1f2937;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.tc-payment-instructions__note {
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.875rem;
    font-style: italic;
}

@media (max-width: 480px) {
    .tc-payment-instructions__dl {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
    }
    .tc-payment-instructions__label {
        margin-top: 0.5rem;
    }
    .tc-payment-instructions__label:first-child {
        margin-top: 0;
    }
}

/* ── Newsletter opt-in (Phase 5 block B, S241) ──────────────────────────── */
/* S323: boxed to match the SMS opt-in (.tcsms-optin) for visual consistency —
   same padding / border / radius / surface vars + fallbacks, including the
   dark-mode overrides. Each subscriber-list row is its own card. */
.tc-checkout-optin {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}
/* Scoped under #tc-checkout .tc-checkout-optin so these out-specify the generic
   #tc-checkout .tc-field > label { display:block !important; color:#333 !important }
   rule (the opt-in row is a <label> inside .tc-field). display:flex !important keeps
   it a flex row so the checkbox/text gap works; color !important matches the SMS box. */
#tc-checkout .tc-checkout-optin .tc-checkout-optin__row {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var( --tct-border, #e5e5e5 );
    border-radius: var( --tct-radius, 10px );
    background: var( --tct-surface-2, #f7f7f8 );
    font-size: 14px;
    line-height: 1.5;
    color: var( --tct-text, #0a0a0a ) !important;
    cursor: pointer;
}
.tc-checkout-optin__row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var( --tct-accent, #2563eb );
    cursor: pointer;
}
[data-theme="dark"] #tc-checkout .tc-checkout-optin .tc-checkout-optin__row,
[data-tcm-theme="dark"] #tc-checkout .tc-checkout-optin .tc-checkout-optin__row {
    background: #161A23;
    border-color: #262626;
    color: #FAFAFA !important;
}
