/*
 * pwa.css — install prompt, update/connection toasts, and installed-app polish.
 *
 * Two constraints shape everything below:
 *
 * 1. style.css is not enqueued on this site, so .container, .btn and the
 *    --sp-* / --r-* / --shadow-* token families do not exist. An undefined
 *    custom property invalidates the whole declaration, so every var() here
 *    carries a literal fallback and nothing depends on the dead design system.
 *    The only tokens that really exist are --pri / --pri-dark (header.php) and
 *    --red / --surface / --border / --text (the admin colour sheet).
 *
 * 2. z-index has to sit above the sticky header and the auth modal (max 2200)
 *    but below #itcd-loader at 10000 — a processing overlay must still cover an
 *    install bar, or a shopper can tap "Install" over the top of a running
 *    add-to-cart.
 */

/* Install buttons are opt-in: hidden until pwa.js decides the platform can
   actually install, so a dead button never ships to iOS-in-Chrome or a browser
   with no install path at all. */
[data-itcd-install][hidden] { display: none !important; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */

#itcd-pwa-toasts {
  position: fixed;
  z-index: 9200;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  width: min(440px, calc(100vw - 24px));
  pointer-events: none;
}

.itcd-pwa-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  border-radius: 12px;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .28);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .22s ease, transform .22s ease;
}

.itcd-pwa-toast.is-in { opacity: 1; transform: translateY(0); }
.itcd-pwa-toast__msg { flex: 1; min-width: 0; }

.itcd-pwa-toast__action {
  flex-shrink: 0;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  border: 0;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--pri, #e52e2e);
  color: #fff;
  min-height: 36px;
}
.itcd-pwa-toast__action:hover { background: var(--pri-dark, #b01b1b); }

.itcd-pwa-toast__x {
  flex-shrink: 0;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  border: 0;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.itcd-pwa-toast__x:hover { color: #f8fafc; }

/* ── Install bar ────────────────────────────────────────────────────────── */

#itcd-install-bar {
  position: fixed;
  z-index: 9200;
  left: 50%;
  transform: translate(-50%, 130%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100vw - 20px));
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon copy"
    "actions actions";
  gap: 12px 14px;
  padding: 16px;
  border-radius: 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e8eaed);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .22);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .32s ease;
  opacity: 0;
}

#itcd-install-bar.is-in { transform: translate(-50%, 0); opacity: 1; }

.itcd-install__icon { grid-area: icon; }
.itcd-install__icon img {
  width: 52px; height: 52px;
  border-radius: 13px;
  display: block;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .16);
}

.itcd-install__copy { grid-area: copy; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.itcd-install__copy strong {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--text, #0f172a);
  font-family: var(--font-heading, inherit);
}
.itcd-install__copy span { font-size: 13px; line-height: 1.5; color: var(--text-muted, #64748b); }

.itcd-install__actions { grid-area: actions; display: flex; gap: 8px; justify-content: flex-end; }

.itcd-install__go,
.itcd-install__no {
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border-radius: 10px;
  /* 46px keeps the tap target above the 44px both Apple and Android ask for —
     this bar is shown on phones more than anywhere else. */
  min-height: 46px;
  padding: 0 20px;
}
.itcd-install__go { border: 0; background: var(--pri, #e52e2e); color: #fff; }
.itcd-install__go:hover { background: var(--pri-dark, #b01b1b); }
.itcd-install__no { border: 1.5px solid var(--border, #e2e8f0); background: transparent; color: var(--text-muted, #64748b); }
.itcd-install__no:hover { color: var(--text, #0f172a); }

@media (min-width: 560px) {
  #itcd-install-bar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icon copy actions";
    align-items: center;
  }
  .itcd-install__actions { justify-content: flex-end; }
}

/* ── Apple "Add to Home Screen" sheet ───────────────────────────────────── */

#itcd-ios-sheet {
  position: fixed;
  inset: 0;
  z-index: 9400;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity .24s ease;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#itcd-ios-sheet.is-in { opacity: 1; }

.itcd-ios__panel {
  width: min(460px, 100%);
  background: var(--surface, #fff);
  border-radius: 22px 22px 0 0;
  padding: 24px 22px calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(18px);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
#itcd-ios-sheet.is-in .itcd-ios__panel { transform: translateY(0); }

.itcd-ios__title {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text, #0f172a);
  font-family: var(--font-heading, inherit);
}

.itcd-ios__steps { margin: 0 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.itcd-ios__steps li { font-size: 14.5px; line-height: 1.55; color: var(--text-muted, #475569); }

.itcd-ios__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(15, 23, 42, .05);
  font-size: 13px;
  color: var(--text-muted, #475569);
}
.itcd-ios__hint svg { flex-shrink: 0; color: #0a84ff; }

.itcd-ios__close {
  margin-top: 18px;
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--pri, #e52e2e);
  color: #fff;
  cursor: pointer;
}

@media (min-width: 560px) {
  #itcd-ios-sheet { align-items: center; }
  .itcd-ios__panel { border-radius: 20px; }
}

/* ── Installed-app polish ───────────────────────────────────────────────── */

/*
 * Only inside the installed app. The home indicator on an iPhone and the
 * rounded display corners both sit over page content that a browser tab would
 * have kept clear with its own toolbars.
 */
html.itcd-standalone body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* A standalone window has no address bar to rubber-band against, and the
     bounce reveals the background colour behind the app. */
  overscroll-behavior-y: contain;
}

html.itcd-standalone {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* With the translucent iOS status bar the page starts underneath the clock. */
html.itcd-standalone .site-header,
html.itcd-standalone #itcd-header { padding-top: env(safe-area-inset-top, 0px); }

/* Nothing in an installed app should look like a page you can text-select by
   accident — but only the chrome, never product copy or prices. */
html.itcd-standalone .hdr-logo,
html.itcd-standalone .nav-inner { -webkit-user-select: none; user-select: none; }
html.itcd-standalone { -webkit-tap-highlight-color: transparent; }

/* ── Preferences ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .itcd-pwa-toast,
  #itcd-install-bar,
  #itcd-ios-sheet,
  .itcd-ios__panel { transition-duration: .01ms !important; }
}

@media (prefers-color-scheme: dark) {
  /* The store itself is light-only, so this covers just the surfaces this file
     owns — enough that they do not glare on a dark phone at night. */
  #itcd-install-bar { background: #111c33; border-color: #1e293b; }
  .itcd-install__copy strong { color: #e2e8f0; }
  .itcd-install__copy span { color: #94a3b8; }
  .itcd-install__no { border-color: #1e293b; color: #94a3b8; }
  .itcd-ios__panel { background: #111c33; }
  .itcd-ios__title { color: #e2e8f0; }
  .itcd-ios__steps li,
  .itcd-ios__hint { color: #94a3b8; }
  .itcd-ios__hint { background: rgba(226, 232, 240, .06); }
}