/* tpl_car_house — dark premium car house theme for Joomla 6 */

:root{
  /* These can be overridden from Template Style params in index.php */
  --bg:#F4F6F9;
  --surface:#FFFFFF;
  --line: rgba(15,23,42,.10);
  --text:#0F172A;
  --muted:#64748B;
  --accent:#E10600;      /* brake light */
  --accent2:#00B3FF;     /* LED neon */
  --radius:14px;
  --shadow: 0 16px 40px rgba(2,6,23,.12);
  --container: 1180px;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  --font-headings: var(--font-body);
  --base-font-size: 16px;
}


/* ===== Global UI tokens (driven by Brand Theme Presets) ===== */
:root{
  --page-bg: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, #fff 20%) 60%, color-mix(in srgb, var(--bg) 85%, #000 15%) 100%);
  --surface-2: color-mix(in srgb, var(--surface) 85%, var(--bg) 15%);
  --shadow-sm: 0 8px 22px rgba(2,6,23,.10);
  --shadow-md: var(--shadow);
  --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
  --ui-radius-sm: calc(var(--radius) - 6px);
  --ui-radius-md: var(--radius);
  --ui-radius-lg: calc(var(--radius) + 6px);

  --btn-radius: var(--ui-radius-md);
  --btn-weight: 800;
  --btn-transform: none;
  --btn-letter-spacing: .2px;
  --btn-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 22%, transparent);

  --input-radius: var(--ui-radius-md);
  --input-bg: var(--surface);
  --input-border: var(--line);
  --input-shadow: none;
  --input-focus-border: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
  --input-focus-shadow: var(--ring);

  --heading-weight: 900;
  --heading-letter-spacing: -0.02em;

  /* Links & Buttons (defaults follow theme accents) */
  --link: var(--accent);
  --link-hover: var(--accent2);
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: #fff;
  --btn-primary-border: transparent;
  --btn-secondary-bg: var(--accent2);
  --btn-secondary-fg: #fff;
  --btn-secondary-border: transparent;
}

*{box-sizing:border-box}

/* Typography driven by theme */
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-headings);
  font-weight: var(--heading-weight, 800);
  letter-spacing: var(--heading-letter-spacing, -0.01em);
}

body.site{
  margin:0;
  color:var(--text);
  background: var(--page-bg, linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, #fff 30%) 55%, color-mix(in srgb, var(--bg) 70%, #000 30%) 100%));
  font-family: var(--font-body);
  font-size: var(--base-font-size);
  font-weight: var(--body-weight, 400);
  letter-spacing: var(--body-letter-spacing, normal);
}

/* Global link colours (content) */
.main a:not(.btn-car),
.panel a:not(.btn-car),
.footer a:not(.btn-car){
  color: var(--link, var(--accent));
  text-decoration-color: color-mix(in srgb, var(--link, var(--accent)) 55%, transparent);
}
.main a:not(.btn-car):hover,
.panel a:not(.btn-car):hover,
.footer a:not(.btn-car):hover{
  color: var(--link-hover, var(--accent2));
}

/* ===== Theme Modes (7) ===== */
body.site.theme-carbon{
  /* A • Carbon + Arcs (як у логотипі) */
  --bg:#0b0d10;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.12);
  --text:#f5f7fb;
  --muted: rgba(245,247,251,.70);
  --accent:#e10618;   /* brake light */
  --accent2:#00b3ff;  /* LED */
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 600px at 90% 90%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #080a0d 0%, var(--bg) 55%, #07080b 100%);
}
body.site.theme-carbon::before,
body.site.theme-carbon::after{
  content:"";
  position: fixed;
  inset: -40vh -40vw;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 18%,
      transparent 0 220px,
      rgba(255,255,255,.06) 221px 223px,
      transparent 224px 250px,
      rgba(255,255,255,.05) 251px 253px,
      transparent 254px 290px,
      rgba(255,255,255,.04) 291px 293px,
      transparent 294px 100%);
  opacity:.95;
}
body.site.theme-carbon::after{
  transform: rotate(180deg);
  opacity:.55;
}

/* Allow disabling arcs via Template Style param */
body.site.arcs-off.theme-carbon::before,
body.site.arcs-off.theme-carbon::after{display:none !important;}

/* Sticky navbar option */
body.site.navbar-sticky .navbar-car{
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(10px);
}

body.site.theme-noir{
  /* C • Minimal Noir (преміум мінімалізм) */
  --bg:#0c0f14;
  --surface:#111722;
  --line: rgba(255,255,255,.08);
  --text:#f3f6ff;
  --muted: rgba(243,246,255,.65);
  --accent:#e10618;
  --accent2:#00b3ff;
  --shadow: 0 16px 50px rgba(0,0,0,.55);
  background: var(--bg);
}

body.site.theme-neon{
  /* D • Neon Edge (сучасний техно) */
  --bg:#07080c;
  --surface: rgba(255,255,255,.05);
  --line: rgba(255,255,255,.12);
  --text:#f5f8ff;
  --muted: rgba(245,248,255,.70);
  --accent:#ff1b2d;
  --accent2:#00b3ff;
  --shadow: 0 18px 70px rgba(0,0,0,.60);
  background:
    radial-gradient(700px 500px at 18% 18%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(700px 500px at 88% 82%, rgba(255,27,45,.08), transparent 55%),
    linear-gradient(180deg, #05060a 0%, var(--bg) 60%, #04050a 100%);
}

body.site.theme-track{
  /* B • Track Red */
  --bg:#0a0c0f;
  --surface: rgba(255,255,255,.05);
  --line: rgba(255,255,255,.12);
  --text:#f7f9ff;
  --muted: rgba(247,249,255,.70);
  --accent:#e10618;
  --accent2:#00b3ff;
  --shadow: 0 18px 60px rgba(0,0,0,.58);
  background:
    radial-gradient(800px 520px at 15% 10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #07080b 0%, var(--bg) 70%, #06070a 100%);
}
/* Red track line under header */
body.site.theme-track .header{
  position: relative;
  border-bottom: 1px solid var(--line);
}
body.site.theme-track .header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.9;
}

body.site.theme-ice{
  --bg:#F4F6F9;
  --surface:#FFFFFF;
  --line: rgba(15,23,42,.10);
  --text:#0F172A;
  --muted:#64748B;
  --accent:#E10600;
  --accent2:#00B3FF;
  background:
    radial-gradient(1000px 600px at 85% -10%, rgba(0,179,255,.12), transparent 60%),
    radial-gradient(900px 520px at 15% 0%, rgba(225,6,0,.08), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 55%, #EFF2F7 100%);
}

body.site.theme-silver{
  --bg:#EEF1F5;
  --surface:#FFFFFF;
  --line: rgba(15,23,42,.10);
  --text:#0B1220;
  --muted:#5B6B86;
  --accent:#E10600;
  --accent2:#0EA5E9;
  background:
    radial-gradient(1200px 720px at 75% -10%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(900px 520px at 20% 0%, rgba(225,6,0,.07), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 58%, #E7EBF1 100%);
}

body.site.theme-clean{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --line: rgba(15,23,42,.10);
  --text:#0F172A;
  --muted:#64748B;
  --accent:#E10600;
  --accent2:#00B3FF;
  background:
    radial-gradient(1200px 720px at 80% -10%, rgba(0,179,255,.08), transparent 62%),
    radial-gradient(900px 520px at 15% 0%, rgba(225,6,0,.06), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 60%, #F6F8FB 100%);
}

a{color:inherit}

.container{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

h1,h2,h3,h4,h5,h6{font-family: var(--font-headings); letter-spacing:.02em}

/* ===== Header / Hero ===== */
.header{
  position:relative;
  /* Sticky elements ("Закріплювати при прокрутці") do NOT work inside
     ancestors with overflow != visible. Allow sticky stacking to function. */
  overflow:visible;
  border-bottom: 1px solid var(--line);
}

.header::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:0;
}

/* Light mode: modern showroom (Ferrari/Porsche vibe) */
body.site.theme-light .header::before{
  background:
    radial-gradient(1100px 560px at 85% -10%, rgba(0,179,255,.14), transparent 55%),
    radial-gradient(900px 520px at 15% 0%, rgba(225,6,0,.10), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 75%);
}

/* Dark mode: night showroom */
body.site.theme-dark .header::before{
  background:
    linear-gradient(180deg, rgba(2,6,23,.72), rgba(2,6,23,.60)),
    radial-gradient(900px 480px at 70% 10%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    radial-gradient(900px 480px at 30% 0%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 60%);
}


.header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,
      transparent 0%,
      transparent 58%,
      color-mix(in srgb, var(--accent) 26%, transparent) 58%,
      color-mix(in srgb, var(--accent) 26%, transparent) 62%,
      transparent 62%,
      transparent 100%);
  opacity:.7;
  z-index:0;
}
body.site.theme-dark .header::after{ opacity:.25; }

.header__inner{
  position:relative;
  z-index:1;
  padding: 34px 0 22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Logo wrapper (optional shape/background/blur) */
.logoWrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: var(--logo-wrap-pad, 0px);
  border-radius: var(--logo-wrap-radius, 0px);
  background: color-mix(in srgb, var(--surface) calc(var(--logo-wrap-bg, 0) * 100%), transparent);
  border: 1px solid color-mix(in srgb, var(--line) calc(var(--logo-wrap-border, 0) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--logo-wrap-blur, 0px));
  backdrop-filter: blur(var(--logo-wrap-blur, 0px));
  /* IMPORTANT: keep the logo image inside the chosen shape */
  overflow: hidden;
  box-sizing: border-box;
}

body.site.logo-wrap-none .logoWrap{
  padding:0;
  background:transparent;
  border-color:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.site.logo-wrap-rounded{ --logo-wrap-radius: 14px; }
body.site.logo-wrap-squircle{ --logo-wrap-radius: 18px; }
body.site.logo-wrap-pill{ --logo-wrap-radius: 999px; }
body.site.logo-wrap-circle{ --logo-wrap-radius: 999px; }

/* Circle must always be a true circle, even if logo file is rectangular */
body.site.logo-wrap-circle .logoWrap{
  width: calc(var(--logo-size, 72px) + (var(--logo-wrap-pad, 0px) * 2));
  height: calc(var(--logo-size, 72px) + (var(--logo-wrap-pad, 0px) * 2));
}

/* Logo image: size + clipping + real opacity control */
.brand__logo,
.brandLogo__img{
  display:block;
  max-height: var(--logo-size, 72px);
  height: var(--logo-size, 72px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: var(--logo-opacity, 1);
  /* shadow intensity follows logo opacity, so "opacity" реально відчувається */
  filter: drop-shadow(0 10px 20px rgba(0,0,0, calc(.65 * var(--logo-opacity, 1))));
}

.brand__logo,
.brandLogo__img{
  transition: opacity .18s ease, filter .22s ease;
}

/* Dual logo swap for Auto (system) theme */
.brandLogo__img--dark{ display:none; }
body.site.theme-dark .brandLogo__img--dark{ display:block; }
body.site.theme-dark .brandLogo__img--light{ display:none; }

/* Logo blend modes (helps "merge" logo with background) */
body.site.logo-blend-none .brand__logo,
body.site.logo-blend-none .brandLogo__img{ mix-blend-mode: normal; }

body.site.logo-blend-soft .brand__logo,
body.site.logo-blend-soft .brandLogo__img{
  mix-blend-mode: normal;
  /* strength 0..1 via --logo-blend-strength */
  filter:
    drop-shadow(0 8px 18px rgba(0,0,0, calc((.18 + var(--logo-blend-strength, .6) * .28) * var(--logo-opacity, 1))))
    saturate(calc(1 - var(--logo-blend-strength, .6) * .14))
    contrast(calc(1 + var(--logo-blend-strength, .6) * .08));
}

/* Auto: multiply on light backgrounds, screen on dark themes */
body.site.logo-blend-auto .brand__logo,
body.site.logo-blend-auto .brandLogo__img{ mix-blend-mode: multiply; }
body.site.theme-carbon.logo-blend-auto .brand__logo,
body.site.theme-noir.logo-blend-auto .brand__logo,
body.site.theme-neon.logo-blend-auto .brand__logo,
body.site.theme-track.logo-blend-auto .brand__logo,
body.site.theme-carbon.logo-blend-auto .brandLogo__img,
body.site.theme-noir.logo-blend-auto .brandLogo__img,
body.site.theme-neon.logo-blend-auto .brandLogo__img,
body.site.theme-track.logo-blend-auto .brandLogo__img{ mix-blend-mode: screen; }

body.site.logo-blend-multiply .brand__logo,
body.site.logo-blend-multiply .brandLogo__img{ mix-blend-mode: multiply; }
body.site.logo-blend-screen .brand__logo,
body.site.logo-blend-screen .brandLogo__img{ mix-blend-mode: screen; }
body.site.logo-blend-overlay .brand__logo,
body.site.logo-blend-overlay .brandLogo__img{ mix-blend-mode: overlay; }

.brand__kicker{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: color-mix(in srgb, var(--text) 70%, transparent);
}

.brand__title{
  margin:2px 0 0;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.05;
}

.brand__title span{
  color: var(--accent);
}

/* If user enters "CAR HOUSE" as one line, make the second word red (nice look) */
.brand__title{
  display:flex;
  gap:.35em;
  flex-wrap:wrap;
}
.brand__title > span{color: var(--accent)}

/* Two-tone joined (delimiter split) should behave like one word */
.brand__title--joined{
  gap:0 !important;
  flex-wrap:nowrap !important;
  white-space:nowrap;
}
.brand__title--joined > span{white-space:nowrap;}

.footer__brand--joined{
  white-space:nowrap;
}
.footer__brand--joined > span{white-space:nowrap;}


.brand__subtitle{
  margin:6px 0 0;
  color: var(--muted);
  max-width: 70ch;
}
body.site.theme-dark .brand__subtitle{ color: rgba(237,237,237,.84); }

.header__cta{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* CTA buttons wrapper (can be placed in different areas) */
.header__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Unified CTA group wrapper (lets admin control layout/alignment/gap) */
.ctaGroup{display:flex;flex-wrap:wrap;gap: var(--cta-gap, 10px);}
.ctaGroup--layout-row{flex-wrap:nowrap;}
.ctaGroup--layout-stack{flex-direction:column;align-items:stretch;}
.ctaGroup--layout-stack .btn-car{width:100%;}
.ctaGroup--layout-justify{width:100%;justify-content:space-between;}
.ctaGroup--layout-justify .btn-car{flex:1 1 auto;}
.ctaGroup--layout-justify .btn-car + .btn-car{margin-left: var(--cta-gap, 10px);}

.ctaGroup--align-left{justify-content:flex-start;}
.ctaGroup--align-center{justify-content:center;}
.ctaGroup--align-right{justify-content:flex-end;}

/* Inline placement inside phones row */
.ctaInline{display:inline-flex;align-items:center;gap: var(--cta-gap, 10px);margin-right:10px;}
.ctaInline .ctaGroup{flex-wrap:nowrap;}
.ctaInline .btn-car{padding: 8px 12px; border-radius: 10px; font-size:.92rem;}
.header__buttons--below{
  margin-top: 12px;
}

.header__buttons--header-left{
  align-self: center;
  margin-right: 10px;
}

.header__buttons--header-between{
  align-self: center;
  margin: 0 10px;
}

.header__buttons--below-modules{
  margin-top: 14px;
}

/* Buttons inside the brand text block */
.brand__buttons{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Messenger icon buttons (near CTA2) */
.msg-icons{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:4px;
}

/* Inline placement inside phones row */
.msg-icons--inline{
  margin-left:0;
  margin-right:8px;
}
.msg-icons--sm{ --mi:34px; --mi-r:11px; }
.msg-icons--md{ --mi:40px; --mi-r:12px; }
.msg-icons--lg{ --mi:46px; --mi-r:14px; }

.msg-icon{
  width: var(--mi, 40px);
  height: var(--mi, 40px);
  border-radius: var(--mi-r, 12px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
body.site.theme-carbon .msg-icon,
body.site.theme-noir .msg-icon,
body.site.theme-neon .msg-icon,
body.site.theme-track .msg-icon{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 14px 28px rgba(0,0,0,.40);
  color: rgba(245,247,251,.92);
}

.msg-icon svg{ width: 20px; height: 20px; fill: currentColor; opacity:.95; }
.msg-icons--sm .msg-icon svg{ width:18px; height:18px; }
.msg-icons--lg .msg-icon svg{ width:22px; height:22px; }

.msg-icon:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(2,6,23,.14);
  border-color: color-mix(in srgb, var(--accent2) 35%, var(--line));
}

.msg-icon--telegram:hover{ color: var(--accent2); }
.msg-icon--viber:hover{ color: #7360F2; }
.msg-icon--tiktok:hover{ color: var(--accent); }
.msg-icon--instagram:hover{ color: #E1306C; }

/* Messenger icon variants */
.msg-icon--telegram{ --brand: #229ED9; }
.msg-icon--viber{ --brand: #7360F2; }
.msg-icon--tiktok{ --brand: var(--accent); }
.msg-icon--instagram{ --brand: #E1306C; }

/* Shapes */
.msg-icons--shape-circle .msg-icon{ border-radius: 999px; }
.msg-icons--shape-squircle .msg-icon{ border-radius: 18px; }
.msg-icons--shape-rounded .msg-icon{ border-radius: var(--mi-r, 12px); }

/* Styles */
.msg-icons--style-minimal .msg-icon{ /* current look */ }

/* Color modes */
.msg-icons--color-brand:not(.msg-icons--style-solid) .msg-icon{
  color: var(--brand);
}
body.site.theme-carbon .msg-icons--color-brand:not(.msg-icons--style-solid) .msg-icon,
body.site.theme-noir .msg-icons--color-brand:not(.msg-icons--style-solid) .msg-icon,
body.site.theme-neon .msg-icons--color-brand:not(.msg-icons--style-solid) .msg-icon,
body.site.theme-track .msg-icons--color-brand:not(.msg-icons--style-solid) .msg-icon{
  color: color-mix(in srgb, var(--brand) 92%, #fff);
}

.msg-icons--color-mono .msg-icon{ color: var(--text); }

.msg-icons--style-solid .msg-icon{
  background: var(--brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* Instagram looks best with its gradient */
.msg-icons--style-solid .msg-icon--instagram{
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 10%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.msg-icons--style-solid .msg-icon:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--brand) 45%, transparent);
}

.msg-icons--style-glass .msg-icon{
  background: color-mix(in srgb, var(--brand) 16%, rgba(255,255,255,.06));
  border-color: color-mix(in srgb, var(--brand) 35%, rgba(255,255,255,.18));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.msg-icons--style-glass .msg-icon:hover{
  border-color: color-mix(in srgb, var(--brand) 60%, rgba(255,255,255,.22));
  box-shadow: 0 16px 34px rgba(2,6,23,.16);
}

.msg-icons--style-neon .msg-icon{
  background: rgba(0,0,0,.22);
  border-color: color-mix(in srgb, var(--brand) 60%, rgba(255,255,255,.10));
  color: color-mix(in srgb, var(--brand) 75%, #fff);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 12px 26px rgba(0,0,0,.40),
    0 0 18px color-mix(in srgb, var(--brand) 35%, transparent);
}
.msg-icons--style-neon .msg-icon:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 16px 34px rgba(0,0,0,.46),
    0 0 26px color-mix(in srgb, var(--brand) 50%, transparent);
}

.msg-icons--style-gradient .msg-icon{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 70%, #fff 0%),
    color-mix(in srgb, var(--brand) 35%, #000 0%)
  );
  border-color: rgba(255,255,255,.10);
  color: #fff;
}
.msg-icons--style-gradient .msg-icon:hover{ border-color: rgba(255,255,255,.22); }


.btn-car{
  --btn-bg: var(--btn-primary-bg, var(--accent));
  --btn-fg: var(--btn-primary-fg, #fff);
  --btn-border: var(--btn-primary-border, transparent);

  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  padding: var(--btn-pad-y, 11px) var(--btn-pad-x, 18px);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-weight);
  text-transform: var(--btn-transform);
  letter-spacing: var(--btn-letter-spacing);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow: var(--btn-shadow);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

/* Role modifiers: primary/secondary */
.btn-car--primary{
  --btn-bg: var(--btn-primary-bg, var(--accent));
  --btn-fg: var(--btn-primary-fg, #fff);
  --btn-border: var(--btn-primary-border, transparent);
}

.btn-car--secondary{
  --btn-bg: var(--btn-secondary-bg, var(--accent2));
  --btn-fg: var(--btn-secondary-fg, #fff);
  --btn-border: var(--btn-secondary-border, transparent);
}


.btn-car:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--btn-bg) 35%, transparent);
}

.btn-car:active{ transform: translateY(0); }

.btn-car--sm{ padding: 9px 14px; border-radius: 11px; font-weight:800; font-size:.92rem; }
.btn-car--md{ padding: 11px 18px; border-radius: 12px; }
.btn-car--lg{ padding: 13px 22px; border-radius: 14px; font-size: 1.02rem; }

/* Manual mode must obey Контент → Посилання та кнопки (padding/typography).
   Size modifiers keep only font-size in manual mode. */
body.cta-manual-style .btn-car,
body.cta-manual-style .btn-car--sm,
body.cta-manual-style .btn-car--md,
body.cta-manual-style .btn-car--lg{
  padding: var(--btn-pad-y, 11px) var(--btn-pad-x, 18px) !important;
  font-weight: var(--btn-weight, 800) !important;
  text-transform: var(--btn-transform, none) !important;
  letter-spacing: var(--btn-letter-spacing, 0px) !important;
}

/* Only when radius is custom, lock it against preset/shape overrides */
body.cta-manual-style.cta-radius-custom .btn-car,
body.cta-manual-style.cta-radius-custom .btn-car--sm,
body.cta-manual-style.cta-radius-custom .btn-car--md,
body.cta-manual-style.cta-radius-custom .btn-car--lg{
  border-radius: var(--btn-radius) !important;
}

.btn-car--solid{ background: var(--btn-bg); border-color: transparent; }
.btn-car--outline{ background: transparent; border-color: color-mix(in srgb, var(--btn-bg) 70%, transparent); color: var(--btn-bg); box-shadow:none; }
.btn-car--ghost{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--btn-fg); box-shadow:none; }
body.site:not(.theme-ice):not(.theme-silver):not(.theme-clean) .btn-car--ghost{ background: rgba(255,255,255,.06); }
body.site.theme-ice .btn-car--ghost,
body.site.theme-silver .btn-car--ghost,
body.site.theme-clean .btn-car--ghost{ background: rgba(2,6,23,.04); border-color: rgba(2,6,23,.10); color: var(--text); }

.btn-car--glass{
  background: color-mix(in srgb, var(--btn-bg) 20%, var(--line));
  border-color: color-mix(in srgb, var(--btn-bg) 35%, rgba(255,255,255,.12));
  backdrop-filter: blur(10px);
}

/* Extra visual presets */
.btn-car--soft{
  background: color-mix(in srgb, var(--btn-bg) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--btn-bg) 30%, transparent);
  color: var(--btn-bg);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}
.btn-car--gradient{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--btn-bg) 92%, #fff 0%),
    color-mix(in srgb, var(--btn-bg) 55%, #000 0%)
  );
  border-color: rgba(255,255,255,.14);
  color: var(--btn-fg);
}
.btn-car--link{
  background: transparent;
  border-color: transparent;
  box-shadow:none;
  color: var(--btn-bg);
  padding: 8px 6px;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.btn-car--metal{
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.05)) , linear-gradient(135deg, var(--btn-bg), color-mix(in srgb, var(--btn-bg) 55%, #000));
  border-color: rgba(255,255,255,.18);
}

.btn-car--neon{
  background: transparent;
  border-color: var(--btn-bg);
  color: var(--btn-bg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-bg) 30%, transparent), 0 0 24px color-mix(in srgb, var(--btn-bg) 25%, transparent);
}

.btn-car--neon:hover{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-bg) 45%, transparent), 0 0 32px color-mix(in srgb, var(--btn-bg) 35%, transparent);
}

.btn-car--outline:hover{ background: color-mix(in srgb, var(--btn-bg) 10%, transparent); }
.btn-car--ghost:hover{ border-color: color-mix(in srgb, var(--btn-bg) 55%, transparent); }

/* Shapes (global modifiers) */
.btn-car--shape-auto{ /* keep per-size radius */ }
.btn-car--shape-rounded{ border-radius: 12px; }
.btn-car--shape-pill{ border-radius: 999px; }
.btn-car--shape-square{ border-radius: 6px; }
.btn-car--shape-squircle{ border-radius: 18px; }

/* Shadows (global modifiers) */
.btn-car--shadow-none{ box-shadow:none; }
.btn-car--shadow-soft{ box-shadow: 0 12px 26px color-mix(in srgb, var(--btn-bg) 22%, transparent); }
.btn-car--shadow-strong{ box-shadow: 0 18px 38px color-mix(in srgb, var(--btn-bg) 34%, transparent); }
.btn-car--shadow-glow{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-bg) 26%, transparent), 0 0 28px color-mix(in srgb, var(--btn-bg) 24%, transparent); }

/* Hover effects (global modifiers) */
.btn-car--hover-none:hover{ transform:none; }
.btn-car--hover-none:hover{ box-shadow: inherit; }
.btn-car--hover-lift:hover{ transform: translateY(-1px); }
.btn-car--hover-glow:hover{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-bg) 35%, transparent), 0 0 34px color-mix(in srgb, var(--btn-bg) 30%, transparent); }
.btn-car--hover-underline:hover{ text-decoration: underline; text-underline-offset: 5px; }

/* ===== Nav ===== */
.navbar-car{
  position:sticky;
  top:0;
  z-index:50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.navbar-car .moduletable,
.navbar-car ul{margin:0;padding:0}

.navbar-car ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding: 10px 0;
}

.navbar-car a{
  text-decoration:none;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 92%, transparent);
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
  transition: .2s ease;
}

.navbar-car a:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ===== Main ===== */
.main{
  padding: 26px 0 42px;
}

.panel{
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 86%, transparent));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.section-title__bar{
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.badge-car{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(0,179,255,.10);
  border: 1px solid rgba(0,179,255,.25);
}
body.site.theme-dark .badge-car{ color: rgba(237,237,237,.92); }

.badge-car--in-brand{
  margin-top: 10px;
  width: fit-content;
}

/* Joomla system messages spacing */
#system-message-container{margin-bottom: 14px}

/* ===== Footer ===== */
.footer{
  padding: 22px 0 34px;
  color: rgba(237,237,237,.78);
}

.footer__meta{
  border-top: 1px dashed rgba(255,255,255,.16);
  padding-top: 12px;
  margin-top: 12px;
  font-size: 14px;
}

/* Make default content readable */
.panel :is(h1,h2,h3,h4){color:var(--text)}
.panel p{color: rgba(237,237,237,.88)}
.panel a{color: var(--accent2)}
.panel a:hover{color: #7bdcff}

/* Small screens */
@media (max-width: 640px){
  
.header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,
      transparent 0%,
      transparent 58%,
      color-mix(in srgb, var(--accent) 26%, transparent) 58%,
      color-mix(in srgb, var(--accent) 26%, transparent) 62%,
      transparent 62%,
      transparent 100%);
  opacity:.7;
  z-index:0;
}
body.site.theme-dark .header::after{ opacity:.25; }

.header__inner{padding: 26px 0 18px}
  .brand__title{font-size: 28px}
}


/* Nav row (menu + search) */
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nav-left{flex:1 1 auto;min-width:240px}
.nav-right{flex:0 0 auto}

/* Breadcrumbs area */
.breadcrumbs .breadcrumb{margin:0}


/* Footer phone links */
.footer__tel{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.35)}
.footer__tel:hover{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.footer__sep{opacity:.55;padding:0 .35rem}


/* Logo layout variants */
.headerTop--icon{
  display:grid;
  grid-template-columns: 72px 1fr;
  grid-template-areas:
    "logo text"
    "cta  cta";
  gap: 12px 16px;
  align-items:center;
}
.headerTop--icon .brandLogo{ grid-area: logo; width:72px; height:72px; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.headerTop--icon .brandLogo__img{ width:64px; height:64px; object-fit:contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.55)); opacity: var(--logo-opacity, 1); }
.headerTop--icon .brandText{ grid-area: text; }
.headerTop--icon .header__cta--top{ grid-area: cta; margin-top:0; }
@media (min-width: 992px){
  .headerTop--icon{
    grid-template-columns: 88px 1fr auto;
    grid-template-areas: "logo text cta";
    align-items:center;
  }
  .headerTop--icon .header__cta--top{ justify-content:flex-end; }
}

.brand--stacked{ flex-direction:column; align-items:center; text-align:center; gap:10px; }
.brand--stacked .brand__logo{ width:92px; height:auto; }
.brand--wordmark .brand__logo{ width:160px; height:auto; }
.brand__link{ text-decoration:none; color:inherit; display:inline-flex; }
.brand__text{ min-width:0; }


/* ===== Layout controls from Template Style params ===== */
.brand__logo, .brandLogo__img, .brand__logoWordmark, .brand__logoStacked{
  max-height: var(--logo-size, 72px);
  height: auto;
  width: auto;
}

/* ==============================
   Logo circle: force full-bleed fill (no visible gaps)
   - Works for desktop + mobile + both logo layouts
   - Keeps wrapper padding/background/border but lets image bleed into padding
   ============================== */
body.site.logo-wrap-circle .logoWrap{
  /* guarantee a perfect circle even if any other rule changes box sizing */
  border-radius: 999px;
}

body.site.logo-wrap-circle .logoWrap > .brand__logo,
body.site.logo-wrap-circle .logoWrap > .brandLogo__img{
  /* Make the image cover the whole circular wrapper */
  width: calc(100% + (var(--logo-wrap-pad, 0px) * 2)) !important;
  height: calc(100% + (var(--logo-wrap-pad, 0px) * 2)) !important;
  max-width: none !important;
  max-height: none !important;
  margin: calc(var(--logo-wrap-pad, 0px) * -1) !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
}

/* Logo position */
.header__inner--logoPos-left{ justify-content:flex-start; }
.header__inner--logoPos-center{ justify-content:center; text-align:center; }
.header__inner--logoPos-right{ justify-content:flex-end; }

/* CTA position */
.header__cta--pos-left{ justify-content:flex-start; }
.header__cta--pos-center{ justify-content:center; }
.header__cta--pos-right{ justify-content:flex-end; }

/* Tagline below */
.badge-car--below{
  display:inline-flex;
  margin-top:10px;
}

/* Ensure theme colours always apply through CSS variables */
.btn-car{ background: var(--btn-bg, var(--accent)); color: var(--btn-fg, #fff); }
.badge-car{ border: 1px solid var(--line); }


/* ===== Header universal positioning ===== */
.header__inner{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
}
body.site.header-wrap .header__inner{ flex-wrap: wrap; }
body.site.header-nowrap .header__inner{ flex-wrap: nowrap; }

body.site.header-justify-left .header__inner{ justify-content:flex-start; }
body.site.header-justify-center .header__inner{ justify-content:center; }
body.site.header-justify-right .header__inner{ justify-content:flex-end; }
body.site.header-justify-space .header__inner{ justify-content:space-between; }

body.site.tagline-align-left .brand__tagline{ margin-left:0; margin-right:auto; }
body.site.tagline-align-center .brand__tagline{ margin-left:auto; margin-right:auto; }
body.site.tagline-align-right .brand__tagline{ margin-left:auto; margin-right:0; }

body.site.cta-align-left .header__cta{ margin-left:0; margin-right:auto; }
body.site.cta-align-center .header__cta{ margin-left:auto; margin-right:auto; }
body.site.cta-align-right .header__cta{ margin-left:auto; margin-right:0; }

/* Header layout presets */
body.site.header-layout-stacked .header__inner{ flex-direction: column; align-items: center; }
body.site.header-layout-stacked .header__cta{ width:100%; justify-content:center; }
body.site.header-layout-split .header__inner{ }
body.site.header-layout-flex .header__inner{ }

/* Make header items behave nicely when wrapped */
.headerItem{ min-width: 0; }
.headerItem--brand{ flex: 1 1 280px; }
.headerItem--logo{ flex: 0 0 auto; }
.header__cta{ display:flex; gap:10px; flex: 0 0 auto; }
.brand__tagline{ white-space: nowrap; }

/* ===== Header phones (now shown ABOVE kicker) ===== */
.brand__phones{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
  padding: 0;
}

.brandPhone{
  --hp-color: var(--accent);
  --hp-fg: #ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  font-size: 12.75px;
  line-height: 1;
  white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.brandPhone:hover{ transform: translateY(-1px); }
.brandPhone:active{ transform: translateY(0); opacity: .92; }

.brandPhone--minimal{
  color: var(--hp-color);
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 8px;
}

.brandPhone--outline{
  color: var(--hp-color);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--hp-color) 55%, transparent);
}

.brandPhone--solid{
  color: var(--hp-fg);
  background: var(--hp-color);
  border: 1px solid color-mix(in srgb, var(--hp-color) 70%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--hp-color) 20%, transparent);
}

.brandPhone--glass{
  color: var(--hp-color);
  background: color-mix(in srgb, var(--surface) 38%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  backdrop-filter: blur(10px);
}

.brandPhone--neon{
  color: var(--hp-color);
  background: color-mix(in srgb, var(--hp-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--hp-color) 60%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hp-color) 35%, transparent),
    0 10px 28px color-mix(in srgb, var(--hp-color) 22%, transparent),
    0 0 26px color-mix(in srgb, var(--hp-color) 18%, transparent);
}



.brandPhone--soft{
  color: color-mix(in srgb, var(--hp-color) 92%, #ffffff 8%);
  background: color-mix(in srgb, var(--hp-color) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--hp-color) 24%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.08);
}

.brandPhone--double{
  color: var(--hp-color);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--hp-color) 70%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--surface) 88%, transparent), 0 0 0 1px color-mix(in srgb, var(--hp-color) 18%, transparent);
}

.brandPhone--shadow{
  color: var(--hp-fg);
  background: color-mix(in srgb, var(--hp-color) 88%, #000 12%);
  border: 1px solid color-mix(in srgb, var(--hp-color) 80%, #000 20%);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--hp-color) 32%, transparent), 0 6px 14px rgba(0,0,0,.18);
}

.brandPhone--gradient{
  color: var(--hp-fg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--hp-color) 82%, #fff 18%) 0%, color-mix(in srgb, var(--hp-color) 92%, #000 8%) 100%);
  border: 1px solid color-mix(in srgb, var(--hp-color) 64%, transparent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--hp-color) 22%, transparent);
}

.brandPhone--badge{
  color: var(--hp-color);
  background: color-mix(in srgb, var(--hp-color) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--hp-color) 58%, transparent);
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .35px;
}

.brandPhone--darkglass{
  color: #fff;
  background: linear-gradient(180deg, rgba(22,22,28,.78), rgba(10,10,14,.64));
  border: 1px solid color-mix(in srgb, var(--hp-color) 34%, rgba(255,255,255,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(12px) saturate(120%);
}

.brandPhone--underline{
  color: var(--hp-color);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 2px 7px;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--hp-color) 78%, transparent);
}

.brandPhone--cut{
  color: var(--hp-fg);
  background: var(--hp-color);
  border: 1px solid color-mix(in srgb, var(--hp-color) 75%, transparent);
  border-radius: 14px 4px 14px 4px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--hp-color) 20%, transparent);
}

.brandPhone--glowline{
  color: var(--hp-color);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--hp-color) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hp-color) 14%, transparent), 0 0 22px color-mix(in srgb, var(--hp-color) 16%, transparent);
}

.brandPhone--retro{
  color: #22150a;
  background: linear-gradient(180deg, #ffd98b 0%, #f1b85b 100%);
  border: 1px solid #b77722;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 0 rgba(120,72,16,.18), 0 14px 24px rgba(82,48,10,.14);
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
}

.brandPhone--theme{
  --hp-theme-color: var(--accent);
  --hp-theme-fg: var(--on-accent, #ffffff);
  color: var(--hp-theme-color);
  border: 1px solid color-mix(in srgb, var(--hp-theme-color) 22%, var(--line));
}

.brandPhone--theme-auto,
.brandPhone--theme-soft{
  background: color-mix(in srgb, var(--hp-theme-color) 11%, var(--surface));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--hp-theme-color) 10%, transparent);
}

.brandPhone--theme-outline{
  background: transparent;
  border-color: color-mix(in srgb, var(--hp-theme-color) 58%, transparent);
}

.brandPhone--theme-solid,
.brandPhone--theme-accent{
  color: var(--hp-theme-fg);
  background: var(--hp-theme-color);
  border-color: color-mix(in srgb, var(--hp-theme-color) 72%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--hp-theme-color) 18%, transparent);
}

.brandPhone--theme-glass{
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  backdrop-filter: blur(10px);
}

@media (max-width: 768px){
  .brand__phones{ margin-bottom: 8px; }
  .brandPhone{ font-size: 12.5px; padding: 7px 9px; }
}

@media (max-width: 768px){
  .header__inner{ justify-content:flex-start; }
  /* Mobile: show subtitle (can be disabled via template param) */
  .brand__subtitle{
    display:block;
    font-size: 13px;
    line-height: 1.25;
    max-width: 100%;
    opacity: .92;
    /* truncation is controlled by body classes: subtitle-mobile-* */
  }
  body.site.hide-subtitle-mobile .brand__subtitle{ display:none; }

  /* Subtitle truncation options */
  body.site.subtitle-mobile-clamp2 .brand__subtitle,
  body.site.subtitle-mobile-clamp3 .brand__subtitle,
  body.site.subtitle-mobile-clamp4 .brand__subtitle{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.site.subtitle-mobile-clamp2 .brand__subtitle{ -webkit-line-clamp: 2; }
  body.site.subtitle-mobile-clamp3 .brand__subtitle{ -webkit-line-clamp: 3; }
  body.site.subtitle-mobile-clamp4 .brand__subtitle{ -webkit-line-clamp: 4; }
  body.site.subtitle-mobile-full .brand__subtitle{
    display:block;
    overflow: visible;
  }

  .brand__tagline{ white-space: normal; }
  .header__cta{ width:100%; justify-content:flex-start; }
}

/* =========================
   MAX GLOW ICON HOVER (PRO)
   Adjustable via:
   --msg-glow-strength (0..1.6)
   --msg-glow-anim (0/1) + body.msg-glow-anim
   ========================= */

.msg-icon{
  position: relative;
  overflow: visible;
}

/* Aura */
.msg-icon::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius: calc(var(--mi-r, 12px) + 10px);
  background:
    radial-gradient(closest-side,
      color-mix(in srgb, var(--brand) 65%, transparent),
      transparent 72%
    );
  filter: blur(calc(10px + (10px * var(--msg-glow-strength, 1))));
  opacity: 0;
  transform: scale(0.92);
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
  pointer-events:none;
}

/* Light ring */
.msg-icon::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--mi-r, 12px) + 2px);
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--brand) 88%, #fff 0%),
      color-mix(in srgb, var(--brand) 45%, #fff 0%),
      color-mix(in srgb, var(--brand) 88%, #fff 0%)
    );
  filter: blur(calc(10px + (8px * var(--msg-glow-strength, 1))));
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.msg-icon:hover{
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    0 18px 36px rgba(2,6,23,.16),
    0 0 calc(22px * var(--msg-glow-strength, 1)) color-mix(in srgb, var(--brand) 45%, transparent);
}

.msg-icon:hover::before{
  opacity: calc(.55 * var(--msg-glow-strength, 1));
  transform: scale(1.06);
}

.msg-icon:hover::after{
  opacity: calc(.32 * var(--msg-glow-strength, 1));
}

.msg-icon:hover svg{
  filter: drop-shadow(0 0 calc(8px * var(--msg-glow-strength, 1)) color-mix(in srgb, var(--brand) 70%, transparent));
}

/* Neon mode: push even more */
.msg-icons--style-neon .msg-icon:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 18px 36px rgba(0,0,0,.50),
    0 0 calc(34px * var(--msg-glow-strength, 1)) color-mix(in srgb, var(--brand) 58%, transparent);
}

/* Optional hover pulse */
@media (prefers-reduced-motion: no-preference){
  body.msg-glow-anim .msg-icon:hover::before{
    animation: msgGlowPulse 1.05s ease-in-out infinite alternate;
  }
  @keyframes msgGlowPulse{
    from { opacity: calc(.45 * var(--msg-glow-strength, 1)); transform: scale(1.02); }
    to   { opacity: calc(.70 * var(--msg-glow-strength, 1)); transform: scale(1.08); }
  }
}

/* Pinning removed in v1.6.11.19 */


/* Form controls inherit theme look */
input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea{
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  box-shadow: var(--input-shadow);
}
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}



/* =========================================================
   CTA Buttons (Header/Brand) — Single source of truth
   Source: Контент → Посилання та кнопки (CTA1/CTA2)
   These rules intentionally win over presets.
   ========================================================= */
body.site .ctaGroup .btn-car{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45em !important;
  padding: var(--btn-pad-y, 11px) var(--btn-pad-x, 18px) !important;
  border-radius: var(--btn-radius, 14px) !important;
  font-weight: var(--btn-weight, 700) !important;
  text-transform: var(--btn-transform, none) !important;
  letter-spacing: var(--btn-letter-spacing, 0px) !important;
  line-height: 1.1 !important;
  text-decoration:none !important;
  border-width:1px !important;
  border-style:solid !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease !important;
}

/* Map button role to tokens */
body.site .ctaGroup .btn-car--primary{
  --cta-bg: var(--cta1-bg, var(--btn-primary-bg, var(--accent))) !important;
  --cta-fg: var(--cta1-fg, var(--btn-primary-fg, #fff)) !important;
  --cta-border: var(--cta1-bg, var(--btn-primary-border, transparent)) !important;
}
body.site .ctaGroup .btn-car--secondary{
  --cta-bg: var(--cta2-bg, var(--btn-secondary-bg, var(--accent2))) !important;
  --cta-fg: var(--cta2-fg, var(--btn-secondary-fg, #fff)) !important;
  --cta-border: var(--cta2-bg, var(--btn-secondary-border, transparent)) !important;
}

/* Per-button style variants (from CTA1/CTA2 settings) */
body.site .ctaGroup .btn-car--solid{
  background: var(--cta-bg) !important;
  color: var(--cta-fg) !important;
  border-color: transparent !important;
}
body.site .ctaGroup .btn-car--outline{
  background: transparent !important;
  color: var(--cta-bg) !important;
  border-color: var(--cta-border) !important;
}
body.site .ctaGroup .btn-car--ghost{
  background: transparent !important;
  color: var(--cta-bg) !important;
  border-color: transparent !important;
}
body.site .ctaGroup .btn-car--soft{
  background: color-mix(in srgb, var(--cta-bg) 14%, transparent) !important;
  color: var(--cta-bg) !important;
  border-color: transparent !important;
}

/* Shape (global) */
body.site .ctaGroup .btn-car--shape-square   { border-radius: 8px !important; }
body.site .ctaGroup .btn-car--shape-squircle { border-radius: 18px !important; }
body.site .ctaGroup .btn-car--shape-pill     { border-radius: 999px !important; }

/* Shadow (global) */
body.site .ctaGroup .btn-car--shadow-none   { box-shadow: none !important; }
body.site .ctaGroup .btn-car--shadow-soft   { box-shadow: 0 10px 26px rgba(0,0,0,.14) !important; }
body.site .ctaGroup .btn-car--shadow-strong { box-shadow: 0 16px 40px rgba(0,0,0,.22) !important; }
body.site .ctaGroup .btn-car--shadow-glow   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta-bg) 35%, transparent) !important; }

/* Size classes affect font-size only (so padding stays from menu) */
body.site .ctaGroup .btn-car--sm { font-size: 12px !important; }
body.site .ctaGroup .btn-car--md { font-size: 14px !important; }
body.site .ctaGroup .btn-car--lg { font-size: 16px !important; }

/* Hover effects (global) */
body.site .ctaGroup .btn-car--hover-none:hover{
  transform:none !important;
  filter:none !important;
}
body.site .ctaGroup .btn-car--hover-lift:hover{
  transform: translateY(-2px) !important;
  filter: brightness(.97) !important;
}
body.site .ctaGroup .btn-car--hover-glow:hover{
  box-shadow: 0 18px 46px rgba(0,0,0,.25), 0 0 0 3px color-mix(in srgb, var(--cta-bg) 35%, transparent) !important;
}
body.site .ctaGroup .btn-car--hover-underline:hover{
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}