/*
Theme Name: Lika Ads
Theme URI: https://likaads.com
Author: Lika Ads
Description: قالب اختصاصی آژانس تبلیغات لیکا ادز
Version: 1.0
Text Domain: lika-ads
*/

* { box-sizing: border-box; }

:root{
  --primary-dark: #2845D6;
  --primary-light: #3D5CFF;
  --accent: #7DD3FC;
  --ink: #0e1526;
  --muted: #5b6472;
  --border: #e7eaf4;
  --bg-alt: #f6f7fb;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  direction: rtl;
  background: #ffffff;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: 'Vazirmatn', Tahoma, sans-serif; }
p { margin: 0; }
button { font-family: 'Vazirmatn', Tahoma, sans-serif; cursor: pointer; border: none; background: none; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-accent { background: var(--primary-dark); color: #fff; box-shadow: 0 12px 24px -8px rgba(30,58,232,.5); }
.btn-gold { background: var(--primary-dark); color: #fff; box-shadow: 0 12px 24px -8px rgba(30,58,232,.5); }
.btn-gold:hover { transform: translateY(-1px); }
/* deliberate exception: the main "free consultation" CTA stays gold for contrast on blue hero/CTA bands */
.btn-cta-gold { background: #263c6b !important; color: #fff !important; box-shadow: 0 12px 24px -8px rgba(38,60,107,.5) !important; }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.35); }

.card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.eyebrow {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}

@keyframes playPulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes likaadsBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

@keyframes likaadsChase {
  0%, 76%, 100% { opacity: .3; }
  14% { opacity: 1; }
}

/* ===== form polish (used across intake/service forms) ===== */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], textarea, select {
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary-dark) !important;
  box-shadow: 0 0 0 3px rgba(30,58,232,.12);
}
.likaads-field-group {
  background: var(--bg-alt);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.likaads-field-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.likaads-field-group-title .likaads-fg-icon {
  width: 30px; height: 30px; border-radius: 9px; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.likaads-fg-icon svg [stroke] { stroke: var(--muted); }
.likaads-fg-icon svg [fill]:not([fill="none"]) { fill: var(--muted);
}
.likaads-file-drop {
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fff;
}
.likaads-file-drop:hover, .likaads-file-drop.has-file { border-color: var(--primary-dark); background: #eef1ff; }
.likaads-faq-summary:hover { background: #eef1ff; }

/* ===== blog article typography ===== */
.likaads-article { font-size: 16px; line-height: 2; color: #333c4e; }
.likaads-article h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 40px 0 16px; }
.likaads-article h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 32px 0 12px; }
.likaads-article p { margin: 0 0 20px; }
.likaads-article ul, .likaads-article ol { margin: 0 0 20px; padding-right: 22px; display: flex; flex-direction: column; gap: 10px; }
.likaads-article li { line-height: 1.9; }
.likaads-article strong { color: var(--ink); }
.likaads-article blockquote { margin: 28px 0; padding: 18px 22px; background: var(--bg-alt); border-right: 3px solid var(--primary-dark); border-radius: 10px; font-size: 15px; color: var(--muted); }
.likaads-article a { color: var(--primary-dark); text-decoration: underline; }
.likaads-article img { border-radius: 14px; margin: 8px 0 24px; }
.likaads-tg-type-card { transition: transform .15s ease, box-shadow .15s ease; }
.likaads-tg-type-card:hover { transform: translateY(-2px); }

.likaads-contact-card:hover { background: #e4eafc; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(15,23,42,.18); }

.likaads-service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -16px rgba(15,23,42,.22); }
.likaads-service-card:hover .likaads-service-icon { transform: scale(1.08) rotate(-4deg); }

.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--bg-alt); }
.page-numbers.current { background: var(--primary-dark); color: #fff; }
.page-numbers.dots { background: none; }

/* ===== bottom nav (mobile mini-app tab bar) ===== */
.likaads-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  background: #fff;
  border-top: 1px solid #eef0f7;
  box-shadow: 0 -4px 16px -8px rgba(15,23,42,.12);
}
.likaads-bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.likaads-bn-item svg { width: 22px; height: 22px; }
.likaads-bn-item.is-active { color: var(--primary-dark); }

/* ===== mobile nav (hamburger) ===== */
.likaads-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.likaads-mobile-toggle:hover { background: var(--bg-alt); }
.likaads-mobile-nav {
  display: none;
}
.likaads-mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.likaads-mobile-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
#likaads-mobile-close {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.likaads-mobile-nav-list {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.likaads-mobile-nav-list a {
  display: block;
  padding: 18px 2px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.likaads-mobile-nav-cta {
  display: block;
  text-align: center;
  margin-top: auto;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
}

/* ===== responsive ===== */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .hero-grid { grid-template-columns: 1fr !important; padding-top: 28px !important; padding-bottom: 40px !important; }
  .likaads-hero-media { aspect-ratio: 16/10 !important; }
  nav.primary-nav { display: none !important; }
  header .container[style*="height:76px"] { height: 64px !important; position: relative; }
  .likaads-logo-link { position: absolute !important; right: 52px; top: 50%; transform: translateY(-50%); justify-self: unset; }
  .likaads-logo-text { display: none !important; }
  .likaads-header-login { position: absolute !important; top: 50%; left: 0; transform: translateY(-50%); padding: 8px 14px !important; font-size: 12.5px !important; }
  .likaads-mobile-toggle {
    display: flex !important;
    position: absolute !important;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .likaads-mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: linear-gradient(160deg,var(--primary-dark) 0%,var(--ink) 100%);
    padding: 20px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .likaads-mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .likaads-process-row { flex-direction: column !important; align-items: stretch !important; }
  .likaads-process-row > div[style*="flex:1"] { padding: 0 !important; text-align: center; }
  .likaads-process-num { margin-bottom: 28px !important; }
  .likaads-process-arrow { display: none !important; }
  .likaads-process-arrow-v { display: flex !important; justify-content: center; margin: 6px 0; }
  .likaads-testi-track, .likaads-blog-track { flex-wrap: nowrap; }
  .likaads-services-row { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; }
  .likaads-services-row .likaads-service-card > div { padding: 14px 6px 12px !important; }
  .likaads-services-row .likaads-svc-icon-wrap,
  .likaads-services-row .likaads-service-icon { width: 38px !important; height: 38px !important; }
  .likaads-services-row .likaads-svc-title { font-size: 12.5px !important; margin-bottom: 4px !important; }
  .likaads-services-row .likaads-svc-desc { display: none !important; }
  .likaads-services-row .likaads-svc-status { font-size: 10.5px !important; padding: 7px 2px !important; }
  .likaads-float-support { display: none !important; }
  .likaads-bottom-nav { display: flex; }
  body { padding-bottom: 60px; }
}
@media (max-width: 640px) {
  .likaads-testi-card, .likaads-blog-track > a.card { width: 100% !important; }
  .likaads-tg-type-row { flex-wrap: wrap !important; }
  .likaads-tg-type-card {
    flex: 1 1 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: right !important;
    gap: 14px !important;
    padding: 14px 16px !important;
  }
  .likaads-tg-type-card > span:nth-child(3) { margin-top: 0 !important; }
  .likaads-about-intro { grid-template-columns: 1fr !important; gap: 28px !important; }
  .likaads-about-intro > div:last-child { padding-top: 0 !important; }
  .likaads-about-feature { flex-direction: column !important; text-align: center !important; }
  .likaads-about-feature > div:first-child { text-align: center !important; }
}
@media (max-width: 480px) {
  .likaads-interest-label { padding: 14px 6px !important; }
}

/* items_wrap:'%3$s' means wp_nav_menu never prints the <ul class="likaads-mobile-nav-list">
   wrapper itself (with or without a real menu assigned) — only the bare <li><a> items (or
   bare <a> tags from the fallback), as direct children of the panel. Style both shapes. */
#likaads-mobile-nav li { list-style: none; }
#likaads-mobile-nav li a,
#likaads-mobile-nav > a:not(.likaads-mobile-nav-cta) {
  display: block;
  padding: 18px 2px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* =====================================================================
   HOMEPAGE (front-page.php) — classes prefixed lh-
   Spacing scale 8/12/16/24/32/48/64/96 · radius 12/18/24 · one border + shadow style for all cards
   ===================================================================== */
:root {
  --navy: #132453;
  --navy-deep: #16204a;
  --section-y: 96px;
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px;
  --shadow-hover: 0 14px 28px -16px rgba(15,23,42,.16);
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #7d98ff; outline-offset: 3px; border-radius: 8px;
}
.btn-primary { background: var(--primary-dark); color: #fff; box-shadow: 0 8px 18px -10px rgba(40,69,214,.45); }
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 22px -10px rgba(40,69,214,.55); }
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.16); }
.lh-hero .btn-ghost, .lh-final .btn-ghost { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); }
.btn-outline { background: #fff; color: var(--primary-dark); border: 1px solid #cdd5f7; }
.btn-outline:hover { border-color: var(--primary-dark); }

.lh-section { padding: var(--section-y) 0; }
.lh-section--alt { background: var(--bg-alt); }
.lh-section--navy { background: var(--navy-deep); }
.lh-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.lh-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-align: right; margin-bottom: 40px; }
.lh-eyebrow { display: block; font-size: 13px; font-weight: 700; color: var(--primary-dark); margin-bottom: 8px; }
.lh-h2 { font-size: 30px; font-weight: 800; line-height: 1.5; letter-spacing: -.2px; }
.lh-lead { font-size: 17px; font-weight: 700; color: var(--primary-dark); margin-top: 12px; }
.lh-more { font-size: 14px; font-weight: 700; color: var(--primary-dark); }
.lh-more:hover { text-decoration: underline; }
.lh-narrow { max-width: 800px; }
.lh-inline-link { text-align: center; margin-top: 32px; font-size: 14.5px; color: var(--muted); }
.lh-inline-link a { color: var(--primary-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.lh-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.lh-pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #eceef4; color: var(--muted); }
.lh-pill--solid { background: var(--primary-dark); color: #fff; }
.lh-pill--soft { background: #eaeefe; color: var(--primary-dark); align-self: flex-start; }

/* hero */
.lh-hero { background: var(--navy); padding: 72px 0 128px; overflow: hidden; }
.lh-hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 40px; align-items: center; }
.lh-badge { display: inline-block; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 999px; margin-bottom: 20px; }
.lh-hero h1 { font-size: 40px; line-height: 1.45; font-weight: 800; letter-spacing: -.4px; color: #fff; margin-bottom: 20px; }
.lh-hero p { font-size: 16.5px; line-height: 2; color: rgba(255,255,255,.76); max-width: 540px; margin-bottom: 32px; }
.lh-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.lh-cta-row--center { justify-content: center; }
.lh-hero-media img { width: 100%; height: auto; max-width: 648px; margin-inline: auto; }

/* stats overlap the hero's bottom edge */
.lh-stats-wrap { margin-top: -64px; position: relative; z-index: 2; }
.lh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 10px 24px -16px rgba(15,23,42,.14); }
.lh-stats li { text-align: center; padding: 28px 16px; }
.lh-stats li + li { border-right: 1px solid #eef0f6; }
.lh-stat-num { font-size: 32px; font-weight: 800; color: var(--primary-dark); line-height: 1.3; font-variant-numeric: tabular-nums; }
.lh-stat-label { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* services */
.lh-services { max-width: 780px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.lh-service { padding: 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.lh-service h3 { font-size: 20px; font-weight: 800; margin: 12px 0 8px; }
.lh-service p { font-size: 14px; line-height: 1.9; color: var(--muted); margin-bottom: 24px; }
.lh-service .btn { margin-top: auto; font-size: 14px; padding: 12px 22px; }
.lh-service-icon { width: 60px; height: 60px; border-radius: var(--r-md); background: #eef1fd; color: var(--primary-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.lh-service--active { border: 2px solid var(--primary-dark); }
.lh-service--active:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.lh-service--soon { border: 1.5px solid #cfd8fb; }
.lh-service--soon .lh-pill { background: #eaeefe; color: var(--primary-dark); }

/* why */
.lh-why { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; }
.lh-why-media { background: #11265a; border-radius: var(--r-lg); overflow: hidden; }
.lh-why-media img { width: 100%; height: auto; filter: saturate(.88) brightness(.93); }
.lh-checklist { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.lh-checklist li { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; }
.lh-checklist li + li { border-top: 1px solid #eef0f4; }
.lh-check { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #eaecfd; color: var(--primary-dark); font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.lh-checklist strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.lh-checklist li div span { font-size: 13.5px; line-height: 1.85; color: var(--muted); }

/* benefits */
.lh-feat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.lh-feat-card { padding: 28px 20px; text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.lh-feat-card:hover { transform: translateY(-4px); border-color: var(--primary-dark); box-shadow: var(--shadow-hover); }
.lh-icon-box { width: 64px; height: 64px; border-radius: var(--r-md); background: #eef1fd; color: var(--primary-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; transition: transform .25s ease, background .25s ease; }
.lh-feat-card:hover .lh-icon-box { transform: scale(1.08) translateY(-2px); background: #e2e8ff; }
.lh-feat-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.lh-feat-card p { font-size: 13px; line-height: 1.85; color: var(--muted); }

/* process */
.lh-section--navy .lh-eyebrow { color: rgba(255,255,255,.75); }
.lh-section--navy .lh-h2 { color: #fff; }
.lh-steps { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.lh-steps > li { list-style: none; }
.lh-steps > li::marker { content: ""; }
.lh-step { flex: 1 1 0; min-width: 0; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 28px 22px; }
.lh-step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--primary-dark); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.lh-step h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.lh-step p { font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.66); }
.lh-arrow { flex: 0 0 62px; display: flex; align-items: center; justify-content: center; }
.lh-arrow-v { display: none; }
@keyframes lhFlow { 0%, 100% { opacity: .4; } 40% { opacity: 1; } }
.lh-chev, .lh-dots { animation: lhFlow 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }

/* case studies (only rendered when real data is added) */
.lh-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.lh-case { padding: 28px; }
.lh-case h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.lh-case dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0 0; }
.lh-case dt { font-size: 12px; color: var(--muted); }
.lh-case dd { margin: 0; font-weight: 800; color: var(--primary-dark); }
.lh-case-insight { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* testimonials */
.lh-testi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.lh-testi-card { margin: 0; padding: 26px; display: flex; flex-direction: column; }
.lh-stars { color: #f5a524; font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.lh-testi-card blockquote { margin: 0 0 20px; font-size: 14px; line-height: 2; color: #3a4256; flex: 1; }
.lh-testi-card figcaption { display: flex; align-items: center; gap: 12px; }
.lh-avatar { width: 38px; height: 38px; border-radius: 50%; background: #eaecfd; color: var(--primary-dark); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lh-testi-card strong { display: block; font-size: 13.5px; }
.lh-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.lh-testi-result { margin: 0 0 16px; font-size: 13px; font-weight: 700; color: var(--primary-dark); background: #eef1fd; border-radius: 10px; padding: 8px 12px; }
.lh-testi-card small { font-size: 12px; color: #6b7388; }

/* blog */
.lh-blog { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.lh-post { overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.lh-post:hover { transform: translateY(-4px); border-color: var(--primary-dark); box-shadow: var(--shadow-hover); }
.lh-post-img { display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--navy), var(--primary-dark)); overflow: hidden; }
.lh-post-img img { width: 100%; height: 100%; object-fit: cover; }
.lh-post-img--empty { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); }
.lh-post-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lh-post-body h3 { font-size: 16px; font-weight: 700; line-height: 1.7; }
.lh-post-body h3 a:hover { color: var(--primary-dark); }
.lh-post-body p { font-size: 13.5px; line-height: 1.9; color: var(--muted); }
.lh-post-body .lh-more { margin-top: auto; }

/* faq */
.lh-faq { display: flex; flex-direction: column; gap: 12px; }
.lh-faq-item { overflow: hidden; border-radius: 14px; transition: background .2s ease, border-color .2s ease; }
.lh-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.lh-faq-item summary::-webkit-details-marker { display: none; }
.lh-faq-item summary svg { flex-shrink: 0; color: var(--primary-dark); transition: transform .25s ease; }
.lh-faq-item[open] { background: #f3f5ff; border-color: #c7d1fb; }
.lh-faq-item[open] summary { color: var(--primary-dark); }
.lh-faq-item[open] summary svg { transform: rotate(180deg); }
.lh-faq-a { padding: 0 24px 22px; font-size: 14px; line-height: 2; color: var(--muted); }
.lh-faq-item[open] .lh-faq-a { animation: lhFade .3s ease; }
@keyframes lhFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* final CTA */
.lh-final { padding: var(--section-y) 0; }
.lh-final-box { background: var(--navy); border-radius: 28px; padding: 64px 48px; text-align: center; }
.lh-final-box h2 { font-size: 30px; font-weight: 800; color: #fff; margin-bottom: 12px; line-height: 1.5; }
.lh-final-box p { font-size: 15.5px; color: rgba(255,255,255,.82); margin-bottom: 32px; }

/* footer */
.lh-footer { background: var(--navy-deep); padding: 72px 0 32px; color: #aab2c8; }
.lh-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.lh-footer h4, .lh-footer .lh-footer-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 20px; }
.lh-footer ul { display: flex; flex-direction: column; gap: 13px; font-size: 13.5px; line-height: 1.9; }
.lh-footer a:hover { color: #fff; }
.lh-footer-logo img { height: 36px; width: auto; filter: brightness(0) invert(1); margin-bottom: 16px; }
.lh-footer-about { font-size: 13.5px; line-height: 2; max-width: 300px; margin-bottom: 20px; }
.lh-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 28px; font-size: 12.5px; color: #8891a8; }
.lh-footer-bottom div { display: flex; gap: 20px; }

/* homepage responsive */
@media (max-width: 1000px) {
  .lh-feat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lh-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .lh-footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --section-y: 64px; }
  .lh-hero { padding: 40px 0 96px; }
  .lh-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .lh-hero h1 { font-size: 30px; }
  .lh-hero p { font-size: 15px; }
  .lh-hero-media { order: -1; }
  .lh-hero-media img { max-width: 420px; }
  .lh-stats-wrap { margin-top: -48px; }
  .lh-stats li { padding: 20px 6px; }
  .lh-stat-num { font-size: 26px; }
  .lh-stat-label { font-size: 12px; }
  .lh-h2 { font-size: 24px; }
  .lh-head { margin-bottom: 32px; }
  .lh-why { grid-template-columns: 1fr; }
  .lh-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .lh-arrow { display: none; }
  .lh-final-box { padding: 44px 24px; }
  .lh-final-box h2 { font-size: 24px; }
  .lh-footer { padding: 48px 0 24px; }
  .lh-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lh-footer-bottom { justify-content: center; text-align: center; }
  .likaads-header-cta { display: none !important; }
}
@media (max-width: 640px) {
  .lh-steps { grid-template-columns: 1fr; gap: 0; }
  .lh-arrow { display: flex; height: 44px; }
  .lh-arrow svg:not(.lh-arrow-v) { display: none; }
  .lh-arrow-v { display: block; }
}
@media (max-width: 480px) {
  .lh-feat { grid-template-columns: 1fr; }
  .lh-cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .lh-footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .lh-chev, .lh-dots { opacity: 1; }
}

/* sliders (JS adds .is-carousel; otherwise they stay plain grids) */
.is-carousel { overflow: hidden; direction: ltr; padding: 8px 0 14px; margin: -8px 0 -14px; }
.is-carousel .lh-testi, .is-carousel .lh-blog { display: flex; gap: 16px; will-change: transform; }
.is-carousel .lh-testi-card, .is-carousel .lh-post { flex: 0 0 auto; direction: rtl; text-align: right; }

/* =====================================================================
   MOBILE REFINEMENT — phones only (max-width: 767px). Nothing here applies at 768px and up.
   ===================================================================== */
@media (max-width: 767px) {
  :root { --section-y: 52px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* header density + tap targets */
  .likaads-topbar { font-size: 12.5px !important; padding: 8px 12px !important; }
  header .container[style*="height:76px"] { height: 58px !important; }
  .likaads-logo-link img { height: 30px !important; }
  .likaads-mobile-toggle { width: 44px; height: 44px; }
  .likaads-header-login { padding: 8px 12px !important; font-size: 12.5px !important; }
  #likaads-mobile-close { width: 44px; height: 44px; }

  /* bottom nav: safe area + comfortable targets */
  .likaads-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .likaads-bn-item { min-height: 56px; justify-content: center; padding: 6px 4px; }

  /* hero: shorter, art smaller, CTAs stacked with clear primary */
  .lh-hero { padding: 24px 0 64px; }
  .lh-hero-grid { gap: 20px; }
  .lh-hero-media img { max-width: 300px; }
  .lh-badge { font-size: 12px; padding: 6px 14px; margin-bottom: 14px; }
  .lh-hero h1 { font-size: 26px; line-height: 1.55; letter-spacing: 0; margin-bottom: 14px; }
  .lh-hero p { font-size: 14.5px; line-height: 1.95; margin-bottom: 22px; }
  .lh-cta-row { flex-direction: column; gap: 10px; }
  .lh-cta-row .btn { width: 100%; justify-content: center; min-height: 50px; padding: 13px 20px; font-size: 15px; }
  .lh-hero .btn-ghost { font-weight: 600; }

  /* stats */
  .lh-stats-wrap { margin-top: -36px; }
  .lh-stats li { padding: 16px 4px; }
  .lh-stat-num { font-size: 24px; }
  .lh-stat-label { font-size: 11.5px; }

  /* rhythm + type */
  .lh-head { margin-bottom: 26px; }
  .lh-h2 { font-size: 21px; line-height: 1.6; }
  .lh-lead { font-size: 15px; }
  .lh-eyebrow { font-size: 12px; }

  /* services / why */
  .lh-service { padding: 24px 20px; }
  .lh-service p { margin-bottom: 18px; }
  .lh-service .btn { width: 100%; justify-content: center; min-height: 48px; }
  .lh-why { gap: 20px; }
  .lh-checklist li { padding: 14px 16px; gap: 12px; }
  .lh-checklist strong { font-size: 14.5px; }
  .lh-checklist li div span { font-size: 13px; line-height: 1.8; }

  /* benefits: compact horizontal cards instead of tall stacked ones */
  .lh-feat { gap: 10px; }
  .lh-feat-card { padding: 16px 14px; }
  .lh-icon-box { width: 48px; height: 48px; margin-bottom: 10px; }
  .lh-icon-box svg { width: 24px; height: 24px; }
  .lh-feat-card h3 { font-size: 14px; margin-bottom: 4px; }
  .lh-feat-card p { font-size: 12.5px; line-height: 1.8; }

  /* process */
  .lh-step { padding: 20px 16px; }
  .lh-step-num { width: 38px; height: 38px; margin-bottom: 12px; }
  .lh-step h3 { font-size: 15px; }
  .lh-arrow { height: 34px; }

  /* testimonials / blog */
  .lh-testi-card { padding: 20px; }
  .lh-testi-card blockquote { font-size: 13.5px; line-height: 1.95; margin-bottom: 16px; }
  .lh-post-img { aspect-ratio: 16 / 9; }
  .lh-post-body { padding: 18px; }
  .lh-post-body h3 { font-size: 15px; }
  .lh-head--row { margin-bottom: 26px; }

  /* faq */
  .lh-faq { gap: 10px; }
  .lh-faq-item summary { padding: 14px 16px; font-size: 14px; min-height: 52px; line-height: 1.7; }
  .lh-faq-a { padding: 0 16px 18px; font-size: 13.5px; }

  /* final CTA */
  .lh-final-box { padding: 36px 20px; border-radius: 22px; }
  .lh-final-box h2 { font-size: 21px; }
  .lh-final-box p { font-size: 14px; margin-bottom: 22px; }

  /* footer */
  .lh-footer { padding: 40px 0 20px; }
  .lh-footer-grid { gap: 28px; padding-bottom: 32px; }
  .lh-footer ul { gap: 4px; }
  .lh-footer ul a { display: inline-block; padding: 8px 0; }
  .lh-footer h4, .lh-footer .lh-footer-title { margin-bottom: 10px; }
}
@media (max-width: 480px) {
  .lh-feat { grid-template-columns: 1fr; }
  .lh-feat-card { display: flex; align-items: center; gap: 14px; text-align: right; }
  .lh-feat-card .lh-icon-box { margin: 0; flex-shrink: 0; }
}

/* =====================================================================
   AUTH PAGE (login / OTP) — classes prefixed la-. Only affects the page that
   uses page-templates/login.php (header/footer/bottom-nav swaps are body.likaads-auth).
   One "stage": form panel (right) + compact navy trust panel (left).
   ===================================================================== */
body.likaads-auth { padding-bottom: 0; background: #f3f5fb; }
body.likaads-auth .likaads-bottom-nav,
body.likaads-auth .likaads-float-support { display: none !important; }

/* header: logo + 2 quiet links */
.la-header { background: rgba(255,255,255,.9); border-bottom: 1px solid #e9ecf5; }
.la-header-in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.la-logo { display: inline-flex; align-items: center; min-height: 44px; }
.la-logo img { height: 32px; width: auto; }
.la-logo span { font-size: 19px; font-weight: 800; }
.la-header-links { display: flex; align-items: center; gap: 2px; }
.la-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #4a5268; transition: background .15s ease, color .15s ease; }
.la-link:hover { background: #eef1fb; color: var(--primary-dark); }
.la-link--back svg { transition: transform .15s ease; }
.la-link--back:hover svg { transform: translateX(-3px); }

.la-main { display: flex; align-items: flex-start; padding: 28px 0 44px; }
.la-main > .container { width: 100%; max-width: 1180px; }

/* the stage */
.la-stage { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 0; background: #fff; border: 1px solid #e4e8f4; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 48px -32px rgba(19,36,83,.28); }
.la-form-side { display: flex; align-items: center; justify-content: center; padding: 36px 56px 60px; }
.la-panel { width: 100%; max-width: 440px; }

/* step indicator (inside the form panel) */
.la-steps { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: #7a8299; }
.la-steps li { display: inline-flex; align-items: center; gap: 8px; }
.la-steps-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #cdd3e6; font-size: 12px; font-weight: 800; color: #7a8299; background: #fff; transition: all .2s ease; }
.la-steps li.is-active { color: var(--ink); }
.la-steps li.is-active .la-steps-n { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.la-steps li.is-done { color: var(--primary-dark); }
.la-steps li.is-done .la-steps-n { background: #eaeefe; border-color: #eaeefe; color: var(--primary-dark); }
.la-steps-line { flex: 0 0 32px; height: 2px; border-radius: 2px; background: #dfe3f0; }
.la-steps-line.is-done { background: var(--primary-dark); }
.la-steps-m { display: none; }

.la-pill { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--primary-dark); background: #eaeefe; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.la-h1 { font-size: 26px; font-weight: 800; line-height: 1.45; letter-spacing: -.2px; margin-bottom: 8px; }
.la-sub { font-size: 14.5px; line-height: 1.9; color: var(--muted); margin-bottom: 26px; }
.la-phone-shown { font-weight: 700; color: var(--ink); letter-spacing: .5px; unicode-bidi: isolate; }
.la-label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.la-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* unified phone field (LTR data inside an RTL page) */
.la-phone { display: flex; align-items: stretch; height: 56px; border: 1.5px solid #d3d9ea; border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.la-phone:hover { border-color: #b8c1dc; }
.la-phone:focus-within { border-color: var(--primary-dark); box-shadow: 0 0 0 4px rgba(40,69,214,.12); }
.la-phone.is-bad { border-color: #c4352b; box-shadow: 0 0 0 4px rgba(196,53,43,.1); }
.la-prefix { display: flex; align-items: center; padding: 0 16px; background: #f3f5fb; border-right: 1.5px solid #d3d9ea; font-size: 15.5px; font-weight: 700; color: #5b6472; direction: ltr; }
.la-phone input { flex: 1; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; padding: 0 16px; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: 1.2px; background: transparent; color: var(--ink); text-align: left; direction: ltr; unicode-bidi: plaintext; }
.la-phone input::placeholder { color: #a3aabf; font-weight: 500; letter-spacing: 1.2px; }

/* message line keeps its height so errors never shift the layout */
.la-msg { min-height: 22px; margin: 8px 0 14px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.la-msg.is-error { color: #b42318; }

.la-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border-radius: 14px; background: var(--primary-dark); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; box-shadow: 0 10px 20px -12px rgba(40,69,214,.7); transition: background .15s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.la-btn:hover:not(:disabled) { background: #2139b9; transform: translateY(-1px); box-shadow: 0 14px 24px -12px rgba(40,69,214,.75); }
.la-btn:active:not(:disabled) { transform: translateY(0) scale(.99); box-shadow: 0 6px 14px -10px rgba(40,69,214,.7); }
.la-btn:disabled { background: #6577d6; color: #fff; box-shadow: none; cursor: not-allowed; }
.la-note { margin-top: 16px; font-size: 12.5px; line-height: 1.8; color: #6b7388; text-align: center; }

.la-otp { display: flex; gap: 10px; justify-content: center; }
.la-otp input { flex: 1 1 0; min-width: 0; max-width: 58px; height: 62px; border: 1.5px solid #d3d9ea; border-radius: 14px; text-align: center; font-family: inherit; font-size: 24px; font-weight: 700; color: var(--ink); background: #fff; padding: 0; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.la-otp input:hover { border-color: #b8c1dc; }
.la-otp input:focus { outline: 0; border-color: var(--primary-dark); box-shadow: 0 0 0 4px rgba(40,69,214,.12); }
.la-otp input.is-bad { border-color: #c4352b; }

.la-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.la-actions form { margin: 0; }
.la-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--primary-dark); background: none; padding: 0 4px; }
.la-textlink:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 4px; }
.la-textlink:disabled { color: #6b7388; cursor: not-allowed; font-weight: 600; }
.la-dev { margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; border: 1px dashed #c9a24d; background: #fff8e8; color: #7a5a00; font-size: 13px; text-align: center; }

/* trust panel — light, so the transparent 3D illustration sits on it with no box behind it */
.la-trust { display: flex; flex-direction: column; background: #eff2f9; border-right: 1px solid #e4e8f4; padding: 40px 36px; }
.la-trust-label { font-size: 12.5px; font-weight: 700; letter-spacing: .3px; color: #5b6472; margin-bottom: 18px; }
.la-trust-list { display: flex; flex-direction: column; gap: 16px; }
.la-trust-list li { display: flex; gap: 12px; align-items: flex-start; }
.la-trust-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: #fff; border: 1px solid #dfe5f6; color: var(--primary-dark); display: flex; align-items: center; justify-content: center; transition: transform .2s ease, border-color .2s ease; }
.la-trust-list li:hover .la-trust-icon { transform: translateY(-2px); border-color: #b9c6f4; }
.la-trust-list strong { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.la-trust-list li div span { font-size: 13px; line-height: 1.75; color: var(--muted); }
.la-trust-art { display: block; width: 320px; max-width: 88%; height: auto; margin: 12px auto 0; }

.la-footer { background: transparent; border-top: 1px solid #e4e8f4; }
.la-footer-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 60px; font-size: 12.5px; color: #6b7388; }
.la-footer-links { display: flex; gap: 6px; }
.la-footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.la-footer-links a:hover { color: var(--primary-dark); }

@media (max-width: 1000px) {
  .la-stage { grid-template-columns: 1.1fr 1fr; }
  .la-form-side { padding: 32px 32px 48px; }
  .la-trust { padding: 32px 24px; }
  .la-trust-art { width: 270px; }
}
@media (max-width: 767px) {
  .la-stage { grid-template-columns: 1fr; min-height: 0; max-width: 560px; margin: 0 auto; }
  .la-trust { display: none; }
  .la-header-in { height: 58px; }
  .la-logo img { height: 28px; }
  .la-main { padding: 16px 0 28px; min-height: calc(100vh - 58px - 61px); }
  .la-main > .container { padding-left: 20px; padding-right: 20px; }
  .la-stage { border-radius: 20px; box-shadow: none; }
  .la-form-side { padding: 22px 20px 24px; }
  .la-steps { display: none; }
  .la-steps-m { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; font-size: 12.5px; font-weight: 700; color: #5b6472; }
  .la-steps-bar { display: flex; gap: 6px; flex: 0 0 96px; }
  .la-steps-bar i { flex: 1; height: 4px; border-radius: 4px; background: #dfe3f0; }
  .la-steps-bar i.is-on { background: var(--primary-dark); }
  .la-h1 { font-size: 22px; }
  .la-sub { font-size: 14px; margin-bottom: 20px; }
  .la-phone { height: 54px; }
  .la-phone input { font-size: 17px; }
  .la-footer-in { padding-bottom: env(safe-area-inset-bottom, 0px); justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  .la-xs-hide { display: none; }
  .la-link { padding: 0 8px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .la-otp { gap: 6px; }
  .la-otp input { height: 52px; font-size: 21px; border-radius: 12px; }
  .la-link { padding: 0 8px; font-size: 13px; }
}

/* =====================================================================
   CAMPAIGN WIZARD (شروع کمپین) — classes prefixed wz-. Used by page-templates/campaign-start.php,
   template-parts/service-form-telegram.php and the package/payment steps.
   Focus pages (body.likaads-focus) get the calm header/footer and no bottom nav.
   ===================================================================== */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.likaads-focus { padding-bottom: 0; background: #f3f5fb; }
body.likaads-focus .likaads-bottom-nav,
body.likaads-focus .likaads-float-support { display: none !important; }
/* the campaign form keeps its own section markup; just trim the old tall padding on focus pages */
body.likaads-focus section[style*="padding:44px 0 120px"] { padding: 28px 0 56px !important; min-height: calc(100vh - 64px - 61px) !important; }

.wz-main { display: flex; align-items: flex-start; padding: 28px 0 48px; min-height: calc(100vh - 64px - 61px); }
.wz-container { width: 100%; max-width: 1100px; }
.wz-card { background: #fff; border: 1px solid #e4e8f4; border-radius: 28px; padding: 36px 48px 40px; box-shadow: 0 24px 48px -32px rgba(19,36,83,.22); }
.wz-card--flat { box-shadow: none; border-radius: var(--r-lg); padding: 24px 28px 26px; margin-bottom: 16px; }

/* stepper */
.wz-steps { display: flex; align-items: center; justify-content: center; gap: 12px; list-style: none; margin: 0 0 28px; padding: 0; font-size: 13px; font-weight: 600; color: #6b7388; }
.wz-steps li { display: inline-flex; align-items: center; gap: 8px; }
.wz-steps-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #cdd3e6; font-size: 12px; font-weight: 800; background: #fff; transition: all .2s ease; }
.wz-steps li.is-active { color: var(--ink); }
.wz-steps li.is-active .wz-steps-n { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.wz-steps li.is-done { color: var(--primary-dark); }
.wz-steps li.is-done .wz-steps-n { background: #eaeefe; border-color: #eaeefe; color: var(--primary-dark); }
.wz-steps-line { flex: 1 1 24px; max-width: 80px; height: 2px; border-radius: 2px; background: #dfe3f0; transition: background .2s ease; }
.wz-steps-line.is-done { background: var(--primary-dark); }
.wz-steps-m { display: none; }

.wz-head { text-align: center; margin-bottom: 28px; }
.wz-head--left { text-align: right; margin-bottom: 0; }
.wz-h1 { font-size: 28px; font-weight: 800; line-height: 1.5; letter-spacing: -.2px; margin-bottom: 8px; }
.wz-h1:focus { outline: none; }
.wz-h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.wz-sub { font-size: 15px; line-height: 1.9; color: var(--muted); }
.wz-sub--tight { margin-bottom: 18px; }
.wz-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* selectable cards (service + campaign type): the whole card is the radio's label */
.wz-options { display: grid; gap: 18px; }
.wz-options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
.wz-options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-opt { position: relative; display: block; cursor: pointer; }
.wz-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.wz-body { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; height: 100%; padding: 30px 24px 26px; border: 1.5px solid #dfe4f2; border-radius: 20px; background: #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.wz-opt:hover .wz-body { transform: translateY(-3px); border-color: #b9c6f4; box-shadow: 0 14px 28px -20px rgba(15,23,42,.25); }
.wz-opt input:checked + .wz-body { border-color: var(--primary-dark); background: #f5f7ff; box-shadow: 0 0 0 3px rgba(40,69,214,.12); transform: none; }
.wz-opt input:focus-visible + .wz-body { outline: 3px solid #7d98ff; outline-offset: 3px; }
.wz-check { position: absolute; top: 14px; left: 14px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #cdd4ea; background: #fff; color: transparent; display: flex; align-items: center; justify-content: center; transition: all .2s ease; }
.wz-opt input:checked + .wz-body .wz-check { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.wz-icon { width: 60px; height: 60px; border-radius: 18px; background: #eef1fd; color: var(--primary-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.wz-badge { font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #eaeefe; color: var(--primary-dark); }
.wz-badge--on { background: var(--primary-dark); color: #fff; }
.wz-title { font-size: 19px; font-weight: 800; line-height: 1.5; color: var(--ink); }
.wz-desc { font-size: 13.5px; line-height: 1.9; color: var(--muted); max-width: 300px; }
.wz-pick { margin-top: auto; padding: 10px 20px; border-radius: 12px; background: #eef1fd; color: var(--primary-dark); font-size: 14px; font-weight: 700; transition: background .2s ease, color .2s ease; }
.wz-opt input:checked + .wz-body .wz-pick { background: var(--primary-dark); color: #fff; }
/* coming soon: clearly intentional, not broken */
.wz-opt.is-soon { cursor: not-allowed; }
.wz-opt.is-soon input { cursor: not-allowed; }
.wz-opt.is-soon .wz-body { border-style: dashed; border-color: #cfd8fb; background: #fafbfe; }
.wz-opt.is-soon:hover .wz-body { transform: none; border-color: #cfd8fb; box-shadow: none; }
.wz-opt.is-soon .wz-pick { background: #e8ebf5; color: #475069; }
.wz-opt.is-soon .wz-check { display: none; }

/* actions + messages */
.wz-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wz-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 32px; border-radius: 14px; font-family: inherit; font-size: 15px; font-weight: 700; transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.wz-btn--primary { background: var(--primary-dark); color: #fff; box-shadow: 0 10px 20px -12px rgba(40,69,214,.7); }
.wz-btn--primary:hover:not(:disabled) { background: #2139b9; color: #fff; transform: translateY(-1px); }
.wz-btn--primary:active:not(:disabled) { transform: translateY(0) scale(.99); }
.wz-btn--primary:disabled { background: #6577d6; box-shadow: none; cursor: not-allowed; }
.wz-btn--ghost { background: #fff; color: #3a4256; border: 1.5px solid #d3d9ea; }
.wz-btn--ghost:hover { border-color: var(--primary-dark); color: var(--primary-dark); }
.wz-msg { min-height: 22px; margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.wz-msg.is-error { color: #b42318; }
.wz-err { margin-top: 6px; font-size: 12.5px; font-weight: 500; color: #b42318; }
.wz-bad { border-color: #c4352b !important; }
.wz-note { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* telegram form (steps 2–4) */
.wz-form { padding: 32px 36px; display: flex; flex-direction: column; gap: 20px; border-radius: var(--r-lg); }
.wz-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #eef1fd; border-radius: 12px; padding: 4px 16px; font-size: 13.5px; }
.wz-link { background: none; color: var(--primary-dark); font-family: inherit; font-size: 13px; font-weight: 700; min-height: 44px; padding: 0 6px; }
.wz-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.wz-review { display: grid; grid-template-columns: minmax(110px, 190px) 1fr; margin: 0; border: 1px solid #e4e8f4; border-radius: 16px; overflow: hidden; }
.wz-review dt { padding: 14px 18px; background: #f7f8fc; font-size: 13px; font-weight: 700; color: #5b6472; border-bottom: 1px solid #e9ecf5; }
.wz-review dd { margin: 0; padding: 8px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.8; border-bottom: 1px solid #e9ecf5; min-width: 0; }
.wz-review dd span { min-width: 0; overflow-wrap: anywhere; }
.wz-review dt:last-of-type, .wz-review dd:last-of-type { border-bottom: 0; }

@media (max-width: 900px) {
  .wz-options--3 { grid-template-columns: 1fr; }
  .wz-options--3 .wz-body { flex-direction: row; text-align: right; align-items: center; padding: 18px 20px; gap: 14px; }
  .wz-options--3 .wz-icon { margin: 0; flex-shrink: 0; width: 52px; height: 52px; }
  .wz-options--3 .wz-desc { max-width: none; }
  .wz-options--3 .wz-check { top: 12px; }
}
@media (max-width: 767px) {
  .wz-main { padding: 16px 0 28px; }
  .wz-container { padding-left: 20px; padding-right: 20px; }
  .wz-card { padding: 22px 18px 26px; border-radius: 20px; box-shadow: none; }
  .wz-card--flat { padding: 18px; border-radius: 18px; }
  .wz-steps { display: none; }
  .wz-steps-m { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; font-size: 12.5px; color: #5b6472; }
  .wz-steps-m b { color: var(--ink); }
  .wz-bar { display: flex; gap: 5px; flex: 0 0 88px; }
  .wz-bar i { flex: 1; height: 4px; border-radius: 4px; background: #dfe3f0; }
  .wz-bar i.is-on { background: var(--primary-dark); }
  .wz-h1 { font-size: 22px; }
  .wz-sub { font-size: 14px; }
  .wz-head { margin-bottom: 20px; }
  .wz-options--2 { grid-template-columns: 1fr; }
  .wz-body { padding: 22px 18px 20px; }
  .wz-actions { flex-direction: column-reverse; align-items: stretch; }
  .wz-btn { width: 100%; }
  .wz-form { padding: 20px 16px; }
  .wz-review { grid-template-columns: 1fr; }
  .wz-review dt { border-bottom: 0; padding: 12px 14px 0; background: #fff; }
  .wz-review dd { padding: 4px 14px 12px; }
  body.likaads-focus section[style*="padding:44px 0 120px"] { padding: 16px 0 28px !important; }
}

.wz-banner { margin-bottom: 14px; padding: 12px 16px; border: 1px solid #f3c4c0; border-radius: 12px; background: #fdecea; color: #912018; font-size: 13.5px; line-height: 1.8; }

/* ===== Step 1/2 refinements: cards advance on click ===== */
.wz-actions--single { justify-content: flex-start; }
.wz-opt.is-going .wz-body { border-color: var(--primary-dark); background: #eef2ff; box-shadow: 0 0 0 3px rgba(40,69,214,.16); transform: scale(.985); }
.wz-opt.is-going .wz-check { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.wz-opt.is-going .wz-pick { background: var(--primary-dark); color: #fff; }
.wz-opt:active .wz-body { transform: scale(.985); }
/* Step 2: one card, same shell as Step 1. Settings and review keep a narrower reading width. */
.wz-form { padding: 36px 48px 40px; border-radius: 28px; gap: 0; }
.wz-headblock { margin-bottom: 4px; }
#wz-tg-wrap[data-view="3"], #wz-tg-wrap[data-view="4"] { max-width: 880px; margin-inline: auto; }
#wz-tg-wrap[data-view="3"] .wz-form, #wz-tg-wrap[data-view="4"] .wz-form { gap: 20px; }
.wz-form #wz-view-type .wz-options--3 { margin-top: 4px; }
.wz-options--3 .wz-body { padding: 34px 24px 26px; }
.wz-options--3 .wz-icon { width: 66px; height: 66px; border-radius: 20px; }
@media (max-width: 900px) {
  .wz-options--3 .wz-pick { display: none; }
  .wz-form { padding: 28px 24px 32px; }
}
@media (max-width: 767px) {
  .wz-form { padding: 20px 16px 24px; border-radius: 20px; }
  .wz-actions--single { justify-content: stretch; }
}
/* Step 2 cards: a little more presence on desktop (phones keep the compact row layout above) */
@media (min-width: 901px) {
  .wz-options--3 .wz-body { padding: 42px 26px 32px; gap: 12px; }
  .wz-options--3 .wz-icon { width: 72px; height: 72px; border-radius: 22px; margin-bottom: 6px; }
  .wz-options--3 .wz-title { font-size: 20px; }
  .wz-options--3 .wz-desc { font-size: 14px; }
  .wz-options--3 .wz-pick { margin-top: 10px; padding: 11px 24px; }
}
/* Step 2 on phones/tablets: icon on the right, title + description stacked beside it (a grid, so nothing gets squeezed) */
@media (max-width: 900px) {
  .wz-options--3 .wz-body { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon desc"; column-gap: 16px; row-gap: 4px; align-items: center; text-align: right; padding: 18px 18px 18px 56px; }
  .wz-options--3 .wz-icon { grid-area: icon; margin: 0; width: 52px; height: 52px; }
  .wz-options--3 .wz-title { grid-area: title; font-size: 17px; }
  .wz-options--3 .wz-desc { grid-area: desc; max-width: none; font-size: 13px; line-height: 1.8; }
  .wz-options--3 .wz-check { top: 50%; left: 14px; transform: translateY(-50%); }
}
@media (max-width: 767px) {
  /* the campaign form lives in the generic .container (32px sides) — match the wizard's 20px phone gutter */
  body.likaads-focus section[style*="padding:44px 0 120px"] > .container { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 480px) {
  /* narrow phones: slimmer Step 2 cards so the description keeps a readable width */
  .wz-options--3 .wz-body { column-gap: 12px; padding: 16px 16px 16px 44px; }
  .wz-options--3 .wz-icon { width: 44px; height: 44px; border-radius: 14px; }
  .wz-options--3 .wz-check { left: 12px; width: 22px; height: 22px; }
  .wz-options--3 .wz-title { font-size: 16px; }
  .wz-form { padding: 18px 14px 22px; }
}

/* ===== Step 3 (settings) + Step 4 (review) ===== */
#likaads-tg-form [hidden] { display: none !important; }
#wz-tg-wrap[data-view="3"] { max-width: 1100px; }
#wz-tg-wrap[data-view="4"] { max-width: 1100px; }
.wz-settings { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.wz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 28px; align-items: stretch; }
.wz-sections { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wz-aside { min-width: 0; }

/* section containers: light, thin, calm */
.wz-sec { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; background: #f9fafe; border: 1px solid #e8ecf6; border-radius: 18px; scroll-margin-top: 96px; }
.wz-sec--plain { padding: 0; background: none; border: 0; }
.wz-sec-h { display: flex; align-items: flex-start; gap: 12px; }
.wz-sec-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: #e8edfd; color: var(--primary-dark); font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; }
.wz-sec-n.is-done { background: #e3f5ec; color: #127a4a; }
.wz-sec-h h2 { font-size: 16px; font-weight: 800; line-height: 1.6; color: var(--ink); margin: 0; }
.wz-sec-h p { font-size: 12.5px; line-height: 1.8; color: var(--muted); margin: 0; }
.wz-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wz-field { display: flex; flex-direction: column; min-width: 0; }
.wz-field > label, .wz-label { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.7; }
.wz-req { color: #c4352b; font-weight: 800; }
.wz-opt-tag { display: inline-block; margin-inline-start: 6px; padding: 0 9px; border-radius: 999px; background: #eceff7; color: #5b6472; font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.wz-input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid #d9dfee; border-radius: 12px; background: #fff; color: var(--ink); font-family: inherit; font-size: 15px; line-height: 1.7; transition: border-color .15s ease, box-shadow .15s ease; }
.wz-input::placeholder { color: #a0a8bd; }
.wz-input:hover { border-color: #b9c3e0; }
.wz-input:focus { outline: none; border-color: var(--primary-dark); box-shadow: 0 0 0 4px rgba(40,69,214,.14); }
.wz-input[dir="ltr"] { text-align: left; }
.wz-input[dir="ltr"]::placeholder { text-align: left; }
.wz-textarea { resize: vertical; min-height: 104px; }
.wz-textarea--auto { resize: none; min-height: 128px; }
input.wz-input.wz-bad, textarea.wz-input.wz-bad { border-color: #c4352b !important; box-shadow: 0 0 0 4px rgba(196,53,43,.1); }
.wz-hint { margin: 5px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.wz-hint--count { font-variant-numeric: tabular-nums; }
.wz-err { margin: 5px 0 0; font-size: 13px; font-weight: 600; color: #b42318; line-height: 1.7; }
.wz-err::before { content: "\26A0\00a0"; }
.wz-field--date { max-width: 300px; padding-top: 2px; }

/* input with a success tick (destination) */
.wz-iw { position: relative; }
.wz-ok-ic { position: absolute; top: 50%; right: 12px; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #e3f5ec; color: #127a4a; display: none; align-items: center; justify-content: center; pointer-events: none; }
.wz-iw.is-ok .wz-ok-ic { display: inline-flex; }
.wz-iw.is-ok .wz-input { padding-right: 44px; }
.wz-input.is-ok:not(:focus) { border-color: #5fb88a; }
.wz-input.is-ok.wz-bad { border-color: #c4352b; }

/* start time: equal-width segments */
.wz-segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wz-seg { position: relative; cursor: pointer; display: block; }
.wz-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wz-seg-b { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 14px; border: 1.5px solid #d9dfee; border-radius: 13px; background: #fff; font-size: 14px; color: #3a4256; transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; }
.wz-seg-b b { font-weight: 600; }
.wz-seg-b > svg { flex: 0 0 auto; color: #7d88a6; transition: color .15s ease; }
.wz-seg:hover .wz-seg-b { border-color: #b9c3e0; }
.wz-seg input:checked + .wz-seg-b { border-color: var(--primary-dark); background: #f3f5ff; color: var(--primary-dark); box-shadow: 0 0 0 1px var(--primary-dark); }
.wz-seg input:checked + .wz-seg-b b { font-weight: 800; }
.wz-seg input:checked + .wz-seg-b > svg { color: var(--primary-dark); }
.wz-seg-ck { position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-dark); color: #fff; display: none; align-items: center; justify-content: center; }
.wz-seg input:checked + .wz-seg-b .wz-seg-ck { display: inline-flex; }
.wz-seg input:focus-visible + .wz-seg-b { outline: 3px solid #7d98ff; outline-offset: 2px; }

/* date field: smooth reveal */
.wz-reveal { display: grid; grid-template-rows: 0fr; margin-top: -14px; transition: grid-template-rows .26s ease, margin-top .26s ease; }
.wz-reveal.is-open { grid-template-rows: 1fr; margin-top: 0; }
.wz-reveal-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .26s; }
.wz-reveal.is-open .wz-reveal-in { visibility: visible; overflow: visible; transition-delay: 0s; }

/* poster upload */
.wz-drop { position: relative; display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 12px 16px; border: 1.5px dashed #b4c0e6; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.wz-drop:hover { border-color: var(--primary-dark); background: #f6f8ff; }
.wz-drop.is-drag { border-color: var(--primary-dark); background: #eef2ff; border-style: solid; }
.wz-drop.has-file { border-style: solid; border-color: #c9d3f5; background: #f7f9ff; }
.wz-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.wz-drop:focus-within { outline: 3px solid #7d98ff; outline-offset: 2px; }
.wz-drop:has(.wz-bad) { border-color: #c4352b; }
.wz-drop-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #eef1fd; color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; }
.wz-drop-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wz-drop-t b { font-size: 14px; color: var(--primary-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-drop.has-file .wz-drop-t b { color: var(--ink); direction: ltr; text-align: right; }
.wz-drop-t small { font-size: 12.5px; color: var(--muted); }
.wz-drop-thumb img { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; display: block; border: 1px solid #dfe5f6; }
.wz-drop.has-file .wz-drop-ic { display: none; }
.wz-drop-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.wz-link--danger { color: #b42318; }

/* optional notes disclosure */
.wz-more summary { display: flex; align-items: center; gap: 4px; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--primary-dark); list-style: none; }
.wz-more summary::-webkit-details-marker { display: none; }
.wz-more summary::before { content: "+"; width: 22px; height: 22px; margin-inline-end: 8px; border-radius: 7px; background: #eef1fd; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
.wz-more[open] summary::before { content: "\2212"; }
.wz-more summary:focus-visible { outline: 3px solid #7d98ff; outline-offset: 2px; border-radius: 8px; }
.wz-more .wz-field { margin-top: 4px; }
.wz-note--budget { margin: 2px 0 0; padding: 11px 16px; border-radius: 12px; background: #f6f8fe; border: 1px solid #e4e9fa; color: #3d4a6b; font-size: 13px; line-height: 1.8; }

/* handle check feedback + channel chips */
.wz-checking { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.wz-warn { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: #8a5a00; background: #fff8e6; border: 1px solid #f3dca0; border-radius: 10px; padding: 8px 12px; line-height: 1.7; }
.wz-found { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: #eef1ff; border-radius: 12px; padding: 10px 14px; }
.wz-found-t { display: flex; flex-direction: column; min-width: 0; }
.wz-found-t b { font-size: 14px; }
.wz-found-t small { font-size: 12px; color: var(--muted); }
.wz-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #dfe3ec; display: inline-block; }
.wz-chips3 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wz-chips3:empty { display: none; }
.wz-ch3 { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #e8edfd; color: #24338f; font-size: 13px; font-weight: 600; direction: ltr; max-width: 100%; overflow-wrap: anywhere; }
.wz-ch3.is-ok { background: #e3f5ec; color: #0f6a40; }
.wz-ch3.is-ok::before { content: "\2713"; font-weight: 800; }
.wz-ch3.is-miss { background: #fdecea; color: #912018; }
.wz-ch3.is-miss::before { content: "!"; font-weight: 800; }

/* live preview column: sticky on desktop, in flow on tablet/phone */
.wz-aside-in { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; padding: 18px; border: 1px solid #e8ecf6; border-radius: 18px; background: #f9fafe; }
.wz-pv-t { margin: 0 0 12px; font-size: 13.5px; font-weight: 800; color: var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wz-pv-t small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.wz-pv2 { background: #fff; border: 1px solid #e3e8f5; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 24px -20px rgba(19,36,83,.35); }
.wz-pv2-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.wz-pv2-av { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-dark), var(--primary-light)); color: #fff; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.wz-pv2-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-pv2-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #5b6472; background: #eef1f7; border-radius: 999px; padding: 2px 9px; }
.wz-pv-img { width: 100%; aspect-ratio: 16/9; background: #eef1f9 center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #8a94ad; font-size: 12.5px; }
.wz-pv2-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.wz-pv2-title { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.6; overflow-wrap: anywhere; }
.wz-pv2-text { font-size: 13px; color: #3c4559; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-line; max-height: 9.5em; overflow: hidden; }
.wz-pv2-title.is-empty, .wz-pv2-text.is-empty { color: #a0a8bd; font-weight: 500; }
.wz-pv2-cta { margin: 0 12px 12px; padding: 10px; border-radius: 10px; background: #eef2ff; color: var(--primary-dark); text-align: center; font-size: 13px; font-weight: 700; }
.wz-pv2-dest { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }
.wz-pv2-dest bdi { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.wz-pv-note { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.7; color: #8a94ad; }
.wz-pv-search { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.wz-pvs-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid #eef0f3; font-size: 13.5px; color: #333; }
.wz-pvs-lbl { font-size: 11px; color: #8891a0; padding: 8px 14px; }
.wz-pvs-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.wz-pvs-row.is-ad { background: #f5f8ff; }
.wz-pvs-row.is-dim { opacity: .5; }
.wz-pvs-av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 13px; font-weight: 800; background: linear-gradient(135deg, var(--primary-dark), var(--primary-light)); }
.wz-pvs-av.is-grey { background: #dfe3ec; }
.wz-pvs-av .wz-av { width: 100%; height: 100%; }
.wz-pvs-meta { flex: 1; min-width: 0; }
.wz-pvs-name { font-size: 13.5px; font-weight: 700; color: #111; overflow-wrap: anywhere; }
.wz-pvs-sub { font-size: 11.5px; color: #8891a0; }
.wz-pvs-tag { font-size: 11px; background: #e8f0fe; color: #3390ec; border-radius: 999px; padding: 3px 9px; font-weight: 700; flex: 0 0 auto; }

/* action bar: sticky inside the card on desktop */
.wz-bar3 { display: flex; align-items: center; gap: 16px; padding-top: 6px; }
.wz-bar3 .wz-btn--primary { min-width: 210px; }
.wz-status { flex: 1; margin: 0; min-height: 20px; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; }
.wz-status.is-ok { color: #127a4a; font-weight: 600; }
.wz-status.is-ok::before { content: "\2713\00a0"; font-weight: 800; }
.wz-btn--primary.is-disabled, .wz-btn--primary[aria-disabled="true"] { background: #7f8ede; box-shadow: none; cursor: not-allowed; }
.wz-btn--primary.is-disabled:hover { transform: none; background: #7f8ede; }
.wz-btn:focus-visible, .wz-link:focus-visible { outline: 3px solid #7d98ff; outline-offset: 3px; }
.wz-btn--primary.is-loading { opacity: .85; cursor: wait; }
.wz-btn:disabled { cursor: not-allowed; }
@media (min-width: 768px) {
  .wz-bar3 { position: sticky; bottom: 0; z-index: 6; margin-inline: -8px; padding: 14px 8px; background: #fff; border-top: 1px solid #edf0f8; box-shadow: 0 -14px 18px -16px rgba(19,36,83,.18); }
}

/* step 4: review & submit */
.wz-aside-slot { display: flex; flex-direction: column; min-width: 0; }
.wz-aside-slot > .wz-aside { flex: 1 1 auto; }
.wz-rv { display: flex; flex-direction: column; gap: 12px; }
.wz-ltr { display: inline-block; direction: ltr; unicode-bidi: isolate; text-align: left; }

/* headline: service + campaign type */
.wz-rv-hero { display: flex; align-items: center; gap: 16px; padding: 18px 18px 18px 8px; border: 1px solid #d9e1fa; border-radius: 18px; background: linear-gradient(180deg, #f3f5ff 0%, #fff 100%); }
.wz-rv-hero-ic { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; background: var(--primary-dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 18px -12px rgba(40,69,214,.7); }
.wz-rv-hero-ic svg { fill: currentColor; stroke: none; }
.wz-rv-hero-t { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.wz-rv-hero-k { font-size: 12px; font-weight: 600; color: var(--muted); }
.wz-rv-hero-t h3 { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.4; color: var(--ink); unicode-bidi: isolate; }
.wz-rv-pill { margin-top: 6px; padding: 3px 12px; border-radius: 999px; background: #e6ecfd; color: #1f2f8c; font-size: 12.5px; font-weight: 700; }

/* summary cards */
.wz-rv-sec { border: 1px solid #e6eaf6; border-radius: 16px; background: #fff; overflow: hidden; }
.wz-rv-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 16px 6px 8px; background: #f8f9fd; border-bottom: 1px solid #edf0f8; }
.wz-rv-t { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wz-rv-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: #e8edfd; color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; }
.wz-rv-h h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.wz-edit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: none; color: var(--primary-dark); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s ease; }
.wz-edit:hover { background: #eaeffe; }
.wz-edit:focus-visible { outline: 3px solid #7d98ff; outline-offset: 1px; }
.wz-rv-dl { margin: 0; }
.wz-rv-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 18px; border-bottom: 1px solid #f0f2f9; }
.wz-rv-row:last-child { border-bottom: 0; }
.wz-rv-row dt { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.9; }
.wz-rv-row dd { margin: 0; font-size: 14.5px; line-height: 1.9; color: #28314a; overflow-wrap: anywhere; white-space: pre-line; min-width: 0; }
.wz-rv-row.is-key dd { font-size: 16px; font-weight: 800; color: var(--ink); }

/* values */
.wz-dest-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-dark); font-weight: 800; direction: ltr; unicode-bidi: isolate; text-decoration: none; overflow-wrap: anywhere; white-space: normal; }
.wz-dest-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.wz-dest-link:focus-visible { outline: 3px solid #7d98ff; outline-offset: 3px; border-radius: 4px; }
.wz-dest-ic { display: inline-flex; color: #8a97c9; flex: 0 0 auto; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chipl { padding: 3px 12px; border-radius: 999px; background: #eef1fd; color: #24338f; font-size: 13px; font-weight: 600; unicode-bidi: isolate; }
.wz-rv-none { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 10px; background: #f3f5fa; color: #5f6980; font-size: 13.5px; font-weight: 600; }
.wz-rv-poster { display: flex; align-items: center; gap: 14px; }
.wz-rv-poster img { width: 120px; height: 68px; object-fit: cover; border-radius: 10px; border: 1px solid #e4e8f4; flex: 0 0 auto; background: #eef1f9; }
.wz-rv-pm { display: flex; flex-direction: column; min-width: 0; }
.wz-rv-pm b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
.wz-rv-pm small { font-size: 12px; color: var(--muted); font-weight: 500; }
.wz-rv-when { display: flex; flex-direction: column; }
.wz-rv-when small { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }

/* final action bar */
.wz-bar3--final .wz-btn--primary { min-height: 54px; min-width: 240px; font-size: 16px; }
.wz-bar3--final .wz-btn--ghost { min-height: 54px; }
.wz-btn--primary:disabled:not(.is-loading) { background: #5f6c9e; box-shadow: none; }
.wz-btn--primary.is-loading, .wz-btn--primary.is-loading:disabled { background: #2139b9; color: #fff; opacity: 1; cursor: wait; }
.wz-btn.is-loading::before { content: ""; width: 16px; height: 16px; margin-inline-end: 10px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: wz-spin .7s linear infinite; }
@keyframes wz-spin { to { transform: rotate(360deg); } }
#wz-submit-msg:empty { display: none; }
#wz-submit-msg.is-error { margin: 12px 0 0; padding: 12px 16px; border: 1px solid #f3c4c0; border-radius: 12px; background: #fdecea; color: #912018; font-size: 13.5px; font-weight: 600; line-height: 1.8; }
@media (prefers-reduced-motion: reduce) { .wz-btn.is-loading::before { animation: none; } .wz-edit { transition: none; } }

@media (max-width: 1000px) {
  .wz-layout { grid-template-columns: 1fr; gap: 14px; }
  .wz-aside-in { position: static; max-height: none; overflow: visible; }
  .wz-pv2 { max-width: 420px; }
}
@media (max-width: 767px) {
  .wz-settings { gap: 14px; }
  .wz-sec { padding: 18px 16px 20px; border-radius: 16px; }
  .wz-sec--plain { padding: 0; }
  .wz-grid2 { grid-template-columns: 1fr; gap: 16px; }
  .wz-input { font-size: 16px; min-height: 50px; }
  .wz-segs { grid-template-columns: 1fr; gap: 8px; }
  .wz-seg-b { justify-content: flex-start; min-height: 50px; padding: 0 16px; }
  .wz-seg-ck { top: 50%; left: 14px; margin-top: -10px; }
  .wz-drop { min-height: 72px; padding: 12px; gap: 12px; }
  .wz-drop-thumb img { width: 80px; height: 45px; }
  .wz-field--date { max-width: none; }
  .wz-bar3 { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 2px; }
  .wz-bar3 .wz-status { order: 0; }
  .wz-bar3 .wz-btn--primary { order: 1; min-width: 0; }
  .wz-bar3 .wz-btn--ghost { order: 2; }
  .wz-rv-row { grid-template-columns: 1fr; gap: 0; padding: 12px 16px; }
  .wz-rv-row dt { font-size: 12.5px; }
  .wz-rv-h { padding-left: 6px; padding-right: 16px; }
  .wz-link { min-width: 44px; }
  .wz-aside-in { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .wz-input, .wz-seg-b, .wz-drop, .wz-reveal, .wz-reveal-in { transition: none; } }

/* ===== Step 2 visual refinement: whole card is the target, check only when selected ===== */
.wz-options--3 { gap: 20px; }
.wz-options--3 .wz-pick { display: none; }
.wz-options--3 .wz-body { padding: 34px 24px 30px; gap: 0; border-radius: 22px; border-color: #e1e6f3; transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .2s ease, box-shadow .22s ease, background .2s ease; }
.wz-options--3 .wz-icon { width: 76px; height: 76px; margin: 0 0 18px; border-radius: 24px; background: linear-gradient(145deg, #f2f5ff 0%, #e2e9ff 100%); box-shadow: inset 0 0 0 1px rgba(40,69,214,.1), 0 8px 16px -10px rgba(40,69,214,.35); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.wz-options--3 .wz-icon svg { width: 34px; height: 34px; }
.wz-options--3 .wz-title { font-size: 21px; font-weight: 800; line-height: 1.5; letter-spacing: -.2px; margin-bottom: 8px; }
.wz-options--3 .wz-desc { font-size: 13.5px; line-height: 1.9; max-width: 250px; color: #5f6980; }
.wz-options--3 .wz-opt:hover .wz-body { transform: translateY(-3px); border-color: #aebcf0; box-shadow: 0 16px 30px -22px rgba(19,36,83,.4); }
.wz-options--3 .wz-opt input:checked + .wz-body,
.wz-options--3 .wz-opt.is-going .wz-body { border-color: var(--primary-dark); background: #f7f9ff; box-shadow: 0 14px 28px -20px rgba(40,69,214,.45), 0 0 0 1px var(--primary-dark); transform: none; }
.wz-options--3 .wz-opt input:checked + .wz-body .wz-icon,
.wz-options--3 .wz-opt.is-going .wz-icon { background: var(--primary-dark); color: #fff; box-shadow: 0 10px 20px -10px rgba(40,69,214,.7); }
/* the check exists only on the selected card — no empty radio circles */
.wz-options--3 .wz-check { top: 16px; left: 16px; width: 26px; height: 26px; border: 0; background: var(--primary-dark); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.3,1); }
.wz-options--3 .wz-opt input:checked + .wz-body .wz-check,
.wz-options--3 .wz-opt.is-going .wz-check { opacity: 1; transform: scale(1); }
.wz-options--3 .wz-opt:active .wz-body { transform: scale(.985); }
@media (max-width: 1000px) and (min-width: 901px) {
  .wz-options--3 { gap: 14px; }
  .wz-options--3 .wz-body { padding: 30px 16px 26px; }
  .wz-options--3 .wz-title { font-size: 19px; }
}
/* phones and tablets: icon on the right, text beside it, a soft chevron says "tap to continue" */
@media (max-width: 900px) {
  .wz-options--3 { gap: 12px; }
  .wz-options--3 .wz-body { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon desc"; column-gap: 16px; row-gap: 2px; align-items: center; text-align: right; padding: 16px 16px 16px 48px; border-radius: 18px; }
  .wz-options--3 .wz-icon { grid-area: icon; width: 56px; height: 56px; margin: 0; border-radius: 18px; }
  .wz-options--3 .wz-icon svg { width: 27px; height: 27px; }
  .wz-options--3 .wz-title { grid-area: title; font-size: 17px; margin: 0; }
  .wz-options--3 .wz-desc { grid-area: desc; max-width: none; font-size: 13px; line-height: 1.8; }
  .wz-options--3 .wz-body::after { content: ""; position: absolute; left: 20px; top: 50%; width: 8px; height: 8px; border-left: 2px solid #a3b0dc; border-bottom: 2px solid #a3b0dc; transform: translateY(-50%) rotate(45deg); transition: opacity .15s ease; }
  .wz-options--3 .wz-opt input:checked + .wz-body::after, .wz-options--3 .wz-opt.is-going .wz-body::after { opacity: 0; }
  .wz-options--3 .wz-check { top: 50%; left: 14px; transform: translateY(-50%) scale(.6); }
  .wz-options--3 .wz-opt input:checked + .wz-body .wz-check, .wz-options--3 .wz-opt.is-going .wz-check { transform: translateY(-50%) scale(1); }
  .wz-options--3 .wz-opt:hover .wz-body { transform: none; }
}
@media (max-width: 480px) {
  .wz-options--3 .wz-body { column-gap: 13px; padding: 14px 14px 14px 42px; }
  .wz-options--3 .wz-icon { width: 48px; height: 48px; border-radius: 15px; }
  .wz-options--3 .wz-icon svg { width: 24px; height: 24px; }
  .wz-options--3 .wz-title { font-size: 16px; }
  .wz-options--3 .wz-body::after { left: 16px; }
  .wz-options--3 .wz-check { left: 12px; width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .wz-options--3 .wz-body, .wz-options--3 .wz-check { transition: none; } }

/* ===== Step 3 final micro-polish ===== */
/* 5 · disabled primary: clearly inactive, text still readable (white on #5f6c9e ≈ 5:1) */
.wz-btn--primary.is-disabled, .wz-btn--primary[aria-disabled="true"] { background: #5f6c9e; color: #fff; box-shadow: none; cursor: not-allowed; font-weight: 700; }
.wz-btn--primary.is-disabled:hover, .wz-btn--primary[aria-disabled="true"]:hover { background: #5f6c9e; transform: none; }
.wz-status { font-weight: 600; color: #4a5470; }
/* 3 · the sticky preview always stays clear of the sticky action bar (bar ≈ 80px + gap) */
@media (min-width: 1001px) { .wz-aside-in { top: 20px; max-height: calc(100vh - 20px - 100px); } }
@media (min-width: 1001px) and (max-height: 760px) {
  .wz-aside-in { padding: 14px; }
  .wz-pv-note { display: none; }
  .wz-pv2-text { max-height: 5.4em; }
  .wz-pv-t { margin-bottom: 8px; }
  .wz-pv2-cta { margin-bottom: 10px; padding: 8px; }
}
@media (min-width: 1001px) and (max-height: 600px) {
  .wz-pv-img { aspect-ratio: 3/1; }
  .wz-pv-t small { display: none; }
}
/* 7 · addresses, links and numbers keep their own (left-to-right) direction inside the RTL form */
.wz-input[dir="ltr"], input[type="date"].wz-input { direction: ltr; unicode-bidi: isolate; text-align: left; }
.wz-pv2-dest bdi, .wz-ltr, .wz-ch3, .wz-pv2-cta[dir="ltr"] { unicode-bidi: isolate; }
.wz-hint code, .wz-hint bdi { direction: ltr; unicode-bidi: isolate; }
/* 8 · phone: compact, in-flow preview; sections give back some width to the fields */
@media (max-width: 767px) {
  .wz-sec { padding: 16px 14px 18px; }
  .wz-aside-in { position: static; max-height: none; padding: 12px; }
  .wz-pv-note { display: none; }
  .wz-pv-t { margin-bottom: 8px; }
  .wz-pv-t small { display: none; }
  .wz-pv2 { max-width: 340px; margin-inline: auto; }
  .wz-pv-img { aspect-ratio: 2/1; }
  .wz-pv2-text { max-height: 5.4em; }
  .wz-pv2-dest { text-align: center; }
  .wz-bar3 { margin-top: 4px; }
}

/* ===== Step 4 phones ===== */
@media (max-width: 767px) {
  .wz-rv { gap: 10px; }
  .wz-rv-hero { padding: 16px 12px 16px 6px; gap: 12px; }
  .wz-rv-hero-ic { width: 46px; height: 46px; border-radius: 14px; }
  .wz-rv-hero-t h3 { font-size: 19px; }
  .wz-rv-row.is-key dd { font-size: 15.5px; }
  .wz-rv-poster img { width: 96px; height: 54px; }
  .wz-rv-h { padding-left: 4px; }
  .wz-bar3--final .wz-btn--primary, .wz-bar3--final .wz-btn--ghost { min-height: 54px; width: 100%; }
}

/* ===== 5-step flow: package (3), settings (4), review & payment (5) ===== */
#wz-tg-wrap[data-view="5"] { max-width: 1100px; }
#wz-tg-wrap[data-view="5"] .wz-form { gap: 20px; }
/* five labels: on tablets only the active one keeps its text, phones use the compact bar */
@media (min-width: 768px) and (max-width: 940px) { .wz-steps li:not(.is-active) .wz-steps-t { display: none; } .wz-steps { gap: 8px; } }

/* package cards */
.wz-pkgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.wz-pkg { position: relative; display: block; cursor: pointer; }
.wz-pkg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.wz-pkg-b { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 32px 14px 22px; text-align: center; border: 1.5px solid #e1e6f3; border-radius: 20px; background: #fff; transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .2s ease, box-shadow .22s ease, background .2s ease; }
.wz-pkg:hover .wz-pkg-b { transform: translateY(-3px); border-color: #aebcf0; box-shadow: 0 16px 30px -22px rgba(19,36,83,.4); }
.wz-pkg:active .wz-pkg-b { transform: scale(.985); }
.wz-pkg input:checked + .wz-pkg-b { border-color: var(--primary-dark); background: #f7f9ff; box-shadow: 0 14px 28px -20px rgba(40,69,214,.45), 0 0 0 1px var(--primary-dark); transform: none; }
.wz-pkg input:focus-visible + .wz-pkg-b { outline: 3px solid #7d98ff; outline-offset: 3px; }
.wz-pkg-ck { position: absolute; top: 14px; left: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-dark); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.3,1); }
.wz-pkg input:checked + .wz-pkg-b .wz-pkg-ck { opacity: 1; transform: scale(1); }
.wz-pkg-views { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wz-pkg-n { font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -.5px; color: var(--ink); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; transition: color .2s ease; }
.wz-pkg input:checked + .wz-pkg-b .wz-pkg-n { color: var(--primary-dark); }
.wz-pkg-u { font-size: 14px; font-weight: 600; color: var(--muted); }
.wz-pkg-price { width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf0f8; font-size: 13.5px; font-weight: 600; color: #3a4256; }
.wz-pkg-price bdi { font-size: 19px; font-weight: 800; color: #132453; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.wz-pkg-per { margin-top: 8px; font-size: 12px; line-height: 1.7; color: #7a849c; }
.wz-pkg-per bdi { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

/* package summary in the action bar */
.wz-pkgsum { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; gap: 26px; font-size: 13px; color: var(--muted); text-align: center; min-height: 40px; }
.wz-sum-i { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.5; }
.wz-sum-i small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.wz-sum-i b { font-size: 15.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.wz-pkgsum.is-set .wz-sum-i:last-child b { color: var(--primary-dark); }
.wz-bar3--pkg .wz-btn--primary { min-width: 210px; }
#wz-pkg-msg:empty { display: none; }
#wz-pkg-msg.is-error { margin: 14px 0 0; }

/* settings: the two compact chips (type, package) */
.wz-chips2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wz-chip--pkg b { font-variant-numeric: tabular-nums; }

/* review & payment: price block */
.wz-rv-pay { padding: 6px 20px 18px; border-radius: 18px; background: linear-gradient(135deg, #16204a 0%, #1d2f7b 100%); color: #fff; }
.wz-rv-pay-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.wz-rv-pay-h h3, .wz-rv-pay-h h2 { margin: 0; font-size: 14.5px; font-weight: 800; color: #fff; }
.wz-edit--inv { color: #fff; background: rgba(255,255,255,.12); }
.wz-edit--inv:hover { background: rgba(255,255,255,.2); }
.wz-rv-pay-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 6px 0 14px; }
.wz-rv-pay-i { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wz-rv-pay-i span { font-size: 12.5px; color: rgba(255,255,255,.7); font-weight: 600; }
.wz-rv-pay-i b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wz-rv-pay-t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
.wz-rv-pay-t span { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.85); }
.wz-rv-pay-t b { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; }
.wz-rv-pay-t small { font-size: 14px; font-weight: 600; margin-inline-start: 2px; }
.wz-status--pay { font-weight: 800; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }

/* payment page (step 5 after confirmation) */
.wz-pay .wz-sections { gap: 14px; }
.wz-pay .wz-aside-in { top: 20px; }
.wz-bank { position: relative; padding: 22px 22px 20px; border-radius: 18px; background: linear-gradient(135deg, #16204a 0%, #2845d6 100%); color: #fff; overflow: hidden; }
.wz-bank-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.wz-bank-chip { width: 34px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, #f6d97a, #e8b84b); }
.wz-bank-name { font-size: 14px; font-weight: 700; }
.wz-bank-k { font-size: 11.5px; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.wz-bank-num { font-size: 23px; font-weight: 700; letter-spacing: 3px; text-align: left; margin-bottom: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wz-bank-num.is-sheba { font-size: 16px; letter-spacing: 1px; }
.wz-bank-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wz-bank-holder { font-size: 14.5px; font-weight: 700; }
.wz-copy { flex: 0 0 auto; min-height: 44px; padding: 0 18px; border-radius: 12px; background: #fff; color: #16204a; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.wz-copy:hover { background: #eef2ff; }
.wz-copy:active { transform: scale(.97); }
.wz-copy:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wz-drop.is-bad { border-color: #c4352b; }
.wz-bar3--receipt { position: static; margin: 16px 0 0; padding: 0; background: none; border: 0; box-shadow: none; }
.wz-bar3--receipt .wz-btn--primary { min-height: 54px; min-width: 240px; font-size: 16px; }
.wz-os-dl { margin: 0; }
.wz-os-dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf0f8; }
.wz-os-dl > div:last-child { border-bottom: 0; }
.wz-os-dl dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wz-os-dl dd { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ink); overflow-wrap: anywhere; }
.wz-os-poster { margin-top: 12px; }
.wz-os-poster img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; border: 1px solid #e4e8f4; }

/* confirmation */
.wz-success { max-width: 680px; margin: 0 auto; padding: 44px 40px 36px; text-align: center; }
.wz-success-ic { width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%; background: #e3f5ec; color: #127a4a; display: flex; align-items: center; justify-content: center; }
.wz-success .wz-h1 { outline: none; }
.wz-success-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; text-align: right; }
.wz-success-dl > div { padding: 14px 16px; border: 1px solid #e6eaf6; border-radius: 14px; background: #f9fafe; min-width: 0; }
.wz-success-dl > .is-key { grid-column: 1 / -1; text-align: center; background: #f3f5ff; border-color: #d9e1fa; }
.wz-success-dl dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wz-success-dl dd { margin: 2px 0 0; font-size: 15.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.wz-success-dl > .is-key dd { font-size: 22px; letter-spacing: 1px; color: var(--primary-dark); }
.wz-success-next { margin: 22px 0 0; font-size: 14px; line-height: 1.9; color: #3a4256; }
.wz-success-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
.wz-success-home { display: inline-flex; align-items: center; margin-top: 8px; }

@media (max-width: 1000px) {
  .wz-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .wz-pay .wz-aside-in { position: static; }
}
@media (max-width: 767px) {
  .wz-chips2 { grid-template-columns: 1fr; gap: 8px; }
  .wz-pkgsum { gap: 20px; }
  .wz-bar3--pkg .wz-btn--primary, .wz-bar3--receipt .wz-btn--primary { min-width: 0; }
  .wz-rv-pay { padding: 4px 16px 16px; }
  .wz-rv-pay-t b { font-size: 25px; }
  .wz-bank { padding: 18px 16px 16px; }
  .wz-bank-num { font-size: 20px; letter-spacing: 2px; }
  .wz-bank-num.is-sheba { font-size: 14px; letter-spacing: .5px; }
  .wz-bank-foot { flex-wrap: wrap; }
  .wz-bar3--receipt { flex-direction: column; align-items: stretch; gap: 10px; }
  .wz-bar3--receipt .wz-status { text-align: center; }
  .wz-success { padding: 32px 18px 28px; }
  .wz-success-dl { grid-template-columns: 1fr; }
  .wz-success-actions { flex-direction: column; align-items: stretch; }
  .wz-success-actions .wz-btn { width: 100%; min-height: 54px; }
}
@media (max-width: 640px) {
  .wz-pkgs { grid-template-columns: 1fr; gap: 10px; }
  .wz-pkg-b { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "v p" "v u"; align-items: center; column-gap: 14px; row-gap: 2px; padding: 16px 16px 16px 52px; text-align: right; }
  .wz-pkg-views { grid-area: v; align-items: flex-start; }
  .wz-pkg-n { font-size: 28px; }
  .wz-pkg-price { grid-area: p; justify-self: end; width: auto; margin: 0; padding: 0; border: 0; text-align: left; }
  .wz-pkg-price bdi { font-size: 17px; }
  .wz-pkg-per { grid-area: u; justify-self: end; margin: 0; text-align: left; }
  .wz-pkg-ck { top: 50%; left: 14px; margin-top: -13px; }
  .wz-pkg:hover .wz-pkg-b { transform: none; }
  .wz-pkgsum { gap: 14px; }
}
@media (max-width: 380px) {
  .wz-pkg-b { column-gap: 10px; padding-left: 46px; }
  .wz-pkg-per { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .wz-pkg-b, .wz-pkg-ck, .wz-copy { transition: none; } }

/* package step is short: its action bar stays in the flow (never covers a card) */
.wz-bar3--pkg { position: static; margin: 22px 0 0; padding: 0; background: none; border: 0; box-shadow: none; }

/* ===== Final polish: package, review & payment, confirmation — one consistent system ===== */
/* shared rhythm: cards/sections 18px radius, inputs 12px, buttons 14px, bar buttons 54px, thin #e6ebf7 borders, one soft shadow */
.wz-sec, .wz-rv-sec, .wz-aside-in, .wz-rv-pay, .wz-bank2, .wz-track, .wz-success-grid { border-radius: 18px; }
.wz-bar3 .wz-btn { min-height: 54px; }
.wz-bar3--receipt .wz-btn--primary, .wz-bar3--pkg .wz-btn--primary, .wz-bar3--final .wz-btn--primary, .wz-bar3 #wz-settings-next { min-width: 210px; font-size: 16px; }

/* 1 · package cards: the view count leads, the price follows, the per-1,000 line whispers */
.wz-pkgs { gap: 18px; }
.wz-pkg-b { padding: 36px 16px 22px; border-color: #e3e8f5; }
.wz-pkg-n { font-size: 42px; letter-spacing: -1px; line-height: 1.15; }
.wz-pkg-u { font-size: 13.5px; margin-top: 2px; }
.wz-pkg-price { margin-top: 22px; padding-top: 16px; font-size: 13px; font-weight: 600; color: #5b6472; }
.wz-pkg-price bdi { font-size: 16.5px; font-weight: 700; color: #28314a; }
.wz-pkg input:checked + .wz-pkg-b .wz-pkg-price bdi { color: #132453; font-weight: 800; }
.wz-pkg-per { margin-top: 6px; font-size: 11.5px; font-weight: 400; color: #9aa3b8; }
.wz-pkg-per bdi { font-weight: 500; }
/* summary in the action bar: one compact pill */
.wz-pkgsum { flex: 0 1 auto; margin-inline: auto; gap: 22px; padding: 6px 20px; border-radius: 14px; background: #f6f8fe; border: 1px solid #e6ebfa; }
.wz-pkgsum:not(.is-set) { background: none; border-color: transparent; padding: 0; }
@media (max-width: 1180px) { .wz-pkg-n { font-size: 34px; } }

/* 2 · review: lighter right column */
.wz-rv { gap: 10px; }
.wz-rv-sec { border-color: #e9edf7; }
.wz-rv-h { min-height: 46px; padding: 2px 16px 2px 6px; background: #fbfcfe; }
.wz-rv-row { gap: 12px; padding: 10px 18px; }
.wz-rv-row dt { font-size: 12.5px; }
.wz-rv-row dd { font-size: 14px; line-height: 1.8; }
.wz-rv-row.is-key dd { font-size: 15.5px; }
@media (min-width: 1001px) { .wz-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; } }
.wz-aside-in { padding: 16px; border-color: #e9edf7; }
.wz-pv2-body { padding: 10px 12px 11px; }
.wz-pv2-text { max-height: 6.4em; }

/* 3 · package & price card: shorter, one strong total */
.wz-rv-pay { padding: 0 20px 16px; background: linear-gradient(135deg, #16204a 0%, #1d2f7b 100%); }
.wz-rv-pay-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.wz-rv-pay-h h3, .wz-rv-pay-h h2 { margin: 0; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.72); }
.wz-rv-pay-v { display: flex; align-items: baseline; gap: 8px; padding: 0 0 14px; }
.wz-rv-pay-v b { font-size: 22px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.wz-rv-pay-v span { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); }
.wz-rv-pay-t { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.wz-rv-pay-t span { font-size: 13.5px; font-weight: 700; color: #fff; }
.wz-rv-pay-t b { font-size: 28px; }
.wz-edit--inv { min-height: 44px; padding: 0 12px; font-size: 12.5px; font-weight: 600; background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; }
.wz-edit--inv:hover { background: rgba(255,255,255,.12); }

/* 4 · payment: three calm numbered steps, no box around each */
.wz-flow { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.wz-flow-i { position: relative; display: flex; gap: 14px; padding-bottom: 26px; }
.wz-flow-i:last-child { padding-bottom: 0; }
.wz-flow-i::before { content: ""; position: absolute; top: 34px; bottom: 4px; right: 13px; width: 2px; border-radius: 2px; background: #e3e8f6; }
.wz-flow-i:last-child::before { display: none; }
.wz-flow-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: #e8edfd; color: var(--primary-dark); font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.wz-flow-b { flex: 1; min-width: 0; }
.wz-flow-b h2 { margin: 2px 0 0; font-size: 16px; font-weight: 800; line-height: 1.7; color: var(--ink); }
.wz-flow-b > p { margin: 0 0 14px; font-size: 13px; line-height: 1.8; color: var(--muted); }

/* 5 · bank / sheba card */
.wz-bank2 { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 18px; background: linear-gradient(135deg, #16204a 0%, #2845d6 100%); color: #fff; }
.wz-bank2-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wz-bank2-bank { font-size: 14px; font-weight: 700; }
.wz-bank2-tag { padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11.5px; font-weight: 700; }
.wz-bank2-num { font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: 2.5px; text-align: left; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wz-bank2-num.is-sheba { font-size: 17px; letter-spacing: 1.5px; }
.wz-bank2-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
.wz-bank2-who small { display: block; font-size: 11px; color: rgba(255,255,255,.7); }
.wz-bank2-who b { font-size: 14.5px; font-weight: 700; }
.wz-copy { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 12px; background: #fff; color: #16204a; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease; }
.wz-copy.is-done { background: #e3f5ec; color: #0f6a40; }
.wz-copy--soft { background: #fff; color: var(--primary-dark); border: 1px solid #d3dcf8; }
.wz-copy--soft:hover { background: #eef2ff; }
.wz-copy--soft.is-done { background: #e3f5ec; border-color: #bfe6d1; }
.wz-copy-live { margin: 8px 0 0; font-size: 13px; font-weight: 700; line-height: 1.7; }
.wz-copy-live:empty { display: none; }
.wz-copy-live.is-ok { color: #127a4a; }
.wz-copy-live.is-ok::before { content: "\2713\00a0"; }
.wz-copy-live.is-bad { color: #b42318; }

/* 6 · receipt upload states */
.wz-drop-actions { flex-wrap: wrap; gap: 4px 10px; }
.wz-receipt-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #127a4a; }
.wz-drop-actions.is-bad .wz-receipt-ok { display: none; }
#wz-receipt-drop.has-file { border-color: #bfe6d1; background: #f7fcf9; }
#wz-receipt-drop.has-file.is-bad { border-color: #c4352b; background: #fff8f7; }
.wz-bar3--receipt { padding-top: 4px; }

/* 7 · confirmation */
.wz-success { max-width: 640px; padding: 40px 36px 30px; }
.wz-success-ic { width: 64px; height: 64px; margin-bottom: 18px; }
.wz-success .wz-h1 { margin-bottom: 6px; }
.wz-track { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 480px; margin: 24px auto 0; padding: 12px 14px 12px 12px; border: 1px solid #d9e1fa; background: #f3f5ff; text-align: right; }
.wz-track-t { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.wz-track-t small { font-size: 12px; font-weight: 600; color: var(--muted); }
.wz-track-t b { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--primary-dark); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wz-track + .wz-copy-live { text-align: center; margin-top: 6px; }
.wz-success-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; max-width: 560px; margin: 16px auto 0; border: 1px solid #e6eaf6; overflow: hidden; text-align: right; }
.wz-success-grid > div { padding: 12px 16px; min-width: 0; }
.wz-success-grid > div + div { border-inline-start: 1px solid #edf0f8; }
.wz-success-grid dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.wz-success-grid dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.wz-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; background: #e3f5ec; color: #0f6a40; font-size: 12.5px; font-weight: 700; line-height: 1.7; }
.wz-status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d62; flex: 0 0 auto; }
.wz-success-next { margin: 18px 0 0; font-size: 14.5px; font-weight: 700; color: #28314a; }
.wz-success-call { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.wz-success-actions { margin-top: 22px; }
.wz-success-actions .wz-btn { min-height: 54px; min-width: 200px; }

/* phones */
@media (max-width: 767px) {
  .wz-sec, .wz-rv-sec { border-radius: 16px; }
  .wz-rv-h { padding-left: 4px; }
  .wz-rv-row { padding: 10px 16px; }
  .wz-pkgsum { margin-inline: 0; padding: 8px 16px; justify-content: center; }
  .wz-rv-pay { padding: 0 16px 14px; }
  .wz-rv-pay-v b { font-size: 21px; }
  .wz-rv-pay-t b { font-size: 25px; }
  .wz-bank2 { padding: 16px 16px 14px; gap: 12px; }
  .wz-bank2-num { font-size: 19px; letter-spacing: 1.5px; }
  .wz-bank2-num.is-sheba { font-size: 14.5px; letter-spacing: .5px; }
  .wz-bank2-foot { flex-wrap: wrap; }
  .wz-bank2-foot .wz-copy { width: 100%; justify-content: center; }
  .wz-flow-i { gap: 12px; padding-bottom: 22px; }
  .wz-bar3--receipt .wz-btn--primary, .wz-bar3 .wz-btn { width: 100%; min-width: 0; }
  .wz-success { padding: 30px 16px 26px; }
  .wz-track { padding: 10px 12px; }
  .wz-track-t b { font-size: 19px; }
  .wz-success-grid { grid-template-columns: 1fr; }
  .wz-success-grid > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; }
  .wz-success-grid > div + div { border-inline-start: 0; border-top: 1px solid #edf0f8; }
  .wz-success-grid dd { margin: 0; }
  .wz-success-actions .wz-btn { width: 100%; }
  /* keep the last button clear of the home indicator on notched phones */
  body.likaads-focus section[style*="padding:44px 0 120px"] { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 640px) {
  .wz-pkg-b { padding: 16px 16px 16px 52px; }
  .wz-pkg-n { font-size: 30px; }
  .wz-pkg-price bdi { font-size: 16px; }
  .wz-pkg-per { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .wz-copy { transition: none; } }

/* the payment page is outside the campaign form: honour the hidden attribute there too */
.wz-pay [hidden], .wz-success [hidden] { display: none !important; }

/* narrow phones: the amount drops under its label instead of overflowing */
@media (max-width: 400px) {
  .wz-rv-pay-t { flex-direction: column; align-items: flex-start; gap: 2px; }
  .wz-rv-pay-t b { font-size: 24px; }
  .wz-rv-pay-v b { font-size: 20px; }
}

/* ===== Mobile menu v2: compact, premium (phones/tablets ≤ 900px; desktop navigation is untouched) ===== */
html.likaads-nav-open, html.likaads-nav-open body { overflow: hidden; }
@media (max-width: 900px) {
  #likaads-mobile-nav {
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    overscroll-behavior: contain;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  #likaads-mobile-nav.is-open { transform: none; transition-delay: 0s; }
  #likaads-mobile-nav .likaads-mobile-nav-top { min-height: 58px; }
  #likaads-mobile-nav .likaads-mobile-nav-logo img { height: 30px !important; }
  /* the close button is a quiet outline: 44px to tap, light to look at, so the logo stays the anchor */
  #likaads-mobile-close { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: transparent; color: #fff; transition: background .15s ease; }
  #likaads-mobile-close:hover { background: rgba(255,255,255,.06); }
  #likaads-mobile-close svg { width: 18px; height: 18px; opacity: .78; }
  #likaads-mobile-nav .likaads-mobile-nav-menu { display: flex; flex-direction: column; margin-top: 4px; }
  #likaads-mobile-nav .likaads-mobile-nav-menu li { list-style: none; }
  #likaads-mobile-nav .likaads-mobile-nav-menu li a,
  #likaads-mobile-nav .likaads-mobile-nav-menu > a,
  #likaads-mobile-nav .likaads-mobile-nav-menu > div > a {
    display: flex; align-items: center; min-height: 50px; padding: 0 2px;
    font-size: 16.5px; font-weight: 700; line-height: 1.4; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  #likaads-mobile-nav .likaads-mobile-nav-menu li:last-child a,
  #likaads-mobile-nav .likaads-mobile-nav-menu > a:last-child { border-bottom: 0; }
  #likaads-mobile-nav .likaads-mobile-nav-menu a:active { background: rgba(255,255,255,.06); }

  .likaads-mobile-nav-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
  .likaads-mnav-primary, .likaads-mnav-secondary { display: flex; align-items: center; justify-content: center; border-radius: 14px; text-align: center; transition: transform .15s ease, background .15s ease; }
  .likaads-mnav-primary { min-height: 52px; background: #fff; color: #132453; font-size: 16px; font-weight: 800; box-shadow: 0 10px 22px -14px rgba(0,0,0,.5); }
  .likaads-mnav-primary:active { transform: scale(.985); }
  .likaads-mnav-secondary { min-height: 48px; border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 14.5px; font-weight: 700; }
  .likaads-mnav-secondary:hover { background: rgba(255,255,255,.07); }
  .likaads-mnav-account { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.82); }
  .likaads-mnav-account:hover { color: #fff; }
  #likaads-mobile-nav a:focus-visible, #likaads-mobile-nav button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 12px; }
}
@media (max-width: 380px) {
  #likaads-mobile-nav .likaads-mobile-nav-menu li a, #likaads-mobile-nav .likaads-mobile-nav-menu > a { font-size: 16px; min-height: 48px; }
}
@media (max-height: 560px) and (max-width: 900px) {
  #likaads-mobile-nav .likaads-mobile-nav-top { min-height: 52px; }
  #likaads-mobile-nav .likaads-mobile-nav-menu li a, #likaads-mobile-nav .likaads-mobile-nav-menu > a { min-height: 46px; }
  .likaads-mobile-nav-actions { margin-top: 10px; padding-top: 12px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #likaads-mobile-nav { transition: none !important; transform: none; }
  .likaads-mnav-primary, .likaads-mnav-secondary, #likaads-mobile-close { transition: none; }
}

/* =====================================================================
   SERVICES HUB (/khadamat/) — page-templates/services-hub.php — classes prefixed ls-
   Reuses the homepage tokens (navy / royal blue, --r-*, lh-* sections, .btn).
   ===================================================================== */
.ls-hero { position: relative; background: var(--navy); padding: 64px 0 148px; overflow: hidden; }
.ls-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(61,92,255,.28), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0 / 26px 26px; }
.ls-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.ls-hero h1 { font-size: 38px; line-height: 1.5; font-weight: 800; letter-spacing: -.3px; color: #fff; margin-bottom: 12px; }
.ls-nowrap { white-space: nowrap; }
.ls-tagline { font-size: 19px; line-height: 1.8; font-weight: 700; color: #b6c4ff; margin-bottom: 14px; }
.ls-lead { font-size: 15.5px; line-height: 2; color: rgba(255,255,255,.76); max-width: 560px; margin-bottom: 0; }
.ls-hero .btn-ghost { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); }
.ls-hero-art svg { width: 100%; height: auto; max-width: 540px; margin-inline: auto; display: block; }
.ls-float { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .ls-float--a { animation: ls-drift 7s ease-in-out infinite; }
  .ls-float--b { animation: ls-drift 8s ease-in-out -2s infinite; }
  .ls-float--c { animation: ls-drift 6.5s ease-in-out -4s infinite; }
  @keyframes ls-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}

/* service cards overlap the hero's lower edge */
.ls-services { position: relative; z-index: 2; margin-top: -84px; padding-bottom: var(--section-y); }
.ls-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ls-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 32px -24px rgba(15,23,42,.2); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ls-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 26px 40px -24px rgba(15,23,42,.28); border-color: #cfd6ef; }
.ls-card h3 { font-size: 22px; font-weight: 800; line-height: 1.4; color: var(--ink); margin: 18px 0 8px; direction: ltr; text-align: right; }
.ls-desc { font-size: 14.5px; line-height: 1.95; color: var(--muted); }
.ls-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ls-icon { width: 52px; height: 52px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: #eef1fb; color: #55618f; flex: none; }
.ls-icon--live { width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(135deg, #3D5CFF, #2845D6); color: #fff; box-shadow: 0 12px 22px -12px rgba(40,69,214,.7); }
.ls-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; background: #eceef4; color: #4a5470; line-height: 1.4; }
.ls-status svg { flex: none; }
.ls-status--live { background: var(--primary-dark); color: #fff; }
.ls-status--live i { width: 7px; height: 7px; border-radius: 50%; background: #7ef0a8; box-shadow: 0 0 0 3px rgba(126,240,168,.25); }

.ls-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 20px; }
.ls-feats li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.6; }
.ls-feats svg { color: var(--primary-dark); flex: none; }
.ls-feats--mini { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
.ls-feats--mini li { font-size: 13.5px; font-weight: 500; color: #4a5470; }
.ls-feats--mini svg { color: #7c88b4; }

/* navy panel inside the live card: the three real ad formats */
.ls-live-side { position: relative; background: var(--navy); border-radius: var(--r-md); padding: 24px 22px 20px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.ls-live-side::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 100% 0%, rgba(61,92,255,.35), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 1.4px) 0 0 / 22px 22px; }
.ls-live-side > * { position: relative; }
.ls-side-title { font-size: 13px; font-weight: 700; color: #b6c4ff; margin-bottom: 14px; }
.ls-formats { display: flex; flex-direction: column; gap: 10px; }
.ls-formats li { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px 14px; }
.ls-formats li > span { width: 40px; height: 40px; border-radius: 12px; background: rgba(125,152,255,.2); color: #cdd8ff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ls-formats strong { display: block; font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.6; }
.ls-formats small { display: block; font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.66); }
.ls-side-foot { margin-top: auto; padding-top: 16px; font-size: 13px; color: rgba(255,255,255,.7); }
.ls-side-foot strong { color: #fff; font-weight: 700; }

.ls-card-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.ls-link { font-size: 14.5px; font-weight: 700; color: var(--primary-dark); padding: 12px 2px; display: inline-flex; align-items: center; min-height: 44px; }
.ls-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* the live card carries the hierarchy: blue border, faint tint, quiet ring motif */
.ls-card--live { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: stretch; border: 1.5px solid rgba(40,69,214,.5); background: linear-gradient(180deg, #f4f6ff 0%, #fff 55%); overflow: hidden; padding: 32px; }
.ls-live-main { display: flex; flex-direction: column; min-width: 0; }
.ls-card--live::before { content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(40,69,214,.1) 0 1px, transparent 1px 22px); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%); }
.ls-card--live > * { position: relative; }
.ls-card--live:hover { border-color: var(--primary-dark); }
.ls-card--live .ls-card-cta { margin-top: auto; padding-top: 26px; }
.ls-card--live .btn { min-height: 52px; }

.ls-card--soon { background: #fcfcff; padding: 24px 26px; }
.ls-card--soon h3 { font-size: 19px; margin-top: 14px; }
.ls-card--soon .ls-desc { font-size: 14px; line-height: 1.9; }
.ls-soon-note { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #dfe3f1; font-size: 13px; font-weight: 700; color: #6a7494; }

/* why */
.ls-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ls-why-card { padding: 28px 24px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ls-why-card:hover { transform: translateY(-3px); border-color: #cfd6ef; box-shadow: var(--shadow-hover); }
.ls-why-icon { width: 50px; height: 50px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: #eaeefe; color: var(--primary-dark); margin-bottom: 18px; transition: transform .22s ease; }
.ls-why-card:hover .ls-why-icon { transform: scale(1.06); }
.ls-why-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.ls-why-card p { font-size: 14px; line-height: 1.95; color: var(--muted); }

/* process: horizontal timeline on desktop, vertical on phones */
.ls-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.ls-flow > li { list-style: none; }
.ls-flow > li::marker { content: ""; }
.ls-flow-step { position: relative; text-align: center; padding: 0 14px; }
.ls-flow-num { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: var(--primary-dark); color: #fff; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 0 0 7px rgba(40,69,214,.22); }
.ls-flow-step:not(:last-child)::after { content: ""; position: absolute; top: 23px; right: calc(50% + 40px); width: calc(100% - 80px); border-top: 2px dashed rgba(255,255,255,.28); }
.ls-flow-step h3 { font-size: 16.5px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.ls-flow-step p { font-size: 13.5px; line-height: 1.9; color: rgba(255,255,255,.68); }

/* trust */
.ls-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.ls-metrics li { text-align: center; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ls-metrics strong { font-size: 34px; line-height: 1.3; font-weight: 800; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.ls-metrics .ls-metric-sm { font-size: 22px; line-height: 1.6; color: var(--navy); }
.ls-metrics span { font-size: 14px; line-height: 1.8; color: var(--muted); }

@media (max-width: 1000px) {
  .ls-hero-grid { gap: 28px; }
  .ls-hero h1 { font-size: 34px; }
  .ls-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ls-hero { padding: 36px 0 112px; }
  .ls-hero-grid { grid-template-columns: 1fr; }
  .ls-hero h1 { font-size: 30px; }
  .ls-tagline { font-size: 17px; }
  .ls-hero-art svg { max-width: 360px; }
  .ls-services { margin-top: -64px; }
  .ls-card--live .ls-card-cta { padding-top: 22px; }
  .ls-card--live { grid-template-columns: 1fr; gap: 24px; }
  .ls-flow { grid-template-columns: 1fr; gap: 0; max-width: 420px; margin-inline: auto; }
  .ls-flow-step { display: flex; align-items: flex-start; gap: 16px; text-align: right; padding: 0 0 28px; }
  .ls-flow-step:last-child { padding-bottom: 0; }
  .ls-flow-num { margin: 0; flex: none; width: 44px; height: 44px; }
  .ls-flow-step:not(:last-child)::after { top: 48px; bottom: 4px; right: 21px; width: 0; height: auto; border-top: 0; border-right: 2px dashed rgba(255,255,255,.28); }
  .ls-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ls-metrics li { padding: 22px 10px; }
  .ls-metrics .ls-metric-wide { grid-column: 1 / -1; padding: 20px 16px; }
}
@media (max-width: 600px) {
  .ls .container { padding-inline: 20px; }
  .ls-grid { grid-template-columns: 1fr; }
  .ls-hero { padding: 24px 0 80px; }
  .ls-hero h1 { font-size: 26px; line-height: 1.55; }
  .ls-tagline { font-size: 16px; margin-bottom: 10px; }
  .ls-lead { font-size: 14.5px; line-height: 1.95; }
  .ls-hero .lh-cta-row { flex-direction: column; }
  .ls-hero .lh-cta-row .btn, .ls-card--live .btn, .ls .lh-final .btn { width: 100%; justify-content: center; }
  .ls-hero-art svg { max-width: 230px; }
  .ls-services { margin-top: -52px; }
  .ls-card { padding: 22px 20px; }
  .ls-card--soon { padding: 20px; }
  .ls-card h3 { font-size: 20px; }
  .ls-feats { grid-template-columns: 1fr; }
  .ls-live-side { padding: 18px 16px 16px; }
  .ls-formats li { padding: 10px 12px; gap: 12px; }
  .ls-formats small { display: none; }
  .ls-card-cta { flex-direction: column; align-items: stretch; gap: 4px; }
  .ls-link { justify-content: center; }
  .ls-why { grid-template-columns: 1fr; gap: 12px; }
  .ls-why-card { padding: 22px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
  .ls-why-icon { grid-row: span 2; margin: 0; }
  .ls-why-card h3 { margin-bottom: 4px; }
  .ls .lh-final-box { padding: 40px 22px; }
  .ls .lh-final-box h2 { font-size: 24px; }
}
@media (max-width: 380px) {
  .ls-hero h1 { font-size: 24px; }
  .ls-meta > div { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-card, .ls-why-card, .ls-why-icon { transition: none; }
  .ls-card:hover, .ls-why-card:hover { transform: none; }
}
.ls-trust { padding-bottom: 40px; }
.ls-final { padding-top: 56px; }
.ls-reads { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 28px; font-size: 14px; color: var(--muted); }
.ls-read { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--primary-dark); transition: border-color .2s ease, background .2s ease; }
.ls-read:hover { border-color: var(--primary-dark); background: #f4f6ff; }

/* Google Ads is the only coming-soon card: a full-width, horizontal row under the live card */
.ls-card--soon { grid-column: 1 / -1; }
@media (min-width: 901px) {
  .ls-card--soon { display: grid; grid-template-columns: auto minmax(0, 1.25fr) minmax(0, .9fr); grid-template-areas: "top title feats" "top desc feats" "note note note"; column-gap: 32px; align-items: center; padding: 26px 32px; }
  .ls-card--soon .ls-card-top { grid-area: top; flex-direction: column; align-items: flex-start; gap: 14px; }
  .ls-card--soon h3 { grid-area: title; margin: 0 0 6px; }
  .ls-card--soon .ls-desc { grid-area: desc; }
  .ls-card--soon .ls-feats { grid-area: feats; margin: 0; }
  .ls-card--soon .ls-soon-note { grid-area: note; margin-top: 18px; padding-top: 14px; }
}
@media (max-width: 600px) {
  .ls-metrics strong { font-size: 26px; }
  .ls-metrics .ls-metric-sm { font-size: 20px; }
  .ls-metrics span { font-size: 12.5px; line-height: 1.7; }
}

/* =====================================================================
   Scroll hint (decorative): a small chevron that fades and drifts 5px, shown under the intro of the public service pages.
   Positioned absolutely, so it never changes any section's height. Static with prefers-reduced-motion.
   ===================================================================== */
.la-hint { position: absolute; left: 0; right: 0; bottom: -34px; display: flex; justify-content: center; pointer-events: none; z-index: 1; }
.la-hint svg { width: 24px; height: 24px; color: var(--primary-dark); opacity: .8; }
.la-hint--dark svg { color: #b6c4ff; }
.ls-hero .la-hint { bottom: 103px; }
@media (prefers-reduced-motion: no-preference) {
  .la-hint svg { opacity: .45; animation: la-hint 2s ease-in-out infinite; }
  @keyframes la-hint { 0%, 100% { opacity: .45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(5px); } }
}
@media (max-width: 900px) {
  .ls-hero .la-hint { bottom: 77px; }
}
@media (max-width: 600px) {
  .la-hint { bottom: -32px; }
  .la-hint svg { width: 20px; height: 20px; }
  .ls-hero { padding-bottom: 92px; }
  .ls-hero .la-hint { bottom: 62px; }
}

/* =====================================================================
   MOTION SYSTEM — public landing pages only (body.la-motion, see inc/motion.php)
   Subtle on purpose: opacity + transform only, nothing replays, nothing needed to read the page.
   ===================================================================== */
/* scroll reveal: JS adds .la-rv to blocks below the fold, .is-in when they enter, then removes both */
.la-rv { opacity: 0 !important; transform: translate3d(0, var(--la-y, 14px), 0) !important;
  transition: opacity .62s cubic-bezier(.22,.61,.36,1) var(--la-d, 0ms), transform .62s cubic-bezier(.22,.61,.36,1) var(--la-d, 0ms) !important; }
.la-rv.is-in { opacity: 1 !important; transform: none !important; }
@media (max-width: 600px) { .la-rv { --la-y: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .la-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* hero idle motion: a few px of slow drift, never more */
@keyframes la-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, calc(var(--la-float, 8px) * -1), 0); } }
@keyframes la-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
@keyframes ls-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--ls-drift, 6px) * -1)); } }
@media (prefers-reduced-motion: no-preference) {
  body.la-motion .lh-hero-media img { animation: la-float 7s ease-in-out infinite; }
  body.la-motion .ls-hero-art svg { --la-float: 5px; animation: la-float 9s ease-in-out infinite; }
  .la-breathe { animation: la-breathe 6s ease-in-out infinite; }
}
@media (max-width: 900px) { body.la-motion .lh-hero-media img { --la-float: 6px; } body.la-motion .ls-hero-art svg { --la-float: 3px; } }
@media (max-width: 600px) { body.la-motion .lh-hero-media img { --la-float: 4px; } .ls-float { --ls-drift: 4px; } }

/* buttons + clickable cards: small lift, soft shadow, one easing everywhere */
body.la-motion .btn { transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
body.la-motion .btn-ghost:hover { transform: translateY(-2px); }
body.la-motion .btn-outline:hover { box-shadow: 0 10px 20px -14px rgba(19,36,83,.4); }
body.la-motion .btn-accent:hover, body.la-motion .btn-gold:hover { box-shadow: 0 16px 26px -10px rgba(30,58,232,.55); }
body.la-motion .btn:active { transform: translateY(0); transition-duration: .08s; }
body.la-motion .ls-read { transition: transform .2s cubic-bezier(.22,.61,.36,1), border-color .2s ease, background .2s ease; }
body.la-motion .ls-read:hover { transform: translateY(-1px); }
body.la-motion .ls-card, body.la-motion .ls-why-card, body.la-motion .lh-card { transition-timing-function: cubic-bezier(.22,.61,.36,1); }

/* =====================================================================
   ABOUT PAGE — /darbareh-ma/ (main.ls.lab). Reuses the services-page system (ls-*); only lab-* is new.
   ===================================================================== */
.lab-hero { padding: 72px 0 96px; }
.lab-hero h1 { font-size: 34px; line-height: 1.65; margin-bottom: 18px; }
.lab-hero .ls-lead { max-width: 540px; }

.lab-who-sec { padding-bottom: 88px; }
.lab-who { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.lab-who-copy .lh-h2 { margin-bottom: 18px; }
.lab-who-copy p { font-size: 16.5px; line-height: 2.1; color: #3a4256; max-width: 600px; }
.lab-who-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px; font-size: 14px; color: var(--muted); }

.lab-focus { position: relative; background: var(--navy); border-radius: var(--r-lg); padding: 30px 28px; overflow: hidden; }
.lab-focus::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(61,92,255,.35), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 1.4px) 0 0 / 22px 22px; }
.lab-focus > * { position: relative; }
.lab-focus-title { font-size: 13px; font-weight: 700; color: #b6c4ff; margin-bottom: 16px; }
.lab-focus ul { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.lab-focus li { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px 16px; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.6; }
.lab-focus li > span { width: 40px; height: 40px; border-radius: 12px; background: rgba(125,152,255,.2); color: #cdd8ff; display: inline-flex; align-items: center; justify-content: center; flex: none; }

.lab-diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lab-diff-card { display: flex; align-items: flex-start; gap: 20px; padding: 28px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.lab-diff-card:hover { transform: translateY(-2px); border-color: #cfd6ef; box-shadow: var(--shadow-hover); }
.lab-diff-card .ls-why-icon { margin: 0; flex: none; }
.lab-diff-card:hover .ls-why-icon { transform: scale(1.06); }
.lab-diff-card h3 { font-size: 17.5px; font-weight: 800; line-height: 1.6; margin-bottom: 6px; }
.lab-diff-card p { font-size: 14.5px; line-height: 1.95; color: var(--muted); }

.lab-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.lab-strip li { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--ink); }
.lab-strip svg { color: var(--primary-dark); flex: none; }

.lab-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.lab-principles > li::marker { content: ""; }
.lab-principle { padding: 6px 32px; border-inline-start: 1px solid #dde2f0; }
.lab-principle:first-child { border-inline-start: 0; padding-inline-start: 0; }
.lab-principle:last-child { padding-inline-end: 0; }
/* step marker: solid badge (same blue as the process numbers) + a hairline that fades out */
.lab-principle-n { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.lab-principle-n b { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--primary-dark); color: #fff; font-size: 20px; line-height: 1; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 18px -10px rgba(40,69,214,.6), 0 0 0 5px rgba(40,69,214,.08); }
.lab-principle-n::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to left, #c9d2ee, rgba(201,210,238,0)); }
.lab-principle h3 { font-size: 21px; font-weight: 800; line-height: 1.55; color: var(--ink); margin-bottom: 10px; }
.lab-principle p { font-size: 15px; line-height: 2; color: var(--muted); }
.lab-mind .ls-reads { margin-top: 44px; }

@media (prefers-reduced-motion: no-preference) {
  body.la-motion .lab-hero .ls-hero-art svg { animation-duration: 7s; }
}
@media (max-width: 900px) {
  .lab-hero { padding: 36px 0 64px; }
  .lab-hero h1 { font-size: 28px; }
  .lab-who-sec { padding-bottom: 72px; }
  .lab-who { grid-template-columns: 1fr; gap: 32px; }
  .lab-principles { grid-template-columns: 1fr; }
  .lab-principle, .lab-principle:first-child, .lab-principle:last-child { border-inline-start: 0; border-top: 1px solid #dde2f0; padding: 24px 0; }
  .lab-principle:first-child { border-top: 0; padding-top: 0; }
  .lab-principle:last-child { padding-bottom: 0; }
  .lab-principle-n { margin-bottom: 14px; }
  .lab-principle-n b { width: 42px; height: 42px; font-size: 18px; border-radius: 13px; }
}
@media (max-width: 700px) {
  .lab-diff { grid-template-columns: 1fr; gap: 12px; }
  .lab-diff-card { padding: 22px 20px; gap: 16px; }
}
@media (max-width: 600px) {
  .lab-hero { padding: 24px 0 48px; }
  .lab-hero h1 { font-size: 24px; line-height: 1.7; }
  .lab-hero .ls-hero-art svg { max-width: 320px; }
  .lab-who-sec { padding-bottom: 56px; }
  .lab-who-copy p { font-size: 15.5px; line-height: 2; }
  .lab-focus { padding: 22px 18px; }
  .lab-strip li { flex: 1 1 100%; justify-content: flex-start; }
  .lab-principle h3 { font-size: 19px; }
  .lab-mind .ls-reads { margin-top: 32px; }
}
@media (max-width: 380px) {
  .lab-hero h1 { font-size: 22px; }
}

/* About page · process connectors: a soft highlight travels step 1 → 2 → 3 → 4 along the dashed lines (3s loop, one connector at a time) */
@media (prefers-reduced-motion: no-preference) {
  .lab .ls-flow-step:not(:last-child)::before { content: ""; position: absolute; top: 22px; right: calc(50% + 40px); width: calc(100% - 80px); height: 4px; border-radius: 2px; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, rgba(143,162,255,0), rgba(143,162,255,.85) 50%, rgba(143,162,255,0)) 100% 0 / 38% 100% no-repeat;
    animation: lab-flow 3s ease-in-out infinite; }
  .lab .ls-flow-step:nth-child(2)::before { animation-delay: 1s; }
  .lab .ls-flow-step:nth-child(3)::before { animation-delay: 2s; }
  @keyframes lab-flow { 0% { opacity: 0; background-position: 100% 0; } 10% { opacity: 1; } 28% { opacity: 1; } 34%, 100% { opacity: 0; background-position: 0 0; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  /* phones: same idea, vertical and quieter */
  .lab .ls-flow-step:not(:last-child)::before { top: 48px; bottom: 4px; right: 20px; width: 4px; height: auto; border-radius: 2px;
    background: linear-gradient(180deg, rgba(143,162,255,0), rgba(143,162,255,.7) 50%, rgba(143,162,255,0)) 0 0 / 100% 38% no-repeat; animation-name: lab-flow-v; animation-duration: 3.6s; }
  .lab .ls-flow-step:nth-child(2)::before { animation-delay: 1.2s; }
  .lab .ls-flow-step:nth-child(3)::before { animation-delay: 2.4s; }
  @keyframes lab-flow-v { 0% { opacity: 0; background-position: 0 0; } 10% { opacity: 1; } 28% { opacity: 1; } 34%, 100% { opacity: 0; background-position: 0 100%; } }
}

/* =====================================================================
   CONTACT PAGE — /tamas-ba-ma/ (main.ls.lct). Reuses ls-* / lh-* / ls-why-*; only lct-* is new.
   ===================================================================== */
.lct-hero { padding: 72px 0 96px; }
.lct-hero h1 { font-size: 34px; line-height: 1.65; margin-bottom: 18px; }
.lct-hero .ls-lead { max-width: 540px; }
.lct-marks { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.lct-marks li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.07); font-size: 13.5px; font-weight: 600; color: #dfe6ff; }
.lct-marks svg { color: #8fa2ff; flex: none; }

.lct-methods { padding-bottom: 88px; }
.lct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lct-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 20px; margin-top: 20px; }
.lct-card { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 24px 24px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.lct-card:hover { transform: translateY(-2px); border-color: #b9c6f4; box-shadow: var(--shadow-hover); }
.lct-card:hover .ls-why-icon { transform: scale(1.06); }
.lct-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; line-height: 1.6; }
.lct-val { font-size: 15.5px; font-weight: 800; color: var(--primary-dark); line-height: 1.7; margin-bottom: 8px; max-width: 100%; overflow-wrap: anywhere; unicode-bidi: isolate; text-align: right; }
.lct-val--num { font-size: 24px; letter-spacing: .2px; font-variant-numeric: tabular-nums; }
.lct-val--mail { font-size: 14.5px; }
.lct-desc { font-size: 14px; line-height: 1.95; color: var(--muted); margin-bottom: 22px; }
.lct-act { width: 100%; justify-content: center; min-height: 48px; margin-top: auto; padding-top: 12px; padding-bottom: 12px; font-size: 15px; }
.lct-card--static { background: var(--bg-alt); }
.lct-card--static:hover { transform: none; border-color: var(--border); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.lct-card--static:hover .ls-why-icon { transform: none; }
.lct-addr { font-style: normal; font-size: 14.5px; line-height: 2; color: #3a4256; }

.lct-hours { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 22px; background: var(--navy); border-radius: var(--r-lg); padding: 30px 34px; }
.lct-hours::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 100% 0%, rgba(61,92,255,.32), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 1.4px) 0 0 / 22px 22px; }
.lct-hours > * { position: relative; }
.lct-hours-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lct-hours-ico { flex: none; width: 52px; height: 52px; border-radius: 15px; background: rgba(125,152,255,.2); color: #cdd8ff; display: inline-flex; align-items: center; justify-content: center; }
.lct-hours-t { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.5; margin-bottom: 4px; }
.lct-hours-main p { font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.74); }
.lct-hours-time { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.lct-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lct-days li { padding: 6px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 700; color: #fff; line-height: 1.7; }
.lct-time { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: #b6c4ff; }
.lct-time strong { font-size: 21px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

.lct-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

@media (prefers-reduced-motion: no-preference) {
  body.la-motion .lct-hero .ls-hero-art svg { animation-duration: 7s; }
}
@media (max-width: 900px) {
  .lct-hero { padding: 36px 0 64px; }
  .lct-hero h1 { font-size: 28px; }
  .lct-methods { padding-bottom: 72px; }
  .lct-hours { padding: 26px 24px; }
  .lct-grid, .lct-row2 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .lct-row2 { margin-top: 12px; }
}
@media (max-width: 800px) {
  .lct-trust { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
  .lct-hero { padding: 24px 0 48px; }
  .lct-hero h1 { font-size: 24px; line-height: 1.7; }
  .lct-hero .ls-hero-art svg { max-width: 320px; }
  .lct-marks li { flex: 1 1 100%; }
  .lct-methods { padding-bottom: 56px; }
  .lct-grid { gap: 12px; }
  .lct-row2 { gap: 12px; }
  .lct-card { padding: 24px 20px 20px; }
  .lct-val--num { font-size: 26px; }
  .lct-hours { padding: 22px 18px; }
  .lct-hours-main { align-items: flex-start; }
  .lct-hours-t { font-size: 17px; }
  .lct-days li { padding: 6px 12px; }
}
@media (max-width: 380px) {
  .lct-hero h1 { font-size: 22px; }
}

/* =====================================================================
   QA POLISH — touch targets (44px), narrow-screen login fix, contrast. No visual redesign.
   ===================================================================== */
/* login / OTP: a grid track of 1fr grows to its widest child's min-content, so on 320–360px phones the card was pushed 15–35px off the left edge */
@media (max-width: 767px) { .la-stage { grid-template-columns: minmax(0, 1fr); } }
.la-steps, .la-steps-n { color: #5f6a85; }
.la-logo { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }

/* header: the Telegram strip, logo, login button, hamburger and desktop menu links all reach 44px */
.likaads-topbar { padding-top: 0 !important; padding-bottom: 0 !important; }
.likaads-topbar a { min-height: 44px; }
.likaads-logo-link { min-height: 44px; }
.likaads-header-login { min-height: 44px; }
.likaads-mobile-toggle { width: 44px; height: 44px; }
.primary-nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* footer links */
.lh-footer-grid > div:nth-child(2) ul, .lh-footer-grid > div:nth-child(3) ul, .lh-footer-grid > div:nth-child(4) ul { gap: 0; }
.lh-footer-grid > div:nth-child(2) li a, .lh-footer-grid > div:nth-child(3) li a, .lh-footer-grid > div:nth-child(4) li a { display: flex; align-items: center; min-height: 44px; }
.lh-footer-grid > div:first-child a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
.lh-footer-grid > div:last-child li:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; min-height: 44px; }
.lh-footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* homepage blog links */
.lh-more { display: inline-flex; align-items: center; min-height: 44px; }
.lh-post-body h3 a { display: block; padding: 11px 0; margin: -11px 0; }
.lh-footer-grid > div:last-child li:first-child a { display: inline-flex; align-items: center; min-height: 44px; }
.primary-nav a { padding-inline: 9px; margin-inline: -9px; }
/* tariff table on 320px phones: tighter cell padding so it fits the card instead of scrolling sideways */
@media (max-width: 380px) { .card > table th, .card > table td { padding-left: 10px !important; padding-right: 10px !important; } }
.lh-inline-link a { display: inline-block; padding: 11px 2px; }

/* Package step: choosing a card moves on by itself (the continue button was removed) */
.wz-pkg.is-going .wz-pkg-b { border-color: var(--primary-dark); background: #f7f9ff; box-shadow: 0 14px 28px -20px rgba(40,69,214,.45), 0 0 0 1px var(--primary-dark); transform: none; }
.wz-pkg.is-going .wz-pkg-ck { opacity: 1; transform: scale(1); }
.wz-pkg.is-going .wz-pkg-n { color: var(--primary-dark); }

/* Start time: Persian calendar picker */
.wz-jcal { position: relative; }
.wz-jcal-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px; text-align: right; cursor: pointer; font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1.5px solid #d9dfee; border-radius: 13px; direction: rtl; }
.wz-jcal-btn:hover { border-color: #b9c3e0; }
.wz-jcal-btn:focus-visible, .wz-jcal-btn[aria-expanded="true"] { outline: 0; border-color: var(--primary-dark); box-shadow: 0 0 0 3px rgba(40,69,214,.16); }
.wz-jcal-btn.wz-bad { border-color: #d92d20; }
.wz-jcal-btn svg { flex: none; color: #7d88a6; }
#wz-jcal-txt.is-empty { color: #8a93ab; }
.wz-jcal-pop { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 308px; max-width: calc(100vw - 32px); padding: 14px; background: #fff; border: 1px solid #e1e6f3; border-radius: 16px; box-shadow: 0 22px 44px -18px rgba(19,36,83,.35); direction: rtl; }
.wz-jcal-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.wz-jcal-h b { font-size: 15px; font-weight: 800; color: var(--ink); }
.wz-jcal-nav { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #e1e6f3; border-radius: 10px; background: #fff; color: #3a4256; cursor: pointer; }
.wz-jcal-nav:hover:not(:disabled) { background: #f3f5ff; border-color: #b9c3e0; }
.wz-jcal-nav:disabled { opacity: .35; cursor: default; }
.wz-jcal-wd, .wz-jcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wz-jcal-wd span { text-align: center; font-size: 12px; font-weight: 700; color: #7d88a6; padding: 4px 0; }
.wz-jcal-e { display: block; }
.wz-jcal-d { height: 38px; border: 0; border-radius: 10px; background: transparent; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; font-variant-numeric: normal; }
.wz-jcal-d:hover:not(:disabled) { background: #eef2ff; }
.wz-jcal-d.is-today { box-shadow: inset 0 0 0 1.5px #c7d2f7; }
.wz-jcal-d.is-sel { background: var(--primary-dark); color: #fff; }
.wz-jcal-d.is-off { color: #b8bfd2; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(184,191,210,.6); }
.wz-jcal-d:focus-visible { outline: 3px solid #7d98ff; outline-offset: 1px; }
@media (max-width: 560px) { .wz-jcal-pop { width: 100%; max-width: none; } .wz-jcal-d { height: 42px; } }