/* Rajasthani Vibes - App-like layer (PWA) */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;touch-action:manipulation;scroll-behavior:smooth}
body{overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
img{-webkit-user-drag:none}

/* Splash */
#appSplash{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(160deg,#E10600,#7a0300 70%,#0A0A0A);color:#fff;transition:opacity .35s ease,visibility .35s}
#appSplash.hide{opacity:0;visibility:hidden;pointer-events:none}
#appSplash img{width:min(78vw,300px);height:auto;padding:14px 18px;background:#fff;border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:spPop .7s ease both}
#appSplash h1{font:800 26px/1.1 Sora,Inter,sans-serif;margin:0;letter-spacing:.3px}
#appSplash p{margin:0;font-size:13px;opacity:.8}
#appSplash .sp-dots{display:flex;gap:6px;margin-top:8px}
#appSplash .sp-dots i{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.4;animation:spDot 1s infinite}
#appSplash .sp-dots i:nth-child(2){animation-delay:.15s}#appSplash .sp-dots i:nth-child(3){animation-delay:.3s}
@keyframes spPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes spDot{50%{opacity:1;transform:translateY(-4px)}}
/* Splash video (Rajasthani Vibes intro) - same size as the old logo.
   Background colour: change --sp-bg below to any colour/gradient. Video edges are feathered so no black box shows. */
#appSplash.has-video{--sp-bg:radial-gradient(circle at 50% 42%,#7a2a00 0%,#2b0a00 55%,#0A0A0A 100%);background:var(--sp-bg)}
#appSplash .sp-video{display:none;width:min(78vw,300px);height:auto;aspect-ratio:16/9;object-fit:cover;background:transparent;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect;
  mix-blend-mode:lighten;animation:spPop .7s ease both}
#appSplash.has-video .sp-video{display:block}
#appSplash .sp-fallback{display:flex;flex-direction:column;align-items:center;gap:14px}
#appSplash.has-video .sp-fallback img{display:none}
#appSplash .sp-skip,#appSplash .sp-sound{position:absolute;z-index:3;border:0;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font:600 13px/1 Inter,sans-serif;padding:9px 14px;cursor:pointer}
#appSplash .sp-skip{top:calc(14px + env(safe-area-inset-top,0px));right:14px}
#appSplash .sp-sound{bottom:calc(18px + env(safe-area-inset-bottom,0px));right:14px;font-size:16px;padding:10px 13px}
#appSplash .sp-sound[hidden]{display:none}


/* Top progress bar */
#appProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99998;background:linear-gradient(90deg,#fff,#E10600);
  box-shadow:0 0 8px rgba(225,6,0,.7);transition:width .25s ease,opacity .3s;opacity:0}
#appProgress.on{opacity:1}

/* Page transitions */
body.page-enter main{animation:pgIn .35s ease backwards} /* backwards (not both): a lingering transform made <main> the containing block of every position:fixed child */
body.page-leave main{opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s}
@keyframes pgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Press feedback */
a,button,.btn,.card,.icon-btn{transition:transform .12s ease,opacity .12s ease}
a:active,button:active,.btn:active,.card:active{transform:scale(.97)}

/* Toast */
.app-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:99997;
  background:#111;color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;
  transition:all .3s ease;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:90vw;text-align:center}
.app-toast.show{opacity:1;transform:translate(-50%,0)}
.app-toast.ok{background:#12803c}.app-toast.bad{background:#c0110a}

/* Install banner (bottom sheet) */
#installBanner{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:9000;display:none;
  background:var(--color-surface,#fff);color:var(--color-ink,#111);border-radius:18px;padding:14px;box-shadow:0 12px 40px rgba(0,0,0,.28);
  border:1px solid rgba(225,6,0,.25);animation:sheetUp .4s ease both}
#installBanner.show{display:block}
#installBanner .ib-row{display:flex;gap:12px;align-items:center}
#installBanner img{height:52px;width:auto;max-width:104px;object-fit:contain;border-radius:10px;flex:0 0 auto}
#installBanner b{display:block;font-size:15px}#installBanner small{opacity:.7;font-size:12px;line-height:1.4;display:block}
#installBanner .ib-act{display:flex;gap:8px;margin-top:12px}
#installBanner .ib-act button{flex:1;border:0;border-radius:12px;padding:10px;font-weight:700;font-size:14px;cursor:pointer}
#installBanner .ib-go{background:#E10600;color:#fff}#installBanner .ib-no{background:rgba(128,128,128,.15);color:inherit}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:721px){#installBanner{left:auto;right:20px;bottom:20px;width:360px}}

/* Pull to refresh */
#ptr{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:50%;width:38px;height:38px;margin-left:-19px;border-radius:50%;z-index:9999;
  background:var(--color-surface,#fff);color:#E10600;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);transform:translateY(-70px);transition:transform .2s}
#ptr.spin i{animation:ptrSpin .7s linear infinite}
@keyframes ptrSpin{to{transform:rotate(360deg)}}

/* Mobile app feel */
@media (max-width:720px){
  .topbar{padding-top:env(safe-area-inset-top);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
  .bottom-nav{border-top:0;border-radius:22px 22px 0 0;background:color-mix(in srgb,var(--color-surface) 88%,transparent);
    backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);box-shadow:0 -6px 24px rgba(0,0,0,.14)}
  .bottom-nav a{position:relative;transition:color .2s,transform .2s}
  .bottom-nav a.active{transform:translateY(-2px)}
  .bottom-nav a.active::before{content:"";position:absolute;top:-8px;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:3px;background:var(--color-primary)}
  .bottom-nav a.active i{filter:drop-shadow(0 2px 6px rgba(225,6,0,.45))}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
/* Installed (standalone) mode */
@media (display-mode:standalone){
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea,[contenteditable],.selectable{-webkit-user-select:text;user-select:text}
  #installBanner{display:none!important}
}

/* =====================================================
   NATIVE-APP LOOK (mobile, <=720px)
   Compact app bar, tab-bar, card feed, big touch targets.
   ===================================================== */
@media (max-width:720px){
  :root{ --topbar-height:54px; }

  /* app-style grey canvas with white cards (light theme only) */
  html:not([data-theme="dark"]) body{ background:#F2F2F5; }

  /* ---- App bar ---- */
  .topbar{ min-height:calc(var(--topbar-height) + env(safe-area-inset-top)); box-shadow:0 1px 0 rgba(0,0,0,.06)!important; border-bottom:0!important; }
  .topbar-inner{ padding:0 12px; gap:8px; }
  .topbar .brand-logo-full{ height:32px; max-width:104px; }
  .nav-right{ gap:2px; }
  .nav-right .lang-switch, #pushSubscribeBtn{ display:none!important; } /* language switch lives in the drawer */
  .icon-btn{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:17px; }
  .icon-btn:active{ background:var(--color-primary-light); }
  .hamburger{ width:40px; height:40px; font-size:20px; }
  .avatar-sm{ width:30px; height:30px; border-width:1.5px; }

  /* ---- Bottom tab bar ---- */
  .bottom-nav{ justify-content:stretch; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); border-radius:0; border-top:1px solid var(--color-border);
    background:var(--color-surface); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 -2px 12px rgba(0,0,0,.06); }
  .bottom-nav a{ flex:1 0 56px; min-width:0; padding:4px 2px; gap:2px; font-size:10.5px; font-weight:600; border-radius:12px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bottom-nav a i{ font-size:20px; width:46px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:14px; transition:background .2s,color .2s; }
  .bottom-nav a.active{ transform:none; }
  .bottom-nav a.active::before{ display:none; }
  .bottom-nav a.active i{ background:var(--color-primary-light); filter:none; }
  [data-theme="dark"] .bottom-nav a.active i{ background:rgba(255,26,18,.18); }

  /* ---- Layout: edge-to-edge feed, tighter rhythm ---- */
  .container{ padding-left:14px; padding-right:14px; }
  main{ padding-bottom:8px; }
  h1{ font-size:22px; } h2{ font-size:19px; } h3{ font-size:16px; }

  /* ---- Cards ---- */
  .card, .content-card, .post-card, .stat-card, .trending-widget, .newsletter-box{
    border-radius:16px; border:0; box-shadow:0 1px 3px rgba(0,0,0,.07); }
  [data-theme="dark"] .card, [data-theme="dark"] .content-card, [data-theme="dark"] .post-card{ border:1px solid var(--color-border); box-shadow:none; }
  .content-card:hover{ transform:none; box-shadow:0 1px 3px rgba(0,0,0,.07); }
  .content-card .thumb{ height:170px; }
  .content-card .body{ padding:14px; }

  /* ---- Buttons & inputs: 44px+ targets, 16px text stops iOS zoom ---- */
  .btn{ min-height:44px; border-radius:12px; }
  .btn-sm{ min-height:36px; border-radius:10px; }
  .form-control, select.form-control, textarea.form-control{ min-height:46px; font-size:16px; border-radius:12px; }
  textarea.form-control{ min-height:96px; }

  /* ---- Horizontal scrollers: swipe, no scrollbar ---- */
  .trending-scroll, .policy-nav{ -ms-overflow-style:none; scrollbar-width:none; }
  .trending-scroll::-webkit-scrollbar, .policy-nav::-webkit-scrollbar{ display:none; }

  /* ---- Bottom sheet drawer ---- */
  .mobile-drawer{ border-radius:24px 24px 0 0; }
  .drawer-menu-grid a{ border:0; border-radius:16px; background:var(--color-bg-soft); }

  /* ---- Floating buttons sit above the tab bar ---- */
  .support-fab{ bottom:calc(76px + env(safe-area-inset-bottom))!important; }
  .chatbot-fab{ bottom:calc(76px + env(safe-area-inset-bottom)); }

  /* ---- Footer: slim, tab-bar clearance ---- */
  footer.site-footer{ margin-top:16px; }
  body{ padding-bottom:calc(66px + env(safe-area-inset-bottom)); }

  /* ---- Native feel: no text-selection on chrome, no tap flash ---- */
  .topbar, .bottom-nav, .btn, .icon-btn, .drawer-menu-grid{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
}