/* Tripay for FluentCart: checkout + payment dialog. Scoped under .tfc-*. */

.tfc-channels,
.tfc-pay,
.tfc-overlay {
    --tfc-ink: #1B1F24;
    --tfc-muted: #555D69;
    --tfc-line: #E2E5EA;
    --tfc-soft: #F3F4F6;
    --tfc-accent: #1D4ED8;
    --tfc-accent-soft: #E8EEFC;
    --tfc-ok: #14532D;
    --tfc-ok-soft: #E7F5EC;
    --tfc-warn: #6B4200;
    --tfc-warn-soft: #FFF5DC;
    --tfc-bad: #9F1D1D;
    --tfc-bad-soft: #FDECEC;
    --tfc-surface: #FFFFFF;
}

.tfc-muted { color: var(--tfc-muted); font-size: 14px; margin: 8px 0; }
.tfc-sr { position: absolute; left: -9999px; }

/* Channel list ------------------------------------------------------------ */

.tfc-channels { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 4px; color: var(--tfc-ink); }
.tfc-channel-group { display: flex; flex-direction: column; gap: 6px; }
.tfc-channel-group-title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tfc-muted); }

.tfc-channel-option {
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 8px 12px;
    border: 1px solid var(--tfc-line); border-radius: 8px;
    background: var(--tfc-surface); cursor: pointer;
    transition: border-color .12s, background .12s;
}
.tfc-channel-option:hover { border-color: #B8C0CC; }
.tfc-channel-option:has(input:checked) { border-color: var(--tfc-accent); background: var(--tfc-accent-soft); }
.tfc-channel-option input { margin: 0; width: 18px; height: 18px; accent-color: var(--tfc-accent); flex: 0 0 auto; }
.tfc-channel-option input:focus-visible { outline: 2px solid var(--tfc-accent); outline-offset: 2px; }
.tfc-channel-logo { width: 56px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.tfc-channel-name { flex: 1 1 auto; font-size: 14px; font-weight: 500; }
.tfc-channel-fee { font-size: 12px; color: var(--tfc-muted); white-space: nowrap; }

/* Dialog ------------------------------------------------------------------ */

.tfc-no-scroll { overflow: hidden; }

.tfc-overlay {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 24px 16px; overflow-y: auto;
    background: rgba(17, 20, 24, .55);
}
.tfc-dialog {
    position: relative; width: 100%; max-width: 460px; margin: auto 0;
    background: var(--tfc-surface); color: var(--tfc-ink);
    border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    padding: 24px 20px 20px; box-sizing: border-box;
}
.tfc-dialog:focus { outline: none; }
.tfc-close {
    position: absolute; top: 8px; right: 8px;
    width: 44px; height: 44px; border: 0; border-radius: 8px;
    background: transparent; color: var(--tfc-muted);
    font-size: 26px; line-height: 1; cursor: pointer;
}
.tfc-close:hover { background: var(--tfc-soft); color: var(--tfc-ink); }

/* Payment panel ----------------------------------------------------------- */

.tfc-tripay-receipt { margin: 0 0 24px; }
.tfc-tripay-receipt .tfc-pay {
    max-width: 520px; margin: 0 auto; padding: 24px 20px;
    border: 1px solid var(--tfc-line); border-radius: 14px; background: var(--tfc-surface);
}

.tfc-pay { display: flex; flex-direction: column; gap: 14px; color: var(--tfc-ink); font-size: 14px; }
.tfc-pay .tfc-title { margin: 0; padding-right: 36px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.tfc-channel-title { margin: -8px 0 0; color: var(--tfc-muted); }

.tfc-amount-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 12px 14px; border-radius: 10px; background: var(--tfc-soft);
}
.tfc-amount { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }

.tfc-deadline { margin: 0; color: var(--tfc-muted); }
.tfc-countdown { color: var(--tfc-ink); font-variant-numeric: tabular-nums; }

.tfc-sandbox, .tfc-notice {
    margin: 0; padding: 10px 12px; border-radius: 8px;
    background: var(--tfc-warn-soft); color: var(--tfc-warn); font-size: 13px;
}

.tfc-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tfc-qr img {
    width: 240px; max-width: 100%; height: auto; aspect-ratio: 1;
    padding: 8px; border: 1px solid var(--tfc-line); border-radius: 12px; background: #fff;
}
.tfc-qr .tfc-muted { margin: 0; }
.tfc-link { color: var(--tfc-accent); font-weight: 600; }

.tfc-label { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tfc-muted); }
.tfc-code-box { padding: 14px; border: 1px solid var(--tfc-line); border-radius: 10px; }
.tfc-code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tfc-code {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 22px; font-weight: 600; letter-spacing: .04em; word-break: break-all;
}

.tfc-status { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--tfc-accent-soft); color: #1E3A8A; }
.tfc-status.is-paid { background: var(--tfc-ok-soft); color: var(--tfc-ok); font-weight: 600; }
.tfc-status.is-closed { background: var(--tfc-bad-soft); color: var(--tfc-bad); font-weight: 600; }
.tfc-spinner {
    width: 16px; height: 16px; flex: 0 0 auto;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: tfc-spin .8s linear infinite;
}
@keyframes tfc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tfc-spinner { animation: none; } }

.tfc-steps details { border-top: 1px solid var(--tfc-line); }
.tfc-steps details:last-child { border-bottom: 1px solid var(--tfc-line); }
.tfc-steps summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.tfc-steps ol { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--tfc-ink); line-height: 1.5; }

.tfc-error { margin: 0; color: var(--tfc-bad); min-height: 1em; }
.tfc-error:empty { display: none; }

.tfc-pay .tfc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tfc-pay .tfc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 16px; border-radius: 8px;
    font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1px solid var(--tfc-line); background: var(--tfc-surface); color: var(--tfc-ink);
}
.tfc-pay .tfc-btn:focus-visible { outline: 2px solid var(--tfc-accent); outline-offset: 2px; }
.tfc-pay .tfc-btn-primary { flex: 1 1 auto; border-color: var(--tfc-accent); background: var(--tfc-accent); color: #fff; }
.tfc-pay .tfc-btn-primary:hover { background: #1E40AF; }
.tfc-pay .tfc-btn-primary[disabled] { opacity: .6; cursor: progress; }
.tfc-pay .tfc-btn-ghost:hover { background: var(--tfc-soft); }

@media (max-width: 480px) {
    .tfc-overlay { padding: 0; align-items: flex-end; }
    .tfc-dialog { max-width: none; border-radius: 16px 16px 0 0; margin: 0; }
    .tfc-pay .tfc-actions { flex-direction: column; }
    .tfc-pay .tfc-btn { width: 100%; }
}

@media (prefers-color-scheme: dark) {
    .tfc-dialog .tfc-qr img { background: #fff; }
}

/* Pay page for unpaid Tripay orders older than FluentCart's 2-hour guest window */
.tfc-receipt-page { max-width: 560px; margin: 24px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; color: #1B1F24; }
.tfc-receipt-summary { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid #E2E5EA; border-radius: 14px; background: #FFFFFF; }
.tfc-receipt-title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; }
.tfc-receipt-summary .tfc-muted { margin: 0; }
.tfc-receipt-items { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tfc-receipt-item { display: flex; justify-content: space-between; gap: 12px; }
.tfc-receipt-item-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tfc-receipt-page .tfc-tripay-receipt { margin: 0; }
.tfc-receipt-page .tfc-tripay-receipt .tfc-pay { max-width: none; }
.tfc-receipt-closed { padding: 20px; border: 1px solid #E2E5EA; border-radius: 14px; background: #FFFFFF; }

/* 1.2.3: copy-amount button, phone hint under the QR */
.tfc-amount-row { flex-wrap: wrap; }
.tfc-pay .tfc-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; margin-left: auto; }
.tfc-qr-hint { font-size: 12px; line-height: 1.5; max-width: 300px; margin: 6px auto 0; }
.tfc-pay .tfc-btn { box-sizing: border-box; max-width: 100%; }
@media (max-width: 480px) {
    .tfc-pay .tfc-amount-row .tfc-btn-sm { width: auto; }
}

/* Sandbox-only admin button (Winpay has no payment simulator). */
.tfc-pay .tfc-simulate { display: block; margin: 8px 0 0; width: 100%; border-style: dashed; color: #7A3E00; }