/* Parth Soni — app layer for phones, installed PWA and the native wrapper.
 * Loaded after style.css. Desktop browsers are unaffected except for the
 * tap/selection resets on controls. */

/* ---------- safe areas (notch, Dynamic Island, home indicator, gesture bar) ---------- */
:root {
  /* --safe-area-inset-* is set by the Android app (Capacitor SystemBars) on older WebViews */
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --tabbar-h: 0px;
  /* Side padding never sits under a landscape notch */
  --gutter: max(clamp(1rem, 4vw, 3.5rem), var(--sal), var(--sar));
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

/* ---------- controls behave like app controls ---------- */
a, button, summary, label, input, select, textarea, [role='button'], [role='tab'], [role='radio'] {
  touch-action: manipulation; /* no double-tap zoom delay */
}
.btn, .nav, .tabbar, .bar__lang, .lang-btn, .bar__contact-box, .mark, .seg, .days, .slots,
.gtab, .gresult__tabs, .ns-stone__btn, .linkbtn, summary, .step__n, .chart figcaption {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Content stays selectable: people copy chart details and planet positions. */
.btn:active, .tabbar__link:active, .lang-btn:active, .bar__contact-box:active { transform: scale(.97); }
.btn, .tabbar__link, .lang-btn, .bar__contact-box { transition: transform .12s var(--ease), background-color .2s, color .2s, border-color .2s; }
img, svg { -webkit-user-drag: none; }

/* Form fields: 16px or larger, so iOS never zooms on focus (pinch zoom stays available). */
input, select, textarea { font-size: max(16px, 1em); }

/* ---------- installed app (home-screen PWA or native wrapper) ---------- */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  html, body { overscroll-behavior-y: none; } /* no rubber-band or pull-to-refresh bounce */
  /* Status bar strip: always indigo, whatever section scrolls under it */
  body::before {
    content: '';
    position: fixed; z-index: 1000; left: 0; right: 0; top: 0;
    height: var(--sat);
    background: var(--neel-deep);
    pointer-events: none;
  }
  .install-cta { display: none !important; }
}
html.is-native body { overscroll-behavior-y: none; }
html.is-native body::before {
  content: ''; position: fixed; z-index: 1000; left: 0; right: 0; top: 0; height: var(--sat);
  background: var(--neel-deep); pointer-events: none;
}

/* ---------- bottom tab bar (phones) ---------- */
.tabbar { display: none; }

@media (max-width: 768px) {
  :root { --tabbar-h: 58px; }

  /* The section links move from the top bar to the bottom tab bar */
  .bar .nav { display: none; }
  .bar-shell { top: var(--sat, 0px); padding: 0; }

  .tabbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    position: fixed; z-index: 900; left: 0; right: 0; bottom: 0;
    padding: 0 var(--sar) var(--sab) var(--sal);
    background: rgba(20, 28, 63, .96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--resist-faint);
    transition: transform .25s var(--ease);
  }
  .tabbar__link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: var(--tabbar-h); min-width: 0;
    color: var(--resist-dim); text-decoration: none;
    font: 500 .72rem/1.1 var(--f-text);
    letter-spacing: .01em;
  }
  .tabbar__link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .tabbar__icon { width: 22px; height: 22px; flex: none; }
  .tabbar__link.is-active { color: var(--haldi); }
  .tabbar__link:focus-visible { outline: 2px solid var(--haldi); outline-offset: -4px; }

  /* Tab jumps land below the two-row top bar, not under it */
  main > section[id] { scroll-margin-top: calc(6.2rem + var(--sat)); }

  /* Room for the tab bar so nothing hides behind it */
  body { padding-bottom: calc(var(--tabbar-h) + var(--sab)); }

  /* The keyboard pushes fixed bars up on Android; hide the tab bar while typing */
  body:has(input:focus, textarea:focus, select:focus) .tabbar { transform: translateY(110%); }
}

/* Footer clears the home indicator when there is no tab bar (tablets, landscape) */
.foot { padding-bottom: calc(2.5rem + var(--sab)); padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- install app: footer button and bottom sheet ---------- */
.install-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 var(--t-0)/1.2 var(--f-text);
  color: var(--resist); background: transparent; cursor: pointer;
  border: 1px solid var(--resist-faint); border-radius: 999px; padding: .45rem .9rem;
  width: fit-content;
}
.install-cta:hover { border-color: var(--haldi); }
.install-cta svg { width: 16px; height: 16px; }
.install-cta[hidden] { display: none; }

.install-sheet {
  position: fixed; z-index: 950; left: max(.75rem, var(--sal)); right: max(.75rem, var(--sar));
  bottom: calc(var(--tabbar-h) + var(--sab) + .75rem);
  max-width: 30rem; margin: 0 auto;
  background: var(--resist); color: var(--kashish);
  border-radius: 14px; padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 18px 48px rgba(20, 28, 63, .35), 0 2px 6px rgba(20, 28, 63, .2);
  transform: translateY(calc(100% + 2rem)); opacity: 0;
  transition: transform .32s var(--ease), opacity .2s;
}
.install-sheet.is-open { transform: none; opacity: 1; }
.install-sheet[hidden] { display: none; }
.install-sheet__head { display: flex; align-items: center; gap: .8rem; }
.install-sheet__icon { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.install-sheet__title { font-family: var(--f-display); font-size: var(--t-2); line-height: 1.15; }
.install-sheet__text { margin-top: .6rem; color: var(--kashish-dim); font-size: .98rem; }
.install-sheet__steps { margin: .8rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; font-size: .98rem; }
.install-sheet__steps svg { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin: 0 .15rem; color: #0A64D6; }
.install-sheet__actions { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.install-sheet__actions .btn { min-height: 44px; padding: .55rem 1.2rem; }
.install-sheet__close {
  margin-left: auto; align-self: flex-start;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--kashish-dim); cursor: pointer;
  display: grid; place-items: center;
}
.install-sheet__close svg { width: 18px; height: 18px; }
.install-sheet__close:hover { background: var(--kashish-faint); }

/* ---------- offline notice ---------- */
.net-toast {
  position: fixed; z-index: 960; left: 50%; top: calc(.75rem + var(--sat));
  transform: translate(-50%, -150%); opacity: 0;
  background: var(--kashish); color: var(--resist);
  padding: .55rem 1rem; border-radius: 999px; font-size: .9rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: transform .3s var(--ease), opacity .2s;
  max-width: calc(100vw - 2rem); text-align: center;
}
.net-toast.is-open { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .install-sheet, .net-toast, .tabbar { transition: none; }
  .btn:active, .tabbar__link:active, .lang-btn:active, .bar__contact-box:active { transform: none; }
}
.tabbar__link[hidden] { display: none; }

/* ---------- kundli result actions (book + share) ---------- */
.kresult__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn__icon { flex: none; margin-right: .5rem; }
#k-share[hidden] { display: none; }