@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..900&family=Hind:wght@600;700&display=swap');
:root {
    --ink:#000;
    --board:#FFD60A;
    --mist:#F4F4F1;
    --paper:#fff;
    --g:#55554e;
    --f:#7c7c74;
    --line:#d8d8d1;
    --ok:#17703f;
    --okbg:#e1f1e7;
    --warn:#7a4a00;
    --warnbg:#fff1c7;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:#e8e8e3;
    color:#000;
    font-family:Archivo,system-ui,sans-serif;
    font-size:15px;
    line-height:1.4;
}

.phone-app {
    width:min(100%,430px);
    height:100dvh;
    min-height:650px;
    margin:auto;
    background:var(--mist);
    display:flex;
    flex-direction:column;
    box-shadow:0 0 40px #0002;
}

.screen {
    flex:1;
    overflow:auto;
    padding:18px 18px 25px;
}

.top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:7px 0 16px;
}

.greet {
    font-size:14px;
    color:var(--g);
}

h1 {
    font-size:27px;
    font-stretch:125%;
    letter-spacing:-.04em;
    line-height:1.05;
    margin:2px 0;
}

.avatar {
    width:42px;
    height:42px;
    background:#000;
    color:var(--board);
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:750;
    font-size:14px;
    border:0;
    cursor:pointer;
}

.card {
    background:#000;
    color:#fff;
    border-radius:18px;
    padding:18px 20px 22px;
    position:relative;
    overflow:hidden;
}

.card:after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:8px;
    background:var(--board);
}

.card-top,.card-bottom {
    display:flex;
    justify-content:space-between;
}

.card-top {
    font-weight:850;
}

.card-bottom {
    color:#aaa9a1;
    font-size:12px;
    margin-top:15px;
}

.balance {
    font-size:62px;
    letter-spacing:-.06em;
    font-weight:800;
    line-height:.95;
    margin-top:35px;
}

.balance small {
    font-size:17px;
    letter-spacing:0;
}

.actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}

.btn {
    min-height:44px;
    border:0;
    border-radius:10px;
    background:#000;
    color:#fff;
    padding:0 14px;
    font:650 15px Archivo;
    cursor:pointer;
}

.btn.line {
    background:#fff;
    color:#000;
    border:1.5px solid #000;
}

.btn.board {
    background:var(--board);
    color:#000;
}

.heading {
    font-size:15px;
    font-weight:750;
    margin:25px 0 10px;
}

.heading small {
    font-size:13px;
    color:var(--g);
    font-weight:500;
}

.ticket,.list,.option {
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
}

.ticket {
    overflow:hidden;
}

.ticket-main {
    padding:16px 18px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:2px 12px;
}

.when {
    font-size:17px;
    font-weight:750;
}

.desk {
    font-size:27px;
    font-stretch:125%;
    font-weight:850;
    grid-row:span 2;
    align-self:center;
}

.muted {
    font-size:13px;
    color:var(--g);
}

.door {
    border-top:1.5px dashed var(--line);
    padding:11px 18px;
    background:#fffbe3;
    font-size:13px;
}

.chips {
    display:flex;
    gap:8px;
    overflow:auto;
    padding-bottom:3px;
}

.chip {
    white-space:nowrap;
    padding:9px 14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:99px;
    font:650 14px Archivo;
}

.chip.active {
    background:#000;
    color:#fff;
    border-color:#000;
}

.li {
    padding:13px 16px;
    border-top:1px solid #e8e8e2;
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.li:first-child {
    border:0;
}

.plus {
    color:var(--ok);
    font-weight:750;
}

.bottom-nav {
    background:#fff;
    border-top:1px solid var(--line);
    padding:7px 4px 15px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
}

.bottom-nav button {
    border:0;
    background:none;
    color:var(--f);
    display:grid;
    justify-items:center;
    gap:2px;
    font:500 11px Archivo;
    padding:4px;
}

.bottom-nav button.active {
    color:#000;
    font-weight:750;
}

.bottom-nav i {
    font-style:normal;
    font-size:21px;
    line-height:1;
}

.options {
    display:grid;
    gap:8px;
}

.option {
    padding:14px;
    text-align:left;
    width:100%;
    font:inherit;
    display:grid;
    grid-template-columns:1fr auto;
    cursor:pointer;
}

.option b {
    font-size:15px;
}

.option span {
    font-size:13px;
    color:var(--g);
}

.option.selected {
    border:2px solid #000;
}

.dates {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:5px;
}

.date {
    padding:7px 0;
    border:1px solid var(--line);
    background:#fff;
    border-radius:10px;
    text-align:center;
    font-size:11px;
    color:var(--g);
}

.date b {
    display:block;
    font-size:17px;
    color:#000;
}

.date.active {
    background:#000;
    color:#ddd;
    border-color:#000;
}

.date.active b {
    color:#fff;
}

.stepper {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:1px solid var(--line);
    background:#fff;
    border-radius:12px;
    padding:6px;
}

.stepper button {
    width:42px;
    height:42px;
    border:0;
    border-radius:8px;
    font-size:21px;
}

.stepper output {
    font-weight:750;
}

.notice {
    background:var(--warnbg);
    color:#4d3000;
    border-radius:12px;
    padding:12px 14px;
    font-size:13px;
    margin-top:12px;
}

.wallet-total {
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#000;
    color:#fff;
    border-radius:14px;
}

.wallet-total div {
    padding:15px;
}

.wallet-total div+div {
    border-left:1px solid #333;
}

.wallet-total b {
    font-size:30px;
    font-stretch:125%;
    display:block;
}

.wallet-total span {
    color:#bbb;
    font-size:12px;
}

.login-screen {
    min-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:10px 4px;
}

.login-mark {
    width:58px;
    height:58px;
    border-radius:16px;
    background:#000;
    color:var(--board);
    display:grid;
    place-items:center;
    font-size:20px;
    font-weight:850;
    font-stretch:125%;
    margin-bottom:25px;
}

.login-screen h1 {
    font-size:34px;
}

.login-screen p {
    font-size:15px;
    color:var(--g);
    margin:10px 0 28px;
}

.field {
    display:grid;
    gap:6px;
    margin-top:13px;
}

.field label {
    font-size:13px;
    font-weight:700;
}

.input {
    width:100%;
    min-height:47px;
    border:1.5px solid var(--line);
    border-radius:10px;
    background:#fff;
    padding:0 13px;
    font:15px Archivo;
}

.login-screen .btn {
    width:100%;
    margin-top:20px;
}

.login-note {
    font-size:12.5px;
    color:var(--f);
    text-align:center;
    margin-top:13px;
}

.profile-head {
    display:flex;
    gap:14px;
    align-items:center;
    padding:13px 0 20px;
}

.profile-avatar {
    width:66px;
    height:66px;
    border-radius:50%;
    background:#000;
    color:var(--board);
    display:grid;
    place-items:center;
    font-weight:850;
    font-size:20px;
}

.profile-head h1 {
    font-size:25px;
}

.profile-head p {
    color:var(--g);
    margin:3px 0;
}

.install-backdrop {
    position:fixed;
    inset:0;
    z-index:10;
    background:#0007;
    display:flex;
    align-items:flex-end;
}

.install-popup {
    width:min(100%,430px);
    margin:auto;
    background:#fff;
    border-radius:22px 22px 0 0;
    padding:22px 18px 27px;
    box-shadow:0 -10px 40px #0003;
}

.install-logo {
    width:46px;
    height:46px;
    border-radius:12px;
    background:#000;
    color:var(--board);
    display:grid;
    place-items:center;
    font-weight:850;
    font-stretch:125%;
    margin-bottom:13px;
}

.install-popup h2 {
    font-size:21px;
    font-stretch:125%;
    letter-spacing:-.03em;
    margin:0;
}

.install-popup p {
    color:var(--g);
    font-size:14px;
    margin:6px 0 18px;
}

.install-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.toast {
    position:fixed;
    bottom:82px;
    left:50%;
    transform:translate(-50%,15px);
    opacity:0;
    background:#000;
    color:#fff;
    border-radius:10px;
    padding:11px 15px;
    font-size:13px;
    transition:.2s;
    z-index:12;
}

.toast.show {
    opacity:1;
    transform:translate(-50%,0);
}

@media(min-width:600px) {
    .phone-app {
        height:820px;
        margin:28px auto;
        border:10px solid #000;
        border-radius:48px;
        overflow:hidden;
    }
    .install-popup {
        margin:0 auto;
        border-radius:20px;
        max-width:390px;
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        transition:none!important;
    }
}
/* Properly hide install popup when hidden attribute is active */
.install-backdrop[hidden] {
    display: none !important;
}

.bottom-nav[hidden] {
    display: none !important;
}


/* =========================================================
   MOBILE APP FINAL LAYOUT
   Android + iPhone
========================================================= */

@media screen and (max-width: 600px) {

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body {
        position: fixed;
        inset: 0;
    }

    .phone-app {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;

        overflow: hidden;

        box-sizing: border-box;
    }

    .screen {
        position: absolute;

        top: env(safe-area-inset-top);
        left: 0;
        right: 0;
        bottom: 72px;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 10px 18px 20px;

        overflow: hidden;

        box-sizing: border-box;
    }

    .bottom-nav {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 72px;

        margin: 0;
        padding: 7px 4px 7px;

        background: #fff;
        border-top: 1px solid var(--line);

        box-sizing: border-box;

        z-index: 9999;
    }

}