/*
 * ═══════════════════════════════════════════════════════
 * ABIA GREEN — SHUTTLE PLATFORM STYLES
 * File: css/shuttle.css
 * Page: shuttle.html
 * ═══════════════════════════════════════════════════════
 */

/* ── PAGE ACCENT: Deep Blue ──────────────────────────── */
:root {
  --accent:        #1A5C8B;
  --accent-deep:   #0F3D5C;
  --accent-glow:   rgba(26, 92, 139, 0.18);
  --shuttle-blue:  #3B8BEB;
}
body { padding-top: var(--top-offset); }

/* ── TELEMETRY STRIP ─────────────────────────────────── */
.telem-strip  { background: var(--ink); border-bottom: 1px solid rgba(59,139,235,.12); overflow: hidden; height: 32px; display: flex; align-items: center; }
.telem-inner  { display: flex; gap: 28px; align-items: center; animation: scroll-left 32s linear infinite; white-space: nowrap; padding-left: 20px; }
.t-item       { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: rgba(253,250,245,.4); }
.t-dot        { width: 6px; height: 6px; border-radius: 50%; }
.t-live       { background: var(--shuttle-blue); box-shadow: 0 0 5px var(--shuttle-blue); animation: pulse 1.8s ease-in-out infinite; }
.t-warn       { background: var(--amber); }
.t-val        { color: var(--shuttle-blue); font-weight: 700; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── ROUTE TABLE ─────────────────────────────────────── */
.route-table          { width: 100%; border-collapse: collapse; font-size: .81rem; margin-top: 36px; }
.route-table thead th { padding: 9px 13px; text-align: left; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(253,250,245,.3); border-bottom: 1px solid rgba(253,250,245,.08); }
.route-table tbody td { padding: 12px 13px; border-bottom: 1px solid rgba(253,250,245,.05); color: rgba(253,250,245,.6); vertical-align: middle; }
.route-table tbody tr:hover td { background: rgba(253,250,245,.03); color: rgba(253,250,245,.85); }
.r-live  { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; background: rgba(26,107,60,.18); color: #52C070; }
.r-plan  { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; background: rgba(232,148,26,.12); color: var(--amber); }
.r-dot   { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pulse 1.8s ease-in-out infinite; }
.fare    { font-family: var(--font-mono); font-size: .82rem; color: var(--amber); font-weight: 700; }

/* ── CONNECT CARD VISUAL ─────────────────────────────── */
.card-visual {
  background: linear-gradient(135deg, var(--deep) 0%, #0a3050 60%, #1A5C8B 100%);
  border-radius: 14px; padding: 28px 26px; position: relative; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.card-visual::before { content: ''; position: absolute; inset: 0; background-image: var(--uli-dark); opacity: .4; }
.cv-chip    { width: 38px; height: 28px; background: linear-gradient(135deg, var(--amber), var(--amber-2)); border-radius: 5px; margin-bottom: 28px; position: relative; z-index: 1; }
.cv-number  { font-family: var(--font-mono); font-size: .95rem; color: rgba(255,255,255,.7); letter-spacing: .18em; margin-bottom: 20px; position: relative; z-index: 1; }
.cv-name    { font-family: var(--font-serif); font-size: 1.1rem; color: var(--white); position: relative; z-index: 1; margin-bottom: 4px; }
.cv-label   { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); position: relative; z-index: 1; margin-bottom: 20px; }
.cv-footer  { display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 1; }
.cv-balance-lbl { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 3px; }
.cv-balance     { font-family: var(--font-serif); font-size: 1.6rem; color: var(--amber); line-height: 1; }
.cv-logo        { font-family: var(--font-serif); font-size: 1rem; color: rgba(255,255,255,.6); }
.cv-shine       { position: absolute; top: -30%; right: -20%; width: 60%; height: 160%; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%); transform: rotate(-15deg); }

/* ── PAYMENT STEPS ───────────────────────────────────── */
.pay-steps      { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.pay-step       { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: rgba(253,250,245,.03); border: 1px solid rgba(253,250,245,.07); border-radius: var(--radius); }
.pay-step-num   { width: 28px; height: 28px; border-radius: 50%; background: rgba(59,139,235,.2); border: 1px solid rgba(59,139,235,.3); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .72rem; color: var(--shuttle-blue); flex-shrink: 0; margin-top: 1px; }
.pay-step-title { font-family: var(--font-serif); font-size: .9rem; color: var(--white); margin-bottom: 3px; }
.pay-step-body  { font-size: .78rem; color: rgba(253,250,245,.42); line-height: 1.65; }

/* ── ADMIN DASHBOARD PREVIEW ─────────────────────────── */
.admin-preview     { background: var(--ink); border: 1px solid rgba(253,250,245,.08); border-radius: var(--radius); overflow: hidden; }
.ap-titlebar       { background: rgba(253,250,245,.04); padding: 10px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(253,250,245,.07); }
.ap-dots           { display: flex; gap: 5px; }
.ap-dots span      { width: 9px; height: 9px; border-radius: 50%; }
.ap-title          { font-family: var(--font-mono); font-size: 9.5px; color: rgba(253,250,245,.3); letter-spacing: .08em; }
.ap-body           { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: rgba(253,250,245,.06); }
.ap-metric         { background: var(--ink); padding: 18px 16px; }
.ap-metric-lbl     { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(253,250,245,.28); margin-bottom: 6px; }
.ap-metric-val     { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1; }
.ap-metric-sub     { font-size: .7rem; color: rgba(253,250,245,.3); margin-top: 4px; }
.ap-metric-bar     { height: 3px; background: rgba(253,250,245,.07); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.ap-metric-fill    { height: 100%; border-radius: 2px; }

/* ── CARBON COUNTER ──────────────────────────────────── */
.carbon-display { text-align: center; padding: 36px 24px; background: rgba(26,107,60,.08); border: 1px solid rgba(26,107,60,.2); border-radius: var(--radius); }
.carbon-val     { font-family: var(--font-serif); font-size: 3.5rem; color: var(--forest); line-height: 1; margin-bottom: 8px; }
.carbon-lbl     { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.carbon-note    { font-size: .78rem; color: var(--ash); margin-top: 10px; line-height: 1.65; max-width: 280px; margin-left: auto; margin-right: auto; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 680px) {
  .route-table thead       { display: none; }
  .route-table tbody td    { display: block; padding: 6px 10px; }
  .route-table tbody td:first-child { font-weight: 600; padding-top: 12px; color: rgba(253,250,245,.85); }
  .route-table tbody tr    { display: block; border: 1px solid rgba(253,250,245,.07); border-radius: var(--radius); margin-bottom: 10px; }
  .route-table tbody td    { border-bottom: none; }
  .ap-body { grid-template-columns: 1fr 1fr; }
}