/* ============================================================
   A2C - /grupni-casovi-engleskog/ (upis u grupe)
   Svet strane: upisnica. Krem papir sa perforiranim rubom na teget polju,
   narandžasti pečat, sedišta grupe kao krugovi oko stola.
   Sve boje iz tokena u main.css; ovde samo izvedene nijanse papira i mastila.
   ============================================================ */
.lp-body { --paper: var(--cream); --paper-line: #e6d9c7; --ink: var(--navy); --ink-soft: #55606e; --ease-out: cubic-bezier(.16, 1, .3, 1); }
::selection { background: rgba(245, 130, 13, .28); color: var(--navy); }

.gi { width: 24px; height: 24px; flex: 0 0 auto; }

.gr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gr-srv { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #8f1d14; font-size: .88rem; line-height: 1.45; animation: grFade .3s var(--ease-out); }
.gr-srv[hidden] { display: none; }
.gr-wait .gr-srv { background: rgba(248, 113, 113, .16); color: #fecaca; margin-bottom: 10px; }

/* ---------- prvi ekran ---------- */
.gr-hero { position: relative; background: var(--navy); color: #fff; padding: calc(var(--header-h) + 64px) 0 96px; overflow: hidden; isolation: isolate; }
.gr-hero::before { /* tanke linije sveske preko teget polja - papirni svet i na pozadini */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 85% 20%, rgba(245, 130, 13, .16), transparent 65%),
    repeating-linear-gradient(180deg, transparent 0 38px, rgba(255, 255, 255, .035) 38px 39px);
}
.gr-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: center; }
.gr-hero h1 { color: #fff; font-family: var(--font-heading); font-size: clamp(2.5rem, 5.6vw, 4.1rem); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 22px; text-wrap: balance; }
.gr-hero h1 em { color: var(--orange); font-style: italic; }
.gr-h1-sub { display: block; margin-top: 10px; font-family: var(--font-body); font-size: clamp(1rem, 1.7vw, 1.15rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark); }
.gr-h1-sub::before { content: ""; display: inline-block; width: 28px; height: 2px; margin: 0 12px 4px 0; background: var(--orange); vertical-align: middle; }
.gr-lede { font-size: clamp(1.05rem, 1.8vw, 1.22rem); line-height: 1.6; color: var(--text-on-dark); max-width: 46ch; margin: 0 0 34px; }
.gr-lede b { color: #fff; font-weight: 600; }
.gr-facts { list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 34px; }
.gr-facts li { display: flex; align-items: center; gap: 12px; font-size: .86rem; line-height: 1.35; color: var(--text-on-dark); }
.gr-fact-n { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.gr-fact-star .gi { width: 22px; height: 22px; color: var(--orange); fill: var(--orange); }
.gr-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 3px; transition: gap .2s var(--ease-out), border-color .2s; }
.gr-more .gi { width: 18px; height: 18px; color: var(--orange); }
.gr-more:hover, .gr-more:focus-visible { gap: 12px; border-color: var(--orange); }
.gr-more.is-dark { color: var(--navy); border-color: rgba(13, 27, 42, .3); }

/* ---------- upisnica (papir) ---------- */
.gr-slip {
  position: relative; background: var(--paper); color: var(--ink); border-radius: 6px 14px 14px 6px;
  padding: 30px 32px 26px 46px; rotate: -1.2deg;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .6) inset, 0 30px 60px -20px rgba(0, 0, 0, .55), 0 10px 22px -10px rgba(0, 0, 0, .35);
  transition: rotate .5s var(--ease-out), opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.gr-slip::before { /* perforirani levi rub */
  content: ""; position: absolute; left: 14px; top: 16px; bottom: 16px; width: 10px;
  background: radial-gradient(circle at 5px 5px, var(--navy) 3.2px, transparent 3.6px) 0 0 / 10px 20px repeat-y;
}
.gr-slip::after { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; border-left: 1px dashed var(--paper-line); }
.gr-slip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.gr-slip-head h2 { font-family: var(--font-heading); font-size: 2rem; font-style: italic; font-weight: 600; margin: 0; line-height: 1; }
.gr-slip-head p { margin: 6px 0 0; font-size: .86rem; color: var(--ink-soft); }
.gr-stamp {
  flex: 0 0 auto; display: grid; place-items: center; text-align: center; width: 98px; height: 98px; margin: -14px -8px -10px 0;
  border: 2.5px solid var(--orange); border-radius: 50%; color: var(--orange); transform: rotate(12deg);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5.5px rgba(245, 130, 13, .7);
  animation: grStamp .7s .6s var(--ease-out) both;
}
.gr-stamp b { font-family: var(--font-heading); font-size: 1.55rem; line-height: 1; margin-top: 10px; }
.gr-stamp span { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; margin-bottom: 12px; }
@keyframes grStamp { from { opacity: 0; transform: rotate(30deg) scale(1.6); } 60% { opacity: 1; transform: rotate(9deg) scale(.94); } to { opacity: 1; transform: rotate(12deg) scale(1); } }

.gr-step { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.gr-step legend { display: flex; align-items: center; gap: 9px; padding: 0; margin-bottom: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.gr-step-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: .72rem; letter-spacing: 0; }

.gr-rows { display: grid; gap: 8px; }
.gr-row {
  position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; border-radius: 10px; background: rgba(255, 255, 255, .55); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--paper-line); transition: box-shadow .2s var(--ease-out), background-color .2s, transform .2s var(--ease-out);
}
.gr-row input { position: absolute; opacity: 0; pointer-events: none; }
.gr-row:hover { background: #fff; transform: translateX(3px); }
.gr-row.on { background: #fff; box-shadow: inset 0 0 0 2px var(--orange), 0 10px 20px -14px rgba(13, 27, 42, .5); }
.gr-row:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.gr-date { display: grid; place-items: center; height: 54px; border-radius: 8px; background: var(--ink); color: #fff; line-height: 1; }
.gr-date b { font-family: var(--font-heading); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.gr-date span { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-dark); margin-top: -4px; }
.gr-row.on .gr-date { background: var(--orange); }
.gr-row.on .gr-date span { color: var(--navy); }
.gr-row-main { min-width: 0; display: grid; gap: 3px; }
.gr-row-t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; }
.gr-lvl { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--cream-dark); font-size: .76rem; font-weight: 700; color: var(--ink); }
.gr-row-s { font-size: .84rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-seats { display: grid; justify-items: end; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.gr-seats.last { color: #b45309; }
.gr-dots { display: flex; gap: 3px; }
.gr-dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9b9a4; }
.gr-dots i.t { background: var(--ink); box-shadow: none; }
.gr-row.on .gr-dots i.me { background: var(--orange); box-shadow: none; }
.gr-row.full { cursor: not-allowed; opacity: .55; background: transparent; }
.gr-row.full:hover { transform: none; background: transparent; }
.gr-row.full .gr-date { background: #8a94a1; }
.gr-teacher-gen { display: grid; place-items: center; background: var(--navy); color: #fff; }
.gr-teacher-gen .gi { width: 40px; height: 40px; }
.gr-coupons.is-one { grid-template-columns: minmax(0, 640px); }

.gr-line { position: relative; display: block; margin-bottom: 12px; }
.gr-line > span { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; }
.gr-line input {
  width: 100%; height: 40px; padding: 0 2px; border: 0; border-bottom: 1.5px solid #cdbca6; background: transparent;
  font: 500 1.05rem var(--font-body); color: var(--ink); border-radius: 0; transition: border-color .2s; caret-color: var(--orange);
}
.gr-line input:focus { outline: none; border-color: var(--orange); }
.gr-line::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.gr-line:focus-within::after { transform: scaleX(1); }
.gr-err { display: none; margin-top: 5px; font-style: normal; font-size: .8rem; color: #b42318; }
.gr-line.bad input { border-color: #b42318; }
.gr-line.bad .gr-err { display: block; }
.gr-line.bad { animation: grShake .32s; }
@keyframes grShake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }

.gr-go {
  width: 100%; min-height: 56px; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: 600 1.05rem var(--font-body); cursor: pointer;
  box-shadow: 0 12px 24px -12px rgba(13, 27, 42, .7); transition: background-color .2s, transform .15s var(--ease-out), box-shadow .2s;
}
.gr-go .gi { width: 20px; height: 20px; color: var(--orange); transition: transform .25s var(--ease-out); }
.gr-go:hover { background: var(--navy-light); }
.gr-go:hover .gi { transform: translateX(4px); }
.gr-go:active { transform: scale(.98); }
.gr-go:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.gr-go[disabled] { opacity: .7; cursor: progress; }
.gr-go.is-orange { background: var(--orange); color: var(--navy); }
.gr-go.is-orange .gi { color: var(--navy); }
.gr-go.is-orange:hover { background: var(--orange-hover); }
.gr-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: var(--orange); animation: grSpin .7s linear infinite; }
@keyframes grSpin { to { transform: rotate(360deg); } }
.gr-slip-foot { margin: 12px 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }

.gr-slip-empty { display: flex; gap: 14px; align-items: flex-start; padding: 14px; margin-bottom: 16px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--paper-line); }
.gr-slip-empty p { margin: 0; font-size: .92rem; line-height: 1.5; }
.gr-empty-ic { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--orange-glow); color: var(--orange); }

.gr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-chip { position: relative; cursor: pointer; }
.gr-chip input { position: absolute; opacity: 0; pointer-events: none; }
.gr-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: .9rem; font-weight: 500; background: #fff; box-shadow: inset 0 0 0 1px var(--paper-line); transition: background-color .2s, color .2s, box-shadow .2s, transform .15s var(--ease-out); }
.gr-chip:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.gr-chip input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.gr-chip input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.gr-chip:active span { transform: scale(.96); }

/* uspeh: pečat pada na papir */
.gr-done { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 32px; text-align: center; border-radius: inherit; background: rgba(253, 248, 242, .94); backdrop-filter: blur(2px); }
.gr-done[hidden] { display: none; }
.gr-done-stamp { padding: 10px 26px; border: 3px solid var(--orange); border-radius: 10px; color: var(--orange); font-family: var(--font-heading); font-size: 2.6rem; font-style: italic; font-weight: 700; transform: rotate(-9deg); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--orange); animation: grLand .55s var(--ease-out) both; }
@keyframes grLand { from { opacity: 0; transform: rotate(-24deg) scale(2.2); } 70% { opacity: 1; transform: rotate(-7deg) scale(.92); } to { transform: rotate(-9deg) scale(1); } }
.gr-done-t { margin: 0; max-width: 32ch; font-size: 1.02rem; line-height: 1.55; }
.gr-again { border: 0; background: none; font: 600 .92rem var(--font-body); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
.gr-again:hover { color: var(--orange-hover); }

/* ---------- sekcije ---------- */
.gr-sec { padding: 96px 0; }
.gr-h2 { font-family: var(--font-heading); font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.12; letter-spacing: -.015em; color: var(--navy); margin: 0 0 16px; text-wrap: balance; }
.gr-h2 em { color: var(--orange); font-style: italic; }
.gr-h2.is-c { text-align: center; margin-bottom: 36px; }
.gr-p { font-size: 1.05rem; line-height: 1.7; color: var(--text); max-width: 58ch; margin: 0 0 24px; }
.gr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }

/* sto grupe */
.gr-table-sec { background: var(--cream); }
.gr-table { position: relative; justify-self: center; width: min(100%, 440px); }
.gr-table-top { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
.gr-table-lvl { display: grid; place-items: center; min-width: 40px; height: 28px; border-radius: 8px; background: var(--navy); color: #fff; font-size: .85rem; }
.gr-ring { --r: 150px; position: relative; aspect-ratio: 1; width: 100%; max-width: 400px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, #fff 0 46%, transparent 46.4%), repeating-conic-gradient(from 0deg, transparent 0 6deg, rgba(13, 27, 42, .04) 6deg 12deg); box-shadow: inset 0 0 0 1px var(--paper-line); }
.gr-seat {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  transform: rotate(calc(var(--k) * 60deg - 90deg)) translate(var(--r)) rotate(calc(var(--k) * -60deg + 90deg));
  background: var(--cream); box-shadow: inset 0 0 0 2px #cdbca6; transition: background-color .35s var(--ease-out), box-shadow .35s, transform .5s var(--ease-out);
}
.gr-seat.t { background: var(--navy); box-shadow: 0 8px 16px -8px rgba(13, 27, 42, .6); }
.gr-seat.t::after { content: ""; position: absolute; inset: 20px 22px 26px; border-radius: 50%; background: rgba(255, 255, 255, .22); box-shadow: 0 16px 0 4px rgba(255, 255, 255, .14); }
.gr-seat.me { background: var(--orange); box-shadow: 0 0 0 6px var(--orange-glow), 0 10px 20px -8px rgba(245, 130, 13, .8); animation: grPulse 2.4s ease-in-out infinite; }
.gr-seat.me::after { content: "ti"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: 1.3rem; color: var(--navy); }
@keyframes grPulse { 50% { box-shadow: 0 0 0 12px rgba(245, 130, 13, .08), 0 10px 20px -8px rgba(245, 130, 13, .8); } }
.gr-teacher { position: absolute; left: 50%; top: 50%; width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px #fff, 0 0 0 6.5px var(--paper-line), 0 18px 30px -14px rgba(13, 27, 42, .5); }
.gr-teacher[hidden] { display: none; }
.gr-teacher img { width: 100%; height: 100%; object-fit: cover; }
.gr-table-cap { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 20px 0 0; font-size: .82rem; color: var(--ink-soft); }
.gr-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #cdbca6; margin-left: 8px; }
.gr-key.t { background: var(--navy); box-shadow: none; margin-left: 0; }
.gr-key.me { background: var(--orange); box-shadow: none; }

.gr-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.gr-gets li { display: flex; gap: 14px; align-items: flex-start; line-height: 1.55; }
.gr-gets .gi { color: var(--orange); margin-top: 1px; }
.gr-gets b { color: var(--navy); font-weight: 600; }

/* cena */
.gr-price-sec { background: #fff; }
.gr-price-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 64px; align-items: start; }
.gr-price-head { grid-row: span 2; padding-top: 4px; }
.gr-bars { display: grid; gap: 14px; }
.gr-bar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 0 22px; border-radius: 12px; isolation: isolate; color: var(--navy); }
.gr-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; width: var(--w); border-radius: inherit; background: var(--cream-dark); transform-origin: left; transition: transform 1.1s var(--ease-out); }
html.js .gr-bars:not(.visible) .gr-bar::before { transform: scaleX(.04); }
.gr-bar:nth-child(2)::before { transition-delay: .12s; }
.gr-bar:nth-child(3)::before { transition-delay: .24s; }
.gr-bar.is-best::before { background: var(--navy); }
.gr-bar.is-best .gr-bar-l { color: #fff; }
.gr-bar.is-best .gr-bar-v { color: var(--navy); }
.gr-bar-l { font-weight: 600; }
.gr-bar-v { font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gr-bar-v b { font-family: var(--font-heading); font-size: 1.6rem; }
.gr-bar.is-best .gr-bar-v b { color: var(--orange-hover); }
.gr-month { display: flex; gap: 16px; align-items: flex-start; margin-top: 10px; padding: 22px 24px; border-radius: 14px; background: var(--cream); }
.gr-month .gi { color: var(--orange); }
.gr-month p { margin: 0; line-height: 1.65; }
.gr-hl { color: var(--navy); background: linear-gradient(transparent 58%, rgba(245, 130, 13, .35) 58%); padding: 0 2px; }

/* kuponi */
.gr-coupons-sec { background: var(--cream); padding-top: 88px; }
.gr-coupons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.gr-coupon {
  position: relative; display: flex; gap: 22px; align-items: center; padding: 28px 30px; border-radius: 16px; background: #fff;
  outline: 2px dashed #cdbca6; outline-offset: -10px; box-shadow: 0 18px 36px -24px rgba(13, 27, 42, .45); transition: transform .3s var(--ease-out), box-shadow .3s;
}
.gr-coupon:hover { transform: rotate(-.6deg) translateY(-3px); box-shadow: 0 24px 40px -22px rgba(13, 27, 42, .5); }
.gr-coupon h3 { font-family: var(--font-heading); font-size: 1.45rem; margin: 0 0 6px; color: inherit; }
.gr-coupon p { margin: 0; line-height: 1.55; }
.gr-coupon-big { flex: 0 0 auto; display: grid; place-items: center; min-width: 104px; font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; color: var(--orange); line-height: 1; }
.gr-coupon-big .gi { width: 56px; height: 56px; stroke-width: 1.3; }
.gr-cut { position: absolute; top: -13px; left: 34px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cream); color: #b8a68f; }
.gr-cut .gi { width: 18px; height: 18px; }
.gr-coupon.is-navy { background: var(--navy); color: #fff; outline-color: rgba(255, 255, 255, .25); }
.gr-coupon.is-navy p { color: var(--text-on-dark); }

/* predavači */
.gr-team-sec { background: #fff; }
.gr-split.is-rev { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.gr-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gr-team figure { margin: 0; }
.gr-team figure:nth-child(2) { margin-top: 48px; }
.gr-team picture, .gr-team img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 16px; }
.gr-team figcaption { display: grid; gap: 2px; margin-top: 12px; }
.gr-team figcaption b { font-family: var(--font-heading); font-size: 1.2rem; color: var(--navy); }
.gr-team figcaption span { font-size: .9rem; color: var(--text-light); }

/* lista čekanja */
.gr-wait-sec { background: var(--cream); padding-top: 0; }
.gr-wait { position: relative; margin-top: -48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 48px; box-shadow: 0 30px 50px -30px rgba(13, 27, 42, .55); border-radius: 24px; background: var(--navy); color: #fff; }
.gr-wait .gr-h2 { color: #fff; margin-top: 18px; }
.gr-wait .gr-p { color: var(--text-on-dark); margin: 0; }
.gr-wait fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.gr-wait legend { font-size: .82rem; font-weight: 600; color: var(--text-on-dark); margin-bottom: 10px; padding: 0; }
.gr-wait .gr-chip span { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--border-dark); }
.gr-wait .gr-chip:hover span { box-shadow: inset 0 0 0 1.5px var(--orange); }
.gr-wait .gr-chip input:checked + span { background: var(--orange); color: var(--navy); }
.gr-line.is-dark > span { color: var(--text-on-dark); }
.gr-line.is-dark input { color: #fff; border-color: var(--border-dark); }
.gr-line.is-dark .gr-err { color: #fca5a5; }
.gr-wait-ok { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(34, 197, 94, .14); color: #bbf7d0; font-weight: 500; animation: grFade .35s var(--ease-out); }
.gr-wait-ok[hidden] { display: none; }
.gr-wait-ok .gi { color: #4ade80; }
@keyframes grFade { from { opacity: 0; transform: translateY(6px); } }

.gr-also { text-align: center; margin: 28px 0 0; color: var(--text-light); }
.gr-also a, .gr-p a { color: var(--orange-hover); text-underline-offset: 3px; }
.gr-final-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- telefon ---------- */
@media (max-width: 1080px) {
  .gr-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .gr-slip { max-width: 560px; rotate: none; }
  .gr-split, .gr-split.is-rev { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .gr-split.is-rev .gr-team { order: -1; }
  .gr-price-grid { grid-template-columns: minmax(0, 1fr); }
  .gr-price-head { grid-row: auto; }
  .gr-wait { grid-template-columns: minmax(0, 1fr); padding: 36px 28px; gap: 28px; }
}
@media (max-width: 1080px) {
  /* telefon: upisnica odmah ispod naslova i jedne rečenice, činjenice posle nje */
  .gr-hero-copy { display: contents; }
  .gr-hero h1 { order: 1; margin-bottom: 0; }
  .gr-lede { order: 2; margin: -16px 0 0; }
  .gr-slip { order: 3; }
  .gr-facts { order: 4; margin: 0; }
  .gr-more { order: 5; justify-self: start; }
}
@media (max-width: 640px) {
  .gr-hero { padding: calc(var(--header-h) + 32px) 0 64px; }
  .gr-hero-grid { gap: 30px; }
  .gr-lede { margin-top: -8px; font-size: 1rem; }
  .gr-date span { font-size: .56rem; letter-spacing: .02em; white-space: nowrap; }
  .gr-facts { gap: 14px 22px; }
  .gr-fact-n { font-size: 1.6rem; }
  .gr-slip { padding: 22px 16px 20px 34px; margin: 0 -4px; }
  .gr-slip::before { left: 9px; }
  .gr-slip::after { left: 23px; }
  .gr-slip-head h2 { font-size: 1.7rem; }
  .gr-stamp { width: 80px; height: 80px; margin: -10px -4px -8px 0; }
  .gr-stamp b { font-size: 1.25rem; }
  .gr-stamp span { font-size: .55rem; }
  .gr-row { grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 9px 10px 9px 8px; }
  .gr-date { height: 50px; }
  .gr-seats { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; gap: 8px; }
  .gr-sec { padding: 68px 0; }
  .gr-ring { --r: 118px; }
  .gr-seat { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .gr-seat.t::after { inset: 16px 18px 21px; box-shadow: 0 13px 0 3px rgba(255, 255, 255, .14); }
  .gr-teacher { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .gr-bar { min-height: 56px; padding: 0 14px; }
  .gr-bar-l { font-size: .9rem; }
  .gr-bar-v b { font-size: 1.3rem; }
  .gr-coupons { grid-template-columns: minmax(0, 1fr); }
  .gr-coupon { padding: 24px 22px; gap: 16px; }
  .gr-coupon-big { min-width: 72px; font-size: 2.1rem; }
  .gr-coupon-big .gi { width: 44px; height: 44px; }
  .gr-team figure:nth-child(2) { margin-top: 28px; }
  .gr-wait { padding: 30px 20px; border-radius: 18px; }
}
@media (max-width: 380px) {
  .gr-ring { --r: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-slip { rotate: none; }
  .gr-stamp, .gr-done-stamp, .gr-seat.me { animation: none; }
  .gr-bar::before { transition: none; }
  html.js .gr-bars:not(.visible) .gr-bar::before { transform: none; }
}