/* ═══════════════════════════════════════════════════════════════════
   TOPLINA — the application's visual language (CGP v5.2)

   The app speaks more softly than the landing page: large rounded
   corners, photographic cards, pills, a soft shadow. The palette stays
   Termina's (paper, brass, ink); only the shapes change.

   This file loads after postavitev.css on application pages (najdi,
   moj, skupnost, ponudnik, plosca, rezervacija) and overrides three
   rules from CGP §1 there: the radius ceiling, the tiles and the ban
   on shadows. The landing page keeps the Orrerij treatment.

   The app reads as calm as the website, not louder: dark scrims and
   caramel surfaces gave way to paper. Photography lives in the card's
   upper band, text is ink on paper as on the site, the selected state
   is brass as on the site, and the shadow is quieter.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --r-kartica:26px;            /* kartice kot v referenci */
  --r-drobno:16px;             /* kontrole */
  --r-foto:18px;               /* fotografska polja */
  --senca:0 6px 22px rgba(23,27,46,.05), 0 1px 4px rgba(23,27,46,.04);
  /* novi žetoni v5.2 — topla lestvica za fotografske kartice */
  --pesek:#E8D9C0;             /* svetli konec tople ploskve */
  --karamela:#C89B6D;          /* temni konec tople ploskve */
  --pesek-2:#DFCBAD;           /* tihi temnejši konec ploskve */
}

/* kartice: mehka senca namesto gravure, več zraka */
.card,.pcard,.plan,.pplan,.panel,.auth-card,.sestavi,.pravno-kazalo{
  box-shadow:var(--senca);border-color:rgba(23,27,46,.06)
}

/* gumbi so tabletke; tarče ostanejo ≥ 44 px */
.btn,.tab,.cat,.time,.pill{border-radius:999px}
.btn{padding:12px 22px}
.tab{padding:10px 18px}

/* vnosna polja: mehko zaobljena, tiha obroba */
input,textarea,select{border-radius:var(--r-drobno)}

/* kartica salona: fotografija (ali tiha topla ploskev) živi v zgornjem
   pasu, besedilo je črnilo na papirju — isti občutek kot stran */
.pcard{position:relative;overflow:hidden;padding:0;min-height:210px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-color:var(--plosca-hi,#FFFDF9);
  background-image:none;background-color:var(--pesek);
  background-repeat:no-repeat;background-size:cover;background-position:center top}
.pcard .phead{margin:0;padding:14px 16px 4px;background:var(--plosca-hi,#FFFDF9)}
.pcard .pav{position:absolute;top:14px;left:14px;z-index:1;box-shadow:var(--senca)}
.pcard .pav ~ .ptext{margin-left:0}
.pcard .rate{margin:0;padding:2px 16px 14px;background:var(--plosca-hi,#FFFDF9)}
.pcard .rate .star{color:var(--medenina)}

/* mreže fotografij: večji zamik, mehkejši vogali */
.obj-grid{gap:10px}
.obj-grid .celica{border-radius:var(--r-foto)}
#foto-grid{gap:10px}
#foto-grid > div{border-radius:var(--r-foto) !important}

/* zgornji trak z velikim pozdravom pusti dihati */
main > h1:first-of-type,#acc-name,#dash-name{letter-spacing:-.02em}

/* preklopi in izbirniki tudi na plošči tabletke */
.bill-toggle button{border-radius:999px}

/* ── proste ure na kartici seznama (referenca 2) ─────────────────────
   Tabletke so obvestilo, ne gumbi: kartica je ena sama povezava in
   gnezdenje povezav ni dovoljeno. Klik na kartico odpre profil, kjer
   so ure žive. */
.pcard .ure{display:flex;flex-wrap:wrap;gap:8px;
  padding:2px 16px 6px;background:var(--plosca-hi,#FFFDF9)}
/* Proste ure so v seznamu edini kategorijin znak: tihi ton skupine z njenim
   akcentom kot besedilom. Barva tu ni okras — po njej se seznam bere po
   dejavnosti, še preden obiskovalka prebere kategorijo. */
.pcard .ure span{font-family:var(--num);font-size:var(--t-xs);letter-spacing:.02em;
  background:var(--kat-tih);color:var(--kat-na-tihem);border:1px solid transparent;
  border-radius:999px;padding:7px 14px}

/* ── profil ponudnika: fotografija v zgornjem pasu, ime na papirju ── */
.pkartica{position:relative;overflow:hidden;border-radius:var(--r-kartica);
  min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;
  background-color:var(--plosca-hi,#FFFDF9);
  background-image:none;background-color:var(--pesek);
  background-repeat:no-repeat;background-size:cover;background-position:center top;
  box-shadow:var(--senca);padding:0}
.pkartica .avatar{position:absolute;top:16px;left:16px;box-shadow:var(--senca)}
.pkartica[data-slika] .avatar{display:none}
.pkartica .pkartica-t{padding:16px 20px 18px;background:var(--plosca-hi,#FFFDF9)}

/* ── mikrointerakcije: odziv na dotik, mehak dvig, vzmet ───────────── */
@media(prefers-reduced-motion:no-preference){
  .btn,.tab,.cat,.time,.pcard,.obj-grid .celica{
    transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,
      border-color .15s,background .15s,color .15s}
  .btn:active,.tab:active,.cat:active,.time:active{transform:scale(.96)}
  .pcard:hover,.pcard:focus-visible{transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(23,27,46,.08), 0 2px 6px rgba(23,27,46,.05)}
  .obj-grid .celica:active{transform:scale(.97)}
}

/* ── izbira dneva kot kartice (referenca »Courts«) ───────────────────
   Izbrani dan je medeninast — isti poudarek kot gumbi na strani;
   ostali so tihe bele kartice. Vnos datuma ostane za dneve naprej. */
.dnevi{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;
  scrollbar-width:none}
.dnevi::-webkit-scrollbar{display:none}
.dnevi .dan{flex:0 0 auto;min-width:64px;min-height:72px;border-radius:var(--r-foto);
  border:1px solid var(--meja);background:var(--plosca-hi,#FFFDF9);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--num);color:var(--slonovina)}
.dnevi .dan b{font-size:var(--t-xl);font-weight:600;line-height:1}
.dnevi .dan span{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--telo-2)}
.dnevi .dan.sel{background:var(--medenina);border-color:var(--medenina)}
.dnevi .dan.sel b,.dnevi .dan.sel span{color:var(--na-tanu,#FCF8F0)}
@media(prefers-reduced-motion:no-preference){
  .dnevi .dan{transition:transform .22s cubic-bezier(.22,1,.36,1),background .15s,border-color .15s}
  .dnevi .dan:active{transform:scale(.95)}
}

/* Selected state is brass everywhere — the same language as site buttons. */
.pill.sel,.tab.on,.cat.on{background:var(--medenina);border-color:var(--medenina);color:var(--na-tanu,#FCF8F0)}
/* No opacity — see the same rule in podoba.css. */
.pill.sel small{color:var(--na-tanu,#FCF8F0)}

/* ── swipe with snapping ────────────────────────────────────────────
   Horizontal strips page under the finger and snap to an element:
   days, categories, hours on a card, photographs. Built on native
   scroll-snap rather than script, so it keeps the device's own
   momentum, works from the keyboard and never stutters. */
.dnevi,.cats,.pcard .ure{scroll-snap-type:x proximity}
.dnevi .dan,.cats .cat,.pcard .ure span{scroll-snap-align:start}
.cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.cats::-webkit-scrollbar{display:none}
.pcard .ure{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pcard .ure::-webkit-scrollbar{display:none}

/* fotografije na profilu salona in v skupnosti: na telefonu vodoravni
   swipe trak, na širokem ostane mreža */
@media(max-width:640px){
  #foto-grid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding-bottom:8px}
  #foto-grid::-webkit-scrollbar{display:none}
  #foto-grid > div{flex:0 0 72%;scroll-snap-align:center;aspect-ratio:1}
}

/* ── uvod ob prvem vstopu (onboarding; pin 3) ────────────────────────
   Tri liste v swipe traku s pripenjanjem, papir na papirju, medenina
   samo na dejanjih. Pokaže se enkrat; Esc ali Preskoči ga konča. */
/* podlago in zameglitev nosi pravilo NADSLOJI v podoba.css */
.uvod{position:fixed;inset:0;z-index:80;
  display:flex;flex-direction:column}
.uvod-trak{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.uvod-trak::-webkit-scrollbar{display:none}
.uvod-list{flex:0 0 100%;scroll-snap-align:center;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 28px;gap:14px}
.uvod-znak{width:64px;height:64px}
.uvod-list h2{font-family:var(--display);font-weight:600;font-size:var(--t-2xl);
  color:var(--slonovina);letter-spacing:-.02em}
.uvod-list p{max-width:38ch;color:var(--telo);font-size:var(--t-base);line-height:1.6}
.uvod-kat{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:420px}
.uvod-noga{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 22px calc(20px + env(safe-area-inset-bottom,0))}
.uvod-noga .btn-link{min-height:44px;color:var(--telo-2)}
.uvod-pike{display:flex;gap:8px}
.uvod-pike span{width:8px;height:8px;border-radius:50%;background:var(--meja)}
.uvod-pike span.on{background:var(--medenina)}
.uvod .btn-p{background:var(--medenina);border-color:var(--medenina);color:var(--na-tanu,#FCF8F0)}