/* OVZA Bank Transfer — instructions page (four screens) + components shared with the Track Order card. */

.ovza-bt-page,
.ovza-bt-tracker-card {
    --bt-green: #148a64;
    --bt-green-dark: #0f6d4d;
    --bt-tint: #eef8f3;
    --bt-tint-line: #cfe9dc;
    --bt-ink: #1f2937;
    --bt-text: #3f4650;
    --bt-muted: #6b7280;
    --bt-line: #e6e8ea;
    --bt-amber: #fff8e6;
    --bt-amber-ink: #8a6100;
    --bt-head-font: Calibri, Carlito, "Segoe UI", system-ui, sans-serif;
}
.ovza-bt-page [hidden],
.ovza-bt-tracker-card [hidden] {
    display: none !important;
}

.ovza-bt-page {
    max-width: 1150px;
    margin: 40px auto 64px;
    padding: 0 16px;
    color: var(--bt-text);
    box-sizing: border-box;
}
.ovza-bt-page *,
.ovza-bt-page *::before,
.ovza-bt-page *::after {
    box-sizing: border-box;
}
.ovza-bt-page h1,
.ovza-bt-page h2,
.ovza-bt-page h3 {
    color: var(--bt-ink);
    margin: 0;
    line-height: 1.2;
}
.ovza-bt-page p {
    margin: 0;
    line-height: 1.6;
}
.ovza-bt-ico {
    flex-shrink: 0;
    display: block;
}

/* ---------- Hero ---------- */
.ovza-bt-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: 28px;
}
.ovza-bt-hero-text {
    flex: 1 1 520px;
    max-width: 720px;
}
.ovza-bt-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bt-green);
    margin-bottom: 10px !important;
}
.ovza-bt-eyebrow span {
    margin: 0 6px;
}
.ovza-bt-page h1 {
    font-family: var(--bt-head-font);
    font-size: 44px;
    font-weight: 700;
    color: #333;
    letter-spacing: -.01em;
    margin-bottom: 14px;
}
.ovza-bt-lead {
    font-size: 16px;
    color: var(--bt-text);
}

.ovza-bt-statuscard {
    flex: 0 1 400px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 24px;
    border-radius: 12px;
    background: var(--bt-tint);
    border: 1px solid var(--bt-tint-line);
}
.ovza-bt-statuscard strong {
    display: block;
    color: var(--bt-green);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}
.ovza-bt-statuscard > div > span {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--bt-text);
}
.ovza-bt-statuscard-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Icon and title share one 28px line, so they stay centred on each other whatever line-height the theme sets. */
.ovza-bt-page .ovza-bt-statuscard > div > strong {
    line-height: 28px !important;
}
.ovza-bt-statuscard-icon.is-dot {
    width: 28px;
    height: 28px;
    margin: 0 !important;
}
.ovza-bt-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bt-green);
    box-shadow: 0 0 0 7px rgba(20, 138, 100, .15);
    animation: ovzaBtPulse 1.8s infinite;
}
.ovza-bt-statuscard-icon.is-clock,
.ovza-bt-statuscard-icon.is-check,
.ovza-bt-statuscard-icon.is-alert {
    width: 30px;
    height: 30px;
    margin: 0 !important;
    border-radius: 50%;
    background: var(--bt-green);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(20, 138, 100, .14);
}
.ovza-bt-statuscard.tone-warning {
    background: var(--bt-amber);
    border-color: #f3dfa6;
}
.ovza-bt-statuscard.tone-warning strong {
    color: var(--bt-amber-ink);
}
.ovza-bt-statuscard.tone-warning .ovza-bt-statuscard-icon {
    background: #d39e00;
    box-shadow: 0 0 0 6px rgba(211, 158, 0, .15);
}
.ovza-bt-statuscard.tone-warning .ovza-bt-dot {
    background: #d39e00;
}
@keyframes ovzaBtPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(20, 138, 100, .16); }
    50% { box-shadow: 0 0 0 9px rgba(20, 138, 100, .05); }
}

/* ---------- Step bar ---------- */
.ovza-bt-stepper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 28px;
    padding: 6px 0 0;
    list-style: none;
}
.ovza-bt-stepper li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
}
.ovza-bt-stepper li::before {
    content: "";
    position: absolute;
    top: 27px;
    right: 50%;
    width: 100%;
    height: 3px;
    background: #d5dae0;
    z-index: 0;
}
.ovza-bt-stepper li:first-child::before {
    content: none;
}
.ovza-bt-stepper li.is-done::before,
.ovza-bt-stepper li.is-current::before {
    background: var(--bt-green);
}
.ovza-bt-step-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    color: inherit;
}
.ovza-bt-step-link:hover .ovza-bt-step-dot {
    border-color: var(--bt-green);
    color: var(--bt-green);
}
.ovza-bt-step-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cfd5dc;
    color: var(--bt-muted);
    font-size: 21px;
    font-weight: 600;
    transition: border-color .15s, color .15s;
}
.ovza-bt-stepper li.is-done .ovza-bt-step-dot,
.ovza-bt-stepper li.is-current .ovza-bt-step-dot {
    background: var(--bt-green);
    border-color: var(--bt-green);
    color: #fff;
    box-shadow: 0 0 0 7px rgba(20, 138, 100, .14);
}
.ovza-bt-step-label {
    margin-top: 14px;
    font-size: 17px;
    font-weight: 700;
    color: #a7adb5;
}
.ovza-bt-stepper li.is-done .ovza-bt-step-label,
.ovza-bt-stepper li.is-current .ovza-bt-step-label {
    color: var(--bt-ink);
}

/* ---------- Cards ---------- */
.ovza-bt-card {
    background: #fff;
    border: 1px solid var(--bt-line);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 6px 20px rgba(16, 24, 40, .04);
    margin-bottom: 24px;
}
.ovza-bt-card > h2,
.ovza-bt-card-head h2 {
    font-family: var(--bt-head-font);
    font-size: 30px;
    font-weight: 700;
    color: #111;
}
.ovza-bt-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 24px;
}
.ovza-bt-grid .ovza-bt-card {
    margin-bottom: 24px;
}
.ovza-bt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.ovza-bt-kicker {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bt-green);
    margin-bottom: 10px;
}
.ovza-bt-amount-box,
.ovza-bt-ref-box {
    border-radius: 12px;
    padding: 22px;
}
.ovza-bt-amount-box {
    background: var(--bt-tint);
    margin-bottom: 18px;
}
.ovza-bt-ref-box {
    background: var(--bt-amber);
    border: 1.5px dashed #e2b93b;
}
.ovza-bt-ref-box .ovza-bt-kicker {
    color: var(--bt-amber-ink);
}
.ovza-bt-ref-box p {
    font-size: 15px;
    margin-top: 14px;
    color: #4b3f20;
}
.ovza-bt-copy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.ovza-bt-big {
    font-size: 34px;
    font-weight: 800;
    color: #0b1f17;
    letter-spacing: -.01em;
    word-break: break-word;
}
.ovza-bt-ref {
    font-family: Consolas, Menlo, "Courier New", monospace;
    font-size: 28px;
    font-weight: 700;
    color: #2b2100;
    letter-spacing: .03em;
    word-break: break-all;
}
.ovza-bt-meta,
.ovza-bt-conv {
    display: block;
    font-size: 14.5px;
    color: var(--bt-muted);
    margin-top: 8px;
    line-height: 1.5;
}
.ovza-bt-notice {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.6;
}
.ovza-bt-notice-warn {
    background: var(--bt-amber);
    border-left: 3px solid #d39e00;
    color: #5c4400;
}

/* ---------- Copy buttons ---------- */
.ovza-bt-copy {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 1px solid var(--bt-tint-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--bt-green) !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1 !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ovza-bt-copy:hover {
    background: var(--bt-tint) !important;
    border-color: var(--bt-green) !important;
}
.ovza-bt-copy:focus-visible {
    outline: 2px solid var(--bt-green);
    outline-offset: 2px;
}
.ovza-bt-copy.is-copied {
    background: var(--bt-green) !important;
    border-color: var(--bt-green) !important;
    color: #fff !important;
}
.ovza-bt-copy.is-failed {
    border-color: #c0392b !important;
    color: #c0392b !important;
}
.ovza-bt-copy-sm {
    padding: 7px !important;
}

/* ---------- Bank details ---------- */
.ovza-bt-details {
    margin: 0;
}
.ovza-bt-detail {
    display: grid;
    grid-template-columns: minmax(130px, 40%) 1fr;
    gap: 6px 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #eef0f2;
}
.ovza-bt-detail dt {
    font-size: 14.5px;
    color: var(--bt-muted);
    margin: 0;
    font-weight: 400;
}
.ovza-bt-detail dd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    font-weight: 600;
    color: var(--bt-ink);
    font-size: 15.5px;
}
.ovza-bt-detail.is-note dd {
    font-weight: 400;
    font-size: 14px;
}
.ovza-bt-value {
    word-break: break-word;
}
.ovza-bt-mono {
    font-family: Consolas, Menlo, monospace;
}

/* ---------- Buttons ---------- */
.ovza-bt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.ovza-bt-actions-center {
    justify-content: center;
}
.ovza-bt-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px !important;
    border-radius: 10px !important;
    border: 2px solid var(--bt-green) !important;
    background: var(--bt-green) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
}
.ovza-bt-btn:hover {
    background: var(--bt-green-dark) !important;
    border-color: var(--bt-green-dark) !important;
}
.ovza-bt-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.ovza-bt-btn-ghost {
    background: #fff !important;
    color: var(--bt-green) !important;
}
.ovza-bt-btn-ghost:hover {
    background: var(--bt-tint) !important;
    color: var(--bt-green-dark) !important;
}
.ovza-bt-btn-lg {
    padding: 18px 30px !important;
    font-size: 18px !important;
}
.ovza-bt-btn-wide {
    min-width: 380px;
}
.ovza-bt-btn-block {
    width: 100%;
}

/* ---------- "Already made your transfer?" bar (link to the upload screen) ---------- */
.ovza-bt-upload-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    text-decoration: none !important;
    color: inherit;
    border-color: var(--bt-tint-line);
    transition: border-color .15s, box-shadow .15s;
}
.ovza-bt-upload-cta:hover {
    border-color: var(--bt-green);
    box-shadow: 0 6px 20px rgba(20, 138, 100, .12);
}
.ovza-bt-upload-cta-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ovza-bt-upload-cta-text strong {
    font-size: 17px;
    color: var(--bt-ink);
}
.ovza-bt-upload-cta-text span {
    font-size: 14.5px;
    color: var(--bt-muted);
}
.ovza-bt-upload-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    background: var(--bt-green);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

/* Round tinted icon */
.ovza-bt-round {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e3f2eb;
    color: var(--bt-green);
}

/* ---------- Before you pay ---------- */
.ovza-bt-before ul {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}
.ovza-bt-before li {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 0;
    margin: 0 0 10px;
    padding: 10px 14px;
    font-size: 14.5px;
    color: var(--bt-text);
    line-height: 1.55;
}
.ovza-bt-before li > span:last-child {
    padding-left: 22px;
    border-left: 1px solid #dfe3e6;
}
.ovza-bt-before li.is-highlight {
    background: var(--bt-tint);
    border: 1px solid var(--bt-tint-line);
    border-radius: 12px;
    padding: 16px 14px;
}
.ovza-bt-before li.is-highlight strong {
    display: block;
    color: #111;
    font-weight: 600;
}
.ovza-bt-before-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #e3f2eb;
    color: var(--bt-green);
}
.ovza-bt-before-icon.is-solid {
    background: transparent;
    color: var(--bt-green);
}
.ovza-bt-before-icon.is-solid .ovza-bt-ico path:first-child {
    fill: var(--bt-green);
}
.ovza-bt-before-icon.is-solid .ovza-bt-ico path:last-child {
    stroke: #fff;
}

/* ---------- Prefer another way to pay ---------- */
.ovza-bt-switch > p {
    margin-top: 12px;
    font-size: 17px;
    color: var(--bt-muted);
}
.ovza-bt-switch-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 26px;
}
.ovza-bt-switch-buttons .ovza-bt-btn {
    width: 100%;
    gap: 14px;
}
.ovza-bt-inline-msg {
    color: #8e2a20;
    font-size: 14px;
    margin-top: 12px !important;
}

/* ---------- Upload screen ---------- */
.ovza-bt-upload {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
}
.ovza-bt-upload-info {
    background: var(--bt-tint);
    border-radius: 12px;
    padding: 28px;
}
.ovza-bt-upload-info h2 {
    font-size: 25px;
    font-weight: 700;
    margin: 22px 0 12px;
}
.ovza-bt-upload-info > p {
    font-size: 17px;
    color: var(--bt-text);
}
.ovza-bt-tip {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    padding: 20px 22px;
    border-radius: 12px;
    background: #dff1e8;
}
.ovza-bt-tip-icon {
    color: var(--bt-green);
}
.ovza-bt-tip strong {
    display: block;
    color: var(--bt-green);
    font-size: 17px;
    margin-bottom: 6px;
}
.ovza-bt-tip > div > span {
    font-size: 15px;
    color: var(--bt-text);
    line-height: 1.55;
}
.ovza-bt-upload-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ovza-bt-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 150px;
    padding: 24px;
    border: 2px dashed #b9dccb;
    border-radius: 14px;
    background: #fafdfb;
    color: var(--bt-green);
    text-align: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ovza-bt-upload .ovza-bt-drop {
    height: 100%;
    padding: 40px 48px;
    gap: 12px;
    background: #fff;
}
.ovza-bt-drop:hover,
.ovza-bt-drop.is-drag {
    background: var(--bt-tint);
    border-color: var(--bt-green);
}
.ovza-bt-drop:focus-within {
    outline: 2px solid var(--bt-green);
    outline-offset: 2px;
}
.ovza-bt-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.ovza-bt-drop .ovza-bt-btn {
    position: relative;
    z-index: 2; /* above the invisible file input */
    margin-top: 24px;
}
.ovza-bt-drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px dashed #b9dccb;
    color: var(--bt-green);
    margin-bottom: 12px;
}
.ovza-bt-drop-title {
    font-weight: 700;
    color: var(--bt-ink);
    font-size: 19px;
}
.ovza-bt-drop-title u {
    color: var(--bt-green);
    text-underline-offset: 3px;
}
.ovza-bt-drop-hint {
    font-size: 15px;
    color: var(--bt-muted);
}
.ovza-bt-drop-file {
    margin-top: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--bt-tint-line);
    font-size: 14px;
    color: var(--bt-ink);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ovza-bt-upload-msg {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.ovza-bt-upload-msg.tone-success { background: var(--bt-tint); color: #0d5b41; border-left: 3px solid var(--bt-green); }
.ovza-bt-upload-msg.tone-error { background: #fdecea; color: #8e2a20; border-left: 3px solid #c0392b; }
.ovza-bt-upload-msg.tone-info { background: #f3f4f6; color: var(--bt-text); border-left: 3px solid #9ca3af; }
.ovza-bt-proofs { list-style: none; margin: 4px 0 0; padding: 0; }
.ovza-bt-proofs li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 10px 12px;
    border: 1px solid var(--bt-line);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}
.ovza-bt-proofs li::before { content: "📎"; margin-right: 6px; }
.ovza-bt-proofs a { color: var(--bt-green); font-weight: 600; text-decoration: none; flex: 1; }
.ovza-bt-proofs span { color: var(--bt-muted); font-size: 12.5px; }
.ovza-bt-muted { color: var(--bt-muted); font-size: 13px; }

/* ---------- Result (uploaded / verified) ---------- */
.ovza-bt-result {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}
.ovza-bt-result-main {
    background: var(--bt-tint);
    border-radius: 12px;
    padding: 30px;
}
.ovza-bt-result-main.is-row {
    display: flex;
    align-items: center;
    gap: 30px;
}
.ovza-bt-result-main.is-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 40px;
}
.ovza-bt-result-main h2 {
    font-size: 27px;
    font-weight: 800;
    color: #0f1d3a;
    margin-bottom: 14px;
}
.ovza-bt-result-main.is-center h2 {
    margin-top: 24px;
}
.ovza-bt-result-main p {
    font-size: 19px;
    color: #44506a;
    line-height: 1.6;
}
.ovza-bt-result-main p strong {
    color: #0f1d3a;
}
.ovza-bt-bigcheck {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--bt-green);
    color: #fff;
    box-shadow: 0 0 0 22px rgba(20, 138, 100, .1);
    margin: 22px;
}
.ovza-bt-result-side h3 {
    font-size: 21px;
    font-weight: 700;
    color: #0f1d3a;
    margin: 6px 0 16px;
}
.ovza-bt-summary {
    margin: 0;
}
.ovza-bt-summary > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}
.ovza-bt-summary dt {
    color: var(--bt-muted);
    font-size: 15.5px;
    margin: 0;
}
.ovza-bt-summary dd {
    margin: 0;
    color: #0f1d3a;
    font-weight: 600;
    font-size: 15.5px;
    text-align: right;
}
.ovza-bt-summary.is-boxed {
    background: #f3f5f8;
    border-radius: 10px;
    padding: 8px 24px;
}
.ovza-bt-summary.is-lined > div + div {
    border-top: 1px solid #eceef0;
}
.ovza-bt-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #e3f4ec;
    color: var(--bt-green);
    font-weight: 600;
}
.ovza-bt-pill .ovza-bt-ico {
    width: 20px;
    height: 20px;
    padding: 3px;
    border-radius: 50%;
    background: var(--bt-green);
    color: #fff;
}

/* ---------- What happens next ---------- */
.ovza-bt-next h2 {
    font-family: inherit !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    color: #0f1d3a !important;
}
.ovza-bt-next-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}
.ovza-bt-next-steps li {
    position: relative;
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin: 0;
}
.ovza-bt-next-steps li + li::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 30px;
    width: 10px;
    height: 10px;
    border: solid #b8bfc7;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}
.ovza-bt-next-steps .ovza-bt-round {
    width: 76px;
    height: 76px;
}
.ovza-bt-next-steps strong {
    display: block;
    font-size: 17px;
    color: #0f1d3a;
    margin-bottom: 6px;
}
.ovza-bt-next-steps li > div > span {
    font-size: 15.5px;
    color: var(--bt-muted);
    line-height: 1.55;
}
.ovza-bt-important {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 22px 26px;
    border-radius: 10px;
    background: #fff4dc;
}
.ovza-bt-important-icon {
    color: #f2a51a;
}
.ovza-bt-important strong {
    display: block;
    color: #0f1d3a;
    font-size: 16px;
    margin-bottom: 4px;
}
.ovza-bt-important > div > span {
    font-size: 15px;
    color: #44506a;
    line-height: 1.6;
}

/* ---------- Footer actions ---------- */
.ovza-bt-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--bt-line);
}
.ovza-bt-footer-actions.is-split {
    justify-content: space-between;
}
.ovza-bt-footer-actions.is-center {
    justify-content: center;
    border-top: 0;
}
.ovza-bt-closed p {
    font-size: 16px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .ovza-bt-grid,
    .ovza-bt-upload,
    .ovza-bt-result {
        grid-template-columns: 1fr;
    }
    .ovza-bt-next-steps {
        grid-template-columns: 1fr;
    }
    .ovza-bt-next-steps li + li::before {
        content: none;
    }
    .ovza-bt-statuscard {
        flex-basis: 100%;
    }
}
@media (max-width: 640px) {
    .ovza-bt-page { margin-top: 24px; }
    .ovza-bt-page h1 { font-size: 32px; }
    .ovza-bt-card { padding: 18px; border-radius: 12px; }
    .ovza-bt-card > h2, .ovza-bt-card-head h2 { font-size: 24px; }
    .ovza-bt-big { font-size: 27px; }
    .ovza-bt-ref { font-size: 22px; }
    .ovza-bt-step-dot { width: 42px; height: 42px; font-size: 17px; }
    .ovza-bt-stepper li::before { top: 21px; }
    .ovza-bt-step-label { font-size: 13px; margin-top: 10px; }
    .ovza-bt-detail { grid-template-columns: 1fr; gap: 2px; }
    .ovza-bt-switch-buttons { grid-template-columns: 1fr; gap: 12px; }
    .ovza-bt-result-main.is-row { flex-direction: column; text-align: center; }
    .ovza-bt-result-main h2 { font-size: 24px; }
    .ovza-bt-result-main p { font-size: 16px; }
    .ovza-bt-btn-wide { min-width: 0; width: 100%; }
    .ovza-bt-footer-actions .ovza-bt-btn { flex: 1 1 100%; }
    .ovza-bt-upload-cta { flex-wrap: wrap; }
    .ovza-bt-upload-cta-btn { width: 100%; justify-content: center; }
    .ovza-bt-upload .ovza-bt-drop { padding: 28px 18px; }
}

/* ---------- Typography & icons, hardened against the theme (approved mockups) ----------
   The theme's fonts (Poppins) and paragraph line-height otherwise override the page. */
.ovza-bt-page {
    --bt-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-family: var(--bt-font);
    line-height: 1.55;
}
.ovza-bt-page :where(div, p, span, strong, em, u, a, button, label, dt, dd, li, h2, h3, small) {
    font-family: var(--bt-font) !important;
    letter-spacing: normal;
}
.ovza-bt-page p,
.ovza-bt-page li,
.ovza-bt-page dt,
.ovza-bt-page dd {
    line-height: 1.55 !important;
}
.ovza-bt-page h1,
.ovza-bt-page .ovza-bt-card > h2,
.ovza-bt-page .ovza-bt-card-head h2 {
    font-family: var(--bt-head-font) !important;
    line-height: 1.2 !important;
}
.ovza-bt-page .ovza-bt-next > h2,
.ovza-bt-page .ovza-bt-result h2,
.ovza-bt-page .ovza-bt-result h3,
.ovza-bt-page .ovza-bt-upload-info h2 {
    font-family: var(--bt-font) !important;
    line-height: 1.25 !important;
}
.ovza-bt-page .ovza-bt-ref,
.ovza-bt-page .ovza-bt-mono {
    font-family: Consolas, Menlo, "Courier New", monospace !important;
}
.ovza-bt-page .ovza-bt-result-main p,
.ovza-bt-page .ovza-bt-upload-info > p {
    line-height: 1.6 !important;
}

/* Icons: stroke icons in OVZA green, a touch bolder like the mockups. */
.ovza-bt-page svg.ovza-bt-ico {
    stroke-width: 2;
    overflow: visible;
}
.ovza-bt-page .ovza-bt-round {
    color: var(--bt-green) !important;
}
.ovza-bt-page .ovza-bt-next-steps .ovza-bt-round svg {
    width: 34px;
    height: 34px;
}
.ovza-bt-page .ovza-bt-important-icon {
    color: #f2a51a !important;
}
.ovza-bt-page .ovza-bt-tip-icon {
    color: var(--bt-green) !important;
}
.ovza-bt-page .ovza-bt-before-icon {
    color: var(--bt-green) !important;
}
.ovza-bt-page :where(span, strong, em, u, small, label, a, div) {
    line-height: inherit !important;
}

.ovza-bt-page.ovza-bt-page {
    line-height: 1.55 !important; /* root of the inherit chain above */
}

/* =====================================================================================
   Measured against the four approved mockups (sizes as a share of the 1118px content width).
   Text blocks that sit next to a heading are display:block with their own font-size and
   line-height: as inline spans they took the parent's taller line box and spread out.
   ===================================================================================== */

/* Headings font: Calibri on Windows, the metric-compatible Carlito everywhere else. */
@font-face {
    font-family: "OVZA Carlito";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: local("Calibri Bold"), local("Calibri-Bold"), url("../fonts/Carlito-Bold.ttf") format("truetype");
}
.ovza-bt-page,
.ovza-bt-tracker-card {
    --bt-head-font: Calibri, "OVZA Carlito", Carlito, "Segoe UI", system-ui, sans-serif;
}

/* Hero: the text block sits level with the status box beside it.
   Margins are !important because the theme adds its own heading/paragraph spacing. */
.ovza-bt-page .ovza-bt-hero {
    align-items: center;
    gap: 20px 34px;
    margin: 0 0 26px !important;
}
.ovza-bt-page .ovza-bt-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ovza-bt-page .ovza-bt-eyebrow {
    margin: 0 0 4px !important;
    line-height: 1.4 !important;
}
.ovza-bt-page h1 {
    font-size: 41px;
    margin: 0 0 10px !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}
.ovza-bt-page .ovza-bt-lead {
    max-width: 630px;
    margin: 0 !important;
    font-size: 15.5px;
    line-height: 1.55 !important;
    color: #4a5059;
}
.ovza-bt-page .ovza-bt-hero + .ovza-bt-stepper {
    clear: both;
    margin-top: 0 !important;
}
.ovza-bt-page .ovza-bt-statuscard {
    align-items: flex-start; /* icon at the top, level with the title */
    flex: 0 0 410px;
    max-width: 100%;
    gap: 14px;
    padding: 22px 26px 24px 22px;
}
.ovza-bt-page .ovza-bt-statuscard > div > strong {
    font-size: 17px;
    margin-bottom: 4px;
}
.ovza-bt-page .ovza-bt-statuscard > div > span {
    display: block;
    font-size: 14px;
    line-height: 1.6 !important;
    color: #3f4650;
}

/* Step bar on a soft band */
.ovza-bt-page .ovza-bt-stepper {
    margin: 0 0 22px;
    padding: 20px 0 18px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(246, 248, 248, 0) 0%, #f6f8f8 6%, #f6f8f8 94%, rgba(246, 248, 248, 0) 100%);
}
.ovza-bt-page .ovza-bt-step-dot {
    width: 50px;
    height: 50px;
    font-size: 22px;
    border-width: 2.5px;
    border-color: #cfd5df;
    color: #6b7280;
}
.ovza-bt-page .ovza-bt-stepper li::before {
    top: 24px;
}
.ovza-bt-page .ovza-bt-stepper li.is-done .ovza-bt-step-dot,
.ovza-bt-page .ovza-bt-stepper li.is-current .ovza-bt-step-dot {
    box-shadow: 0 0 0 7px rgba(20, 138, 100, .13);
}
.ovza-bt-page .ovza-bt-step-dot svg.ovza-bt-ico {
    stroke-width: 2.8;
}
.ovza-bt-page .ovza-bt-step-label {
    margin-top: 14px;
    font-size: 19px;
    font-weight: 700;
    color: #a3a9b3;
    line-height: 1.25 !important;
}
.ovza-bt-page .ovza-bt-stepper li.is-done .ovza-bt-step-label,
.ovza-bt-page .ovza-bt-stepper li.is-current .ovza-bt-step-label {
    color: #1c2541;
}

/* Cards */
.ovza-bt-page .ovza-bt-card > h2,
.ovza-bt-page .ovza-bt-card-head h2 {
    font-size: 32px;
}
.ovza-bt-page .ovza-bt-kicker {
    font-size: 13px;
    letter-spacing: .13em;
}

/* Amount + reference */
.ovza-bt-page .ovza-bt-amount-box {
    padding: 24px 22px 22px;
}
.ovza-bt-page .ovza-bt-ref-box {
    padding: 26px 22px 24px;
}
.ovza-bt-page .ovza-bt-ref {
    font-size: 31px;
    letter-spacing: .06em;
}
.ovza-bt-page .ovza-bt-ref-box p {
    font-size: 15px;
    line-height: 1.6 !important;
    margin-top: 16px;
}
.ovza-bt-page .ovza-bt-meta {
    font-size: 15px;
}
.ovza-bt-page .ovza-bt-notice {
    font-family: var(--bt-head-font) !important;
    font-size: 15px;
    line-height: 1.55 !important;
    padding: 16px 18px;
}
.ovza-bt-page .ovza-bt-notice strong {
    font-family: var(--bt-head-font) !important;
}

/* Copy buttons */
.ovza-bt-page .ovza-bt-copy {
    padding: 9px 15px !important;
    font-size: 15px !important;
}
.ovza-bt-page .ovza-bt-copy-sm {
    padding: 8px !important;
}

/* Bank details */
.ovza-bt-page .ovza-bt-card-head {
    margin-bottom: 14px;
}
.ovza-bt-page .ovza-bt-detail {
    min-height: 65px;
    padding: 12px 0;
}
.ovza-bt-page .ovza-bt-bank .ovza-bt-actions {
    margin-top: 38px;
}
.ovza-bt-page .ovza-bt-bank .ovza-bt-btn {
    min-width: 202px;
    padding: 19px 26px !important;
    font-size: 18px !important;
}

/* Before you pay */
.ovza-bt-page .ovza-bt-before ul {
    margin-top: 16px;
}
.ovza-bt-page .ovza-bt-before li {
    grid-template-columns: 66px 1fr;
    margin: 0 0 4px;
    padding: 9px 14px 9px 4px;
    font-size: 14px;
}
.ovza-bt-page .ovza-bt-before li > span:last-child {
    padding-left: 20px;
}
.ovza-bt-page .ovza-bt-before li.is-highlight {
    padding: 13px 14px 13px 4px;
    margin-bottom: 10px;
}
.ovza-bt-page .ovza-bt-before li.is-highlight strong {
    font-size: 14.5px;
}
.ovza-bt-page .ovza-bt-before-icon {
    width: 52px;
    height: 52px;
    margin-left: 4px;
}

/* Prefer another way to pay */
.ovza-bt-page .ovza-bt-switch > p {
    font-size: 15px;
}
.ovza-bt-page .ovza-bt-switch-buttons .ovza-bt-btn {
    min-height: 70px;
    font-size: 20px !important;
    gap: 16px;
}

/* Footer and large buttons (uploaded / upload / verified) */
.ovza-bt-page .ovza-bt-btn-lg {
    min-height: 52px;
    padding: 14px 34px !important;
    font-size: 16.5px !important;
}
.ovza-bt-page .ovza-bt-footer-actions .ovza-bt-btn-ghost,
.ovza-bt-page .ovza-bt-footer-actions .ovza-bt-btn-back {
    min-width: 242px;
}
.ovza-bt-page .ovza-bt-footer-actions .ovza-bt-btn-wide {
    min-width: 316px;
}
.ovza-bt-page .ovza-bt-footer-actions.is-center .ovza-bt-btn-wide {
    min-width: 405px;
    min-height: 56px;
}
.ovza-bt-page .ovza-bt-footer-actions {
    padding-top: 24px;
}
/* "Track your order" (uploaded screen): white button, 242px like "Back to bank details", OVZA logo icon. */
.ovza-bt-page .ovza-bt-footer-actions .ovza-bt-btn-track {
    width: 242px;
    min-width: 242px;
    padding: 14px 20px !important;
}
.ovza-bt-page .ovza-bt-track-img {
    display: block;
    flex-shrink: 0;
    width: 22px !important;
    height: 22px !important;
    max-width: none;
    margin: 0;
}
/* OVZA logo (as in the header's Track Order button) on a white tile, so it shows on the green button. */
.ovza-bt-page .ovza-bt-track-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #fff;
}
.ovza-bt-page .ovza-bt-track-logo img {
    display: block;
    width: 20px !important;
    height: 20px !important;
    max-width: none;
    margin: 0;
}

/* Upload screen */
.ovza-bt-page .ovza-bt-upload {
    gap: 28px;
    padding: 24px 28px;
}
.ovza-bt-page .ovza-bt-upload-info {
    padding: 26px 26px 24px;
}
.ovza-bt-page .ovza-bt-upload-info .ovza-bt-round {
    width: 62px;
    height: 62px;
}
.ovza-bt-page .ovza-bt-upload-info h2 {
    font-size: 21px;
    margin: 0 0 10px;
}
.ovza-bt-page .ovza-bt-upload-info > p {
    font-size: 17px;
    line-height: 1.45 !important;
}
.ovza-bt-page .ovza-bt-tip {
    margin-top: 26px;
    padding: 18px 22px 20px;
    gap: 14px;
}
.ovza-bt-page .ovza-bt-tip strong {
    font-size: 15.5px;
    margin-bottom: 4px;
}
.ovza-bt-page .ovza-bt-tip > div > span {
    display: block;
    font-size: 14.5px;
    line-height: 1.5 !important;
}
.ovza-bt-page .ovza-bt-upload .ovza-bt-drop {
    justify-content: flex-start;
    padding: 50px 38px 30px;
}
.ovza-bt-page .ovza-bt-drop-icon {
    width: 86px;
    height: 86px;
    margin-bottom: 14px;
}
.ovza-bt-page .ovza-bt-drop .ovza-bt-btn {
    margin-top: auto;
    min-height: 56px;
    font-size: 17px !important;
}
.ovza-bt-page .ovza-bt-drop-hint {
    margin-top: 4px;
}
.ovza-bt-page .ovza-bt-drop-file:not([hidden]) + .ovza-bt-btn {
    margin-top: 24px;
}
.ovza-bt-page #ovza-bt-upload-btn:disabled {
    opacity: 1;
    background: #84d3b5 !important;
    border-color: #84d3b5 !important;
}

/* Results (uploaded / verified) */
.ovza-bt-page .ovza-bt-result {
    padding: 28px;
}
.ovza-bt-page .ovza-bt-result.is-uploaded {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
}
.ovza-bt-page .ovza-bt-result.is-verified {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}
.ovza-bt-page .ovza-bt-result.is-verified .ovza-bt-result-side {
    margin-left: 22px;
    padding: 8px 0 0 34px;
    border-left: 1px solid #e8ebee;
}
.ovza-bt-page .ovza-bt-result-main.is-row {
    gap: 30px;
    padding: 26px 30px 26px 16px;
}
.ovza-bt-page .ovza-bt-result-main.is-row .ovza-bt-bigcheck {
    width: 56px;
    height: 56px;
    margin: 0 0 0 14px;
    box-shadow: 0 0 0 14px rgba(20, 138, 100, .1);
}
.ovza-bt-page .ovza-bt-result-main.is-row .ovza-bt-bigcheck svg {
    width: 28px;
    height: 28px;
}
.ovza-bt-page .ovza-bt-result-main.is-center {
    padding: 20px 36px 30px;
}
.ovza-bt-page .ovza-bt-result-main.is-center .ovza-bt-bigcheck {
    width: 78px;
    height: 78px;
    margin: 24px;
    box-shadow: 0 0 0 24px rgba(20, 138, 100, .09);
}
.ovza-bt-page .ovza-bt-result-main h2 {
    font-size: 25px;
    margin-bottom: 10px;
}
.ovza-bt-page .ovza-bt-result-main.is-center h2 {
    margin-top: 16px;
}
.ovza-bt-page .ovza-bt-result-main.is-row p {
    font-size: 15px;
    line-height: 1.5 !important;
}
.ovza-bt-page .ovza-bt-result-main.is-center p {
    font-size: 15px;
    line-height: 1.45 !important;
}
.ovza-bt-page .ovza-bt-result-side h3 {
    font-size: 19px;
    margin: 0 0 14px;
}
.ovza-bt-page .ovza-bt-summary.is-boxed {
    padding: 8px 22px;
}
.ovza-bt-page .ovza-bt-summary.is-boxed > div {
    padding: 8px 0;
}
.ovza-bt-page .ovza-bt-summary.is-boxed dt,
.ovza-bt-page .ovza-bt-summary.is-boxed dd {
    font-size: 13.5px;
}
.ovza-bt-page .ovza-bt-summary.is-lined > div {
    padding: 10px 0;
}
.ovza-bt-page .ovza-bt-summary.is-lined dt,
.ovza-bt-page .ovza-bt-summary.is-lined dd {
    font-size: 14px;
}

/* What happens next */
.ovza-bt-page .ovza-bt-next > h2 {
    font-size: 21px !important;
}
.ovza-bt-page .ovza-bt-next-steps {
    margin-top: 22px;
}
.ovza-bt-page .ovza-bt-next-steps .ovza-bt-round {
    width: 68px;
    height: 68px;
}
/* Icon glyphs sized like the mockups (the 24-unit artwork has padding, so the boxes run larger). */
.ovza-bt-page .ovza-bt-next-steps .ovza-bt-round svg {
    width: 40px;
    height: 40px;
}
.ovza-bt-page .ovza-bt-upload-info .ovza-bt-round svg {
    width: 40px;
    height: 40px;
}
.ovza-bt-page .ovza-bt-drop-icon svg {
    width: 44px;
    height: 44px;
}
.ovza-bt-page .ovza-bt-before-icon.is-solid svg {
    width: 40px;
    height: 40px;
}
.ovza-bt-page .ovza-bt-before-icon:not(.is-solid) svg {
    width: 27px;
    height: 27px;
}
.ovza-bt-page .ovza-bt-upload-cta .ovza-bt-round svg {
    width: 32px;
    height: 32px;
}
.ovza-bt-page .ovza-bt-result-main.is-row {
    min-height: 198px;
}
.ovza-bt-page .ovza-bt-next-steps li {
    gap: 20px;
}
.ovza-bt-page .ovza-bt-next-steps li + li::before {
    top: 29px;
}
.ovza-bt-page .ovza-bt-next-steps strong {
    font-size: 15.5px;
    margin: 6px 0 4px;
}
.ovza-bt-page .ovza-bt-next-steps li > div > span {
    display: block;
    font-size: 14px;
    line-height: 1.5 !important;
}
.ovza-bt-page .ovza-bt-important {
    align-items: flex-start;
    margin-top: 26px;
    padding: 20px 24px;
    gap: 22px;
}
.ovza-bt-page .ovza-bt-important strong {
    font-size: 14.5px;
    margin-bottom: 2px;
}
.ovza-bt-page .ovza-bt-important > div > span {
    display: block;
    font-size: 13.5px;
    line-height: 1.5 !important;
}

@media (max-width: 960px) {
    .ovza-bt-page .ovza-bt-statuscard { flex: 1 1 100%; }
    .ovza-bt-page .ovza-bt-result.is-uploaded,
    .ovza-bt-page .ovza-bt-result.is-verified { grid-template-columns: 1fr; gap: 24px; }
    .ovza-bt-page .ovza-bt-result.is-verified .ovza-bt-result-side { margin-left: 0; padding: 0; border-left: 0; }
    .ovza-bt-page .ovza-bt-bank .ovza-bt-btn { min-width: 0; flex: 1 1 200px; }
}
@media (max-width: 640px) {
    .ovza-bt-page h1 { font-size: 32px; }
    .ovza-bt-page .ovza-bt-step-dot { width: 40px; height: 40px; font-size: 17px; }
    .ovza-bt-page .ovza-bt-stepper li::before { top: 19px; }
    .ovza-bt-page .ovza-bt-step-label { font-size: 13px; margin-top: 10px; }
    .ovza-bt-page .ovza-bt-card > h2, .ovza-bt-page .ovza-bt-card-head h2 { font-size: 25px; }
    .ovza-bt-page .ovza-bt-switch-buttons .ovza-bt-btn { min-height: 58px; font-size: 17px !important; }
    .ovza-bt-page .ovza-bt-footer-actions .ovza-bt-btn,
    .ovza-bt-page .ovza-bt-footer-actions.is-center .ovza-bt-btn-wide { min-width: 0; width: 100%; }
    .ovza-bt-page .ovza-bt-result-main.is-row { padding: 26px 20px; }
    .ovza-bt-page .ovza-bt-result-main.is-row .ovza-bt-bigcheck { margin: 14px; }
    .ovza-bt-page .ovza-bt-upload { padding: 18px; }
}