/* ═══════════════════════════════════════════════════════════════
   shell.css — спільна оболонка TAINA
   Підключається ПЕРШИМ на кожній сторінці: index, gallery, services.
   Тут живуть токени теми, шапка, модалки й тост. Сторінки більше
   не описують шапку самі — через це вона й стрибала.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#0d0a08;--panel:#15100b;--panel2:#1d1610;
  --acc:#c9a876;--acc-hot:#e8c890;--acc-dim:#8f7451;
  --parchment:#ede3d0;--muted:#94836a;--line:rgba(201,168,118,.22);
  --ok:#58d668;--bad:#e5705a;
  --on-acc:#15100b;
  --mono:'JetBrains Mono',monospace;--sans:'Inter',system-ui,sans-serif;
  --hdr-h:66px;
}

/* Місце під шапку зарезервоване ДО того, як shell.js її намалює.
   Саме це прибирає стрибок контенту на старті сторінки. */
#hdr{min-height:var(--hdr-h);flex:0 0 auto}

header{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink) 92%,transparent);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:60;transition:border-color .4s,background .4s}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  min-height:var(--hdr-h);max-width:1660px;margin:0 auto;padding:10px 20px}
.nav-l{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav-c{display:flex;justify-content:center}
.nav-r{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.mark{font-family:var(--mono);font-weight:700;font-size:21px;letter-spacing:.14em;color:var(--parchment);
  display:flex;align-items:center;gap:10px;padding:10px 20px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);text-decoration:none}
.mark::after{content:'';width:9px;height:9px;background:var(--acc);transition:background .4s}
.roomtab{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.07em;color:var(--muted);
  padding:12px 18px;border:1px solid var(--line);border-radius:10px;text-transform:uppercase;transition:.15s;
  text-decoration:none;white-space:nowrap;background:transparent;cursor:pointer;line-height:1.2}
.roomtab:hover{color:var(--acc-hot);border-color:var(--acc-dim)}
.roomtab.on{color:var(--acc-hot);border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  background:color-mix(in srgb,var(--acc) 14%,transparent);cursor:default}
.nb{width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;flex:0 0 auto}
.nb svg{width:21px;height:21px}
.nb:hover{color:var(--acc-hot);border-color:var(--acc-dim)}
.nb.contacts{width:auto;padding:0 16px;font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase}
.phone-num{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.05em;color:var(--parchment);
  text-decoration:none;white-space:nowrap}
.phone-num:hover{color:var(--acc-hot)}
.nb.phone{display:none}
/* Знак-логотип замість слова taina */
.mark.logo{padding:9px 18px}
.mark.logo::after{display:none}
.mark.logo svg{height:24px;width:auto;display:block}   /* 24 = 4 модулі × 6px */

/* ═══ МОДАЛКИ: Проєкт / Тариф / Контакти ═══ */
#modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px}
#modal.hide{display:none}
#modal .mveil{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(4px)}
#modal .mcard{position:relative;z-index:2;background:var(--panel);
  border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  border-radius:16px;max-width:560px;width:100%;max-height:86vh;overflow-y:auto;padding:30px 28px 26px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);animation:mpop .2s ease}
@keyframes mpop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
#modal .mclose{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);cursor:pointer;font-size:16px;line-height:1;transition:.15s}
#modal .mclose:hover{color:var(--acc-hot);border-color:var(--acc-dim)}
#modal h2{font-size:24px;font-weight:600;color:var(--acc-hot);margin-bottom:16px;padding-right:44px}
#modal p{font-size:15px;line-height:1.66;margin-bottom:14px}
#modal p b{color:var(--acc-hot);font-weight:600}
#modal a{color:var(--acc-hot);text-decoration:underline;text-underline-offset:3px}
.copyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin:6px 0 16px}
/* Клас навмисно cardno, а не card: на сторінці «Послуги» .card — це
   квадратна картка товару, і номер картки розтягувався в такий самий квадрат. */
.copyrow .cardno{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.08em;color:var(--parchment);
  word-break:break-all;flex:1 1 auto;cursor:pointer;aspect-ratio:auto;border:0;background:transparent;padding:0}
.copyrow button{font-family:var(--mono);font-size:12.5px;font-weight:700;padding:11px 16px;border-radius:10px;
  border:1px solid var(--acc);background:var(--acc);color:var(--on-acc);cursor:pointer;transition:.15s}
.copyrow button:hover{background:var(--acc-hot);border-color:var(--acc-hot)}
.clist{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:15px}
.clist li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.clist .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-dim);
  min-width:92px;flex:0 0 auto}

#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(88px + env(safe-area-inset-bottom));
  background:var(--panel);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);color:var(--parchment);
  font-family:var(--mono);font-size:13.5px;padding:14px 20px;border-radius:12px;z-index:9500;opacity:0;pointer-events:none;
  transition:.22s;max-width:88vw;text-align:center;box-shadow:0 10px 32px rgba(0,0,0,.5)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:820px){
  :root{--hdr-h:58px}
  .nav{grid-template-columns:auto 1fr auto;gap:8px;padding:8px 12px}
  .nav-c{order:0;justify-content:flex-start}
  .nav-l{order:1;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .nav-l::-webkit-scrollbar{display:none}
  .nav-r{order:2}
  .mark{font-size:17px;padding:8px 12px;letter-spacing:.1em}
  .mark.logo{padding:8px 11px}
  .mark.logo svg{height:16px}   /* 4 модулі × 4px */
  .roomtab{padding:10px 12px;font-size:11.5px}
  .roomtab.on{display:none!important}
  .phone-num,.nb.contacts{display:none}
  .nb.phone{display:flex}
}

/* ═══ СВІТЛА ТЕМА: шапка й модалки ═══
   На світлому тлі заливки «акцент у прозорість» зливаються з фоном,
   тому активні елементи отримують суцільний акцент і світлий текст. */
body.light-mode header{background:color-mix(in srgb,var(--panel) 94%,transparent)}
body.light-mode .roomtab,
body.light-mode .nb{color:var(--parchment)}
body.light-mode .roomtab.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
body.light-mode .mark{background:var(--panel)}
body.light-mode #modal .mveil{background:rgba(40,30,15,.45)}
body.light-mode #modal .mcard{box-shadow:0 20px 60px rgba(60,45,25,.25)}
body.light-mode .copyrow{background:var(--panel2)}
body.light-mode #toast{box-shadow:0 10px 32px rgba(60,45,25,.25)}