/* ============================================================
   JOOPAY Terminal Pay – Theme & Styles
   Brand palette:
     Dark base:      #0a071d
     Panel dark:     #11102e
     Primary accent: #8A2BE2 (violet)
     Warm accent:    #FF8A3D (orange)
     Gradient:       135deg, #8A2BE2 0%, #FF8A3D 100%
   Font: Inter
   ============================================================ */

:root {
    --joo-bg-0: #0a071d;
    --joo-bg-1: #0f0c26;
    --joo-bg-2: #151235;
    --joo-bg-3: #1d1a44;
    --joo-panel: rgba(22, 19, 52, 0.78);
    --joo-panel-strong: rgba(26, 22, 62, 0.92);
    --joo-border: rgba(255, 255, 255, 0.08);
    --joo-border-strong: rgba(255, 255, 255, 0.14);
    --joo-text: #ffffff;
    --joo-text-muted: rgba(255, 255, 255, 0.55);
    --joo-text-soft: rgba(255, 255, 255, 0.72);
    --joo-violet: #8A2BE2;
    --joo-violet-2: #a257ff;
    --joo-orange: #FF8A3D;
    --joo-orange-2: #ffb066;
    --joo-green: #27d07a;
    --joo-green-2: #19b064;
    --joo-red: #ff4d67;
    --joo-red-2: #e53d57;
    --joo-gradient: linear-gradient(135deg, #8A2BE2 0%, #FF8A3D 100%);
    --joo-gradient-soft: linear-gradient(135deg, rgba(138, 43, 226, 0.18) 0%, rgba(255, 138, 61, 0.18) 100%);
    --joo-radius: 16px;
    --joo-radius-lg: 22px;
    --joo-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

* {
    -webkit-tap-highlight-color: transparent;
}

html, body {
    min-height: 100%;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--joo-text);
    background: var(--joo-bg-0);
}

.joo-body {
    background:
        radial-gradient(1200px 800px at 10% -10%, rgba(138, 43, 226, 0.22), transparent 60%),
        radial-gradient(900px 700px at 110% 10%, rgba(255, 138, 61, 0.14), transparent 55%),
        linear-gradient(180deg, #080518 0%, #0b0822 45%, #0a0721 100%);
    color: var(--joo-text);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.joo-bg-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    opacity: 0.7;
    z-index: 0;
}

.joo-glow {
    position: fixed;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.55;
    border-radius: 50%;
}
.joo-glow-1 {
    width: 520px; height: 520px;
    left: -180px; top: -140px;
    background: rgba(138, 43, 226, 0.55);
}
.joo-glow-2 {
    width: 620px; height: 620px;
    right: -240px; bottom: -200px;
    background: rgba(255, 138, 61, 0.40);
}

.joo-accent {
    background: var(--joo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.joo-text-gradient {
    background: var(--joo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Logo (real image asset) ---------- */
.joo-logo-img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    image-rendering: auto;
}

/* Force a coloured-on-transparent or coloured-on-white logo to render as
   pure white, for use on dark panels (navbar, lock dialog, dark login header). */
.joo-logo-img-white {
    filter: brightness(0) invert(1);
    mix-blend-mode: screen;
}

/* Original colours, used on the login hero (dark bg, logo looks fine as-is) */
.joo-logo-img-colour {
    filter: none;
}

.joo-logo-img-nav {
    height: 40px;
    max-height: 40px;
    max-width: 230px;
    width: auto;
    object-fit: contain;
}
.joo-logo-img-lg {
    height: 60px;
    max-height: 60px;
    max-width: 320px;
    width: auto;
    object-fit: contain;
}
.joo-logo-img-lock {
    height: 64px;
    max-height: 64px;
    width: auto;
    max-width: 360px;
    object-fit: contain;
}

/* Mobile login logo: full colours (no invert), bigger, with subtle
   glow/drop-shadow so the white background of the logo file blends into
   the dark form panel without looking like a white rectangle stuck on. */
.joo-logo-img-mobile {
    filter: none;
    height: 64px;
    max-height: 64px;
    max-width: 320px;
    width: auto;
    object-fit: contain;
    border-radius: 14px;
    padding: 6px 10px;
    background:
        linear-gradient(135deg, rgba(138, 43, 226, 0.18) 0%, rgba(255, 138, 61, 0.18) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255,255,255,0.02) inset;
}

/* Navbar logo (ALL breakpoints now use this single rule since we
   dropped the washed-out invert-based "white" render for desktop):
   full-colour Joopay wordmark framed in a subtle violet→orange
   gradient pill – matches the mobile login logo treatment exactly. */
.joo-logo-img-nav-badge {
    filter: none;
    height: 46px;
    max-height: 46px;
    max-width: 280px;
    width: auto;
    object-fit: contain;
    border-radius: 12px;
    padding: 4px 12px;
    background:
        linear-gradient(135deg, rgba(138, 43, 226, 0.22) 0%, rgba(255, 138, 61, 0.22) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255,255,255,0.02) inset;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.joo-nav-brand:hover .joo-logo-img-nav-badge {
    transform: translateY(-1px);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* ---------- Logo mark (CSS only, legacy fallback) ---------- */
.joo-logo-mark {
    display: inline-flex;
    width: 44px; height: 44px;
    border-radius: 14px;
    background: var(--joo-gradient);
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(138, 43, 226, 0.40), inset 0 0 0 1px rgba(255,255,255,0.15);
    position: relative;
    overflow: hidden;
}
.joo-logo-mark-lg {
    width: 64px; height: 64px;
    border-radius: 18px;
}
.joo-logo-inner {
    width: 60%; height: 60%;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.12));
    border: 1px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
    position: relative;
}
.joo-logo-inner::before {
    content: '';
    position: absolute;
    inset: 22% 30% 22% 30%;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.joo-logo-word {
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #fff;
    font-size: 1.05rem;
}

/* ---------- Navbar ---------- */
.joo-nav {
    background: rgba(10, 7, 29, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--joo-border);
    min-height: 70px;
    z-index: 50;
}
.joo-nav-brand {
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
}
.joo-nav-tag {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--joo-gradient-soft);
    border: 1px solid var(--joo-border-strong);
    color: var(--joo-text-soft);
    text-transform: uppercase;
}
.joo-btn-outline {
    border: 1px solid var(--joo-border-strong) !important;
    background: rgba(255,255,255,0.04) !important;
    color: var(--joo-text) !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
}
.joo-btn-outline:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.25) !important;
}

/* ---------- Page headings ---------- */
.joo-page-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-size: clamp(1.8rem, 4.2vw, 2.7rem);
}
.joo-page-sub {
    color: var(--joo-text-muted);
    font-size: clamp(0.92rem, 2vw, 1.02rem);
    max-width: 760px;
}

/* ---------- Status bar ---------- */
.joo-status-card {
    background: var(--joo-panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--joo-border);
    border-radius: var(--joo-radius-lg);
    border-left: 5px solid #7a7a9b;
    transition: all 0.3s ease;
}
.joo-status-card.online  { border-left-color: var(--joo-green); }
.joo-status-card.offline { border-left-color: var(--joo-red); }
.joo-status-card.busy    { border-left-color: var(--joo-orange); }
.joo-status-card.checking{ border-left-color: rgba(255,255,255,0.28); }

#terminalStatusIcon.fa-check-circle { color: var(--joo-green) !important; font-size: 1.6rem; }
#terminalStatusIcon.fa-exclamation-circle { color: var(--joo-red) !important; font-size: 1.6rem; }
#terminalStatusIcon.fa-circle-notch { color: var(--joo-orange) !important; font-size: 1.6rem; }

/* ---------- Cards (pay / info) --------------------------------
   CRITICAL LAYOUT RULE — one card per column ONLY.
   ===============================================
   Left column:  <.col-lg-7> → one <.card .joo-pay-card>   (Pay Now)
   Right column: <.col-lg-5> → one <.card .joo-info-card>  (Before you pay + LAST RESULT NESTED INSIDE card-body, d-none until result)
   We previously had a SECOND .joo-info-card SIBLING (Last Result below
   checklist card in same column) AND applied min-height:100% to BOTH of
   them → the column became 200%+ tall, blank navy gap between checklist
   and Result, Result rows overran the footer.

   Fixed: Last Result is now a NESTED child card INSIDE the joo-info-card's
   card-body (class joo-result-inner-card).  min-height:100% is now ONLY
   applied to the top-level cards (Pay / Info) on the 2-column desktop
   grid.  Column heights equalize correctly (short checklist info card
   stretches to match Pay card height when Result is empty).  When the
   inner Result card has rows it pushes the right-info card TALLER than
   100% → grows naturally, footer is pushed down below → zero overlap.
---------------------------------------------------------------- */
.joo-pay-card, .joo-info-card {
    background: var(--joo-panel-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--joo-border);
    border-radius: var(--joo-radius-lg);
    box-shadow: var(--joo-shadow);
    /* Always allow the card to grow taller than 100% on long content.
       overflow: visible is REQUIRED here; using overflow:hidden on a
       card with min-height:100% causes any content that extends past
       the equalized 2-col height (such as Last Result with many rows)
       to be clipped instead of pushing the footer down. */
    min-height: 0;
    overflow: visible;
}
@media (min-width: 992px) {
    /* 2-column grid (Bootstrap lg+ 992px).  min-height 100% ensures
       the shorter side matches the taller side's baseline height; if
       either side grows further (e.g. Result rows), both cards and
       their parent row grow in tandem because Bootstrap row columns
       use align-items-stretch (default). */
    .joo-pay-card,
    .joo-info-card {
        min-height: 100%;
    }
}
/* Inner result card lives inside .joo-info-card > .card-body after the
   checklist.  It must look distinct but must never force the outer
   info-card box model into a scroll/overflow or double-size layout. */
.joo-result-inner-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(138, 43, 226, 0.22);
    border-radius: var(--joo-radius-md);
    box-shadow: 0 8px 22px rgba(138, 43, 226, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    margin-top: 1.1rem;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible;
}
.joo-result-inner-card > .card-header,
.joo-result-inner-card > .card-body {
    min-height: 0;
    height: auto;
}
/* #lastResultCard (now inner) belt-and-suspenders — natural size only */
#lastResultCard {
    min-height: 0 !important;
    height: auto !important;
}

/* Dashboard main container: guaranteed bottom padding so footer NEVER
   collides with Last Result rows even if window is short.  6.5rem is
   roughly footer-height + 4rem breathing room. */
.joo-dashboard-main {
    min-height: calc(100vh - 0px);
    padding-bottom: max(6.5rem, 160px) !important;
}

/* Footer push-down */
.joo-footer {
    margin-top: max(96px, 8rem) !important;
}

/* Children (like the result card) should never break the bounding box
   visually, but tables inside the card are allowed to expand naturally. */
.joo-info-card .card-body,
.joo-pay-card  .card-body {
    min-height: 0;
    overflow: visible;
    height: 100%;
}

/* Mobile stacked: tighten card body padding + checklist spacing so the
   info card doesn't look blocky with unnecessary internal whitespace
   before the Last Result heading. */
@media (max-width: 991.98px) {
    .joo-pay-card .card-body,
    .joo-info-card .card-body {
        padding: 1.1rem 1rem 1.15rem 1rem !important;
        height: auto;
    }
    .joo-check-list {
        gap: 0.65rem !important;
        margin-bottom: 0.9rem !important;
    }
    .joo-info-card h5.card-title,
    .joo-pay-card h5.card-title {
        margin-bottom: 0.7rem !important;
    }
    .joo-result-inner-card {
        margin-top: 0.9rem;
    }
}

/* ---------- Form basics ---------- */
.joo-form-label {
    display: block;
    color: var(--joo-text-soft);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
    letter-spacing: 0.01em;
}
.joo-form-label-lg { font-size: 0.98rem; }

.joo-input-group {
    position: relative;
    display: flex;
    align-items: center;
}
.joo-input-icon {
    position: absolute;
    left: 14px; top: 0; bottom: 0;
    display: inline-flex;
    align-items: center;
    color: var(--joo-text-muted);
    pointer-events: none;
    z-index: 2;
}
.joo-input {
    padding-left: 46px !important;
    min-height: 56px;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid var(--joo-border-strong) !important;
    color: #fff !important;
    font-size: 1rem;
    transition: all 0.2s ease;
}
.joo-input::placeholder { color: rgba(255,255,255,0.32); }
.joo-input:focus {
    outline: none;
    border-color: rgba(138, 43, 226, 0.6) !important;
    box-shadow: 0 0 0 4px rgba(138, 43, 226, 0.18);
    background: rgba(255,255,255,0.055) !important;
}
.joo-input.is-invalid {
    border-color: var(--joo-red) !important;
    box-shadow: 0 0 0 4px rgba(255, 77, 103, 0.18);
}

/* "Remember username" – clear button on the right of input, plus form hint. */
.joo-input-with-clear .joo-input { padding-right: 46px !important; }
.joo-input-group .joo-input { padding-right: 46px !important; }
.joo-input-clear {
    position: absolute;
    right: 10px; top: 50%; transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--joo-text-muted);
    cursor: pointer;
    z-index: 3;
    padding: 0;
    transition: color 0.18s ease, background 0.18s ease;
}
.joo-input-clear:hover,
.joo-input-clear:focus {
    outline: none;
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.joo-toggle-password i { font-size: 0.95rem; }

.joo-form-hint {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.82rem;
    color: #c9bbff;
    font-weight: 500;
    line-height: 1.35;
}

/* Bootstrap form-check override (remember session checkbox) */
.joo-form-check { padding-left: 1.75rem; }
.joo-form-check .form-check-input {
    width: 1.05rem; height: 1.05rem;
    background-color: rgba(255,255,255,0.06);
    border: 1px solid var(--joo-border-strong);
    border-radius: 6px;
    margin-top: 0.16rem;
}
.joo-form-check .form-check-input:checked {
    background: linear-gradient(135deg, var(--joo-violet) 0%, var(--joo-orange) 100%);
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(138, 43, 226, 0.16);
}
.joo-form-check .form-check-label {
    color: var(--joo-text-soft);
    font-size: 0.88rem;
    font-weight: 500;
}

.joo-form-foot {
    color: var(--joo-text-muted);
    font-size: 0.84rem;
}

/* ---------- Buttons ---------- */
.joo-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #fff;
    background: var(--joo-gradient);
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 16px 40px rgba(138, 43, 226, 0.38), 0 6px 16px rgba(255, 138, 61, 0.18);
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.15s ease;
    position: relative;
    overflow: hidden;
}
.joo-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.joo-btn-primary:hover { filter: brightness(1.06); color: #fff; box-shadow: 0 22px 55px rgba(138, 43, 226, 0.5), 0 8px 20px rgba(255, 138, 61, 0.22); }
.joo-btn-primary:hover::before { transform: translateX(100%); }
.joo-btn-primary:active { transform: translateY(1px); }
.joo-btn-primary:disabled { opacity: 0.7; cursor: not-allowed; }

.joo-btn-xl { font-size: clamp(1.05rem, 2.4vw, 1.25rem); }

.joo-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--joo-text-soft);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--joo-border-strong);
    border-radius: 14px;
    font-weight: 600;
    transition: all 0.18s ease;
}
.joo-btn-ghost:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.25);
}

.joo-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #ff4d67 0%, #e53d57 100%);
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 16px 40px rgba(229, 61, 87, 0.35);
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
.joo-btn-danger:hover { filter: brightness(1.06); color: #fff; }
.joo-btn-danger:active { transform: translateY(1px); }
.joo-btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-modal-yes {
    background: linear-gradient(135deg, var(--joo-green) 0%, var(--joo-green-2) 100%);
    color: #fff;
    border: none !important;
    box-shadow: 0 10px 24px rgba(39, 208, 122, 0.3);
}
.btn-modal-yes:hover { color: #fff; filter: brightness(1.06); }
.btn-modal-no {
    background: linear-gradient(135deg, var(--joo-red) 0%, var(--joo-red-2) 100%);
    color: #fff;
    border: none !important;
    box-shadow: 0 10px 24px rgba(229, 61, 87, 0.3);
}
.btn-modal-no:hover { color: #fff; filter: brightness(1.06); }

/* ---------- Amount input (hero style) ---------- */
.joo-amount-input {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--joo-border-strong);
    border-radius: 20px;
    padding: 14px 18px;
    transition: all 0.2s ease;
    overflow: hidden;
}
.joo-amount-input:focus-within {
    border-color: rgba(138, 43, 226, 0.65);
    box-shadow: 0 0 0 5px rgba(138, 43, 226, 0.16);
    background: rgba(255,255,255,0.05);
}
.joo-amount-symbol {
    font-weight: 700;
    color: var(--joo-text-muted);
    font-size: clamp(1.6rem, 4.6vw, 2.4rem);
    margin-right: 10px;
}
.joo-amount-currency {
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--joo-text-muted);
    font-size: 0.95rem;
    margin-left: 10px;
    white-space: nowrap;
}
.joo-amount-field {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 800;
    text-align: right;
    letter-spacing: -0.02em;
    font-size: clamp(2rem, 8vw, 3.6rem);
    padding: 0 !important;
    min-width: 0;
    width: 100%;
}
.joo-amount-field::placeholder { color: rgba(255,255,255,0.22); }
.joo-amount-field::-webkit-outer-spin-button,
.joo-amount-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.joo-amount-field[type=number] { -moz-appearance: textfield; }

/* ---------- Quick preset chips ---------- */
.joo-preset-chip {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--joo-border-strong);
    color: var(--joo-text-soft);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.94rem;
    transition: all 0.16s ease;
}
.joo-preset-chip:hover {
    color: #fff;
    background: var(--joo-gradient-soft);
    border-color: rgba(255,255,255,0.24);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.joo-preset-chip:active { transform: translateY(0); }

/* ---------- Info card checklist ---------- */
.joo-check-list { display: grid; gap: 1rem; }
.joo-check-list li {
    display: flex; align-items: flex-start; gap: 1rem;
}
.joo-check-bullet {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--joo-gradient-soft);
    border: 1px solid var(--joo-border-strong);
    color: #fff;
}

/* ---------- Footer ---------- */
.joo-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--joo-border);
    background: rgba(10, 7, 29, 0.4);
    margin-top: 72px;
}
.joo-dashboard-main {
    /* Guarantee at least a little breathing room before the footer,
       regardless of how short the last result card is on a big screen,
       and prevent any zoom/viewport from clipping content at the bottom. */
    padding-bottom: 4rem !important;
}
@media (max-width: 575.98px) {
    .joo-dashboard-main { padding-bottom: 3rem !important; }
    .joo-footer            { margin-top: 48px; }
}

/* ============================================================
   AUTH / LOGIN PAGE
   ============================================================ */
.joo-auth-wrap {
    position: relative;
    z-index: 1;
    padding: 24px 0;
}
.joo-auth-card {
    background: var(--joo-panel-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--joo-border);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--joo-shadow);
    min-height: 580px;
}
.joo-auth-brand-col {
    background:
        radial-gradient(500px 400px at 20% 0%, rgba(138, 43, 226, 0.38), transparent 60%),
        radial-gradient(500px 400px at 100% 100%, rgba(255, 138, 61, 0.22), transparent 55%),
        linear-gradient(180deg, #0b0822 0%, #130d33 100%);
    color: #fff;
    position: relative;
}
.joo-auth-brand-col::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse at 50% 40%, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 40%, transparent 85%);
    pointer-events: none;
}
.joo-hero-title {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.joo-hero-sub {
    color: rgba(255,255,255,0.6);
    font-size: 0.98rem;
    line-height: 1.6;
}
.joo-hero-list { color: var(--joo-text-soft); font-size: 0.94rem; }
.joo-hero-list li { margin-bottom: 0.7rem; }

/* ============================================================
   SHOP NAME DISPLAY (big, client-facing – shown on login,
   lock overlay, page heading, etc.)
   ============================================================ */
.joo-shop-name-big {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-size: clamp(2.1rem, 5.4vw, 3.6rem);
    color: #ffffff;
    background: linear-gradient(135deg, #ffffff 0%, #ffd4b8 55%, #f3b8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 6px 30px rgba(138, 43, 226, 0.35);
    text-align: center;
    word-break: break-word;
}
.joo-shop-name-big.joo-shop-name-big-mobile {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
}
.joo-shop-name-big.joo-shop-name-on-lock {
    font-size: clamp(2rem, 5.6vw, 3.2rem);
    padding: 0.15rem 0.8rem 0.25rem;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(138, 43, 226, 0.14) 0%, rgba(255, 138, 61, 0.14) 100%);
    -webkit-background-clip: text, border-box;
    background-clip: text, border-box;
    color: #ffffff;
    -webkit-text-fill-color: initial;
    background-blend-mode: normal;
    position: relative;
    display: inline-block;
}
.joo-shop-name-big.joo-shop-name-on-lock::after {
    /* The gradient-text part is on a pseudo so we keep the box background */
    content: attr(data-text);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: inherit;
    background: inherit;
    background: linear-gradient(135deg, #ffffff 0%, #ffd4b8 55%, #f3b8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
    letter-spacing: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    border-radius: inherit;
}
.joo-shop-tagline {
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Shop name that appears directly under the "Welcome back" headline on the
   login form card.  Slightly smaller than the dashboard headline, but
   immediately identifiable as the client's own brand on first glance. */
.joo-shop-name-login {
    display: inline-block;
    max-width: 100%;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-size: clamp(1.25rem, 2.8vw, 1.7rem);
    padding: 0.32rem 0.8rem 0.4rem;
    margin-bottom: 0.1rem;
    border-radius: 999px;
    background: var(--joo-gradient-soft);
    -webkit-background-clip: padding-box;
            background-clip: padding-box;
    color: #ffffff;
    background-image: linear-gradient(135deg, var(--joo-violet) 0%, #a24bff 50%, var(--joo-orange) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(138, 43, 226, 0.22);
    word-break: break-word;
}
@media (max-width: 575.98px) {
    .joo-shop-name-login { padding: 0.22rem 0.65rem 0.3rem; }
}

.joo-shop-headline {
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    color: #ffffff;
    background: linear-gradient(135deg, #ffffff 0%, #e6dcff 45%, #ffd2b0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.1rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
}

.joo-auth-form-col { background: transparent; }
.joo-form-title {
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.joo-form-sub {
    color: var(--joo-text-muted);
    font-size: 0.96rem;
}

.joo-alert {
    background: rgba(255, 77, 103, 0.12) !important;
    color: #ffd5dd !important;
    border: 1px solid rgba(255, 77, 103, 0.35) !important;
}

/* Bootstrap Void/YesNo confirm modal.  It MUST render ABOVE the payment lock
   overlay.  If its z-index is the Bootstrap default (1055) then clicking the
   Void button appears to do "nothing" because the modal opens BEHIND the
   lock.  So we raise both the modal and its generated backdrop well above
   the lock. */
#confirmModal { z-index: 110000 !important; }
#confirmModal + .modal-backdrop,
body > .modal-backdrop.show:last-of-type,
.modal-backdrop { z-index: 109999 !important; }
#confirmModal .modal-content {
    background: var(--joo-panel-strong);
    border: 1px solid var(--joo-border);
    border-radius: var(--joo-radius-lg);
    color: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
#confirmModal .modal-header { border-bottom: 1px solid var(--joo-border); }
#confirmModal .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
#confirmModal .modal-footer { border-top: 1px solid var(--joo-border); }

/* Overlay helper: when a modal closes, ensure any orphaned modals or
   backdrops don't accidentally keep the lock hidden. */

/* ============================================================
   PAYMENT LOCK OVERLAY (non-closable)
   ============================================================ */
.payment-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-start;          /* changed from center so small screens start scroll at top */
    justify-content: center;
    padding: 14px 14px 22px 14px;
    overflow-y: auto;                /* allow scroll inside the lock on short screens */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.payment-lock-overlay::-webkit-scrollbar { width: 0; height: 0; }
.payment-lock-overlay { -ms-overflow-style: none; scrollbar-width: none; }

.payment-lock-backdrop {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(900px 600px at 50% 10%, rgba(138, 43, 226, 0.45), transparent 60%),
        radial-gradient(900px 600px at 50% 110%, rgba(255, 138, 61, 0.32), transparent 55%),
        rgba(6, 4, 18, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.payment-lock-dialog {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    margin: auto 0;                    /* centers vertically IF content fits */
    animation: lockPopIn 0.22s cubic-bezier(.2,.8,.2,1) both;
    max-height: calc(100vh - 36px);
    /* Note: scrolling is handled by .joo-lock-card to enable sticky footer. */
    overflow: visible;
}
@keyframes lockPopIn {
    0%   { transform: translateY(20px) scale(0.96); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.joo-lock-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 36px);
    background:
        linear-gradient(180deg, rgba(22, 18, 55, 0.98), rgba(17, 14, 46, 0.98));
    border: 1px solid var(--joo-border-strong) !important;
    border-radius: 28px !important;
    box-shadow: 0 40px 120px rgba(0,0,0,0.6);
    overflow: hidden;
}
.joo-lock-card > .card-body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0 !important;
    scrollbar-width: thin;
}
.joo-lock-card > .card-body::-webkit-scrollbar { width: 8px; }
.joo-lock-card > .card-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(138,43,226,0.45), rgba(255,138,61,0.45));
    border-radius: 999px;
}

/* Void / Cancel action container – STICKS TO BOTTOM OF LOCK CARD viewport
   so cashier never ever needs to scroll to reach it.  This eliminates the
   #1 mobile Void failure mode (scrolling scrollable containers makes hit
   rects unreliable + cashiers fail to scroll enough to see the btn). */
#lockActionContainer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -1.5rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    background: linear-gradient(180deg,
        rgba(17, 14, 46, 0) 0%,
        rgba(17, 14, 46, 0.78) 22%,
        rgba(17, 14, 46, 0.97) 55%,
        rgba(17, 14, 46, 0.99) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
@media (min-width: 576px) {
    #lockActionContainer {
        margin: 0 -3rem -3rem -3rem;
        padding: 1.25rem 3rem 3rem 3rem;
    }
}
#lockVoidBtn {
    min-height: 60px;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 14px 34px rgba(255, 47, 90, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    /* Enlarge invisible tap box beyond button boundaries by 14px so even
       slightly-off-target taps on mobile still hit. */
    padding: 18px 22px;
    touch-action: manipulation;
}
@media (max-width: 420px) {
    #lockVoidBtn { min-height: 64px; font-size: 1.02rem; padding: 16px 18px; }
}

/* FLOATING VOID FAB (always visible on any viewport height — pins to
   the bottom edge of the VIEWPORT, not the card, so scrolling never
   hides it).  Shows on small screens / short heights by default; on
   tall screens we still render it alongside the normal Void button. */
#lockVoidFAB {
    /* Sticky in-card Void button (position:sticky bottom:0 on
       #lockActionContainer) is ALWAYS visible now on every viewport
       height/width regardless of scroll.  The old floating FAB would
       cause duplicate "Void" buttons on mobile, so we hide it VISUALLY
       here.  The element remains in DOM (display:block so boundingRect
       exists) so the document capture-phase hit-rect safety net in
       app.js can still match against its corner position – but the
       cashier will never see two buttons.  */
    position: fixed;
    right: max(14px, 14px + env(safe-area-inset-right, 0px));
    bottom: max(18px, 18px + env(safe-area-inset-bottom, 0px));
    z-index: 210001;
    min-width: 84px;
    min-height: 84px;
    /* Invisible – keeps boundingRect intact (so global capture rect
       hit test still works) but no visible duplicate button. */
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    color: transparent !important;
    border: 0 none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    /* Allow clicks to pass through to the sticky in-card Void if the
       invisible FAB somehow sits between finger and button. */
    pointer-events: none !important;
    -webkit-tap-highlight-color: transparent;
}
#lockVoidFAB:active {
    transform: translateY(1px) scale(0.99);
}
#lockVoidFAB[disabled],
#lockVoidFAB[aria-disabled="true"] {
    filter: saturate(0.4) brightness(0.75);
    pointer-events: none;
    opacity: 0.8;
    box-shadow: none;
}
@keyframes voidFabIn {
    0%   { transform: translateY(30px) scale(0.9); opacity: 0; }
    100% { transform: translateY(0)    scale(1);   opacity: 1; }
}
@media (min-width: 700px) and (min-height: 720px) {
    /* On tall desktop viewports the regular in-card Void button is always
       visible; hide the duplicate FAB to reduce noise. */
    #lockVoidFAB { display: none !important; }
}

/* "Scroll down for Void button" hint – shown only when the internal
   dialog actually needs scrolling (toggled from JS). */
#lockScrollHint {
    display: none;
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    margin: 10px 0 0 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.12) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 0 0 28px 28px;
    padding: 10px 16px 14px;
    color: #ffe4cc;
    font-weight: 700;
    font-size: 0.92rem;
    text-align: center;
    z-index: 3;
}
#lockScrollHint.joo-show { display: block; }
#lockScrollHint i {
    display: inline-block;
    color: var(--joo-orange);
    margin-left: 4px;
    animation: bounceDown 1.4s ease-in-out infinite;
}
@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}
.joo-lock-spinner {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, #8A2BE2 70deg, #FF8A3D 160deg, transparent 240deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 10px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 10px));
    animation: spin 1s linear infinite;
    filter: drop-shadow(0 0 20px rgba(138, 43, 226, 0.55));
}
@keyframes spin { to { transform: rotate(360deg); } }

.joo-lock-details {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid var(--joo-border-strong);
}
.joo-lock-amount {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--joo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    line-height: 1.1;
}

.joo-lock-progress {
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
#lockProgressBar {
    background: var(--joo-gradient);
    transition: width 0.3s ease;
}

#lockAlertBox { border-width: 1px; }
.alert-success {
    background: rgba(39, 208, 122, 0.12) !important;
    color: #c9ffe5 !important;
    border-color: rgba(39, 208, 122, 0.4) !important;
}
.alert-danger {
    background: rgba(255, 77, 103, 0.12) !important;
    color: #ffd5dd !important;
    border-color: rgba(255, 77, 103, 0.4) !important;
}
.alert-warning {
    background: rgba(255, 138, 61, 0.12) !important;
    color: #ffe4cc !important;
    border-color: rgba(255, 138, 61, 0.45) !important;
}
.alert-info {
    background: rgba(138, 43, 226, 0.12) !important;
    color: #e7d6ff !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
}

/* ============================================================
   CONFIRM MODAL
   ============================================================ */
.joo-modal {
    background:
        linear-gradient(180deg, rgba(22, 18, 55, 0.98), rgba(17, 14, 46, 0.98));
    border: 1px solid var(--joo-border-strong);
    color: #fff;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.modal-backdrop.show { opacity: 0.8 !important; }

/* ============================================================
   RESULT PANEL
   ============================================================ */
#lastResultBody .badge {
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    padding: 8px 14px;
}
.badge.bg-success { background: linear-gradient(135deg, var(--joo-green), var(--joo-green-2)) !important; }
.badge.bg-danger  { background: linear-gradient(135deg, var(--joo-red), var(--joo-red-2)) !important; }
.badge.bg-warning {
    background: linear-gradient(135deg, var(--joo-orange), #f0691a) !important;
    color: #fff !important;
}
.badge.bg-secondary {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

#lastResultBody dt { color: var(--joo-text-muted); }
#lastResultBody dd { color: #fff; }

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 575.98px) {
    .joo-nav { min-height: 62px; }
    .joo-logo-mark { width: 38px; height: 38px; border-radius: 12px; }
    .joo-logo-word { font-size: 0.95rem; }
    .joo-logo-img-nav { height: 30px; max-height: 30px; max-width: 180px; }
    .joo-logo-img-nav-badge { height: 36px; max-height: 36px; max-width: 210px; }
    .joo-logo-img-lock { height: 46px; max-height: 46px; max-width: 260px; }
    .joo-logo-img-lg { height: 46px; max-height: 46px; max-width: 260px; }
    .joo-logo-img-mobile { height: 58px; max-height: 58px; max-width: 290px; }
    .joo-auth-card { min-height: 0; border-radius: 22px; }
    .payment-lock-dialog { padding: 0; }
    .joo-lock-amount { font-size: 2rem; }
    .joo-check-list { gap: 0.9rem; }
    .joo-amount-input { padding: 12px 14px; }
    #lockAlertBox:empty { display: none; }
}

@media (max-width: 420px) {
    .joo-page-title { font-size: 1.6rem; }
    .joo-form-title { font-size: 1.4rem; }
    .joo-auth-form-col { padding: 1.4rem 1.2rem !important; }
    .joo-btn-primary.joo-btn-xl { font-size: 1rem; padding: 14px !important; }
    .joo-logo-img-lg { height: 38px; max-height: 38px; max-width: 220px; }
    .joo-logo-img-nav { height: 26px; max-height: 26px; max-width: 160px; }
    .joo-logo-img-nav-badge { height: 32px; max-height: 32px; max-width: 190px; padding: 3px 8px; }
    .joo-logo-img-lock { height: 34px; max-height: 34px; max-width: 220px; }
    .joo-logo-img-mobile { height: 50px; max-height: 50px; max-width: 250px; padding: 4px 8px; }
}

@media (min-width: 1400px) {
    .container-fluid { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
}