/* Screen-reader utility (used for the label on the switch) */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Language Flip (AFR / ENG) — pill knob, readable labels */
.lang-flip{
  /* size controls (tune here) */
 --w: 132px;      /* width (was 188px) */
  --h: 24px;       /* height (was 34px) */
  --r: 12px;       /* radius ~= height/2 */
  --pad: 3px;      /* side padding */

  /* pill knob size (longer than text) */
  --knobH: 20px;   /* knob height (was 28px) */
  --knobW: 50px;   /* knob length (was 64px) */
  --knobR: calc(var(--knobH) / 2);

  position:relative;
  width:var(--w);
  height:var(--h);
  border-radius:var(--r);
  border:1px solid rgba(0,0,0,.16);
  background: linear-gradient(180deg, #b7d8f2 0%, #8fbad9 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.75),
    inset 0 -3px 6px rgba(0,0,0,.18),
    0 2px 8px rgba(0,0,0,.25);
  padding:0;
  cursor:pointer;
  border:0;
  -webkit-tap-highlight-color: transparent;
}
.lang-flip:focus-visible{
  outline:2px solid var(--focus, #66b6ff);
  outline-offset:3px;
}

.lang-flip .track{
  position:absolute; inset:1px;
  border-radius:calc(var(--r) - 1px);
  background: linear-gradient(180deg, #ecf6ff 0%, #d4e9fd 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.85),
    inset 0 -3px 6px rgba(0,0,0,.12);
  z-index:1;
}
/* subtle rail */
.lang-flip .track::after{
  left: calc(var(--knobW) - 6px);
  right: calc(var(--knobW) - 6px);
  height: 2px;                 /* was 3px/4px */
  transform:translateY(-50%);
  border-radius:2px;
  background:#6e8fa5;
  opacity:.28;
}

/* >>> KNOB is now a pill (rounded rectangle) */
.lang-flip .knob{
  position:absolute;
  width:var(--knobW); height:var(--knobH);
  top:calc((var(--h) - var(--knobH)) / 2);
  left:var(--pad);
  border-radius:var(--knobR);
  background: radial-gradient(120% 120% at 30% 25%,
             #ffffff 0%, #eef6ff 60%, #c7dbef 100%);
  box-shadow:
    0 2px 6px rgba(0,0,0,.35),
    inset 0 1px 1px rgba(255,255,255,.9);
  transform: translateX(0);
  transition: transform .22s ease;
  will-change: transform;
  z-index:2;
}
.lang-flip[data-lang="en"] .knob{
  transform: translateX(calc(var(--w) - var(--knobW) - var(--pad) * 2));
}

/* >>> LABELS (AFR / ENG) — centered on each knob position */
.lang-flip .flab{
  position:absolute;
  top:50%; transform:translate(-50%, -50%);  /* center at point */
  z-index:3;                                  /* above knob & track */
  pointer-events:none; user-select:none;

  font-weight:800;
  font-size:calc(var(--knobH) * .46);  /* smaller so it sits comfortably inside knob */
  line-height:1;
  letter-spacing:.35px;
  text-transform:uppercase;
}

/* place label anchors at the knob centers on each side */
.lang-flip .flab.left  { left: calc(var(--pad) + (var(--knobW) / 2)); }
.lang-flip .flab.right { left: calc(var(--w) - var(--pad) - (var(--knobW) / 2)); }

/* default contrast: light on dark track (inactive side) */
.lang-flip .flab{
  color:#d9ecfb; text-shadow:0 1px 0 rgba(0,0,0,.45); opacity:.95;
}

/* active side (the one under the white knob): dark text on light */
.lang-flip[data-lang="af"] .flab.left,
.lang-flip[data-lang="en"] .flab.right{
  color:#153b52;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  opacity:1;
}

/* inactive side stays light on dark */
.lang-flip[data-lang="af"] .flab.right,
.lang-flip[data-lang="en"] .flab.left{
  color:#d9ecfb;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
  opacity:.95;
}

/* Dark theme tuning (keep your existing colors) */
html[data-theme="dark"] .lang-flip{
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, #113a57 0%, #0e2b45 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.06),
    inset 0 -3px 6px rgba(0,0,0,.65),
    0 2px 10px rgba(0,0,0,.55);
}
html[data-theme="dark"] .lang-flip .track{
  background: linear-gradient(180deg, #0d2236 0%, #0f263d 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.05),
    inset 0 -3px 6px rgba(0,0,0,.6);
}
html[data-theme="dark"] .lang-flip .track::after{ background:#3f5d73; opacity:.5; }
html[data-theme="dark"] .lang-flip .knob{
  background: radial-gradient(120% 120% at 30% 25%, #ffffff 0%, #e7f0fa 60%, #a8c1d8 100%);
}
html[data-theme="dark"] .lang-flip .flab{ color:#cfe8ff; text-shadow:none; opacity:.9; }
html[data-theme="dark"] .lang-flip[data-lang="af"] .flab.left,
html[data-theme="dark"] .lang-flip[data-lang="en"] .flab.right{ color:#0f2f46; opacity:1; }



/* Dark theme */
html[data-theme="dark"] .lang-flip{
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, #113a57 0%, #0e2b45 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.06),
    inset 0 -3px 6px rgba(0,0,0,.65),
    0 2px 10px rgba(0,0,0,.55);
}
html[data-theme="dark"] .lang-flip .track{
  background: linear-gradient(180deg, #0d2236 0%, #0f263d 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.05),
    inset 0 -3px 6px rgba(0,0,0,.6);
}
html[data-theme="dark"] .lang-flip .track::after{ background:#3f5d73; opacity:.5; }
html[data-theme="dark"] .lang-flip .knob{
  background: radial-gradient(120% 120% at 30% 25%, #ffffff 0%, #e7f0fa 60%, #a8c1d8 100%);
}
html[data-theme="dark"] .lang-flip .flab{ color:#cfe8ff; text-shadow:none; opacity:.9; }
html[data-theme="dark"] .lang-flip[data-lang="af"] .flab.left,
html[data-theme="dark"] .lang-flip[data-lang="en"] .flab.right{ color:#0f2f46; opacity:1; }

/* ————— Fancy 3D button ————— */
.btn-3d{
  --btnH: 40px;
  --padX: 14px;
  --radius: 14px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: var(--btnH);
  padding: 0 var(--padX);
  border-radius: var(--radius);

  /* glassy gradient base */
  background:
    radial-gradient(120% 140% at 10% 10%, rgba(255,255,255,.35), rgba(255,255,255,.02) 60%) ,
    linear-gradient(135deg, #0ea5e9, #6366f1 60%, #a855f7);
  color: #0b1320; /* keeps text dark over bright base */

  box-shadow:
    0 2px 8px rgba(0,0,0,.18),
    0 8px 24px rgba(56,189,248,.22),
    inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);

  position: relative;
  overflow: hidden; /* contain the shine */
  transform-style: preserve-3d;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

/* razor-sharp gradient border (masked, respects radius) */
.btn-3d::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* border thickness */
  background: linear-gradient(180deg,
               rgba(255,255,255,.50),
               rgba(255,255,255,.10));
  /* hollow out the middle so only the ring shows */
  -webkit-mask: 
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* subtle inner highlight to smooth the edge even more */
.btn-3d{
  box-shadow:
    0 2px 8px rgba(0,0,0,.18),
    0 8px 24px rgba(37,99,235,.22),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* gentle glossy “shine” that moves with tilt (we’ll update via JS) */
.btn-3d::before{
  content: "";
  position: absolute;
  inset: -40% -40%;
  background: radial-gradient(40% 30% at var(--mx,50%) var(--my,50%),
              rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
  pointer-events: none;
  transform: translateZ(1px);
}

/* icon + label sizing */
.btn-3d .icon{
  width: 22px;
  height: 22px;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
.btn-3d .label{
  font-weight: 800;
  letter-spacing: .2px;
}

/* hover/active */
.btn-3d:hover{
  box-shadow:
    0 4px 14px rgba(0,0,0,.2),
    0 14px 36px rgba(99,102,241,.28),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-3d:active{
  transform: translateY(1px) scale(.99);
  box-shadow:
    0 2px 8px rgba(0,0,0,.25),
    0 8px 20px rgba(99,102,241,.24) inset;
}

/* high-contrast/dark themes: keep text legible */
@media (prefers-color-scheme: dark){
  .btn-3d{ color:#081018; }
}

.btn-3d{
  /* …keep all other properties the same… */
  background:
    radial-gradient(120% 140% at 10% 10%, rgba(255,255,255,.35), rgba(255,255,255,.02) 60%) ,
    /* ink → royal blue → cyan */
    linear-gradient(135deg, #0B1B34, #1D4ED8 55%, #22D3EE);
  color: #EAF6FF; /* crisp on deep blues */

  box-shadow:
    0 2px 8px rgba(0,0,0,.18),
    0 8px 24px rgba(37, 99, 235, .22), /* blue glow */
    inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-3d:hover{
  box-shadow:
    0 4px 14px rgba(0,0,0,.2),
    0 14px 36px rgba(37, 99, 235, .28), /* blue, not purple */
    inset 0 1px 0 rgba(255,255,255,.55);
}

.btn-3d::before{
  /* replace rgba(255,255,255,.28) with a cooler shine */
  background: radial-gradient(40% 30% at var(--mx,50%) var(--my,50%),
              rgba(224,244,255,.30), rgba(224,244,255,0) 60%);
}

.tilt{
  transform: perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: filter .2s ease, box-shadow .2s ease;
  will-change: transform, filter;
}
.tilt[data-tilt-active="1"]{
  filter: brightness(1.05) saturate(1.08);
}

/* ─────────────────────────────────────────────────────────────
   3D button corner arrows (fullscreen hint)
   - Non-intrusive, pointer-transparent, respects tilt effect
   - Base arrow SVG is NE (↗); we rotate for the other corners
   - Colors tuned for Synergetix blues; adapts to light/dark
   ──────────────────────────────────────────────────────────── */
.btn.btn-3d {
  position: relative; /* anchor for absolute children */
  overflow: visible;  /* allow soft glow near edges */
}

/* container spans the button box; no events */
.btn.btn-3d .btn-arrows {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1; /* above icon/label but inside button */
}

/* base arrow visuals */
.btn.btn-3d .corner-arrow {
  position: absolute;
  width: 16px; height: 16px;
  color: rgba(255,255,255,0.85);              /* stroke via currentColor */
  opacity: 0.75;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
  transform-origin: 50% 50%;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1),
              opacity 160ms ease;
}

/* Shorter corner arrows */
.btn.btn-3d .corner-arrow {
  position: absolute;
  width: 12px; height: 12px;                 /* smaller box */
  color: rgba(255,255,255,0.85);
  opacity: 0.78;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
  transform-origin: 50% 50%;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease;
}

/* base orientation now scaled down so they stay out of the label/cube */
.btn.btn-3d .corner-arrow.ne { top: 2px;  right: 8px; transform: rotate(0deg)    scale(.60); }
.btn.btn-3d .corner-arrow.nw { top: 2px;  left:  8px; transform: rotate(-90deg)  scale(.60); }
.btn.btn-3d .corner-arrow.se { bottom: 2px; right: 8px; transform: rotate(90deg) scale(.60); }
.btn.btn-3d .corner-arrow.sw { bottom: 2px; left:  8px; transform: rotate(180deg) scale(.60); }

/* gentler hover nudge so they don’t drift into the text */
.btn.btn-3d:hover  .corner-arrow.ne,
.btn.btn-3d:focus-visible .corner-arrow.ne { transform: rotate(0deg)    scale(.60) translate(1px,-1px); }
.btn.btn-3d:hover  .corner-arrow.nw,
.btn.btn-3d:focus-visible .corner-arrow.nw { transform: rotate(-90deg)  scale(.60) translate(-1px,-1px); }
.btn.btn-3d:hover  .corner-arrow.se,
.btn.btn-3d:focus-visible .corner-arrow.se { transform: rotate(90deg)   scale(.60) translate(1px, 1px); }
.btn.btn-3d:hover  .corner-arrow.sw,
.btn.btn-3d:focus-visible .corner-arrow.sw { transform: rotate(180deg)  scale(.60) translate(-1px, 1px); }

@media (prefers-reduced-motion: reduce) {
  .btn.btn-3d .corner-arrow { transition: opacity 120ms linear; }
}

/* ─────────────────────────────────────────────
   WIP 3D tabs (L-shaped + Corner prism)
   Force icon + label + subtext into a 2×2 grid
   ───────────────────────────────────────────── */
.tabs.vertical .tab.wip-3d {
  /* kill the parent's flex spacing for these two */
  display: grid;
  grid-template-columns: auto 1fr; /* icon | text */
  grid-template-rows: auto auto;   /* label, then tiny line */
  column-gap: 10px;
  align-items: start;

  background: rgba(180, 186, 194, 0.08);
  border-color: rgba(0, 0, 0, 0.02);
  color: #697481;
  cursor: pointer;
}

.tabs.vertical .tab.wip-3d[aria-pressed="true"] {
  background: rgba(180, 186, 194, 0.16);
  border-color: rgba(255, 255, 255, 0.04);
  color: #6d7783;
}

/* icon sits in col 1, rows 1-2 */
.tabs.vertical .tab.wip-3d .shape-ico {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  margin-top: 2px;
}

/* main label in col 2, row 1 */
.tabs.vertical .tab.wip-3d .tab-label {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  line-height: 1.1;
}

/* tiny text directly UNDER label, col 2, row 2 */
.tabs.vertical .tab.wip-3d .tab-sub {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: block;
  font-size: 9px;
  line-height: 1.1;
  opacity: 0.55;
  white-space: normal;    /* allow wrap for the long name */
  margin-top: 2px;
}

/* inline host: we want to anchor the mini card here */

/* === 3D VIEWER LOADER — tank filling animation ==================== */

.viewer3d-host {
  position: relative; /* ensure overlay positions correctly */
}

/* Full overlay */
.viewer3d-loader {
  position: absolute;
  inset: 0;
  z-index: 50;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  pointer-events: none;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: #eaf6ff;

  background:
    radial-gradient(260px 180px at 20% 0%, rgba(77,173,255,0.16), transparent),
    radial-gradient(260px 220px at 80% 100%, rgba(0,0,0,0.18), rgba(0,0,0,0.72));

  backdrop-filter: blur(3px);

  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* When 3D is ready */
.viewer3d-loader.is-done {
  opacity: 0;
  transform: translateY(4px);
}

/* Tank outline */
.viewer3d-loader-tank {
  position: relative;
  width: 80px;                 /* ~20% bigger */
  height: 48px;
  border-radius: 10px 10px 6px 6px;
  border: 2px solid rgba(190, 232, 255, 0.9);
  overflow: hidden;
  box-shadow:
    0 4px 18px rgba(0,0,0,0.45),
    inset 0 1px 3px rgba(0,0,0,0.42);
  background: radial-gradient(circle at 50% -40%, rgba(255,255,255,0.35), transparent);
}

/* Top rim shine */
.viewer3d-loader-tank::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 4px;
  height: 3px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,0.9), transparent);
  opacity: 0.45;
}

/* Water block */
.viewer3d-loader-water {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 14%;
  border-radius: 6px 6px 4px 4px;
  background: linear-gradient(to top, rgba(0,188,255,0.98), rgba(130,236,255,1));
  box-shadow:
    0 -3px 7px rgba(0,0,0,0.38) inset,
    0 3px 8px rgba(0,0,0,0.35);

  transform-origin: bottom;
  animation:
    viewer3d-fill 1.6s ease-in-out infinite,
    viewer3d-sheen 1.6s linear infinite;
}

/* Wave on top of water */
.viewer3d-loader-water::before {
  content: "";
  position: absolute;
  left: -40%;
  right: -40%;
  top: -4px;
  height: 10px;
  background:
    radial-gradient(circle at 20% 0, rgba(255,255,255,0.9), transparent 72%),
    radial-gradient(circle at 60% 0, rgba(255,255,255,0.6), transparent 72%),
    radial-gradient(circle at 100% 0, rgba(255,255,255,0.4), transparent 72%);
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: viewer3d-wave 1s linear infinite;
}

/* Label under tank */
.viewer3d-loader-label {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  opacity: 0.96;
}

/* Fill motion */
@keyframes viewer3d-fill {
  0%   { height: 14%; }
  40%  { height: 80%; }
  70%  { height: 92%; }
  100% { height: 70%; }
}

/* Subtle shimmer */
@keyframes viewer3d-sheen {
  0%   { filter: brightness(1.0); }
  40%  { filter: brightness(1.08); }
  70%  { filter: brightness(1.14); }
  100% { filter: brightness(1.02); }
}

/* Wave drift */
@keyframes viewer3d-wave {
  0%   { transform: translateX(0); }
  100% { transform: translateX(40%); }
}

/* Light theme guardrails */
@media (prefers-color-scheme: light) {
  .viewer3d-loader {
    background:
      radial-gradient(260px 180px at 20% 0%, rgba(0,142,240,0.06), transparent),
      rgba(255,255,255,0.96);
    color: #12324c;
  }
  .viewer3d-loader-tank {
    border-color: rgba(13,46,78,0.86);
    box-shadow:
      0 4px 14px rgba(0,0,0,0.22),
      inset 0 1px 3px rgba(0,0,0,0.18);
  }
}


/* Ensure the 3D host can show a loader even before the canvas exists */
.viewer3d-host { position: relative; min-height: 320px; }
.viewer3d-host--inline { min-height: 320px; }

/* Modal gets a bit more height */
.modal .viewer3d-host { min-height: 420px; }

/* (If you don’t already have these from mobile) minimal overlay styles */
.viewer3d-loader {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.viewer3d-loader-tank { width: 80px; height: 48px; border:2px solid rgba(190,232,255,.9); border-radius:10px 10px 6px 6px; overflow:hidden; }
.viewer3d-loader-water {
  position:absolute; left:2px; right:2px; bottom:2px; height:14%;
  border-radius:6px 6px 4px 4px;
  background: linear-gradient(to top, rgba(0,188,255,.98), rgba(130,236,255,1));
  transform-origin: bottom; animation: viewer3d-fill 1.6s ease-in-out infinite;
}
.viewer3d-loader-label { margin-top: 8px; font: 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
@keyframes viewer3d-fill {
  0%{height:14%} 40%{height:80%} 70%{height:92%} 100%{height:70%}
}