:root {
  --bg-primary: #0a1628;
  --bg-card: rgba(255, 255, 255, 0.06);
  --bg-card-border: rgba(255, 255, 255, 0.1);
  --text-primary: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.55);
  --accent: #4285f4;
  --accent-hover: #5a9bf6;
  --stat-border: #1a3a6e;
  --btn-text-active: #000000;
  --btn-text-disabled: #dfe3e8;
  /* Status text on the page background, WCAG AA (4.5:1) or better on #0a1628. */
  --danger-ink: #f5a5ab;  /* 9.4:1 */
  --warn-ink: #ffc107;    /* 11.1:1 */
}

/* A brand with a light backgroundColor (applyBranding sets data-surface="light"): the white-based
   muted and the pale status colours above would be unreadable, so use dark inks (AA on #f2f6ff). */
:root[data-surface="light"] {
  --text-muted: #5b6170;
  --danger-ink: #b02a37;
  --warn-ink: #8a5300;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
}

.screen { display: none; }
.screen.active { display: block; }

.text-muted-custom { color: var(--text-muted) !important; }
.text-accent { color: var(--accent) !important; }
.text-lime { color: #a3e635 !important; }

.btn-accent {
  background: var(--accent);
  color: var(--btn-text-active);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  transition: background 0.2s, color 0.2s;
}
.btn-accent:hover, .btn-accent:focus { background: var(--accent-hover); color: var(--btn-text-active); }
.btn-accent:disabled { background: rgba(66, 133, 244, 0.4); color: var(--btn-text-disabled); }

.btn-outline-light {
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  font-size: 1rem;
  color: #fff;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.08); color: #fff; }

.brand-logo { height: 100px; max-width: 380px; object-fit: contain; }

.card-dark {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 14px;
}

/* Stripe element */
.stripe-element {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px;
  transition: border-color 0.2s;
}
.stripe-element.StripeElement--focus {
  border-color: var(--accent);
}

/* Battery animation */
.battery-container { width: 160px; position: relative; }
.battery-body {
  width: 140px;
  height: 200px;
  border: 4px solid rgba(255,255,255,0.3);
  border-radius: 16px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.battery-cap {
  width: 50px;
  height: 10px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px 4px 0 0;
  margin: -2px auto 0;
  position: relative;
  top: -204px;
}
.battery-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(66,133,244,0.9) 0%, rgba(26,58,110,0.95) 60%, #0d1f3c 100%);
  transition: height 2.8s ease-in-out;
  border-radius: 0 0 12px 12px;
}
.battery-fill::before,
.battery-fill::after {
  content: '';
  position: absolute;
  top: -18px;
  left: -40%;
  width: 180%;
  height: 36px;
  border-radius: 45%;
  opacity: 0.5;
}
.battery-fill::before {
  background: rgba(66,133,244,0.4);
  animation: wave 3s ease-in-out infinite;
}
.battery-fill::after {
  background: rgba(66,133,244,0.25);
  animation: wave 4s ease-in-out infinite reverse;
  top: -14px;
  opacity: 0.35;
}
@keyframes wave {
  0%, 100% { transform: translateX(-8%) rotate(2deg); }
  50% { transform: translateX(8%) rotate(-2deg); }
}
@keyframes slosh {
  0%, 100% { transform: translateY(0); }
  33% { transform: translateY(-2px); }
  66% { transform: translateY(1px); }
}
.battery-fill.soc-idle {
  animation: slosh 5s ease-in-out infinite;
}
.battery-bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  background: linear-gradient(180deg, #FFD700 0%, #FF8C00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  z-index: 5;
  filter: drop-shadow(0 2px 8px rgba(255,165,0,0.4));
}
.battery-soc-label {
  position: absolute;
  bottom: 0%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  z-index: 3;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  font-variant-numeric: tabular-nums;
  transform: translateY(-4px);
  transition: bottom 1s ease;
  pointer-events: none;
}

@keyframes batteryPulse {
  0%, 100% { opacity: 0.7; filter: drop-shadow(0 2px 8px rgba(255,165,0,0.3)); }
  50% { opacity: 1; filter: drop-shadow(0 2px 12px rgba(255,165,0,0.6)); }
}
.battery-bolt { animation: batteryPulse 2s ease-in-out infinite; }

.timer-display {
  font-size: 2.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}

/* Stat cards */
.stat-card {
  background: var(--bg-card);
  border: 2px solid var(--stat-border);
  border-radius: 14px;
}
.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--stat-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 16px;
  color: var(--accent);
}
.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Complete screen */

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-card-border);
  font-size: 0.875rem;
}
.summary-row:last-child { border-bottom: none; }
.summary-row span:first-child { color: var(--text-muted); }
.summary-row span:last-child { font-weight: 600; text-align: right; }

.receipt-icon {
  width: 44px;
  height: 44px;
  background: rgba(66, 133, 244, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Form overrides */
.form-control.bg-transparent::placeholder { color: var(--text-muted); }
.form-control.bg-transparent:focus {
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);
  border-color: var(--accent);
}

/* Phase badge */
.badge.bg-info-subtle {
  background: rgba(66, 133, 244, 0.15) !important;
  color: var(--accent) !important;
  font-weight: 600;
  font-size: 0.8rem;
}

/* Bootstrap's #dc3545 is 4.0:1 on the navy background (below WCAG AA). */
.text-danger { color: var(--danger-ink) !important; }
.text-warning { color: var(--warn-ink) !important; }

/* Alert override */
.alert-danger {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.3);
  color: var(--danger-ink);
  border-radius: 12px;
}

/* Scroll indicator */
@keyframes pulseArrow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

#scroll-arrow {
  background: var(--accent);
}

/* Responsive */
@media (max-width: 360px) {
  .stat-value { font-size: 0.95rem; }
  .timer-display { font-size: 1.8rem; }
  .battery-body { width: 110px; height: 160px; }
  .battery-soc-label { font-size: 1.1rem; }
}

/* Saved contact: email and mobile on separate lines (formatContactText joins with \n). */
#charging-receipt-contact-display, #settle-contact-display { white-space: pre-line; }