/* PayWiz Clock — premium kiosk skin (Deep-Teal). Same class names as before;
   restyled to the PayWiz brand so every kiosk screen reads premium + calm. */
:root{
    --pw-teal:#0A7D82;
    --pw-teal-700:#096167;
    --pw-teal-900:#0c3b3f;
    --pw-ink:#14282b;
    --pw-ink-2:#3d5c60;
    --pw-muted:#6b8589;
    --pw-line:#e4ecec;
    --pw-tint:#e8f3f3;
    --pw-bg:#f4f8f8;
    --pw-card:#ffffff;
    --pw-shadow:0 10px 30px rgba(12,59,63,.08);
    --pw-radius:16px;
}

html,body{ height:100%; }
body{
    font-family:"Inter", sans-serif;
    color:var(--pw-ink);
    background:var(--pw-bg);
    -webkit-font-smoothing:antialiased;
}

.kiosk-footer{
    background-color:var(--pw-teal-900);
    color:#cfe3e3;
}

.max-w-sm{ max-width:500px; margin:0 auto; }

.text-lg{ font-size:18px; }
.text-sm{ font-size:14px; }
.text-xs{ font-size:12px; }
.text-gray{ color:var(--pw-muted); }

/* Company / site input */
.site-input-lg{
    border:2px solid var(--pw-line);
    height:54px;
    border-radius:12px;
    background:var(--pw-card);
    transition:border-color .15s ease, box-shadow .15s ease;
}
.site-input-lg:focus{
    outline:none;
    border-color:var(--pw-teal);
    box-shadow:0 0 0 4px rgba(10,125,130,.12);
    font-weight:500;
    font-size:15px;
}
.site-input-lg::placeholder{ color:var(--pw-muted); font-weight:500; }

/* Primary action */
.btn-verify{
    background:var(--pw-teal);
    color:#fff;
    font-size:15px;
    font-weight:600;
    padding:12px 22px;
    border-radius:12px;
    border:none;
    box-shadow:0 6px 16px rgba(10,125,130,.22);
    transition:background-color .15s ease, transform .05s ease;
}
.btn-verify:hover{ background-color:var(--pw-teal-700); color:#fff; }
.btn-verify:active{ transform:scale(.98); }

.top-text{ font-size:16px !important; vertical-align:text-top; display:inline-block; }

.company-icon{
    background-color:var(--pw-tint);
    color:var(--pw-teal);
    width:40px;
    height:40px;
    border-radius:100em;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Tap to begin */
.tap-circle{
    background:radial-gradient(circle at 30% 30%, var(--pw-teal), var(--pw-teal-900));
    width:210px;
    height:210px;
    border-radius:100em;
    cursor:pointer;
    box-shadow:0 18px 44px rgba(10,125,130,.32);
    transition:transform .08s ease, box-shadow .2s ease;
}
.tap-circle:hover{ transform:translateY(-2px); box-shadow:0 22px 52px rgba(10,125,130,.4); }
.tap-circle:active{ transform:scale(.97); }

.back-btn{
    color:var(--pw-teal);
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

/* Face capture */
.face-scan-container{
    position:relative;
    width:450px;
    max-width:100%;
    height:350px;
    border:2px solid var(--pw-line);
    border-radius:var(--pw-radius);
    overflow:hidden;
    background:#000;
    box-shadow:var(--pw-shadow);
}
.scan-frame::before{
    content:'';
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:300px; height:300px;
    border:2px dashed rgba(255,255,255,.7);
    border-radius:14px;
}

/* PIN keypad */
.keypad-btn{
    width:72px;
    height:72px;
    border-radius:50%;
    border:1px solid var(--pw-line);
    background-color:var(--pw-card);
    color:var(--pw-ink);
    font-size:24px;
    font-weight:600;
    cursor:pointer;
    transition:background-color .15s ease, transform .05s ease, border-color .15s ease;
}
.keypad-btn:hover{ background-color:var(--pw-tint); border-color:var(--pw-teal); }
.keypad-btn:active{ transform:scale(.94); }

.pin-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background-color:var(--pw-line);
    transition:background-color .2s ease, transform .2s ease;
}
.pin-dot.filled{ background-color:var(--pw-teal); transform:scale(1.05); }

/* Generic premium card helper (used by the redesigned screens) */
.pw-card{
    background:var(--pw-card);
    border:1px solid var(--pw-line);
    border-radius:var(--pw-radius);
    box-shadow:var(--pw-shadow);
}