/* ================================================================
   VTU Data Pay — PWA UI Styles
   Exact tokens from index.php:
     --accent:       #2f9e88
     --accent-dark:  #237a68
     --accent-light: #3ecfb2
     --accent-bg:    #e6f7f4
     hero bg:        linear-gradient(160deg, #237a68 0%, #1a2332 55%, #343a40 100%)
     fonts:          Plus Jakarta Sans (heading), DM Sans (body)
   ================================================================ */

:root {
  /* ── Site tokens (exact match) ────────────────────────────── */
  --pwa-accent:       #2f9e88;
  --pwa-accent-dark:  #237a68;
  --pwa-accent-light: #3ecfb2;
  --pwa-accent-bg:    #e6f7f4;
  --pwa-hero-dark:    #1a2332;
  --pwa-hero-darker:  #131c2a;
  --pwa-surface:      #ffffff;
  --pwa-surface-2:    #f8f9fa;
  --pwa-ash-100:      #f1f3f5;
  --pwa-ash-200:      #e9ecef;
  --pwa-ash-300:      #dee2e6;
  --pwa-ash-600:      #868e96;
  --pwa-ash-700:      #495057;
  --pwa-ash-800:      #343a40;
  --pwa-ash-900:      #212529;
  --pwa-danger:       #e03131;

  /* ── Component tokens ─────────────────────────────────────── */
  --pwa-radius-sm:  6px;
  --pwa-radius-md:  10px;
  --pwa-radius-lg:  16px;
  --pwa-radius-xl:  24px;
  --pwa-shadow-sm:  0 2px 8px rgba(33,37,41,.08);
  --pwa-shadow-lg:  0 10px 40px rgba(0,0,0,.14);
  --pwa-transition: .22s ease;
  --pwa-font-head:  'Plus Jakarta Sans', sans-serif;
  --pwa-font-body:  'DM Sans', sans-serif;
  --pwa-z:          99990;
}

/* ── Splash Screen ────────────────────────────────────────────
   Dark teal/navy gradient matching the hero section          */
#pwa-splash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--pwa-z) + 10);
  background:
    radial-gradient(ellipse at 0% 50%,  rgba(47,158,136,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 20%, rgba(47,158,136,.15) 0%, transparent 50%),
    linear-gradient(160deg, var(--pwa-accent-dark) 0%, var(--pwa-hero-dark) 55%, var(--pwa-ash-800) 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  transition: opacity .4s ease;
}

/* Subtle grid overlay (matches hero::before) */
#pwa-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  pointer-events: none;
}

#pwa-splash .splash-logo {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  border-radius: 20px;
  object-fit: contain;
  box-shadow: 0 0 0 0 rgba(47,158,136,.45);
  animation: splashPulse 2s ease-in-out infinite;
}

#pwa-splash .splash-name {
  position: relative;
  z-index: 1;
  font-family: var(--pwa-font-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}

#pwa-splash .splash-tag {
  position: relative;
  z-index: 1;
  font-family: var(--pwa-font-body);
  font-size: .8125rem;
  color: rgba(255,255,255,.5);
}

#pwa-splash .splash-bar {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 3px;
  background: rgba(255,255,255,.12);
  border-radius: 99px;
  overflow: hidden;
  margin-top: .25rem;
}

#pwa-splash .splash-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, var(--pwa-accent), var(--pwa-accent-light));
  border-radius: 99px;
  animation: splashBar 1.1s ease-in-out infinite;
}

@keyframes splashPulse {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(47,158,136,.45); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(47,158,136,0);  }
}
@keyframes splashBar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%);  }
}

/* ── Offline Bar ──────────────────────────────────────────────*/
#pwa-offline-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--pwa-z);
  background: var(--pwa-danger);
  color: #fff;
  font-family: var(--pwa-font-head);
  font-size: .8125rem;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1rem;
  text-align: center;
  letter-spacing: .01em;
}

/* ── Update Banner ───────────────────────────────────────────*/
#pwa-update-banner {
  display: none;
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--pwa-z);
  width: calc(100% - 2rem);
  max-width: 440px;
  background: var(--pwa-hero-dark);
  border: 1px solid rgba(47,158,136,.3);
  border-radius: var(--pwa-radius-lg);
  box-shadow: var(--pwa-shadow-lg), 0 0 0 1px rgba(47,158,136,.12);
  padding: .875rem 1.25rem;
  font-family: var(--pwa-font-body);
  flex-direction: row;
  align-items: center;
  gap: .875rem;
  animation: pwaSlideDown .4s cubic-bezier(.34,1.56,.64,1);
}

/* Top accent line */
#pwa-update-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2.5px;
  background: linear-gradient(90deg, var(--pwa-accent), var(--pwa-accent-light), transparent);
  border-radius: var(--pwa-radius-lg) var(--pwa-radius-lg) 0 0;
}

#pwa-update-banner .upd-text {
  flex: 1;
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
}

#pwa-update-banner .upd-text strong {
  display: block;
  font-family: var(--pwa-font-head);
  font-weight: 700;
  font-size: .9375rem;
  margin-bottom: .15rem;
  color: var(--pwa-accent-light);
}

.pwa-btn-update {
  background: var(--pwa-accent);
  color: #fff;
  border: none;
  border-radius: var(--pwa-radius-md);
  padding: .5rem 1.1rem;
  font-family: var(--pwa-font-head);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--pwa-transition), transform var(--pwa-transition);
  flex-shrink: 0;
}
.pwa-btn-update:hover  { background: var(--pwa-accent-dark); }
.pwa-btn-update:active { transform: scale(.97); }

/* ── Android/Desktop Install Banner ─────────────────────────*/
#pwa-install-banner {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--pwa-z);
  width: calc(100% - 2rem);
  max-width: 480px;
  background: var(--pwa-surface);
  border: 1px solid var(--pwa-ash-200);
  border-radius: var(--pwa-radius-xl);
  box-shadow: var(--pwa-shadow-lg);
  padding: 1.125rem 1.25rem;
  font-family: var(--pwa-font-body);
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  animation: pwaSlideUp .4s cubic-bezier(.34,1.56,.64,1);
  /* Accent top stripe */
  overflow: hidden;
}

#pwa-install-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pwa-accent), var(--pwa-accent-light));
}

#pwa-install-banner .inst-icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--pwa-ash-200);
}

#pwa-install-banner .inst-text { flex: 1; min-width: 0; }

#pwa-install-banner .inst-text strong {
  display: block;
  font-family: var(--pwa-font-head);
  font-size: .9375rem;
  font-weight: 800;
  color: var(--pwa-ash-900);
  margin-bottom: .2rem;
}

#pwa-install-banner .inst-text span {
  display: block;
  font-size: .8125rem;
  color: var(--pwa-ash-600);
  line-height: 1.4;
}

#pwa-install-banner .inst-actions {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex-shrink: 0;
}

.pwa-btn-install {
  background: var(--pwa-accent);
  color: #fff;
  border: none;
  border-radius: var(--pwa-radius-md);
  padding: .52rem 1.15rem;
  font-family: var(--pwa-font-head);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(47,158,136,.35);
  transition: all var(--pwa-transition);
}
.pwa-btn-install:hover  { background: var(--pwa-accent-dark); box-shadow: 0 6px 20px rgba(47,158,136,.45); transform: translateY(-1px); }
.pwa-btn-install:active { transform: scale(.97); }

.pwa-btn-dismiss {
  background: transparent;
  color: var(--pwa-ash-600);
  border: 1px solid var(--pwa-ash-300);
  border-radius: var(--pwa-radius-md);
  padding: .45rem 1.15rem;
  font-family: var(--pwa-font-head);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--pwa-transition);
}
.pwa-btn-dismiss:hover { color: var(--pwa-ash-900); border-color: var(--pwa-ash-400); background: var(--pwa-ash-100); }

/* ── iOS Install Banner ──────────────────────────────────────*/
#pwa-ios-banner {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--pwa-z);
  width: calc(100% - 2rem);
  max-width: 480px;
  background: var(--pwa-surface);
  border: 1px solid var(--pwa-ash-200);
  border-radius: var(--pwa-radius-xl);
  box-shadow: var(--pwa-shadow-lg);
  padding: 1.25rem;
  font-family: var(--pwa-font-body);
  flex-direction: column;
  gap: 1rem;
  animation: pwaSlideUp .4s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}

/* Arrow pointing down to Share button */
#pwa-ios-banner::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px;
  background: var(--pwa-surface);
  border-right: 1px solid var(--pwa-ash-200);
  border-bottom: 1px solid var(--pwa-ash-200);
}

/* Accent top stripe */
#pwa-ios-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pwa-accent), var(--pwa-accent-light));
}

#pwa-ios-banner .ios-head {
  display: flex;
  align-items: center;
  gap: .875rem;
}

#pwa-ios-banner .ios-logo {
  width: 46px; height: 46px;
  border-radius: 11px;
  object-fit: contain;
  border: 1px solid var(--pwa-ash-200);
  flex-shrink: 0;
}

#pwa-ios-banner .ios-title { flex: 1; }
#pwa-ios-banner .ios-title strong {
  display: block;
  font-family: var(--pwa-font-head);
  font-size: .9375rem;
  font-weight: 800;
  color: var(--pwa-ash-900);
  margin-bottom: .15rem;
}
#pwa-ios-banner .ios-title small {
  color: var(--pwa-ash-600);
  font-size: .8125rem;
}

#pwa-ios-banner .ios-close {
  width: 28px; height: 28px;
  background: var(--pwa-ash-100);
  border: none;
  border-radius: 50%;
  color: var(--pwa-ash-600);
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--pwa-transition);
}
#pwa-ios-banner .ios-close:hover { background: var(--pwa-ash-200); color: var(--pwa-ash-900); }

#pwa-ios-banner .ios-divider {
  height: 1px;
  background: var(--pwa-ash-100);
  margin: 0 -.25rem;
}

#pwa-ios-banner .ios-steps {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

#pwa-ios-banner .ios-step {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

#pwa-ios-banner .ios-step-num {
  width: 24px; height: 24px;
  background: var(--pwa-accent-bg);
  color: var(--pwa-accent-dark);
  border-radius: 50%;
  font-family: var(--pwa-font-head);
  font-size: .75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}

#pwa-ios-banner .ios-step p {
  color: var(--pwa-ash-700);
  font-size: .8375rem;
  line-height: 1.5;
  margin: 0;
}

#pwa-ios-banner .ios-step p strong {
  color: var(--pwa-ash-900);
  font-weight: 700;
}

.ios-share-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--pwa-accent);
  color: #fff;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--pwa-font-head);
  vertical-align: middle;
  margin: 0 1px;
}

/* ── Standalone safe-area padding ────────────────────────────*/
.pwa-standalone body {
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

/* ── Animations ──────────────────────────────────────────────*/
@keyframes pwaSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
@keyframes pwaSlideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);     }
}

/* ── Mobile: full-width bottom sheet ────────────────────────*/
@media (max-width: 500px) {
  #pwa-install-banner,
  #pwa-ios-banner {
    bottom: 0;
    left: 0; right: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: var(--pwa-radius-xl) var(--pwa-radius-xl) 0 0;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    animation: pwaSheetUp .38s cubic-bezier(.34,1.4,.64,1);
  }

  #pwa-ios-banner::after { display: none; }

  @keyframes pwaSheetUp {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0);    }
  }
}