/**
 * RF5 Payment V5 – Checkout page styles
 * Prefixed with .co- (checkout) to prevent collisions with shared RF5 styles.
 * Loaded only on the PaymentV5 page via <link> in the view.
 */

/* ── Checkout layout ──────────────────────────────────────────────────────── */
.co-shell  { max-width: 1100px; margin: 0 auto; }
.co-header { display: flex; justify-content: space-between; align-items: center;
             flex-wrap: wrap; gap: 8px; padding: 16px 20px; margin-bottom: 12px; }
.co-refno  { font-size: .82rem; color: #6c757d; }
.co-refno strong { color: #212529; font-size: 1rem; display: block; }
.co-status-badge { font-size: .78rem; padding: 5px 10px; border-radius: 20px;
                   background: #fff3cd; color: #856404; border: 1px solid #ffc107; font-weight: 600; }

/* ── Method tabs ──────────────────────────────────────────────────────────── */
.co-method-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.co-method-tab  { flex: 1 1 auto; min-width: 100px; border: 2px solid #dee2e6; border-radius: 10px;
                  padding: 10px 8px; background: #fff; cursor: pointer; font-size: .85rem;
                  text-align: center; transition: border-color .15s, background .15s; }
.co-method-tab.active { border-color: var(--rf5-primary, #dc3545); background: #fff5f5;
                        color: var(--rf5-primary, #dc3545); font-weight: 600; }
.co-method-tab:hover:not(.active) { border-color: #adb5bd; }
.co-method-tab i { display: block; font-size: 1.3rem; margin-bottom: 4px; }

/* ── Method panels ────────────────────────────────────────────────────────── */
.co-method-panel        { display: none; }
.co-method-panel.active { display: block; }
.co-panel-hint  { font-size: .85rem; color: #6c757d; padding: 10px 0 4px; }
.co-expire-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem;
                   background: #f0f4ff; color: #4a6fa5; border-radius: 6px; padding: 3px 8px; }

/* ── QR result ────────────────────────────────────────────────────────────── */
.co-qr-wrap { text-align: center; padding: 12px 0; }
.co-qr-img  { display: block; max-width: 220px; margin: 0 auto 10px;
              border: 1px solid #dee2e6; border-radius: 8px; }

/* ── Bank transfer ────────────────────────────────────────────────────────── */
.co-bank-card   { border: 1px solid #dee2e6; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.co-bank-name   { font-weight: 600; font-size: .95rem; color: #212529; }
.co-bank-acc    { font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; color: #0d6efd; margin: 2px 0; }
.co-bank-detail { font-size: .82rem; color: #6c757d; }
.co-copy-btn    { font-size: .75rem; padding: 2px 8px; border-radius: 4px; border: 1px solid #adb5bd;
                  background: #fff; cursor: pointer; margin-left: 6px; vertical-align: middle; }
.co-copy-btn:hover { background: #f8f9fa; }

/* ── Promo code ───────────────────────────────────────────────────────────── */
.co-promo-row       { display: flex; gap: 8px; }
.co-promo-row input { flex: 1; }
.co-promo-feedback  { font-size: .84rem; margin-top: 6px; min-height: 20px; }
.co-promo-feedback.ok   { color: #198754; }
.co-promo-feedback.fail { color: #dc3545; }

/* ── Order summary ────────────────────────────────────────────────────────── */
.co-summary-sticky { position: sticky; top: 16px; }
.co-items-list     { margin-bottom: 10px; }
.co-item-row       { display: flex; justify-content: space-between; padding: 4px 0;
                     font-size: .88rem; align-items: baseline; }
.co-item-addon::before { content: '+ '; color: #6c757d; font-size: .8em; }
.co-divider { border-top: 1px solid #e9ecef; margin: 8px 0; }

/* ── Pricing rows ─────────────────────────────────────────────────────────── */
.co-price-row          { display: flex; justify-content: space-between; padding: 4px 0; font-size: .9rem; }
.co-price-row.discount { color: #198754; font-size: .88rem; }
.co-price-row.total-row { font-weight: 700; font-size: 1.1rem;
                           border-top: 2px solid #dee2e6; margin-top: 6px; padding-top: 10px; }

/* ── Pay button ───────────────────────────────────────────────────────────── */
.co-pay-btn          { width: 100%; padding: 14px; font-size: 1rem; border-radius: 10px;
                       background: var(--rf5-btn-submit-bg, #dc3545);
                       color: var(--rf5-btn-submit-text, #fff); border: none; cursor: pointer;
                       font-weight: 600; letter-spacing: .02em; transition: opacity .15s; margin-top: 12px; }
.co-pay-btn:disabled { opacity: .65; cursor: not-allowed; }

/* ── Counter refno ────────────────────────────────────────────────────────── */
.co-counter-refno { font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; color: #212529;
                    background: #f8f9fa; border: 1px dashed #adb5bd; border-radius: 8px;
                    padding: 12px 20px; text-align: center; cursor: pointer; user-select: all; }

/* ── QR expiry countdown ──────────────────────────────────────────────────── */
.co-qr-expire { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem;
                background: #fff3cd; color: #856404; border: 1px solid #ffc107;
                border-radius: 6px; padding: 4px 10px; font-weight: 500; }
.co-qr-expire--expired { background: #f8d7da; color: #842029; border-color: #f5c2c7; }
.co-qr-wrap.co-qr-expired .co-qr-img { opacity: .3; filter: grayscale(1); }

/* ── Pending / result notices ─────────────────────────────────────────────── */
.co-pending-notice { font-size: .88rem; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .co-summary-sticky { position: static; }
  .co-method-tab { min-width: 80px; font-size: .78rem; padding: 8px 4px; }
}

/* ── Phase-3 CSP static style classes (replaces inline style="" attributes) ── */
.co-checkout-title { font-size: 1.2rem; font-weight: 700; }
.co-method-single  { font-size: .9rem; }
.co-note-qr        { font-size: .8rem; }
.co-note-xs        { font-size: .78rem; }
.co-note-sm        { font-size: .82rem; }
.co-note-lg        { font-size: .88rem; }
.co-alert-sm       { font-size: .84rem; }
.co-bank-confirm   { font-size: .85rem; }
.co-invoice-label  { font-size: .9rem; }
.co-invoice-note   { font-size: .83rem; }
.co-promo-label-fw { font-weight: 600; }
.co-input-upper    { text-transform: uppercase; }