/* Restaurant sign-in: Biznapoa brand, touchscreen keypad, responsive layout. */
:root {
    --pin-ink: #17264a;
    --pin-muted: #687895;
    --pin-line: #e0e6f1;
    --pin-accent: #ec168c;
    --pin-accent-2: #7938e8;
    --pin-card: #ffffff;
    --pin-danger: #bf2f4e;
    --pin-shadow: 0 24px 70px rgba(31, 35, 78, .16);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body.pin-login {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    color: var(--pin-ink);
    background:
        radial-gradient(ellipse at 8% 8%, rgba(236, 22, 140, .10), transparent 36%),
        radial-gradient(ellipse at 92% 90%, rgba(121, 56, 232, .10), transparent 38%),
        #f5f7fc;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.pin-login::before,
body.pin-login::after {
    position: fixed;
    z-index: -1;
    inset: -16%;
    content: "";
    pointer-events: none;
    will-change: transform, opacity;
}

body.pin-login::before {
    background:
        radial-gradient(ellipse at 24% 28%, rgba(236, 22, 140, .13), transparent 38%),
        radial-gradient(ellipse at 78% 70%, rgba(121, 56, 232, .12), transparent 42%);
    filter: blur(34px);
    animation: pin-ambient-drift 26s ease-in-out infinite alternate;
}

body.pin-login::after {
    background: radial-gradient(ellipse at 82% 18%, rgba(236, 22, 140, .07), transparent 34%);
    filter: blur(48px);
    animation: pin-ambient-glow 19s ease-in-out infinite alternate;
}

.pin-stage {
    flex: 1 0 auto;
    min-height: calc(100vh - 42px);
    min-height: calc(100svh - 42px);
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vh, 42px) clamp(14px, 4vw, 40px);
}

.pin-card {
    width: min(100%, 900px);
    min-height: 490px;
    display: grid;
    grid-template-columns: minmax(250px, .88fr) minmax(360px, 1.12fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 52px);
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid rgba(221, 226, 240, .96);
    border-radius: 26px;
    background: var(--pin-card);
    box-shadow: var(--pin-shadow);
}

.pin-brand {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: 400px;
    padding: 30px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #f1e5f4;
    border-radius: 21px;
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.95), rgba(255,255,255,.34) 45%, transparent 72%),
        linear-gradient(145deg, #fff2fa 0%, #f7f3ff 54%, #eff4ff 100%);
}

.pin-logo {
    display: block;
    width: min(100%, 330px);
    max-height: 160px;
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.pin-brand-copy { display: grid; gap: 6px; }
.pin-brand-name { color: #192951; font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.pin-brand-caption { color: #71809d; font-size: 12px; font-weight: 550; letter-spacing: .02em; }

.pin-tabs {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 5px;
    margin: 0;
    border: 1px solid #e7e8f1;
    border-radius: 13px;
    background: #f5f6fb;
}

.pin-tab {
    appearance: none;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--pin-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 680;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.pin-tab:hover { color: var(--pin-ink); }
.pin-tab.is-active {
    color: #fff;
    background: linear-gradient(115deg, var(--pin-accent), var(--pin-accent-2));
    box-shadow: 0 5px 13px rgba(160, 42, 178, .2);
}
.pin-tab:focus-visible, .pin-key:focus-visible, .pin-submit:focus-visible {
    outline: 3px solid rgba(121, 56, 232, .28);
    outline-offset: 2px;
}

.pin-panel {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    text-align: left;
}
.pin-panel[hidden], [hidden] { display: none !important; }
#pinForm { display: none; }

.pin-heading { margin: 0 0 17px; }
.pin-eyebrow {
    margin: 0 0 6px;
    color: var(--pin-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.pin-heading h1 {
    margin: 0 0 6px;
    color: var(--pin-ink);
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.15;
    font-weight: 760;
    letter-spacing: -.035em;
}
.pin-sub { margin: 0; color: var(--pin-muted); font-size: 13px; line-height: 1.5; }

.pin-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0 0 16px;
}
.pin-dot {
    width: 15px;
    height: 15px;
    border: 1.5px solid #ccd5e4;
    border-radius: 50%;
    background: #fff;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.pin-dot.is-filled {
    transform: scale(1.06);
    border-color: var(--pin-accent);
    background: linear-gradient(135deg, var(--pin-accent), var(--pin-accent-2));
}
.pin-message {
    min-height: 19px;
    margin: 0 0 9px;
    color: var(--pin-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    text-align: center;
}
.pin-message.is-error { color: var(--pin-danger); }

.pin-keypad {
    width: min(100%, 350px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0 auto;
}
.pin-key {
    appearance: none;
    min-width: 0;
    height: clamp(52px, 7vh, 64px);
    border: 1px solid var(--pin-line);
    border-radius: 13px;
    color: var(--pin-ink);
    background: #fff;
    box-shadow: 0 2px 5px rgba(23, 38, 74, .05);
    font: inherit;
    font-size: 21px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: transform .08s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.pin-key:hover { border-color: #d9b8e6; background: #fff8fd; box-shadow: 0 5px 12px rgba(44, 37, 91, .09); }
.pin-key:active { transform: scale(.97); }
.pin-key-quiet { color: #704a83; background: #f7f3fb; font-size: 13px; font-weight: 750; }
.pin-key-login {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(120deg, var(--pin-accent), var(--pin-accent-2));
    box-shadow: 0 7px 16px rgba(162, 40, 181, .24);
    font-size: 14px;
}
.pin-key-login:hover { color: #fff; background: linear-gradient(120deg, #d90e7d, #692bd5); }
.pin-key-login:disabled { cursor: progress; opacity: .72; }

.pin-hint { margin: 14px 0 0; color: #8190a9; font-size: 11px; line-height: 1.45; text-align: center; }

.pin-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 22px 0 0;
    text-align: left;
}
.pin-field { display: flex; flex-direction: column; gap: 7px; }
.pin-label { color: var(--pin-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pin-input {
    width: 100%;
    height: 49px;
    padding: 0 13px;
    border: 1.5px solid var(--pin-line);
    border-radius: 11px;
    color: var(--pin-ink);
    background: #fbfcff;
    font: inherit;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pin-input:hover { border-color: #cdd5e5; }
.pin-input:focus { outline: none; border-color: var(--pin-accent-2); background: #fff; box-shadow: 0 0 0 4px rgba(121, 56, 232, .12); }
.pin-input::placeholder { color: #98a2b5; }
.pin-password { position: relative; display: block; }
.pin-password .pin-input { padding-right: 48px; }
.pin-reveal {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    color: var(--pin-muted);
    background: transparent;
    cursor: pointer;
}
.pin-reveal:hover { color: var(--pin-accent-2); background: #f5effa; }
.pin-reveal.is-on { color: var(--pin-accent-2); }
.pin-submit {
    appearance: none;
    width: 100%;
    min-height: 49px;
    margin-top: 16px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(120deg, var(--pin-accent), var(--pin-accent-2));
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(147, 44, 173, .2);
    transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
}
.pin-submit:hover { filter: brightness(1.04); }
.pin-submit:active { transform: translateY(1px); }
.pin-submit:disabled { cursor: progress; filter: saturate(.8); }

.pin-footer {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    color: #74819a;
    font-size: 11px;
    text-align: center;
}
body.is-busy .pin-keypad { opacity: .72; pointer-events: none; }
.pin-card.is-shake { animation: pin-shake .34s cubic-bezier(.36, .07, .19, .97); }
@keyframes pin-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

@keyframes pin-ambient-drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to { transform: translate3d(1.5%, 1.2%, 0) scale(1.06); }
}

@keyframes pin-ambient-glow {
    from { opacity: .5; transform: translate3d(1%, -1%, 0) scale(1); }
    to { opacity: .95; transform: translate3d(-1%, 1%, 0) scale(1.04); }
}

@media (max-width: 700px) {
    .pin-stage { min-height: calc(100svh - 40px); padding: 15px; }
    .pin-card {
        width: min(100%, 470px);
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        gap: 16px;
        padding: 16px;
        border-radius: 22px;
    }
    .pin-brand {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        padding: 13px 15px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        border-radius: 15px;
        text-align: left;
    }
    .pin-logo { width: min(42%, 165px); max-height: 58px; }
    .pin-brand-copy { gap: 3px; }
    .pin-brand-name { font-size: 15px; }
    .pin-brand-caption { font-size: 11px; }
    .pin-tabs { grid-column: 1; grid-row: 2; }
    .pin-panel { grid-column: 1; grid-row: 3; }
    .pin-heading { margin-bottom: 13px; }
    .pin-heading h1 { font-size: 23px; }
    .pin-sub { font-size: 12px; }
    .pin-keypad { width: min(100%, 380px); gap: 8px; }
    .pin-key { height: clamp(50px, 8vh, 60px); }
}

@media (max-width: 380px) {
    .pin-stage { padding: 9px; }
    .pin-card { gap: 12px; padding: 12px; border-radius: 18px; }
    .pin-brand { padding: 10px 12px; }
    .pin-logo { max-height: 48px; }
    .pin-tab { min-height: 40px; padding: 7px 5px; font-size: 12px; }
    .pin-keypad { gap: 6px; }
    .pin-key { height: 48px; border-radius: 10px; }
}

@media (max-height: 620px) and (min-width: 701px) {
    .pin-stage { min-height: calc(100svh - 38px); padding-top: 6px; padding-bottom: 6px; }
    .pin-card { min-height: 0; gap: 10px; padding: 12px; }
    .pin-brand { min-height: 0; padding: 16px; gap: 14px; }
    .pin-logo { max-height: 90px; }
    .pin-brand-name { font-size: 15px; }
    .pin-tab { min-height: 36px; padding-top: 5px; padding-bottom: 5px; }
    .pin-heading { margin-bottom: 8px; }
    .pin-heading h1 { margin-bottom: 3px; font-size: 21px; }
    .pin-sub { font-size: 11px; }
    .pin-dots { gap: 9px; margin-bottom: 7px; }
    .pin-dot { width: 12px; height: 12px; }
    .pin-message { min-height: 15px; margin-bottom: 4px; font-size: 11px; }
    .pin-keypad { width: min(100%, 330px); gap: 5px; }
    .pin-key { height: 38px; border-radius: 10px; font-size: 18px; }
    .pin-key-quiet, .pin-key-login { font-size: 12px; }
    .pin-hint { margin-top: 6px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pin-card.is-shake { animation: none; }
    .pin-dot, .pin-key, .pin-tab, .pin-submit { transition: none; }
    body.pin-login::before, body.pin-login::after { animation: none; }
}