/* ============================================================================
   NqdPay PWA — page components
   ----------------------------------------------------------------------------
   Loads after nqdpay-ds.css and premium-theme.css. Class names match the views
   exactly, so the markup was left alone; only the styling changed.

   Shopper-facing payment surfaces are held to a stricter standard than the
   back-office: amount and merchant must be unmissable, everything else recedes,
   and nothing animates without cause.
   ========================================================================== */

/* ---- Shared page container ----------------------------------------------- */
.checkout-container,
.status-container,
.amount-container,
.scancode-container,
.login-container,
.qr-container {
    width: 100%;
    max-width: var(--pwa-max-w);
    margin-inline: auto;
    padding: calc(var(--pwa-gutter) + var(--safe-top)) var(--pwa-gutter)
             calc(var(--pwa-gutter) + var(--safe-bottom));
}

.login-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Merchant header ----------------------------------------------------- */
.merchant-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    padding-block: .5rem 1.25rem;
    text-align: center;
}

.merchant-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nq-surface);
    border: 1px solid var(--nq-line);
    border-radius: var(--pwa-r);
    color: var(--nq-ink-2);
    font-size: 1.25rem;
    background-image: none;
}

.merchant-name {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--nq-ink);
    margin: 0;
}

.merchant-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .1875rem .5rem;
    background: var(--nq-surface-2);
    border: 1px solid var(--nq-line);
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--nq-ink-3);
    background-image: none;
}

/* ---- Progress steps ------------------------------------------------------ */
.checkout-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    margin-bottom: 1.25rem;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3125rem;
    flex: none;
}

.progress-circle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--nq-surface);
    border: 1px solid var(--nq-line-strong);
    color: var(--nq-ink-3);
    font-size: .6875rem;
    font-weight: 600;
    background-image: none;
    box-shadow: none;
}

.progress-step.completed .progress-circle {
    background: var(--nq-success);
    border-color: var(--nq-success);
    color: #fff;
}

.progress-step.active .progress-circle {
    background: var(--nq-accent);
    border-color: var(--nq-accent);
    color: #fff;
}

.progress-label {
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--nq-ink-3);
    white-space: nowrap;
}

.progress-step.active .progress-label { color: var(--nq-ink); font-weight: 600; }

.progress-line {
    flex: 1 1 auto;
    max-width: 40px;
    height: 1px;
    background: var(--nq-line-strong);
    margin-bottom: 1rem;
}

/* ---- Order summary ------------------------------------------------------- */
.order-summary,
.qr-info-card,
.amount-card,
.receipt-card,
.test-card-info,
.payment-widget-container,
.recent-transactions {
    background: var(--nq-surface);
    border: 1px solid var(--nq-line);
    border-radius: var(--pwa-r-lg);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: none;
    backdrop-filter: none;
}

.order-header,
.widget-header,
.receipt-header,
.amount-header,
.test-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--nq-line);
    background: transparent;
    background-image: none;
}

.order-header h3,
.widget-header h4,
.test-card-header h5 {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--nq-ink-3);
    margin: 0;
}

.order-header i, .widget-header i, .test-card-header i { color: var(--nq-ink-3); font-size: .875rem; }

.order-details, .receipt-details, .test-card-details { padding: .25rem 1rem; }

.detail-row,
.receipt-row,
.test-card-row,
.amount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6875rem 0;
    border-bottom: 1px solid var(--nq-line);
}

.detail-row:last-child,
.receipt-row:last-child,
.test-card-row:last-child { border-bottom: 0; }

.detail-label, .receipt-label, .test-card-label {
    font-size: .8125rem;
    color: var(--nq-ink-3);
    flex: none;
}

.detail-value, .receipt-value, .test-card-value {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--nq-ink);
    text-align: end;
    overflow-wrap: anywhere;
}

.test-card-value { font-family: var(--nq-font-mono); }

/* The total. This is the one thing on the page that shouts. */
.amount-row, .detail-row.amount-row {
    padding-block: .875rem;
    border-top: 1px solid var(--nq-line);
    border-bottom: 0;
    margin-top: .25rem;
}

.amount-value,
.receipt-amount {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--nq-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.currency-badge {
    font-size: .75rem;
    font-weight: 600;
    color: var(--nq-ink-3);
    margin-inline-start: .25rem;
}

/* ---- Payment widget host ------------------------------------------------- */
.payment-widget-container { padding-bottom: .25rem; }
.payment-widget-container .paymentWidgets { padding: 1rem; }

/* HyperPay injects its own chrome; keep it aligned with the page. */
.wpwl-form { box-shadow: none !important; border: 0 !important; background: transparent !important; margin: 0 !important; }
.wpwl-label { color: var(--nq-ink-3) !important; font-size: .75rem !important; font-weight: 600 !important; }
.wpwl-control { border-radius: var(--pwa-r) !important; border-color: var(--nq-line-strong) !important; font-size: 1rem !important; }
.wpwl-button-pay { background: var(--nq-accent) !important; border-color: var(--nq-accent) !important; border-radius: var(--pwa-r) !important; font-weight: 600 !important; }

/* ---- Wallet buttons ------------------------------------------------------
   Apple Pay and Google Pay are drawn by two different systems: Apple Pay is a
   native -webkit-appearance button sized by width/height, Google Pay is an
   injected element sized by its own buttonSizeMode. Left alone they come out
   at different widths and heights, which is what the checkout looked like.

   One shared box is defined here (--wallet-h) and both are made to fill it, so
   the two brands stack as equal, full-width blocks.

   Brand marks themselves are NOT restyled: Apple and Google both require their
   button artwork, colours and proportions to be used as supplied. */

:root { --wallet-h: 50px; }

/* Each wallet renders inside its own generated form/wrapper. */
.wpwl-form-virtualAccount-APPLEPAY,
.wpwl-form-virtualAccount-GOOGLEPAY,
.wpwl-form-APPLEPAY,
.wpwl-form-GOOGLEPAY {
    width: 100% !important;
    margin: 0 0 .625rem !important;
    padding: 0 !important;
}

.wpwl-wrapper-virtualAccount-apple-pay,
.wpwl-wrapper-virtualAccount-google-pay,
.wpwl-wrapper-apple-pay,
.wpwl-wrapper-google-pay {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
}

/* Apple Pay: the native button. Height and width are the only properties Apple
   permits us to set; everything else is the system-drawn mark. */
.wpwl-apple-pay-button,
apple-pay-button {
    -webkit-appearance: -apple-pay-button !important;
    -apple-pay-button-style: black;
    -apple-pay-button-type: pay;
    --apple-pay-button-height: var(--wallet-h);
    --apple-pay-button-border-radius: var(--pwa-r);
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: var(--wallet-h) !important;
    min-height: var(--wallet-h) !important;
    border-radius: var(--pwa-r) !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Google Pay: the injected button and every wrapper it sits in. */
.wpwl-google-pay-button,
.gpay-card-info-container,
.gpay-card-info-animated-progress-bar-container,
button.gpay-card-info-container {
    width: 100% !important;
    min-width: 100% !important;
    height: var(--wallet-h) !important;
    min-height: var(--wallet-h) !important;
    border-radius: var(--pwa-r) !important;
    margin: 0 !important;
}

/* The Google button keeps its own inner artwork; only the box is ours. */
.gpay-card-info-container > * { max-height: var(--wallet-h); }

/* ---- Security badges ----------------------------------------------------- */
.security-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: .875rem 0 1.25rem;
}

.security-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--nq-ink-3);
    background: none;
    border: 0;
    padding: 0;
}

.security-badge i { font-size: .8125rem; color: var(--nq-ink-3); }

/* ---- Payment status ------------------------------------------------------ */
.status-icon-wrapper {
    display: flex;
    justify-content: center;
    padding-block: 1.5rem 1.25rem;
}

.status-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    background-image: none;
    box-shadow: none;
    animation: none;
}

.status-icon.success { background: var(--nq-success-bg); border: 1px solid var(--nq-success-line); color: var(--nq-success); }
.status-icon.failure { background: var(--nq-danger-bg); border: 1px solid var(--nq-danger-line); color: var(--nq-danger); }

.receipt-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.015em;
    text-align: center;
    margin: 0 0 .375rem;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.receipt-title.success { color: var(--nq-ink); }
.receipt-title.failure { color: var(--nq-ink); }

.receipt-subtitle {
    font-size: .8125rem;
    color: var(--nq-ink-3);
    text-align: center;
    margin: 0;
}

.receipt-header { flex-direction: column; border-bottom: 1px solid var(--nq-line); padding: 1.25rem 1rem; }

.failure-message,
.error-message,
.login-error-message {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 1rem;
    padding: .75rem .875rem;
    background: var(--nq-danger-bg);
    border: 1px solid var(--nq-danger-line);
    border-radius: var(--pwa-r);
    color: var(--nq-danger);
    font-size: .8125rem;
}

.failure-message p, .error-message p { margin: 0; }

/* ---- Amount entry -------------------------------------------------------- */
.amount-input-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .375rem;
    padding: 1.75rem 1rem;
    background: var(--nq-surface);
    border: 1px solid var(--nq-line);
    border-radius: var(--pwa-r-lg);
    margin-bottom: 1rem;
}

.amount-input-symbol {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--nq-ink-3);
    flex: none;
}

/* Element-qualified: a bare .amount-input (0,1,0) loses to the generic
   input[type="number"] rule (0,1,1) in premium-theme.css, and would silently
   render at 1rem. */
input.amount-input,
.amount-input {
    width: 100%;
    max-width: 220px;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    min-height: auto !important;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--nq-ink);
    text-align: center;
    box-shadow: none !important;
}

.amount-input:focus { outline: none; box-shadow: none !important; }
.amount-input::placeholder { color: var(--nq-line-strong); }
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.quick-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.quick-amount-btn {
    min-height: var(--pwa-touch);
    padding: .625rem;
    background: var(--nq-surface);
    border: 1px solid var(--nq-line-strong);
    border-radius: var(--pwa-r);
    color: var(--nq-ink);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    background-image: none;
}

.quick-amount-btn:active,
.quick-amount-btn.selected {
    background: var(--nq-accent-subtle);
    border-color: var(--nq-accent);
    color: var(--nq-accent-ink);
}

.generate-btn-wrapper { position: sticky; bottom: 0; padding-block: .75rem; background: var(--nq-ground); }

/* ---- QR code ------------------------------------------------------------- */
.qr-code-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #FFFFFF;          /* scanners need a true-white quiet zone */
    border: 1px solid var(--nq-line);
    border-radius: var(--pwa-r-lg);
    margin-bottom: 1rem;
}

.qr-code-wrapper img, .qr-code-wrapper canvas, .qr-code-wrapper svg {
    display: block;
    width: 100%;
    max-width: 232px;
    height: auto;
    image-rendering: pixelated;
}

.qr-border, .qr-corner, .qr-corner-tl, .qr-corner-tr, .qr-corner-bl, .qr-corner-br { display: none !important; }

.qr-amount-display {
    text-align: center;
    padding-block: .5rem 1rem;
}

.qr-amount-label {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nq-ink-3);
    margin-bottom: .25rem;
}

.qr-amount-value {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--nq-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.qr-timer {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    background: var(--nq-warning-bg);
    border: 1px solid var(--nq-warning-line);
    border-radius: 999px;
    color: var(--nq-warning);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.qr-timer.is-expired { background: var(--nq-danger-bg); border-color: var(--nq-danger-line); color: var(--nq-danger); }
.qr-timer-text { letter-spacing: .01em; }

.qr-actions { display: flex; gap: .5rem; }
.qr-action-btn { flex: 1; }

/* ---- Recent transactions ------------------------------------------------- */
.recent-transactions { padding: 0; }

.transaction-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--nq-line);
    background: transparent;
}

.transaction-item:last-child { border-bottom: 0; }

.transaction-icon {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nq-r);
    background: var(--nq-surface-2);
    border: 1px solid var(--nq-line);
    color: var(--nq-ink-3);
    font-size: .875rem;
    background-image: none;
}

.transaction-icon.success { background: var(--nq-success-bg); border-color: var(--nq-success-line); color: var(--nq-success); }
.transaction-icon.failed { background: var(--nq-danger-bg); border-color: var(--nq-danger-line); color: var(--nq-danger); }

.transaction-details { flex: 1; min-width: 0; }

.transaction-details > div:first-child {
    font-size: .875rem;
    font-weight: 500;
    color: var(--nq-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-time, .transaction-date { font-size: .75rem; color: var(--nq-ink-3); }

.transaction-amount {
    font-size: .875rem;
    font-weight: 600;
    color: var(--nq-ink);
    flex: none;
}

/* ---- Login --------------------------------------------------------------- */
.login-card {
    width: 100%;
    max-width: 380px;
    padding: 1.75rem;
    background: var(--nq-surface);
    border: 1px solid var(--nq-line);
    border-radius: var(--pwa-r-lg);
    box-shadow: var(--nq-shadow-2);
    backdrop-filter: none;
}

.login-card-header { text-align: center; margin-bottom: 1.5rem; }

.login-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .875rem;
}

.login-logo-container img { width: 44px; height: 44px; object-fit: contain; }

.login-card-header h1, .login-card-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--nq-ink);
    margin: 0 0 .25rem;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.login-card-header p { font-size: .8125rem; color: var(--nq-ink-3); margin: 0; }

.login-submit-btn { margin-top: .5rem; }

.login-forgot-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: .8125rem;
    color: var(--nq-ink-3);
}

.login-forgot-link:hover { color: var(--nq-accent); }

/* ---- Scan code ----------------------------------------------------------- */
.scancode-container { text-align: center; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 380px) {
    :root { --pwa-gutter: 16px; }
    .amount-input { font-size: 1.875rem; }
    .amount-value, .receipt-amount { font-size: 1.375rem; }
    .quick-amounts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 640px) {
    .checkout-container,
    .status-container,
    .amount-container,
    .scancode-container,
    .qr-container { padding-block: 2rem; }
}