/*
 * Styles for the public Transaction Verification page (views/public/
 * verify_transaction.php) only. Every rule is namespaced with a "v-" prefix
 * and lives only inside .v2-verify — this page's own design, deliberately
 * NOT the shared component library (tokens.css/components.css/app.css) used
 * elsewhere. Reusing a bare name like .hero or .card here would collide
 * with the very different global rules already defined for those same
 * class names (e.g. the marketing .hero is full-bleed navy with
 * width:100vw) — every property the global rule sets that this page
 * doesn't override would otherwise leak through onto this page's markup.
 */
.v2-verify{
    --v-surface: #FFFFFF;
    --v-surface-2: #F7F9FC;
    --v-ink: #111827;
    --v-ink-soft: #4B5567;
    --v-ink-faint: #8892A0;
    --v-line: #E6E9F0;
    --v-line-soft: #EFF1F6;

    --v-indigo: #263573;
    --v-indigo-soft: #EEF0FA;
    --v-teal: #0E8F72;
    --v-teal-soft: #E4F6F0;
    --v-teal-deep: #0A6D57;
    --v-amber: #B8791A;
    --v-amber-soft: #FBF0DD;
    --v-red: #B3261E;
    --v-red-soft: #FBE9E7;

    --v-font-display: 'Space Grotesk', 'Noto Sans Bengali', sans-serif;
    --v-font-body: 'Inter', 'Noto Sans Bengali', sans-serif;
    --v-font-mono: 'JetBrains Mono', monospace;

    --v-radius: 14px;
    --v-shadow-card: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px -12px rgba(16,24,40,0.10);

    display:block;
    font-family: var(--v-font-body);
    color: var(--v-ink);
    padding: 32px 20px 44px;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}
.v2-verify *{ box-sizing:border-box; }
.v2-verify .v-wrap{ max-width: 920px; margin: 0 auto; }

.v2-verify .v-hero{
    background: var(--v-surface); border:1px solid var(--v-line); border-radius: var(--v-radius);
    box-shadow: var(--v-shadow-card); padding: 28px 28px 26px; margin-bottom: 22px;
    position: relative; overflow:hidden;
}
.v2-verify .v-hero::before{
    content:''; position:absolute; top:-60px; right:-60px; width:160px; height:160px;
    background: radial-gradient(circle, var(--v-teal-soft) 0%, transparent 70%);
}
.v2-verify .v-hero-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; position:relative; }
.v2-verify .v-hero-icon{
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background: linear-gradient(155deg, var(--v-indigo) 0%, #1A2456 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 16px -6px rgba(38,53,115,0.5);
}
.v2-verify .v-hero-icon svg{ width:18px; height:18px; }
.v2-verify .v-hero h1{
    font-family: var(--v-font-display); font-size: 21px; font-weight:700; letter-spacing:-0.01em; margin:0; color: var(--v-ink);
}
.v2-verify .v-hero p{
    font-size: 13px; line-height:1.7; color: var(--v-ink-soft); margin: 0 0 20px; position:relative;
    max-width: 640px;
}

.v2-verify .v-field-label{
    font-size: 12px; font-weight:700; color: var(--v-ink-faint); text-transform:uppercase;
    letter-spacing:0.05em; margin-bottom: 8px; display:block;
}

.v2-verify .v-hero-controls{ display:flex; align-items:flex-end; gap:12px; }
.v2-verify .v-hero-controls .v-field{ flex:1; }

.v2-verify .v-input-shell{
    display:flex; align-items:center; gap:10px;
    border: 1.5px solid var(--v-line); border-radius: 10px; padding: 12px 14px;
    background: var(--v-surface-2);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.v2-verify .v-input-shell:focus-within{ border-color: var(--v-teal); box-shadow: 0 0 0 3px var(--v-teal-soft); }
.v2-verify .v-input-shell svg{ width:16px; height:16px; stroke: var(--v-ink-faint); flex-shrink:0; }
.v2-verify .v-input-shell .v-input{
    /* Resets the site-wide input[type=text] rule (components.css) — that
       rule's own padding/border/margin/background would otherwise stack
       inside .v-input-shell, which already supplies all of those itself. */
    padding:0; margin:0; border:0; border-radius:0; background:transparent;
    outline:none; flex:1; width:100%;
    font-family: var(--v-font-mono); font-size: 13px; color: var(--v-ink);
}
.v2-verify .v-input-shell .v-input:focus{ box-shadow:none; }

.v2-verify .v-btn-search{
    border:none; cursor:pointer; white-space:nowrap;
    background: linear-gradient(155deg, var(--v-teal) 0%, var(--v-teal-deep) 100%);
    color:#fff; font-family: var(--v-font-display); font-weight:600; font-size:14.5px;
    padding: 13px 22px; border-radius: 10px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow: 0 10px 22px -10px rgba(14,143,114,0.6);
    transition: transform .12s ease, box-shadow .12s ease;
}
.v2-verify .v-btn-search:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(14,143,114,0.65); }
.v2-verify .v-btn-search svg{ width:16px; height:16px; }

.v2-verify .v-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.v2-verify .v-grid .v-card{ margin-bottom:0; height:100%; }
.v2-verify .v-span-2{ grid-column: 1 / -1; }

.v2-verify .v-card{
    background: var(--v-surface); border:1px solid var(--v-line); border-radius: var(--v-radius);
    box-shadow: var(--v-shadow-card); margin-bottom: 18px; overflow:hidden;
    display:flex; flex-direction:column;
}
.v2-verify .v-card-head{
    display:flex; align-items:center; gap:10px;
    padding: 16px 22px; border-bottom: 1px solid var(--v-line-soft);
}
.v2-verify .v-card-head .v-icon-badge{
    width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    background: var(--v-indigo-soft); flex-shrink:0;
}
.v2-verify .v-card-head .v-icon-badge svg{ width:15px; height:15px; stroke: var(--v-indigo); }
.v2-verify .v-card-head h2{ font-family: var(--v-font-display); font-size: 15px; font-weight:600; margin:0; color: var(--v-ink); }
.v2-verify .v-card-head.v-card-head-actions{ justify-content:space-between; }
.v2-verify .v-card-head-left{ display:flex; align-items:center; gap:10px; }

.v2-verify .v-invoice-btn{
    display:flex; align-items:center; gap:6px; border: 1px solid var(--v-line); background: var(--v-surface-2);
    color: var(--v-ink-soft); font-family: var(--v-font-body); font-size:12px; font-weight:700; cursor:pointer;
    padding: 7px 12px; border-radius: 8px; transition: all .15s ease; white-space:nowrap;
}
.v2-verify .v-invoice-btn:hover{ background: var(--v-teal); border-color: var(--v-teal); color:#fff; }
.v2-verify .v-invoice-btn svg{ width:13px; height:13px; }

.v2-verify .v-card-body{ padding: 6px 22px 16px; flex:1; }

.v2-verify .v-row{
    display:flex; align-items:center; justify-content:space-between; gap: 14px;
    padding: 10px 0; border-bottom: 1px dashed var(--v-line-soft);
}
.v2-verify .v-row:last-child{ border-bottom:none; }
.v2-verify .v-row .v-k{ font-size: 13px; color: var(--v-ink-soft); }
.v2-verify .v-row .v-v{ font-size: 13.5px; color: var(--v-ink); font-weight:600; text-align:right; }
.v2-verify .v-row .v-v.v-mono{ font-family: var(--v-font-mono); font-weight:500; font-size:12.5px; }

.v2-verify .v-link{ color: var(--v-indigo); font-weight:600; font-size:12px; text-decoration:none; }
.v2-verify .v-link:hover{ text-decoration: underline; }

.v2-verify .v-badge{
    display:inline-block; font-size: 11px; font-weight:700; padding: 4px 10px;
    border-radius: 999px; letter-spacing: 0.02em;
}
.v2-verify .v-badge.v-released{ background: var(--v-teal-soft); color: var(--v-teal-deep); }
.v2-verify .v-badge.v-danger{ background: var(--v-red-soft); color: var(--v-red); }
.v2-verify .v-badge.v-warn{ background: var(--v-amber-soft); color: var(--v-amber); }
.v2-verify .v-badge.v-info{ background: var(--v-indigo-soft); color: var(--v-indigo); }

.v2-verify .v-yes{ display:inline-flex; align-items:center; gap:5px; font-size: 13px; font-weight:700; color: var(--v-teal-deep); }
.v2-verify .v-yes svg{ width:14px; height:14px; stroke: var(--v-teal-deep); }
.v2-verify .v-no{ display:inline-flex; align-items:center; gap:5px; font-size: 13px; font-weight:700; color: var(--v-ink-faint); }
.v2-verify .v-no svg{ width:14px; height:14px; stroke: var(--v-ink-faint); }

.v2-verify .v-id-chip{
    font-family: var(--v-font-mono); font-size: 12px; color: var(--v-ink-soft);
    background: var(--v-surface-2); border:1px solid var(--v-line-soft);
    padding: 2px 8px; border-radius: 6px;
    max-width: 220px; overflow:hidden; text-overflow:ellipsis;
}

.v2-verify .v-amount-highlight{
    background: var(--v-indigo-soft); border-radius: 10px; padding: 12px 14px;
    display:flex; align-items:center; justify-content:space-between; margin: 8px 0 10px;
}
.v2-verify .v-amount-highlight .v-k{ font-size:12.5px; color: var(--v-indigo); font-weight:600; }
.v2-verify .v-amount-highlight .v-v{ font-family: var(--v-font-mono); font-size:16px; font-weight:700; color: var(--v-indigo); }

.v2-verify .v-privacy-note{
    display:flex; align-items:flex-start; gap:9px; position:relative;
    background: var(--v-amber-soft); border-radius: 10px; padding: 12px 14px; margin-top:22px; margin-bottom: 6px;
}
.v2-verify .v-privacy-note svg{ width:15px; height:15px; stroke: var(--v-amber); flex-shrink:0; margin-top:1px; }
.v2-verify .v-privacy-note p{ margin:0; font-size:12.5px; line-height:1.65; color:#8A5C13; }

.v2-verify .v-notfound-banner{
    display:flex; align-items:flex-start; gap:9px;
    background: var(--v-red-soft); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px;
}
.v2-verify .v-notfound-banner svg{ width:16px; height:16px; stroke: var(--v-red); flex-shrink:0; margin-top:1px; }
.v2-verify .v-notfound-banner p{ margin:0; font-size:13px; line-height:1.6; color: var(--v-red); font-weight:500; }

.v2-verify .v-items-table{ width:100%; border-collapse:collapse; margin: 4px 0 8px; }
.v2-verify .v-items-table th{
    text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; font-weight:700;
    color: var(--v-ink-faint); padding: 0 0 6px; border-bottom: 1px solid var(--v-line);
}
.v2-verify .v-items-table th:not(:first-child), .v2-verify .v-items-table td:not(:first-child){ text-align:right; }
.v2-verify .v-items-table td{ padding: 7px 0; border-bottom: 1px dashed var(--v-line-soft); font-size:12.5px; color: var(--v-ink); }
.v2-verify .v-items-table tr:last-child td{ border-bottom:none; }

.v2-verify .v-pay-alert{
    border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight:600; margin-bottom: 12px;
}
.v2-verify .v-pay-alert.v-pay-success{ background: var(--v-teal-soft); color: var(--v-teal-deep); }
.v2-verify .v-pay-alert.v-pay-error{ background: var(--v-red-soft); color: var(--v-red); }

.v2-verify .v-pay-form{ background: var(--v-surface-2); border: 1px dashed var(--v-teal); border-radius: 12px; padding: 16px 18px; margin-top: 4px; }
.v2-verify .v-pay-form-title{ font-family: var(--v-font-display); font-size: 13.5px; font-weight:700; color: var(--v-teal-deep); margin: 0 0 4px; }
.v2-verify .v-pay-form-hint{ font-size: 12px; color: var(--v-ink-soft); margin: 0 0 14px; line-height:1.6; }
.v2-verify .v-pay-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v2-verify .v-pay-field{ margin-bottom: 12px; }
.v2-verify .v-pay-field.v-pay-full{ grid-column: 1 / -1; }
.v2-verify .v-pay-field label{
    display:block; font-size: 11px; font-weight:700; color: var(--v-ink-faint); text-transform:uppercase;
    letter-spacing:0.03em; margin-bottom: 5px;
}
.v2-verify .v-pay-field input{
    width:100%; border: 1.5px solid var(--v-line); border-radius: 8px; padding: 10px 12px;
    font-family: var(--v-font-body); font-size: 13.5px; background: var(--v-surface); color: var(--v-ink);
}
.v2-verify .v-pay-field input:focus{ outline:none; border-color: var(--v-teal); box-shadow: 0 0 0 3px var(--v-teal-soft); }
.v2-verify .v-pay-field input[readonly]{ background: var(--v-teal-soft); color: var(--v-teal-deep); font-weight:700; cursor:not-allowed; }
.v2-verify .v-pay-method-chips{ display:flex; gap:8px; }
.v2-verify .v-pay-method-chips label{
    flex:1; text-align:center; border: 1.5px solid var(--v-line); border-radius: 8px; padding: 9px 4px;
    font-size: 12.5px; font-weight:700; color: var(--v-ink-soft); cursor:pointer; transition: all .15s ease;
}
.v2-verify .v-pay-method-chips input{ display:none; }
.v2-verify .v-pay-method-chips input:checked + label{ background: var(--v-teal); border-color: var(--v-teal); color:#fff; }
.v2-verify .v-pay-submit{
    width:100%; border:none; cursor:pointer; background: linear-gradient(155deg, var(--v-teal) 0%, var(--v-teal-deep) 100%);
    color:#fff; font-family: var(--v-font-display); font-weight:600; font-size:14px; padding: 12px; border-radius: 10px;
    margin-top: 4px;
}
.v2-verify .v-pay-submit:hover{ opacity: 0.92; }

.v2-verify .v-lifecycle-actions{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--v-line); }
.v2-verify .v-action-btn{
    border:none; cursor:pointer; font-family: var(--v-font-display); font-weight:600; font-size:13px;
    padding: 11px 18px; border-radius: 10px; transition: transform .12s ease, box-shadow .12s ease;
}
.v2-verify .v-action-btn-primary{
    background: linear-gradient(155deg, var(--v-teal) 0%, var(--v-teal-deep) 100%); color:#fff;
    box-shadow: 0 10px 22px -10px rgba(14,143,114,0.6);
}
.v2-verify .v-action-btn-primary:hover{ transform: translateY(-1px); }
.v2-verify .v-action-btn-danger{ background: var(--v-red-soft); color: var(--v-red); }
.v2-verify .v-action-btn-danger:hover{ background: var(--v-red); color:#fff; }

.v2-verify .v-foot{ text-align:center; margin-top: 8px; font-size: 12px; color: var(--v-ink-faint); }

@media (max-width: 760px){
    .v2-verify .v-grid{ grid-template-columns: 1fr; }
    .v2-verify .v-span-2{ grid-column: 1; }
}
@media (max-width: 560px){
    .v2-verify .v-hero-controls{ flex-direction:column; align-items:stretch; }
    .v2-verify .v-btn-search{ width:100%; }
    .v2-verify .v-id-chip{ max-width: 100%; }
    .v2-verify .v-row{ flex-wrap:wrap; }
    .v2-verify .v-pay-grid{ grid-template-columns: 1fr; }
}

/* Invoice download — "download" is a real browser Print (Save as PDF works
   in every browser's print dialog with zero extra dependencies, matching
   this codebase's no-npm/no-Composer-package constraint). This hides
   everything except the actual order-record cards. */
@media print{
    .topnav, .site-footer, .v2-verify .v-hero, .v2-verify .v-notfound-banner,
    .v2-verify .v-privacy-note, .v2-verify .v-foot, .v2-verify .v-invoice-btn,
    .v2-verify .v-card-pay-pending, .v2-verify .v-lifecycle-actions, dialog.modal{ display:none !important; }
    .v2-verify{ padding: 0; width:auto; margin:0; }
    .v2-verify .v-card{ box-shadow:none; border: 1px solid #999; break-inside: avoid; }
    .v2-verify .v-grid{ display:block; }
    .v2-verify .v-grid .v-card{ margin-bottom: 14px; }
}