/* Zingara partner portal - native-app feel on phones (login, registration, wizards). Gold on black. */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
button, a, input, select, textarea { touch-action: manipulation; }

/* install banner */
.pwa-install { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 3000; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px; background: #141414; color: #f5f1e6; border: 1px solid rgba(212, 175, 55, .55); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); font: 600 .82rem/1.3 system-ui, sans-serif; max-width: 520px; margin: 0 auto; }
.pwa-install img { width: 36px; height: 36px; border-radius: 10px; }
.pwa-install span { flex: 1; }
.pwa-install .pi-go { height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: #d4af37; color: #1a1405; font-weight: 800; }
.pwa-install .pi-x { background: none; border: 0; color: #a59f8d; font-size: 1.5rem; line-height: 1; padding: 0 4px; }

@media (max-width: 575.98px) {
  /* ---- registration screen: full-height app screen with a bottom-sheet card ---- */
  body.pr { min-height: 100vh; min-height: 100dvh; }
  body.pr .pr-top { position: sticky; top: 0; z-index: 20; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  body.pr .pr-main { place-items: stretch; padding: 0; align-items: stretch; }
  body.pr .pr-shell { max-width: none; display: flex; flex-direction: column; min-height: calc(100dvh - 64px); }
  body.pr .pr-hero { padding: 22px 18px 6px; margin: 0; text-align: left; }
  body.pr .pr-hero h1 { font-size: 1.6rem; }
  body.pr .pr-card { flex: 1; border-radius: 24px 24px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px)); margin-top: 10px; }
  body.pr .pr-foot { display: none; }
  /* big thumb-friendly controls; 16px stops iOS zoom */
  .control input, .field input, .field select { height: 54px; font-size: 16px !important; border-radius: 14px; }
  .btn { height: 56px; border-radius: 14px; font-size: 1rem; }
  /* primary action sticks above the keyboard / home bar */
  .pr-step .btn[type=submit] { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 5; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
  .pr-steps li { font-size: .62rem; letter-spacing: .04em; }
  .linkrow { font-size: .9rem; }
  .linkbtn { padding: 10px 4px; }
  .two { grid-template-columns: 1fr !important; }
  .otp input { font-size: 1.5rem; }
}
@media (max-width: 575.98px) {
  html.is-standalone body.pr .pr-links a.is-fill { display: none; } /* "back to website" makes no sense inside the installed app */
}

/* ---- step-by-step wizards inside the portal (event wizard etc.) ---- */
@media (max-width: 767.98px) {
  .pe-wizard, .wizard-steps, .stepper, .nav-wizard { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: none; }
  .pe-wizard::-webkit-scrollbar, .wizard-steps::-webkit-scrollbar, .stepper::-webkit-scrollbar { display: none; }
  .pe-wizard > *, .wizard-steps > *, .stepper > * { flex: 0 0 auto; scroll-snap-align: center; white-space: nowrap; padding: .5rem .85rem; font-size: .8rem; }
  .card-zing, .card { border-radius: 16px; }
  form .btn, .wizard-actions .btn { min-height: 48px; }
  .wizard-actions, .form-actions { position: sticky; bottom: 0; z-index: 10; display: flex; gap: 10px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, transparent, #0b0b0b 30%); }
  .wizard-actions .btn, .form-actions .btn { flex: 1; }
}

/* ---- very narrow phones / small preview panes (<= 380px): nothing may be wider than the screen ---- */
@media (max-width: 380px) {
  html, body.pr { overflow-x: hidden; max-width: 100vw; }
  body.pr .pr-main, body.pr .pr-shell, body.pr .pr-card, body.pr .pr-hero, .pr-step, .field, .control { min-width: 0; max-width: 100%; }
  body.pr .pr-top { gap: 8px; padding-left: 10px; padding-right: 10px; }
  body.pr .pr-brand { min-width: 0; gap: 8px; font-size: .85rem; }
  body.pr .pr-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.pr .pr-brand img { width: 36px; height: 36px; flex: 0 0 auto; }
  body.pr .pr-links { flex: 0 0 auto; gap: 6px; }
  body.pr .pr-links a { height: 34px; padding: 0 10px; font-size: .74rem; }
  body.pr .pr-links a.is-fill { display: none; }
  body.pr .pr-hero { padding: 16px 14px 4px; }
  body.pr .pr-hero h1 { font-size: 1.35rem; overflow-wrap: anywhere; }
  body.pr .pr-hero p { font-size: .82rem; }
  body.pr .pr-card { padding: 16px 14px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .pr-steps { gap: 4px; }
  .pr-steps li { font-size: .55rem; letter-spacing: 0; }
  .pr-card h2 { font-size: 1.05rem; }
  .control input { padding-left: 40px; padding-right: 12px; text-overflow: ellipsis; }
  .control .ico { left: 12px; width: 16px; height: 16px; }
  .control .prefix { left: 38px; }
  .control.has-prefix input { padding-left: 70px; }
  .otp input { letter-spacing: .3em; padding-left: 12px; }
  .linkrow { flex-wrap: wrap; gap: 4px 12px; }
  /* login page */
  .shell, .card { min-width: 0; max-width: 100%; }
  .brand h1 { font-size: 1.35rem !important; }
  .brand p { letter-spacing: .1em; font-size: .68rem; }
}