/**
 * Template layout skins for the public card.
 * Palette/mode colors come from CardThemeService CSS variables on :root.
 * Each template slug picks a hero layout, a section style and a nav style (see mapping below),
 * so templates differ in structure, not only in colour. Everything keys off body[data-template].
 */

/* ---------- Hero: centered (profile centred, QR on the cover) ---------- */
body[data-template="creative"] .hero-bottom,
body[data-template="elegant"] .hero-bottom,
body[data-template="template2"] .hero-bottom,
body[data-template="template6"] .hero-bottom,
body[data-template="template10"] .hero-bottom,
body[data-template="template14"] .hero-bottom,
body[data-template="template18"] .hero-bottom { justify-content: center; }
body[data-template="creative"] .qr-block,
body[data-template="elegant"] .qr-block,
body[data-template="template2"] .qr-block,
body[data-template="template6"] .qr-block,
body[data-template="template10"] .qr-block,
body[data-template="template14"] .qr-block,
body[data-template="template18"] .qr-block { position: absolute; right: 0; top: -92px; }
body[data-template="creative"] .profile,
body[data-template="elegant"] .profile,
body[data-template="template2"] .profile,
body[data-template="template6"] .profile,
body[data-template="template10"] .profile,
body[data-template="template14"] .profile,
body[data-template="template18"] .profile,
body[data-template="creative"] .profile-wrap,
body[data-template="elegant"] .profile-wrap,
body[data-template="template2"] .profile-wrap,
body[data-template="template6"] .profile-wrap,
body[data-template="template10"] .profile-wrap,
body[data-template="template14"] .profile-wrap,
body[data-template="template18"] .profile-wrap { border-radius: 50%; }
body[data-template="creative"] .identity,
body[data-template="elegant"] .identity,
body[data-template="template2"] .identity,
body[data-template="template6"] .identity,
body[data-template="template10"] .identity,
body[data-template="template14"] .identity,
body[data-template="template18"] .identity { text-align: center; padding: 56px 22px 8px; }
body[data-template="creative"] .brand,
body[data-template="elegant"] .brand,
body[data-template="template2"] .brand,
body[data-template="template6"] .brand,
body[data-template="template10"] .brand,
body[data-template="template14"] .brand,
body[data-template="template18"] .brand { font-size: 1.6rem; }
body[data-template="creative"] .contacts,
body[data-template="elegant"] .contacts,
body[data-template="template2"] .contacts,
body[data-template="template6"] .contacts,
body[data-template="template10"] .contacts,
body[data-template="template14"] .contacts,
body[data-template="template18"] .contacts { padding-inline: 18px; }

/* ---------- Hero: beside (short cover, round avatar left of the name) ---------- */
body[data-template="minimal"] .cover,
body[data-template="tech"] .cover,
body[data-template="medical"] .cover,
body[data-template="template3"] .cover,
body[data-template="template7"] .cover,
body[data-template="template11"] .cover,
body[data-template="template15"] .cover,
body[data-template="template19"] .cover { height: 96px; }
body[data-template="minimal"] .hero-bottom,
body[data-template="tech"] .hero-bottom,
body[data-template="medical"] .hero-bottom,
body[data-template="template3"] .hero-bottom,
body[data-template="template7"] .hero-bottom,
body[data-template="template11"] .hero-bottom,
body[data-template="template15"] .hero-bottom,
body[data-template="template19"] .hero-bottom { left: 18px; right: 18px; bottom: -34px; }
body[data-template="minimal"] .profile,
body[data-template="tech"] .profile,
body[data-template="medical"] .profile,
body[data-template="template3"] .profile,
body[data-template="template7"] .profile,
body[data-template="template11"] .profile,
body[data-template="template15"] .profile,
body[data-template="template19"] .profile { width: 72px; height: 72px; border-radius: 50%; }
body[data-template="minimal"] .profile-wrap,
body[data-template="tech"] .profile-wrap,
body[data-template="medical"] .profile-wrap,
body[data-template="template3"] .profile-wrap,
body[data-template="template7"] .profile-wrap,
body[data-template="template11"] .profile-wrap,
body[data-template="template15"] .profile-wrap,
body[data-template="template19"] .profile-wrap { border-radius: 50%; }
body[data-template="minimal"] .qr-block,
body[data-template="tech"] .qr-block,
body[data-template="medical"] .qr-block,
body[data-template="template3"] .qr-block,
body[data-template="template7"] .qr-block,
body[data-template="template11"] .qr-block,
body[data-template="template15"] .qr-block,
body[data-template="template19"] .qr-block { top: 34px; }
body[data-template="minimal"] .identity,
body[data-template="tech"] .identity,
body[data-template="medical"] .identity,
body[data-template="template3"] .identity,
body[data-template="template7"] .identity,
body[data-template="template11"] .identity,
body[data-template="template15"] .identity,
body[data-template="template19"] .identity { padding: 12px 104px 12px 106px; min-height: 84px; }
body[data-template="minimal"] .brand,
body[data-template="tech"] .brand,
body[data-template="medical"] .brand,
body[data-template="template3"] .brand,
body[data-template="template7"] .brand,
body[data-template="template11"] .brand,
body[data-template="template15"] .brand,
body[data-template="template19"] .brand { font-size: 1.35rem; }
body[data-template="minimal"] .location,
body[data-template="tech"] .location,
body[data-template="medical"] .location,
body[data-template="template3"] .location,
body[data-template="template7"] .location,
body[data-template="template11"] .location,
body[data-template="template15"] .location,
body[data-template="template19"] .location { margin-top: 8px; }
body[data-template="minimal"] .contacts,
body[data-template="tech"] .contacts,
body[data-template="medical"] .contacts,
body[data-template="template3"] .contacts,
body[data-template="template7"] .contacts,
body[data-template="template11"] .contacts,
body[data-template="template15"] .contacts,
body[data-template="template19"] .contacts { padding-top: 30px; }

/* ---------- Hero: tall (large cover, big round avatar centred) ---------- */
body[data-template="creator-entrepreneur"] .cover,
body[data-template="template4"] .cover,
body[data-template="template8"] .cover,
body[data-template="template12"] .cover,
body[data-template="template16"] .cover { height: 210px; }
body[data-template="creator-entrepreneur"] .hero-bottom,
body[data-template="template4"] .hero-bottom,
body[data-template="template8"] .hero-bottom,
body[data-template="template12"] .hero-bottom,
body[data-template="template16"] .hero-bottom { justify-content: center; bottom: -56px; }
body[data-template="creator-entrepreneur"] .profile,
body[data-template="template4"] .profile,
body[data-template="template8"] .profile,
body[data-template="template12"] .profile,
body[data-template="template16"] .profile { width: 112px; height: 112px; border-radius: 50%; }
body[data-template="creator-entrepreneur"] .profile-wrap,
body[data-template="template4"] .profile-wrap,
body[data-template="template8"] .profile-wrap,
body[data-template="template12"] .profile-wrap,
body[data-template="template16"] .profile-wrap { border-radius: 50%; }
body[data-template="creator-entrepreneur"] .qr-block,
body[data-template="template4"] .qr-block,
body[data-template="template8"] .qr-block,
body[data-template="template12"] .qr-block,
body[data-template="template16"] .qr-block { position: absolute; right: 0; top: -142px; }
body[data-template="creator-entrepreneur"] .identity,
body[data-template="template4"] .identity,
body[data-template="template8"] .identity,
body[data-template="template12"] .identity,
body[data-template="template16"] .identity { text-align: center; padding: 72px 22px 8px; }
body[data-template="creator-entrepreneur"] .brand,
body[data-template="template4"] .brand,
body[data-template="template8"] .brand,
body[data-template="template12"] .brand,
body[data-template="template16"] .brand { font-size: 1.85rem; }

/* ---------- Sections: boxed cards ---------- */
body[data-template="modern"] .page-sections,
body[data-template="creative"] .page-sections,
body[data-template="template3"] .page-sections,
body[data-template="template6"] .page-sections,
body[data-template="template9"] .page-sections,
body[data-template="template12"] .page-sections,
body[data-template="template15"] .page-sections,
body[data-template="template18"] .page-sections { display: grid; gap: 12px; padding: 12px 12px 24px; }
body[data-template="modern"] .content-section,
body[data-template="creative"] .content-section,
body[data-template="template3"] .content-section,
body[data-template="template6"] .content-section,
body[data-template="template9"] .content-section,
body[data-template="template12"] .content-section,
body[data-template="template15"] .content-section,
body[data-template="template18"] .content-section {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 16px 14px;
  box-shadow: 0 6px 18px rgba(40, 32, 24, 0.06);
}
body[data-template="modern"] .content-section:last-child,
body[data-template="creative"] .content-section:last-child,
body[data-template="template3"] .content-section:last-child,
body[data-template="template6"] .content-section:last-child,
body[data-template="template9"] .content-section:last-child,
body[data-template="template12"] .content-section:last-child,
body[data-template="template15"] .content-section:last-child,
body[data-template="template18"] .content-section:last-child { border-bottom: 1px solid var(--line); }

/* ---------- Sections: accent bar on headings ---------- */
body[data-template="tech"] .content-section .section-head h2,
body[data-template="medical"] .content-section .section-head h2,
body[data-template="template4"] .content-section .section-head h2,
body[data-template="template7"] .content-section .section-head h2,
body[data-template="template10"] .content-section .section-head h2,
body[data-template="template13"] .content-section .section-head h2,
body[data-template="template16"] .content-section .section-head h2,
body[data-template="template19"] .content-section .section-head h2 {
  border-left: 4px solid var(--accent);
  padding-left: 10px;
  font-size: 1.15rem;
}
body[data-template="tech"] .content-section .section-head p,
body[data-template="medical"] .content-section .section-head p,
body[data-template="template4"] .content-section .section-head p,
body[data-template="template7"] .content-section .section-head p,
body[data-template="template10"] .content-section .section-head p,
body[data-template="template13"] .content-section .section-head p,
body[data-template="template16"] .content-section .section-head p,
body[data-template="template19"] .content-section .section-head p { padding-left: 14px; }

/* ---------- Sections: centred pill headings ---------- */
body[data-template="elegant"] .content-section .section-head,
body[data-template="creator-entrepreneur"] .content-section .section-head,
body[data-template="template5"] .content-section .section-head,
body[data-template="template8"] .content-section .section-head,
body[data-template="template11"] .content-section .section-head,
body[data-template="template14"] .content-section .section-head,
body[data-template="template17"] .content-section .section-head { text-align: center; }
body[data-template="elegant"] .content-section .section-head h2,
body[data-template="creator-entrepreneur"] .content-section .section-head h2,
body[data-template="template5"] .content-section .section-head h2,
body[data-template="template8"] .content-section .section-head h2,
body[data-template="template11"] .content-section .section-head h2,
body[data-template="template14"] .content-section .section-head h2,
body[data-template="template17"] .content-section .section-head h2 {
  display: inline-block;
  padding: 4px 18px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 1.05rem;
}
body[data-template="elegant"] .content-section .section-head p,
body[data-template="creator-entrepreneur"] .content-section .section-head p,
body[data-template="template5"] .content-section .section-head p,
body[data-template="template8"] .content-section .section-head p,
body[data-template="template11"] .content-section .section-head p,
body[data-template="template14"] .content-section .section-head p,
body[data-template="template17"] .content-section .section-head p { margin-top: 6px; }

/* ---------- Nav: full-width bar (beside) / accent toggle (centered, tall) ---------- */
body[data-template="minimal"] .section-nav-shell,
body[data-template="tech"] .section-nav-shell,
body[data-template="medical"] .section-nav-shell,
body[data-template="template3"] .section-nav-shell,
body[data-template="template7"] .section-nav-shell,
body[data-template="template11"] .section-nav-shell,
body[data-template="template15"] .section-nav-shell,
body[data-template="template19"] .section-nav-shell { width: 100%; }
body[data-template="creative"] .section-nav-toggle,
body[data-template="elegant"] .section-nav-toggle,
body[data-template="template2"] .section-nav-toggle,
body[data-template="template6"] .section-nav-toggle,
body[data-template="template10"] .section-nav-toggle,
body[data-template="template14"] .section-nav-toggle,
body[data-template="template18"] .section-nav-toggle,
body[data-template="creator-entrepreneur"] .section-nav-toggle,
body[data-template="template4"] .section-nav-toggle,
body[data-template="template8"] .section-nav-toggle,
body[data-template="template12"] .section-nav-toggle,
body[data-template="template16"] .section-nav-toggle {
  background: var(--accent);
  border-color: var(--accent);
}
body[data-template="creative"] .section-nav-eyebrow,
body[data-template="elegant"] .section-nav-eyebrow,
body[data-template="template2"] .section-nav-eyebrow,
body[data-template="template6"] .section-nav-eyebrow,
body[data-template="template10"] .section-nav-eyebrow,
body[data-template="template14"] .section-nav-eyebrow,
body[data-template="template18"] .section-nav-eyebrow,
body[data-template="creator-entrepreneur"] .section-nav-eyebrow,
body[data-template="template4"] .section-nav-eyebrow,
body[data-template="template8"] .section-nav-eyebrow,
body[data-template="template12"] .section-nav-eyebrow,
body[data-template="template16"] .section-nav-eyebrow,
body[data-template="creative"] .section-nav-current,
body[data-template="elegant"] .section-nav-current,
body[data-template="template2"] .section-nav-current,
body[data-template="template6"] .section-nav-current,
body[data-template="template10"] .section-nav-current,
body[data-template="template14"] .section-nav-current,
body[data-template="template18"] .section-nav-current,
body[data-template="creator-entrepreneur"] .section-nav-current,
body[data-template="template4"] .section-nav-current,
body[data-template="template8"] .section-nav-current,
body[data-template="template12"] .section-nav-current,
body[data-template="template16"] .section-nav-current,
body[data-template="creative"] .section-nav-toggle svg,
body[data-template="elegant"] .section-nav-toggle svg,
body[data-template="template2"] .section-nav-toggle svg,
body[data-template="template6"] .section-nav-toggle svg,
body[data-template="template10"] .section-nav-toggle svg,
body[data-template="template14"] .section-nav-toggle svg,
body[data-template="template18"] .section-nav-toggle svg,
body[data-template="creator-entrepreneur"] .section-nav-toggle svg,
body[data-template="template4"] .section-nav-toggle svg,
body[data-template="template8"] .section-nav-toggle svg,
body[data-template="template12"] .section-nav-toggle svg,
body[data-template="template16"] .section-nav-toggle svg { color: #fff; }

/* ---------- Per-template finishing touches ---------- */
body[data-template="modern"] .card { border-radius: 1.1rem; box-shadow: 0 18px 48px color-mix(in srgb, var(--accent) 22%, transparent); }
body[data-template="creative"] .card { border-radius: 1.85rem; overflow: clip; } /* clip, not hidden: hidden would stop the sticky footer bar from sticking */
body[data-template="creative"] .cover { border-radius: 0 0 2.2rem 2.2rem; }
body[data-template="minimal"] .card { box-shadow: none; border: 1px solid var(--line); border-radius: 0.75rem; }
body[data-template="elegant"] .brand { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
body[data-template="elegant"] .card { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
body[data-template="tech"] .card { border-radius: 0.5rem; border-top: 3px solid var(--accent); }
body[data-template="tech"] .brand { font-family: "Outfit", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
body[data-template="medical"] .card { border-radius: 0.9rem; }
body[data-template="executive-profile"] .card-hero { border-bottom: 3px solid var(--accent); }
body[data-template="creator-entrepreneur"] .brand {
  background: linear-gradient(90deg, var(--accent), var(--wood));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body[data-template="classic"] .card { border-radius: 0.35rem; border: 1px solid var(--line); }
body[data-template^="template"] .card { border-radius: 1.25rem; }
body[data-template="template4"] .chip,
body[data-template="template8"] .chip,
body[data-template="template12"] .chip,
body[data-template="template16"] .chip { border-radius: 999px; }
body[data-template="template1"] .cover,
body[data-template="template5"] .cover,
body[data-template="template9"] .cover,
body[data-template="template13"] .cover,
body[data-template="template17"] .cover { background-position: center 30%; }

/* Chat language select */
.chat-lang {
  max-width: 128px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.72rem;
  padding: 0 6px;
  cursor: pointer;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 420px) {
  .chat-lang {
    max-width: 96px;
    font-size: 0.65rem;
  }
}

/* Dark mode safety net: form controls, details/summary and cards follow the themed variables */
body[data-card-mode="dark"] {
  color-scheme: dark;
}
body[data-card-mode="dark"] input,
body[data-card-mode="dark"] textarea,
body[data-card-mode="dark"] select {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
body[data-card-mode="dark"] input::placeholder,
body[data-card-mode="dark"] textarea::placeholder {
  color: var(--muted);
}
body[data-card-mode="dark"] .faq-item,
body[data-card-mode="dark"] .item-card,
body[data-card-mode="dark"] .content-section {
  color: var(--ink);
}
body[data-card-mode="dark"] .faq-item summary {
  color: var(--ink);
}

/* Dark mode: replace remaining hard-coded light surfaces */
body[data-card-mode="dark"] .reviews-hero {
  background: linear-gradient(135deg, color-mix(in srgb, #e6a817 16%, var(--surface)) 0%, var(--surface-2) 100%);
  border-color: color-mix(in srgb, #e6a817 35%, var(--line));
}
body[data-card-mode="dark"] .section-nav {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
body[data-card-mode="dark"] .btn-outline {
  background: transparent;
}