/**
 * iOS fixes — the website IS the app for iPhone users.
 *
 * ⚠️ There is no iOS build of SilverBox. An iPhone owner reaches the shop
 * through Safari or through this site added to their home screen, so anything
 * that reads as "a website squeezed onto a phone" costs a sale in a way it
 * never would on Android, where the app is the fallback.
 *
 * 📌 Loaded LAST, after every other stylesheet. That ordering is necessary but
 * NOT sufficient: order only decides ties at equal specificity, and the rules
 * this file has to beat are class selectors on element selectors. Where that
 * matters — and only there — `!important` is used, with the reason stated.
 */

/* ---- 1. Stop Safari zooming when a field is tapped ---------------------- */
/*
 * ⚠️ **The most visible iOS problem this site had.** Safari zooms the whole
 * page whenever a focused control's font is under 16px, and the user then has
 * to pinch back out — on every field, on every form. Twenty-four control rules
 * across sixteen pages were set at 13-15px.
 *
 * 📌 Fixed here rather than in those twenty-four rules: one place cannot be
 * missed by the next page somebody writes, and the visual difference between
 * 15px and 16px is nothing next to a page that jumps.
 *
 * ⚠️ **`!important` is load-bearing, not laziness.** Those rules are class
 * selectors (`.aqp-input`, 0-1-0) and this one is an element selector (0-0-1),
 * so the page wins on specificity no matter which file loads last — and five
 * pages put an inline `<style>` after this file besides. Only the font-size is
 * forced; every other property those rules set is left alone.
 */
input,
select,
textarea {
  font-size: max(16px, 1rem) !important;
}

/* A checkbox or radio has no text, and 16px would only inflate its box. */
input[type="checkbox"],
input[type="radio"] {
  font-size: inherit !important;
}

/*
 * 📌 Buttons are deliberately NOT forced. Safari only zooms for a control the
 * user can TYPE into, and small button labels are a real design choice on a
 * dense screen — forcing those would change layouts for no benefit.
 */

/* ---- 2. The notch, and the home indicator ------------------------------- */
/*
 * ⚠️ Paired with `viewport-fit=cover` in each page's viewport meta. With the
 * meta and without this padding, content slides under the notch and under the
 * home indicator; with neither, a standalone iPhone letterboxes the app in
 * blank bars top and bottom. They only work together.
 *
 * 📌 `env()` resolves to 0 everywhere else, so this is inert off iOS.
 */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/*
 * Anything pinned to an edge has to clear the insets itself — body padding
 * does not reach a fixed element.
 */
.navigation-drawer,
.nav-drawer,
#header-container,
#footer-container {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- 3. The 100vh lie --------------------------------------------------- */
/*
 * ⚠️ On iOS Safari `100vh` is the height with the toolbars HIDDEN, which is
 * taller than what the user can actually see. A drawer at `height: 100vh` puts
 * its last items — sign out, settings — under the toolbar, unreachable.
 *
 * `dvh` is the dynamic viewport and tracks the toolbars. The `100vh` line stays
 * as the fallback for anything that does not support it.
 */
@supports (height: 100dvh) {
  .navigation-drawer,
  .nav-drawer {
    height: 100dvh;
  }
}

/* ---- 4. Touch behaviour ------------------------------------------------- */
/* Safari's grey flash on every tap reads as a rendering fault, not feedback. */
* {
  -webkit-tap-highlight-color: transparent;
}

/*
 * ⚠️ Text selection is left ALONE. Killing it site-wide is a common "app-like"
 * trick and it breaks copying an order number, a tracking id or a UPI
 * reference — the things a customer most needs to copy.
 */

button,
.btn,
[role="button"] {
  /* A button that can be long-pressed into a text selection feels broken. */
  -webkit-user-select: none;
  user-select: none;
  /* Safari otherwise ignores background-color on buttons. */
  -webkit-appearance: none;
  appearance: none;
}

/* Momentum scrolling inside any scrollable panel, not just the page. */
.scroll,
.scrollable,
[data-scroll] {
  -webkit-overflow-scrolling: touch;
}

/* ---- 5. The install offer ---------------------------------------------- */
/*
 * ⚠️ Pinned to the BOTTOM, clear of the home indicator. A banner at the top of
 * a standalone iPhone app sits under the notch, and one that ignores
 * `safe-area-inset-bottom` puts its buttons where the swipe-up gesture lives —
 * so "Not now" becomes a coin toss between dismissing and leaving the app.
 */
.sb-install {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.sb-install-card {
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  background: var(--surface, #fff);
  color: var(--on-surface, #15191a);
  border: 1px solid var(--outline, #d2d9d7);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

.sb-install-title { margin: 0 0 4px; font-weight: 600; }
.sb-install-body { margin: 0 0 12px; font-size: 1.44rem; opacity: .8; }
.sb-install-actions { display: flex; gap: 8px; justify-content: flex-end; }

.sb-install-actions button {
  /* 44px is Apple's minimum touch target; smaller is a button people miss. */
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--outline, #d2d9d7);
  background: transparent;
  color: inherit;
}

.sb-install-yes {
  background: var(--primary, #0b6a52);
  border-color: var(--primary, #0b6a52);
  color: #fff;
  font-weight: 600;
}

/* ---- 6. Pull to refresh ------------------------------------------------- */
/*
 * ⚠️ Only ever visible in standalone, where `pwaTouch.js` installs it. In a
 * normal tab the browser's own refresh exists and this never renders.
 */
.sb-ptr {
  position: fixed;
  top: calc(env(safe-area-inset-top) - 44px);
  left: 50%;
  margin-left: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface, #fff);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  transition: transform .12s ease-out;
}

.sb-ptr-visible { display: flex; }

.sb-ptr-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--outline, #d2d9d7);
  border-top-color: var(--primary, #0b6a52);
  border-radius: 50%;
}

/* Armed: past the trigger, so releasing WILL refresh. The colour change is the
   only signal a one-handed user gets before they let go. */
.sb-ptr-armed .sb-ptr-spinner { border-color: var(--primary, #0b6a52); }

.sb-ptr-loading .sb-ptr-spinner { animation: sb-ptr-spin .7s linear infinite; }

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

@media (prefers-reduced-motion: reduce) {
  .sb-ptr { transition: none; }
  .sb-ptr-loading .sb-ptr-spinner { animation: none; }
}