/* ════════════════════════════════════════════════════════════════════
   ZupiChat Deepotsav — MOBILE module (zdl-mob.css, 26 Oct 2026)
   mobaudit2.js (135 pages @390px) ke theme wale nateeje: tap targets 44px,
   12px font floor, cookie card ka layout-jhatka (CLS 0.15). Sirf phone.
   Revert: bash /root/zdl-mob-revert.sh · ek visit: ?mob=off
   ════════════════════════════════════════════════════════════════════ */
/* cookie card: theme ka sweep build ke dauraan use badalta tha = CLS 0.147.
   Build (html.zdl-built) tak chhupa — aana ek baar, khisakna nahi (sab screens) */
html.zdl-on.zdl-mob:not(.zdl-built) .cookies-card:not(#_) { visibility: hidden !important; }

@media (max-width: 767.98px) {
  /* ribbon "Start free →" 68x18: underline wahi rahe, isliye padding nahi — invisible bada tap area */
  html.zdl-mob .zdl-rib-cta:not(#_) { position: relative; }
  html.zdl-mob .zdl-rib-cta:not(#_)::after { content: ""; position: absolute; left: -8px; right: -8px; top: -13px; bottom: -13px; }
  /* ribbon × 32 → 44 (dikhne me wahi) */
  html.zdl-mob .zdl-rib-x:not(#_) { width: 44px; height: 44px; margin-top: -22px; right: 2px; }
  /* 3D journey ke dots 32 → 44 */
  html.zdl-mob .zdl3d-dots:not(#_) { gap: 0; }
  html.zdl-mob .zdl3d-dots button:not(#_):not(#_) { min-width: 44px; min-height: 44px; }
  /* screens ke hotspot 32/28 → 44 — andar ka dot/ring wahi size (insets +6) */
  html.zdl-mob .zdl-hs:not(#_):not(#_) { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  html.zdl-mob .zdl-hs:not(#_)::before { inset: 16px; }
  html.zdl-mob .zdl-hs:not(#_)::after { inset: 12px; }
  html.zdl-mob .zdl-scr-full:not(#_) { min-height: 44px; }
  /* chhote label — 8-11px the */
  html.zdl-mob .zbc-cat:not(#_):not(#_) { font-size: clamp(10px, 2.5cqw, 13px); }
  html.zdl-mob :is(.zds-time, .zds-tag, .zdh-tg, .zdh-tag):not(#_):not(#_) { font-size: 12px !important; }
}
@media (max-width: 767.98px) {
  html.zdl-mob :is(.zdl-cp-rib span, .zft-h em):not(#_):not(#_) { font-size: 12px !important; }
}

/* ════ MOBILE MENU (26 Oct) — #zc-mobile-menu redesign ═══════════════════════════════
   Pehle: 17 link ek lambi saadi list, rang-birange icon, CTA sabse neeche (scroll karke),
   chat dock (z 9999) menu (z 1100) ke upar, scrollbar ki patti. Ab: sticky glass header,
   sunehre section label, 2-column kaanch tiles (lambai aadhi), ek jaise teal icon chips,
   neeche sticky CTA bar (Start Free + Login hamesha dikhe), menu khulte hi dock chhupe.
   zdl.js sweep se menu bahar (SKIP) — warna inline !important rang icons par chadhta tha. */
@media (max-width: 991.98px) {
  html.zdl-mob #zc-mobile-menu.open:not(#_) {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start;
    padding: 0 16px 0 !important; scrollbar-width: none;
    background:
      radial-gradient(120% 50% at 100% 0%, rgba(255, 210, 140, .32) 0%, rgba(255, 210, 140, 0) 60%),
      radial-gradient(90% 40% at 0% 100%, rgba(22, 133, 127, .1) 0%, rgba(22, 133, 127, 0) 70%),
      linear-gradient(180deg, #FFFBF3 0%, #FFF4E4 100%) !important;
  }
  html.zdl-mob #zc-mobile-menu::-webkit-scrollbar { display: none; }
  html.zdl-mob #zc-mobile-menu .zc-mobile-header:not(#_) {
    grid-column: 1 / -1; position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between;
    height: auto; margin: 0 -16px 4px; padding: 12px 16px;
    background: rgba(255, 251, 243, .86); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: 0 1px 0 rgba(184, 134, 47, .28);
  }
  html.zdl-mob #zc-mobile-menu .zc-mobile-close:not(#_) {
    width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #10262A;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 248, 236, .7));
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .28), 0 4px 12px -6px rgba(120, 84, 24, .4);
    transition: transform .15s ease-out;
  }
  html.zdl-mob #zc-mobile-menu .zc-mobile-close:not(#_):active { transform: scale(.94); }
  html.zdl-mob #zc-mobile-menu .zc-mobile-close i { font-size: 20px; }
  html.zdl-mob #zc-mobile-menu .zc-mobile-section:not(#_) {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; height: auto; margin: 12px 2px 0; padding: 0;
    font: 800 12px/1 var(--body-font, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase;
    color: #A7741F !important; -webkit-text-fill-color: #A7741F !important;
  }
  html.zdl-mob #zc-mobile-menu .zc-mobile-section::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 151, 59, .45), rgba(201, 151, 59, 0)); }
  html.zdl-mob #zc-mobile-menu .zc-mobile-link:not(#_) {
    display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 54px; margin: 0; padding: 9px 10px !important;
    border: 0 !important; border-radius: 14px;
    font: 600 14px/1.25 var(--body-font, system-ui, sans-serif); color: #10262A !important; -webkit-text-fill-color: #10262A !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62)) !important;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .16), 0 4px 12px -8px rgba(120, 84, 24, .35) !important;
    transition: transform .15s ease-out, box-shadow .15s ease-out; -webkit-tap-highlight-color: transparent;
  }
  html.zdl-mob #zc-mobile-menu .zc-mobile-link:not(#_):active { transform: scale(.97); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .4) !important; }
  html.zdl-mob #zc-mobile-menu .zc-mobile-link:not(#_):focus-visible { outline: 2px solid #C9973B; outline-offset: 2px; }
  html.zdl-mob #zc-mobile-menu .zc-mobile-link i:not(#_) {
    flex: 0 0 32px; width: 32px !important; height: 32px; display: grid; place-items: center; border-radius: 10px; font-size: 17px;
    color: #0A6C70 !important; -webkit-text-fill-color: #0A6C70 !important;
    background: linear-gradient(145deg, rgba(23, 140, 132, .15), rgba(10, 71, 76, .07));
    box-shadow: inset 0 0 0 1px rgba(10, 71, 76, .12);
  }
  /* sticky CTA bar — Start Free + Login hamesha dikhte */
  html.zdl-mob #zc-mobile-menu .zc-mobile-ctas:not(#_) {
    grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto;
    margin: 14px -16px 0; padding: 12px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 251, 243, .9); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: 0 -1px 0 rgba(184, 134, 47, .28), 0 -14px 26px -18px rgba(120, 84, 24, .4);
  }
  html.zdl-mob #zc-mobile-menu .zc-mobile-ctas > a:not(#_) {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 12px !important;
    border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  }
  html.zdl-mob #zc-mobile-menu .zc-mobile-cta-primary:not(#_) {
    color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; border: 0 !important;
    background: linear-gradient(180deg, #F6D98E 0%, #E2B65C 50%, #C9973B 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 6px 16px -8px rgba(184, 134, 47, .8) !important;
  }
  html.zdl-mob #zc-mobile-menu .zc-mobile-cta-outline:not(#_) {
    color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; background: rgba(255, 255, 255, .8) !important;
    border: 0 !important; box-shadow: inset 0 0 0 1.5px rgba(10, 71, 76, .35) !important;
  }
  html.zdl-mob #zc-mobile-menu .zc-mobile-ctas > a:not(.zc-mobile-cta-primary):not(.zc-mobile-cta-outline):not(#_) {
    grid-column: 1 / -1; min-height: 40px; font-size: 13px !important; font-weight: 600; color: #8A5F1A !important; -webkit-text-fill-color: #8A5F1A !important; background: none !important;
  }
  html.zdl-mob #zc-mobile-menu .zc-mobile-ctas > a:active { transform: scale(.97); }
  /* menu khula ho to chat dock / scroll-top menu ke upar na tairein */
  html.zdl-mob:has(#zc-mobile-menu.open) :is(#zcw, .scroll-top):not(#_) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}