/* =====================================================================
   ALDEEM — RESPONSIVE WEB (نسخة الويب المتجاوبة)
   Shares tokens.css. Mobile-first → desktop. RTL. Tenant-tokened.
   Breakpoints:  ≤720 mobile · 721–1024 tablet · ≥1025 desktop
   ===================================================================== */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-family); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  background-image:
    radial-gradient(1200px 680px at 88% -6%, color-mix(in srgb,var(--tenant-primary-soft) 75%,transparent), transparent 60%),
    radial-gradient(1000px 600px at 6% 4%, color-mix(in srgb,var(--tenant-accent-soft) 60%,transparent), transparent 55%);
  background-attachment:fixed; background-repeat:no-repeat;
}
img, svg { display:block; }
button { font-family:inherit; cursor:pointer; }
a { text-decoration:none; color:inherit; }
.wm::before { content:var(--tenant-wordmark); }

/* layout container */
.wrap { width:100%; max-width:1240px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px); }

/* ===================== TOP NAV (desktop) ===================== */
.nav { position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--surface) 86%,transparent);
       backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); transition:box-shadow .2s; }
.nav.scrolled { box-shadow:var(--shadow-sm); }
.nav-in { display:flex; align-items:center; gap:28px; height:74px; }
.brand { display:flex; align-items:center; gap:11px; flex:none; }
.brand .tile { width:42px; height:42px; border-radius:13px; background:var(--tenant-primary); display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.brand .tile svg { width:24px; height:24px; }
.brand .bt { display:flex; flex-direction:column; line-height:1.2; }
.brand .bt b { font-size:18px; font-weight:800; letter-spacing:-.3px; }
.brand .bt span { font-size:11.5px; color:var(--muted); font-weight:600; }

.nav-links { display:flex; align-items:center; gap:4px; margin-inline-end:auto; }
.nav-links a { font-size:14px; font-weight:700; color:var(--muted); padding:9px 14px; border-radius:var(--r-btn); transition:.16s; position:relative; }
.nav-links a:hover { color:var(--ink); background:var(--tenant-primary-soft); }
.nav-links a.on { color:var(--tenant-primary); }
.nav-links a.on::after { content:""; position:absolute; inset-inline:14px; bottom:-1px; height:2.5px; border-radius:2px; background:var(--tenant-primary); }

.nav-actions { display:flex; align-items:center; gap:10px; flex:none; }
.icon-btn { width:42px; height:42px; border-radius:12px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); position:relative; transition:.16s; }
.icon-btn:hover { border-color:var(--tenant-primary); color:var(--tenant-primary); }
.icon-btn svg { width:19px; height:19px; }
.icon-btn .badge { position:absolute; top:-5px; inset-inline-start:-5px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
                   background:var(--tenant-accent); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; }
.btn-login { display:inline-flex; align-items:center; gap:8px; background:var(--tenant-primary); color:#fff; border:none;
             font-size:14px; font-weight:800; padding:11px 20px; border-radius:var(--r-btn); box-shadow:0 5px 14px color-mix(in srgb,var(--tenant-primary) 32%,transparent); transition:.16s; }
.btn-login:hover { transform:translateY(-1px); }
.btn-login svg { width:17px; height:17px; }
.nav-burger { display:none; }

/* ===================== HERO ===================== */
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center;
        background:var(--tenant-primary-dark); color:#fff; border-radius:30px; padding:clamp(28px,4vw,52px);
        margin-top:28px; position:relative; overflow:hidden; box-shadow:var(--shadow-md); }
.hero::after { content:""; position:absolute; top:-120px; inset-inline-start:-90px; width:360px; height:360px; border-radius:50%;
               background:radial-gradient(circle, color-mix(in srgb,var(--tenant-accent) 60%,transparent), transparent 70%); opacity:.5; }
.hero::before { content:""; position:absolute; bottom:-140px; inset-inline-end:-60px; width:300px; height:300px; border-radius:50%;
                background:radial-gradient(circle, color-mix(in srgb,var(--tenant-primary) 80%,transparent), transparent 70%); opacity:.4; }
.hero-tx { position:relative; z-index:2; }
.hh-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.14); color:#fff;
            font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:var(--r-pill); margin-bottom:20px; }
.hh-badge svg { width:15px; height:15px; color:var(--tenant-accent); }
.hero-tx h1 { font-size:clamp(30px,4.2vw,50px); font-weight:800; line-height:1.28; letter-spacing:-.5px; margin-bottom:16px; }
.hero-tx p { font-size:clamp(15px,1.4vw,18px); font-weight:500; color:rgba(255,255,255,.82); line-height:1.7; max-width:480px; margin-bottom:28px; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:12px; }
.hero-cta { display:inline-flex; align-items:center; gap:10px; background:var(--tenant-accent); color:#fff; border:none;
            font-size:16px; font-weight:800; padding:15px 28px; border-radius:var(--r-btn);
            box-shadow:0 10px 24px color-mix(in srgb,var(--tenant-accent) 45%,transparent); transition:.16s; }
.hero-cta:hover { transform:translateY(-2px); }
.hero-cta svg { width:18px; height:18px; }
.hero-cta.ghost { background:rgba(255,255,255,.12); box-shadow:none; }
.hero-cta.ghost:hover { background:rgba(255,255,255,.2); }
.hero-stats { display:flex; gap:26px; margin-top:30px; }
.hero-stats .hs b { font-size:26px; font-weight:800; display:block; letter-spacing:-.5px; }
.hero-stats .hs span { font-size:12.5px; color:rgba(255,255,255,.7); font-weight:600; }

/* hero visual: stacked CV cards */
.hero-vis { position:relative; z-index:2; min-height:340px; }
.hv-card { position:absolute; width:200px; background:var(--surface); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; color:var(--ink); }
.hv-card .ph { height:140px; position:relative; }
.hv-card .ph .ill { width:100%; height:100%; }
.hv-card .av-tag { position:absolute; bottom:8px; inset-inline-start:8px; display:flex; align-items:center; gap:5px;
                   background:rgba(255,255,255,.94); font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:var(--r-pill); }
.hv-card .av-tag .pulse { width:7px; height:7px; border-radius:50%; background:var(--success); }
.hv-card .bd { padding:11px 12px 13px; }
.hv-card .bd b { font-size:14px; font-weight:800; display:block; }
.hv-card .bd span { font-size:11px; color:var(--muted); font-weight:600; }
.hv-card .rt { display:flex; align-items:center; gap:3px; margin-top:7px; font-size:12px; font-weight:800; }
.hv-card .rt svg { width:13px; height:13px; color:var(--warning); }
.hv-1 { inset-inline-end:0; top:0; transform:rotate(3deg); }
.hv-2 { inset-inline-start:0; top:78px; transform:rotate(-4deg); z-index:3; }
.hv-3 { inset-inline-end:30px; top:178px; transform:rotate(2deg); }

/* ===================== SECTION HEAD ===================== */
.sec { margin-top:clamp(40px,5vw,64px); }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.sec-head h2 { font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-.4px; }
.sec-head h2 span { color:var(--tenant-primary); }
.sec-head p { font-size:14px; color:var(--muted); font-weight:600; margin-top:5px; }
.sec-head .more { font-size:14px; font-weight:700; color:var(--tenant-primary); display:inline-flex; align-items:center; gap:6px; flex:none; }
.sec-head .more svg { width:16px; height:16px; }

/* ===================== MODE CARDS ===================== */
.modes { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mode { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px 20px; box-shadow:var(--shadow-sm);
        display:flex; flex-direction:column; gap:13px; transition:.18s; text-align:start; }
.mode:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--tenant-primary) 30%,var(--line)); }
.mode .mic { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; }
.mode .mic svg { width:27px; height:27px; }
.mode.m1 .mic,.mode.m3 .mic { background:var(--tenant-primary-soft); color:var(--tenant-primary); }
.mode.m2 .mic,.mode.m4 .mic { background:var(--tenant-accent-soft); color:var(--tenant-accent-dark); }
.mode b { font-size:17px; font-weight:800; display:flex; align-items:center; justify-content:space-between; }
.mode b .ar { color:var(--faint); transition:.18s; }
.mode:hover b .ar { color:var(--tenant-primary); transform:translateX(-3px); }
.mode b .ar svg { width:17px; height:17px; }
.mode span.d { font-size:13px; color:var(--muted); font-weight:600; line-height:1.6; }

/* ===================== CV GRID ===================== */
.cv-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cv-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); transition:.18s; cursor:pointer; }
.cv-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.cv-thumb { position:relative; aspect-ratio:3/2; overflow:hidden; }
.cv-thumb .ill { width:100%; height:100%; }
.cv-thumb .flagbadge { position:absolute; top:10px; inset-inline-start:10px; display:flex; align-items:center; gap:5px;
                       background:rgba(255,255,255,.94); font-size:11px; font-weight:800; padding:4px 9px; border-radius:var(--r-pill); }
.cv-thumb .lock { position:absolute; top:10px; inset-inline-end:10px; display:flex; align-items:center; gap:4px;
                  background:rgba(22,22,43,.6); color:#fff; font-size:10px; font-weight:700; padding:4px 8px; border-radius:var(--r-pill); }
.cv-thumb .lock svg { width:11px; height:11px; }
.cv-thumb .play { position:absolute; inset:0; margin:auto; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.94);
                  display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.cv-thumb .play svg { width:20px; height:20px; color:var(--tenant-primary); margin-inline-start:2px; }
.cv-thumb .availtag { position:absolute; bottom:10px; inset-inline-start:10px; display:flex; align-items:center; gap:6px;
                      font-size:10.5px; font-weight:800; padding:5px 10px; border-radius:var(--r-pill); }
.cv-thumb .availtag .pulse { width:7px; height:7px; border-radius:50%; }
.availtag.now { background:var(--success-soft); color:var(--success); } .availtag.now .pulse { background:var(--success); }
.availtag.soon { background:var(--warning-soft); color:var(--warning); } .availtag.soon .pulse { background:var(--warning); }
.availtag.booked { background:#EEEEF3; color:var(--muted); } .availtag.booked .pulse { background:var(--faint); }
.cv-body { padding:14px 15px 16px; }
.cv-prof { font-size:16px; font-weight:800; }
.cv-meta { font-size:12.5px; color:var(--muted); font-weight:600; margin-top:3px; display:flex; align-items:center; gap:5px; }
.cv-meta .flag { font-size:14px; }
.cv-skills { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.skill { font-size:11px; font-weight:700; color:var(--tenant-primary); background:var(--tenant-primary-soft); padding:4px 9px; border-radius:var(--r-pill); }
.cv-foot { display:flex; align-items:center; justify-content:space-between; margin-top:13px; }
.rating { display:flex; align-items:center; gap:3px; font-size:13.5px; font-weight:800; }
.rating svg { width:15px; height:15px; color:var(--warning); }
.rating small { color:var(--muted); font-weight:600; font-size:11px; }
.cv-book { background:var(--tenant-primary); color:#fff; border:none; font-size:13px; font-weight:800; padding:9px 18px; border-radius:var(--r-btn); transition:.16s; }
.cv-book:hover { transform:translateY(-1px); }
.cv-book:disabled { background:var(--line); color:var(--muted); cursor:not-allowed; transform:none; }

/* ===================== STEPS ===================== */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.step { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px 20px; box-shadow:var(--shadow-sm); position:relative; }
.step .snum { width:46px; height:46px; border-radius:14px; background:var(--tenant-primary-soft); color:var(--tenant-primary);
              font-size:19px; font-weight:800; display:grid; place-items:center; margin-bottom:15px; }
.step b { font-size:16px; font-weight:800; display:block; margin-bottom:6px; }
.step span { font-size:13px; color:var(--muted); font-weight:600; line-height:1.6; }
.step:not(:last-child)::after { content:""; position:absolute; top:47px; inset-inline-start:-13px; width:26px; height:2px; background:var(--line); }

/* ===================== WORKER STRIP ===================== */
.wstrip { margin-top:clamp(40px,5vw,60px); display:flex; align-items:center; gap:20px; flex-wrap:wrap;
          background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px 26px; box-shadow:var(--shadow-sm); }
.wstrip .ws-ic { width:54px; height:54px; border-radius:16px; background:var(--tenant-primary-soft); color:var(--tenant-primary); display:grid; place-items:center; flex:none; }
.wstrip .ws-ic svg { width:26px; height:26px; }
.wstrip .ws-tx { margin-inline-end:auto; }
.wstrip .ws-tx b { font-size:17px; font-weight:800; display:block; }
.wstrip .ws-tx span { font-size:13px; color:var(--muted); font-weight:600; }
.wstrip .ws-cta { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background:var(--ink); color:#fff; border:none; font-size:14px; font-weight:800; padding:13px 22px; border-radius:var(--r-btn); transition:.16s; }
.wstrip .ws-cta:hover { transform:translateY(-2px); }
.wstrip .ws-cta svg { width:16px; height:16px; }

/* ===================== FOOTER ===================== */
.foot { margin-top:clamp(48px,6vw,72px); border-top:1px solid var(--line); padding:34px 0 40px; }
.foot-in { display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.foot .fbrand { display:flex; align-items:center; gap:10px; margin-inline-end:auto; }
.foot .fbrand .tile { width:36px; height:36px; border-radius:11px; background:var(--tenant-primary); display:grid; place-items:center; }
.foot .fbrand .tile svg { width:20px; height:20px; }
.foot .fbrand b { font-size:15px; font-weight:800; }
.foot .fnote { font-size:12.5px; color:var(--muted); font-weight:600; }
.foot .fbadges { display:flex; gap:9px; flex-wrap:wrap; }
.fbadge { font-size:11.5px; font-weight:700; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:7px 13px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:6px; }
.fbadge svg { width:13px; height:13px; color:var(--tenant-primary); }

/* ===================== MOBILE TAB BAR ===================== */
.tabbar { display:none; position:fixed; bottom:0; inset-inline:0; z-index:50; background:color-mix(in srgb,var(--surface) 94%,transparent);
          backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }
.tabbar-in { display:flex; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--faint); font-size:10.5px; font-weight:700; background:none; border:none; padding:6px 0; }
.tab svg { width:23px; height:23px; }
.tab.on { color:var(--tenant-primary); }

/* ===================== THEME-SWAP PROOF ===================== */
.swap-proof { position:fixed; bottom:20px; inset-inline-start:20px; z-index:60; display:flex; align-items:center; gap:9px;
              background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(12px); border:1px solid var(--line);
              border-radius:var(--r-pill); padding:7px 8px 7px 14px; box-shadow:var(--shadow-md); }
.swap-proof .lbl { font-size:11px; font-weight:700; color:var(--muted); }
.swap-proof .seg { display:flex; gap:3px; background:var(--bg); border-radius:var(--r-pill); padding:3px; }
.swap-proof .seg button { display:flex; align-items:center; gap:6px; border:none; background:none; font-size:12.5px; font-weight:800; color:var(--muted); padding:7px 13px; border-radius:var(--r-pill); transition:.16s; }
.swap-proof .seg button .dot { width:10px; height:10px; border-radius:50%; }
.swap-proof .seg button.on { background:var(--tenant-primary); color:#fff; box-shadow:var(--shadow-sm); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .hero { grid-template-columns:1fr; gap:30px; }
  .hero-vis { min-height:300px; max-width:440px; }
  .modes { grid-template-columns:repeat(2,1fr); }
  .cv-grid { grid-template-columns:repeat(3,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .step:not(:last-child)::after { display:none; }
}

@media (max-width:720px){
  /* nav: brand + icons only, links → bottom tab bar */
  .nav-links { display:none; }
  .btn-login span { display:none; }
  .btn-login { padding:11px; }
  .nav-in { height:62px; gap:12px; }
  .brand .bt span { display:none; }
  .brand .tile { width:38px; height:38px; }

  .hero { margin-top:18px; border-radius:24px; padding:26px 22px; }
  .hero-vis { display:none; }
  .hero-stats { gap:20px; }
  .hero-stats .hs b { font-size:22px; }

  .modes { grid-template-columns:repeat(2,1fr); gap:13px; }
  .mode { padding:16px 15px; gap:10px; }
  .mode .mic { width:46px; height:46px; }
  .cv-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .steps { grid-template-columns:1fr; gap:12px; }
  .wstrip { padding:18px 18px; }
  .wstrip .ws-cta { width:100%; justify-content:center; }

  .tabbar { display:block; }
  body { padding-bottom:78px; }
  .swap-proof { bottom:88px; inset-inline-start:12px; padding:6px 7px 6px 11px; }
  .swap-proof .lbl { display:none; }
}

@media (max-width:380px){
  .cv-grid { grid-template-columns:1fr; }
}

/* =====================================================================
   VIEW SYSTEM (home / gallery / detail)
   ===================================================================== */
.view { display:none; }
.view.on { display:block; }

/* ===================== GALLERY ===================== */
.gal-head { margin-top:30px; }
/* h1 OR h2 — controller uses h2, both get same style */
.gal-head h1, .gal-head h2 { font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-.5px; }
.gal-head h1 span, .gal-head h2 span { color:var(--tenant-primary); }
.gal-head p { font-size:14.5px; color:var(--muted); font-weight:600; margin-top:7px; }

/* Gallery count — used directly on span or inside wrapper */
.gal-count-wrap { display:flex; align-items:center; margin-inline-start:auto; }
.gal-count, .gal-count-wrap span { font-size:13.5px; font-weight:700; color:var(--muted); }
.gal-count b, .gal-count-wrap b { color:var(--ink); }

.filters, .gal-filters {
  position:sticky; top:74px; z-index:30; display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  padding:16px 0; margin-top:18px; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
/* Classic filter-field (with SVG icon) */
.filter-field { position:relative; display:inline-flex; align-items:center; }
.filter-field > svg { position:absolute; inset-inline-start:14px; width:15px; height:15px; color:var(--tenant-primary); pointer-events:none; }
.filter-field .chev { position:absolute; inset-inline-end:12px; width:15px; height:15px; color:var(--muted); pointer-events:none; }
.filter-field select {
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink); cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:11px 36px 11px 38px; appearance:none; -webkit-appearance:none; transition:.16s; min-width:150px;
}
.filter-field select:hover { border-color:var(--tenant-primary); }
.filter-field.active select { background:var(--tenant-primary-soft); border-color:transparent; color:var(--tenant-primary); }
.filter-field.active > svg { color:var(--tenant-primary); }
/* Labeled filter box — .ff (used in live web controller) */
.ff { display:flex; flex-direction:column; gap:5px; }
.ff label { font-size:11.5px; font-weight:800; color:var(--muted); letter-spacing:.2px; }
.ff select {
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink); cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-btn);
  padding:10px 14px; appearance:none; -webkit-appearance:none; outline:none; transition:.16s; min-width:140px;
}
.ff select:focus { border-color:var(--tenant-primary); }
.ff.active label { color:var(--tenant-primary); }
.ff.active select { border-color:var(--tenant-primary); background:var(--tenant-primary-soft); color:var(--tenant-primary); }

.gal-reset { font-family:inherit; font-size:13px; font-weight:700; color:var(--tenant-primary); background:none; border:none; padding:8px; display:none; cursor:pointer; align-self:flex-end; }
.gal-reset.show { display:inline-block; }

.gal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:24px 0 40px; }
.gal-empty { padding:60px 0; text-align:center; color:var(--muted); font-weight:700; }

/* ===================== CV DETAIL (web) ===================== */
.det-bar { display:flex; align-items:center; gap:12px; margin-top:24px; }
.det-back { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--muted);
            background:var(--surface); border:1px solid var(--line); border-radius:var(--r-btn); padding:10px 16px; transition:.16s; }
.det-back:hover { color:var(--tenant-primary); border-color:var(--tenant-primary); }
.det-back svg { width:16px; height:16px; }
.det-crumb { font-size:13px; color:var(--faint); font-weight:600; }
.det-crumb b { color:var(--muted); }

.det-wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:start; margin-top:22px; }

/* protected video player */
.det-player { position:sticky; top:96px; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-md); }
.det-video { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--tenant-primary-dark); }
.det-video .ill { width:100%; height:100%; }
.det-video .scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(10,10,26,.78), transparent 42%, rgba(10,10,26,.3)); }
.det-video .vtop { position:absolute; top:14px; inset-inline-end:14px; display:flex; gap:7px; }
.vchip { display:inline-flex; align-items:center; gap:6px; background:rgba(22,22,43,.6); color:#fff; font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:var(--r-pill); backdrop-filter:blur(6px); }
.vchip svg { width:13px; height:13px; }
.det-video .pbig { position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.95);
                   display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:.18s; }
.det-video .pbig:hover { transform:scale(1.06); }
.det-video .pbig svg { width:30px; height:30px; color:var(--tenant-primary); margin-inline-start:3px; }
.det-video.playing .pbig { opacity:0; pointer-events:none; }
.det-video .vbottom { position:absolute; bottom:0; inset-inline:0; padding:16px 16px 15px; color:#fff; }
.protect { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.92); margin-bottom:12px; }
.protect svg { width:14px; height:14px; flex:none; color:var(--tenant-accent); }
.vscrub { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; color:rgba(255,255,255,.85); }
.vtrack { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.25); overflow:hidden; }
.vfill { height:100%; width:32%; background:var(--tenant-accent); border-radius:2px; }

/* info column */
.det-info > .anon { display:inline-flex; align-items:center; gap:8px; background:var(--warning-soft); color:var(--warning);
                    font-size:12px; font-weight:700; padding:8px 14px; border-radius:var(--r-pill); margin-bottom:16px; }
.det-info > .anon svg { width:15px; height:15px; }
.det-info h1 { font-size:clamp(26px,3vw,34px); font-weight:800; letter-spacing:-.4px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.det-info h1 .rt { font-size:16px; font-weight:800; color:var(--warning); display:inline-flex; align-items:center; gap:4px; }
.det-info h1 .rt svg { width:18px; height:18px; }

.det-specs { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px; }
.spec { background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:14px 16px; box-shadow:var(--shadow-sm); }
.spec .k { font-size:12px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:6px; }
.spec .k svg { width:14px; height:14px; color:var(--tenant-primary); }
.spec .v { font-size:16px; font-weight:800; margin-top:4px; }

.det-sect { margin-top:24px; }
.det-sect h3 { font-size:16px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.det-sect h3 svg { width:17px; height:17px; color:var(--tenant-primary); }
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip-lg { font-size:13px; font-weight:700; color:var(--ink); background:var(--surface); border:1px solid var(--line);
           padding:9px 15px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:7px; }
.chip-lg svg { width:14px; height:14px; color:var(--tenant-primary); }

.availbar { display:flex; align-items:center; gap:13px; margin-top:24px; background:var(--success-soft); border:1px solid color-mix(in srgb,var(--success) 25%,transparent); border-radius:18px; padding:15px 18px; }
.availbar .ic { width:42px; height:42px; border-radius:13px; background:var(--success); color:#fff; display:grid; place-items:center; flex:none; }
.availbar .ic svg { width:22px; height:22px; }
.availbar .tx b { font-size:15px; font-weight:800; color:var(--success); display:block; }
.availbar .tx span { font-size:12.5px; color:var(--muted); font-weight:600; }

.det-trust { margin-top:24px; background:var(--tenant-primary-dark); border-radius:var(--r-card); padding:20px 22px; color:#fff; box-shadow:var(--shadow-md); }
.det-trust .th { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800; margin-bottom:16px; }
.det-trust .th svg { width:18px; height:18px; color:var(--tenant-accent); }
.det-trust .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.det-trust .tg .ti { width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.13); display:grid; place-items:center; margin-bottom:10px; }
.det-trust .tg .ti svg { width:20px; height:20px; color:var(--tenant-accent); }
.det-trust .tg b { font-size:13.5px; font-weight:800; display:block; }
.det-trust .tg span { font-size:11.5px; color:rgba(255,255,255,.72); font-weight:600; }

.det-cta { display:flex; gap:14px; margin-top:26px; }
.cta { flex:1; border:none; cursor:pointer; border-radius:var(--r-btn); padding:17px 0; font-size:16px; font-weight:800;
       display:flex; flex-direction:column; align-items:center; gap:3px; transition:.16s; }
.cta small { font-size:11.5px; font-weight:600; opacity:.85; }
.cta:hover { transform:translateY(-2px); }
.cta.primary { background:var(--tenant-primary); color:#fff; box-shadow:0 8px 20px color-mix(in srgb,var(--tenant-primary) 35%,transparent); }
.cta.accent { background:var(--tenant-accent); color:#fff; box-shadow:0 8px 20px color-mix(in srgb,var(--tenant-accent) 40%,transparent); }

@media (max-width:1024px){
  .gal-grid { grid-template-columns:repeat(3,1fr); }
  .det-wrap { grid-template-columns:1fr; gap:26px; }
  .det-player { position:relative; top:0; max-width:440px; }
  .det-video { aspect-ratio:16/10; }
}

@media (max-width:720px){
  .filters { top:62px; gap:9px; padding:12px 0; }
  .filter-field select { min-width:0; font-size:12.5px; padding:10px 32px 10px 32px; }
  .gal-count { width:100%; margin-inline-start:0; order:3; }
  .gal-grid { grid-template-columns:repeat(2,1fr); gap:14px; padding:18px 0 40px; }
  .det-specs { gap:10px; }
  .det-trust .grid3 { grid-template-columns:1fr; gap:11px; }
  .det-cta { position:sticky; bottom:78px; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(12px);
             margin-inline:calc(-1 * clamp(16px,4vw,40px)); padding:12px clamp(16px,4vw,40px); border-top:1px solid var(--line); z-index:20; }
  .cta { padding:14px 0; font-size:15px; }
}

@media (max-width:380px){
  .gal-grid { grid-template-columns:1fr; }
}