/* ===========================================================
   Zamin — mijozlar shikoyati
   Ranglar: Koshg'ar koshin ko'ki (teal), anor qizili, mis sariq
   Shriftlar: Lora (sarlavha) + PT Sans (matn)
   =========================================================== */

:root{
  --bg:#EDF0ED;
  --surface:#FFFFFF;
  --surface-2:#F5F8F5;
  --ink:#16211F;
  --ink-soft:#4A5956;
  --ink-faint:#626F6B;
  --line:#D5DCD7;
  --line-soft:#E4EAE5;
  /* boshqariladigan elementlar chegarasi — 3:1 dan past bo'lsa maydon
     qayerda boshlanishi ko'rinmay qoladi */
  --field-line:#86938E;
  --brand:#0F6B66;
  --brand-deep:#0A4B47;
  --brand-wash:#E2EEEC;
  --on-brand:#FFFFFF;
  --accent:#A8323A;
  --gold:#A5761F;
  --star-off:#7C8A86;
  --shadow:0 1px 2px rgba(20,40,38,.05), 0 6px 20px -12px rgba(20,40,38,.28);

  --r:10px;
  --step:clamp(1rem,.85rem + .6vw,1.15rem);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1413;
    --surface:#161E1D;
    --surface-2:#1C2625;
    --ink:#E8EEEB;
    --ink-soft:#A3B0AC;
    --ink-faint:#828F8B;
    --line:#2A3634;
    --line-soft:#222C2B;
    --field-line:#687671;
    --brand:#4FB8AF;
    --brand-deep:#7FD0C8;
    --brand-wash:#15302E;
    --on-brand:#052E2B;
    --accent:#E0727A;
    --gold:#D9A94A;
    --star-off:#6E7B77;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}

/* [hidden] ni sinf qoidalari (masalan .notice{display:flex}) bekor qilib
   yubormasligi uchun — aks holda yashirilgan bloklar ekranda qolib ketadi */
[hidden]{display:none !important}

html,body{margin:0}

body{
  background:var(--bg);
  color:var(--ink);
  font:400 var(--step)/1.6 "PT Sans","Segoe UI",system-ui,sans-serif;
  padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-text-size-adjust:100%;
}

.wrap{
  width:100%;
  max-width:640px;
  margin-inline:auto;
  padding-inline:18px;
}

.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--brand);color:var(--on-brand);padding:12px 16px;z-index:9;
}
.skip:focus{left:8px;top:8px}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* --- shapka ------------------------------------------------ */

.top{
  background:var(--surface);
  border-bottom:1px solid var(--line-soft);
  padding-top:env(safe-area-inset-top,0px);
}
.top-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-block:14px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{color:var(--brand);display:flex;flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text strong{
  font:600 1.35rem/1.15 Lora,Georgia,serif;
  letter-spacing:.01em;
}
.brand-text em{
  font-style:normal;font-size:.72rem;color:var(--ink-faint);
  letter-spacing:.09em;text-transform:uppercase;
}

.langs{display:flex;gap:8px;flex:0 0 auto}
.lang{
  font:700 .8rem/1 "PT Sans",sans-serif;letter-spacing:.06em;
  min-width:44px;min-height:44px;padding:7px 12px;
  border-radius:8px;cursor:pointer;
  background:transparent;color:var(--ink-faint);
  border:1px solid var(--field-line);
}
.lang.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}

/* --- naqsh chizig'i ---------------------------------------- */

.band{display:block;color:var(--brand);opacity:.34}

/* --- kirish matni ------------------------------------------ */

.intro{padding-block:30px 8px}
.intro h1{
  font:600 clamp(1.7rem,1.35rem + 1.7vw,2.4rem)/1.18 Lora,Georgia,serif;
  margin:0 0 .5em;text-wrap:balance;letter-spacing:-.01em;
}
.intro p{margin:0 0 1.1em;color:var(--ink-soft);max-width:54ch}

.assure{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 18px;
  font-size:.86rem;color:var(--ink-soft);
}
.assure li{display:flex;align-items:center;gap:7px}
.assure li::before{
  content:"";width:6px;height:6px;flex:0 0 auto;
  background:var(--gold);transform:rotate(45deg);
}

/* --- yozish kanallari -------------------------------------- */

.channels{
  margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line-soft);
}
.ch-h{
  margin:0 0 12px;font-size:.82rem;font-weight:700;
  letter-spacing:.01em;color:var(--ink-soft);
}
.ch-row{display:flex;flex-wrap:wrap;gap:10px}
.ch{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:11px 16px;border-radius:9px;
  border:1px solid var(--field-line);background:var(--surface);
  color:var(--ink);text-decoration:none;
  font-size:.9rem;font-weight:700;
  transition:border-color .14s,background .14s;
}
.ch:hover{border-color:var(--brand);background:var(--brand-wash)}
/* rang faqat belgichada — yozuvning o'zi kontrastli --ink da qoladi */
.ch svg{flex:0 0 auto}
.ch.tg svg{color:#1B78B5}
.ch.ig svg{color:#C1358A}
.ch.here svg{color:var(--brand)}
@media (prefers-color-scheme:dark){
  .ch.tg svg{color:#5AB6EC}
  .ch.ig svg{color:#E081B8}
}

/* --- shikoyat / taklif tanlovi ------------------------------ */

.kind{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  padding:4px;margin:0 0 16px;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:12px;box-shadow:var(--shadow);
}
.kind-opt{position:relative;cursor:pointer}
.kind-opt input{position:absolute;opacity:0;width:0;height:0}
.kind-opt span{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;border-radius:9px;
  font-weight:700;color:var(--ink-soft);
  transition:background .14s,color .14s;
}
.kind-opt input:checked + span{background:var(--brand);color:var(--on-brand)}
.kind-opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}

.foot-menu{margin:0 0 12px}
.foot-menu a{color:var(--brand);font-weight:700;text-decoration:none}

/* --- kartalar ---------------------------------------------- */

.card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:20px 18px 22px;
  margin:0 0 16px;
}

form{padding-top:22px}

fieldset.card{min-width:0}

legend{
  font:700 .72rem/1 "PT Sans",sans-serif;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);
  padding:0 8px;margin-inline-start:-8px;
}

.grid2{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 14px;margin:14px 0 0;
}
@media (max-width:460px){ .grid2{grid-template-columns:1fr} }

.field{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label,
.sub{
  font-size:.82rem;color:var(--ink-soft);font-weight:700;
  letter-spacing:.01em;
}
.sub{font-weight:400;margin:20px 0 10px}
.sub.small{font-size:.78rem;margin:12px 0 0;color:var(--ink-faint)}

/* font-size 16px dan kichik bo'lsa, iOS Safari maydonga bosilganda
   sahifani zumlab yuboradi — shuning uchun aniq 16px */
input[type=text],input[type=tel],input[type=date],select,textarea{
  font:inherit;font-size:16px;
  width:100%;min-width:0;min-height:44px;
  padding:10px 12px;
  color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--field-line);
  border-radius:8px;
}
textarea{resize:vertical;line-height:1.55;min-height:130px}
input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:1}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:34px;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand)}
textarea[aria-invalid="true"]{border-color:var(--accent)}

.hint{font-size:.76rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}

.err{
  color:var(--accent);font-size:.84rem;margin:10px 0 0;font-weight:700;
}
.err.center{text-align:center}

/* --- yulduzlar --------------------------------------------- */

.rate-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;
}
.stars{display:flex;gap:2px}
.star{
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:3px;border-radius:6px;
}
.star input{position:absolute;opacity:0;width:0;height:0}
.star svg{fill:var(--star-off);transition:fill .12s}
.star input:focus-visible + .sr + svg{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.stars[data-on="1"] .star:nth-child(-n+1) svg,
.stars[data-on="2"] .star:nth-child(-n+2) svg,
.stars[data-on="3"] .star:nth-child(-n+3) svg,
.stars[data-on="4"] .star:nth-child(-n+4) svg,
.stars[data-on="5"] .star:nth-child(-n+5) svg{fill:var(--gold)}

.rate-word{
  font-size:.86rem;color:var(--ink-soft);font-style:italic;
  font-family:Lora,Georgia,serif;
}

/* --- chiplar ----------------------------------------------- */

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:flex;align-items:center;min-height:44px;
  padding:8px 16px;border-radius:999px;
  border:1px solid var(--field-line);background:var(--surface-2);
  font-size:.9rem;color:var(--ink-soft);
  transition:background .12s,color .12s,border-color .12s;
}
.chip input:checked + span{
  background:var(--brand-wash);border-color:var(--brand);
  color:var(--brand-deep);font-weight:700;
}
.chip input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}

/* --- anonim ------------------------------------------------ */

.anon{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  margin-top:14px;font-size:.9rem;color:var(--ink-soft);
}
.anon input{
  width:19px;height:19px;flex:0 0 auto;margin:2px 0 0;
  accent-color:var(--brand);
}
#contact.off{opacity:.42;pointer-events:none}

/* --- yuborish ---------------------------------------------- */

.send{margin:22px 0 36px}
.btn{
  font:700 1rem/1 "PT Sans",sans-serif;
  display:block;width:100%;
  min-height:52px;
  padding:15px 20px;border:1px solid var(--brand);border-radius:9px;
  background:var(--brand);color:var(--on-brand);cursor:pointer;
  letter-spacing:.01em;
  transition:background .14s;
}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn.ghost{
  background:transparent;color:var(--brand);border-color:var(--field-line);
  width:auto;margin-top:18px;padding:12px 20px;
}
.btn.ghost:hover{background:var(--brand-wash);border-color:var(--brand)}

/* --- ogohlantirish / natija -------------------------------- */

.notice{
  border-radius:var(--r);padding:14px 16px;margin:22px 0 0;
  font-size:.86rem;display:flex;flex-direction:column;gap:4px;
}
.notice.warn{
  background:var(--brand-wash);
  border:1px solid var(--brand);
  color:var(--ink);
}
.notice strong{font-size:.92rem}

.done{text-align:center;padding-block:34px 30px;margin-top:26px}
.done-mark{color:var(--brand);display:flex;justify-content:center;margin-bottom:12px}
.done h2{font:600 1.5rem/1.25 Lora,Georgia,serif;margin:0 0 .55em;text-wrap:balance}
.done p{margin:0 auto;color:var(--ink-soft);max-width:44ch}

.preview{margin-top:26px}
.preview h2{font:600 1.25rem/1.3 Lora,Georgia,serif;margin:0 0 .5em}
.preview p{margin:0 0 14px;color:var(--ink-soft);font-size:.9rem}
.preview pre{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:14px;overflow-x:auto;
  font:.82rem/1.55 ui-monospace,Consolas,monospace;
  white-space:pre-wrap;word-break:break-word;margin:0;
}

/* --- pastki qism ------------------------------------------- */

.foot{
  border-top:1px solid var(--line-soft);
  background:var(--surface);
  margin-top:20px;
  padding-block:26px 34px;
}
.foot-name{
  font:600 1.1rem/1.2 Lora,Georgia,serif;margin:0 0 12px;
}
.foot-name span{
  font-family:"PT Sans",sans-serif;font-size:.7rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);
  display:block;
}
.foot-list{
  list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-direction:column;gap:6px;
  font-size:.88rem;color:var(--ink-soft);
}
.foot-list a{color:var(--brand);text-decoration:none}
.foot-list a:hover{text-decoration:underline}
.foot-fine{
  margin:0;font-size:.78rem;color:var(--ink-faint);max-width:48ch;
}

/* --- menyu ------------------------------------------------- */

.menu-intro{padding-block:24px 4px}
.cat-nav{
  position:sticky;top:0;z-index:5;
  background:var(--surface);border-bottom:1px solid var(--line-soft);
}
.cat-row{
  display:flex;gap:8px;overflow-x:auto;padding-block:10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.cat-row::-webkit-scrollbar{display:none}
.cat-chip{
  flex:0 0 auto;display:flex;align-items:center;min-height:40px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--field-line);background:var(--surface-2);
  color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:700;
}
.cat-chip:hover{border-color:var(--brand);background:var(--brand-wash)}

.menu-cat{scroll-margin-top:70px;margin:18px 0 8px}
.menu-cat-h{
  font:600 1.35rem/1.2 Lora,Georgia,serif;margin:0 0 12px;
  display:flex;align-items:center;gap:10px;
}
.menu-cat-h::before{
  content:"";width:8px;height:8px;flex:0 0 auto;
  background:var(--gold);transform:rotate(45deg);
}

.dish{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);box-shadow:var(--shadow);
  padding:14px;margin:0 0 10px;
}
.dish.off{opacity:.55}
.dish-img{
  width:88px;height:88px;flex:0 0 auto;object-fit:cover;
  border-radius:8px;background:var(--surface-2);
}
.dish-body{flex:1;min-width:0}
.dish-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dish-name{font:600 1.02rem/1.3 Lora,Georgia,serif;margin:0}
.dish-price{
  flex:0 0 auto;font-weight:700;color:var(--brand);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dish-desc{margin:4px 0 0;font-size:.88rem;color:var(--ink-soft)}

.menu-empty{text-align:center;padding-block:30px;margin-top:12px}
.menu-empty h2{font:600 1.2rem/1.3 Lora,Georgia,serif;margin:0 0 .4em}
.menu-empty p{margin:0;color:var(--ink-soft)}

.feedback-link{
  display:flex;flex-direction:column;gap:4px;margin-top:22px;
  text-decoration:none;color:var(--ink);
  border-color:var(--brand);background:var(--brand-wash);
}
.feedback-link strong{font:600 1.1rem/1.3 Lora,Georgia,serif;color:var(--brand-deep)}
.feedback-link span{font-size:.9rem;color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}