/* ===================================================================
 * Payso PromptPay QR Modal
 * Namespaced under .payso-qr-* to avoid colliding with the existing
 * .address-popup-* mobile address-edit modal (checkout.css:1302+).
 * Tokens declared at the top of checkout.css :root.
 * =================================================================== */

/* -------------------------------------------------------------------
 * SR-only utility (in case theme doesn't already define it)
 * payso-qr-amount-sr-only: aria duplicate of the amount, visible only
 * to screen readers — was leaking as visible "฿X,XXX.XX ยอดที่ต้องชำระ"
 * duplicate beneath the big amount because it had no hiding rule.
 * ------------------------------------------------------------------- */
.payso-qr-overlay .sr-only,
.sr-only,
.payso-qr-amount-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------
 * Overlay + backdrop
 * ------------------------------------------------------------------- */
.payso-qr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 28, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100050; /* above existing address popup (1000000 is bigger but address-popup uses high values; tested visually) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0s linear 0.24s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.payso-qr-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.24s ease, visibility 0s;
    z-index: 9999999;
}
body.payso-qr-open {
    overflow: hidden;
}
body.payso-qr-open .m-place-order-trigger,
body.payso-qr-open .mobile-checkout-trigger,
body.payso-qr-open .address-popup-overlay {
    display: none !important;
}

/* -------------------------------------------------------------------
 * Modal shell
 * ------------------------------------------------------------------- */
.payso-qr-modal {
    background: var(--checkout-white, #fff);
    border-radius: 20px;
    box-shadow: var(--qr-card-shadow, 0 8px 32px rgba(0,0,0,0.12));
    width: 420px;
    max-width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
    position: relative;
    outline: none;
    display: flex;
    flex-direction: column;
}
.payso-qr-overlay.active .payso-qr-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Mobile bottom sheet */
@media (max-width: 767px) {
    .payso-qr-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .payso-qr-modal {
        width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 92vh;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
    }
    .payso-qr-overlay.active .payso-qr-modal {
        transform: translateY(0);
    }
}

/* -------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------- */
.payso-qr-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--checkout-border, #E5E5E5);
    flex-shrink: 0;
}
.payso-qr-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--checkout-primary-light, #E8F0EE);
    color: var(--checkout-primary, #325D53);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.payso-qr-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--checkout-text, #333);
    flex: 1;
    line-height: 1.3;
}
.payso-qr-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--checkout-text-light, #666);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 16px;
}
.payso-qr-close:hover {
    background: #f0f2f5;
    color: var(--checkout-text, #333);
}
@media (max-width: 767px) {
    .payso-qr-header { padding: 16px 18px; }
    .payso-qr-title { font-size: 16px; }
}

/* -------------------------------------------------------------------
 * Body — state switch
 * ------------------------------------------------------------------- */
.payso-qr-body {
    padding: 22px 24px 18px;
    position: relative;
    flex: 1;
}
.payso-qr-state {
    display: none;
}
.payso-qr-modal[data-state="loading"] .payso-qr-state-loading,
.payso-qr-modal[data-state="active"] .payso-qr-state-active,
.payso-qr-modal[data-state="success"] .payso-qr-state-success,
.payso-qr-modal[data-state="expired"] .payso-qr-state-expired,
.payso-qr-modal[data-state="error"] .payso-qr-state-error {
    display: block;
    animation: paysoQrFadeIn 0.22s ease;
}
@keyframes paysoQrFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hide cancel link in success/error final-states */
.payso-qr-modal[data-state="success"] .payso-qr-cancel-link,
.payso-qr-modal[data-state="success"] .payso-qr-footer { display: none; }

@media (max-width: 767px) {
    .payso-qr-body { padding: 18px 18px 14px; }
}

/* -------------------------------------------------------------------
 * Amount block (shared across loading / active / expired / success)
 * ------------------------------------------------------------------- */
.payso-qr-amount-block {
    text-align: center;
    margin-bottom: 18px;
}
.payso-qr-amount-label {
    display: block;
    font-size: 13px;
    color: var(--checkout-text-light, #666);
    margin-bottom: 4px;
}
.payso-qr-amount {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: var(--checkout-primary, #325D53);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
@media (max-width: 767px) {
    .payso-qr-amount { font-size: 32px; }
}
.payso-qr-merchant {
    display: block;
    font-size: 12px;
    color: var(--checkout-text-light, #666);
    margin-top: 6px;
}

/* -------------------------------------------------------------------
 * Loading skeleton
 * ------------------------------------------------------------------- */
.payso-qr-loading-label {
    text-align: center;
    color: var(--checkout-text-light, #666);
    margin: 0 0 14px;
    font-size: 14px;
}
.payso-qr-skeleton {
    width: 260px;
    height: 260px;
    margin: 18px auto 0;
    border-radius: var(--qr-radius-qr, 12px);
    background: var(--qr-skeleton, linear-gradient(90deg,#f0f2f5 0%,#f8f9fa 50%,#f0f2f5 100%));
    background-size: 200% 100%;
    animation: paysoQrShimmer 1.4s ease-in-out infinite;
}
@keyframes paysoQrShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (max-width: 767px) {
    .payso-qr-skeleton { width: 280px; height: 280px; }
}

/* -------------------------------------------------------------------
 * Active — instructions, QR card, deep marks
 * ------------------------------------------------------------------- */
.payso-qr-scan-instruction {
    text-align: center;
    margin: 0 0 12px;
    color: var(--checkout-text-light, #666);
    font-size: 14px;
}

.payso-qr-card {
    width: 260px;
    height: 260px;
    margin: 12px auto 14px;
    border-radius: var(--qr-radius-qr, 12px);
    background: #fff;
    padding: 16px;
    box-shadow: var(--qr-card-shadow, 0 4px 20px rgba(50,93,83,0.08));
    position: relative;
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: outline-color 1.4s ease;
}
.payso-qr-modal[data-state="active"] .payso-qr-card {
    animation: paysoQrPulse 2s ease-in-out infinite;
}
@keyframes paysoQrPulse {
    0%, 100% { outline-color: transparent; }
    50%      { outline-color: rgba(50, 93, 83, 0.25); }
}
.payso-qr-card-inner {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.payso-qr-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
@media (max-width: 767px) {
    .payso-qr-card { width: 280px; height: 280px; padding: 14px; }
}

.payso-qr-promptpay-mark {
    text-align: center;
    margin: 8px 0 16px;
}
.payso-qr-pp-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    background: linear-gradient(135deg, #1B4E9B 0%, #0E2F66 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.payso-qr-pp-caption {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--checkout-text-light, #666);
}

/* -------------------------------------------------------------------
 * Countdown — FLOATING BADGE positioned at top edge of .payso-qr-card
 * (Was inline below promptpay-mark; moved into QR card as overlay so
 *  modal content is more compact and doesn't force user to scroll.)
 * ------------------------------------------------------------------- */
.payso-qr-countdown {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 18px;
    font-size: 14px;
    color: var(--checkout-text-light, #666);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(50, 93, 83, 0.14), 0 1px 3px rgba(0, 0, 0, 0.06);
    white-space: nowrap;
    pointer-events: none;
    transition: color 0.3s ease, background 0.3s ease;
}
@media (max-width: 767px) {
    .payso-qr-countdown {
        top: -16px;
        padding: 7px 16px;
        font-size: 13px;
    }
}
.payso-qr-countdown-ring {
    width: 28px;
    height: 28px;
    transform: rotate(-90deg);
}
.payso-qr-ring-bg {
    fill: none;
    stroke: var(--checkout-primary-light, #E8F0EE);
    stroke-width: 2.5;
}
.payso-qr-ring-fg {
    fill: none;
    stroke: var(--checkout-primary, #325D53);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.9s linear, stroke 0.3s ease;
}
.payso-qr-countdown-label { font-size: 13px; }
.payso-qr-countdown-time {
    font-weight: 700;
    font-size: 18px;
    color: var(--checkout-text, #333);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* Urgency cascade */
.payso-qr-countdown.urgency-mid {
    color: #92400E;
}
.payso-qr-countdown.urgency-mid .payso-qr-ring-fg {
    stroke: var(--qr-warning, #F59E0B);
}
.payso-qr-countdown.urgency-mid .payso-qr-countdown-time {
    color: #92400E;
}
.payso-qr-countdown.urgency-high {
    color: var(--qr-danger, #dc3545);
}
.payso-qr-countdown.urgency-high .payso-qr-ring-fg {
    stroke: var(--qr-danger, #dc3545);
}
.payso-qr-countdown.urgency-high .payso-qr-countdown-time {
    color: var(--qr-danger, #dc3545);
    animation: paysoQrPulseDigits 1s ease-in-out infinite;
}
.payso-qr-countdown.urgency-critical .payso-qr-ring-fg {
    animation: paysoQrRingPulse 0.5s ease-in-out infinite;
}
@keyframes paysoQrPulseDigits {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}
@keyframes paysoQrRingPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Progress bar — now redundant with countdown SVG ring. Kept in DOM
   for JS compatibility (.payso-qr-progress-fill width is still updated)
   but hidden visually. Could be revived as a secondary signal later. */
.payso-qr-progress-bar {
    display: none;
}
.payso-qr-progress-fill {
    height: 100%;
    background: var(--checkout-primary, #325D53);
    width: 100%;
    transition: width 0.9s linear, background 0.3s ease;
}
.payso-qr-countdown.urgency-mid ~ .payso-qr-progress-bar .payso-qr-progress-fill,
.payso-qr-state-active:has(.urgency-mid) .payso-qr-progress-fill {
    background: var(--qr-warning, #F59E0B);
}

/* -------------------------------------------------------------------
 * Meta row + polling chip
 * ------------------------------------------------------------------- */
.payso-qr-meta-row {
    text-align: center;
    font-size: 11px;
    color: var(--checkout-text-light, #666);
    margin: 10px 0 14px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
}
.payso-qr-ref-label { margin-right: 6px; }

.payso-qr-polling-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--checkout-primary-light, #E8F0EE);
    color: var(--checkout-primary, #325D53);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    margin: 14px auto 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.payso-qr-modal[data-state="active"] .payso-qr-polling-chip {
    display: inline-flex;
}
/* (Old mobile-fixed rules for polling chip removed — now lives inline in
   .payso-qr-bottom-actions row at the bottom of the active state) */
.payso-qr-polling-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--checkout-primary, #325D53);
    border-top-color: transparent;
    border-radius: 50%;
    animation: paysoQrSpin 2s linear infinite;
    flex-shrink: 0;
}
@keyframes paysoQrSpin {
    to { transform: rotate(360deg); }
}
.payso-qr-state-active {
    text-align: center;
}

/* -------------------------------------------------------------------
 * Secondary actions — Save QR is now a prominent primary-outline button
 * (Was previously a small gray text link. Promoted because saving the
 *  QR to gallery is a critical UX path on mobile.)
 * ------------------------------------------------------------------- */
.payso-qr-secondary-actions {
    margin-top: 18px;
    text-align: center;
}
.payso-qr-save-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 200px;
    padding: 13px 24px;
    background: var(--checkout-primary-light, #E8F0EE);
    color: var(--checkout-primary, #325D53);
    border: 1.5px solid var(--checkout-primary, #325D53);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
    box-shadow: 0 2px 8px rgba(50, 93, 83, 0.08);
}
.payso-qr-save-link i {
    font-size: 15px;
}
.payso-qr-save-link:hover {
    background: var(--checkout-primary, #325D53);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(50, 93, 83, 0.22);
}

/* -------------------------------------------------------------------
 * Bottom action row — polling chip (left) + Save QR (right)
 * Now positioned at TOP of state-active content (above amount block).
 * Border at bottom + margin-bottom acts as separator from content below.
 * ------------------------------------------------------------------- */
.payso-qr-bottom-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--checkout-border, #E5E5E5);
}
.payso-qr-bottom-actions .payso-qr-polling-chip,
.payso-qr-bottom-actions .payso-qr-secondary-actions {
    margin: 0;
}

@media (max-width: 767px) {
    /* Compact both sides so they fit side-by-side on narrow viewports */
    .payso-qr-bottom-actions {
        margin-bottom: 12px;
        padding-bottom: 10px;
        gap: 8px;
    }
    .payso-qr-bottom-actions .payso-qr-polling-chip {
        font-size: 11.5px;
        padding: 7px 12px;
    }
    .payso-qr-bottom-actions .payso-qr-save-link {
        min-width: 0;
        padding: 9px 16px;
        font-size: 13px;
        gap: 8px;
        background: var(--checkout-primary, #325D53);
        color: #fff;
        border-color: var(--checkout-primary, #325D53);
        box-shadow: 0 4px 14px rgba(50, 93, 83, 0.18), 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .payso-qr-bottom-actions .payso-qr-save-link i {
        font-size: 14px;
    }
}

/* -------------------------------------------------------------------
 * Cancel link (footer of active state)
 * ------------------------------------------------------------------- */
.payso-qr-cancel-link {
    display: block;
    margin: 0 auto;
    background: transparent;
    border: none;
    color: var(--checkout-text-light, #666);
    font-size: 13px;
    padding: 12px 16px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}
.payso-qr-cancel-link:hover {
    color: var(--qr-danger, #dc3545);
}
.payso-qr-modal[data-state="loading"] .payso-qr-cancel-link,
.payso-qr-modal[data-state="success"] .payso-qr-cancel-link,
.payso-qr-modal[data-state="error"] .payso-qr-cancel-link,
.payso-qr-modal[data-state="expired"] .payso-qr-cancel-link {
    display: none;
}

/* -------------------------------------------------------------------
 * Success state (hero)
 * ------------------------------------------------------------------- */
.payso-qr-modal[data-state="success"] {
    background: linear-gradient(180deg, #F3F8F6 0%, #fff 50%);
    box-shadow: var(--qr-card-shadow-success, 0 8px 32px rgba(31,169,104,0.18));
}
.payso-qr-state-success {
    text-align: center;
    padding: 8px 0 4px;
}
.payso-qr-success-icon {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 8px auto 16px;
}
.payso-qr-checkmark {
    width: 96px;
    height: 96px;
    display: block;
    transform: scale(0);
    animation: paysoQrCheckScale 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s forwards;
}
.payso-qr-check-circle {
    fill: var(--qr-success, #1FA968);
    stroke: none;
}
.payso-qr-check-path {
    stroke: #fff;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: paysoQrCheckDraw 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.55s forwards;
}
@keyframes paysoQrCheckScale {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
@keyframes paysoQrCheckDraw {
    to { stroke-dashoffset: 0; }
}

/* Sparkles */
.payso-qr-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--qr-success, #1FA968);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
.payso-qr-sparkle::before,
.payso-qr-sparkle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    border-radius: inherit;
}
.payso-qr-sparkle-1 {
    top: 14%;
    left: 8%;
    animation: paysoQrSparkleA 0.7s ease-out 0.7s forwards;
}
.payso-qr-sparkle-2 {
    top: 8%;
    right: 12%;
    animation: paysoQrSparkleB 0.7s ease-out 0.85s forwards;
}
.payso-qr-sparkle-3 {
    bottom: 12%;
    right: 8%;
    animation: paysoQrSparkleC 0.7s ease-out 1s forwards;
}
@keyframes paysoQrSparkleA {
    0%   { opacity: 0; transform: scale(0.5) translate(0, 0); }
    40%  { opacity: 1; transform: scale(1)   translate(-8px, -8px); }
    100% { opacity: 0; transform: scale(0.4) translate(-14px, -14px); }
}
@keyframes paysoQrSparkleB {
    0%   { opacity: 0; transform: scale(0.5) translate(0, 0); }
    40%  { opacity: 1; transform: scale(1)   translate(10px, -8px); }
    100% { opacity: 0; transform: scale(0.4) translate(16px, -14px); }
}
@keyframes paysoQrSparkleC {
    0%   { opacity: 0; transform: scale(0.5) translate(0, 0); }
    40%  { opacity: 1; transform: scale(1)   translate(10px, 10px); }
    100% { opacity: 0; transform: scale(0.4) translate(16px, 16px); }
}

.payso-qr-success-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--checkout-text, #333);
    opacity: 0;
    animation: paysoQrFadeUp 0.3s ease 0.85s forwards;
}
.payso-qr-success-subtitle {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--checkout-text-light, #666);
    opacity: 0;
    animation: paysoQrFadeUp 0.3s ease 0.95s forwards;
}
.payso-qr-amount-success {
    font-size: 28px;
    color: var(--qr-success, #1FA968);
    opacity: 0;
    animation: paysoQrFadeUp 0.3s ease 1.05s forwards;
}
.payso-qr-success-order {
    margin: 6px 0 22px;
    font-size: 13px;
    color: var(--checkout-text-light, #666);
    opacity: 0;
    animation: paysoQrFadeUp 0.3s ease 1.15s forwards;
}
.payso-qr-success-redirect {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--checkout-text-light, #666);
    opacity: 0;
    animation: paysoQrFadeUp 0.3s ease 1.3s forwards;
}
.payso-qr-btn-go-now {
    margin-top: 6px;
    opacity: 0;
    animation: paysoQrFadeUp 0.3s ease 1.4s forwards;
}
@keyframes paysoQrFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------
 * Expired / Error states
 * ------------------------------------------------------------------- */
.payso-qr-state-expired,
.payso-qr-state-error {
    text-align: center;
    padding: 14px 0;
}
.payso-qr-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.payso-qr-state-icon-warn {
    background: var(--qr-warning-bg, #FEF3E0);
    color: var(--qr-warning, #F59E0B);
}
.payso-qr-state-icon-error {
    background: #FEE2E2;
    color: var(--qr-danger, #dc3545);
}
.payso-qr-expired-title,
.payso-qr-error-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--checkout-text, #333);
}
.payso-qr-expired-body,
.payso-qr-error-body {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--checkout-text-light, #666);
}
.payso-qr-error-code {
    margin: 0 0 16px;
    font-size: 11px;
    color: var(--checkout-text-muted, #999);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    min-height: 14px;
}
.payso-qr-ghost-qr {
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    position: relative;
    opacity: 0.4;
    filter: grayscale(1);
}
.payso-qr-ghost-qr::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 8px,
        rgba(0,0,0,0.08) 8px,
        rgba(0,0,0,0.08) 9px
    );
    border-radius: 12px;
    pointer-events: none;
}
.payso-qr-image-ghost {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
.payso-qr-amount-expired {
    font-size: 22px;
    margin-bottom: 18px;
}

/* -------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------- */
.payso-qr-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.payso-qr-btn {
    font-size: 15px;
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    width: 100%;
    font-family: inherit;
}
.payso-qr-btn:active { transform: translateY(1px); }
.payso-qr-btn-primary {
    background: var(--checkout-primary, #325D53);
    color: #fff;
    border-color: var(--checkout-primary, #325D53);
}
.payso-qr-btn-primary:hover {
    background: var(--checkout-primary-hover, #285446);
    box-shadow: 0 4px 12px rgba(50, 93, 83, 0.25);
}
.payso-qr-btn-secondary {
    background: #fff;
    color: var(--checkout-text-light, #666);
    border-color: var(--checkout-border, #E5E5E5);
}
.payso-qr-btn-secondary:hover {
    background: #f9fafb;
    color: var(--checkout-text, #333);
}
.payso-qr-btn-destroy {
    background: #fff;
    color: var(--qr-danger, #dc3545);
    border-color: var(--qr-danger, #dc3545);
}
.payso-qr-btn-destroy:hover {
    background: var(--qr-danger, #dc3545);
    color: #fff;
}
.payso-qr-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 767px) {
    .payso-qr-btn { min-height: 52px; }
}

/* -------------------------------------------------------------------
 * Footer (trust line)
 * ------------------------------------------------------------------- */
.payso-qr-footer {
    padding: 12px 22px 18px;
    text-align: center;
    font-size: 11px;
    color: var(--checkout-text-muted, #999);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-top: 1px solid #f0f2f5;
    flex-shrink: 0;
}
.payso-qr-footer i { font-size: 10px; }

/* -------------------------------------------------------------------
 * Cancel confirmation sheet (slides up over body)
 * ------------------------------------------------------------------- */
.payso-qr-confirm {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--checkout-border, #E5E5E5);
    padding: 20px 22px 22px;
    transform: translateY(100%);
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
    z-index: 5;
    border-radius: 0 0 20px 20px;
}
@media (max-width: 767px) {
    .payso-qr-confirm { border-radius: 0; }
}
.payso-qr-confirm.active {
    transform: translateY(0);
}
.payso-qr-confirm[aria-hidden="true"] { visibility: hidden; }
.payso-qr-confirm.active[aria-hidden="false"] { visibility: visible; }
.payso-qr-confirm-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--checkout-text, #333);
}
.payso-qr-confirm-body {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--checkout-text-light, #666);
}
.payso-qr-confirm-actions {
    display: flex;
    gap: 10px;
}
.payso-qr-confirm-actions .payso-qr-btn { flex: 1; }

/* -------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .payso-qr-overlay,
    .payso-qr-modal,
    .payso-qr-state,
    .payso-qr-checkmark,
    .payso-qr-check-path,
    .payso-qr-sparkle,
    .payso-qr-success-title,
    .payso-qr-success-subtitle,
    .payso-qr-amount-success,
    .payso-qr-success-order,
    .payso-qr-success-redirect,
    .payso-qr-btn-go-now,
    .payso-qr-card,
    .payso-qr-skeleton,
    .payso-qr-polling-spinner,
    .payso-qr-countdown-time,
    .payso-qr-ring-fg,
    .payso-qr-confirm {
        animation: none !important;
        transition: opacity 0.15s ease, visibility 0s, transform 0.15s ease !important;
    }
    .payso-qr-checkmark,
    .payso-qr-success-title,
    .payso-qr-success-subtitle,
    .payso-qr-amount-success,
    .payso-qr-success-order,
    .payso-qr-success-redirect,
    .payso-qr-btn-go-now {
        transform: none !important;
        opacity: 1 !important;
    }
    .payso-qr-check-path {
        stroke-dashoffset: 0 !important;
    }
}