/* Self-hosted fonts — Inter (sara text) + Pacifico (logo). Google css2 ke wahi subset/unicode-range, */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url('/assets/fonts/inter/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* ₹ (U+20B9) in Inter — the prices on every card. Its own 1 KB cut of the latin-ext file (23 Oct 2026, speed check: the 84 KB
     latin-ext font was fetched on every listing page for this one sign) */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url('/assets/fonts/inter/inter-rupee.woff2') format('woff2');
  unicode-range: U+20B9;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url('/assets/fonts/inter/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* copy headings (owner, 22 Oct 2026): PT Sans Bold, self-hosted like Inter; swap, they sit below the fold */
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/pt-sans/pt-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/pacifico/pacifico-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The three icon fonts again, as "block" (owner, 24 Oct 2026: "loading par page jhatke se print hota hai"). fa-subset.css says swap,
   so until a font arrived every icon (heart, eye, WhatsApp, Telegram …) was an empty box that then turned into the icon; with block
   it stays blank for that moment instead. A later @font-face with the same family, style and weight is the one used, and main.css
   loads after fa-subset.css on every page. */
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: block; src: url(/assets/fonts/fa/fa-solid-900-subset.woff2) format("woff2"); }
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/fa/fa-regular-400-subset.woff2) format("woff2"); }
@font-face { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/fa/fa-brands-400-subset.woff2) format("woff2"); }
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Tick-boxes get NO focus ring (owner): Chrome lights :focus-visible even on a mouse click, and the */
input[type="checkbox"]:focus, input[type="checkbox"]:focus-visible,
input[type="radio"]:focus, input[type="radio"]:focus-visible { outline: none; box-shadow: none; }

/* :root */
:root {
  /* RANG YAHAN SE NAHI AATE. Sab kuch includes/palette.php ki 16 line se */

  /* ─── Brand accent (ab gold) ─── */
  --main-color:  var(--c-accent);
  --main-dark:   var(--c-hover);
  --pink-light:  var(--c-accent-light);
  --pink-tint:   var(--c-tint);   /* WASH — thos gold nahi */
  --pink-tint-2: rgba(var(--c-accent-rgb), .16);
  --pink-line:   rgba(var(--c-accent-rgb), .38);
  --main-rgb:    var(--c-accent-rgb);
  --ring:        rgba(var(--c-accent-rgb), .55);

  /* ─── Purana navy/blue — ab likhaai safed, background kaala ─── */
  --blue-color:  var(--c-accent);
  --navy:        var(--c-text);
  --telegram:    #229ED9;                 /* third-party brand — jaan-boojh kar literal */

  /* ─── Neutral ramp ─── */
  --ink:         var(--c-text);
  --ink-deep:    var(--c-text);
  --ink-800:     var(--c-text-muted);
  --grey-700:    var(--c-text-muted);
  --grey-550:    var(--c-muted);
  --grey-500:    var(--c-muted);
  --grey-400:    var(--c-muted);
  --grey-300:    var(--c-border);
  --grey-200:    var(--c-border);
  --line:        var(--c-border);
  --line-soft:   var(--c-surface-light);

  /* ─── Backgrounds ─── */
  --white-color: var(--c-text);
  --bg-soft:     var(--c-surface-light);
  --bg-1:        var(--c-surface-light);
  --bg-2:        var(--c-surface-light);

  /* ─── Status ─── */
  --green:       var(--c-success);

  /* ─── Aliases kept for existing var() usages ─── */
  --text-color:   var(--c-text);
  --muted-color:  var(--c-muted);
  --border-color: var(--c-border);
  --shadow-3d:    0 1px 0 rgba(var(--c-accent-rgb), .55), 0px 2px 2px rgba(var(--c-dark-rgb), 0.5);

  /* ─── Shadows — semantic elevation + brand + CTA + focus ─── */
  --shadow-xs:         0 1px 3px rgba(var(--c-dark-rgb), 0.10);
  --shadow-sm:         0 2px 8px rgba(var(--c-dark-rgb), 0.08);
  --shadow-md:         0 4px 14px rgba(var(--c-dark-rgb), 0.15);
  --shadow-xl:         0 20px 60px rgba(var(--c-dark-rgb), 0.30);
  --shadow-deep:       0 25px 60px rgba(var(--c-dark-rgb), 0.45);
  --shadow-pink-md:    0 4px 14px rgba(var(--c-accent-rgb), 0.25);
  --shadow-pink-lg:    0 6px 18px rgba(var(--c-accent-rgb), 0.35);
  /* 🔴 FOCUS PAR HALO NAHI. Niyam: dhyaan ka nishaan sirf khaane ki apni 1px border ka RANG hai. */
  --shadow-focus:      none;
  --shadow-navy:       0 4px 12px rgba(var(--c-dark-rgb), 0.32), inset 0 1px 0 rgba(var(--c-text-rgb), 0.18);
  --shadow-navy-hover: 0 8px 18px rgba(var(--c-dark-rgb), 0.42), inset 0 1px 0 rgba(var(--c-text-rgb), 0.22);

  /* ─── Reusable border + radius (buttons stay <=10px) ─── */
  --border: 1px solid var(--border-color);
  --border-soft:  1px solid var(--line-soft);
  --border-brand: 1px solid var(--main-color);
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-full: 50%;

  /* ─── Typography ramp (value-for-value — single source, no visual change) ─── */
  --fs-9: 9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-32: 32px;

  --fw-regular:  400;

  /* ── BUTTONS — ek jagah. Har button ka weight aur padding ki HAD yahin se aati hai, isliye */
  --btn-fw:      500;    /* button ka font-weight */
  --btn-py:      8px;    /* upar/neeche padding — isse zyada kahin nahi */
  --btn-px:      20px;   /* dayen/bayen padding — isse zyada kahin nahi */
  /* Ungli se dabane layak — sirf touch screen par lagta hai. 36 se 44 kiya (09 Sep): naapne par */
  --btn-minh:    44px;

  /* ── STATUS RANG — palette se. Inhe gold mat karna: rang hi sandesh hai. ── */
  --ct-danger:   var(--c-danger);
  --ct-success:  var(--c-success);

  --ct-warning:  var(--c-warning);
  --ct-shadow-focus: none;   /* upar --shadow-focus par wajah likhi hai — ek hi niyam, do naam */
  --ct-fast: .15s ease; /* naye code ke liye halki-fast transition — admin.css me bhi yahi (mirror) */

  /* ── CHAAL KI TEEN GATI — admin.css:191-194 ka HU-BA-HU mirror ──────────────── */
  --t-fast:   180ms cubic-bezier(.22, 1, .36, 1);
  --t:        260ms cubic-bezier(.22, 1, .36, 1);
  --t-slow:   380ms cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);   /* keyframes ke liye akela curve */
}

/* Bootstrap ka apna `.btn { font-weight: var(--btn-fw)}` yahin se overwrite hota hai. Wo file GENERATED hai */
button, .btn, a.btn, [role="button"],
input[type="submit"], input[type="button"], input[type="reset"] {
  font-weight: var(--btn-fw);
}

:root {
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  /* 700 is this site's CEILING: the Inter variable font tops out clean at 700-800 and anything */
  --fw-extra:    700;
  --fw-black:    700;
}

/* Font Awesome — force solid (filled) variant on user icon site-wide */
.fa-user {
  font-weight: var(--fw-black) !important;
}

/* Global responsive safety net — prevents image/video/iframe overflowing container */
img,
video,
iframe {
  max-width: 100%;
}

/* Long-text safety — URLs/inline-code don't break layout */
pre,
code {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* body */
body,
html {
  /* Daayein-baayein nikla hua content chhupana — par `hidden` ki EK kimat thi jo */
  overflow-x: hidden;
  overflow-x: clip;
}

/* ── Modal khule to page peeche na sarke ───────────────────────────────────── */
/* the class comes from includes/floating-widgets.php while body has overflow: hidden (23 Oct 2026): the old
   html:has(> body[style*="overflow: hidden"]) restyled the whole page on every card-photo turn on a phone */
html.ct-scroll-lock {
  overflow: hidden;
  scrollbar-gutter: stable;
}

body.site-mode {
  /* Owner (08 Sep): header ka rang body par, body ka gehra rang header par. */
  background-color: var(--c-dark);
  background-image: var(--c-texture);
  color: var(--text-color);
}

body.site-auth-page {
  background: var(--bg-soft);
  padding: 0;
  margin: 0;
}

body.site-auth-page .site-auth-section {
  padding: 24px 0 48px;
  min-height: auto;
  display: block;
}

body.site-auth-page .site-auth-section>.container {
  max-width: 460px;
  padding: 0 16px;
  margin: 0 auto;
}

body.site-auth-page .site-auth-section .row,
body.site-auth-page .site-auth-section [class*="col-"] {
  max-width: 100%;
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
}

body.site-auth-page .site-auth-heading {
  margin: 0 0 18px !important;
  padding: 0;
  text-align: center;
}

body.site-auth-page .site-auth-heading.mt-4 {
  margin-top: 0 !important;
}

body.site-auth-page .site-auth-heading h1 {
  font-size: clamp(26px, 4vw, 32px);
  font-weight: var(--fw-extra);
  color: var(--text-color);
  margin: 0 0 8px;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

body.site-auth-page .site-auth-heading__sub {
  margin: 0;
  color: var(--grey-500);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

body.site-auth-page .site-auth-heading__sub i {
  color: var(--c-muted);
}

/* ─── Split auth (login + signup): rotating promo panel (left) + form (right). */
body.site-authsplit .site-auth-section > .container { max-width: 580px; }

body.site-authsplit .auth-split {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 18px 50px rgba(var(--c-dark-rgb), 0.1);
  overflow: hidden;
}

/* Promo = compact top banner stacked ABOVE the form (same as mobile, all widths) */
body.site-authsplit .auth-split__promo {
  position: relative;
  padding: 26px 36px;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

/* Static greeting at the top of the banner (login only — set via $_authPromoHeading) */

body.site-authsplit .auth-promo__glow {
  display: none;
  position: absolute;
  top: -70px;
  right: -80px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  /* gold ka dhundhla gola hata diya (owner, 08 Sep) — ye element waise bhi display:none hai */
  z-index: -1;
}

body.site-authsplit .auth-promo__glow--2 {
  top: auto;
  right: auto;
  bottom: -90px;
  left: -70px;
  width: 220px;
  height: 220px;
  /* gold ka dhundhla gola hata diya (owner, 08 Sep) — ye element waise bhi display:none hai */
}

body.site-authsplit .auth-promo__body {
  margin-top: 0;
}

body.site-authsplit .auth-promo__stage {
  position: relative;
  overflow: hidden;
  min-height: 38px;
}

/* Horizontal slide carousel (true slide, not fade) — JS translates the track. */
body.site-authsplit .auth-promo__track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Feature list + trust note are hidden in the compact banner (kept in markup). */
body.site-authsplit .auth-promo__features {
  display: none;
}

body.site-authsplit .auth-promo__features li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: rgba(var(--c-text-rgb), 0.9);
}

body.site-authsplit .auth-promo__features li i {
  color: var(--c-text-muted);
  font-size: 15px;
  flex: none;
}

body.site-authsplit .auth-promo__slide {
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  column-gap: 16px;
  row-gap: 4px;
  align-content: center;
  justify-content: center;
}

body.site-authsplit .auth-promo__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--c-dark), var(--c-dark));
  border: 1px solid rgba(var(--c-border-rgb), 0.12);
  box-shadow: 0 4px 10px rgba(var(--c-dark-rgb), 0.2), inset 0 1px 0 rgba(var(--c-dark-rgb), 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--c-text);
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

/* Respect reduced-motion: no slide transition (auto-advance is also skipped in JS) */
@media (prefers-reduced-motion: reduce) {
  body.site-authsplit .auth-promo__track { transition: none; }
}

body.site-authsplit .auth-promo__title {
  font-size: 18px;
  line-height: 1.4;
  font-weight: var(--fw-regular);
  color: var(--grey-500);
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

body.site-authsplit .auth-promo__text {
  display: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey-500);
  margin: 0;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

body.site-authsplit .auth-promo__foot {
  display: none;
}

body.site-authsplit .auth-promo__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

body.site-authsplit .auth-promo__note {
  display: none;
}

body.site-authsplit .auth-promo__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--c-text-rgb), 0.38);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

body.site-authsplit .auth-promo__dot.is-active {
  width: 26px;
  background: var(--c-text);
}

body.site-authsplit .auth-split__form {
  padding: 22px 38px 32px;
}

body.site-authsplit .auth-split__form .site-auth-heading,
body.site-authsplit .auth-split__form .site-auth-heading__sub {
  text-align: center;
}

body.site-authsplit .auth-split__form .site-auth-heading {
  margin: 0 0 20px !important;
}

/* The split card IS the card — drop the inner form's own border/shadow/padding */
body.site-authsplit .auth-split .login_box {
  border: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* .login_box — scoped to body.site-auth-page (login / signup); used nowhere else on the site */
body.site-auth-page .login_box {
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  box-shadow: 0 4px 20px rgba(var(--c-dark-rgb), 0.05);
}

body.site-auth-page .login_box .mb-4 {
  margin-bottom: 18px !important;
}

body.site-auth-page .login_box .mb-3 {
  margin-bottom: 14px !important;
}

body.site-auth-page .login_box label {
  color: var(--text-color);
  font-weight: 400;
  font-size: 18px;
  display: block;
  margin-bottom: 6px;
}

body.site-auth-page .login_box label span {
  color: var(--main-color);
}

body.site-auth-page .login_box input.form-control {
  background: var(--c-surface);
  border: 1px solid var(--grey-200);
  color: var(--text-color);
  border-radius: var(--r-lg);
  padding: 12px 14px !important;
  font-size: var(--fs-14);
  height: 46px;
  box-shadow: none;
  transition: border-color var(--ct-fast), box-shadow var(--ct-fast);
}

body.site-auth-page .login_box input.form-control::placeholder {
  color: var(--grey-400);
}

body.site-auth-page .login_box input.form-control:focus {
  border-color: var(--main-color) !important;
  box-shadow: var(--shadow-focus);
  outline: none;
}

body.site-auth-page .login_box .login_btn {
  background: var(--main-color);
  color: var(--c-on-accent);
  font-weight: var(--fw-medium);
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-lg);
  font-size: 16px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-pink-md);
  transition: background var(--ct-fast), transform var(--ct-fast), box-shadow 0.18s;
}

body.site-auth-page .login_box .login_btn:hover {
  background: var(--main-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-pink-lg);
}

body.site-auth-page .login_box .login_btn i {
  font-size: var(--fs-12);
}

/* "Create account" — login ka DOOSRA raasta. 🔴 Owner, 12 Sep: "yellow nahi chahiye". */
body.site-auth-page .login_box .login_btn--outline {
  background: rgba(var(--c-shadow-rgb), .22);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  box-shadow: inset 0 1px 0 rgba(var(--c-text-rgb), .05);
  text-decoration: none;
  margin-top: 12px;
}

body.site-auth-page .login_box .login_btn--outline:hover {
  background: rgba(var(--c-shadow-rgb), .34);
  color: var(--c-text);
  border-color: var(--c-muted);
  box-shadow: inset 0 1px 0 rgba(var(--c-text-rgb), .07);
  transform: translateY(-1px);
}

/* Forgot password — centered link under the Login button. */

/* Divider line between the primary action and the alt-account row. */

body.site-auth-page .login_box .d-flex.justify-content-between {
  margin-top: -2px;
  font-size: 18px;
}

body.site-auth-page .login_box .form-check {
  padding-left: 28px;
}

/* 🔴 Naap yahan se HATA diya (owner 12 Sep). Login/signup ka checkbox ab ON/OFF */
body.site-auth-page .login_box .form-check-input {
  margin-left: -28px;
  cursor: pointer;
}

body.site-auth-page .login_box .form-check-input:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

body.site-auth-page .form-check-label {
  color: var(--text-color);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  cursor: pointer;
}

body.site-auth-page .login_box .no-account {
  color: var(--text-color);
  font-size: 18px;
  font-weight: 400;
  margin-top: 16px;
  text-align: center;
}

body.site-auth-page .login_box .no-account a,
body.site-auth-page .login_box .tf-color {
  color: var(--main-color);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

body.site-auth-page .login_box .no-account a:hover,
body.site-auth-page .login_box .tf-color:hover {
  text-decoration: underline;
}

body.site-auth-page .forgot_pass a {
  color: var(--main-color);
  font-weight: var(--fw-semibold);
}

body.site-auth-page .form-check-input:checked {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

/* Tick khud Bootstrap ke andar ek data-URI SVG hai jo SAFED se banta hai. Dabba yahan gold ho */
body.site-auth-page .form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230f0f0f' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

body.site-auth-page .form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230f0f0f'/%3e%3c/svg%3e");
}

body.site-auth-page .login_box .site-auth__pw-rules {
  background: var(--bg-soft);
  border: var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin: 6px 0 18px;
}

body.site-auth-page .login_box .site-auth__pw-rules p {
  color: var(--text-color);
}

body.site-auth-page .login_box .site-auth__pw-rules li {
  color: var(--grey-400);
}

body.site-auth-page .login_box .site-auth__pw-rules li.is-met {
  color: var(--text-color);
}

body.site-auth-page .login_box .site-auth__pw-rules li.is-met i {
  color: var(--green);
}

body.site-auth-page .login_box .site-auth__pw-toggle {
  color: var(--grey-400);
}

body.site-auth-page .login_box .site-auth__pw-toggle:hover {
  background: var(--bg-1);
  color: var(--main-color);
}

/* .acamic_img */
.acamic_img {
  position: relative;
  z-index: 1;
}

.acamic_img .profile_img {
  position: relative;
}

/* .form-control */
.form-control {
  border: 1px solid var(--grey-200);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:hover,
.form-control:focus {
  border-color: var(--main-color);
  box-shadow: var(--shadow-3d);
}

/* .about_content */

/* .search-widget_post — paint containment removed so ribbon can overflow card box via negative margin */
.search-widget_post {
  position: relative;
  padding: 5px 8px 5px 5px;
  border-radius: 15px;
  background: var(--c-surface);
  border: 1px solid rgba(var(--c-accent-rgb), 0.35);
  overflow: visible;
}

/* Row ka apna niyam abhi bhi "beech me" hai — tasveer wala khaana isi se sadhta hai. */
.search-widget_post .widget-content>.row {
  align-items: center !important;
}

/* ...par LIKHAAI wala khaana ab poori unchai leta hai. */
.search-widget_post .widget-content>.row>[class*="col-"]:last-child {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.search-widget_post .group-item.lab-item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.search-widget_post .lab-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: stretch !important;
}

/* Content is a natural-height column; the row's align-items:center centres the whole */
.search-widget_post .lab-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
}

.search-widget_post .lab-content .card-meta {
  margin-top: auto;
}

.search-widget_post .lab-content .button-container {
  margin-top: 10px;
  margin-bottom: 10px;
}

.search-widget_post .widget-content .acamic_img .profile_img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 260px;
  border-radius: var(--r-md);
  object-fit: cover;
  object-position: 70% 20%;
}

.search-widget_post .lab-content .lab-card-title a {
  /* Owner (08 Sep): title gold me "jam nahi raha" — ab safed. Gold card par ab sirf */
  color: var(--c-text);
}

.search-widget_post .lab-content .lab-card-title a:hover {
  /* Pehle base bhi gold tha aur hover bhi — hover kuch karta hi nahi tha. Ab safed title */
  color: var(--c-accent);
}

.search-widget_post .lab-content .lab-card-title {
  font-size: var(--fs-20);
  display: -webkit-box;
  overflow: hidden;
  /* Owner 20 Sep (phone): `margin:auto` flex-column me title ke upar-neeche bachi jagah BAANT deta tha — */
  margin: 14px 0 4px;
  line-height: 1.3;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search-widget_post .lab-content p,
.search-widget_post .lab-content .lab-desc {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.search-widget_post .lab-content .lab-desc p {
  display: inline;
  margin: 0;
}

.search-widget_post .lab-content .lab-desc p+p::before {
  content: ' ';
}

.search-widget_post .lab-content p a {
  display: none;
}

/* HIGHLIGHT add-on (paid) — owner 20 Sep: purana tint (--pink-tint = 6% safed) kaale card par dikhta hi */
.search-widget_post.is-highlighted {
  --hl-rgb: var(--c-highlight-rgb);
  /* Owner 15 Oct: highlighted ad = the site's grain texture over a light, see-through yellow wash */
  background: var(--c-texture), linear-gradient(rgba(var(--hl-rgb), 0.10), rgba(var(--hl-rgb), 0.10)), var(--c-surface);
  /* Owner 15 Oct: no special border or inset ring — same 1px border as every other card */
  box-shadow: var(--elev-1);
}

.search-widget_post.is-highlighted .widget-content {
  background: transparent;
}

.search-widget_post .button-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  container-type: inline-size;
}

.search-widget_post .button-container>.button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0 18px;
  gap: 6px;
  overflow: hidden;
}

/* Universal card button sizing — same at all breakpoints (moved from 5 duplicate responsive copies) */
.search-widget_post .button {
  max-width: 100%;
  /* 40px = Google's mobile tap-target minimum (was 35px). Primary card CTAs */
  height: 40px;
  font-size: var(--fs-13);
}

.search-widget_post .button-container>.telegram-button {
  opacity: 0.92;
}

.search-widget_post .button-container>.telegram-button .btn-label {
  display: none !important;
}

.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(2):last-child)>.button .btn-label {
  display: inline;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  text-overflow: clip;
}

.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(2):last-child)>.call-button,
.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(2):last-child)>.whatsapp-button,
.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(2):last-child)>.telegram-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 18px !important;
  gap: 6px !important;
}

.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(2):last-child)>.button i.fa,
.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(2):last-child)>.button i.fab,
.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(2):last-child)>.button i.fa-solid,
.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(2):last-child)>.button i.fa-brands {
  font-size: var(--fs-15) !important;
}

/* 3-button cards (Super Top): 46% / 23% / 23% with 4% gaps — applied at all widths to match sticky bar */
.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(3):last-child) {
  flex-wrap: nowrap !important;
  gap: 4% !important;
}

.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(3):last-child)>.call-button {
  flex: 0 0 46% !important;
  width: 46% !important;
  min-width: 0 !important;
  max-width: 46% !important;
  padding: 0 4px !important;
  overflow: hidden;
}

.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(3):last-child)>.whatsapp-button,
.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(3):last-child)>.telegram-button {
  flex: 0 0 22% !important;
  width: 22% !important;
  min-width: 0 !important;
  max-width: 22% !important;
  padding: 0 !important;
}

.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(3):last-child)>.call-button .btn-label {
  display: inline !important;
  font-weight: var(--btn-fw);
  white-space: nowrap;
}

.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(3):last-child)>.whatsapp-button .btn-label,
.search-widget_post .button-container:not(.button-container--icons):has(> .button:nth-child(3):last-child)>.telegram-button .btn-label {
  display: none !important;
}

.search-widget_post .button-container:not(.button-container--icons):has(> .button:only-child)>.button .btn-label {
  display: inline;
}

/* Admin number ON: Call widens for the real number; icon-only WA/TG stay narrow. Number OFF = no .is-num → equal widths. */
.search-widget_post .button-container>.call-button.is-num .btn-label {
  display: inline;
  font-size: var(--fs-12);
  font-weight: var(--btn-fw);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: clip;
}

.search-widget_post .button-container>.call-button.is-num {
  padding: 0 20px;
}

@container (min-width: 360px) {
  .search-widget_post .button-container>.button .btn-label {
    display: inline;
  }
}

/* "Hide card numbers" ON — Call button me sirf icon bachta hai. Us haalat me poori contact */
.search-widget_post .button-container--icons {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
}

.search-widget_post .button-container--icons>.button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  aspect-ratio: 1 / 1;
  padding: 0;
  gap: 0;
  justify-content: center;
}

.search-widget_post .button-container--icons>.button i {
  font-size: var(--fs-15);
}

.search-widget_post .button-container--icons>.button .btn-label {
  display: none;
}

/* .group_section */
.group_section {
  padding-top: 10px;
  background-color: transparent;
}

.group_section .nearby-area-btn {
  padding: 2px 5px;
  margin: 1px 0 5px;
  font-size: 11px;   /* 10px read too small on phones (23 Oct 2026, audit) */
}

/* Shared photo placeholder — shows the brand placeholder image instantly while */
.card-photo-single,
.profile-photo-slider .swiper-slide,
.profile-photo-grid__item {
  background-color: var(--bg-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 601'%3E%3Crect width='400' height='601' fill='%231e1e1e'/%3E%3Cg stroke='%23363636' stroke-width='12' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='128' y='235' width='144' height='112' rx='14'/%3E%3Ccircle cx='164' cy='266' r='11' fill='%23363636' stroke='none'/%3E%3Cpath d='M136 330l42-42 30 30 24-24 40 38'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card-photo-single img,
.profile-photo-slider img,
.profile-photo-grid__item img {
  position: relative;
  z-index: 1;
}

.card-photo-single {
  display: block;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}

.card-photo-link {
  display: block;
}

.card-photo-single img {
  width: 100%;
  height: 350px;
  border-radius: var(--r-md);
  object-fit: cover;
  object-position: 70% 20%;
}

/* FREE ad teaser — one REAL photo, lightly blurred so the face isn't fully clear (the */
.card-photo-single--free img {
  filter: blur(7px) saturate(0.96);
  transform: scale(1.08);            /* hide the blurred edges bleeding past the frame */
}

/* Multi-photo cards: imgs sit inside a flex track that translates for the */
.card-photo-track {
  display: flex;
  transition: transform 0.5s ease;
}

.card-photo-track > img {
  flex: 0 0 100%;
}

/* .card-slider-nav — prev/next chevrons (anchored on .card-photo-single). */
.card-slider-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-full);
  background: rgba(var(--c-dark-rgb), 0.5);
  color: var(--white-color);
  font-size: var(--fs-13);
  cursor: pointer;
  opacity: 0.1;
  transition: background var(--ct-fast), opacity var(--ct-fast);
}

.card-slider-nav:hover {
  background: rgba(var(--c-dark-rgb), 0.72);
  opacity: 1;
}

/* 🔴 Jahan HOVER hota hi nahi (phone, tablet), wahan ye teer aaram me hi dikhna chahiye. */
@media (hover: none) {
  .card-slider-nav { opacity: .92; background: rgba(var(--c-dark-rgb), 0.72); }
}

.card-slider-nav--prev { left: 8px; }
.card-slider-nav--next { right: 8px; }

/* .card-fresh */
.card-fresh {
  display: inline-flex;
  align-items: center;
  font-weight: var(--fw-bold);
  text-transform: capitalize;
  gap: 5px;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-size: 11px;   /* 10px read too small on phones (23 Oct 2026, audit) */
  letter-spacing: 0.3px;
  background: var(--c-surface);
  box-shadow: var(--shadow-3d);
  pointer-events: none;
}

.card-fresh i {
  font-size: var(--fs-10);
  opacity: 0.9;
}

/* Flash "AVAILABLE NOW" — animated label shown on profile cards while a Flash promo is active */
.card-available-now {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-success), var(--c-success));
  color: var(--c-on-accent);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px;
  box-shadow: 0 4px 12px rgba(var(--c-dark-rgb), 0.35);
  pointer-events: none;
  animation: cardAvailNowPulse 1.6s ease-in-out infinite;
}
/* Flash pill in the card's RIBBON slot (replaces Super Top during the burst): */
.search-widget_post .lab-content>.card-available-now--rb {
  position: absolute;
  top: 0; left: auto; right: -5px;
  transform: translateY(-50%);
  margin: 0;
  z-index: 6;
}
/* Ribbon-slot flash pill gets the shadow-2 paper-curl, doubled and a little taller, kept 8% inside the pill so it never spills past the card (owner, 15 Oct 2026) */
.search-widget_post .lab-content>.card-available-now--rb::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -18px; height: 18px;
  background: url("/assets/images/icons-group/shadows/shadow-2.png") center top / 100% 100% no-repeat, url("/assets/images/icons-group/shadows/shadow-2.png") center top / 100% 100% no-repeat;
  pointer-events: none; z-index: -1;
}
.card-available-now__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-on-accent);
  box-shadow: 0 0 0 0 rgba(var(--c-dark-rgb), 0.7);
  animation: cardAvailDotPulse 1.4s ease-out infinite;
}
@keyframes cardAvailNowPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(var(--c-dark-rgb), 0.35); }
  50%      { box-shadow: 0 6px 18px rgba(var(--c-dark-rgb), 0.55); }
}
@keyframes cardAvailDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--c-dark-rgb), 0.8); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--c-dark-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--c-dark-rgb), 0); }
}

/* tone variants — icon inherits color from parent automatically */
.card-fresh--new {
  color: var(--c-text-muted);
}

.card-fresh--recent {
  /* Pehle "new" aur "recent" DONO gold the — do alag haalat, ek hi rang, matlab farq khatam. */
  color: var(--c-muted);
}

/* Overlay on card image (top-left, opposite heart) */
.profile_img .card-fresh {
  position: absolute;
  top: -6px;
  left: -4px;
  z-index: 10;
}

/* .card-views */
.card-views {
  display: inline-flex;
  align-items: center;
  font-weight: var(--fw-bold);
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  white-space: nowrap;
  gap: 5px;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  line-height: 1;
  font-size: var(--fs-11);
  letter-spacing: 0.2px;
  color: var(--c-muted);
  background: var(--c-surface);
  box-shadow: var(--shadow-3d);
  pointer-events: none;
}

.card-views i {
  font-size: var(--fs-10);
  color: var(--c-muted);
}

/* .fav-btn — solid bg, no backdrop-filter (renders ~12 per card-list, blur on */
.fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid;   /* owner-niyam: 1px. 1.5px = aadha pixel = dhundhla kinara */
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--main-color);
  cursor: pointer;
  transition: transform var(--ct-fast), color var(--ct-fast), background var(--ct-fast), box-shadow var(--ct-fast);
}

.fav-btn i {
  font-size: var(--fs-18);
}

.fav-btn:hover {
  transform: scale(1.08);
  color: var(--main-color);
}

.fav-btn:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

.fav-btn.is-favourited {
  color: var(--main-color);
  background: var(--c-surface);
}

.fav-btn.is-favourited i {
  animation: favPop 0.3s ease;
}
/* .ribbon —  */
.ribbon {
  pointer-events: none;
}

.ribbon span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: var(--border);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  color: var(--blue-color);
  background: var(--c-surface);
}

.ribbon span i {
  font-size: var(--fs-10);
  transform: scaleX(-1);
  color: var(--blue-color);
}

/* ─── Premium banner ribbons — Top (blue) + Super Top (pink) ─── */
.ribbon[data-ribbon="top"],
.ribbon[data-ribbon="super-top"] {
  position: relative;
  overflow: visible;
}

.ribbon[data-ribbon="top"] span,
.ribbon[data-ribbon="super-top"] span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 0;
  border-radius: 6px;
  color: var(--c-on-accent);
  font-weight: 700;
  font-size: var(--fs-9);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
  background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent) 100%);
  text-shadow: 0 1px 2px rgba(var(--c-dark-rgb), 0.18);
}

.ribbon[data-ribbon="top"] span i,
.ribbon[data-ribbon="super-top"] span i {
  color: var(--c-on-accent);
  transform: none;
  font-size: 8px;
  text-shadow: 0 1px 2px rgba(var(--c-dark-rgb), 0.18);
}

/* Super Top: brand pink gradient */
.ribbon[data-ribbon="super-top"] span {
  background: linear-gradient(180deg, var(--c-accent-light) 0%, var(--main-color) 100%);
}

.ribbon[data-ribbon="free"] span {
  position: relative;
  color: var(--c-muted);
  background: var(--c-surface-light);
  border: 1px solid var(--c-border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--fs-10);
  padding: 4px 9px;
}

.ribbon[data-ribbon="free"] span i {
  color: var(--c-muted);
  transform: none;
}

/* Inner dashed stitch line — sewn-tag look */
.ribbon[data-ribbon="free"] span::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px dashed var(--c-border);
  border-radius: 3px;
  pointer-events: none;
}

/* Pin the ribbon to the CARD's top-right corner, poking ~half above the top edge, */
.search-widget_post .lab-content>.ribbon {
  position: absolute;
  top: 0;
  right: -5px;   /* owner 03 Sep: badge card ke daayein kinare se 5px bahar jhaanke (Skokka-jaisa) */
  transform: translateY(-50%);
  margin: 0;
}

/* .custom-group-section */
.custom-group-section {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 0;
  border-radius: var(--r-md);
}

/* .custom-card */
.custom-card,
.info-card {
  margin-bottom: 20px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-3d);
}

.custom-card {
  padding: 20px;
}

.custom-card#contact-me {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* .create-post — always paired with .info-card/.custom-card, which already set */
.create-post {
  padding: 20px 0px 20px 0px;
}

.create-post .lab-inner {
  padding: 0px 35px;
}

/* .active-group — card ke content-column ke neeche 1px ki lakeer thi (owner 20 Sep: "card ki ye */

.active-group .widget-content .group-item h6 {
  font: normal normal 600 15px Inter;
}

/* .button-container */
.button-container {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
}

/* .button */
.button {
  position: relative;
  display: inline-flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 40px;
  overflow: hidden;
  /* Owner-niyam: border hamesha 1px solid. Yahan `ridge 2px` tha — 02 Sep ka sweep */
  border: 1px solid rgba(var(--c-border-rgb), 0.341);
  border-radius: 7px;
  font-size: var(--fs-13);
  font-weight: var(--btn-fw);
  text-align: center;
  text-decoration: none;
  color: white;
  background: linear-gradient(-45deg, var(--pink-light), var(--main-color));
  /* Owner 18 Sep: "contact button ki 3d shadow remove kar do". `--shadow-3d` do parat ka tha - */
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  color: white;
  box-shadow: none;
  transform: translateY(6px);
}

/* Unavailable contact button (audit P1-04, 10 Oct 2026): rendered instead of a link when numbers are */
.button.is-off {
  opacity: .5;
  cursor: not-allowed;
}

.button.is-off:hover {
  transform: none !important;
}

.button i.fa,
.button i.fab,
.button i.fa-solid,
.button i.fa-brands {
  font-size: var(--fs-18);
  line-height: 1;
}

.button.telegram-button {
  background: linear-gradient(145deg, var(--telegram), var(--telegram));
  color: var(--white-color);
}

.button.telegram-button:hover {
  color: var(--white-color);
}

.button .btn-label {
  display: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: inherit;
}

/* .whatsapp-button */
.whatsapp-button {
  background: linear-gradient(145deg, var(--green), var(--green));
  /* .button par shadow band hui, par ye rule uske BAAD aata hai aur dobara laga deta tha — */
  box-shadow: none;
}

/* .info-card-title */
.info-card-title {
  padding: 12px 0;
  border-radius: 7px 7px 0 0;
  border-color: var(--line-soft);
  border-bottom: rgba(var(--c-border-rgb), 0.502) solid 1px;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  background: var(--c-surface);
}

/* .terms-intro */
.terms-intro {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  padding: 40px 40px 32px;
  border-radius: 20px;
  color: var(--c-on-accent);
  background: linear-gradient(135deg, var(--main-color) 0%, var(--main-dark) 100%);
  box-shadow: var(--shadow-3d);
}

.terms-intro::before {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: var(--r-full);
  background: rgba(var(--c-text-rgb), 0.08);
  content: "";
}

.terms-intro::after {
  position: absolute;
  right: 40px;
  bottom: -100px;
  width: 160px;
  height: 160px;
  border-radius: var(--r-full);
  background: rgba(var(--c-text-rgb), 0.06);
  content: "";
}

.terms-intro h2 {
  margin: 0 0 12px;
  padding: 0;
  border: none;
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--white-color);
}

.terms-intro p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.7;
  color: rgba(var(--c-on-accent-rgb), 0.92);
}

.terms-intro a {
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  color: var(--white-color);
}

/* .terms-toc */
.terms-toc {
  margin-bottom: 32px;
  padding: 24px 28px;
  border: var(--border-soft);
  border-radius: 16px;
  background: var(--c-surface);
  box-shadow: var(--shadow-3d);
}

.terms-toc h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-color);
}

.terms-toc h3::before {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--main-color);
  content: "";
}

.terms-toc ol {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 0;
  padding: 0;
  counter-reset: toc;
  list-style: none;
}

.terms-toc ol li {
  counter-increment: toc;
}

.terms-toc ol li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-decoration: none;
  color: var(--grey-700);
  transition: all 0.2s ease;
}

.terms-toc ol li a::before {
  min-width: 24px;
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--main-color);
  content: counter(toc, decimal-leading-zero);
}

.terms-toc ol li a:hover {
  color: var(--main-color);
  background: var(--pink-tint);
  transform: translateX(4px);
}

/* .policy-section */
.policy-section {
  position: relative;
  margin-bottom: 18px;
  padding: 30px 32px;
  border: var(--border-soft);
  border-radius: 16px;
  background: var(--c-surface);
  box-shadow: var(--shadow-3d);
  transition: all 0.25s ease;
  counter-increment: policy;
}

.policy-section:hover {
  border-color: var(--pink-line);
  box-shadow: var(--shadow-3d);
  transform: translateY(-2px);
}

.policy-section h2 {
  position: relative;
  margin: 0 0 14px;
  padding-left: 60px;
  border: none;
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  color: var(--text-color);
}

.policy-section h2::before {
  position: absolute;
  top: -4px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--c-on-accent);
  background: linear-gradient(135deg, var(--main-color) 0%, var(--main-dark) 100%);
  box-shadow: var(--shadow-3d);
  content: counter(policy, decimal-leading-zero);
}

.policy-section p,
.policy-section ul {
  margin: 10px 0 0 60px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey-700);
}

.policy-section p+p {
  margin-top: 10px;
}

.policy-section ul li {
  display: list-item;
  margin-bottom: 8px;
}

.policy-section ul li::before {
  content: none;
}

.policy-section a {
  border-bottom: 1px dashed rgba(var(--main-rgb), 0.4);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: var(--main-color);
  transition: all 0.2s ease;
}

.policy-section a:hover {
  color: var(--main-dark);
  border-bottom-style: solid;
}

.policy-section.contact-section {
  border: none;
  color: var(--white-color);
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-surface-light) 100%);
}

.policy-section.contact-section p {
  color: rgba(var(--c-text-rgb), 0.85);
}

.policy-section.contact-section a {
  color: var(--pink-light);
  border-bottom-color: rgba(var(--c-accent-light-rgb), 0.4);
}

/* .tf-color */
.tf-color {
  color: var(--main-color) !important;
}

/* .nearby-area-btn */
.nearby-area-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  gap: 5px;
  margin: 4px 6px 4px 0;
  padding: 4px 11px;
  border: 1px solid rgba(var(--main-rgb), 0.18);
  border-radius: 7px;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--ink);
  /* Gold ka alpha kaali satah par bhoora ban jaata tha — satah ab neutral uthti hai, kinara aur */
  background: var(--c-tint);
  cursor: default;
}

.nearby-area-btn:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

.nearby-area-btn .fa,
.nearby-area-btn .fas,
.nearby-area-btn .fa-solid,
.nearby-area-btn i {
  font-size: var(--fs-10);
  opacity: 0.75;
}
/* keyframes / font-face */
@keyframes favPop {
  0% {
    transform: scale(0.7);
  }

  60% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes site-breadcrumb-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes skSidebarItemIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .site-header__fav-link */
.site-header__fav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* .site-header__fav-count */
.site-header__fav-count {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--main-color);
  color: var(--c-on-accent);
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.site-header__fav-count.is-empty {
  display: none;
}

/* img */
img[width][height] {
  height: auto;
}

/* hr */
hr {
  opacity: 0.9;
  width: 70%;
  height: 2px;
  margin-top: 10px;
  margin-right: 15%;
  margin-left: 15%;
  border-style: dashed;
  border-width: 1px;
  color: var(--main-color);
  background-color: var(--c-surface);
}

/* a */
a {
  text-align: left;
  color: var(--main-color);
  text-decoration: none;
  transition: color var(--ct-fast);
}

a:hover {
  /* `--blue-color` bhi gold par map ho gaya tha, isliye link ka hover BILKUL kuch nahi karta tha */
  color: var(--c-hover);
}

/* html */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--grey-300) transparent;
}

html::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  border-radius: 7px;
  background: var(--grey-300);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--grey-400);
}

/* .share-section */
.share-section {
  text-align: center;
}

.share-section p {
  margin-bottom: 10px;
  padding-top: 15px;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  text-align: center;
}

/* .share-icons */
.share-icons ul {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.share-icons ul li a {
  font-size: 24px;
  color: var(--main-color);
  transition: color 0.3s ease;
}

.share-icons ul li a:hover {
  color: var(--main-color);
}
/* Headings — single source for h1–h6 sizes. Overrides Bootstrap's fluid calc() */
h1, .h1 { font-size: 32px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 25px; }
h4, .h4 { font-size: var(--fs-20); }
h5, .h5 { font-size: var(--fs-18); }
h6, .h6 { font-size: var(--fs-16); }

h1 {
  margin: 10px 0 15px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--white-color);
}

h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); }

/* p — text-align removed so paragraphs inherit alignment from parent */
p {
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--c-text);
}

/* Quill editor alignment classes (admin saves alignment via these) */
.ql-align-left {
  text-align: left;
}

.ql-align-center {
  text-align: center;
}

.ql-align-right {
  text-align: right;
}

.ql-align-justify {
  text-align: justify;
}

/* .sk-modal */
.sk-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.sk-modal.is-open {
  display: flex;
}

/* Entrance — the panel fades in while sliding down from the top; the backdrop fades in */
.sk-modal.is-open .sk-modal__panel {
  animation: skModalDrop 0.46s cubic-bezier(0.2, 0.85, 0.3, 1.04) both;
}

@keyframes skModalDrop {
  from {
    opacity: 0;
    transform: translateY(-48px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sk-modal.is-open .sk-modal__backdrop {
  animation: skModalFade 0.34s ease both;
}

@keyframes skModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-modal.is-open .sk-modal__panel,
  .sk-modal.is-open .sk-modal__backdrop {
    animation: none;
  }
}

/* .sk-modal__backdrop */
.sk-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--ctp-backdrop, rgba(var(--c-dark-rgb), 0.55));
  -webkit-backdrop-filter: blur(var(--ctp-blur, 5px));
  backdrop-filter: blur(var(--ctp-blur, 5px));
}

/* .sk-modal__panel */
.sk-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: 40px 36px 32px;
  border-radius: var(--ctp-r, 20px);
  border: var(--ctp-bordw, 0) solid var(--ctp-bordc, transparent);
  background: var(--c-surface);
  box-shadow: var(--ctp-shadow, var(--shadow-xl));
  text-align: center;
}

/* .sk-age-modal__lead */
.sk-age-modal__lead {
  margin: 0 0 16px;
  color: var(--c-text);
  font-size: var(--fs-15);
  line-height: 1.5;
}

/* .sk-age-modal__terms */
.sk-age-modal__terms {
  margin: 0 0 26px;
  color: var(--c-text);
  font-size: var(--fs-15);
  line-height: 1.5;
}

.sk-age-modal__terms a {
  color: var(--main-dark);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.sk-age-modal__terms a:hover {
  text-decoration: underline;
}

/* .sk-age-modal__actions */
.sk-age-modal__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* .sk-cookies-modal */
.sk-cookies-modal {
  max-width: 480px;
  padding: 32px 32px 24px;
}

/* .sk-cookies-modal__title */
.sk-cookies-modal__title {
  margin: 0 0 16px;
  color: var(--ink-800);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
}

/* .sk-cookies-modal__lead */
.sk-cookies-modal__lead {
  margin: 0 0 24px;
  color: var(--c-text);
  font-size: var(--fs-14);
  line-height: 1.55;
}

/* .sk-cookies-modal__actions */
.sk-cookies-modal__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}

/* .sk-cookies-modal__foot */
.sk-cookies-modal__foot {
  margin: 18px 0 0;
  color: var(--c-muted);
  font-size: var(--fs-12);
  line-height: 1.5;
}

.sk-cookies-modal__foot a {
  color: var(--main-dark);
  text-decoration: none;
}

.sk-cookies-modal__foot a:hover {
  text-decoration: underline;
}

/* .sk-btn */
.sk-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.sk-btn--primary {
  min-width: 180px;
  padding: 8px 20px;
  border-radius: var(--ctp-btnr, 10px);
  background: linear-gradient(135deg, var(--ctp-accent, var(--main-color)), var(--ctp-accent2, var(--c-accent-light)));
  color: var(--c-on-accent);
  font-size: var(--fs-14);
  font-weight: var(--btn-fw);
  letter-spacing: 0.3px;
  box-shadow: 0 8px 20px rgba(var(--c-dark-rgb), 0.34);
  transition: box-shadow 0.2s, transform 0.12s;
}

.sk-btn--primary:hover,
.sk-btn--primary:focus {
  box-shadow: 0 10px 26px rgba(var(--c-dark-rgb), 0.46);
}

.sk-btn--primary:active {
  transform: translateY(1px);
}

.sk-btn--link {
  background: transparent;
  color: var(--main-dark);
  font-size: var(--fs-13);
  font-weight: var(--btn-fw);
  letter-spacing: 0.5px;
  padding: 8px 12px;
}

.sk-btn--link:hover {
  text-decoration: underline;
}

/* .site-header */
.site-header {
  /* Apna token (owner 12 Sep) — pehle seedha --c-dark tha, yaani body jaisa hi rang */
  background-color: var(--c-chrome-header);
  background-image: var(--c-texture);
  border-bottom: var(--border);
  padding: 10px 4px 10px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* .site-header__brand */
.site-header__brand {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 5px;
  row-gap: 2px;
  align-items: center;
  text-decoration: none;
}

/* .site-header__brand-icon — width follows the mark's own shape (brand_mark_img), so the name sits close (owner 21 Oct 2026);
   img[width][height] in the selector: the global `img[width][height] { height: auto }` would otherwise drop the 50px */
img[width][height].site-header__brand-icon {
  height: 50px;
  width: auto;
  object-fit: contain;
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
}

/* .site-header__brand-name */
.site-header__brand-name {
  /* Wordmark ab inline SVG hai (brand-wordmark.php), isliye yahan font-family nahi chahiye. */
  font-size: var(--fs-22);
  font-weight: var(--fw-regular);
  color: var(--main-color);
  letter-spacing: 0;
  line-height: 1.2;
  grid-row: 1;
  grid-column: 2;
  align-self: end;
}
/* Two-tone wordmark (matches the logo): first word pink, rest navy. */
.site-header__brand-name .brand-1 { color: var(--main-color); }
.site-header__brand-name .brand-2 { color: var(--navy); }

/* Wordmark inline SVG (header/footer/sidebar). Naap em me hai, to ye aas-paas ke font-size ke */
.brand-wordmark { display: inline-block; }

/* .site-header__brand-meta */
.site-header__brand-meta {
  display: flex;
  align-items: center;
  grid-row: 2;
  grid-column: 2;
  gap: 8px;
  align-self: start;
}

/* .site-header__country */
.site-header__country {
  font-size: var(--fs-11);
  color: var(--main-color);
  font-weight: var(--fw-bold);
}

/* .site-header__city */
.site-header__city {
  font-size: var(--fs-11);
  color: var(--muted-color);
  margin-top: 2px;
}

/* .site-header__actions */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logged-in member button — ab sirf user ki PROFILE PHOTO (na ho to verified-user icon). */
.site-header__memberbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; box-sizing: border-box; background: var(--pink-tint, rgba(var(--c-accent-rgb), 0.12)); border: 1px solid var(--pink-line, rgba(var(--c-accent-rgb), 0.3)); border-radius: 999px; cursor: pointer; font: inherit; overflow: hidden; }
.site-header__memberbtn i { color: var(--c-text-muted); font-size: 15px; }
.site-header__memberbtn img[width][height].site-header__memberpic { width: 34px; height: 34px; object-fit: cover; display: block; border-radius: 50%; flex: none; }
/* ⚠ width/height PIXEL me — `100%` flex-item ke andar height resolve nahi karta, to portrait photo */

/* .site-header__icon */
.site-header__icon {
  text-decoration: none;
  color: var(--c-text-muted);
  font-size: var(--fs-22);
  font-weight: var(--btn-fw);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
}

.site-header__icon:hover {
  color: var(--main-color);
}

.site-header__icon:focus-visible,
.site-search-modal__close:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Search kholne wale (hero ka box, city bar, unke andar ka gol button): Tab se aane par wahi ring jo */
[data-site-search-open]:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

.site-header__icon.is-loading i {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* .site-header__post-ad */
.site-header__post-ad {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-hover) 100%);
  color: var(--c-on-accent);
  padding: 11px 22px;
  border-radius: var(--r-lg);
  font-size: 12px;
  letter-spacing: 0.6px;
  cursor: pointer;
  box-shadow: var(--shadow-navy);
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.site-header__post-ad:hover {
  background: linear-gradient(135deg, var(--c-hover) 0%, var(--c-accent) 100%);
  color: var(--c-on-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-navy-hover);
}

/* .site-seo-sections */
.site-seo-sections {
  /* Keep .container's own 12px gutter. Zeroing it made these boxes 24px wider than the service */
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 24px;
}

/* .site-seo-section */
.site-seo-section {
  /* No outline — the service cards carry shadow only, and a border on top of the same shadow */
  border: 0;
  border-radius: var(--r-lg);
  padding: 22px 30px;
  margin-bottom: 0;
  text-align: center;
  /* Same lift as .site-service-card, so the pill boxes sit on the page like the four */
  background: var(--c-surface);
  box-shadow: 0 0.125rem 1.25rem 0 rgba(var(--c-dark-rgb), 0.15);
}

/* --plain — no panel at all, just the pills on the page. Used for the tag row, where the card */
.site-seo-section--plain {
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* .site-seo-section__title — centered heading above the box. Inline (not flex) so */
.site-seo-section__title {
  color: var(--text-color);
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  margin: 0 0 14px;
  text-align: center;
}
.site-seo-section__title i {
  color: var(--c-text-muted);
  margin-right: 8px;
}

/* .site-seo-section__pills */
.site-seo-section__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* .site-seo-section__pill */
.site-seo-section__pill {
  border: var(--border-brand);
  border-radius: var(--r-sm);
  padding: 7px 18px;
  text-decoration: none;
  color: var(--main-color);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  transition: var(--ct-fast);
}

.site-seo-section__pill:hover {
  background: var(--main-color);
  color: var(--c-on-accent);
}

/* .site-footer */
.site-footer {
  /* Chrome = --c-dark, admin/dashboard jaisa (owner 11 Sep). Ye rule site-footer.php wale se */
  background-color: var(--c-chrome-footer);
  background-image: var(--c-texture);
  padding: 28px 0 0;
  border-top: var(--border);
  margin-top: 0;
}

/* .site-footer__top */
.site-footer__top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  padding-bottom: 22px;
}

.site-footer__brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 5px;
}

img[width][height].site-footer__brand-icon {
  flex-shrink: 0;
  height: 44px;
  width: auto;
  object-fit: contain;
}

.site-footer__brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

/* .site-footer__brand-name */
.site-footer__brand-name {
  /* Wordmark ab inline SVG hai (brand-wordmark.php), isliye yahan font-family nahi chahiye. */
  font-size: 26px;
  font-weight: var(--fw-regular);
  color: var(--main-color);
  letter-spacing: 0;
  line-height: 1;
}

.site-footer__brand-country {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-size: var(--fs-12);
  color: var(--main-color);
  letter-spacing: 0.8px;
  margin-top: 4px;
}

/* .site-footer__desc */
.site-footer__desc {
  color: var(--grey-700);
  font-size: var(--fs-13);
  line-height: 1.65;
  padding-top: 4px;
}

.site-footer__desc strong {
  color: var(--main-color);
}

/* The Terms link sits inside a paragraph and was distinguishable from the text around it only by */
.site-footer__desc a {
  color: var(--main-color);
  text-decoration: underline;
}

/* .site-footer__cols */
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 18px 0;
}

/* .site-footer__col */
.site-footer__col h5 {
  font-size: var(--fs-14);
  color: var(--text-color);
  font-weight: var(--fw-bold);
  margin: 0 0 12px;
}

.site-footer__col a {
  display: block;
  color: var(--grey-700);
  font-size: var(--fs-13);
  padding: 4px 0;
  text-decoration: none;
  transition: color var(--ct-fast);
}

.site-footer__col a:hover {
  color: var(--main-color);
  text-decoration: none;
}

/* .site-footer__cta-row */
.site-footer__cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: var(--border);
  /* 🔴 `center` tha — POST AD (39px) aur Cities (44px) ki unchai alag thi, to dono */
  align-items: start;
}

/* .site-footer__cta-label */
.site-footer__cta-label {
  font-weight: var(--fw-bold);
  color: var(--text-color);
  margin: 0 0 12px;   /* 8px tha — heading control se chipki thi (owner 12 Sep) */
  font-size: var(--fs-14);
}

.site-footer__cta-btn {
  display: block;
  text-align: center;
  font-weight: var(--btn-fw);
  text-transform: uppercase;
  width: 100%;
  text-decoration: none;
  /* Border hata (owner 12 Sep) — button ki apni satah aur bevel hi kinara bana dete hain; */
  border: 0;
  /* 🔴 Owner 12 Sep: "dark background achha nahi lag raha, height kam hai". */
  display: flex; align-items: center; justify-content: center;
  min-height: 48px;
  background: rgba(var(--c-text-rgb), 0.08);
  color: var(--c-accent);
  padding: 0 16px;
  border-radius: var(--r-lg);
  font-size: var(--fs-14);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background var(--ct-fast), transform 0.1s;
}

/* Hover par poora THOS gold bhar jaata tha — footer ki gehri patti par ek dam chamak */
.site-footer__cta-btn:hover {
  background: rgba(var(--c-text-rgb), 0.14);
  color: var(--c-accent);
}

.site-footer__cta-btn:active {
  transform: translateY(1px);
}

/* .site-footer__citypick — CITY PICKER, apna dropdown (native <select> nahi). */
.site-footer__citypick { position: relative; }

.site-footer__citybtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;                                 /* 44 tha — POST AD ke barabar (owner 12 Sep) */
  padding: 0 16px;
  background: rgba(var(--c-text-rgb), 0.08);        /* --c-surface tha — footer par gaddha; dekhiye .site-footer__cta-btn */
  border: 1px solid rgba(var(--c-text-rgb), 0.10);  /* --c-border (#363636) is wash par ghul jaata */
  border-radius: var(--r-lg);
  color: var(--text-color);
  font-size: var(--fs-14);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ct-fast);
}

/* Koi alag focus ring nahi — box apni border ke rang se haalat batata hai (wahi niyam jo purane */
.site-footer__citybtn:hover,
.site-footer__citybtn:focus-visible { background: rgba(var(--c-text-rgb), 0.14); border-color: rgba(var(--c-accent-rgb), 0.5); outline: none; }
.site-footer__citybtn[aria-expanded="true"] { border-color: var(--main-color); outline: none; }

.site-footer__citybtn i { font-size: 12px; color: var(--grey-550); transition: transform 0.18s; }
.site-footer__citybtn[aria-expanded="true"] i { transform: rotate(180deg); }

/* Panel: band haalat me visibility se hata hua (na tab-order me, na screen-reader me); khulte */
.site-footer__citypanel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 30;
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.site-footer__citypanel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.site-footer__citysearch {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: var(--border);
  border-radius: 0;
  /* 🔴 `--c-dark` tha — BODY ka rang. Dropdown ki satah par wo ghul jaata tha, khaana */
  background: rgba(var(--c-shadow-rgb), .55);
  box-shadow: var(--elev-in);
  color: var(--text-color);
  font-size: var(--fs-14);
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.site-footer__citysearch::placeholder { color: var(--grey-550); }

.site-footer__citylist {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: min(46vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-footer__citygrp {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 14px 4px;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--grey-550);
  background: var(--c-surface);
}

.site-footer__cityopt {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px 8px 22px;
  color: var(--text-color);
  font-size: var(--fs-14);
  cursor: pointer;
}

.site-footer__cityopt--all { color: var(--c-accent); }
/* Gold ka 10% wash tha — kaale par #342d1f, 40% saturation ka olive. Neutral kiya; */
.site-footer__cityopt:hover,
.site-footer__cityopt.is-active { background: rgba(var(--c-text-rgb), 0.08); }
.site-footer__cityopt.is-current { color: var(--c-accent); font-weight: var(--fw-semibold); }
.site-footer__cityempty { padding: 14px; color: var(--grey-550); font-size: var(--fs-13); }

@media (max-width: 619px) { .site-footer__citylist { max-height: 50vh; } }
@media (prefers-reduced-motion: reduce) { .site-footer__citypanel, .site-footer__citybtn i { transition: none; } }

.site-footer__bottom {
  position: relative;
  text-align: center;
  color: var(--white-color);
  padding: 26px 0 22px;
  margin-top: 14px;
  border-top: var(--border);
  background: var(--c-dark);
}

.site-footer__bottom .container {
  position: relative;
}

.site-footer__social-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.site-footer__follow-label {
  font-weight: var(--fw-bold);
  color: var(--white-color);
  font-size: var(--fs-14);
  letter-spacing: 0.2px;
  margin-right: 4px;
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  border: var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  line-height: 1;
  color: var(--text-color);
  background: var(--c-surface);
  transition: 0.18s ease;
}

.site-footer__social:hover {
  border-color: var(--main-color);
  color: var(--main-color);
  background: var(--pink-tint);
  transform: translateY(-2px);
}

/* .site-footer__rta — flat light-grey pill with RTA + vertical divider + caps subtitle */
.site-footer__rta {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-lg);
  font-family: Arial, sans-serif;
  font-weight: var(--fw-bold);
  color: var(--ink-800);
  text-decoration: none;
  background: var(--grey-200);
  transition: 0.18s ease;
  line-height: 1;
}

.site-footer__rta .rta-mark {
  display: block;
  height: 16px;
  width: auto;
  flex: 0 0 auto;
  padding-right: 10px;
  border-right: 1px solid rgba(var(--c-border-rgb), 0.18);
}

.site-footer__rta .rta-sub {
  font-size: var(--fs-11);
  letter-spacing: 0.5px;
  color: var(--ink-800);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* .site-footer__copybar — footer se ek kadam aur GEHRA (owner 12 Sep): page ka aakhri sira. */
.site-footer__copybar {
  background-color: var(--c-chrome-copybar);
  background-image: var(--c-texture);
  padding: 14px 0;
  border-top: var(--border);
}

.site-footer__copy {
  margin: 0;
  text-align: center;
  font: 400 13px/1.5 Inter, system-ui, sans-serif;
  color: var(--white-color);
}

/* Brand pink on the navy copybar measured 2.22:1 — well under the 4.5:1 needed to be readable. */
.site-footer__copy a {
  color: var(--c-accent-light);
  text-decoration: underline;
  font-weight: var(--fw-semibold);
}

.site-footer__copy a:hover {
  color: var(--white-color);
}

/* .ct-totop — BACK TO TOP: tairta hua PORTRAIT tab (owner 12 Sep: "abhi fixed hai footer me, */
.ct-totop {
  position: fixed; right: 12px; bottom: 22px; z-index: 990;   /* 18 tha — 1400px par form ke GO ON se 2px takrata tha */
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  width: 46px; min-height: 104px; padding: 12px 0 14px; margin: 0;
  border: 0; border-radius: 12px;
  background: var(--c-surface-light);
  color: var(--c-text);
  box-shadow: inset 0 0 0 1px rgba(var(--c-text-rgb), 0.14), var(--elev-1);
  cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .22s ease, transform .22s ease, box-shadow .2s, bottom .2s, visibility 0s linear .22s;
}
.ct-totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ct-totop__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(var(--c-text-rgb), 0.08); }
.ct-totop__rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); background: var(--c-accent); transition: height .12s linear; }
.ct-totop__arrow { width: 16px; height: 16px; flex: 0 0 auto; color: var(--c-accent); transition: transform .2s; }
.ct-totop__txt { writing-mode: vertical-rl; transform: rotate(180deg); font: var(--btn-fw, 600) 11px/1 'Inter', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-muted); transition: color .2s; }
/* hover .is-on ke BAAD — dono 0,2,0 hain, baad wala jeet'ta hai */
.ct-totop:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(var(--c-accent-rgb), 0.45), var(--elev-2); }
.ct-totop:hover .ct-totop__arrow { transform: translateY(-2px); }
.ct-totop:hover .ct-totop__txt { color: var(--c-text); }
.ct-totop:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
body.ct-stickybar .ct-totop,
body.ct-ip-bar .ct-totop { bottom: 96px; }
body.ct-modal-open .ct-totop { opacity: 0; visibility: hidden; }
@media (max-width: 767px) {
  .ct-totop { right: 14px; bottom: 18px; width: 42px; min-height: 96px; }
  body.ct-stickybar .ct-totop,
  body.ct-ip-bar .ct-totop { bottom: 92px; }
}
/* 23 Oct 2026 (audit: the tall tab covered the cards' Telegram button, prices and line ends): a 44px round button, arrow only,
   the progress as a ring; it fades after a moment without scrolling and comes back on hover, focus or the next scroll */
.ct-totop { width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; border-radius: 50%; flex-direction: row; }
.ct-totop__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-totop__rail { left: 0; right: 0; top: 0; bottom: 0; width: auto; border-radius: 50%; background: conic-gradient(var(--c-accent) calc(var(--p, 0) * 360deg), rgba(var(--c-text-rgb), 0.10) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.ct-totop__rail::after { display: none; }
.ct-totop__arrow { width: 18px; height: 18px; }
.ct-totop.is-on.is-idle { opacity: .4; }
.ct-totop.is-on.is-idle:hover, .ct-totop.is-on.is-idle:focus-visible { opacity: 1; }
@media (max-width: 767px) { .ct-totop { right: 10px; bottom: 14px; width: 42px; height: 42px; min-height: 42px; } }
@media (prefers-reduced-motion: reduce) {
  .ct-totop, .ct-totop__arrow, .ct-totop__txt, .ct-totop__rail::after { transition: none; }
}

/* .site-search */
.site-search {
  /* Ye patti header ke BILKUL wahi rang ki thi, isliye dono ek hi slab lagte the aur beech ka */
  background: transparent;
  padding: 14px 0 6px;
}

/* .site-search__form */
.site-search__form {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Page ki zameen ab --c-surface hai, isliye search box bhi wahi rang hota to ghul jaata. */
  background: var(--c-dark);
  border: var(--border);
  border-radius: 15px;
  padding: 6px 6px 6px 18px;
  cursor: pointer;
  transition: border-color var(--ct-fast), box-shadow var(--ct-fast);
}

.site-search__form:hover {
  border-color: var(--main-color);
  box-shadow: 0 2px 10px rgba(var(--main-rgb), 0.08);
}

/* .site-search__icon */
.site-search__icon {
  flex-shrink: 0;
  color: var(--muted-color);
  font-size: var(--fs-16);
}

/* .site-search__input */
.site-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--text-color);
  padding: 10px 0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .site-search__btn */
.site-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0;
  width: 42px;    /* 38 → 42: phone par ungli ka nishana (hero box ka button bhi 42) */
  height: 42px;
  border-radius: var(--r-full);
  background: var(--main-color);
  color: var(--c-on-accent);
  cursor: pointer;
  transition: background var(--ct-fast);
  font-size: var(--fs-14);
}

.site-search__btn:hover {
  background: var(--main-dark);
}

/* .site-breadcrumb */
.site-breadcrumb {
  padding: 14px 0 6px;
  font-size: var(--fs-13);
  color: var(--main-color);
}

.site-breadcrumb a {
  color: var(--main-color);
  text-decoration: none;
}

.site-breadcrumb a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  /* 04 Oct 2026: 16px-tall text links were below the tap-target guideline; padding, not font size */
  .site-breadcrumb a { display: inline-block; padding: 6px 2px; }
}

/* .site-breadcrumb__sep */
.site-breadcrumb__sep {
  color: var(--muted-color);
  margin: 0 6px;
}

/* .site-breadcrumb__current */
.site-breadcrumb__current {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: var(--fw-semibold);
  -webkit-user-select: none;   /* iPhone/Safari isi ko padhta hai — bina iske ungli der tak dabane */
  user-select: none;
}

.site-breadcrumb__current i {
  font-size: var(--fs-10);
  transition: transform 0.2s;
}

.site-breadcrumb__current:not(.open) i {
  transform: rotate(180deg);
}

.site-breadcrumb__current.open .site-breadcrumb__dropdown {
  display: block;
}

.site-breadcrumb__current.open .site-breadcrumb__caret i {
  transform: rotate(180deg);
}

.site-breadcrumb__current:not(.open) .site-breadcrumb__caret i {
  transform: none;
}

/* .site-breadcrumb__dropdown */
.site-breadcrumb__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 28px rgba(var(--c-dark-rgb), 0.12), 0 2px 6px rgba(var(--c-dark-rgb), 0.06);
  padding: 4px 0;
  z-index: 100;
  font-weight: var(--fw-regular);
  animation: site-breadcrumb-dropdown-in 0.15s ease-out;
  scrollbar-width: thin;
  scrollbar-color: var(--grey-300) transparent;
}

.site-breadcrumb__dropdown a {
  display: block;
  padding: 8px 16px;
  color: var(--text-color);
  font-size: 13px;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--bg-2);
  transition: color var(--ct-fast);
}

.site-breadcrumb__dropdown a:last-child {
  border-bottom: 0;
}

.site-breadcrumb__dropdown a:hover {
  color: var(--main-color);
  text-decoration: none;
}

.site-breadcrumb__dropdown::-webkit-scrollbar {
  width: 4px;
}

.site-breadcrumb__dropdown::-webkit-scrollbar-thumb {
  background: var(--grey-300);
  border-radius: 3px;
}

.site-breadcrumb__dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--grey-400);
}

/* .site-page-title */
.site-page-title {
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  color: var(--text-color);
  margin: 14px 0 22px;
}

/* .site-search-modal */
.site-search-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  /* Hangs from the header (owner, 19 Oct 2026): top edge on the header's bottom, measured on open (--sk-hang). */
  align-items: flex-start;
  justify-content: center;
  padding: var(--sk-hang, 30px) 16px 16px;
}

.site-search-modal.is-open {
  /* display ab ct-unfold.js deta/hataata hai — warna band hote hi */
  display: flex;
}

/* Opening used to be a single frame: display went none -> flex and the whole panel was simply there, */
.site-search-modal.is-open .site-search-modal__panel {
  /* Owner 19 Oct 2026 picked style 4 of a live demo reel ("3D palat") and asked for it smooth: hanging from
     the header, the panel swings down from its top edge like a hinged sign, one soft overshoot, then rests. */
  transform-origin: top center;
  backface-visibility: hidden;
  animation: skSearchIn 0.85s both;
}

/* The shared ct-fade nudges the whole overlay 8px; for this popup only the panel moves, so it never leaves the centre. */
.site-search-modal[data-ct-fade] {
  transform: none;
}

.site-search-modal[data-ct-fade].ct-closing > .site-search-modal__panel {
  transform-origin: top center;
  animation: skSearchOut 0.3s cubic-bezier(0.55, 0, 0.75, 0.2) both;
}

@keyframes skSearchIn {
  0%   { opacity: 0; transform: perspective(1400px) translateY(-24px) rotateX(-72deg); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  45%  { opacity: 1; }
  72%  { transform: perspective(1400px) translateY(0) rotateX(6deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { opacity: 1; transform: perspective(1400px) translateY(0) rotateX(0deg); }
}

@keyframes skSearchOut {
  from { opacity: 1; transform: perspective(1400px) rotateX(0deg); }
  to   { opacity: 0; transform: perspective(1400px) translateY(-16px) rotateX(-60deg); }
}

.site-search-modal.is-open .site-search-modal__backdrop {
  animation: skModalFade 0.55s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .site-search-modal.is-open .site-search-modal__panel,
  .site-search-modal.is-open .site-search-modal__backdrop {
    animation: none;
  }
}

/* .site-search-modal__backdrop */
.site-search-modal__backdrop {
  position: absolute;
  inset: 0;
  /* iPhone body ka overflow:hidden nahi maanta: parde/header/footer par ungli phiraane se peeche ka */
  touch-action: none;
  background: rgba(var(--c-dark-rgb), 0.55);
  /* iPhone/Safari sirf prefix wala padhta hai — bina iske search-modal ke peechhe ka page */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* .site-search-modal__panel */
.site-search-modal__panel {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - var(--sk-hang, 30px) - 16px);
  background: var(--c-surface);
  border-radius: 0 0 var(--r-md) var(--r-md);   /* square top: it hangs from the header's edge */
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}

/* .site-search-modal__header */
.site-search-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  touch-action: none;   /* dekhiye __backdrop */
  padding: 14px 22px;
  background: var(--bg-1);
  border-bottom: var(--border);
}

.site-search-modal__header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  font-weight: var(--fw-bold);
  font-size: 17px;
  color: var(--text-color);
  gap: 10px;
}

.site-search-modal__header h3 i {
  color: var(--text-color);
}

/* .site-search-modal__close */
.site-search-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  width: 42px;    /* 38 → 42: phone par band karne ka nishana */
  height: 42px;
  font-size: var(--fs-20);
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
  transition: var(--ct-fast);
}

.site-search-modal__close i {
  font-weight: var(--fw-bold);
}

.site-search-modal__close:hover {
  color: var(--main-color);
  background: rgba(var(--c-surface-light-rgb), 0.06);
}

/* .site-search-modal__body */
.site-search-modal__body {
  padding: 32px 26px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;   /* list ke aakhir par peeche ka page na khinche (iPhone) */
  flex: 1;
}

/* .site-search-modal__row */
.site-search-modal__row {
  display: grid;
  /* Ek column: pehli row me sirf service select hai — 2 column par wo aadhi chaudai ka reh jaata */
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.site-search-modal__row--triple {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Category + search box on one row, on the same three columns as the row below (the box spans two). */
.site-search-modal__row--pair {
  grid-template-columns: 1fr 1fr 1fr;
}

.site-search-modal__row--pair .site-search-input {
  grid-column: span 2;
}

@media (max-width: 767px) {
  .site-search-modal__row--pair .site-search-input {
    grid-column: auto;
  }
}

/* .site-search-select */
.site-search-select,
.site-search-input {
  width: 100%;
  padding: 10px 14px;
  border: var(--border);
  border-radius: 4px;
  font-size: var(--fs-14);
  color: var(--text-color);
  background: var(--c-surface);
  font-family: inherit;
}

.site-search-select {
  -webkit-appearance: auto;   /* apna teer wapas dikhane ke liye Safari ko prefix chahiye */
  appearance: auto;
  cursor: pointer;
}

/* Text box = baaki controls ke naap ka. Select ab ct-select ka button hai (48px, 10px corner, 15px); */
.site-search-input {
  min-height: 48px;
  border-radius: 10px;
  font-size: var(--fs-15);
}

.site-search-select:focus,
.site-search-input:focus {
  outline: none;
  border-color: var(--main-color);
}

.site-search-select:disabled {
  background: var(--bg-1);
  color: var(--grey-400);
  cursor: not-allowed;
  opacity: 0.7;
}

/* iPhone: 16px se chhote input par focus aate hi Safari poora page zoom kar deta hai — modal zoom ho */
@media (hover: none) {
  .site-search-input { font-size: var(--fs-16); }
}

/* .site-search-modal__filters-head */
.site-search-modal__filters-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 4px;
  font-size: var(--fs-14);
  color: var(--text-color);
}

.site-search-modal__filters-head i {
  color: var(--grey-400);
  font-size: var(--fs-16);
}

.site-search-modal__filters-head strong {
  font-weight: var(--fw-bold);
}

/* .site-filter */
.site-filter {
  border-bottom: 1px solid var(--line-soft);
}

.site-filter:last-child {
  border-bottom: 0;
}

.site-filter.is-open .site-filter__chevron {
  transform: rotate(90deg);
}

/* .site-filter__toggle */
.site-filter__toggle {
  width: 100%;
  padding: 15px 4px;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--text-color);
  cursor: pointer;
  font-family: inherit;
}

/* .site-filter__title */
.site-filter__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-filter__title i {
  color: var(--text-color);
  width: 18px;
  text-align: center;
}

/* .site-filter__chevron */
.site-filter__chevron {
  color: var(--main-color);
  font-size: var(--fs-14);
  transition: transform 0.2s ease;
}

/* .site-filter__panel */
.site-filter__panel {
  /* display:none transition rokti hai. Ab panel hamesha 'block' rehta hai aur */
  display: block;
  /* Neeche ki 18px jagah panel par NAHI, andar ke aakhri hisse par: border-box me band panel (height 0)
     apni padding se chhota nahi ho sakta, to har band filter ke neeche 18px khaali patti bachti thi (19 Oct 2026). */
  padding: 0 4px;
}

/* Spacer, not a margin on :last-child — the last child is the "Show more" button, and while it is hidden
   (everything fits on one line) its margin vanished with it and the pills touched the line below. */
.site-filter__panel::after {
  content: "";
  display: block;
  height: 18px;
}

/* .site-filter__pills */
.site-filter__pills {
  position: relative;   /* offsetTop of each pill is measured from here (search-modal.php, skFit) */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* One line until "Show more": --sf-one is where the first line ends at this width. The 4px padding
     (cancelled by the margin) keeps the keyboard ring of the first line inside the clip. */
  max-height: var(--sf-one, none);
  overflow: hidden;
  padding: 4px;
  margin: -4px;
}

.site-filter.is-more .site-filter__pills {
  max-height: none;
}

/* .site-filter__pill */
.site-filter__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-13);
  color: var(--text-color);
  background: var(--c-surface);
  cursor: pointer;
  transition: var(--ct-fast);
  -webkit-user-select: none;   /* filter chip ungli se dabta hai — iPhone par bina iske likhaai chun jaati hai */
  user-select: none;
}

/* Picked state matches the ad-option chips on /post-ad/ (.pa-tag): blue border + blue text + */
.site-filter__pill::before,
.site-filter__pill::after {
  content: "";
  width: 10px;
  flex: 0 0 10px;
}

.site-filter__pill::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  text-align: center;
  transition: color var(--ct-fast);
}

/* Keyboard se aaya pill: tick-box khud chhupa (clip) hai, isliye ring poore pill par — warna Tab */
.site-filter__pill:has(.site-filter__pill-input:focus-visible) {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

/* 🔴 Satah par gold ka alpha NAHI. Kaale par gold ghulakar rakhne se wo BHOORA banta hai — */
.site-filter__pill:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-tint);
}

.site-filter__pill.is-checked {
  background: var(--c-tint);
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.site-filter__pill.is-checked::before {
  content: "\f00d";
  color: var(--c-accent);
}

/* Lower lines stay in the layout (so they can be measured) but out of sight and out of Tab reach. Hiding
   waits for the closing slide, so they are clipped away rather than blinking out. */
.site-filter__pill.is-extra {
  visibility: hidden;
  transition: var(--ct-fast), visibility 0s linear var(--ct-motion-close);
}

.site-filter.is-more .site-filter__pill.is-extra {
  visibility: visible;
  transition: var(--ct-fast);
}

/* The country-code badge ("in", "al") sat on a dark chip before, so it was white-on-transparent. */
.site-filter__pill.is-checked .site-filter__pill-code {
  background: rgba(var(--c-text-rgb), 0.12);
  color: var(--c-accent);
}

@media (max-width: 539px) {
  .site-filter__pill::before,
  .site-filter__pill::after { width: 9px; flex: 0 0 9px; }
  .site-filter__pill::before { font-size: 13px; }
}

/* .site-filter__pill-code */
.site-filter__pill-code {
  display: inline-block;
  background: var(--bg-2);
  color: var(--c-muted);
  font-size: 9px;
  font-weight: var(--fw-bold);
  padding: 2px 4px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* .site-filter__more */
.site-filter__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--text-color);
  cursor: pointer;
  font-family: inherit;
}

.site-filter__more[hidden] {
  display: none;
}

.site-filter__more i {
  color: var(--main-color);
  font-size: 11px;
  transition: transform var(--ct-motion-close) var(--ct-motion-ease);
}

.site-filter.is-more .site-filter__more i {
  transform: rotate(180deg);
}

.site-filter__more:hover {
  color: var(--main-color);
}

/* .site-search-modal__footer */
.site-search-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  touch-action: none;   /* dekhiye __backdrop */
  padding: 14px 22px;
  border-top: var(--border);
  background-color: var(--c-surface);
}

/* .site-search-modal__reset */
.site-search-modal__reset {
  border: 0;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  background: transparent;
  color: var(--main-color);
  font-size: var(--fs-13);
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  padding: 14px 14px;   /* wahi upar-neeche padding jo SEARCH button ki hai — dono ek unchai ke */
}

.site-search-modal__reset:hover {
  color: var(--main-dark);
}

/* .site-search-modal__submit */
.site-search-modal__submit {
  display: inline-flex;
  align-items: center;
  border: 0;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  background: var(--main-color);
  color: var(--c-on-accent);
  padding: 14px 40px;
  border-radius: var(--r-lg);
  font-size: var(--fs-14);
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  gap: 10px;
  transition: background var(--ct-fast);
}

.site-search-modal__submit:hover {
  background: var(--main-dark);
}

/* .site-auth-page */
.site-auth-page {
  color: var(--ink);
}

/* .site-auth__password-wrap */
.site-auth__password-wrap {
  position: relative;
}

.site-auth__password-wrap input {
  padding-right: 50px !important;
}

/* .site-auth__pw-toggle */
.site-auth__pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-700);
  cursor: pointer;
  font-size: var(--fs-16);
  border-radius: 4px;
  z-index: 2;
}

.site-auth__pw-toggle:hover {
  background: var(--bg-1);
  color: var(--main-color);
}

/* .site-auth__pw-rules */
.site-auth__pw-rules {
  background: var(--bg-1);
  border-radius: 6px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  margin-bottom: 18px;
}

.site-auth__pw-rules p {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 10px;
}

.site-auth__pw-rules ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-auth__pw-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  color: var(--grey-300);
  transition: color var(--ct-fast);
}

.site-auth__pw-rules li i {
  font-size: var(--fs-14);
}

.site-auth__pw-rules li strong {
  color: inherit;
  font-weight: var(--fw-semibold);
}

.site-auth__pw-rules li.is-met {
  color: var(--ink);
}

.site-auth__pw-rules li.is-met i {
  color: var(--green);
}

/* .site-toggle — REMOVED. The old hand-built toggle CSS was a duplicate that conflicted with the */

/* .site-sidebar */
.site-sidebar {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
}

.site-sidebar.is-open {
  pointer-events: auto;
}

.site-sidebar.is-open .site-sidebar__backdrop {
  opacity: 1;
  visibility: visible;
  /* The blur belongs to the OPEN menu only. Left on the closed backdrop it still costs: an */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 0.85s ease, visibility 0s;
}

.site-sidebar.is-open .site-sidebar__panel {
  transform: translateX(0);
  box-shadow: -10px 0 40px rgba(var(--c-dark-rgb), 0.18);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}

.site-sidebar.is-open .site-sidebar__section,
.site-sidebar.is-open .site-sidebar__copy {
  animation: skSidebarItemIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-sidebar.is-open .site-sidebar__section:nth-of-type(1) {
  animation-delay: 0.45s;
}

.site-sidebar.is-open .site-sidebar__section:nth-of-type(2) {
  animation-delay: 0.55s;
}

.site-sidebar.is-open .site-sidebar__section:nth-of-type(3) {
  animation-delay: 0.65s;
}

.site-sidebar.is-open .site-sidebar__section:nth-of-type(4) {
  animation-delay: 0.75s;
}

.site-sidebar.is-open .site-sidebar__section:nth-of-type(5) {
  animation-delay: 0.85s;
}

.site-sidebar.is-open .site-sidebar__copy {
  animation-delay: 1.05s;
}

/* .site-sidebar__backdrop */
.site-sidebar__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--c-dark-rgb), 0.55);
  opacity: 0;
  /* Closed = not painted at all. visibility flips back only AFTER the fade finishes, so the */
  visibility: hidden;
  transition: opacity 0.85s ease, visibility 0s linear 0.85s;
}

/* .site-sidebar__panel */
.site-sidebar__panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70vw;
  background: var(--c-surface);
  color: var(--text-color);
  transform: translateX(100%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s 0.5s;
  box-shadow: 0 0 0 transparent;
  overflow: hidden;
  border-left: 1px solid var(--border-color);
}

/* .site-sidebar__header */
.site-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-bottom: var(--border);
}

/* .site-sidebar__brand */
.site-sidebar__brand {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  text-decoration: none;
}

/* .site-sidebar__brand-icon */
img[width][height].site-sidebar__brand-icon {
  height: 36px;
  width: auto;
  object-fit: contain;
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
}

/* .site-sidebar__brand-name */
.site-sidebar__brand-name {
  /* Wordmark ab inline SVG hai (brand-wordmark.php), isliye yahan font-family nahi chahiye. */
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  color: var(--main-color);
  letter-spacing: 0;
  line-height: 1.2;
  grid-row: 1;
  grid-column: 2;
  align-self: end;
}

/* .site-sidebar__country */
.site-sidebar__country {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-size: var(--fs-11);
  color: var(--main-color);
  letter-spacing: 0.8px;
  grid-row: 2;
  grid-column: 2;
  align-self: start;
}

/* .site-sidebar__close */
.site-sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  font-size: var(--fs-18);
  color: var(--muted-color);
  cursor: pointer;
  border-radius: 6px;
  transition: var(--ct-fast);
}

.site-sidebar__close:hover {
  color: var(--main-color);
  background: var(--pink-tint);
}

/* .site-sidebar__body */
.site-sidebar__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 20px;
  color: var(--text-color);
}

/* .site-sidebar__section */
.site-sidebar__section {
  margin-bottom: 20px;
}

.site-sidebar__section h4 {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  color: var(--muted-color);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 10px;
}

/* .site-sidebar__cta */
.site-sidebar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: var(--btn-fw);
  text-transform: uppercase;
  gap: 8px;
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-hover) 100%);
  color: var(--c-on-accent) !important;
  padding: 8px 18px;
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  letter-spacing: 0.4px;
  box-shadow: 0 3px 10px rgba(var(--c-dark-rgb), 0.22);
  transition: 0.2s;
}

.site-sidebar__cta:hover {
  background: linear-gradient(135deg, var(--c-hover) 0%, var(--c-accent) 100%);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(var(--c-dark-rgb), 0.32);
}

.site-sidebar__cta i {
  font-size: var(--fs-12);
}

/* .site-sidebar__link */
.site-sidebar__link {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 12px;
  padding: 8px 4px;
  font-size: var(--fs-14);
  color: var(--text-color);
  border-bottom: 1px solid var(--bg-2);
  transition: color var(--ct-fast), padding var(--ct-fast);
}

.site-sidebar__link:last-child {
  border-bottom: 0;
}

.site-sidebar__link i {
  width: 20px;
  text-align: center;
  color: var(--muted-color);
  font-size: var(--fs-15);
  transition: color var(--ct-fast);
}

.site-sidebar__link:hover {
  color: var(--main-color);
  padding-left: 8px;
}

.site-sidebar__link:hover i {
  color: var(--main-color);
}

/* .site-sidebar__social-grid */
.site-sidebar__social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* .site-sidebar__social-icon */
.site-sidebar__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 38px;
  height: 38px;
  border: var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  line-height: 1;
  color: var(--text-color) !important;
  background: var(--c-surface);
  transition: 0.18s ease;
}

.site-sidebar__social-icon:hover {
  border-color: var(--main-color);
  background: var(--pink-tint);
  color: var(--main-color) !important;
  transform: translateY(-2px);
}

/* .site-sidebar__copy */
.site-sidebar__copy {
  text-align: center;
  margin: 18px 0 0;
  font-size: var(--fs-12);
  color: var(--muted-color);
}
@container (min-width: 240px) {
  .site-profile__contact-row>.call-button .btn-label {
    display: inline;
  }
}
.site-profile__card,
.site-profile__photo,
.site-security-tips,
.site-official-channels,
.site-all-ads-link {
  max-width: 100%;
}
/* .site-topbar__crumb-wrap */
.site-topbar__crumb-wrap {
  padding: 14px 24px;
  border-top: var(--border);
  border-bottom: var(--border);
  margin-top: 6px;
}

.site-topbar__crumb-wrap[data-cat-dropdown] .site-cat-dropdown__panel {
  margin-top: 8px;
  border-top: var(--border);
}

/* .site-section-head */
.site-section-head {
  padding: 6px 0 16px;
  margin: 14px 0 22px;
  border-bottom: var(--border);
}

.site-section-head h1.site-page-h1,
.site-section-head h2 {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--text-color);
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.site-section-head h1.site-page-h1 {
  line-height: 1.25;
}

/* .site-crumb-row */
.site-crumb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.site-crumb-row .site-breadcrumb {
  padding-top: 0;
  padding-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* .site-breadcrumb__current-link */
.site-breadcrumb__current-link {
  color: var(--text-color) !important;
  font-weight: var(--fw-bold);
}

.site-breadcrumb__current-link:hover {
  color: var(--main-color) !important;
}

/* .site-breadcrumb__caret */
.site-breadcrumb__caret {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin: 0;
  cursor: pointer;
  color: var(--muted-color);
  display: inline-flex;
  align-items: center;
}

.site-breadcrumb__caret i {
  font-size: var(--fs-12);
  transition: transform 0.2s;
}

/* .site-content-block__heading */
.site-content-block__heading {
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  color: var(--text-color);
  margin-top: 38px;
  margin-bottom: 38px;
  text-align: center;
  letter-spacing: -0.01em;
}

.site-content-block__heading span {
  font-weight: var(--fw-semibold);
  color: var(--main-color);
  font-size: 1rem;
}

/* .site-service-cards-divider — owner 22 Oct 2026, from a reference: one plain thin line, light, across the content width
   (the 70 % left-stuck line it used to be came from the global hr { width: 70% }; the icon dividers tried after it were too heavy).
   hr.class outranks bootstrap's hr:not([size]); the 12px side margins line it up with the text of the copy (container 12 + 12 = its 24) */
hr.site-service-cards-divider {
  width: auto;
  height: 8px;
  margin: 48px 12px 16px;
  border: 0;
  background: url("/assets/images/icons-group/fade-line.png") center / 100% 8px no-repeat;   /* owner 22 Oct: the fade-line from icons-group, a thin line that fades out at both ends */
  opacity: 1;
}

/* .site-service-cards — owner 22 Oct 2026: button-sized links, centred, each on a shadow-1 paper-curl (was one full-width bar) */
.site-service-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px 28px;
  margin: 16px 0 48px;
}

/* .site-service-card — the site's button language: surface, 1px border, radius 10, no glow */
.site-service-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  min-height: 48px;
  padding: 12px 30px;
  background: var(--c-surface);
  border: 1px solid var(--c-accent);   /* owner 22 Oct: gold, 1px */
  border-radius: 10px;
  color: var(--main-color);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  transition: background 0.18s, transform 0.1s;
  box-shadow: none;   /* the bevel (inset highlight + dark bottom line) made the 2px border look cut and pressed */
}

.site-service-card::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -21px;   /* offsets count from the padding box: 1px border + 20px, so the curl starts under the border, not on it */
  height: 20px;
  background: url("/assets/images/icons-group/shadows/shadow-1.png") center top / 100% 100% no-repeat;
  pointer-events: none;
}

.site-service-card:hover {
  background: var(--c-surface-light);
  color: var(--main-color);
  text-decoration: none;
  transform: translateY(-1px);
}

.site-service-card:active {
  transform: translateY(1px);
}

.site-service-card i {
  font-size: 1.125rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  line-height: 1;
}

/* .icon-pink */
.icon-pink {
  color: var(--c-text-muted);
}
/* .site-hub-nav */
.site-hub-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-hub-nav .site-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow-x: auto;
  white-space: nowrap;
}

.site-hub-nav .site-cat-dropdown__toggle {
  flex: 0 0 auto;
  width: auto;
  padding: 8px 10px;
  font-size: var(--fs-13);
}

.site-hub-nav .site-cat-dropdown__toggle .site-cat-dropdown__chevron {
  margin-left: 0;
  font-size: var(--fs-13);
}

/* .site-cat-dropdown__toggle */
.site-cat-dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--btn-py) 4px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-15);
  font-weight: var(--btn-fw);
  color: var(--main-color);
  cursor: pointer;
  text-align: left;
}

.site-cat-dropdown__toggle:hover {
  color: var(--main-dark);
}

.site-cat-dropdown__toggle[aria-expanded="true"] .site-cat-dropdown__chevron {
  transform: rotate(180deg);
}

/* .site-cat-dropdown__chevron */
.site-cat-dropdown__chevron {
  font-size: var(--fs-11);
  color: var(--main-color);
  transition: transform 0.2s ease;
  margin-left: 12px;
}

/* .site-cat-dropdown__panel */
.site-cat-dropdown__panel {
  max-height: 400px;
  overflow-y: auto;
  border-top: 1px solid var(--bg-2);
  padding: 4px 0;
}

/* .site-cat-dropdown__item */
.site-cat-dropdown__item {
  display: block;
  padding: 11px 4px;
  color: var(--main-color);
  font-size: var(--fs-14);
  text-decoration: none;
  border-bottom: 1px solid var(--bg-1);
  transition: color 0.12s, padding-left 0.12s;
}

.site-cat-dropdown__item:last-child {
  border-bottom: 0;
}

.site-cat-dropdown__item:hover {
  color: var(--main-dark);
  padding-left: 8px;
}

.site-cat-dropdown__item.is-active {
  color: var(--main-dark);
  font-weight: var(--fw-bold);
}

.site-cat-dropdown__item.is-active::before {
  /* chevron-right — subset font me MAUJOOD hai (naapa: fontTools cmap). Pehle caret-right */
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: var(--fw-black);
  margin-right: 6px;
  font-size: var(--fs-11);
}
/* .listing-empty — shared no-listings card across state/city/area/search/tag */
.listing-empty {
  max-width: 600px;
  margin: 24px auto 10px;
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 44px 30px;
  box-shadow: 0 6px 24px rgba(var(--c-dark-rgb), 0.06);
}

.listing-empty__icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c-surface-light), var(--c-band-end));
  color: var(--white-color);
  font-size: 24px;
}

.listing-empty__title {
  margin: 0 0 9px;
  font-size: 21px;
  font-weight: var(--fw-extra);
  color: var(--ink-deep);
  letter-spacing: -.3px;
}

.listing-empty__msg {
  margin: 0 auto 24px;
  max-width: 430px;
  font-size: var(--fs-14);
  line-height: 1.65;
  color: var(--grey-500);
}

.listing-empty__cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.listing-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: .18s ease;
  border: 1px solid transparent;   /* owner-niyam: 1px */
}

.listing-empty__btn--primary {
  background: var(--main-color);
  color: var(--c-on-accent);
}

.listing-empty__btn--primary:hover {
  background: var(--main-dark);
  color: var(--c-on-accent);
}

.listing-empty__btn--ghost {
  background: var(--c-surface);
  color: var(--main-color);
  border-color: var(--main-color);
}

.listing-empty__btn--ghost:hover {
  background: var(--main-color);
  color: var(--c-on-accent);
}

/* .site-long-content */
.site-long-content {
  margin: 36px auto 12px;
  padding-left: 24px;
  padding-right: 24px;
}

/* .site-long-content__body — full content, no clamp/Read-more */
.site-long-content__body {
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--text-color);
}

.site-long-content__body p {
  margin: 0 0 14px;
}

/* the copy's paragraphs and lists: Helvetica / Arial, 14px; its headings PT Sans 700 — main 24px in the theme gold, sub 20px (owner, 22 Oct 2026) */
.site-long-content__body p,
.site-long-content__body li {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.site-long-content__body h2 {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--c-accent);
}
.site-long-content__body h3 {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

/* In-content internal links (auto-linked city/service mentions + owner links) — */
.site-long-content__body a,
.site-long-content__body a.ct-ilink,
.info-card-content a.ct-ilink {
  color: var(--main-color, var(--main-color));
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.28);
  transition: border-color var(--ct-fast);
}
.site-long-content__body a:hover,
.info-card-content a.ct-ilink:hover {
  border-bottom-color: var(--main-color, var(--main-color));
}

/* .site-official-channels */
.site-official-channels {
  max-width: 100%;                 /* full width to match the other profile cards (was 720px) */
  margin: 18px auto 24px;
  padding: 22px 24px;
  border: var(--border-brand);
  border-radius: 12px;
  background: var(--c-surface);
  box-shadow: 0 1px 4px rgba(var(--main-rgb), 0.06);
}

.site-official-channels h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-official-channels h3 i {
  color: var(--c-text-muted);
  font-size: var(--fs-18);
  flex-shrink: 0;
}

.site-official-channels p {
  margin: 0 0 10px;
  font-size: var(--fs-14);
  color: var(--grey-550);
  line-height: 1.55;
}

.site-official-channels ul {
  margin: 0;
  padding-left: 18px;
  color: var(--grey-550);
  font-size: var(--fs-14);
  line-height: 1.65;
}

.site-official-channels li {
  margin: 0 0 10px;
}

.site-official-channels li::marker {
  color: var(--grey-550);
}

.site-official-channels strong {
  color: var(--text-color);
  font-weight: var(--fw-bold);
}

/* FAQ block — premium JS-controlled accordion (one open at a time, smooth height animation) */
.faq-block {
  padding: 44px 0 50px;
  /* Koi apni patti nahi — FAQ zameen par hi baithta hai, aur uske sawaal/card */
  position: relative;
}

.faq-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--main-color), var(--main-dark));
  border-radius: 0 0 4px 4px;
}

.faq-block__heading {
  font-size: 24px;
  font-weight: var(--fw-extra);
  color: var(--ink-deep);
  text-align: center;
  margin: 0 auto 36px;
  letter-spacing: -0.6px;
  max-width: 760px;
  position: relative;
  padding-bottom: 16px;
}

.faq-block__heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--main-color), var(--main-dark));
  border-radius: 2px;
}

/* Full container width — the old 860px cap left an empty band down both sides of the FAQ while */
.faq-block__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* FAQ ke DAAYEIN — sabse naya blog lekh (sirf homepage) */
.faq-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.faq-side {
  position: sticky;
  top: 86px;
}

/* Card ke UPAR ki patti: naam — lakeer — teer. */
.faq-side__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.faq-side__kicker {
  flex: none;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--c-accent);
}

.faq-side__rule {
  flex: 1 1 auto;
  min-width: 16px;
  height: 1px;
  background: rgba(var(--c-accent-rgb), 0.45);
}

/* Card ke neeche shadow-1.png — chaudi aur halki, isliye ek akele card ke */
.faq-side__card {
  position: relative;
  /* Apne bhai `.faq-item` jaisa hi rang — dono ek hi FAQ patti me, ek hi darje par */
  background: var(--c-surface);
  /* Owner 22 Oct: 1px GOLD, like the service button (11 Sep had asked for the theme border; superseded). */
  border: 1px solid var(--c-accent);
  border-radius: 14px;
  overflow: visible;
}

/* Sarakne wali patti. */
.faq-side__stage {
  overflow: hidden;
  border-radius: 13px;
}

.faq-side__track {
  display: flex;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

/* Sab patti ek jaisi lambi — track ki unchai sabse lambi patti tay karti hai, */
.faq-side__slide {
  flex: 0 0 100%;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .faq-side__track { transition: none; }
}

/* Teer card ke BAAHAR, uske upar-daayein — tasveer ke upar nahi. Wahan wo */
.faq-side__nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
}

.faq-side__arrow {
  flex: none;                       /* 44px wale niyam se anda banne se bachaav */
  /* 30 → 36: ungli ke liye 30px chhota tha. Dono naap SAATH badhe hain — sirf height */
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--c-accent-rgb), 0.5);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--c-accent);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}

.faq-side__arrow:hover {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}

/* Apne-aap sarakne ka sanket — hamare apne folder ka `loaders/loading_2.gif`. */
.faq-side__timer {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  border: 1px solid rgba(var(--c-accent-rgb), 0.22);
  padding: 8px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity .2s;
}

.faq-side.is-playing .faq-side__timer { opacity: .85; }

.faq-side__card::after {
  content: "";
  position: absolute;
  left: -1.5%;
  right: -1.5%;
  bottom: -41px;   /* 1px border + 40px: offsets count from the padding box, so the curl starts under the border, not on it (22 Oct) */
  height: 40px;
  /* ⛔ Ise mat badlo. 11 Sep 2026: shadow-7 (uthe hue kone wali) lagakar dikhayi thi — */
  background: url("/assets/images/icons-group/shadows/shadow-1.png") center top / 100% 100% no-repeat;
  pointer-events: none;
}

.faq-side__img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 13px 13px 0 0;
  overflow: hidden;
  background: var(--c-dark);
}

.faq-side__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.faq-side__card:hover .faq-side__img img { transform: scale(1.045); }

.faq-side__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 7px;
}

.faq-side__body { padding: 16px 18px 18px; }

.faq-side__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.34;
}

.faq-side__title a {
  color: var(--c-accent);
  text-decoration: none;
}

.faq-side__title a:hover { color: var(--c-hover); }

/* Teen line par kaat — is se har patti lagbhag ek jaisi lambi rehti hai, */
.faq-side__excerpt {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
          line-clamp: 3;
  overflow: hidden;
}

.faq-side__more {
  display: inline-flex;
  align-items: center;
  /* "Read more" ek 20px oonchi likhaai thi — tap karne ke liye bahut patli. padding se hath */
  padding: 8px 10px;
  margin: -8px -10px;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--c-accent);
  text-decoration: none;
}

.faq-side__more i { transition: transform .2s; }
.faq-side__more:hover i { transform: translateX(4px); }

/* ⛔ Ye button OUTLINE hi rahega. Bhara hua gold banakar dekha tha — poore homepage */
.faq-side__all {
  display: block;
  margin: 24px auto 0;   /* owner 22 Oct: close under the card (52px looked far away) */
  width: fit-content;
  padding: 10px 22px;
  /* Owner 16 Oct: no yellow border; the card surface keeps it reading as a button */
  border: 0;
  background: var(--c-surface);
  border-radius: 10px;
  /* Button zameen par CHIPKA hua tha — koi uthaav nahi (owner 12 Sep). Wahi bevel jo */
  box-shadow: var(--elev-1);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-accent);
  text-decoration: none;
  transition: background .18s, border-color .18s;
}

/* Owner 22 Oct: a curved shadow like the reference site, dark under the middle and fading to the ends; this ground is almost black, so it is drawn strong */
.faq-side__all { position: relative; }
.faq-side__all::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: -26px; height: 26px; background: radial-gradient(ellipse 52% 100% at 50% 0, rgba(0,0,0,.92) 0, rgba(0,0,0,.55) 42%, rgba(0,0,0,0) 100%); pointer-events: none; }

.faq-side__all:hover {
  /* Gold ka 12% wash tha — kaale par wo #38301f banta hai, 45% saturation ka maila */
  background: var(--c-surface-light);
  color: var(--c-accent);
  box-shadow: var(--elev-2);
}

/* Phone/tablet par do column me kuch bhi padha nahi jaata — card FAQ ke NEECHE */
@media (max-width: 900px) {
  .faq-block__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .faq-side { position: static; top: auto; }
  .faq-side__card::after { bottom: -31px; height: 30px; }
}

.faq-item {
  background: var(--c-surface);
  /* Owner 11 Sep: "3d shadow remove, bas halki border" → "sharp nahi" → "border yellow */
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color .25s, transform var(--ct-fast);
  position: relative;
}

.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--main-color), var(--main-dark));
  border-radius: 14px 0 0 14px;
  opacity: 0;
  transition: opacity .3s;
}

.faq-item:hover {
  border-color: var(--c-border);
  transform: translateY(-1px);
}

.faq-item.is-open {
  border-color: var(--c-border);
  transform: translateY(0);
}

.faq-item.is-open::before {
  opacity: 1;
}

.faq-item__q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 15px 18px 15px 20px;   /* owner-spec 01 Sep — har page ka FAQ isi ek rule se */
  font-size: 16px;                /* owner-spec 01 Sep */
  font-weight: var(--btn-fw);
  color: var(--ink-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
  transition: color .25s;
  text-align: left;
  font-family: inherit;
}

.faq-item__q-text {
  flex: 1;
}

.faq-item:hover .faq-item__q {
  color: var(--main-color);
}

.faq-item.is-open .faq-item__q {
  color: var(--main-color);
}

/* Icon = pure-CSS "plus" (do white bars) pink-gradient circle me — koi font-glyph nahi, */
.faq-item__icon {
  color: var(--c-on-accent);
  background: linear-gradient(135deg, var(--main-color), var(--main-dark));
  font-size: var(--fs-10);
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(var(--c-dark-rgb), 0.25);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
}

.faq-item.is-open .faq-item__a-wrap {
  grid-template-rows: 1fr;
}

.faq-item__a {
  min-height: 0;
  overflow: hidden;
  padding: 0 22px;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--grey-700);
  transition: padding .4s cubic-bezier(.4, 0, .2, 1);
}

.faq-item.is-open .faq-item__a {
  padding: 4px 22px 18px;
  border-top: 1px solid var(--bg-2);
  padding-top: 14px;
}

.faq-item__a a {
  color: var(--main-color);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}

.faq-item__a a:hover {
  text-decoration: underline;
}
/* ═══ TAP TARGET — EK jagah ═══════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .ct-action-btn,
  .call-button, .site-footer__cta-btn, .ct-totop, .site-sidebar__cta,
  .site-sidebar__link,
  .site-loadmore__btn, .faq-item__q, .sk-btn, .main_btn, .about-btn, .hc-btn, .dp-btn,
  .pp-btn, .lx-btn, .bf-btn, .err404__btn, .blog-cat__head,
  .appbar__post-cta, .ya-act, .ya-fcard__toggle, .wl-preview__cta,
  .al-head__btn, .pf-head__btn, .pf-bulk__btn, .al-bulk__btn, .an-send, .an-test__btn,
  .cp-create__btn, .pk-add, .pa-go, .pa-back, .dsb-addbtn, .faq-blocks__add,
  .ae-tab, .pay-tab, .pr-tab, .content-nav__tab, .ctp-btn, .ctn-modal__ok {
    min-height: var(--btn-minh);
  }
}

/* ═══ SHARED SELECT SKIN — poori site ke asli <select> dropdowns ka EK hi root style ═══ */
select:not([multiple]):not([size]):not(.pp-select) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* KAM HILNA-DULNA (prefers-reduced-motion) — POORI SITE KA EK GUARD */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  html, body { scroll-behavior: auto !important; }

  /* INTZAAR ka chakkar APVAAD hai. Ise rok dena "kam hilna" nahi, JHOOTH hai — */
  .site-header__icon.is-loading i,
  .site-loadmore.is-busy .site-loadmore__btn i,
  .pa-pin-spin.is-show,
  .fa-spin,
  body.site-auth-page .is-busy::before {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* OVERLAY KA BAND HONA — khulna aur band hona ek jaisa lage */
.site-search-modal,
.sk-modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow), display var(--t-slow) allow-discrete;
}

.site-search-modal.is-open,
.sk-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

/* UTHAAV (elevation) — owner 12 Sep: "har ek element clear nazar aaye" */

/* ── A: BEVEL — saadi satah ───────────────────────────────────────────────── */
.custom-card,
.info-card,
.card-fresh,
.terms-toc,
.policy-section,
.search-widget_post,
.sk-modal__panel,
.site-seo-section,
.home-cat-card,
.faq-block .faq-item {
  box-shadow: var(--elev-1);
}
/* .home-pick (photo card) JAAN-BOOJH KAR yahan NAHI — uska apna shadow index.php me hai. */

/* Hover par wahi bhasha, bas parchhai lambi — cheez upar uthti hai. */
.custom-card:hover,
.info-card:hover,
.card-fresh:hover,
.home-cat-card:hover {
  box-shadow: var(--elev-2);
}

/* ── A: BEVEL — dabane wali cheez (button) ────────────────────────────────── */
.btn-primary,
.btn-secondary,
.site-footer__cta-btn,
.site-footer__citybtn,
.site-footer__social {
  box-shadow: var(--elev-1);
}
.btn-primary:hover,
.btn-secondary:hover,
.site-footer__cta-btn:hover,
.site-footer__citybtn:hover {
  box-shadow: var(--elev-2);
}

/* ── A: DHANSI hui cheez (input, select, textarea) ──────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
  box-shadow: var(--elev-in);
}
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  box-shadow: none;
}

/* ── D: GOLD RAIL — sirf KHAAS cheez par ────────────────────────────────────── */
   🔴 `.is-active` par NAHI lagayi — wo class poori site par pagination button,
   chip, dropdown item aur carousel dot par chalti hai (~40 jagah); un sab par
   3px gold lakeer bemani hai. Rail ki apni class hai: `has-rail`. Jis card ko
   khaas dikhana ho, markup me wahi class jodein:
       <div class="custom-card has-rail">        <- featured ad
       <div class="custom-card has-rail is-active">  <- dono saath bhi chalte hain */
.has-rail {
  border-left: var(--rail-w) solid var(--c-accent);
  box-shadow: var(--elev-1);
}

/* Rail wali cheez hover par bhi apna darja na khoye. */
.has-rail:hover {
  box-shadow: var(--elev-2);
}

@media (prefers-reduced-motion: reduce) {
  .custom-card, .info-card, .card-fresh, .home-cat-card {
    transition: none;
  }
}

/* EK HI KHULNE KA TAREEQA — POORI WEBSITE     (22 Sep 2026, dobara likha) */

:root{
  --ct-motion-dur:   620ms;                              /* khulna: dikhane ka kaam */
  --ct-motion-close: 260ms;                              /* band hona: niptane ka kaam */
  --ct-motion-ease:  cubic-bezier(0.33, 0.02, 0.24, 1);  /* namoone wali curve */
  --ct-motion-quick: 160ms;
  --ct-motion-press:  120ms;   /* dabne ka jawab — sabse tez */
  /* Har component ko uske kaam ke hisaab se waqt — sab ek jaisa nahi. */
  --ct-motion-tab:      190ms;
  --ct-motion-modal:    260ms;
  --ct-motion-backdrop: 200ms;
  --ct-motion-drawer:   300ms;
  --ct-motion-tooltip:  140ms;
  --ct-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 1. KHULNE WALE PANEL — kabza upari kinare par ─────────────────────────── */
[data-ct-unfold]{
  transform-origin: top center;
  transform: perspective(1400px) rotateX(-14deg);
  opacity: 0;
  overflow: hidden;
  transition: height var(--ct-motion-close) cubic-bezier(0.4, 0, 1, 1),
              transform var(--ct-motion-close) ease-in,
              opacity var(--ct-motion-quick) ease;
  will-change: height, transform, opacity;
}
[data-ct-unfold].ct-open{
  transform: perspective(1400px) rotateX(0deg);
  opacity: 1;
  /* Kon unchai se THODA LAMBA chalta hai — isliye poori lambai milne ke baad bhi */
  transition: height var(--ct-motion-dur) var(--ct-motion-ease),
              transform calc(var(--ct-motion-dur) + 100ms) var(--ct-motion-ease),
              opacity 300ms ease;
}

/* Har kataar khud bhi neeche ki taraf aati hai, ek ke baad ek — isse panel */
[data-ct-unfold] > *{
  opacity: 0; transform: translateY(-7px);
}
[data-ct-unfold].ct-open > *{
  opacity: 1; transform: none;
  transition: opacity 400ms ease calc(70ms + var(--i, 0) * 46ms),
              transform 500ms cubic-bezier(0.22, 1, 0.36, 1) calc(70ms + var(--i, 0) * 46ms);
}

/* ── 1b. DABNE KA JAWAB (press feedback) ─────────────────────────── */
.btn, .ya-act, .ma-act, .al-head__btn, .pf-iconbtn, .al-act__btn,
.home-hero__searchbox-btn, .site-search__btn, .site-search-modal__submit, .blog-mobile-search button,
.site-profile__stickybar a, .site-profile__stickybar button,
button.ct-action-b, .wl-preview__cta, .pp-tier {
  transition: transform var(--ct-motion-press, 120ms) ease,
              background var(--ct-motion-quick, 160ms) ease,
              box-shadow var(--ct-motion-quick, 160ms) ease,
              border-color var(--ct-motion-quick, 160ms) ease,
              color var(--ct-motion-quick, 160ms) ease;
}
.btn:active, .ya-act:active, .ma-act:active, .al-head__btn:active,
.pf-iconbtn:active, .al-act__btn:active, .home-hero__searchbox-btn:active,
.site-search__btn:active, .site-search-modal__submit:active, .blog-mobile-search button:active,   /* search ke buttons bhi — hero button jaisa dabaav (30 Sep) */
.site-profile__stickybar a:active, .site-profile__stickybar button:active,
button.ct-action-b:active, .wl-preview__cta:active, .pp-tier:active {
  transform: scale(.98);
}
/* Band button ko dabaav ka jawab nahi dena chahiye — warna "chala" ka jhootha */
.btn:disabled:active, .ya-act:disabled:active, .ma-act:disabled:active,
[aria-disabled="true"]:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .ya-act, .ma-act, .al-head__btn, .pf-iconbtn, .al-act__btn,
  .home-hero__searchbox-btn, .site-search__btn, .site-search-modal__submit, .blog-mobile-search button,
  button.ct-action-b, .wl-preview__cta, .pp-tier {
    transition: none;
  }
  .btn:active, .ya-act:active, .ma-act:active,
  button.ct-action-b:active, .pp-tier:active { transform: none; }
}

/* ── 2. MODAL / POPUP / TOAST ── display chaal ke BAAD hatta hai ──────── */
[data-ct-fade]{
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  transition: opacity var(--ct-motion-quick) ease,
              transform var(--ct-motion-modal) var(--ct-motion-ease-out);
  will-change: opacity, transform;
}
[data-ct-fade].ct-open{ opacity: 1; transform: none; }
/* NIKALNE ki chaal apni KEYFRAME se — transition se nahi. */
[data-ct-fade].ct-closing > .site-search-modal__panel,
[data-ct-fade].ct-closing > .sk-modal__panel{
  animation: ctModalOut var(--ct-motion-modal) var(--ct-motion-ease-out) both;
}
[data-ct-fade].ct-closing > [class*="backdrop"]{
  animation: ctFadeOut var(--ct-motion-backdrop) ease both;
}
@keyframes ctModalOut{
  from{ opacity:1; transform:none; }
  to  { opacity:0; transform: translateY(-10px) scale(.99); }
}
@keyframes ctFadeOut{ from{ opacity:1; } to{ opacity:0; } }
/* Backdrop modal se thoda tez aur bina harkat ke — wo peeche ki parat hai. */
[data-ct-fade] > .site-search-modal__backdrop,
[data-ct-fade] > .sk-modal__backdrop, [data-ct-fade] > .ctp-backdrop,
[data-ct-fade] > [class*="backdrop"]{
  opacity: 0; transition: opacity var(--ct-motion-backdrop) ease;
}
[data-ct-fade].ct-open > [class*="backdrop"]{ opacity: 1; }

/* ── 3. TAB ── purana jaaye, naya aaye ────────────────────────── */
.ct-tabs .ct-in{ animation: ctTabIn var(--ct-motion-tab) var(--ct-motion-ease-out) both; }
/* Tab panel jo [hidden] se badalte hain (admin content, area-edit): naya */
.content-tab:not([hidden]), .ae-panel:not([hidden]), .pr-panel:not([hidden]),
.pay-panel:not([hidden]){
  animation: ctTabIn var(--ct-motion-tab) var(--ct-motion-ease-out) both;
}
@media (prefers-reduced-motion: reduce){
  .content-tab, .ae-panel, .pr-panel, .pay-panel, .ct-tabs .ct-in{ animation:none !important; }
}
@keyframes ctTabIn{
  from{ opacity:0; transform: translateY(6px); }
  to  { opacity:1; transform: none; }
}

/* ── 2. CARET/TEER ek jaisa ghoome ──────────────────────────────────────────── */
.site-filter__chevron, .cts__btn i, .appbar__user-btn i, .appbar__user-caret{
  transition: transform var(--ct-motion-close) var(--ct-motion-ease);
}
.cts.is-open .cts__btn i, .cts__btn[aria-expanded="true"] i,
.appbar__user.is-open .appbar__user-btn i,
[aria-expanded="true"] .appbar__user-caret{ transform: rotate(180deg); }

/* ── 3. DARAAZ (side drawer) — ye sarakte hain, khulte nahi ─────────────────── */
.site-sidebar, .umm__inner{
  transition: transform var(--ct-motion-dur) var(--ct-motion-ease),
              opacity var(--ct-motion-quick) var(--ct-motion-ease);
}

/* ── 4. prefers-reduced-motion: kaam wahi, chaal band ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  [data-ct-unfold], [data-ct-unfold] > *,
  .site-filter__chevron, .cts__btn i, .appbar__user-btn i, .appbar__user-caret, .site-filter__more i,
  .site-sidebar, .umm__inner{
    transition: none !important; animation: none !important;
  }
  /* Chaal band, par cheez DIKHNI chahiye — warna panel gayab ho jaayega. */
  [data-ct-unfold]{ transform: none !important; opacity: 1; height: auto !important; }
  [data-ct-unfold] > *{ opacity: 1; transform: none; }
}
/* Owner 13 Oct: body copy is justified everywhere; headings, buttons, menus and cards stay as they are */
.site-long-content__body p,.site-long-content__body li,.home-long p,.search-widget_post .lab-content .lab-desc,.search-widget_post .lab-content .lab-desc p,.about-page__intro p,.about-page__trust p,.about-feature p,.about-page__custom p,.hc-a p,.hc-a li,.dp-sec__b p,.dp-sec__b li,.dp-hero__intro,.pp-step p,.site-profile .info-card-content p,.site-footer__desc p,.faq-a,.profile-faq__item p,.bp-body p,.bp-body li,.faq-side__excerpt,.site-official-channels li{text-align:justify;text-justify:inter-word;-webkit-hyphens:none;hyphens:none}
/* phones (23 Oct 2026, audit): narrow columns + justify = wide word gaps; the text may hyphenate, the FAQ-side excerpt (2–3 words a line) goes back to left */
@media (max-width: 480px) {
  .site-long-content__body p,.site-long-content__body li,.home-long p,.search-widget_post .lab-content .lab-desc,.search-widget_post .lab-content .lab-desc p,.about-page__intro p,.about-page__trust p,.about-feature p,.about-page__custom p,.hc-a p,.hc-a li,.dp-sec__b p,.dp-sec__b li,.dp-hero__intro,.pp-step p,.site-profile .info-card-content p,.site-footer__desc p,.faq-a,.profile-faq__item p,.bp-body p,.bp-body li,.site-official-channels li{-webkit-hyphens:auto;hyphens:auto}
  .faq-side__excerpt{text-align:left}
}

/* BOTTOM CTA STRIP (owner 16 Oct 2026): homepage, city and state pages; text + button in one box, doubled shadow-2 paper-curl under the box and the button */
.home-strip > .container { padding-top: 8px; padding-bottom: clamp(56px, 6vw, 72px) !important; }
.home-strip__box { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 26px 32px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface); box-shadow: var(--elev-1); }
.home-strip__box::after { content: ""; position: absolute; left: 1%; right: 1%; bottom: -48px; height: 48px; background: radial-gradient(ellipse 52% 100% at 50% 0, rgba(0,0,0,.92) 0, rgba(0,0,0,.55) 42%, rgba(0,0,0,0) 100%); pointer-events: none; }   /* owner 22 Oct: curved shadow like the reference, strong because the ground is almost black */
.home-strip__text { min-width: 0; text-align: center; flex: 1 1 auto; }
.home-strip__title { margin: 0 0 6px; font-size: clamp(17px, 2vw, 21px); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--c-text); }
.home-strip__sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-text-muted); }
.home-strip__btn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 10px; background: var(--c-accent); color: var(--c-on-accent); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: var(--elev-1); transition: background .18s, box-shadow .18s; }
.home-strip__btn:hover { background: var(--c-hover); color: var(--c-on-accent); box-shadow: var(--elev-2); }
.home-strip__btn::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: -26px; height: 26px; background: radial-gradient(ellipse 52% 100% at 50% 0, rgba(0,0,0,.92) 0, rgba(0,0,0,.55) 42%, rgba(0,0,0,0) 100%); pointer-events: none; }
@media (max-width: 767px) {
  .home-strip__box { flex-direction: column; padding: 22px 18px; }
  .home-strip__btn { width: 100%; }
}