/* =====================================================================
   WebNest — checkout & payment UI
   Two-column checkout, payment method tabs, card visual, UPI and QR panels.
   Loaded after site.css on public pages.
   ===================================================================== */

.co-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
    align-items: start;
}

@media (max-width: 940px) {
    .co-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- summary */
.co-summary {
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: 0;
    padding: 1.5rem 1.4rem;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
}

@media (max-width: 940px) { .co-summary { position: static; } }

.co-lines { list-style: none; display: grid; gap: .85rem; margin-bottom: 1.15rem; }
.co-lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    font-size: .92rem;
    padding-bottom: .85rem;
    border-bottom: 1px dashed var(--ink-100);
}
.co-lines li:last-child { border-bottom: 0; padding-bottom: 0; }
.co-lines__desc { color: var(--ink-700); font-weight: 600; }
.co-lines__period {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-top: .15rem;
}
.co-lines__amt { font-weight: 800; color: var(--ink-900); white-space: nowrap; font-variant-numeric: tabular-nums; }

.co-totals {
    display: grid;
    gap: .5rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--ink-100);
    font-size: .92rem;
}
.co-totals > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-600); }
.co-totals__grand {
    margin-top: .35rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ink-200);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink-900) !important;
}
.co-totals__grand span:last-child { color: var(--brand-700); }

.co-includes {
    margin-top: 1.35rem;
    padding: 1rem 1.1rem;
    background: var(--ink-50);
    border-radius: 0;
    border: 1px solid var(--ink-100);
}
.co-includes__title { font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); margin: 0; }
.co-includes .tick-list li { font-size: .86rem; }

/* ------------------------------------------------------- pay tabs */
.pay-tabs {
    display: flex;
    gap: .4rem;
    padding: .35rem;
    background: var(--ink-100);
    border-radius: 0;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.pay-tab {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink-500);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: .6rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.pay-tab svg { width: 16px; height: 16px; }
.pay-tab:hover { color: var(--ink-800); }
.pay-tab.is-on { background: var(--white); color: var(--brand-700); box-shadow: var(--shadow-xs); }

.pay-panel { animation: fade-up .25s var(--ease) both; }

/* --------------------------------------------------- card visual */
.card-visual {
    position: relative;
    border-radius: 0;
    padding: 1.4rem 1.5rem;
    background:
        radial-gradient(420px 200px at 90% 0%, rgba(255, 255, 255, .18), transparent 60%),
        linear-gradient(135deg, #1d3fbf, #0f1f52 55%, #0b1220);
    color: #fff;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    min-height: 172px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card-visual::after {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}
.card-visual__chip {
    width: 40px; height: 30px;
    border-radius: 0;
    background: linear-gradient(135deg, #f5d98b, #c9a44a);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.card-visual__brand {
    position: absolute;
    top: 1.4rem; right: 1.5rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .95;
}
.card-visual__number {
    font-family: var(--font-mono);
    font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem);
    font-weight: 700;
    letter-spacing: .1em;
    margin: 1.15rem 0 .95rem;
}
.card-visual__row { display: flex; gap: 2rem; }
.card-visual__label {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: .15rem;
}
.card-visual__value {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------------------------------- UPI bits */
.upi-apps {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--ink-100);
}
.upi-apps__label {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-right: .15rem;
}

/* ---------------------------------------------------------- QR panel */
.qr-frame {
    position: relative;
    display: inline-block;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
}
.qr-frame__code { display: block; line-height: 0; }
.qr-frame__code svg { display: block; border-radius: 0; }

/* Four animated scanner corners. */
.qr-frame__corners span {
    position: absolute;
    width: 26px; height: 26px;
    border: 3px solid var(--brand-500);
    border-radius: 0;
    animation: qr-pulse 2s ease-in-out infinite;
}
.qr-frame__corners span:nth-child(1) { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.qr-frame__corners span:nth-child(2) { top: -3px; right: -3px; border-left: 0; border-bottom: 0; animation-delay: .25s; }
.qr-frame__corners span:nth-child(3) { bottom: -3px; left: -3px; border-right: 0; border-top: 0; animation-delay: .5s; }
.qr-frame__corners span:nth-child(4) { bottom: -3px; right: -3px; border-left: 0; border-top: 0; animation-delay: .75s; }

@keyframes qr-pulse {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}

.qr-amount {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ink-900);
    margin: 1.15rem 0 .25rem;
    font-variant-numeric: tabular-nums;
}

.qr-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    padding: .5rem .9rem;
    border-radius: 0;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink-500);
}
.qr-status__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent-500);
    animation: qr-blink 1.4s ease-in-out infinite;
}
@keyframes qr-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ------------------------------------------------------ OTP input */
.otp-input {
    font-family: var(--font-mono);
    font-size: 1.7rem !important;
    letter-spacing: .55em;
    text-align: center;
    padding: .9rem 1rem !important;
}

/* ------------------------------------------------------- success */
.pay-success {
    width: 82px; height: 82px;
    margin: 0 auto 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success-fg);
    border: 2px solid var(--success-br);
    animation: pop-in .45s cubic-bezier(.22, .61, .36, 1) both;
}
.pay-success svg { width: 40px; height: 40px; }

@keyframes pop-in {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: none; }
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .9rem;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--ink-100);
}
.receipt-row:last-child { border-bottom: 0; }
.receipt-row span { color: var(--ink-500); }
.receipt-row strong { color: var(--ink-900); }
.mono { font-family: var(--font-mono); font-size: .85rem; }

/* Print-friendly receipt */
@media print {
    .site-header, .site-footer, .btn-row, .breadcrumb { display: none !important; }
    body { background: #fff; }
    .form-card { box-shadow: none; border: 0; }
}