/* Moja zóna – glass layer (v0.9). Loaded last; changes surfaces, not layout.
   Cool, slightly saturated backdrop; frosted translucent panels; translucent toggle controls;
   one entrance motion per screen. Everything still works without backdrop-filter or motion. */

:root {
  --g-bg: #e6eef9;
  --g-azure: 213 92% 68%;
  --g-indigo: 232 78% 74%;
  --g-teal: 188 70% 70%;
  --g-navy: 13 42 74;            /* rgb triplet: shadows and dark glass */
  --g-glass: rgb(255 255 255 / 62%);
  --g-glass-hi: rgb(255 255 255 / 78%);
  --g-glass-lo: rgb(255 255 255 / 42%);
  --g-edge: rgb(255 255 255 / 78%);
  --g-line: rgb(var(--g-navy) / 10%);
  --g-shadow: 0 1px 0 rgb(255 255 255 / 85%) inset, 0 24px 48px -30px rgb(var(--g-navy) / 45%), 0 2px 6px -2px rgb(var(--g-navy) / 10%);
  --g-blur: blur(20px) saturate(170%);
  --g-r: 22px;
  --g-r-ctl: 14px;
  --g-ease: cubic-bezier(.2, .75, .2, 1);
  --rule: rgb(var(--g-navy) / 12%);
  --paper: rgb(255 255 255 / 55%);
}

/* ---------- backdrop ---------- */
html { background: var(--g-bg); }
body {
  background:
    radial-gradient(60vmax 50vmax at 8% -6%, hsl(var(--g-azure) / .55), transparent 62%),
    radial-gradient(52vmax 44vmax at 100% 18%, hsl(var(--g-indigo) / .42), transparent 64%),
    radial-gradient(48vmax 40vmax at 30% 108%, hsl(var(--g-teal) / .34), transparent 66%),
    linear-gradient(180deg, #eaf1fb 0%, #e3ecf8 100%);
  background-attachment: fixed;
}

/* ---------- glass surfaces ---------- */
.card, .chatbox, .fin-sec, .person, .offer-row, .ver, .main-col > .sec, .sticker, .journey, .hero,
.dgp-sec, .dgp-sum > div, .login, .entry, .pw-card, .facts, .note, .empty, .dg-sec, .dg-sum {
  background: linear-gradient(140deg, var(--g-glass-hi), var(--g-glass));
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-shadow);
  border-radius: var(--g-r);
}
.main-col > .sec { border-radius: var(--g-r); }
.sticker { border-top: 1px solid var(--g-edge); }
.facts { background: linear-gradient(140deg, var(--g-glass), var(--g-glass-lo)); }
.facts > div + div { border-left-color: rgb(var(--g-navy) / 10%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .chatbox, .fin-sec, .person, .offer-row, .ver, .main-col > .sec, .sticker, .journey, .hero,
  .dgp-sec, .dgp-sum > div, .login, .entry, .pw-card, .facts, .note, .empty, .dg-sec, .dg-sum { background: rgb(255 255 255 / 94%); }
}

/* top bar: dark navy glass */
.top {
  background: rgb(var(--g-navy) / 78%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}
.top .brand-logo { filter: drop-shadow(0 1px 0 rgb(255 255 255 / 35%)); }
.top .brand .sub { color: rgb(255 255 255 / 82%); }
#nav a, #nav button { border-radius: 999px; transition: background-color .2s var(--g-ease), color .2s; }
#nav a[aria-current="page"] { background: rgb(255 255 255 / 16%); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%); }
#nav a:hover, #nav button:hover { background: rgb(255 255 255 / 12%); color: #fff; }
@media (min-width: 761px) {
  .top { background: rgb(var(--g-navy) / 72%); }
  #nav a, #nav button { color: rgb(255 255 255 / 88%); }
}
.banner { background: rgb(255 244 222 / 70%); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border-bottom: 1px solid rgb(255 255 255 / 60%); }
.foot { color: rgb(var(--g-navy) / 70%); }

/* ---------- translucent toggle controls ---------- */
/* Section navigation: a frosted track with pill items; the hovered/focused item becomes a brighter capsule. */
.secnav {
  background: rgb(255 255 255 / 46%);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  border-radius: 999px;
  box-shadow: var(--g-shadow);
  padding: 6px;
}
.secnav a { border-radius: 999px; transition: background-color .25s var(--g-ease), box-shadow .25s var(--g-ease), color .2s; }
.secnav a:hover, .secnav a:focus-visible, .secnav a.on {
  background: rgb(255 255 255 / 85%);
  box-shadow: 0 6px 16px -10px rgb(var(--g-navy) / 45%), inset 0 0 0 1px rgb(255 255 255 / 90%);
  color: var(--ink);
}
/* Equipment / technical data: a segmented switch with a sliding glass thumb. */
.eq-tabs {
  position: relative; display: inline-flex; gap: 0; border: 1px solid var(--g-edge); border-bottom: 1px solid var(--g-edge);
  background: rgb(var(--g-navy) / 6%); border-radius: 999px; padding: 4px; margin: 8px 0 16px;
  box-shadow: inset 0 1px 2px rgb(var(--g-navy) / 10%);
}
.eq-tabs [role="tab"] {
  position: relative; z-index: 1; border: 0; margin: 0; border-radius: 999px; padding: 9px 18px;
  color: var(--ink-2); transition: color .25s var(--g-ease);
}
.eq-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom: 0; }
.eq-tabs .seg-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 999px;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 8px 18px -10px rgb(var(--g-navy) / 50%), inset 0 0 0 1px rgb(255 255 255 / 95%);
  transition: transform .38s var(--g-ease), width .38s var(--g-ease);
}
.eq-tabs:not(.has-thumb) [role="tab"][aria-selected="true"] { background: rgb(255 255 255 / 90%); box-shadow: 0 6px 14px -10px rgb(var(--g-navy) / 50%); }

/* phone bars */
.tabbar, .offer-bar {
  background: rgb(255 255 255 / 66%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid var(--g-edge);
  box-shadow: 0 -10px 30px -22px rgb(var(--g-navy) / 45%);
}
.tabbar a[aria-current="page"] { background: rgb(255 255 255 / 80%); box-shadow: 0 6px 14px -10px rgb(var(--g-navy) / 45%); }

/* ---------- controls ---------- */
.btn { border-radius: var(--g-r-ctl); transition: transform .18s var(--g-ease), box-shadow .25s var(--g-ease), background-color .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary { background: linear-gradient(180deg, #d81a39, #b80e2a); border-color: #b80e2a; box-shadow: 0 10px 22px -12px rgb(200 16 46 / 70%), inset 0 1px 0 rgb(255 255 255 / 25%); }
.btn.primary:hover { background: linear-gradient(180deg, #c8102e, #a00c24); }
.btn.ghost {
  background: rgb(255 255 255 / 52%); border-color: rgb(255 255 255 / 85%);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 6px 16px -12px rgb(var(--g-navy) / 45%), inset 0 0 0 1px rgb(var(--g-navy) / 8%);
}
.btn.ghost:hover { background: rgb(255 255 255 / 82%); border-color: #fff; }
.btn:not(.primary):not(.ghost) { background: linear-gradient(180deg, #1b3a5c, #0f2742); border-color: #0f2742; }
input, textarea, select {
  background: rgb(255 255 255 / 70%); border-color: rgb(var(--g-navy) / 22%);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { background: #fff; box-shadow: 0 0 0 4px rgb(29 95 209 / 18%); }
.status, .hero-chips li, .chip, .count {
  background: rgb(255 255 255 / 60%); border: 1px solid rgb(255 255 255 / 85%);
  box-shadow: inset 0 0 0 1px rgb(var(--g-navy) / 6%);
}
.notice { background: rgb(233 241 252 / 72%); border-color: rgb(255 255 255 / 80%); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border-radius: var(--g-r-ctl); }

/* ---------- the stage: the car floats on a coloured glow ---------- */
.hero-media {
  background:
    radial-gradient(70% 55% at 50% 72%, hsl(var(--g-azure) / .55), transparent 70%),
    radial-gradient(60% 50% at 70% 30%, hsl(var(--g-indigo) / .35), transparent 70%),
    linear-gradient(160deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 30%));
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
  overflow: hidden;
}
.hero-media .car.hero-img { background: transparent; filter: drop-shadow(0 26px 22px rgb(var(--g-navy) / 28%)); }
.hero-media::after { background: radial-gradient(closest-side, rgb(var(--g-navy) / 28%), transparent); }
.hero-3d { background: rgb(255 255 255 / 70%); border-color: rgb(255 255 255 / 90%); -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); }
.offer-row .car.thumb { background: radial-gradient(70% 60% at 50% 70%, hsl(var(--g-azure) / .35), transparent 72%), rgb(255 255 255 / 45%); border-radius: 14px; }

/* 3D card: deep glass with a light sweep on hover */
.cfg-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgb(15 42 74 / 92%), rgb(31 78 140 / 88%));
  border: 1px solid rgb(255 255 255 / 18%);
  box-shadow: 0 18px 40px -22px rgb(var(--g-navy) / 70%), inset 0 1px 0 rgb(255 255 255 / 18%);
  transition: transform .25s var(--g-ease), box-shadow .25s var(--g-ease);
}
.cfg-card::after {
  content: ""; position: absolute; inset: -40% auto -40% -30%; width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 22%), transparent);
  transform: translateX(-120%) skewX(-12deg); pointer-events: none;
}
.cfg-card:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -22px rgb(var(--g-navy) / 75%), inset 0 1px 0 rgb(255 255 255 / 22%); }
.cfg-card:hover::after { transition: transform .9s var(--g-ease); transform: translateX(380%) skewX(-12deg); }
.cfg-card:hover { background: linear-gradient(135deg, rgb(15 42 74 / 94%), rgb(36 90 160 / 90%)); }

/* call button and contact actions */
.cact { background: rgb(255 255 255 / 55%); border-color: rgb(255 255 255 / 88%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .2s var(--g-ease), background-color .2s, box-shadow .2s; }
.cact:hover { background: rgb(255 255 255 / 85%); transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgb(var(--g-navy) / 50%); }
.cact.call { background: linear-gradient(180deg, #d81a39, #b80e2a); box-shadow: 0 12px 24px -14px rgb(200 16 46 / 75%); }
.cact .ci { background: rgb(var(--g-navy) / 6%); }

/* cards that are links lift slightly */
.offer-row { transition: transform .25s var(--g-ease), box-shadow .25s var(--g-ease), background-color .25s; }
.offer-row:hover { transform: translateY(-2px); background: linear-gradient(140deg, rgb(255 255 255 / 88%), rgb(255 255 255 / 66%)); border-color: #fff; box-shadow: 0 1px 0 #fff inset, 0 28px 50px -30px rgb(var(--g-navy) / 55%); }

/* equipment highlights and lists */
.hl li { background: rgb(255 255 255 / 55%); border-color: rgb(255 255 255 / 90%); box-shadow: inset 0 0 0 1px rgb(var(--g-navy) / 5%); border-radius: 14px; }
.eq-g, .disclosures > details { border-top-color: rgb(var(--g-navy) / 10%); }
.eq-a { background: rgb(255 255 255 / 70%); border-color: rgb(var(--g-navy) / 12%); }
.td > div { border-bottom-color: rgb(var(--g-navy) / 9%); }

/* expanding sections open smoothly (where supported) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height .35s var(--g-ease), content-visibility .35s allow-discrete; }
  details[open]::details-content { height: auto; }
}
summary { transition: color .2s; }
summary:hover { color: var(--ink); }

/* chat */
.chat { background: rgb(var(--g-navy) / 4%); }
.msg.staff { background: rgb(255 255 255 / 80%); border-color: rgb(255 255 255 / 95%); box-shadow: 0 6px 14px -12px rgb(var(--g-navy) / 45%); }
.msg.customer { background: linear-gradient(180deg, #1b3a5c, #0f2742); }

/* login: glass on the coloured backdrop, dark glass side */
.login { overflow: hidden; }
.login .login-panel { background: transparent; }
.login-side { background: linear-gradient(150deg, rgb(15 42 74 / 92%), rgb(28 64 112 / 88%)); }
.dlg { background: rgb(255 255 255 / 86%); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border: 1px solid #fff; }
.dlg::backdrop { background: rgb(var(--g-navy) / 35%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.toast { background: rgb(var(--g-navy) / 86%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgb(255 255 255 / 14%); animation: g-toast .35s var(--g-ease); }
@keyframes g-toast { from { opacity: 0; transform: translate(-50%, 8px); } }

/* overview for salespeople */
.dgp-tag { border: 1px solid rgb(255 255 255 / 70%); }
.dgp-item, .dgp-row { border-top-color: rgb(var(--g-navy) / 9%); }
.dgp-table th, .dgp-table td { border-bottom-color: rgb(var(--g-navy) / 9%); }

/* skeleton shimmer */
.skel i { background: linear-gradient(90deg, rgb(255 255 255 / 40%), rgb(255 255 255 / 85%), rgb(255 255 255 / 40%)); background-size: 200% 100%; animation: g-shimmer 1.4s linear infinite; }
@keyframes g-shimmer { to { background-position: -200% 0; } }

/* ---------- one entrance per screen ---------- */
.g-rise { animation: g-rise .55s var(--g-ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes g-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero.g-rise .car.hero-img { animation: g-car .9s var(--g-ease) both .12s; }
@keyframes g-car { from { opacity: 0; transform: translateX(-18px) scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .g-rise, .hero.g-rise .car.hero-img { animation: none !important; }
  .cfg-card::after { display: none; }
  .btn:hover, .offer-row:hover, .cact:hover, .cfg-card:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .chatbox, .fin-sec, .person, .offer-row, .ver, .main-col > .sec, .sticker, .journey, .hero,
  .dgp-sec, .dgp-sum > div, .login, .entry, .pw-card, .facts, .note, .secnav, .tabbar, .offer-bar, .top { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .top { background: #0d2a4a; }
}
@media print {
  body { background: #fff; }
  .card, .main-col > .sec, .hero, .person, .fin-sec, .sticker, .journey, .facts { background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .g-rise { animation: none !important; }
}

/* ---- review fixes (v0.9.1) ---- */
/* Light frosted header: the AUTO-IMPEX logo is drawn for a light background. */

.top { background: rgb(255 255 255 / 72%); color: var(--ink); border-bottom: 1px solid rgb(255 255 255 / 85%); box-shadow: 0 10px 30px -24px rgb(var(--g-navy) / 45%); }
@media (min-width: 761px) { .top { background: rgb(255 255 255 / 70%); } #nav a, #nav button { color: var(--ink-2); } }
.top .brand, .top .brand .sub { color: var(--ink); }
.top .brand-logo { filter: none; }
#nav a, #nav button { color: var(--ink-2); }
#nav a:hover, #nav button:hover { background: rgb(var(--g-navy) / 7%); color: var(--ink); }
#nav a[aria-current="page"] { background: rgb(255 255 255 / 90%); color: var(--ink); box-shadow: 0 6px 16px -10px rgb(var(--g-navy) / 45%), inset 0 0 0 1px rgb(var(--g-navy) / 8%); }
.top .logout svg, #nav .logout { color: var(--ink-2); }
/* Photos with a light studio background blend into the glow instead of sitting in a box. */
.hero-media .car.hero-img, .offer-row .car.thumb img, .offer-row img.car.thumb { mix-blend-mode: multiply; }
/* The sticky section bar must stay readable over moving content. */
.secnav { background: rgb(255 255 255 / 82%); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.tabbar, .offer-bar { background: rgb(255 255 255 / 82%); }
@media (max-width: 760px) { .secnav { background: rgb(255 255 255 / 92%); } }