/* Шрифт Manrope (SIL Open Font License), лежить у папці fonts: завантажується з нашого сайту, без сторонніх серверів */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Спільний вигляд усіх сторінок OrderSimple: кольори, шрифт, поведінка кнопок і форм.
   Підключається першим; стилі окремих сторінок лежать у самих сторінках і можуть це перекрити.
   Щоб змінити колір чи шрифт усього сервісу, міняйте значення нижче. */
:root {
  --bg: #f4f2eb;          /* фон сторінки: тепле каміння */
  --card: #ffffff;
  --ink: #26302b;         /* основний текст: темний зеленувато-чорний */
  --muted: #66706a;       /* другорядний текст */
  --line: #e0ded3;        /* рамки й розділювачі */
  --accent: #4f7e60;      /* шавлія: кнопки й виділення */
  --on-accent: #ffffff;   /* текст на кнопці */
  --accent-press: #416b50;/* кнопка під пальцем */
  --accent-dark: #38604a; /* акцентний ТЕКСТ (посилання, ціни): читається на білому */
  --tint: #e6efe4;        /* м'яка заливка вибраного */
  --tint-line: #bfd6bf;   /* рамка м'якої заливки */
  --soft: #e9e8df;        /* нейтральна заливка (неактивні кнопки, смужки) */
  --ok: #1b6b3a;          /* успіх, «виконано», платний тариф */
  --ok-bg: #e3f2e7;
  --danger: #b3261e;      /* помилка, скасовано */
  --danger-bg: #f6e0de;
  --forest: #17352a;      /* темно-зелений: шапки, платний тариф */
  --forest-2: #1f4a39;
  --mint: #dcebdd;        /* м'ятний: світлі блоки */
  --butter: #f7e8bf;      /* масляний: акції, виділення на темному */
  --cream: #f4f2eb;       /* світлий текст на темному */
  --glow: rgba(111, 170, 135, .5);   /* сяйво на темних смугах */
  --radius: 22px;
  --shadow: 0 1px 2px rgba(40, 30, 20, .05), 0 8px 24px rgba(40, 30, 20, .07);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.15; }
h1, h2 { font-weight: 800; }
h3 { font-weight: 700; }

/* Кнопки: темний текст на жовтому, м'яке натискання */
body .btn {
  border-radius: 999px; font-weight: 700; letter-spacing: .005em; min-height: 48px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
body .btn.ghost, body .btn.small.ghost { box-shadow: none; }
body .btn.small { min-height: 40px; }
.btn {
  color: var(--on-accent, #fff);
  transition: background-color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn:disabled { transform: none; }

/* Кнопки, що блокуються лише на час відправки (вхід, реєстрація, замовлення, запис): крутиться кружечок,
   щоб було видно, що йде перевірка «я не робот» і відправка, а не зависання */
#authBtn:disabled::before, #loginBtn:disabled::before, #bSubmit:disabled::before, #stepForm button[type="submit"]:disabled::before {
  content: ""; display: inline-block; width: 1em; height: 1em; margin: 0 .55em -.15em 0; vertical-align: baseline;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #authBtn:disabled::before, #loginBtn:disabled::before, #bSubmit:disabled::before, #stepForm button[type="submit"]:disabled::before { animation-duration: 2.4s; }
}
button, a.btn, .tabs button, .seg button { -webkit-tap-highlight-color: transparent; }

/* Поля: помітне, але не різке підсвічування */
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(79, 126, 96, .30); }
.phone input:focus, .price-row input:focus, .num input:focus { box-shadow: none; }
.phone:focus-within, .price-row:focus-within, .num:focus-within { border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(79, 126, 96, .30); }
:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* Вкладки й перемикачі */
.tabs button, .seg button, .mode, .emoji { transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }

/* Нижні вікна: плавно виїжджають, фон проявляється */
@keyframes sheet-in { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.overlay.show { animation: fade-in .18s ease-out; }
.overlay.show .sheet { animation: sheet-in .26s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Темна «шапка» кабінету й адмінки: смуга з легким сяйвом, на яку лягають заголовок і вкладки */
body.appbg {
  background-color: var(--bg);
  background-image: radial-gradient(520px 300px at 88% -40px, var(--glow), transparent 70%),
                    linear-gradient(var(--forest) 0, var(--forest) var(--band, 168px), var(--bg) var(--band, 168px));
  background-repeat: no-repeat;
}

/* Коли відкрите нижнє вікно (кошик, форма, налаштування), сторінка під ним не гортається */
html:has(.overlay.show), body:has(.overlay.show) { overflow: hidden; }
.overlay { overscroll-behavior: contain; }
.sheet { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Чекбокси, перемикачі й повзунки в кольорі палітри (замість стандартного синього) */
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }

/* Кнопка «×» у вікнах: зона натискання не менша за 44 px (зручно пальцем) */
.close { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; line-height: 1; }