/* Albania Rental Cars — PWA v2 UI Enhancements
 * Loaded after the base style.css. Adds glassmorphism, dark mode,
 * micro-animations, bottom-sheets, toasts, push opt-in card.
 * Scoped via `.pwa-v2` and inside `.pwa-standalone` to avoid breaking the public site.
 */

:root {
  --v2-glass-bg: rgba(255,255,255,0.62);
  --v2-glass-bg-dark: rgba(15,23,42,0.55);
  --v2-glass-border: rgba(255,255,255,0.35);
  --v2-shadow-lg: 0 18px 50px -10px rgba(15,23,42,0.35);
  --v2-shadow-sm: 0 4px 14px rgba(15,23,42,0.10);
  --v2-radius: 18px;
  --v2-radius-sm: 12px;
  --v2-accent: #E8191A;
  --v2-accent-soft: rgba(232,25,26,0.10);
  --v2-ease: cubic-bezier(.22,.61,.36,1);
  --v2-bg: #f8fafc;
  --v2-fg: #0f172a;
  --v2-fg-muted: #475569;
  --v2-surface: #ffffff;
}

@media (prefers-color-scheme: dark) {
  html.pwa-standalone:not(.theme-light) {
    --v2-bg: #0b1220;
    --v2-fg: #e2e8f0;
    --v2-fg-muted: #94a3b8;
    --v2-surface: #111a2e;
    --v2-glass-bg: var(--v2-glass-bg-dark);
    --v2-glass-border: rgba(148,163,184,0.18);
    color-scheme: dark;
  }
}
html.theme-dark { color-scheme: dark; }
html.theme-dark.pwa-standalone {
  --v2-bg: #0b1220; --v2-fg:#e2e8f0; --v2-fg-muted:#94a3b8;
  --v2-surface:#111a2e; --v2-glass-bg: var(--v2-glass-bg-dark);
  --v2-glass-border: rgba(148,163,184,0.18);
}

/* ── Safe areas for notch/punch-hole devices ───────────────── */
html.pwa-standalone body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Pull-to-refresh indicator ─────────────────────────────── */
.ptr-indicator {
  position: fixed; left: 50%; top: 14px;
  transform: translate(-50%, -100%) scale(.85);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--v2-surface);
  box-shadow: var(--v2-shadow-sm);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: transform .25s var(--v2-ease), opacity .2s;
  opacity: 0; pointer-events: none;
}
.ptr-indicator.show { opacity: 1; }
.ptr-indicator.refreshing { transform: translate(-50%, 14px) scale(1); }
.ptr-indicator svg {
  width: 22px; height: 22px; color: var(--v2-accent);
}
.ptr-indicator.refreshing svg { animation: ptr-spin .9s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ── Toast notifications ────────────────────────────────────── */
.v2-toast-root {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; gap: 8px;
  z-index: 99998; pointer-events: none;
  max-width: calc(100vw - 24px);
}
.v2-toast {
  pointer-events: auto;
  background: var(--v2-glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--v2-glass-border);
  color: var(--v2-fg);
  padding: 12px 16px; border-radius: 14px;
  box-shadow: var(--v2-shadow-lg);
  font: 500 .9rem/1.3 'Poppins', system-ui, sans-serif;
  display: flex; align-items: center; gap: 10px;
  min-width: 260px;
  animation: v2-toast-in .35s var(--v2-ease) both;
}
.v2-toast.leaving { animation: v2-toast-out .25s var(--v2-ease) both; }
.v2-toast i { color: var(--v2-accent); font-size: 1.1rem; }
.v2-toast.success i { color: #16a34a; }
.v2-toast.error i { color: #dc2626; }
@keyframes v2-toast-in {
  from { transform: translateY(20px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes v2-toast-out {
  to { transform: translateY(20px) scale(.96); opacity: 0; }
}

/* ── Bottom sheet ───────────────────────────────────────────── */
.v2-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 99996; opacity: 0; transition: opacity .25s var(--v2-ease);
}
.v2-sheet-backdrop.show { opacity: 1; }
.v2-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--v2-surface); color: var(--v2-fg);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.25);
  z-index: 99997; padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .32s var(--v2-ease);
  max-height: 86vh; overflow-y: auto;
  font-family: 'Poppins', system-ui, sans-serif;
}
.v2-sheet.show { transform: translateY(0); }
.v2-sheet .grab {
  width: 42px; height: 4px; border-radius: 4px;
  background: rgba(148,163,184,.4); margin: 4px auto 12px;
}
.v2-sheet h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; }
.v2-sheet p  { margin: 0 0 12px; font-size: .88rem; color: var(--v2-fg-muted); line-height: 1.5; }
.v2-sheet .actions { display: flex; gap: 8px; margin-top: 10px; }
.v2-sheet .actions button {
  flex: 1; padding: 11px 14px; border-radius: 12px;
  border: none; font: 600 .9rem 'Poppins', sans-serif; cursor: pointer;
  transition: transform .1s, background .15s;
}
.v2-sheet .actions button:active { transform: scale(.97); }
.v2-sheet .actions .primary  { background: var(--v2-accent); color: #fff; }
.v2-sheet .actions .primary:hover  { background: #c1131a; }
.v2-sheet .actions .ghost    { background: transparent; color: var(--v2-fg-muted); }
.v2-sheet .opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px;
  background: var(--v2-accent-soft); color: var(--v2-fg);
  text-decoration: none; font-weight: 500; font-size: .92rem;
  margin-bottom: 8px; transition: transform .1s;
}
.v2-sheet .opt:active { transform: scale(.98); }
.v2-sheet .opt i { color: var(--v2-accent); font-size: 1.2rem; width: 24px; text-align: center; }

/* ── Push-notification opt-in card (in track page) ─────────── */
.v2-push-card {
  background: var(--v2-glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--v2-glass-border);
  border-radius: var(--v2-radius);
  padding: 16px 18px;
  margin: 18px 0;
  display: flex; gap: 14px; align-items: center;
  box-shadow: var(--v2-shadow-sm);
  animation: v2-fade-up .5s var(--v2-ease) both;
}
.v2-push-card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--v2-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.2rem;
}
.v2-push-card .body { flex: 1; min-width: 0; }
.v2-push-card h4 { margin: 0 0 2px; font-size: .98rem; font-weight: 600; color: var(--v2-fg); }
.v2-push-card p  { margin: 0; font-size: .82rem; color: var(--v2-fg-muted); line-height: 1.4; }
.v2-push-card button {
  background: var(--v2-accent); color: #fff; border: none;
  padding: 9px 16px; border-radius: 10px;
  font: 600 .85rem 'Poppins', sans-serif; cursor: pointer;
  flex-shrink: 0; transition: transform .1s, background .15s;
}
.v2-push-card button:active { transform: scale(.96); }
.v2-push-card button:hover  { background: #c1131a; }
.v2-push-card .dismiss {
  background: transparent; color: var(--v2-fg-muted); padding: 6px 8px;
}
.v2-push-card.hide { display: none; }
@keyframes v2-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Theme toggle (floating chip on track page) ───────────── */
.v2-theme-chip {
  position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px;
  z-index: 9990;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--v2-glass-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--v2-glass-border);
  color: var(--v2-fg);
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--v2-shadow-sm); cursor: pointer;
  transition: transform .15s var(--v2-ease);
}
html.pwa-standalone .v2-theme-chip { display: flex; }
.v2-theme-chip:active { transform: scale(.92); }

/* ── Micro-interactions on existing buttons ───────────────── */
html.pwa-standalone .btn-primary,
html.pwa-standalone .cp-book-btn,
html.pwa-standalone .pwa-banner__btn,
html.pwa-standalone .v2-push-card button {
  transition: transform .12s var(--v2-ease), box-shadow .2s, background .15s;
}
html.pwa-standalone .btn-primary:active,
html.pwa-standalone .cp-book-btn:active {
  transform: scale(.97);
}

/* ── Skeleton shimmer (used while track-result loads) ────── */
.v2-skel {
  position: relative; overflow: hidden;
  background: rgba(148,163,184,.18); border-radius: 10px;
}
.v2-skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: v2-shimmer 1.4s infinite;
}
@keyframes v2-shimmer { to { transform: translateX(100%); } }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v2-toast, .v2-sheet, .v2-sheet-backdrop, .v2-push-card,
  .ptr-indicator, .v2-skel::after {
    animation: none !important; transition: none !important;
  }
}