/* ═══════════════════════════════════════════════════════════════
   Delhi Metro Route Finder v8.3.2 — Frontend Styles
   Mobile-first | 4 Layout Modes | Penalty Card | Dark Mode
   Layouts: standard | compact | map | card
   WCAG 2.1 AA Compliant | PageSpeed 98+ Optimized
═══════════════════════════════════════════════════════════════ */

/* ── Screen-reader only utility ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ── CSS Variables ── */
:root {
  --primary:       #c62828;
  --primary-dark:  #b71c1c;
  --primary-light: #ffcdd2;
  --secondary:     #0d47a1;
  --accent:        #e65100;
  --bg:            #f0f2f5;
  --card-bg:       #ffffff;
  --text-primary:  #111111;
  --text-secondary:#444444;
  --border-color:  #d0d7de;
  --gray-50:       #f8fafc;
  --gray-100:      #f1f5f9;
  --gray-200:      #e2e8f0;
  --gray-300:      #cbd5e1;
  --gray-400:      #6e7f95;
  --gray-500:      #445568;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --shadow:        0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.15);
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     20px;
  --font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --transition:    all .2s ease;
}
[data-theme="dark"] {
  --bg:#0f172a; --card-bg:#1e293b; --text-primary:#f1f5f9;
  --text-secondary:#b0bfcd; --border-color:#334155;
  --gray-50:#1e293b; --gray-100:#273548; --gray-200:#334155; --gray-300:#475569;
}
.dmp-app *,.dmp-app *::before,.dmp-app *::after{box-sizing:border-box;margin:0;padding:0}
.dmp-app{font-family:var(--font);background:var(--bg);color:var(--text-primary)}
.hidden{display:none!important}

/* ─── HEADER ─── */
.dmp-header{background:linear-gradient(135deg,#b71c1c 0%,#d32f2f 60%,#e53935 100%);color:#fff;border-radius:var(--radius-lg);padding:20px 20px 18px;margin-bottom:14px;position:relative;overflow:hidden}
.dmp-header-controls{display:flex;gap:6px;justify-content:flex-end;margin-bottom:10px;flex-wrap:wrap}
.dmp-ctrl-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:var(--radius-sm);padding:5px 10px;cursor:pointer;font-size:.82rem;font-weight:600;transition:var(--transition);min-width:36px;text-align:center}
.dmp-ctrl-btn:hover{background:rgba(255,255,255,.28)}
.dmp-header h1{font-size:clamp(1.1rem,4vw,1.55rem);font-weight:800;letter-spacing:-.3px;line-height:1.2;margin-bottom:4px}
.dmp-header-sub{font-size:.83rem;opacity:.88;margin-bottom:10px}
.dmp-verified-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:4px 12px;font-size:.75rem;font-weight:600}
.dmp-zoom-pill{padding:5px 9px;background:rgba(255,255,255,.12);border-radius:6px;font-size:.74rem;font-weight:700;color:#fff;min-width:42px;text-align:center}

/* ─── MAIN CARD ─── */
.dmp-main-card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}

/* ─── SEARCH ─── */
.dmp-search{padding:20px 18px 16px;border-bottom:1px solid var(--border-color)}
.dmp-form-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start;margin-bottom:14px}
.dmp-form-group label{display:block;font-size:.78rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.dmp-inp-container{position:relative}
.dmp-inp-row{display:flex;gap:4px}
.dmp-inp{width:100%;padding:11px 14px;border:2px solid var(--border-color);border-radius:var(--radius-sm);font-size:.92rem;font-family:var(--font);background:var(--card-bg);color:var(--text-primary);transition:var(--transition);min-width:0}
.dmp-inp:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(21,101,192,.12)}
.dmp-drop-btn{padding:0 12px;border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--gray-50);color:var(--text-secondary);cursor:pointer;font-size:.8rem;transition:var(--transition)}
.dmp-drop-btn:hover{background:var(--gray-100)}

/* Dropdown */
.dmp-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card-bg);border:1.5px solid var(--border-color);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.15);z-index:9999;max-height:300px;overflow-y:auto;display:none;scrollbar-width:thin}
.dmp-dropdown.open{display:block;animation:dmpFadeIn .15s ease}
/* Professional dropdown items */
.dmp-dd-item{display:flex;align-items:center;gap:11px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--gray-100);transition:background .1s;min-height:56px}
.dmp-dd-item:last-child{border-bottom:none}
.dmp-dd-item:hover,.dmp-dd-item:focus{background:var(--gray-50);outline:none}
.dmp-dd-item.dmp-dd-closed{opacity:.7}
.dmp-dd-item.dmp-dd-ic{background:linear-gradient(90deg,#fffbeb 0%,transparent 40%)}
.dmp-dd-item.dmp-dd-ic:hover{background:linear-gradient(90deg,#fef3c7 0%,var(--gray-50) 40%)}
/* Avatar circle */
.dmp-dd-avatar{width:36px;height:36px;min-width:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:0;box-shadow:0 2px 6px rgba(0,0,0,.2)}
/* Body */
.dmp-dd-body{flex:1;min-width:0}
.dmp-dd-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px}
.dmp-dd-name{font-size:.88rem;font-weight:700;color:var(--text-primary);line-height:1.2;letter-spacing:.2px}
.dmp-dd-hl{background:#fef08a;color:#92400e;border-radius:2px;padding:0 1px}
.dmp-dd-ic-badge{font-size:.6rem;font-weight:800;background:#f59e0b;color:#fff;padding:2px 5px;border-radius:4px;letter-spacing:.3px;flex-shrink:0}
.dmp-dd-closed-badge{font-size:.65rem;font-weight:700;color:#dc2626;background:#fee2e2;padding:2px 6px;border-radius:4px;flex-shrink:0}
/* Meta row */
.dmp-dd-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.dmp-dd-dots{display:flex;gap:3px;align-items:center}
.dmp-dd-ldot{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:3px;font-size:.6rem;font-weight:800;color:#fff;letter-spacing:.2px;min-width:20px}
.dmp-dd-fac{font-size:.72rem;color:var(--text-secondary);background:var(--gray-100);padding:1px 5px;border-radius:4px;letter-spacing:.2px}
.dmp-dd-num{font-size:.65rem;font-weight:700;color:var(--text-secondary);background:var(--gray-200);padding:1px 5px;border-radius:4px;margin-left:auto}
.dmp-dd-empty{padding:16px;text-align:center;color:var(--text-secondary);font-size:.85rem}
.dmp-ditem{padding:10px 14px;cursor:pointer;font-size:.88rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;gap:8px;transition:background .1s}
.dmp-ditem:hover,.dmp-ditem.highlighted{background:var(--gray-50)}
.dmp-ditem.closed-stn{color:#dc2626}
.dmp-ditem-line-dots{display:flex;gap:3px;flex-shrink:0}
.dmp-ditem-dot{width:8px;height:8px;border-radius:50%}

/* Swap */
.dmp-swap-wrap{display:flex;align-items:center;justify-content:center;padding-top:22px}
.dmp-swap-btn{width:38px;height:38px;border-radius:50%;border:2px solid var(--border-color);background:var(--card-bg);color:var(--secondary);cursor:pointer;font-size:1.1rem;font-weight:800;display:flex;align-items:center;justify-content:center;transition:var(--transition);box-shadow:var(--shadow-sm)}
.dmp-swap-btn:hover{background:var(--secondary);color:#fff;border-color:var(--secondary);transform:rotate(90deg)}

/* Pref buttons */
.dmp-pref-section{margin-bottom:14px}
.dmp-pref-section>label{display:block;font-size:.75rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.dmp-pref-btns{display:flex;gap:6px;flex-wrap:wrap}
.dmp-pref-btn{padding:7px 12px;border:2px solid var(--border-color);border-radius:20px;background:var(--card-bg);color:var(--text-secondary);cursor:pointer;font-size:.8rem;font-weight:600;transition:var(--transition);white-space:nowrap}
.dmp-pref-btn:hover{border-color:var(--secondary);color:var(--secondary)}
.dmp-pref-btn.active{background:var(--secondary);color:#fff;border-color:var(--secondary)}

/* Action row */
.dmp-action-row{display:flex;gap:8px;flex-wrap:wrap}
.dmp-btn{padding:10px 20px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:.88rem;font-weight:700;font-family:var(--font);transition:var(--transition);display:inline-flex;align-items:center;gap:6px}
.dmp-btn-primary{background:linear-gradient(135deg,#b71c1c,#d32f2f);color:#fff;box-shadow:0 2px 8px rgba(211,47,47,.3);flex:1;justify-content:center}
.dmp-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(211,47,47,.4)}
.dmp-btn-secondary{background:var(--gray-100);color:var(--text-secondary);border:1px solid var(--border-color)}
.dmp-btn-secondary:hover{background:var(--gray-200)}

#dmpClosedWarning{display:none;margin-top:10px;padding:11px 16px;background:#fef2f2;border:1.5px solid #fca5a5;border-radius:10px;color:#dc2626;font-weight:600;font-size:.88rem;text-align:center}

/* ─── LAYOUT SWITCHER BAR ─── */
.dmp-layout-bar{display:flex;align-items:center;gap:5px;padding:8px 16px;background:var(--gray-50);border-bottom:1px solid var(--border-color);flex-wrap:wrap}
.dmp-layout-label{font-size:.72rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;margin-right:2px;white-space:nowrap}
.dmp-layout-btn{padding:5px 11px;border:1.5px solid var(--border-color);border-radius:20px;background:var(--card-bg);color:var(--text-secondary);cursor:pointer;font-size:.76rem;font-weight:600;font-family:var(--font);transition:var(--transition);white-space:nowrap}
.dmp-layout-btn:hover{border-color:var(--secondary);color:var(--secondary)}
.dmp-layout-btn.active{background:var(--secondary);color:#fff;border-color:var(--secondary)}

/* ─── LOADING ─── */
.dmp-loading{padding:40px 20px;text-align:center}
.dmp-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:dmpSpin 1s linear infinite;margin:0 auto 16px}
@keyframes dmpSpin{to{transform:rotate(360deg)}}
@keyframes dmpFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes dmpSlideUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* ─── EMPTY ─── */
.dmp-empty{padding:50px 24px;text-align:center;color:var(--text-secondary)}
.dmp-empty .icon{font-size:3rem;margin-bottom:12px;display:block}
.dmp-empty h3{font-size:1.1rem;color:var(--text-primary);margin-bottom:8px}
.dmp-empty p{font-size:.88rem;max-width:300px;margin:0 auto}
.dmp-quick-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1.5px solid var(--primary,#2563eb);color:var(--primary,#2563eb);background:transparent;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap}
.dmp-quick-chip:hover{background:var(--primary,#2563eb);color:#fff;transform:translateY(-1px);box-shadow:0 3px 10px rgba(37,99,235,.25)}
.dmp-quick-chip:active{transform:translateY(0)}
@media(max-width:500px){.dmp-quick-chip{font-size:.72rem;padding:5px 9px}}

/* ─── SUMMARY BAR ─── */
.dmp-summary{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border-color);animation:dmpFadeIn .3s ease}
.dmp-sum-item{text-align:center;padding:12px 8px;border-right:1px solid var(--border-color)}
.dmp-sum-item:last-child{border-right:none}
.dmp-sum-val{font-size:1.3rem;font-weight:800;color:var(--primary);line-height:1}
.dmp-sum-lbl{font-size:.68rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;margin-top:3px;font-weight:600}

/* ─── FARE SECTION ─── */
.dmp-fare{padding:16px 16px 12px;border-bottom:1px solid var(--border-color);animation:dmpFadeIn .3s ease}
.dmp-fare h4{font-size:.88rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-weight:700}
.dmp-fare-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.dmp-fare-card{background:var(--gray-50);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);padding:11px 12px;text-align:center;transition:var(--transition)}
.dmp-fare-card:hover{border-color:var(--secondary);transform:translateY(-1px)}
.dmp-fare-card.recommended{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#93c5fd}
.dmp-fare-type{font-size:.72rem;color:var(--text-secondary);font-weight:600;margin-bottom:5px;line-height:1.3}
.dmp-fare-amount{font-size:1.4rem;font-weight:800;color:var(--text-primary);line-height:1}
.dmp-fare-save{font-size:.68rem;color:#16a34a;font-weight:600;margin-top:3px}
.dmp-penalty-card{background:linear-gradient(135deg,#fff7ed,#fed7aa)!important;border-color:#fb923c!important}
.dmp-penalty-card:hover{border-color:#ea580c!important}
.penalty-amt{color:#c2410c!important}
.penalty-note{color:#9a3412!important}
.dmp-fare-note{margin-top:10px;font-size:.73rem;color:var(--text-secondary);background:var(--gray-50);border-radius:6px;padding:7px 11px;line-height:1.5}

/* ─── TIMING ─── */
.dmp-timing{padding:14px 16px;border-bottom:1px solid var(--border-color);animation:dmpFadeIn .3s ease}
.dmp-timing h4{font-size:.88rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-weight:700}
.dmp-timing-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dmp-timing-card{display:flex;align-items:center;gap:10px;background:var(--gray-50);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:11px 14px}
.dmp-timing-icon{font-size:1.4rem}
.dmp-timing-info h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);margin-bottom:2px;font-weight:700}
.dmp-timing-val{font-size:1.05rem;font-weight:800;color:var(--text-primary)}

/* ─── SEG BAR ─── */
.dmp-seg-bar{display:flex;align-items:center;gap:5px;padding:11px 16px;background:var(--gray-50);border-bottom:1px solid var(--border-color);flex-wrap:wrap;animation:dmpFadeIn .3s ease}
.dmp-seg-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:20px;font-size:.76rem;font-weight:700;transition:var(--transition);box-shadow:var(--shadow-sm)}
.dmp-seg-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.dmp-seg-num{width:18px;height:18px;background:rgba(255,255,255,.28);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800}
.dmp-seg-abbr{font-size:.78rem}
.dmp-seg-count{font-size:.65rem;opacity:.85}
.dmp-seg-arrow{color:var(--text-secondary);font-size:.9rem}

/* ─── ROUTE BOX / CARDS ─── */
.dmp-route-box{padding:16px;border-bottom:1px solid var(--border-color);animation:dmpFadeIn .3s ease}
.dmp-route-box h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:12px;font-weight:700}
.dmp-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.dmp-station-card{border-radius:var(--radius-sm);padding:14px;border:1.5px solid var(--border-color);background:var(--card-bg);transition:var(--transition)}
.dmp-station-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.dmp-station-card.green{border-top:3px solid #16a34a}
.dmp-station-card.red{border-top:3px solid #dc2626}
.dmp-station-card.blue{border-top:3px solid var(--secondary)}
.dmp-sc-header{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);margin-bottom:5px;display:flex;align-items:center;gap:5px}
.dmp-sc-name{font-size:1rem;font-weight:800;color:var(--text-primary);margin-bottom:8px;line-height:1.3;cursor:pointer}
.dmp-sc-name:hover{color:var(--secondary)}
.dmp-platform-display{display:inline-block;padding:5px 14px;border-radius:6px;font-size:1rem;font-weight:800;margin-bottom:6px}
/* v2.2.3 FIX: Fixed professional color - was using line color (inline style) causing
   yellows/greens to be invisible. Now always readable on any site background. */
.dmp-platform-badge{display:inline-block;padding:3px 9px;border-radius:6px;font-size:.8rem;font-weight:700;margin-left:4px;line-height:1.4;background:#1e3a8a14;color:#1e3a8a;border:1.5px solid #1e3a8a55}
.dmp-platform-display.green{background:#dcfce7;color:#166534}
.dmp-platform-display.red{background:#fee2e2;color:#991b1b}
.dmp-platform-display.blue{background:#dbeafe;color:#1e40af}
.dmp-line-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.68rem;font-weight:700;color:#fff;margin-bottom:6px}
.dmp-direction-text{font-size:.76rem;color:var(--text-secondary);margin-bottom:6px}
.dmp-towards-text{font-size:.76rem;color:var(--secondary);margin-bottom:4px;font-weight:600}
.dmp-verified-badge-sm{display:inline-flex;align-items:center;gap:4px;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);border-radius:12px;padding:2px 8px;font-size:.72rem;font-weight:600;color:#16a34a;margin-top:4px}
.dmp-platform-note{display:block;font-size:.74rem;color:#92400e;background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:3px 9px;margin-top:5px;line-height:1.4;font-weight:500}
.dmp-cc-note{font-size:.8rem;padding:4px 0;color:var(--text-secondary)}
.dmp-fac-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.dmp-fac-icon{width:26px;height:26px;background:var(--gray-100);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.85rem;cursor:help;transition:var(--transition)}
.dmp-fac-icon:hover{background:var(--gray-200)}
.dmp-ic-flow{border-radius:var(--radius-sm);padding:14px;border:1.5px solid #fbbf24;background:linear-gradient(135deg,#fffbeb,#fef3c7);display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;position:relative}
/* FIX v1.3.0: dmp-ic-detail — professional interchange card with header, flow, walk time */
.dmp-ic-detail{margin-top:10px;padding:0;background:var(--card-bg);border:1.5px solid #fbbf24;border-radius:var(--radius);overflow:hidden;font-size:.85rem;box-shadow:0 2px 8px rgba(245,158,11,.12)}.dmp-ic-detail-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(90deg,#fffbeb,#fef3c7);border-bottom:1px solid #fde047}.dmp-ic-title{flex:1;font-size:.84rem;font-weight:700;color:#78350f}.dmp-ic-detail-btn{margin:0!important;padding:3px 9px!important;font-size:.7rem!important;background:#fff8!important;border-color:#fbbf24!important;color:#78350f!important}.dmp-ic-detail-btn:hover{background:#f59e0b!important;color:#fff!important;border-color:#d97706!important}.dmp-ic-detail h5{font-size:.82rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;display:flex;align-items:center;gap:6px}.dmp-ic-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#f59e0b;color:#fff;border-radius:50%;font-size:.7rem;font-weight:800;flex-shrink:0}
.dmp-ic-detail .dmp-ic-flow{border:none;border-radius:0;margin:0;background:var(--card-bg)}
.dmp-ic-detail .dmp-ic-walk{padding:8px 14px;font-size:.8rem;color:#78350f;background:#fffbeb;border-top:1px dashed #fde047;margin:0}
.dmp-flow-arrow{display:flex;flex-direction:column;align-items:center;gap:3px}
.dmp-flow-arrow-icon{font-size:1.2rem}
.dmp-flow-walk-time{font-size:.68rem;font-weight:700;color:#92400e;background:#fef3c7;border-radius:4px;padding:2px 5px;white-space:nowrap}
.dmp-ic-verified{font-size:.65rem;padding:1px 5px;border-radius:3px;background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;margin-top:2px;display:inline-block}
.dmp-ic-badge-lbl{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#f59e0b;color:#fff;font-size:.65rem;font-weight:800;padding:2px 9px;border-radius:10px;text-transform:uppercase;white-space:nowrap}
.dmp-flow-box{background:var(--card-bg);border-radius:var(--radius-sm);padding:10px 12px;text-align:center;border:1px solid var(--border-color)}
.dmp-flow-platform{font-size:1.1rem;font-weight:800;margin-bottom:3px}
.dmp-flow-label{font-size:.68rem;color:var(--text-secondary);font-weight:600;margin-bottom:3px;text-transform:uppercase}
.dmp-flow-dir{font-size:.72rem;color:var(--text-secondary)}
.dmp-ic-arrow{text-align:center;font-size:1.3rem;color:#f59e0b}
.dmp-walk-info{margin-top:8px;font-size:.75rem;color:var(--text-secondary);text-align:center}

/* ─── TIMELINE ─── */
.dmp-timeline-section{padding:16px;border-bottom:1px solid var(--border-color);animation:dmpFadeIn .3s ease}
.dmp-timeline-section h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:12px;font-weight:700}
.dmp-timeline{position:relative;padding-left:36px}
.dmp-timeline::before{content:'';position:absolute;left:16px;top:14px;bottom:14px;width:2px;background:linear-gradient(to bottom,#16a34a,var(--border-color) 20%,var(--border-color) 80%,#dc2626)}
.dmp-titem{position:relative;background:var(--gray-50);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);padding:11px 12px 11px 16px;margin-bottom:8px;transition:var(--transition)}
.dmp-titem:hover{box-shadow:var(--shadow-sm)}
/* FIX v1.3.0: dmp-titem-num — base uses inline line-color from JS (background+border), font=black */
.dmp-titem-num{position:absolute;left:-34px;top:50%;transform:translateY(-50%);width:22px;height:22px;background:var(--card-bg);border:2px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;color:#111}
/* Named type overrides — !important so they beat inline style from JS */
.dmp-titem.tstart .dmp-titem-num,.dmp-titem.t-start .dmp-titem-num{border-color:#16a34a!important;color:#16a34a!important;background:#f0fdf4!important}
.dmp-titem.tend .dmp-titem-num,.dmp-titem.t-end .dmp-titem-num{border-color:#dc2626!important;color:#dc2626!important;background:#fef2f2!important}
.dmp-titem.tic{background:#fffbeb;border-color:#fcd34d}
.dmp-titem.tic .dmp-titem-num,.dmp-titem.t-ic .dmp-titem-num{border-color:#f59e0b!important;color:#92400e!important;background:#fffbeb!important}
/* BUG FIX v1.2.7: t-start/t-end/t-ic class aliases (JS uses hyphens) */
.dmp-titem.t-ic{background:#fffbeb;border-color:#fcd34d}

/* BUG FIX v1.2.7: Missing CSS for timeline sub-elements used in renderTimeline() */
.dmp-tstn-name{font-size:.95rem;font-weight:700;color:var(--text-primary);margin-bottom:5px;line-height:1.3}
.dmp-tmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.dmp-tdir{font-size:.76rem;color:var(--text-secondary);margin-bottom:3px}
/* Branch Line Alert — auto-injected + fully customizable via Custom Content */
.dmp-branch-alert{background:linear-gradient(135deg,#fef9c3,#fef3c7);border:1.5px solid #fbbf24;border-radius:10px;padding:10px 14px;margin:6px 0;font-size:.8rem;color:#78350f;overflow:hidden}
.dmp-branch-alert-header{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-weight:700;font-size:.82rem}
.dmp-branch-alert-icon{font-size:1rem;flex-shrink:0}
.dmp-branch-alert-title{flex:1;font-weight:700;color:#92400e}
.dmp-branch-badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:.7rem;font-weight:700;vertical-align:middle;flex-shrink:0}
.dmp-branch-alert-body{margin-bottom:6px;line-height:1.6}
.dmp-branch-alert-msg{display:block;font-weight:600;color:#78350f;font-size:.82rem}
.dmp-branch-alert-en{display:block;font-size:.74rem;color:#92400e;opacity:.8}
.dmp-branch-alert-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.dmp-branch-meta-item{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;padding:2px 8px;border-radius:20px;background:#fff;border:1px solid #fde68a;color:#78350f;font-weight:500}
.dmp-branch-plat{font-weight:700}
.dmp-branch-alert-custom-slot:empty{display:none}
.dmp-branch-alert-custom-slot:not(:empty){margin-top:8px;padding-top:8px;border-top:1px dashed #fde68a}
[data-theme="dark"] .dmp-branch-alert{background:linear-gradient(135deg,#451a03,#713f12);border-color:#d97706;color:#fde68a}
[data-theme="dark"] .dmp-branch-alert-title{color:#fde68a}
[data-theme="dark"] .dmp-branch-alert-msg{color:#fde68a}
[data-theme="dark"] .dmp-branch-alert-en{color:#fbbf24}
[data-theme="dark"] .dmp-branch-meta-item{background:#1c0f00;border-color:#92400e;color:#fde68a}
.dmp-ttowards{font-size:.76rem;margin-bottom:6px}
.dmp-ttowards-dir{color:var(--secondary);font-weight:600;margin-bottom:4px}
.dmp-ttowards-info{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.dmp-tt-badge{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;padding:2px 7px;border-radius:20px;font-weight:600;white-space:nowrap}
.dmp-tt-start{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}
.dmp-tt-dest{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.dmp-tt-next{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.dmp-tt-arrived{background:#f0fdf4;color:#15803d;border:1px solid #86efac;font-weight:700}
.dmp-tt-from{background:#f5f3ff;color:#5b21b6;border:1px solid #ddd6fe}
.dmp-direct-banner{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1.5px solid #86efac;border-radius:10px;padding:14px 18px;margin-bottom:14px;font-weight:600;color:#166534}
.dmp-direct-banner .icon{font-size:1.6rem}
.dmp-direct-banner .text{font-size:.92rem}
.dmp-titem-top{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.dmp-tname{font-size:.95rem;font-weight:700;color:var(--text-primary);cursor:pointer;text-decoration:none}
.dmp-tname:hover{color:var(--secondary)}
.dmp-tplat{background:#e0e7ff;color:#3730a3;padding:2px 8px;border-radius:5px;font-size:.72rem;font-weight:700;white-space:nowrap}
.dmp-ttype{background:var(--gray-200);color:var(--text-secondary);padding:2px 7px;border-radius:5px;font-size:.7rem;font-weight:600}
.dmp-tic-badge{background:#f59e0b;color:#fff;padding:2px 7px;border-radius:5px;font-size:.7rem;font-weight:700}
.dmp-tend-badge{background:#dc2626;color:#fff;padding:2px 7px;border-radius:5px;font-size:.7rem;font-weight:700}
.dmp-tinfo{font-size:.77rem;color:var(--text-secondary);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dmp-tline{display:inline-flex;align-items:center;gap:4px}
.dmp-tline-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dmp-tfacs{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.dmp-tfac{font-size:.72rem;background:var(--gray-100);border-radius:4px;padding:2px 6px;color:var(--text-secondary)}

/* ─── SERVICES ─── */
.dmp-services{padding:16px;animation:dmpFadeIn .3s ease}
.dmp-services h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:4px;font-weight:700}
.dmp-services-sub{font-size:.82rem;color:var(--text-secondary);margin-bottom:12px}
.dmp-services-tabs{display:flex;gap:5px;margin-bottom:12px;flex-wrap:wrap;border-bottom:2px solid var(--border-color);padding-bottom:8px}
.dmp-svc-tab{padding:6px 12px;border:none;background:none;cursor:pointer;font-size:.78rem;font-weight:600;color:var(--text-secondary);border-bottom:3px solid transparent;margin-bottom:-10px;font-family:var(--font);white-space:nowrap;transition:var(--transition)}
.dmp-svc-tab.active,.dmp-svc-tab:hover{color:var(--secondary);border-bottom-color:var(--secondary)}
.dmp-svc-panel{display:none}
.dmp-svc-panel.active{display:block}
.dmp-svc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.dmp-svc-card{background:var(--card-bg);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);padding:14px;display:flex;gap:12px;transition:var(--transition)}
.dmp-svc-card:hover{box-shadow:var(--shadow-sm)}
.dmp-svc-card.highlight{border-color:#93c5fd;background:#f8fbff}
.dmp-svc-logo{font-size:2rem;flex-shrink:0;line-height:1}
.dmp-svc-info h4{font-size:.88rem;font-weight:700;margin-bottom:3px}
.dmp-svc-info p{font-size:.77rem;color:var(--text-secondary);margin-bottom:7px;line-height:1.4}
.dmp-svc-badge{display:inline-block;font-size:.7rem;background:var(--gray-100);border-radius:4px;padding:2px 7px;color:var(--text-secondary);font-weight:600;margin-bottom:7px}
.dmp-svc-badge.green{background:#dcfce7;color:#166534}
.dmp-svc-badge.blue{background:#dbeafe;color:#1e40af}
.dmp-svc-btns{display:flex;flex-wrap:wrap;gap:5px}
.dmp-svc-btn{display:inline-block;padding:5px 12px;border-radius:6px;font-size:.75rem;font-weight:700;text-decoration:none;transition:var(--transition);color:#fff}
.dmp-svc-btn.rapido{background:#f97316}.dmp-svc-btn.ola{background:#06b6d4}.dmp-svc-btn.uber{background:#1e293b}.dmp-svc-btn.dtc{background:#dc2626}.dmp-svc-btn.yulu{background:#16a34a}.dmp-svc-btn.indrive{background:#7c3aed}.dmp-svc-btn.google{background:#4285f4}
.dmp-svc-btn:hover{opacity:.85;transform:translateY(-1px)}
.dmp-tips-box{margin-top:14px;background:var(--gray-50);border-radius:var(--radius-sm);border:1px solid var(--border-color);padding:14px}
.dmp-tips-box h4{font-size:.85rem;font-weight:700;margin-bottom:10px}
.dmp-tips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.dmp-tip{display:flex;gap:10px;font-size:.78rem}
.dmp-tip-icon{font-size:1.3rem;flex-shrink:0;line-height:1.2}
.dmp-tip strong{display:block;font-size:.82rem;margin-bottom:2px}
.dmp-tip p{color:var(--text-secondary);line-height:1.4}

/* ─── MODALS ─── */
.dmp-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99999;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.dmp-modal-bg.open{display:flex}
.dmp-modal{background:var(--card-bg);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);animation:dmpFadeIn .25s ease}
.dmp-modal h3{font-size:1.1rem;margin-bottom:12px}
.dmp-share-preview{background:var(--gray-50);border-radius:var(--radius-sm);padding:12px;font-size:.82rem;color:var(--text-secondary);margin-bottom:14px;line-height:1.6;border:1px solid var(--border-color)}
.dmp-share-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.dmp-share-btn{padding:10px 14px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:.83rem;font-weight:700;font-family:var(--font);color:#fff;transition:var(--transition)}
.dmp-share-btn:hover{transform:translateY(-1px);opacity:.9}
.dmp-wa{background:#25D366}.dmp-tg{background:#0088cc}.dmp-cp{background:#6366f1}.dmp-tw{background:#1DA1F2}
.dmp-modal-close{width:100%;padding:8px;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);background:none;cursor:pointer;font-family:var(--font);color:var(--text-secondary);font-size:.85rem}

#dmpStnModal{display:none;position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);align-items:center;justify-content:center;padding:16px}
#dmpStnModal.open{display:flex}
.dmp-stn-modal-inner{background:var(--card-bg);border-radius:var(--radius-lg);width:100%;max-width:640px;max-height:88vh;overflow-y:auto;animation:dmpFadeIn .25s ease;padding-bottom:env(safe-area-inset-bottom,16px)}
.dmp-stn-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--border-color);position:sticky;top:0;background:var(--card-bg);z-index:1}
.dmp-stn-modal-header span{font-weight:700;font-size:1rem}
#dmpStnModalClose{width:32px;height:32px;border:none;background:var(--gray-100);border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--transition);color:var(--text-primary)}
#dmpStnModalClose:hover{background:var(--gray-200)}
#dmpStnModalBody{padding:16px 18px 20px}

/* ─── TOAST ─── */
.dmp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#1e293b;color:#fff;padding:10px 20px;border-radius:20px;font-size:.83rem;font-weight:600;z-index:999999;opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;box-shadow:var(--shadow-lg);pointer-events:none}
.dmp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.dmp-toast.error{background:#dc2626}

/* ─── CUSTOM CONTENT ─── */
.dmp-custom-content-wrap{padding:12px 16px}
.dmp-cc-before{border-bottom:1px solid var(--border-color)}
.dmp-cc-after{border-top:1px solid var(--border-color)}

/* ══════════════════════════════════════════════
   LAYOUT MODES — CSS classes on #dmpApp
══════════════════════════════════════════════ */
/* COMPACT: timeline + seg bar focus, hide cards+timing */
.layout-compact .dmp-timing{display:none!important}
.layout-compact .dmp-route-box{display:none!important}
.layout-compact .dmp-fare-grid{grid-template-columns:repeat(3,1fr)}
.layout-compact .dmp-fare-card:not(.dmp-penalty-card):nth-child(n+5){display:none}
.layout-compact .dmp-summary{grid-template-columns:repeat(6,1fr)}

/* MAP/TIMELINE: cards hidden, timeline enlarged */
.layout-map .dmp-route-box{display:none!important}
.layout-map .dmp-timeline-section{border:2px solid var(--secondary);border-radius:var(--radius);margin:8px;padding:16px}
.layout-map .dmp-titem{background:var(--card-bg);box-shadow:var(--shadow-sm)}

/* CARD: cards only, timeline + timing hidden */
.layout-card .dmp-timeline-section{display:none!important}
.layout-card .dmp-timing{display:none!important}
.layout-card .dmp-cards-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* Mobile layout adjustments — keep usable on small screens */
@media(max-width:480px){
  .layout-compact .dmp-summary{grid-template-columns:repeat(3,1fr)} /* 3 cols not 6 on mobile */
  .layout-compact .dmp-fare-grid{grid-template-columns:repeat(2,1fr)} /* 2 cols not 3 */
  .layout-map .dmp-timeline-section{margin:4px;padding:12px}
  .layout-card .dmp-cards-grid{grid-template-columns:1fr} /* 1 col cards on mobile */
  .layout-map .dmp-seg-bar,.layout-compact .dmp-seg-bar{overflow-x:auto;flex-wrap:nowrap}
}

/* ══════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════ */
@media print{
  .dmp-header-controls,.dmp-action-row,.dmp-pref-section,.dmp-layout-bar,.dmp-services,.dmp-modal-bg,#dmpStnModal,.dmp-toast,#dmpClosedWarning{display:none!important}
  .dmp-main-card{box-shadow:none;border:1px solid #ddd}
  .dmp-titem{break-inside:avoid}
  .dmp-wrapper{padding:0}
}

/* ══════════════════════════════════════════════
   TABLET 768px
══════════════════════════════════════════════ */
@media(max-width:768px){
  .dmp-wrapper{padding:8px 10px 70px}
  .dmp-header{padding:16px 16px 14px;border-radius:16px}
  .dmp-header h1{font-size:1.2rem}
  .dmp-form-grid{grid-template-columns:1fr;gap:8px}
  .dmp-swap-wrap{display:none}
  .dmp-summary{grid-template-columns:repeat(3,1fr)}
  .dmp-sum-val{font-size:1.15rem}
  .dmp-sum-lbl{font-size:.62rem}
  .dmp-fare-grid{grid-template-columns:repeat(2,1fr);gap:7px}
  .dmp-fare-amount{font-size:1.2rem}
  .dmp-timing-grid{grid-template-columns:1fr 1fr;gap:6px}
  .dmp-cards-grid{grid-template-columns:1fr}
  .dmp-svc-cards{grid-template-columns:1fr}
  .dmp-svc-tab{font-size:.72rem;padding:5px 9px}
  .dmp-layout-bar{padding:6px 12px;gap:4px}
  .dmp-layout-btn{padding:4px 8px;font-size:.7rem}
}

/* ══════════════════════════════════════════════
   MOBILE 480px — Full Mobile Optimized
══════════════════════════════════════════════ */
@media(max-width:480px){
  /* Core wrapper — extra bottom padding for mobile nav bars */
  .dmp-wrapper{padding:6px 8px 90px}

  /* Header - compact but READABLE (BUG FIX v9.1: was too small) */
  .dmp-header{padding:14px 12px 12px;border-radius:14px;margin-bottom:10px}
  .dmp-header h1{font-size:1.1rem;line-height:1.3}
  .dmp-header-sub{display:none}
  .dmp-verified-badge{font-size:.68rem;padding:3px 9px}
  .dmp-header-controls{gap:4px;margin-bottom:8px}
  .dmp-ctrl-btn{padding:5px 8px;font-size:.74rem;min-width:32px;min-height:34px;touch-action:manipulation}
  .dmp-zoom-pill{font-size:.72rem;min-width:38px;padding:5px 8px}

  /* Search form — bigger touch targets */
  .dmp-search{padding:12px 12px 10px}
  .dmp-form-group label{font-size:.78rem;margin-bottom:5px;font-weight:600}
  .dmp-inp{padding:11px 13px;font-size:.96rem;border-radius:9px;min-height:44px}
  .dmp-drop-btn{padding:0 11px;font-size:.78rem;min-width:38px}
  .dmp-pref-btns{gap:5px}
  .dmp-pref-btn{padding:7px 11px;font-size:.76rem;border-radius:18px;min-height:34px;touch-action:manipulation}

  /* Action row - full-width find button */
  .dmp-action-row{gap:6px;flex-wrap:nowrap}
  .dmp-btn-primary{font-size:.92rem;padding:12px 16px;flex:1 1 100%;order:-1;min-height:46px;touch-action:manipulation}
  .dmp-btn-secondary{font-size:.8rem;padding:9px 12px;flex:1;min-height:42px;touch-action:manipulation}

  /* Layout bar — scrollable strip */
  .dmp-layout-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding:6px 10px;gap:6px;scroll-snap-type:x mandatory}
  .dmp-layout-btn{flex-shrink:0;padding:6px 13px;font-size:.75rem;scroll-snap-align:start;border-radius:16px;touch-action:manipulation;min-height:34px}
  .dmp-layout-label{display:none}

  /* Summary bar — 3 columns, READABLE (increased sizes) */
  .dmp-summary{grid-template-columns:repeat(3,1fr)}
  .dmp-sum-item{padding:10px 5px}
  .dmp-sum-val{font-size:1.1rem;font-weight:700}
  .dmp-sum-lbl{font-size:.6rem;margin-top:2px}

  /* Fare section — 2 columns, touch-friendly, BIGGER text */
  .dmp-fare{padding:12px 12px 10px}
  .dmp-fare-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .dmp-fare-card{padding:11px 10px;border-radius:9px;min-height:74px}
  .dmp-fare-amount{font-size:1.2rem;font-weight:700}
  .dmp-fare-type{font-size:.7rem}
  .dmp-fare-save{font-size:.65rem}
  .dmp-fare-note{font-size:.74rem;padding:8px 10px;line-height:1.55}

  /* Timing — side by side */
  .dmp-timing{padding:12px}
  .dmp-timing-grid{grid-template-columns:1fr 1fr;gap:7px}
  .dmp-timing-card{padding:11px 10px;gap:8px}
  .dmp-timing-icon{font-size:1.3rem}
  .dmp-timing-info h5{font-size:.7rem}
  .dmp-timing-val{font-size:1rem}

  /* Seg bar */
  .dmp-seg-bar{padding:9px 12px;gap:4px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .dmp-seg-chip{padding:6px 10px;font-size:.74rem;flex-shrink:0}
  .dmp-seg-num{width:17px;height:17px;font-size:.6rem}

  /* Route cards — single column, BIGGER station names */
  .dmp-route-box{padding:12px}
  .dmp-cards-grid{grid-template-columns:1fr;gap:9px}
  .dmp-station-card{padding:13px}
  .dmp-sc-name{font-size:.98rem;font-weight:700;line-height:1.3}
  .dmp-platform-display{font-size:.94rem;padding:4px 12px}
  .dmp-fac-icon{width:30px;height:30px;font-size:.92rem;touch-action:manipulation}

  /* Interchange flow — stack vertically */
  .dmp-ic-flow{grid-template-columns:1fr;gap:7px}
  .dmp-ic-arrow{transform:rotate(90deg);font-size:1.15rem}
  .dmp-ic-badge-lbl{font-size:.65rem}

  /* Timeline — BIGGER text for readability */
  .dmp-timeline-section{padding:12px}
  .dmp-timeline{padding-left:32px}
  .dmp-timeline::before{left:14px}
  .dmp-titem{padding:11px 10px 11px 13px;margin-bottom:8px;border-radius:9px}
  .dmp-titem-num{left:-30px;width:22px;height:22px;font-size:.65rem}
  .dmp-tname{font-size:.94rem;font-weight:600}
  .dmp-tinfo{font-size:.75rem;gap:5px}
  .dmp-tplat{font-size:.7rem;padding:2px 7px}
  .dmp-ttype{font-size:.7rem}

  /* Services section */
  .dmp-services{padding:12px}
  .dmp-services-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;gap:4px}
  .dmp-svc-tab{white-space:nowrap;flex-shrink:0;font-size:.72rem;padding:7px 11px;touch-action:manipulation;min-height:36px}
  .dmp-svc-cards{grid-template-columns:1fr}
  .dmp-svc-card{padding:13px;border-radius:9px}
  .dmp-svc-logo{font-size:1.65rem}
  .dmp-svc-info h4{font-size:.86rem}
  .dmp-svc-info p{font-size:.75rem}
  .dmp-svc-btn{padding:7px 13px;font-size:.77rem;touch-action:manipulation;min-height:36px}
  .dmp-tips-grid{grid-template-columns:1fr;gap:9px}

  /* Station modal — centered */
  .dmp-stn-modal-inner{max-height:90vh;border-radius:var(--radius-lg)}

  /* Toast — above bottom nav */
  .dmp-toast{bottom:75px;font-size:.82rem;padding:9px 16px}

  /* Dropdown — full-width on mobile, BIGGER tap targets */
  .dmp-dropdown{max-height:210px}
  .dmp-ditem{padding:12px 13px;font-size:.9rem;min-height:44px;line-height:1.35}
}

/* ══════════════════════════════════════════════
   EXTRA SMALL 360px — Very small phones
══════════════════════════════════════════════ */
@media(max-width:360px){
  .dmp-header h1{font-size:.9rem}
  .dmp-fare-grid{grid-template-columns:repeat(2,1fr);gap:5px}
  .dmp-fare-card{padding:8px;min-height:60px}
  .dmp-fare-amount{font-size:1rem}
  .dmp-pref-btn{padding:5px 8px;font-size:.68rem}
  .dmp-timing-card{padding:8px}
  .dmp-timing-val{font-size:.88rem}
}

@supports(padding-bottom:env(safe-area-inset-bottom)){
  .dmp-toast{bottom:calc(24px + env(safe-area-inset-bottom))}
  .dmp-wrapper{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* ══════════════════════════════════════════
   SEO PAGE STYLES
══════════════════════════════════════════ */
.dmp-seo-page{font-family:var(--font)}
.dmp-seo-wrap{max-width:920px;margin:0 auto;padding:20px 16px}
.dmp-breadcrumb{font-size:.8rem;color:#94a3b8;margin-bottom:16px}
.dmp-breadcrumb a{color:#2563eb;text-decoration:none}
.dmp-breadcrumb a:hover{text-decoration:underline}
.dmp-alert{padding:12px 16px;border-radius:8px;margin-bottom:14px}
.dmp-alert-warning{background:#fef3c7;border:1px solid #fcd34d;color:#92400e}
.dmp-alert-danger{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b}
.dmp-stn-header{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;padding:18px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0}
.dmp-stn-header.dmp-closed{background:#fef2f2;border-color:#fca5a5}
.dmp-stn-icon{font-size:2.3rem;line-height:1}
.dmp-stn-header h1{font-size:1.4rem;margin:0 0 8px}
.dmp-stn-lines{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.dmp-line-pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.76rem;font-weight:700;text-decoration:none}
.dmp-stn-meta-row{font-size:.8rem;color:#64748b;display:flex;gap:14px;margin-top:6px;flex-wrap:wrap}
.dmp-closed-badge{display:inline-block;background:#dc2626;color:#fff;padding:2px 9px;border-radius:5px;font-size:.78rem;font-weight:700;margin-bottom:7px}
.dmp-seo-section{margin-bottom:26px}
.dmp-seo-section h2{font-size:1.05rem;color:#1e293b;border-bottom:2px solid #e2e8f0;padding-bottom:7px;margin-bottom:12px}
.dmp-plat-card{background:#f8fafc;border-radius:8px;padding:12px;margin-bottom:9px;border:1px solid #e2e8f0}
.dmp-plat-line{font-weight:700;font-size:.86rem;color:#334155;margin-bottom:7px}
.dmp-plat-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #f1f5f9}
.dmp-plat-row:last-child{border-bottom:none}
.dmp-plat-no{background:#1e293b;color:#fff;padding:3px 9px;border-radius:5px;font-size:.8rem;font-weight:700;white-space:nowrap}
.dmp-plat-dir{font-size:.83rem;color:#475569;flex:1}
.dmp-verified{background:#dcfce7;color:#166534;padding:2px 6px;border-radius:4px;font-size:.7rem;font-weight:700}
.dmp-line-info-card{background:#f8fafc;padding:12px;border-radius:8px;margin-bottom:9px;border:1px solid #e2e8f0}
.dmp-fac-grid-seo{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:7px;margin-bottom:10px}
.dmp-fac-item-seo{padding:9px 11px;border-radius:8px;font-size:.81rem;display:flex;justify-content:space-between;align-items:center;background:#f1f5f9;color:#94a3b8}
.dmp-fac-item-seo.active{background:#f0fdf4;color:#166534}
.dmp-tick{color:#16a34a;font-weight:700}
.dmp-cross{color:#d1d5db}
.dmp-gates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px}
.dmp-gate-item{background:#f8fafc;padding:9px;border-radius:6px;border:1px solid #e2e8f0;font-size:.81rem}
.dmp-gate-item strong{display:block;margin-bottom:2px}
.dmp-gate-item.closed{background:#fef2f2}
.dmp-gate-closed{color:#dc2626;font-size:.73rem;font-weight:700}
.dmp-nearby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:7px}
.dmp-nearby-card{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#f8fafc;border-radius:8px;text-decoration:none;color:#1e293b;font-size:.83rem;border:1px solid #e2e8f0;transition:all .15s}
.dmp-nearby-card:hover{background:#eff6ff;border-color:#93c5fd}
.dmp-nearby-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dmp-route-link{display:block;padding:9px 12px;background:#eff6ff;border-radius:8px;text-decoration:none;color:#1e40af;font-size:.81rem;border:1px solid #bfdbfe;transition:all .15s}
.dmp-route-link:hover{background:#dbeafe}
.dmp-route-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.dmp-route-header h1{font-size:1.35rem;margin:0}
.dmp-route-stats-bar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.dmp-stat-pill{padding:7px 12px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;font-size:.83rem;font-weight:600;color:#334155}
.dmp-fare-table{width:100%;border-collapse:collapse;font-size:.86rem}
.dmp-fare-table th{background:#f1f5f9;padding:9px 12px;text-align:left;border-bottom:2px solid #e2e8f0}
.dmp-fare-table td{padding:8px 12px;border-bottom:1px solid #f1f5f9}
.dmp-line-header{padding:18px;background:#f8fafc;border-radius:12px;margin-bottom:18px;border:1px solid #e2e8f0}
.dmp-line-header h1{margin:0 0 9px}
.dmp-line-stations-list{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}
.dmp-line-stn-row{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid #f1f5f9;font-size:.83rem}
.dmp-line-stn-row:last-child{border-bottom:none}
.dmp-line-stn-row.dmp-line-stn-ic{background:#fefce8}
.dmp-stn-num{color:#94a3b8;font-size:.72rem;width:26px;text-align:right;flex-shrink:0}
.dmp-stn-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:2px solid #fff;box-shadow:0 0 0 2px #e2e8f0}
.dmp-stn-link{color:#1e293b;text-decoration:none;flex:1}
.dmp-stn-link:hover{color:#2563eb;text-decoration:underline}
.dmp-ic-badge{background:#f59e0b;color:#fff;padding:1px 5px;border-radius:3px;font-size:.66rem;font-weight:700}
.dmp-ic-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:9px}
.dmp-ic-card{padding:12px;background:#fffbeb;border:1px solid #fcd34d;border-radius:8px}
.dmp-ic-card-lines{display:flex;flex-wrap:wrap;gap:3px;margin:7px 0 3px}
.dmp-route-steps{position:relative;padding-left:24px}
.dmp-step{position:relative;padding:11px 12px;margin-bottom:4px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}
.dmp-step-start{border-left:4px solid #16a34a}
.dmp-step-end{border-left:4px solid #dc2626}
.dmp-step-ic{border-left:4px solid #f59e0b;background:#fffbeb}
.dmp-step-body{font-size:.83rem;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.dmp-step-stn{font-weight:700;color:#1e293b;text-decoration:none;font-size:.9rem}
.dmp-step-stn:hover{text-decoration:underline;color:#2563eb}
.dmp-step-plat{background:#e0e7ff;color:#3730a3;padding:2px 7px;border-radius:4px;font-size:.76rem;font-weight:600}
.dmp-step-towards{color:#64748b;font-size:.78rem}
@media(max-width:600px){
  .dmp-seo-wrap{padding:14px 12px}
  .dmp-stn-header{flex-direction:column;gap:8px}
  .dmp-route-header{flex-direction:column}
  .dmp-fac-grid-seo{grid-template-columns:repeat(2,1fr)}
  .dmp-gates-grid{grid-template-columns:1fr}
  .dmp-nearby-grid{grid-template-columns:repeat(2,1fr)}
  .dmp-ic-list{grid-template-columns:1fr}
  .dmp-stat-pill{font-size:.76rem;padding:5px 9px}
}

/* ══════════════════════════════════════════════
   ENHANCED MOBILE & LAYOUT FIXES v8.4
   Based on provided style guidelines
══════════════════════════════════════════════ */

/* App wrapper gradient background */
.dmp-app {
  background: linear-gradient(135deg, #f0f2f5 0%, #e8eaf6 100%);
  min-height: 100vh;
}
[data-theme="dark"] .dmp-app {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
}

/* Header improvements */
.dmp-header {
  background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 50%, #c62828 100%) !important;
  box-shadow: 0 8px 32px rgba(183,28,28,0.35);
  margin-bottom: 16px;
}
.dmp-header h1 {
  background: linear-gradient(90deg, #fff, #ffcdd2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Main card shadow */
.dmp-main-card {
  box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
}

/* Station name clickable */
.dmp-tname, .dmp-sc-name {
  cursor: pointer;
  transition: color 0.2s;
}
.dmp-tname:hover { color: var(--secondary) !important; text-decoration: underline; }

/* Detail button styling */
.dmp-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--gray-100);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--secondary);
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s;
  margin-top: 6px;
}
.dmp-detail-btn:hover {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

/* Station modal inner improvements */
.dmp-stn-modal-inner {
  border-radius: var(--radius-lg);
}
.dmp-sdet-lines {
  margin-bottom: 12px;
}
.dmp-sdet-line-row {
  background: var(--gray-50);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
}
.dmp-sdet-fac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 7px;
  margin: 10px 0;
}
.dmp-sdet-fac {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .76rem;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color);
}
.dmp-sdet-fac.active {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.dmp-sdet-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: .82rem;
}
.dmp-sdet-field strong {
  min-width: 110px;
  color: var(--text-primary);
  font-weight: 700;
}
.dmp-sdet-field span {
  color: var(--text-secondary);
}

/* Swap button show on mobile (horizontal) */
@media(max-width: 768px) {
  .dmp-swap-wrap {
    display: flex !important;
    justify-content: center;
    padding-top: 0;
    margin: -4px 0;
  }
  .dmp-swap-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  /* Horizontal swap icon */
  .dmp-swap-btn::after {
    content: '↕';
  }
}

/* SEO page better title area */
.dmp-stn-header h1 {
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.3;
}
.dmp-route-header h1 {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 800;
}

/* Better custom content area */
.dmp-custom-content-wrap {
  padding: 14px 16px;
}
.dmp-custom-content-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Segment bar horizontal scroll on mobile */
.dmp-seg-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  flex-wrap: nowrap !important;
}
.dmp-seg-bar::-webkit-scrollbar { height: 3px; }
.dmp-seg-bar::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 2px; }

/* Improve timeline on mobile — BUG-FIX v1.0.0: prevent circle/name overlap */
@media(max-width: 480px) {
  .dmp-timeline { padding-left: 32px; }
  .dmp-timeline::before { left: 13px; }
  .dmp-titem-num { left: -28px; width: 20px; height: 20px; font-size: .62rem; }
  .dmp-titem { padding: 10px 10px 10px 14px; }
  .dmp-tstn-name { padding-left: 0; word-break: break-word; }
  .dmp-tname { font-size: .88rem; }
  
  /* Modal full screen on mobile */
  .dmp-stn-modal-inner { max-height: 92vh; border-radius: var(--radius-lg); }
  .dmp-sdet-fac-grid { grid-template-columns: repeat(2, 1fr); }
  
  /* Cards grid 1 col */
  .dmp-cards-grid { grid-template-columns: 1fr; }
  
  /* Summary 3 col */
  .dmp-summary { grid-template-columns: repeat(3, 1fr); }
  
  /* Fare grid 2 col */
  .dmp-fare-grid { grid-template-columns: repeat(2, 1fr); }
  
  /* Action row - find button full width */
  .dmp-action-row { flex-direction: column; }
  .dmp-btn-primary { width: 100%; }
  
  /* Pref buttons smaller */
  .dmp-pref-btn { padding: 6px 10px; font-size: .76rem; }
  
  /* Services tabs scroll */
  .dmp-services-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; }
  .dmp-svc-tab { white-space: nowrap; }
}

/* Extra small screens */
@media(max-width: 360px) {
  .dmp-wrapper { padding: 4px 6px 80px; }
  .dmp-header { padding: 10px 10px 8px; border-radius: 12px; }
  .dmp-ctrl-btn { padding: 3px 6px; font-size: .68rem; min-width: 28px; }
  .dmp-header h1 { font-size: .88rem; }
  .dmp-summary { grid-template-columns: repeat(2, 1fr); }
  .dmp-sum-val { font-size: 1rem; }
}

/* SEO page mobile */
@media(max-width: 480px) {
  .dmp-stn-header { flex-direction: column; padding: 14px; }
  .dmp-fac-grid-seo { grid-template-columns: repeat(2, 1fr); }
  .dmp-nearby-grid { grid-template-columns: repeat(2, 1fr); }
  .dmp-gates-grid { grid-template-columns: 1fr; }
  .dmp-ic-list { grid-template-columns: 1fr; }
  .dmp-route-header { flex-direction: column; }
  .dmp-stat-pill { font-size: .74rem; padding: 5px 8px; }
  .dmp-route-steps { padding-left: 14px; }
}

/* ══════════════════════════════════════════════════════════
   SETTINGS & STATION BROWSER PANEL SYSTEM v9
══════════════════════════════════════════════════════════ */

/* --- Panel Overlay --- */
.dmp-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 8999;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.dmp-panel-overlay.open {
  opacity: 1; pointer-events: auto;
}

/* --- Side Panel --- */
.dmp-side-panel {
  position: fixed;
  top: 0; right: -440px;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--dmp-card, #fff);
  box-shadow: -4px 0 40px rgba(0,0,0,.22);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: right .32s cubic-bezier(.4,0,.2,1);
}
.dmp-side-panel.dmp-panel-open { right: 0; }

/* --- Panel Header --- */
.dmp-panel-hdr {
  padding: 15px 18px;
  background: linear-gradient(135deg,#0d47a1 0%,#1565c0 50%,#5e35b1 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.dmp-panel-title {
  font-family: var(--dmp-font-display, 'Rajdhani', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .3px;
}
.dmp-panel-close {
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.dmp-panel-close:hover { background: rgba(255,255,255,.3); }

/* --- Panel Tabs --- */
.dmp-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--dmp-border, #e2e8f0);
  overflow-x: auto;
  flex-shrink: 0;
  padding: 0 14px;
  background: var(--dmp-card, #fff);
  scrollbar-width: none;
}
.dmp-panel-tabs::-webkit-scrollbar { display: none; }
.dmp-ptab {
  padding: 10px 14px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--dmp-text-secondary, #64748b);
  border: none;
  border-bottom: 2.5px solid transparent;
  background: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s;
}
.dmp-ptab:hover { color: var(--primary, #1565c0); }
.dmp-ptab.active {
  color: var(--primary, #1565c0);
  border-bottom-color: var(--primary, #1565c0);
}
.dmp-ptab-content { display: none; }
.dmp-ptab-content.active { display: block; }
.dmp-sptab-content { display: none; }
.dmp-sptab-content.active { display: block; }

/* --- Panel Body --- */
.dmp-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  scrollbar-width: thin;
}

/* --- Settings Sections --- */
.dmp-stng-section { margin-bottom: 22px; }
.dmp-stng-section-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--dmp-text-secondary, #64748b);
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--dmp-border, #e2e8f0);
}
.dmp-stng-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
}
.dmp-stng-row:last-child { border-bottom: none; }
.dmp-stng-label { font-size: .84rem; font-weight: 500; color: var(--dmp-text, #1e293b); }
.dmp-stng-ctrl { flex-shrink: 0; margin-left: 10px; }

/* --- Toggle Switch --- */
.dmp-toggle {
  width: 40px; height: 22px;
  background: #cbd5e1;
  border: none;
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.dmp-toggle.on { background: var(--primary, #1565c0); }
.dmp-toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.dmp-toggle.on::after { left: 21px; }

/* --- Select / Inputs --- */
.dmp-s-select {
  padding: 5px 8px;
  border: 1.5px solid var(--dmp-border, #e2e8f0);
  border-radius: 6px;
  font-size: .8rem;
  background: var(--dmp-card, #fff);
  color: var(--dmp-text, #1e293b);
  cursor: pointer;
  font-family: inherit;
}
.dmp-s-select:focus { outline: none; border-color: var(--primary, #1565c0); }

/* --- Size Slider --- */
.dmp-size-slider {
  width: 90px;
  accent-color: var(--primary, #1565c0);
}
.dmp-slider-lbl {
  font-size: .78rem;
  font-weight: 700;
  color: var(--primary, #1565c0);
  min-width: 38px;
}

/* --- Layout Radio Buttons --- */
.dmp-layout-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px solid var(--dmp-border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 500;
  color: var(--dmp-text, #1e293b);
  transition: border-color .15s, background .15s;
}
.dmp-layout-radio:hover {
  border-color: var(--primary, #1565c0);
  background: #eff6ff;
}
.dmp-layout-radio input[type="radio"] {
  accent-color: var(--primary, #1565c0);
}

/* --- Reset Buttons --- */
.dmp-reset-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1.5px solid #dc2626;
  background: transparent;
  color: #dc2626;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  font-family: inherit;
  transition: background .15s;
}
.dmp-reset-btn:hover { background: #fef2f2; }
.dmp-reset-btn.dmp-reset-btn-blue {
  border-color: var(--primary, #1565c0);
  color: var(--primary, #1565c0);
}
.dmp-reset-btn.dmp-reset-btn-blue:hover { background: #eff6ff; }

/* --- Station Browser --- */
.dmp-sm-search {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--dmp-border, #e2e8f0);
  border-radius: 8px;
  font-size: .84rem;
  background: var(--dmp-card, #fff);
  color: var(--dmp-text, #1e293b);
  margin-bottom: 8px;
  font-family: inherit;
}
.dmp-sm-search:focus { outline: none; border-color: var(--primary, #1565c0); }

.dmp-sm-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.dmp-sm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1.5px solid var(--dmp-border, #e2e8f0);
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  transition: all .15s;
}
.dmp-sm-item:hover {
  border-color: var(--primary, #1565c0);
  background: #eff6ff;
}
.dmp-sm-item-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,.1);
}
.dmp-sm-item-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--dmp-text, #1e293b);
  flex: 1;
  line-height: 1.2;
}
.dmp-sm-item-sub {
  font-size: .68rem;
  color: var(--dmp-text-secondary, #64748b);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.dmp-sm-lbadge {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .64rem;
  font-weight: 700;
  color: #fff;
}
.dmp-sm-ic-chip {
  background: #f59e0b;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .64rem;
  font-weight: 700;
}
.dmp-sm-use-btn {
  background: var(--primary, #1565c0);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 9px;
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s;
}
.dmp-sm-use-btn:hover { background: #0d47a1; }
.dmp-sm-item.dmp-sm-closed .dmp-sm-item-name::after {
  content: ' ⛔';
  font-size: .65rem;
}

/* --- Admin Notice (read-only indicator) --- */
.dmp-admin-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: .75rem;
  color: #0369a1;
  font-weight: 500;
}

/* --- Settings Ctrl Buttons in Header --- */
.dmp-ctrl-settings, .dmp-ctrl-stations {
  position: relative;
}
.dmp-ctrl-settings.active-panel,
.dmp-ctrl-stations.active-panel {
  background: rgba(255,255,255,.3) !important;
  border-color: rgba(255,255,255,.6) !important;
}

/* --- Dark mode for panels --- */
[data-theme="dark"] .dmp-side-panel {
  background: #1e293b;
}
[data-theme="dark"] .dmp-panel-tabs {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .dmp-stng-row {
  border-color: #2d3f53;
}
[data-theme="dark"] .dmp-stng-label { color: #e2e8f0; }
[data-theme="dark"] .dmp-stng-section-title { color: #94a3b8; border-color: #334155; }
[data-theme="dark"] .dmp-sm-item { background: #273548; border-color: #334155; }
[data-theme="dark"] .dmp-sm-item:hover { background: #1e3a5f; }
[data-theme="dark"] .dmp-sm-item-name { color: #f1f5f9; }
[data-theme="dark"] .dmp-s-select { background: #273548; color: #f1f5f9; border-color: #334155; }
[data-theme="dark"] .dmp-sm-search { background: #273548; color: #f1f5f9; border-color: #334155; }
[data-theme="dark"] .dmp-admin-notice { background: #1e3a5f; border-color: #1d4ed8; color: #93c5fd; }
[data-theme="dark"] .dmp-layout-radio { border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .dmp-layout-radio:hover { background: #1e3a5f; }
[data-theme="dark"] .dmp-toggle { background: #475569; }
[data-theme="dark"] .dmp-tdir{color:#94a3b8}
[data-theme="dark"] .dmp-ttowards{color:#93c5fd}
[data-theme="dark"] .dmp-ttowards-dir{color:#93c5fd}
[data-theme="dark"] .dmp-tt-start{background:#1e3a5f;color:#93c5fd;border-color:#1d4ed8}
[data-theme="dark"] .dmp-tt-dest{background:#422006;color:#fde68a;border-color:#92400e}
[data-theme="dark"] .dmp-tt-next{background:#052e16;color:#86efac;border-color:#166534}
[data-theme="dark"] .dmp-tt-arrived{background:#052e16;color:#4ade80;border-color:#16a34a}
[data-theme="dark"] .dmp-tt-from{background:#2e1065;color:#c4b5fd;border-color:#5b21b6}
[data-theme="dark"] .dmp-tstn-name{color:#f1f5f9}
[data-theme="dark"] .dmp-direct-banner{background:linear-gradient(135deg,#052e16,#14532d);border-color:#16a34a;color:#86efac}

/* Mobile panel full width */
@media(max-width: 480px) {
  .dmp-side-panel { width: 100vw; right: -100vw; }
}

/* ═══════════════════════════════════════════════════════════
   DELHI METRO v9.0 — PROFESSIONAL FULL-SCREEN UPGRADE
   Metro Line Colors (Official) | Layout Fixes | Mobile Pro
═══════════════════════════════════════════════════════════ */

/* Official Delhi Metro Line Colors — Elementor-proof */
:root {
  --dml-red:     #e53935 !important;
  --dml-yellow:  #fdd835 !important;
  --dml-blue:    #1e88e5 !important;
  --dml-green:   #43a047 !important;
  --dml-violet:  #8e24aa !important;
  --dml-pink:    #e91e63 !important;
  --dml-magenta: #d81b60 !important;
  --dml-grey:    #757575 !important;
  --dml-orange:  #fb8c00 !important;
  --dml-aqua:    #00acc1 !important;
}

/* Full-screen friendly wrapper */
.dmp-app {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}

.dmp-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 16px 80px;
  width: 100%;
  box-sizing: border-box;
}

/* Elementor container conflict fix */
.elementor .dmp-app,
.elementor .dmp-wrapper,
.elementor .dmp-main-card,
.elementor-section .dmp-app {
  width: 100% !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;
  padding-right: 16px;
}

/* Fix: prevent Elementor flex from breaking route container */
.elementor-column .dmp-form-grid,
.elementor-widget .dmp-form-grid {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
}

@media(max-width: 768px) {
  .elementor-column .dmp-form-grid,
  .elementor-widget .dmp-form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Professional Metro Route UI ── */
.dmp-metro-route {
  position: relative;
  padding-left: 32px;
}

.dmp-metro-route::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 2px;
  background: var(--route-line-color, #1e88e5);
}

.dmp-metro-station {
  position: relative;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  transition: all .2s;
}

.dmp-metro-station:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  transform: translateX(2px);
}

.station-dot {
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--station-color, #1e88e5);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--station-color, #1e88e5);
  z-index: 1;
}

.station-name {
  font-weight: 700;
  font-size: .9rem;
  color: var(--text-primary);
  cursor: pointer;
}

.station-name:hover { color: var(--secondary); }

.interchange {
  background: linear-gradient(90deg, #fffbeb, transparent) !important;
  border-color: #fbbf24 !important;
}

.interchange .station-dot {
  width: 18px;
  height: 18px;
  left: -26px;
}

/* ── Station Services Subtitle Fix ── */
#dmpServicesSubtitle {
  font-size: .88rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}

#dmpServicesSubtitle img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 8px 0;
}

/* ── Direction Arrow ── */
.dmp-route-direction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  font-size: .73rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
}

.dmp-route-direction::before {
  content: '→';
  font-weight: 800;
  color: var(--secondary);
}

/* ── Timeline hover highlight ── */
.dmp-titem {
  transition: all .18s ease;
  cursor: default;
}

.dmp-titem:hover {
  background: #f0f9ff !important;
  border-color: #7dd3fc !important;
  transform: translateX(2px);
}

.dmp-titem.tic:hover {
  background: #fef3c7 !important;
  border-color: #fbbf24 !important;
}

/* ── Summary bar 6 items on desktop ── */
@media(min-width: 769px) {
  .dmp-summary {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* ── Full-screen mode improvements ── */
@media(min-width: 1200px) {
  .dmp-wrapper { max-width: 1100px; padding: 20px 24px 80px; }
  .dmp-form-grid { gap: 16px; }
  .dmp-header { padding: 24px 28px 22px; }
  .dmp-cards-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media(min-width: 900px) {
  .dmp-svc-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .dmp-fare-grid { grid-template-columns: repeat(4, 1fr); }
  .dmp-timing-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile: No overlap fix ── */
@media(max-width: 768px) {
  .dmp-titem-top {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
  }

  .dmp-tname {
    font-size: .88rem;
    word-break: break-word;
    flex: 1 1 100%;
  }

  .dmp-tplat, .dmp-ttype, .dmp-tic-badge, .dmp-tend-badge {
    flex-shrink: 0;
  }

  /* Summary 3 columns mobile */
  .dmp-summary {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Fare 2 columns mobile */
  .dmp-fare-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Cards 1 column */
  .dmp-cards-grid { grid-template-columns: 1fr !important; }

  /* Segment bar scroll */
  .dmp-seg-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  /* Services tabs scroll */
  .dmp-services-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px;
  }

  .dmp-svc-tab { white-space: nowrap; flex-shrink: 0; }
}

/* ── Extra Mobile Fixes ── */
@media(max-width: 480px) {
  .dmp-wrapper { padding: 8px 10px 90px; }

  /* Summary 2 cols on tiny screens */
  .dmp-summary { grid-template-columns: repeat(3, 1fr) !important; }
  .dmp-sum-val { font-size: .95rem; }
  .dmp-sum-lbl { font-size: .54rem; }

  /* Interchange flow: stack vertically */
  .dmp-ic-flow {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .dmp-ic-arrow { transform: rotate(90deg); }

  /* Dropdown items: full-width, no overlap */
  .dmp-dd-item {
    padding: 10px 12px;
    align-items: flex-start;
  }
  .dmp-dd-body { min-width: 0; overflow: hidden; }
  .dmp-dd-name { font-size: .84rem; word-break: break-word; }

  /* Station detail modal full-height */
  .dmp-stn-modal-inner {
    max-height: 95vh;
    border-radius: var(--radius-lg);
  }

  /* Action buttons: column layout */
  .dmp-action-row { flex-direction: column; }
  .dmp-btn-primary { width: 100%; }

  /* Settings panel full-width */
  .dmp-side-panel { width: 100vw !important; }
}

/* ── Settings → apply admin settings via JS ── */
[data-header-style="solid"] .dmp-header {
  background: linear-gradient(135deg, #1565c0, #1e88e5) !important;
}
[data-header-style="dark"] .dmp-header {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}
[data-header-style="red"] .dmp-header {
  background: linear-gradient(135deg, #b71c1c, #e53935) !important;
}

/* Animation speed variants */
[data-anim="none"] .dmp-app * {
  animation: none !important;
  transition: none !important;
}
[data-anim="fast"] .dmp-app * { animation-duration: .1s !important; transition-duration: .1s !important; }
[data-anim="slow"] .dmp-app * { animation-duration: .6s !important; transition-duration: .4s !important; }

/* Dropdown item size variants */
[data-ddsize="compact"] .dmp-dd-item { padding: 7px 12px; min-height: 44px; }
[data-ddsize="large"]   .dmp-dd-item { padding: 14px 16px; min-height: 68px; }
[data-ddsize="large"]   .dmp-dd-name { font-size: 1rem; }

/* ── Custom scrollbar ── */
.dmp-app ::-webkit-scrollbar { width: 6px; height: 6px; }
.dmp-app ::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 3px; }
.dmp-app ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ── Accessibility: Section heading visual style ── */
.dmp-section-heading{font-size:.88rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-weight:700}
/* timing-label replacing h5 */
.dmp-timing-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);margin-bottom:2px;font-weight:700}
/* svc title replacing h4 */
.dmp-svc-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:6px}
/* Focus visible for keyboard users */
.dmp-app *:focus-visible{outline:3px solid #005fcc;outline-offset:2px;border-radius:3px}
/* Contrast fixes */
.dmp-text-secondary,.dmp-sum-lbl,.dmp-fare-type,.dmp-stng-label{color:var(--text-secondary)}
.dmp-btn-secondary{color:#333333;background:var(--gray-100);border:1px solid var(--border-color)}
.dmp-text-secondary-safe{color:#444444}
/* Skip link for keyboard navigation */
.dmp-skip-link{position:absolute;left:-9999px;top:0;z-index:99999;background:#fff;color:#000;padding:8px 16px;text-decoration:none;font-weight:700}
.dmp-skip-link:focus{left:0}

/* ══════════════════════════════════════════════════════
   PHASE 3 PERFORMANCE + SEO PAGE ENHANCEMENTS v1.9.0
   ══════════════════════════════════════════════════════ */

/* ── Critical rendering: font-display swap ── */
@font-face{font-display:swap}

/* ── SEO page typography upgrade ── */
.dmp-seo-page{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.65;color:#1e293b}
.dmp-seo-wrap{max-width:940px;margin:0 auto;padding:24px 16px}
.dmp-seo-section{margin-bottom:32px;contain:layout style}
.dmp-seo-section h2{font-size:1.1rem;font-weight:700;color:#0f172a;border-bottom:2px solid #e2e8f0;padding-bottom:8px;margin:0 0 14px;letter-spacing:-.01em}
.dmp-seo-section p{color:#374151;line-height:1.75;margin:0 0 12px}

/* ── About section ── */
.dmp-seo-about p{font-size:.92rem;line-height:1.8}

/* ── Timing card ── */
.dmp-timing-card{background:#f8fafc;border-radius:10px;padding:14px 16px;border:1px solid #e2e8f0;margin-bottom:0}

/* ── FAQ section ── */
.dmp-faq-section{background:#fafafa;border:1px solid #e2e8f0;border-radius:12px;padding:18px 20px}
.dmp-faq-section h2{border-bottom-color:#d1d5db}
.dmp-faq-item{padding:12px 0;border-bottom:1px solid #f1f5f9}
.dmp-faq-item:last-child{border-bottom:none;padding-bottom:0}
.dmp-faq-item h3{font-size:.9rem;font-weight:700;color:#1e293b;margin:0 0 6px;line-height:1.4}
.dmp-faq-item p{font-size:.85rem;color:#475569;margin:0;line-height:1.65}

/* ── Route links grid ── */
.dmp-route-links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px}
.dmp-route-link{display:block;padding:9px 13px;background:#eff6ff;border-radius:8px;text-decoration:none;color:#1e40af;font-size:.82rem;border:1px solid #bfdbfe;transition:background .15s,transform .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmp-route-link:hover{background:#dbeafe;transform:translateY(-1px)}
.dmp-route-link-rev{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.dmp-route-link-rev:hover{background:#dcfce7}

/* ── Stat pills ── */
.dmp-route-stats-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.dmp-stat-pill{padding:8px 14px;background:#f1f5f9;border-radius:20px;border:1px solid #e2e8f0;font-size:.83rem;font-weight:600;color:#334155;white-space:nowrap}

/* ── Fare table ── */
.dmp-fare-table{width:100%;border-collapse:collapse;font-size:.86rem;border-radius:8px;overflow:hidden}
.dmp-fare-table th{background:#1e293b;color:#fff;padding:10px 14px;text-align:left;font-weight:600}
.dmp-fare-table td{padding:9px 14px;border-bottom:1px solid #f1f5f9}
.dmp-fare-table tr:nth-child(even) td{background:#f8fafc}
.dmp-fare-table tr:hover td{background:#eff6ff}

/* ── Step list ── */
.dmp-route-steps{position:relative;padding-left:20px}
.dmp-route-steps::before{content:'';position:absolute;left:6px;top:12px;bottom:12px;width:2px;background:linear-gradient(to bottom,#16a34a,#2563eb,#dc2626);border-radius:2px}
.dmp-step{position:relative;padding:10px 12px;margin-bottom:5px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;transition:box-shadow .15s}
.dmp-step:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.dmp-step-start{border-left:4px solid #16a34a;background:#f0fdf4}
.dmp-step-end{border-left:4px solid #dc2626;background:#fef2f2}
.dmp-step-ic{border-left:4px solid #f59e0b;background:#fffbeb}
.dmp-step-dot{position:absolute;left:-14px;top:14px;width:10px;height:10px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px #94a3b8;flex-shrink:0}
.dmp-step-body{font-size:.84rem;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.dmp-step-stn{font-weight:700;color:#1e293b;text-decoration:none;font-size:.9rem}
.dmp-step-stn:hover{color:#2563eb;text-decoration:underline}
.dmp-step-line{padding:2px 7px;border-radius:4px;font-size:.72rem;font-weight:700}
.dmp-step-plat{background:#e0e7ff;color:#3730a3;padding:2px 8px;border-radius:4px;font-size:.76rem;font-weight:600}
.dmp-step-towards{color:#64748b;font-size:.78rem;font-style:italic}

/* ── Route header ── */
.dmp-route-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px;padding:18px;background:linear-gradient(135deg,#f8fafc,#eff6ff);border-radius:12px;border:1px solid #dbeafe}
.dmp-route-header h1{font-size:1.3rem;margin:0;font-weight:800;color:#0f172a;line-height:1.3}
.dmp-route-arrow{color:#3b82f6;margin:0 6px}
.dmp-route-label{font-size:.65rem;background:#1e40af;color:#fff;padding:2px 8px;border-radius:4px;font-weight:700;vertical-align:middle;text-transform:uppercase;letter-spacing:.05em}
.dmp-reverse-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;background:#fff;border:1.5px solid #3b82f6;border-radius:8px;color:#2563eb;text-decoration:none;font-size:.82rem;font-weight:600;transition:all .15s;white-space:nowrap}
.dmp-reverse-btn:hover{background:#eff6ff}

/* ── Station header ── */
.dmp-stn-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px;padding:20px;background:linear-gradient(135deg,#f8fafc,#f0fdf4);border-radius:12px;border:1px solid #e2e8f0}
.dmp-stn-header.dmp-closed{background:#fef2f2;border-color:#fca5a5}
.dmp-stn-icon{font-size:2.5rem;line-height:1;flex-shrink:0}
.dmp-stn-header h1{font-size:1.4rem;margin:0 0 8px;font-weight:800;color:#0f172a}
.dmp-stn-lines{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.dmp-line-pill{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.76rem;font-weight:700;text-decoration:none;letter-spacing:.02em}

/* ── Line page header ── */
.dmp-line-header{padding:20px;background:#f8fafc;border-radius:12px;margin-bottom:20px;border:1px solid #e2e8f0}
.dmp-line-header h1{margin:0 0 10px;font-size:1.4rem;font-weight:800}
.dmp-line-meta-row{display:flex;flex-wrap:wrap;gap:10px;font-size:.83rem;color:#475569}
.dmp-line-stations-list{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;contain:content}
.dmp-line-stn-row{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid #f1f5f9;font-size:.84rem;transition:background .1s}
.dmp-line-stn-row:last-child{border-bottom:none}
.dmp-line-stn-row:hover{background:#f0f9ff}
.dmp-line-stn-row.dmp-line-stn-ic{background:#fefce8}
.dmp-line-stn-row.dmp-line-stn-ic:hover{background:#fef9c3}
.dmp-stn-num{color:#94a3b8;font-size:.72rem;width:28px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.dmp-stn-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:2px solid #fff;box-shadow:0 0 0 2px #cbd5e1}
.dmp-stn-link{color:#1e293b;text-decoration:none;flex:1;font-weight:500}
.dmp-stn-link:hover{color:#2563eb;text-decoration:underline}
.dmp-ic-badge{background:#f59e0b;color:#fff;padding:1px 6px;border-radius:3px;font-size:.66rem;font-weight:700;flex-shrink:0}
.dmp-xfer-pill{padding:1px 6px;border-radius:3px;font-size:.68rem;font-weight:700;flex-shrink:0}

/* ── Nearby grid ── */
.dmp-nearby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:7px}
.dmp-nearby-card{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#f8fafc;border-radius:8px;text-decoration:none;color:#1e293b;font-size:.84rem;border:1px solid #e2e8f0;transition:all .15s}
.dmp-nearby-card:hover{background:#eff6ff;border-color:#93c5fd;transform:translateY(-1px)}
.dmp-nearby-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dmp-nearby-name{font-weight:500}

/* ── Breadcrumb ── */
.dmp-breadcrumb{font-size:.79rem;color:#94a3b8;margin-bottom:18px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.dmp-breadcrumb a{color:#3b82f6;text-decoration:none;font-weight:500}
.dmp-breadcrumb a:hover{text-decoration:underline}

/* ── Direct badge ── */
.dmp-direct-badge{display:inline-flex;align-items:center;gap:6px;background:#dcfce7;border:1px solid #86efac;color:#166534;padding:7px 14px;border-radius:8px;font-size:.85rem;font-weight:600;margin-bottom:12px}

/* ── Alert ── */
.dmp-alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:.88rem}
.dmp-alert-warning{background:#fef3c7;border:1px solid #fcd34d;color:#92400e}
.dmp-alert-danger{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b}

/* ── Platform card ── */
.dmp-plat-card{background:#f8fafc;border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid #e2e8f0}
.dmp-plat-line{font-weight:700;font-size:.87rem;color:#0f172a;margin-bottom:9px}
.dmp-plat-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #f1f5f9}
.dmp-plat-row:last-child{border-bottom:none}
.dmp-plat-no{background:#0f172a;color:#fff;padding:3px 10px;border-radius:5px;font-size:.8rem;font-weight:700;white-space:nowrap;flex-shrink:0}
.dmp-plat-dir{font-size:.84rem;color:#475569;flex:1}
.dmp-verified{background:#dcfce7;color:#166534;padding:2px 7px;border-radius:4px;font-size:.7rem;font-weight:700;flex-shrink:0}
.dmp-platform-note{font-size:.8rem;color:#92400e;background:#fffbeb;border:1px solid #fcd34d;border-radius:6px;padding:5px 10px;line-height:1.5}

/* ── IC card ── */
.dmp-ic-card{padding:12px 16px;background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;margin-bottom:7px;font-size:.87rem}
.dmp-ic-card strong a{color:#1e293b;text-decoration:none;font-weight:700}
.dmp-ic-card strong a:hover{color:#2563eb;text-decoration:underline}

/* ── Performance: content-visibility for off-screen sections ── */
.dmp-seo-section{content-visibility:auto;contain-intrinsic-size:0 200px}
.dmp-seo-section h2,.dmp-faq-section{content-visibility:visible}

/* ── Lazy image base ── */
.dmp-seo-page img{loading:lazy;max-width:100%;height:auto;border-radius:6px}

/* ── Print styles ── */
@media print{
  .dmp-seo-wrap{max-width:100%;padding:0}
  .dmp-route-header,.dmp-stn-header{background:#fff!important}
  .dmp-faq-section{background:#fff!important;border:1px solid #ddd}
}

/* ── Responsive ── */
@media(max-width:640px){
  .dmp-seo-wrap{padding:14px 12px}
  .dmp-seo-section h2{font-size:1rem}
  .dmp-stn-header{flex-direction:column;gap:10px;padding:14px}
  .dmp-stn-icon{font-size:2rem}
  .dmp-stn-header h1{font-size:1.2rem}
  .dmp-route-header{flex-direction:column;padding:14px}
  .dmp-route-header h1{font-size:1.1rem}
  .dmp-route-links-grid{grid-template-columns:1fr}
  .dmp-nearby-grid{grid-template-columns:repeat(2,1fr)}
  .dmp-stat-pill{font-size:.76rem;padding:6px 10px}
  .dmp-fare-table{font-size:.78rem}
  .dmp-fare-table th,.dmp-fare-table td{padding:7px 9px}
  .dmp-faq-section{padding:12px 14px}
  .dmp-faq-item h3{font-size:.84rem}
  .dmp-line-header{padding:14px}
  .dmp-line-header h1{font-size:1.2rem}
}
@media(max-width:400px){
  .dmp-nearby-grid{grid-template-columns:1fr}
  .dmp-route-links-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   INTERCHANGE CARDS — SEO Line Page (v2.0.5)
   Fixes: ic_on_line numeric key bug + new card design + popups
══════════════════════════════════════════════════════════════ */
.dmp-ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:10px}
.dmp-ic-seo-card{background:#fffbeb;border:1.5px solid #fcd34d;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,transform .2s}
.dmp-ic-seo-card:hover{box-shadow:0 4px 16px rgba(245,158,11,.2);transform:translateY(-2px)}
.dmp-ic-seo-card-top{display:flex;gap:10px;align-items:flex-start}
.dmp-ic-seo-icon{font-size:1.6rem;line-height:1;flex-shrink:0;margin-top:2px}
.dmp-ic-seo-info{flex:1;min-width:0}
.dmp-ic-seo-name{font-weight:700;font-size:.95rem;color:#1e293b;text-decoration:none;display:block;margin-bottom:5px}
.dmp-ic-seo-name:hover{color:#f59e0b;text-decoration:underline}
.dmp-ic-seo-lines{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:4px}
.dmp-ic-seo-pill{padding:2px 7px;border-radius:4px;font-size:.68rem;font-weight:700}
.dmp-ic-seo-line-names{font-size:.72rem;color:#78350f;line-height:1.4}
.dmp-ic-seo-actions{display:flex;gap:7px}
.dmp-ic-seo-btn{flex:1;padding:7px 10px;border-radius:6px;font-size:.78rem;font-weight:700;cursor:pointer;border:1.5px solid #fbbf24;background:#fff;color:#78350f;font-family:inherit;transition:background .18s,color .18s,transform .15s}
.dmp-ic-seo-btn:hover{background:#f59e0b;color:#fff;border-color:#d97706;transform:translateY(-1px)}

/* Modal backdrop — appended to body by JS so no parent transform can break it */
.dmp-ic-modal-bg{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.55);z-index:999999;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.dmp-ic-modal-bg.open{display:flex}
/* Modal box */
.dmp-ic-modal{background:#fff;border-radius:14px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:dmpIcFadeIn .22s ease}
.dmp-ic-modal-sm{max-width:360px}
@keyframes dmpIcFadeIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.dmp-ic-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid #f1f5f9;position:sticky;top:0;background:#fff;z-index:1}
.dmp-ic-modal-header span{font-weight:700;font-size:1rem;color:#1e293b}
.dmp-ic-modal-close{background:none;border:none;cursor:pointer;font-size:1.1rem;color:#64748b;line-height:1;padding:4px 6px;border-radius:6px;transition:background .15s}
.dmp-ic-modal-close:hover{background:#f1f5f9;color:#1e293b}
.dmp-ic-modal-body{padding:14px 16px}
.dmp-ic-modal-link-btn{display:block;margin:0 16px 14px;padding:10px 14px;background:#f59e0b;color:#fff;font-weight:700;border-radius:8px;text-align:center;text-decoration:none;font-size:.85rem;transition:background .18s}
.dmp-ic-modal-link-btn:hover{background:#d97706}
/* Detail table inside modal */
.dmp-ic-detail-table{width:100%;border-collapse:collapse;font-size:.84rem}
.dmp-ic-detail-table th{text-align:left;padding:7px 10px;color:#64748b;font-weight:600;white-space:nowrap;width:38%;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.dmp-ic-detail-table td{padding:7px 10px;color:#1e293b;border-bottom:1px solid #e2e8f0}
.dmp-ic-det-pill{display:inline-block;padding:2px 7px;border-radius:4px;font-size:.72rem;font-weight:700;margin-right:3px}
/* Share buttons */
.dmp-ic-share-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.dmp-ic-share-btn{padding:10px 12px;border:none;border-radius:8px;cursor:pointer;font-size:.82rem;font-weight:700;font-family:inherit;color:#fff;text-align:center;text-decoration:none;display:block;transition:opacity .18s,transform .15s}
.dmp-ic-share-btn:hover{opacity:.88;transform:translateY(-1px)}
.dmp-share-copy{background:#64748b}
.dmp-share-whatsapp{background:#25d366}
.dmp-share-telegram{background:#0088cc}
.dmp-share-facebook{background:#1877f2}

/* Responsive */
@media(max-width:540px){
  .dmp-ic-grid{grid-template-columns:1fr}
  .dmp-ic-modal{max-width:98vw}
  .dmp-ic-share-btns{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   POPUP / MODAL — VIEWPORT CENTER BULLETPROOF FIX  v2.0.7
   Problem: WordPress themes / Elementor / sticky headers use
   transform or will-change on ancestors, which breaks
   position:fixed (it becomes relative to that ancestor, not
   the viewport). Fix: DOM-portal (modal appended to body in
   JS) + these !important overrides as CSS safety net.
══════════════════════════════════════════════════════════════ */

/* Station detail modal */
#dmpStnModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 999990 !important;
}
#dmpStnModal.open {
  display: flex !important;
}
#dmpStnModal .dmp-stn-modal-inner {
  transform: none !important;
  -webkit-transform: none !important;
  position: relative !important;
  margin: auto !important;
}

/* Share modal */
#dmpModal.dmp-modal-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 999991 !important;
}
#dmpModal.dmp-modal-bg.open {
  display: flex !important;
}
#dmpModal .dmp-modal {
  transform: none !important;
  -webkit-transform: none !important;
  position: relative !important;
  margin: auto !important;
}

/* IC modal (interchange detail) */
.dmp-ic-modal-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  z-index: 999992 !important;
}