/* Snaplot offline UI — capacity banner, sync-now bar, install modals.
 * Loaded site-wide on every in-app page (catalogue, account, my-account, topup, …).
 */

/* ============= 1. Capacity banner (iOS, top of catalogue page) ============= */

.snap-capacity-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 16px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 10px;
  font: 500 13px/1.4 var(--snap-font, 'Inter', sans-serif);
  color: var(--snap-text, #0E2A47);
}
.snap-capacity-banner.is-warn {
  background: #FFFBEB;
  border-color: #FCD34D;
}
.snap-capacity-banner.is-danger {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #991B1B;
  position: sticky;
  top: 0;
  z-index: 30;
}
.snap-capacity-banner.is-unavailable {
  background: #F3F4F6;
  border-color: #D1D5DB;
  opacity: 0.8;
}
.snap-capacity-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.snap-capacity-text {
  flex: 1;
  min-width: 0;
}
.snap-capacity-text strong {
  font-weight: 700;
}
.snap-capacity-syncbtn {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.snap-capacity-syncbtn:hover {
  background: currentColor;
  color: #fff;
}

@media (max-width: 480px) {
  .snap-capacity-banner { font-size: 12px; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
}

/* ============= 2. Pre-offline brief modal (iOS, first visit) ============= */

.snap-offline-brief-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(14, 42, 71, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
}
.snap-offline-brief-card {
  background: #fff;
  border-radius: 18px 18px 0 0;
  max-width: 440px;
  width: 100%;
  padding: 24px 22px 28px;
  font-family: var(--snap-font, 'Inter', sans-serif);
  color: var(--snap-text, #0E2A47);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
  animation: snap-brief-slidein 0.25s ease-out;
}
@keyframes snap-brief-slidein {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.snap-offline-brief-icon {
  font-size: 36px;
  margin-bottom: 8px;
  text-align: center;
}
.snap-offline-brief-card h2 {
  font: 800 19px/1.25 var(--snap-font, 'Inter', sans-serif);
  margin: 0 0 14px;
  text-align: center;
}
.snap-offline-brief-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.snap-offline-brief-card li {
  position: relative;
  padding: 10px 0 10px 28px;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid var(--snap-border, #D6D2C5);
}
.snap-offline-brief-card li:last-child { border-bottom: 0; }
.snap-offline-brief-card li::before {
  content: '•';
  position: absolute;
  left: 8px;
  top: 9px;
  color: #F59E0B;
  font-size: 18px;
  line-height: 1;
}
.snap-offline-brief-ack {
  width: 100%;
  padding: 14px;
  font-size: 15px;
}

@media (min-width: 600px) {
  .snap-offline-brief-modal { align-items: center; }
  .snap-offline-brief-card { border-radius: 18px; }
}

/* ============= 3. Install modal (Safari iOS) + route modal (other iOS) ============= */

.snap-install-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(14, 42, 71, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.snap-install-card {
  background: #fff;
  border-radius: 18px;
  max-width: 440px;
  width: 100%;
  padding: 28px 24px;
  font-family: var(--snap-font, 'Inter', sans-serif);
  color: var(--snap-text, #0E2A47);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.snap-install-icon {
  font-size: 44px;
  margin-bottom: 8px;
}
.snap-install-card h2 {
  font: 800 20px/1.2 var(--snap-font, 'Inter', sans-serif);
  margin: 0 0 12px;
}
.snap-install-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--snap-text-muted, #475569);
  margin: 0 0 20px;
}
.snap-install-card code {
  background: #F5F1E8;
  border: 1px solid var(--snap-border, #D6D2C5);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  word-break: break-all;
}
.snap-install-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: left;
}
.snap-install-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid var(--snap-border, #D6D2C5);
}
.snap-install-steps li:last-child { border-bottom: 0; }
.snap-install-steps--simple li {
  border-bottom: 1px dashed var(--snap-border, #D6D2C5);
}
.snap-install-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: #F59E0B;
  color: #0E2A47;
  font-weight: 800;
  font-size: 12px;
  border-radius: 50%;
}
.snap-share-glyph {
  display: inline-block;
  background: #0E2A47;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-left: 4px;
}
.snap-install-dismiss {
  display: block;
  margin: 12px auto 0;
  width: 100%;
  padding: 12px;
  font-size: 13px;
}
.snap-install-copyurl {
  width: 100%;
  margin-bottom: 10px;
}
.snap-install-note {
  font-size: 12px;
  color: var(--snap-text-muted, #475569);
  margin: 14px 0 18px;
  padding: 10px 12px;
  background: #FFFBEB;
  border-left: 3px solid #F59E0B;
  border-radius: 6px;
  text-align: left;
  line-height: 1.45;
}

/* ============= 4. Limited-offline-mode persistent banner (iOS, dismissed) ============= */

.snap-install-limited-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #FFFBEB;
  border-bottom: 1px solid #FCD34D;
  padding: 8px 14px;
  font: 600 12px/1.4 var(--snap-font, 'Inter', sans-serif);
  color: #92400E;
  text-align: center;
}
.snap-install-limited-banner a {
  color: #B45309;
  text-decoration: underline;
  font-weight: 700;
}

/* ============= 5. Sync-now floating bar (bottom of viewport) ============= */

.snap-sync-now-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  background: #fff;
  border: 1.5px solid var(--snap-border, #D6D2C5);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(14, 42, 71, 0.15);
  font: 600 13px/1 var(--snap-font, 'Inter', sans-serif);
  max-width: calc(100vw - 32px);
}
/* Explicit `display:flex` above beats the user-agent's `[hidden]{display:none}`
   rule, so the bar would stay visible even when JS sets bar.hidden=true.
   Force the override back. */
.snap-sync-now-bar[hidden] { display: none !important; }
.snap-sync-now-bar.is-queued  { border-color: #F59E0B; background: #FFFBEB; color: #92400E; }
.snap-sync-now-bar.is-failed  { border-color: #DC2626; background: #FEF2F2; color: #991B1B; }
.snap-sync-now-bar.is-mixed   { border-color: #F59E0B; background: #FFFBEB; color: #92400E; }
.snap-sync-now-bar.is-syncing { border-color: #38BDF8; background: #DBEAFE; color: #1E40AF; }
.snap-sync-now-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.snap-sync-now-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.snap-sync-now-cta {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--snap-brown, #0E2A47);
  color: #fff;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.snap-sync-now-bar.is-syncing .snap-sync-now-cta {
  background: #1E40AF;
  cursor: progress;
}

@media (max-width: 380px) {
  .snap-sync-now-bar { font-size: 12px; padding: 8px 12px; }
  .snap-sync-now-cta { padding: 6px 10px; font-size: 11px; }
}

/* On mobile / narrow viewports, the bar lives at the TOP of the viewport
   instead of the bottom. The bottom edge gets crowded by the iOS browser
   chrome, the iPhone home indicator and the sticky submit button — putting
   the offline notice at the top guarantees it's always visible without
   covering anything the user is currently editing. */
@media (max-width: 768px) {
  .snap-sync-now-bar {
    bottom: auto;
    top: 12px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(14, 42, 71, 0.18);
  }
}

/* ============= 6. Per-lot status badges in submitted-lots strip ============= */

.snap-lot-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 11px/1.2 var(--snap-font, 'Inter', sans-serif);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.snap-lot-status--queued  { background: #FFFBEB; color: #92400E; border: 1px solid #FCD34D; }
.snap-lot-status--syncing { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.snap-lot-status--synced  { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.snap-lot-status--failed  { background: #FEF2F2; color: #991B1B; border: 1px solid #FCA5A5; }

.snap-lot-retry-btn {
  margin-left: 8px;
  padding: 4px 10px;
  font: 700 11px/1 var(--snap-font, 'Inter', sans-serif);
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: #991B1B;
  cursor: pointer;
}
.snap-lot-retry-btn:hover {
  background: #991B1B;
  color: #fff;
}

/* ============= 7. Connectivity badge in catalogue header ============= */

.snap-conn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-left: 12px;
  border-radius: 999px;
  font: 700 11px/1 var(--snap-font, 'Inter', sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.snap-conn-badge--online   { background: #DCFCE7; color: #166534; }
.snap-conn-badge--offline  { background: #FEF2F2; color: #991B1B; }
.snap-conn-badge--limited  { background: #FFFBEB; color: #92400E; }
.snap-conn-badge::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}