:root{
  --bg:#0f1115;
  --bg2:#151822;
  --card:rgba(18, 22, 28, .55);
  --text:#f2f3f5;
  --muted:#a8acb8;
  --accent:#ff3b30;
  --border:rgba(255,255,255,.06);
  --shadow:0 18px 55px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(255,59,48,.12), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(255,165,0,.10), transparent 55%),
    var(--bg);
  line-height:1.5;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

.container{
  width:min(1100px, 92vw);
  margin:0 auto;
}

.muted{ color:var(--muted); }
.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(0,0,0,.15);
  font-size:14px;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background:rgba(10,10,12,.55);
  border-bottom:1px solid var(--border);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.logo{ font-weight:800; letter-spacing:.3px; }
.logo span{ color:var(--accent); }

.nav{
  display:flex;
  gap:18px;
  align-items:center;
  color:rgba(242,243,245,.9);
}
.nav a{ opacity:.85; }
.nav a:hover{ opacity:1; }

.header__actions{ display:flex; align-items:center; gap:12px; }

.lang{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px;
  background:rgba(0,0,0,.15);
}
.lang__btn{
  border:0;
  background:transparent;
  color:rgba(242,243,245,.85);
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
.lang__btn.is-active{
  background:rgba(255,255,255,.12);
  color:var(--text);
}

.burger{
  display:none;
  width:42px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.15);
  cursor:pointer;
}
.burger span{
  display:block;
  height:2px;
  width:18px;
  background:rgba(242,243,245,.9);
  margin:5px auto;
  border-radius:2px;
}

.mobile{
  display:none;
  border-top:1px solid var(--border);
  background:rgba(10,10,12,.65);
}
.mobile__inner{
  padding:12px 0 16px;
  display:grid;
  gap:10px;
}
.mobile a{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(0,0,0,.12);
}

.hero{ padding:34px 0 18px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:center;
}
.hero__content h1{
  font-size:56px;
  line-height:1.05;
  margin:14px 0 10px;
}
.lead{
  margin:0 0 16px;
  font-size:18px;
  color:rgba(242,243,245,.88);
}
.cta{ display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 10px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  font-weight:800;
  border:1px solid var(--border);
  background:rgba(0,0,0,.10);
  cursor:pointer;
}
.btn--primary{
  background:var(--accent);
  border-color:transparent;
  color:#0b0b0c;
}
.btn--ghost:hover{ background:rgba(255,255,255,.06); }

.meta{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:grid;
  gap:6px;
  color:rgba(242,243,245,.88);
}
.meta strong{ color:var(--text); }

.hero__media{ display:flex; justify-content:flex-end; }
.media-card{
  width:min(420px, 100%);
  aspect-ratio: 900/650;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(0,0,0,.15);
  box-shadow: var(--shadow);
}
.hero-photo{
  background-image:url("assets/img/hero.jpg");
  background-size:cover;
  background-position:center;
}

/* sections */
.section{ padding:34px 0; }
.section__head{ margin-bottom:16px; }
.section__head h2{
  margin:0 0 8px;
  font-size:38px;
}
.section__head p{ margin:0; }

/* cards grid */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  align-items:stretch;
}

.card{
  border:1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(10px);
  border-radius:18px;
  padding:18px;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (hover:hover){
  .card:hover{
    transform: translateY(-6px);
    border-color: rgba(255,255,255,.12);
    box-shadow: var(--shadow);
  }
}

.card__media{
  margin-top:12px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.25);
}
.card__media img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

.menu-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
.menu-card{
  border:1px solid var(--border);
  background: var(--card);
  border-radius:18px;
  padding:18px;
  backdrop-filter: blur(10px);
}
.list{
  margin:12px 0 0;
  padding-left:18px;
  color:rgba(242,243,245,.88);
}

.reserve-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.contact-card{
  border:1px solid var(--border);
  background: var(--card);
  border-radius:18px;
  padding:18px;
  backdrop-filter: blur(10px);
  transition: transform .25s ease, border-color .25s ease;
}
@media (hover:hover){
  .contact-card:hover{
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.12);
  }
}
.contact-card__title{ font-weight:900; margin-bottom:6px; }

.footer{
  padding:22px 0 34px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.08);
}
.footer__inner{ display:flex; justify-content:space-between; align-items:center; }

/* ===== Reveal animation ===== */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .card, .btn, .menu-card, .contact-card{ transition:none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 920px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__media{ justify-content:flex-start; }
  .media-card{ width:100%; max-width:520px; }

  .cards{ grid-template-columns: 1fr; }
  .menu-grid{ grid-template-columns: 1fr; }
  .reserve-grid{ grid-template-columns: 1fr; }

  .nav{ display:none; }
  .burger{ display:block; }
  .mobile.is-open{ display:block; }
}


/* ===== Cart drawer ===== */
.cart-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 9998;
}

.cart-drawer{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(420px, 92vw);
  background: rgba(15,18,22,.92);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -20px 0 60px rgba(0,0,0,.35);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 9999;
  display:flex;
  flex-direction:column;
}

.cart-drawer.is-open{ transform: translateX(0); }

.cart-head{
  padding:16px 16px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cart-title{ font-weight:700; font-size:18px; }

.cart-close{
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  border-radius: 10px;
  width: 36px; height: 36px;
  cursor:pointer;
}

.cart-items{
  padding: 14px 16px;
  overflow:auto;
  flex:1;
}

.cart-footer{
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.cart-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
}

.cart-field input,
.cart-field textarea{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color:#fff;
}

.cart-order{
  width:100%;
  margin-top:12px;
}

/* ===== Menu categories + items ===== */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 18px;
}

.chip{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:#fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
}

.chip.is-active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.25);
}

.menu-items{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
}

@media (max-width: 820px){
  .menu-items{ grid-template-columns: 1fr; }
}
/* ===== Cart button in header ===== */
.cart-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-weight:600;
  line-height:1;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

.cart-btn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

.cart-btn:active{
  transform:translateY(0);
}

.cart-badge,
.cart-count{
  min-width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:700;
}

/* === Delivery menu: add button === */
.menu-add-btn{
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}

.menu-add-btn:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

.menu-add-btn:active{
  transform: translateY(1px);
}

/* ===== Delivery menu cards (new) ===== */
.menu-items{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 820px){
  .menu-items{ grid-template-columns: 1fr; }
}

.menu-item{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius:18px;
  padding:18px;
  backdrop-filter: blur(10px);
}

.menu-item__title{
  font-size:20px;
  margin:0 0 8px;
  font-weight:800;
}

.menu-item__desc{
  margin:0 0 12px;
  opacity:.78;
}

.menu-item__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.price{
  font-weight:900;
  font-size:18px;
  white-space:nowrap;
}

/* кнопка Добавить (чтобы была реально видна) */
.menu-add-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
.menu-add-btn:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.24);
}
.menu-add-btn:active{ transform:translateY(1px); }

/* ===== Cart rows (inside drawer) ===== */
.cart-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background: rgba(255,255,255,.03);
  margin-bottom:10px;
}

.cart-row__name{
  font-weight:800;
}

.cart-row__controls{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}

.cart-qty{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-weight:900;
}
.cart-qty:hover{ background: rgba(255,255,255,.10); }

.cart-qty__num{
  min-width:26px;
  text-align:center;
  font-weight:900;
}

.cart-row__sum{
  grid-column: 1 / -1;
  display:flex;
  justify-content:space-between;
  opacity:.9;
  font-weight:800;
}

.cart-remove{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-weight:900;
}
.cart-remove:hover{ background: rgba(255,255,255,.10); }

/* ===== Segmented controls in cart ===== */
.cart-choice{ margin-top: 14px; }
.cart-choice__label{ font-weight:900; margin-bottom:8px; }

.segmented{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.segmented__item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
}
.segmented__item input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.segmented__item:has(input:checked){
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}

/* Ensure HTML [hidden] always wins (prevents modal showing on page load) */
[hidden]{
  display: none !important;
}

/* Safety: explicitly hide these when hidden */
.modal[hidden],
.modal-backdrop[hidden]{
  display: none !important;
}

/* ===== Modal (Thanks) ===== */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.55);
  z-index: 9998;
}
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index: 9999;
}
.modal__card{
  width:min(520px, 92vw);
  border-radius:22px;
  padding:18px;
  background: rgba(18,18,18,0.92);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
}
.modal__icon{ font-size:28px; }
.modal__title{ margin:10px 0 6px; font-size:22px; font-weight:900; }
.modal__text{ margin:0 0 14px; opacity:.8; }


/* ===== Thanks modal ===== */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 9998;
}

.modal{
  position:fixed; inset:0;
  display:grid;
  place-items:center;
  z-index: 9999;
}

.modal_card{
  width:min(520px, 92vw);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,18,22,.92);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

.modal_icon{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:10px;
  background: rgba(255,255,255,.08);
  margin-bottom:10px;
}

.modal_title{
  font-size:22px;
  font-weight:800;
  margin-bottom:6px;
}

.modal_text{
  margin-bottom:14px;
}

.modal_ok{
  border-radius:12px;
}
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 9998;
}

.modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  pointer-events: none; /* важно */
}

.modal_card{
  pointer-events: auto; /* важно */
  width: min(520px, 92vw);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,18,22,.92);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.modal_icon{ font-size: 22px; margin-bottom: 10px; }
.modal_title{ font-weight: 900; font-size: 22px; margin-bottom: 6px; }
.modal_ok{ margin-top: 14px; }

/* ===== Mobile cart improvements ===== */
@media (max-width: 520px){
  .cart-drawer{
    width: 100vw;
    max-width: 100vw;
    border-left: 0;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 0;
  }

  .cart-head{
    position: sticky;
    top: 0;
    background: rgba(15,18,22,.96);
    z-index: 2;
  }

  .cart-footer{
    position: sticky;
    bottom: 0;
    background: rgba(15,18,22,.96);
    z-index: 2;
  }

  .cart-items{
    padding-bottom: 18px;
  }

  .cart-field input,
  .cart-field textarea{
    font-size: 16px; /* важно: чтобы iOS не зумил инпут */
  }

  /* кнопки +/- и строки в корзине компактнее */
  .cart-row{
    gap: 8px !important;
  }
}
@media (max-width: 520px){
  .modal_card{
    width: calc(100vw - 24px);
    border-radius: 16px;
    padding: 16px;
  }
}
@media (max-width: 520px){
  .menu-item{ padding: 14px; border-radius: 14px; }
  .menu-add-btn{ padding: 12px; }
}
/* cart flow buttons spacing */
#continueBtn { margin-top: 12px; }
#backBtn { margin-top: 10px; }
/* Cart 2-step: чтобы шаги выглядели аккуратно */
#reviewBlock { padding-top: 6px; }
#checkoutBlock { padding-top: 10px; }

/* ===== Floating cart button ===== */
.cart-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9997;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(15,18,22,.92);
  color: #fff;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.cart-fab__icon{ font-size: 16px; line-height: 1; }
.cart-fab__text{ font-weight: 800; font-size: 13px; }
.cart-fab__count{
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 900;
}

/* optional: hide text on very small screens */
@media (max-width: 380px){
  .cart-fab__text{ display:none; }
}


/* ===== Small animations ===== */
@keyframes pulse {
  0%{ transform: translateY(0) scale(1); }
  30%{ transform: translateY(-1px) scale(1.03); }
  100%{ transform: translateY(0) scale(1); }
}
.pulse { animation: pulse .28s ease; }
/* ❌ Отключаем нижнюю плавающую корзину */
.floating-cart,
.cart-fab,
.cart-mobile,
.mobile-cart,
#mobileCart,
.cart--floating {
  display: none !important;
}
/* ===== Add to cart animation ===== */
.menu-add-btn.added {
  background: #2ecc71 !important;
  color: #000 !important;
  transform: scale(0.96);
  transition: all 0.2s ease;
}

/* ===== Cart highlight animation ===== */
@keyframes cart-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.cart-highlight {
  animation: cart-bounce 0.5s ease;
  box-shadow: 0 0 0 3px rgba(255,80,60,0.35);
}

/* ===== Toast: Added to cart (stylish, bottom-center) ===== */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 16px);
  z-index: 2147483647;

  width: min(560px, calc(100vw - 28px));
  padding: 14px 16px;
  border-radius: 16px;

  /* Glass look */
  background: rgba(15, 18, 22, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.60);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* Layout */
  display: block;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}


.toast__title{
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.2;
}

.toast__subtitle{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(242,243,245,.78);
  line-height: 1.25;

  /* Keep neat */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

@media (max-width: 520px){
  .toast{
    bottom: 14px;
    width: calc(100vw - 24px);
    border-radius: 14px;
    padding: 12px 14px;
  }
  .toast__subtitle{ white-space: normal; }
}

@media (prefers-reduced-motion: reduce){
  .toast{ transition: none; transform: translate(-50%, 0); }
}

/* ===============================
   Cart: Back button fix
   =============================== */

#backBtn,
#backToCartBtn {
  width: 100%;
  margin-top: 10px;

  background: transparent;
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;

  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* hover */
#backBtn:hover,
#backToCartBtn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* active (tap on mobile) */
#backBtn:active,
#backToCartBtn:active {
  transform: scale(0.98);
}
/* ===============================
   Cart: Back button visibility
   =============================== */

/* по умолчанию (1-й шаг) — скрыта */
#backBtn,
#backToCartBtn {
  display: none;
}

/* показываем ТОЛЬКО на шаге checkout */
#cartDrawer.is-checkout #backBtn,
#cartDrawer.is-checkout #backToCartBtn {
  display: block;
}
/* Back button: show only on checkout step */
#backBtn{ display:none; }
#cartDrawer.is-checkout #backBtn{ display:block; }

/* ===== Cart prefs UI (receive/payment/city) ===== */
.pref-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pref-btn{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
}

.pref-btn:hover{ transform: translateY(-1px); }

.pref-btn.is-active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 0 0 2px rgba(255,255,255,.10);
}

.cart-select{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  outline:none;
}

.cart-select:focus{
  border-color:rgba(255,255,255,.30);
  background:rgba(255,255,255,.08);
}

/* =========================================================
   FINAL POLISH (buttons, cart UI, remove bottom cart)
   ========================================================= */

/* Ensure any floating/bottom cart is hidden */
.cart-fab,
.floating-cart,
.cart-mobile,
.mobile-cart,
#mobileCart,
.cart--floating{
  display:none !important;
}
/* Header cart badge (works with both ids/classes) */
#cartCount.cart-badge,
#cartCount.cart-count{
  min-width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 7px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:900;
}

/* Primary action buttons in cart */
#continueBtn,
#orderBtn{
  width:100%;
  border-radius:14px;
  padding:14px 16px;
  font-weight:900;
  letter-spacing:.2px;
}

/* Secondary/back button (visible + stylish) */
#backBtn,
#backToCartBtn{
  width:100%;
  margin-top:10px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}

#backBtn:hover,
#backToCartBtn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.32);
  transform: translateY(-1px);
}

#backBtn:active,
#backToCartBtn:active{ transform: translateY(0); }

/* Cart totals block readability */
#cartTotals{ 
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

#cartTotals .muted{ color: rgba(242,243,245,.75); }

/* Pref buttons (receive/payment/city) - make consistent */
.pref-row{ display:flex; gap:10px; flex-wrap:wrap; }

.pref-btn{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}

.pref-btn:hover{ transform: translateY(-1px); background:rgba(255,255,255,.10); }

.pref-btn.is-active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 0 0 2px rgba(255,255,255,.10);
}

.cart-select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:700;
  outline:none;
}

.cart-select:focus{
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.09);
}

/* Toast positioning + look (Added to cart) */
.toast{ bottom: 16px; }

/* Modal: ensure clicks always work */
.modal{ pointer-events:none; }
.modal_card{ pointer-events:auto; }
/* ===============================
   MOBILE CART POLISH (drawer + controls)
   =============================== */

/* Make cart drawer truly mobile-friendly */
@media (max-width: 640px){
  .cart-drawer{
    width: 100vw;
    max-width: 100vw;
    right: 0;
    border-left: 0;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 0;
  }

  .cart-head{
    padding: 14px 14px 10px;
  }

  .cart-items{
    padding: 12px 14px;
  }

  .cart-footer{
    padding: 12px 14px 14px;
  }

  /* tighter typography */
  .cart-title{ font-size: 18px; }
  .cart-row__name{ font-size: 15px; }
}

/* Stack preference buttons nicely on small screens */
@media (max-width: 520px){
  .pref-row,
  .segmented{
    flex-direction: column;
    align-items: stretch;
  }

  .pref-btn,
  .segmented__item{
    width: 100%;
    justify-content: center;
  }

  /* Give the primary cart actions comfortable touch targets */
  #continueBtn,
  #orderBtn,
  #backBtn,
  #backToCartBtn{
    min-height: 48px;
    padding: 14px 16px;
  }
}

/* ===============================
   CITY SELECT (style the native <select>)
   Works even if JS didn't add .cart-select class
   =============================== */

/* Target common ids/classes + any select inside the cart */
#citySelect,
#deliveryCity,
select.cart-select,
.cart-drawer select{
  width: 100%;
  padding: 12px 44px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background-color: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 800;
  outline: none;

  /* remove default OS styling */
  -webkit-appearance: none;
  appearance: none;

  /* custom chevron + separator */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.14), rgba(255,255,255,.14));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    calc(100% - 38px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 18px;
  background-repeat: no-repeat;
}

#citySelect:focus,
#deliveryCity:focus,
select.cart-select:focus,
.cart-drawer select:focus{
  border-color: rgba(255,255,255,.32);
  background-color: rgba(255,255,255,.09);
}

/* Make dropdown options readable on dark theme (where supported) */
#citySelect option,
#deliveryCity option,
select.cart-select option,
.cart-drawer select option{
  background: #0f1115;
  color: #fff;
}

/* Small helper text (e.g. free delivery note) a bit softer */
.cart-drawer .muted{
  color: rgba(242,243,245,.72);
}

/* ==== iOS SAFARI: lock page scroll, allow drawer scroll ==== */
html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  height: 100% !important;
}

/* важно: backdrop фиксированный и перекрывает всё */
.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.45);
  touch-action: none; /* чтобы жесты не уходили на страницу */
}

/* сам drawer фиксированный, выше backdrop */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9100;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

/* делаем один скролл-контейнер внутри drawer */
.cart-items,
.cart-footer {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* чтобы кнопки не прятались за home indicator */
.cart-footer {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
html.no-scroll, body.no-scroll{
  overflow: hidden !important;
  height: 100% !important;
}

/* ===============================
   Floating cart button (menu only)
   Used by app.js: .floating-cart-btn
   =============================== */

.floating-cart-btn{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9997;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(15,18,22,.92);
  color: #fff;

  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;

  transition: transform .12s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.floating-cart-btn:hover{
  background: rgba(15,18,22,.96);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}

.floating-cart-btn:active{
  transform: translateY(0);
}

/* hide/show controlled by JS */
.floating-cart-btn.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}


.floating-cart-text{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  line-height: 1;
}

/* add cart emoji before the label */
.floating-cart-text::before{
  content: "🛒";
  margin-right: 8px;
  font-size: 14px;
  line-height: 1;
  opacity: .95;
}

.floating-cart-count{
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;

  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);

  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

/* smaller on very small phones */
@media (max-width: 380px){
  .floating-cart-text{ font-size: 0; }
  .floating-cart-text::before{ margin-right: 0; }
}

/* make sure it doesn't conflict with the cart drawer */
.cart-drawer.is-open ~ .floating-cart-btn,
.cart-drawer.is-open + .floating-cart-btn{
  /* if DOM order ever makes it adjacent */
  display: none;
}

@media (prefers-reduced-motion: reduce){
  .floating-cart-btn{ transition: none; }
}

/* ===============================
   Fly-to-cart micro animation
   =============================== */
.fly-to-cart{
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  z-index: 10050;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* FIX: hidden must ALWAYS hide modal/backdrop */
.modal[hidden],
.modal-backdrop[hidden],
#thanksModal[hidden],
#thanksBackdrop[hidden]{
  display: none !important;
}

/* ===============================
   MOBILE: Cart (step 1) polish
   =============================== */
@media (max-width: 520px){

  /* общий воздух в корзине */
  .cart-head{ padding: 14px 14px 10px; }
  .cart-items{ padding: 12px 14px; }
  .cart-footer{ padding: 12px 14px 14px; }

  /* строка товара — как “карточка” */
  .cart-row{
    padding: 12px;
    border-radius: 16px;
    margin-bottom: 12px;
    grid-template-columns: 1fr;          /* в одну колонку */
    gap: 10px;
  }

  /* имя + мелкий текст */
  .cart-row__name{
    font-size: 15px;
    line-height: 1.25;
  }

  /* сумма/формула внизу — в две строки, чтобы не ломало */
  .cart-row__sum{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    opacity: .9;
  }

  /* контролы +/- делаем в одну линию, нормальные тапы */
  .cart-row__controls{
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }

  .cart-qty,
  .cart-remove{
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .cart-qty__num{
    min-width: 34px;
    font-size: 14px;
  }

  /* кнопка "Продолжить" — большая и читаемая */
  #continueBtn{
    min-height: 48px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 900;
  }

  /* Итого на первой странице — компактнее */
  #cartTotals{
    border-radius: 16px;
    padding: 12px;
    margin-top: 12px;
  }
}