:root{--green:#b5e943;--dark:#244d13}*{box-sizing:border-box}body{margin:0;background:#fff;color:#171717;font:16px/1.45 Arial,sans-serif}.topbar{height:76px;border-bottom:1px solid #e3e3e3;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.back{font-size:38px;color:var(--dark);text-decoration:none}.help{color:var(--dark);text-decoration:none;font-size:14px}.brand{font-size:30px;font-weight:700;color:var(--dark)}.wrap{min-height:calc(100vh - 76px);display:flex;justify-content:center;align-items:flex-start;padding:90px 18px}.card{width:min(100%,584px);padding:44px 46px;border-radius:18px;box-shadow:0 12px 44px #00000012;text-align:center}.card h1{font-size:21px;margin:0 0 20px}.card p{margin:0 0 24px}.card form{display:flex;flex-direction:column;gap:16px}input{height:52px;border:1px solid #aaa;border-radius:10px;padding:0 16px;font-size:16px}.primary{height:52px;border:0;border-radius:28px;background:var(--green);color:#21420e;font-weight:700;font-size:16px;cursor:pointer}.hidden{display:none!important}.spinner{width:42px;height:42px;border:4px solid #e5f4d0;border-top-color:var(--dark);border-radius:50%;margin:0 auto 24px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.notice,.phoneDisplay{background:#f0f9e5;border:1px solid #d8edbd;border-radius:10px;padding:16px}.phoneIcon,.successIcon,.errorIcon{font-size:46px;color:var(--dark);margin-bottom:12px}.error{color:#c32d2d}@media(max-width:600px){.topbar{height:64px;padding:0 14px}.brand{font-size:23px}.wrap{padding-top:44px}.card{padding:32px 22px}}
/* Two-step customer check-in: same white/green design, larger central card. */
.card{width:min(100%,650px)}.card .footnote{margin:24px 0 0;font-size:14px}.card .footnote a{color:var(--dark);font-weight:700}.card h1{font-size:22px}.card input{width:100%}
@media(min-width:760px){.wrap{padding-top:105px}.card{padding:54px 52px}}

.demoLabel{color:#365f13;font-size:13px;font-weight:700;background:#f0f9e5;padding:10px 12px;border-radius:9px}

/* Local-only code screen: compact screenshot-aligned card without changing other screens. */
#demo{max-width:470px;padding:48px 36px 32px}
#demo .demoShield{color:#d5a72b;font-size:62px;line-height:1;margin-bottom:30px;text-shadow:0 3px 8px #eadfa6}
#demo h1{font-size:19px;margin-bottom:14px}
#demo .demoSubtitle{font-size:14px;margin-bottom:12px}
#demo .demoLabel{margin-bottom:18px;color:#5b5323;background:#fff7d8;border:1px solid #f2e3a1;font-size:12px}
#demo .demoPhone{background:#f0f0f0;color:#444;border:1px solid #bbb;border-radius:7px;text-align:left;padding:12px 15px;margin-bottom:12px;font-size:15px}
#demo form{gap:22px}
#demo form input{height:44px;border-radius:7px}
#demo .primary{height:44px}
#demo .demoFooter{margin:16px 0 0;font-size:12px;color:#666}

/* Screenshot-inspired six-digit local demo screen only. */
#demo{width:min(100%,470px);max-width:470px;padding:48px 36px 34px;border-radius:19px;box-shadow:0 12px 42px rgba(0,0,0,.07)}
#demo .demoShield{height:112px;display:flex;justify-content:center;align-items:center;margin:0 auto 24px;color:inherit;text-shadow:none;font-size:initial}
#demo .demoShield svg{display:block;filter:drop-shadow(0 5px 7px rgba(0,0,0,.07))}
#demo h1{font-size:20px;margin:0 0 18px;color:#151515}
#demo .demoSubtitle{font-size:13px;line-height:1.5;margin:0 0 12px}
#demo .demoLabel{font-size:11px;line-height:1.45;font-weight:600;padding:9px 11px;margin:0 0 17px;background:#fff8df;border:1px solid #f4e8b8;color:#6a5817;border-radius:7px}
#demo .demoPhone{height:43px;display:flex;align-items:center;padding:0 15px;margin:0 0 12px;text-align:left;background:linear-gradient(#f3f3f3,#ededed);border:1px solid #bfbfbf;border-radius:7px;font-size:14px}
#demo form{gap:21px}
#demo form input{height:43px;font-size:14px;padding:0 18px;border:1px solid #aaa;border-radius:7px}
#demo .primary{height:43px;background:#b5ed3f;border-radius:28px;font-weight:700;font-size:14px}
#demo .demoFooter{margin:14px 0 0;font-size:12px;color:#444}
#demo .demoFooter span{color:#2d6019;text-decoration:underline;font-weight:700}
@media(max-width:520px){#demo{padding:32px 22px}#demo .demoShield{height:95px;margin-bottom:20px}#demo .demoShield svg{width:83px;height:90px}}

/* Name screens: spacing and typography matched to the supplied two-step design. */
.name-step{width:min(100%,650px);padding:55px 53px 52px}
.name-step h1{font-size:24px;margin-bottom:23px}
.name-step>p:not(.footnote):not(.error){font-size:17px;margin-bottom:38px}
.name-step form{gap:27px}
.name-step input{border-radius:9px;height:56px}
.name-step .primary{height:56px}
.name-step .footnote{margin-top:38px;font-size:16px}
.name-step .footnote a,.name-step .forgot-name,.name-step .first-summary a{color:#315c20;font-weight:700;text-decoration:underline}
.name-step .first-summary{height:52px;border:1px solid #aaa;border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;margin-bottom:13px;text-align:left}
.name-step .first-summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.name-step .forgot-name{font-size:14px;text-align:left;margin-top:-13px;margin-bottom:-7px}
@media(max-width:600px){.name-step{padding:38px 24px}.name-step h1{font-size:21px}.name-step>p:not(.footnote):not(.error){font-size:15px}.name-step .footnote{font-size:14px}}

#demo .demoShield img{display:block;width:96px;height:auto;max-height:102px;object-fit:contain;filter:none}
@media(max-width:520px){#demo .demoShield img{width:83px}}

/* Local delivery-date demo; existing pages retain their original styling. */
#deliveryCalendar{max-width:520px}
#deliveryCalendar .delivery-intro{margin-bottom:9px}
#deliveryCalendar .delivery-demo-label{font-size:12px;color:#777;margin:0 0 22px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-head strong{text-transform:capitalize}
.cal-head button{background:#f1f6e8;border:1px solid #dbe6cf;border-radius:9px;width:40px;height:38px;font-size:25px;color:#244d13;cursor:pointer}
.cal-head button:disabled{opacity:.35;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal-weekday{font-size:12px;color:#777;font-weight:700;display:flex;align-items:center;justify-content:center;height:29px}
.cal-day{width:100%;aspect-ratio:1;border:1px solid #dae7ca;background:#f5f9ee;border-radius:8px;cursor:pointer;color:#244d13;font-weight:600;font-size:14px}
.cal-day.is-busy{background:#f0f0f0;color:#aaa;border-color:#ededed;cursor:not-allowed}
.cal-day.is-selected{background:#b5e943;border-color:#659525;color:#183b09;box-shadow:0 0 0 1px #659525 inset}
.cal-legend{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin:18px 0 12px;font-size:11px;color:#666}
.cal-legend span{display:flex;align-items:center;gap:4px}
.cal-legend i{width:11px;height:11px;display:inline-block;border-radius:3px;background:#f5f9ee;border:1px solid #dae7ca}
.cal-legend .cal-busy{background:#f0f0f0;border-color:#ededed}
.cal-legend .cal-selected{background:#b5e943;border-color:#659525}
.cal-selection{font-size:13px;min-height:19px;margin:0 0 10px!important;color:#3f612d}
#calError{font-size:12px;margin:0 0 9px}
#calContinue{width:100%}
#calContinue:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:450px){.cal-grid{gap:3px}.cal-day{font-size:12px}.cal-legend{gap:7px}}
.card.name-step {
    transform: translateY(-60px) scale(0.78);
    transform-origin: center center;
}
/* Поля имени и фамилии чуть крупнее */
#first input[name="first_name"],
#last input[name="last_name"] {
    min-height: 54px;
    font-size: 17px;
    font-weight: 550;
    border: 1.5px solid #b8b8b8;
    box-sizing: border-box;
}

/* Место для глазика справа */
#last .surname-field {
    position: relative;
}

#last .surname-field input {
    width: 100%;
    padding-right: 52px;
}

#last .surname-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #666;
    font-size: 22px;
    padding: 0;
}
/* Размер поля с фамилией */
#last .first-summary {
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #b8b8b8;
    border-radius: 8px;
}

/* Текст внутри */
#last .first-summary span,
#last .first-summary a {
    font-size: 16px;
    font-weight: 550;
}
/* Увеличиваем текст внутри поля над фамилией */
#last .first-summary span,
#last .first-summary a {
    font-size: 18px !important;
    font-weight: 550;
}
/* Анимация подписи с разрывом верхней рамки */

.floating-field {
    position: relative;
    width: 100%;
}

.floating-field input {
    width: 100%;
    min-height: 54px;
    box-sizing: border-box;
    padding: 14px 16px !important;
    border: 1.5px solid #b8b8b8;
    border-radius: 8px;
    background: #fff;
    font-size: 17px;
}

.floating-field label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 5px;
    background: #fff;
    color: #777;
    font-size: 17px;
    line-height: 1.2;
    pointer-events: none;
    transition: top 0.22s ease,
                transform 0.22s ease,
                font-size 0.22s ease,
                color 0.22s ease;
}

/* Поднимаем надпись на рамку */
.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: #23834a;
}

/* Выделяем рамку при вводе */
.floating-field input:focus {
    outline: none;
    border-color: #23834a;
}
/* Анимация имени и фамилии */
#first .floating-field,
#last .floating-field {
    position: relative;
}

#first .floating-field label,
#last .floating-field label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6px;
    background: white;
    font-size: 17px;
    color: #777;
    pointer-events: none;
    z-index: 2;
    transition: all 0.22s ease;
}

/* Подъём надписи и разрыв рамки */
#first .floating-field input:focus + label,
#first .floating-field input:not(:placeholder-shown) + label,
#last .floating-field input:focus + label,
#last .floating-field input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: #23834a;
}

/* Подсветка рамки */
#first .floating-field input:focus,
#last .floating-field input:focus {
    outline: none;
    border-color: #23834a;
}
/* Подключение скачанного шрифта */
@font-face {
    font-family: 'Lakitoka';
    src: url('/static/lakitoka.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

/* Только название PizzaBurger */
.topbar .brand,
.topbar .brand span {
    font-family: 'Lakitoka', sans-serif !important;
    font-weight: normal !important;
}
/* Чёрная надпись при поднятии */
#first .floating-field input:focus + label,
#first .floating-field input:not(:placeholder-shown) + label,
#last .floating-field input:focus + label,
#last .floating-field input:not(:placeholder-shown) + label {
    color: #000000 !important;
}

/* Чёрная рамка при нажатии */
#first .floating-field input:focus,
#last .floating-field input:focus {
    border-color: #000000 !important;
}
/* Аккуратная кнопка-глазик */
#last .surname-eye {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
}

#last .surname-eye svg {
    width: 22px;
    height: 22px;
}
/* Размер названия PizzaBurger */
.topbar .brand span {
    font-family: 'Lakitoka', sans-serif !important;
    font-weight: 300 !important;
    font-size: 35px !important;
    letter-spacing: 0.9px !important;

    display: inline-block;
    transform: scale(1, 1.1);
    transform-origin: left center;
    white-space: nowrap;
}
.topbar .brand span {
position: relative;
top: 2px;
    -webkit-text-stroke: 0.10px #ffffff;
}
/* Текст регистрации слева в обеих формах */
#first .footnote,
#last .footnote {
    text-align: left !important;
    width: 100%;
    padding-left: 8px;
    box-sizing: border-box;
}
/* Обычная рамка — серая */
#first .floating-field input,
#last .floating-field input {
    border: 1.5px solid #b8b8b8 !important;
    box-sizing: border-box;
    transition: border-color 0.2s ease, border-width 0.2s ease;
}

/* При нажатии — насыщенная чёрная рамка */
#first .floating-field input:focus,
#last .floating-field input:focus {
    border: 3px solid #000000 !important;
    outline: none !important;
}
/* Логотип и название чуть левее */
.topbar .brand {
    position: relative;
    left: -12px;
}

/* Все карточки строго по центру экрана */
.wrap {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.wrap > .card {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Сохраняем прежний размер и высоту формы имени */
#first {
    transform: translateY(-60px) scale(0.78);
    transform-origin: center center;
}

/* Сохраняем прежний размер и высоту формы фамилии */
#last {
    transform: translateY(-70px) scale(0.78);
    transform-origin: center center;
}
/* Центрируем все формы по горизонтали */
.wrap {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.wrap > .card {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Первая форма: чуть выше и строго по центру */
#first {
    position: relative;
    left: 0 !important;
    right: auto !important;
    transform: translateY(-90px) scale(0.78) !important;
    transform-origin: center center;
}
/* Форма фамилии — чуть уже и выше по размеру */
#last {
    transform: translateY(-80px) scale(0.74, 0.79) !important;
    transform-origin: center center;
    margin-left: auto !important;
    margin-right: auto !important;
}
input[name="first_name"],
input[name="last_name"] {
    font-weight: 400 !important;
}