/*
 * Delhi Metro Pro Mini — SEO Route Page CSS v1.6.0
 * Theme-independent, PageSpeed-optimized, AdSense-safe layout
 * Critical CSS inlined; non-critical lazy-loaded
 */

/* ═══════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (design tokens)
═══════════════════════════════════════════════════════ */
.dmp-seo-page {
  --dmp-primary:    #1B2A4A;
  --dmp-accent:     #2563EB;
  --dmp-accent2:    #0EA5E9;
  --dmp-green:      #16A34A;
  --dmp-red:        #DC2626;
  --dmp-orange:     #D97706;
  --dmp-yellow:     #F59E0B;
  --dmp-bg:         #F8FAFC;
  --dmp-surface:    #FFFFFF;
  --dmp-border:     #E2E8F0;
  --dmp-text:       #0F172A;
  --dmp-muted:      #64748B;
  --dmp-radius:     12px;
  --dmp-radius-sm:  8px;
  --dmp-shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --dmp-shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dmp-text);
  background: var(--dmp-bg);
  /* FIX v1.6.0: isolate stacking context so theme backgrounds don't bleed
     into our rounded card corners ("kaniya" fix). */
  isolation: isolate;
  position: relative;
  /* Remove any margin/padding that theme wrappers might add */
  margin: 0;
  padding: 0;
  min-height: 100vh;
  box-sizing: border-box;
  /* Prevent theme's overflow:hidden from clipping our border-radius */
  overflow: visible;
  color-scheme: light; /* FORCE-LIGHT: prevents browser native dark auto-styling */
}

/* FIX v1.6.0: Ensure theme article/entry wrappers don't clip our content.
   Common WordPress theme classes that may have overflow:hidden or
   conflicting backgrounds. */

/* ═══════════════════════════════════════════════════════
   LAYOUT WRAPPER
═══════════════════════════════════════════════════════ */
.dmp-seo-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

@media (min-width: 768px) {
  .dmp-seo-wrap { padding: 24px 24px 60px; }
}

/* ═══════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════ */
.dmp-breadcrumb {
  font-size: .82rem;
  color: var(--dmp-muted);
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.dmp-breadcrumb a {
  color: var(--dmp-accent);
  text-decoration: none;
}
.dmp-breadcrumb a:hover { text-decoration: underline; }
.dmp-breadcrumb span { color: var(--dmp-muted); }

/* ═══════════════════════════════════════════════════════
   ROUTE PAGE HEADER
═══════════════════════════════════════════════════════ */
.dmp-route-header {
  background: linear-gradient(135deg, var(--dmp-primary) 0%, #2563EB 100%);
  border-radius: var(--dmp-radius);
  padding: 24px 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: var(--dmp-shadow-md);
}
.dmp-route-header h1 {
  color: #fff;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.dmp-route-arrow {
  color: #93C5FD;
  font-size: 1.1em;
}
.dmp-route-label {
  font-size: .75em;
  font-weight: 500;
  color: #BFDBFE;
  display: block;
  margin-top: 4px;
  letter-spacing: .03em;
  text-transform: uppercase;
  width: 100%; /* FIX v3.2.4: force label onto own line inside flex h1 */
}
.dmp-reverse-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--dmp-radius-sm);
  padding: 7px 14px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
  white-space: nowrap;
  flex-shrink: 0; /* FIX v3.2.4: prevent button squeeze */
  align-self: flex-start; /* FIX v3.2.4: align to top of header */
}
.dmp-reverse-btn:hover {
  background: rgba(255,255,255,.25);
  color: #fff;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════
   QUICK STATS BAR (above fold — most important for SEO)
═══════════════════════════════════════════════════════ */
.dmp-route-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.dmp-stat-pill {
  background: var(--dmp-surface);
  border: 1px solid var(--dmp-border);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--dmp-text);
  box-shadow: var(--dmp-shadow);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   ALERT BANNERS
═══════════════════════════════════════════════════════ */
.dmp-alert {
  border-radius: var(--dmp-radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: .9rem;
  font-weight: 500;
}
.dmp-alert-danger {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}
.dmp-alert-warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

/* ═══════════════════════════════════════════════════════
   SEO CONTENT SECTIONS
═══════════════════════════════════════════════════════ */
.dmp-seo-section {
  background: var(--dmp-surface);
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius);
  position: relative; /* FIX v1.6.0: prevent parent overflow clipping corners */
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--dmp-shadow);
}
.dmp-seo-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dmp-primary);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--dmp-border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dmp-seo-section p {
  color: var(--dmp-text);
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.7;
}
.dmp-seo-section p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════
   DIRECT ROUTE BADGE
═══════════════════════════════════════════════════════ */
.dmp-direct-badge {
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  border: 1px solid #A7F3D0;
  border-radius: var(--dmp-radius-sm);
  padding: 10px 16px;
  color: #065F46;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════
   STEP-BY-STEP ROUTE TIMELINE
═══════════════════════════════════════════════════════ */
.dmp-route-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.dmp-route-steps::before {
  content: '';
  position: absolute;
  left: 12px; /* FIX v1.3.1: dot center = 24px/2 = 12px */
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: var(--dmp-border);
  z-index: 0;
}
.dmp-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  position: relative;
  z-index: 1;
}
.dmp-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  min-width: 24px; /* FIX v1.3.1: prevent squeeze on narrow containers */
  border: 3px solid var(--dmp-surface);
  box-shadow: 0 0 0 2px var(--dmp-border);
  margin-top: 2px;
}
.dmp-step-closed { opacity: .55; }

.dmp-step-body {
  flex: 1;
  min-width: 0; /* FIX v1.3.1: critical — prevents flex children from overflowing dot */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.dmp-step-stn {
  font-weight: 600;
  font-size: .95rem;
  color: var(--dmp-text);
  text-decoration: none;
  word-break: break-word; /* FIX v1.3.1: long names wrap instead of overlapping */
  overflow-wrap: anywhere;
}
.dmp-step-stn:hover { color: var(--dmp-accent); }
.dmp-step-plat {
  font-size: .78rem;
  color: var(--dmp-muted);
  background: var(--dmp-bg);
  border: 1px solid var(--dmp-border);
  border-radius: 4px;
  padding: 1px 7px;
}
.dmp-verified {
  color: var(--dmp-green);
  font-size: .85rem;
  font-weight: 700;
}
.dmp-step-towards {
  font-size: .78rem;
  color: var(--dmp-muted);
  font-style: italic;
}

/* Interchange card inside step */
.dmp-ic-inline-card {
  width: 100%;
  margin-top: 6px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--dmp-radius-sm);
  padding: 8px 12px;
  font-size: .82rem;
  color: #92400E;
}
.dmp-ic-inline-card strong { color: #78350F; }

/* ═══════════════════════════════════════════════════════
   FARE TABLE
═══════════════════════════════════════════════════════ */
.dmp-fare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  border-radius: var(--dmp-radius-sm);
  overflow: hidden;
  border: 1px solid var(--dmp-border);
}
.dmp-fare-table th {
  background: var(--dmp-primary);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dmp-fare-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--dmp-border);
  color: var(--dmp-text);
  vertical-align: middle;
}
.dmp-fare-table tr:last-child td { border-bottom: none; }
.dmp-fare-table tr:nth-child(even) td { background: var(--dmp-bg); }
.dmp-fare-table td strong { color: var(--dmp-primary); }

/* Mobile: fare table scroll */
@media (max-width: 540px) {
  .dmp-fare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* BUG-FIX v1.3.1 — Step dot + station name overlap on narrow screens (complete fix) */
@media (max-width: 540px) {
  .dmp-route-steps { padding-left: 0; }
  .dmp-route-steps::before { left: 11px; top: 16px; bottom: 16px; }
  .dmp-step { gap: 10px; padding: 8px 0; }
  .dmp-step-dot { width: 22px; height: 22px; min-width: 22px; }
  
  .dmp-step-stn { font-size: .88rem; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; display: block; }
  .dmp-step-line { font-size: .65rem; }
  .dmp-step-plat { font-size: .72rem; }
}
@media (max-width: 380px) {
  .dmp-route-steps::before { left: 9px; }
  .dmp-step { gap: 8px; }
  .dmp-step-dot { width: 18px; height: 18px; min-width: 18px; }
  
}

/* ═══════════════════════════════════════════════════════
   METRO LINE CARDS
═══════════════════════════════════════════════════════ */
.dmp-timing-card {
  background: var(--dmp-surface);
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: .88rem;
}
.dmp-timing-card a {
  color: var(--dmp-accent);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
}
.dmp-timing-card a:hover { text-decoration: underline; }
.dmp-timing-card div { color: var(--dmp-text); }
.dmp-timing-card div strong { color: var(--dmp-primary); }

/* ═══════════════════════════════════════════════════════
   INTERCHANGE CARDS
═══════════════════════════════════════════════════════ */
.dmp-ic-card {
  background: var(--dmp-bg);
  border: 1px solid var(--dmp-border);
  border-left: 4px solid var(--dmp-yellow);
  border-radius: var(--dmp-radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: .9rem;
}
.dmp-ic-card a {
  color: var(--dmp-accent);
  text-decoration: none;
  font-weight: 600;
}
.dmp-ic-card a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════
   TRAVEL TIPS
═══════════════════════════════════════════════════════ */
.dmp-tips-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dmp-tips-list li {
  font-size: .9rem;
  color: var(--dmp-text);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════
   FAQ SECTION — Accordion
═══════════════════════════════════════════════════════ */
.dmp-faq-section h2 { margin-bottom: 12px; }
.dmp-faq-item {
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.dmp-faq-item h3 {
  margin: 0;
  padding: 0;
}
.dmp-faq-q {
  width: 100%;
  background: var(--dmp-bg);
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 13px 16px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--dmp-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: background .15s, color .15s;
}
/* FIX v4.6.9: hover/focus/expanded now use a fixed accent-blue background
   paired with fixed white text (not a CSS variable), so the pair can never
   collapse into a same-color combo under dark mode / OS theme changes —
   the earlier "#EFF6FF bg + var(--dmp-primary) text" pairing went invisible
   whenever --dmp-primary resolved to a light colour (dark mode), because
   only the base/expanded states were dark-mode-aware, not :hover. */
.dmp-faq-q:hover,
.dmp-faq-q:focus,
.dmp-faq-q:focus-visible {
  background: var(--dmp-accent) !important;
  color: #fff !important;
}
.dmp-faq-q[aria-expanded="true"] {
  background: var(--dmp-accent) !important;
  color: #fff !important;
}
.dmp-faq-icon {
  color: var(--dmp-accent);
  font-size: 1.1rem;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform .2s, color .15s;
}
.dmp-faq-q:hover .dmp-faq-icon,
.dmp-faq-q:focus .dmp-faq-icon,
.dmp-faq-q:focus-visible .dmp-faq-icon,
.dmp-faq-q[aria-expanded="true"] .dmp-faq-icon {
  color: #fff !important;
}
.dmp-faq-q[aria-expanded="true"] .dmp-faq-icon { transform: rotate(45deg); }
.dmp-faq-body {
  padding: 12px 16px;
  font-size: .9rem;
  color: var(--dmp-text);
  background: var(--dmp-surface);
  line-height: 1.7;
  border-top: 1px solid var(--dmp-border);
  display: none;
}
.dmp-faq-body.open { display: block; }
.dmp-faq-body p { margin: 0; }

/* ═══════════════════════════════════════════════════════
   INTERNAL LINKS GRID
═══════════════════════════════════════════════════════ */
.dmp-internal-links h2 { margin-bottom: 14px; }
.dmp-route-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.dmp-route-link {
  display: block;
  background: var(--dmp-bg);
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius-sm);
  padding: 9px 13px;
  font-size: .85rem;
  color: var(--dmp-accent);
  text-decoration: none;
  font-weight: 500;
  transition: background .15s, border-color .15s;
  line-height: 1.3;
}
.dmp-route-link-hi {
  display: block;
  font-size: .74rem;
  font-weight: 400;
  color: #7c3aed;
  margin-top: 2px;
}
.dmp-route-link:hover {
  background: #EFF6FF;
  border-color: #BFDBFE;
  text-decoration: none;
}
.dmp-route-link-rev {
  border-color: #BFDBFE;
  background: #EFF6FF;
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: .9rem;
}

/* ═══════════════════════════════════════════════════════
   AD SLOTS — AdSense safe, clear separation from content
═══════════════════════════════════════════════════════ */
.dmp-ad-slot {
  text-align: center;
  margin: 20px 0;
  clear: both;
  overflow: hidden;
}
.dmp-ad-slot-label {
  font-size: .68rem;
  color: var(--dmp-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
  display: block;
}
/* Prevent CLS — reserve space before ad loads */

@media (min-width: 769px) {
  
}
@media (max-width: 768px) {
  
}

/* ═══════════════════════════════════════════════════════
   STATION PAGE SPECIFIC
═══════════════════════════════════════════════════════ */
.dmp-line-pill {
  font-size: .75rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 3px 10px;
  letter-spacing: .03em;
}

/* ═══════════════════════════════════════════════════════
   LINE PAGE SPECIFIC
═══════════════════════════════════════════════════════ */
.dmp-line-header {
  background: var(--dmp-surface);
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--dmp-shadow);
}
.dmp-line-header h1 {
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 800;
  color: var(--dmp-primary);
  margin: 0 0 10px;
}
.dmp-line-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .85rem;
  color: var(--dmp-muted);
}
.dmp-line-meta-row span { font-weight: 500; }
.dmp-line-stations-list { display: flex; flex-direction: column; gap: 1px; }
.dmp-line-stn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--dmp-radius-sm);
  font-size: .88rem;
}
.dmp-line-stn-row:hover { background: var(--dmp-bg); }
.dmp-line-stn-ic { background: #FFFBEB; }
.dmp-stn-num { width: 28px; text-align: right; color: var(--dmp-muted); font-size: .78rem; flex-shrink: 0; }
.dmp-stn-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.dmp-stn-link { color: var(--dmp-text); text-decoration: none; font-weight: 500; flex: 1; }
.dmp-stn-link:hover { color: var(--dmp-accent); }
.dmp-ic-badge {
  font-size: .68rem;
  font-weight: 800;
  background: var(--dmp-yellow);
  color: #78350F;
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: .03em;
}
.dmp-xfer-pill {
  font-size: .7rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
}

/* ═══════════════════════════════════════════════════════
   TOURIST PAGE SPECIFIC
═══════════════════════════════════════════════════════ */
.dmp-tourist-nearest-card {
  background: var(--dmp-bg);
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius-sm);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dmp-tourist-nearest-card a {
  color: var(--dmp-accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════
   POPULAR ROUTES SECTION
═══════════════════════════════════════════════════════ */
.dmp-popular-routes-section { }
.dmp-popular-routes-section h2 { font-size: 1.05rem; }
.dmp-popular-group { margin-bottom: 16px; }
.dmp-popular-group-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dmp-muted);
  font-weight: 700;
  margin-bottom: 8px;
  padding-left: 2px;
}
.dmp-popular-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dmp-popular-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--dmp-bg);
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius-sm);
  padding: 9px 13px;
  font-size: .85rem;
  color: var(--dmp-text);
  text-decoration: none;
  transition: background .15s;
}
.dmp-popular-link:hover { background: #EFF6FF; border-color: #BFDBFE; }
.dmp-popular-link-meta {
  font-size: .75rem;
  color: var(--dmp-muted);
  display: flex;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════════════════════ */
@media print {
  .dmp-ad-slot,
  .dmp-reverse-btn,
  .dmp-route-header .dmp-reverse-btn,
  .dmp-internal-links { display: none !important; }
  .dmp-seo-section {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }
  .dmp-route-header { background: #1B2A4A !important; }
  .dmp-step::before { display: none; }
}

/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--dmp-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════
   OPEN FINDER BUTTON — v1.6.0
   Replaces the heavy lazy-loaded shortcode embed.
   Styled to match the rest of the SEO page design system.
═══════════════════════════════════════════════════════ */
.dmp-finder-btn-section {
  /* v3.2.9 FIX: text-align:center alone does not center inline-flex elements
     in all WordPress theme contexts. Using flex layout guarantees centering. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dmp-finder-btn-section h2 {
  margin-bottom: 8px;
  width: 100%;
  text-align: center;
  justify-content: center;
}
.dmp-finder-btn-section > p {
  text-align: center;
  width: 100%;
}
.dmp-open-finder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--dmp-accent);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 50px;
  border: 2px solid transparent;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
  transition: background .2s, box-shadow .2s, transform .1s;
  letter-spacing: .02em;
  cursor: pointer;
  line-height: 1.3;
}
.dmp-open-finder-btn:hover {
  background: #1d4ed8;
  box-shadow: 0 6px 20px rgba(37,99,235,.45);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.dmp-open-finder-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.dmp-ofb-icon {
  font-size: 1.25em;
  flex-shrink: 0;
}
.dmp-ofb-text {
  flex: 1;
}
.dmp-ofb-arrow {
  font-size: .9em;
  opacity: .8;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .dmp-open-finder-btn {
    width: 100%;
    padding: 14px 18px;
    font-size: .92rem;
    border-radius: 12px;
  }
}

/* ═══════════════════════════════════════════════════════
   CORNER FIX v1.6.0 — "kaniya" issue
   Some WordPress themes set overflow:hidden or clip-path
   on their content wrappers, which cuts off the rounded
   corners of .dmp-seo-section cards. This block ensures
   our components are always fully visible regardless of
   the active theme.
═══════════════════════════════════════════════════════ */
.dmp-seo-page *,
.dmp-seo-page *::before,
.dmp-seo-page *::after {
  box-sizing: border-box;
}
/* Prevent theme overflow clipping our cards */
.dmp-seo-wrap > .dmp-seo-section,
.dmp-seo-wrap > .dmp-route-header,
.dmp-seo-wrap > .dmp-route-stats-bar,
.dmp-seo-wrap > nav.dmp-breadcrumb {
  overflow: visible;
}
/* Ensure route-header gradient doesn't get clipped at corners */
.dmp-route-header {
  will-change: transform; /* creates own stacking context */
  transform: translateZ(0);
}

/* ═══════════════════════════════════════════════════════
   STATION ACCORDION TOGGLE — v2.4.4
═══════════════════════════════════════════════════════ */
.dmp-accordion-controls{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.dmp-accordion-btn{background:var(--dmp-surface);border:1px solid var(--dmp-border);color:var(--dmp-text);padding:6px 14px;border-radius:20px;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.dmp-accordion-btn:hover{background:var(--dmp-bg);border-color:var(--dmp-muted)}
.dmp-accordion-note{font-size:.74rem;color:var(--dmp-muted);font-style:italic}
.dmp-step{position:relative}
.dmp-step-toggle{position:absolute;right:8px;top:10px;width:28px;height:28px;border-radius:50%;border:1px solid var(--dmp-border);background:var(--dmp-surface);color:var(--dmp-muted);font-size:1.1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;flex-shrink:0;padding:0;z-index:2}
.dmp-step-toggle:hover{background:var(--dmp-bg);color:var(--dmp-text)}
.dmp-step.dmp-acc-open .dmp-step-toggle{background:var(--dmp-accent);color:#fff;border-color:var(--dmp-accent)}
.dmp-step.dmp-acc-open{background:#f0f7ff;border:1px solid #93c5fd;border-left-width:4px}
/* v3.2.9 FIX: Missing default hidden state for accordion body — was causing
   + Expand All / - Collapse All and individual + toggles to not work.
   Also removed two orphaned incomplete selectors above this block. */
.dmp-acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.dmp-step.dmp-acc-open .dmp-acc-body{max-height:600px}
.dmp-acc-inner{padding:10px 0 4px;border-top:1px dashed var(--dmp-border);margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:.78rem;color:var(--dmp-muted)}
.dmp-acc-row{display:flex;flex-direction:column;gap:2px}
.dmp-acc-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dmp-muted);font-weight:600;opacity:.7}
.dmp-acc-value{color:var(--dmp-text);font-weight:500}
.dmp-acc-full{grid-column:1/-1}
.dmp-acc-fac{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.dmp-acc-fac-tag{background:var(--dmp-bg);border:1px solid var(--dmp-border);border-radius:10px;padding:2px 8px;font-size:.7rem;color:var(--dmp-muted)}
.dmp-acc-plat-warn{grid-column:1/-1;font-size:.72rem;color:#92400e;background:#fef3c7;border:1px solid #fcd34d;border-radius:4px;padding:4px 8px;margin-top:2px}
.dmp-acc-stn-link{color:var(--dmp-accent);text-decoration:none;font-size:.75rem;font-weight:600}
.dmp-acc-stn-link:hover{text-decoration:underline}
.dmp-step-body{padding-right:36px}
@media(max-width:480px){.dmp-acc-inner{grid-template-columns:1fr;gap:5px}.dmp-acc-full{grid-column:1}.dmp-step-toggle{width:24px;height:24px;font-size:.95rem}.dmp-step-body{padding-right:30px}}

/* ═══════════════════════════════════════════════════════
   STATION PAGE — Platform Cards & Nearby Grid (v3.0.0)
═══════════════════════════════════════════════════════ */
.dmp-plat-card {
  background: var(--dmp-surface);
  border-radius: var(--dmp-radius-sm);
  padding: 12px 16px;
  margin-bottom: 10px;
  border-left: 4px solid var(--dmp-accent);
}
.dmp-plat-line {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dmp-muted);
  margin-bottom: 8px;
}
.dmp-plat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--dmp-border);
  font-size: .88rem;
}
.dmp-plat-row:last-child { border-bottom: none; }
.dmp-plat-no {
  background: var(--dmp-accent);
  color: #fff;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 3px 10px;
  width: auto;
  height: auto;
  min-width: 0;
}
.dmp-plat-dir { color: var(--dmp-text); flex: 1; }
.dmp-verified {
  font-size: .72rem;
  color: #16a34a;
  font-weight: 700;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 2px 7px;
}

/* Nearby stations grid */
.dmp-nearby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.dmp-nearby-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--dmp-surface);
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius-sm);
  text-decoration: none;
  color: var(--dmp-text);
  font-size: .85rem;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
.dmp-nearby-card:hover { border-color: var(--dmp-accent); background: #EFF6FF; }
.dmp-nearby-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dmp-nearby-name { flex: 1; }

/* Station header */
.dmp-stn-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--dmp-border);
}
.dmp-stn-header.dmp-closed { opacity: .75; }
.dmp-stn-icon { font-size: 2.4rem; line-height: 1; flex-shrink: 0; }
.dmp-stn-header h1 { margin: 0 0 6px; font-size: 1.4rem; color: var(--dmp-primary); }
.dmp-stn-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dmp-line-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .03em;
}
.dmp-closed-badge {
  display: inline-block;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 700;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .dmp-nearby-grid { grid-template-columns: 1fr 1fr; }
  .dmp-stn-header h1 { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════
   LINE PAGE v3.1 — Rich Layout (fare, timings, IC cards)
   + MOBILE FRIENDLY FIXES for all SEO page types
═══════════════════════════════════════════════════════ */

/* Line hero header enhancements */
.dmp-line-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.dmp-line-hero-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .05em;
  flex-shrink: 0;
}
.dmp-line-hero-desc {
  font-size: .9rem;
  color: var(--dmp-muted);
  margin: 0 0 12px;
  line-height: 1.6;
}

/* Timings grid */
.dmp-line-timings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.dmp-timing-card {
  background: var(--dmp-surface);
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius-sm);
  padding: 14px 16px;
  box-shadow: var(--dmp-shadow);
}
.dmp-timing-label {
  font-size: .75rem;
  color: var(--dmp-muted);
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dmp-timing-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dmp-primary);
}

/* Interchange cards grid */
.dmp-line-ic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.dmp-line-ic-card {
  display: block;
  background: var(--dmp-surface);
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--dmp-text);
  transition: border-color .15s, box-shadow .15s;
  box-shadow: var(--dmp-shadow);
}
.dmp-line-ic-card:hover { border-color: var(--dmp-accent); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.dmp-line-ic-name {
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 8px;
  color: var(--dmp-primary);
}
.dmp-line-ic-lines { display: flex; flex-wrap: wrap; gap: 6px; }

/* Closed station mini badge */
.dmp-closed-mini {
  font-size: .68rem;
  font-weight: 700;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.dmp-stn-closed .dmp-stn-link { opacity: .6; text-decoration: line-through; }

/* ═══════════════════════════════════════════════════════
   MOBILE FIXES — Touch friendly, readable on 360px+
═══════════════════════════════════════════════════════ */

/* Ensure touch targets are at least 44px tall */
.dmp-faq-q { min-height: 44px; }
.dmp-open-finder-btn { min-height: 48px; }
.dmp-line-stn-row { min-height: 40px; }
.dmp-stn-link { padding: 2px 0; }

/* Better fare table on mobile */
.dmp-fare-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dmp-fare-table th,
.dmp-fare-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--dmp-border);
}
.dmp-fare-table th {
  background: var(--dmp-bg);
  font-weight: 700;
  font-size: .78rem;
  color: var(--dmp-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dmp-fare-table tr:last-child td { border-bottom: none; }
.dmp-fare-table tbody tr:hover { background: var(--dmp-bg); }

/* Better platform card on mobile */
.dmp-plat-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--dmp-border);
}

/* SEO section spacing */
.dmp-seo-section {
  background: var(--dmp-surface);
  border: 1px solid var(--dmp-border);
  border-radius: var(--dmp-radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--dmp-shadow);
}
.dmp-seo-section h2 {
  font-size: clamp(.95rem, 2.5vw, 1.15rem);
  font-weight: 800;
  color: var(--dmp-primary);
  margin: 0 0 14px;
}

@media (max-width: 600px) {
  /* Wrap & stack on small screens */
  .dmp-line-timings-grid { grid-template-columns: 1fr 1fr; }
  .dmp-line-ic-grid { grid-template-columns: 1fr; }
  .dmp-line-meta-row { gap: 8px; font-size: .8rem; }
  .dmp-line-hero-top { gap: 8px; }
  .dmp-line-hero-badge { font-size: .72rem; padding: 3px 10px; }

  /* Station list on mobile */
  .dmp-stn-num { width: 22px; font-size: .72rem; }
  .dmp-stn-dot { width: 10px; height: 10px; }
  .dmp-stn-link { font-size: .85rem; }

  /* Fare table: scroll horizontally if too wide */
  .dmp-fare-table { font-size: .8rem; }
  .dmp-fare-table th, .dmp-fare-table td { padding: 8px 8px; }

  /* Finder button full width */
  .dmp-open-finder-btn { width: 100%; justify-content: center; font-size: .9rem; }

  /* Interchange cards one column */
  .dmp-line-ic-card { padding: 12px; }
  .dmp-line-ic-name { font-size: .85rem; }

  /* Platform cards */
  .dmp-plat-card { margin-bottom: 8px; }
  .dmp-plat-no { font-size: .82rem; }

  /* Nearby grid */
  .dmp-nearby-grid { grid-template-columns: 1fr 1fr; }

  /* Breadcrumb overflow */
  .dmp-breadcrumb { font-size: .78rem; flex-wrap: wrap; }

  /* FAQ */
  .dmp-faq-q { font-size: .88rem; padding: 12px 40px 12px 14px; }
  .dmp-faq-body { padding: 12px 14px; }
}

@media (max-width: 380px) {
  .dmp-line-timings-grid { grid-template-columns: 1fr; }
  .dmp-nearby-grid { grid-template-columns: 1fr; }
  .dmp-seo-section { padding: 14px; }
  .dmp-line-header { padding: 14px; }
  .dmp-timing-val { font-size: .95rem; }
}

/* ═══════════════════════════════════════════════════════
   DARK MODE — v3.2.8
   Supports both [data-theme="dark-disabled-permanently"] attribute (JS toggle)
   and @media (prefers-color-scheme: dark) (OS-level)
═══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) and (prefers-color-scheme: light) {/* FORCE-LIGHT v1: impossible condition, disables OS dark mode permanently */
  .dmp-seo-page:not([data-theme="light"]) {
    --dmp-primary: #93c5fd;
    --dmp-bg: #0f172a;
    --dmp-surface: #1e293b;
    --dmp-border: #334155;
    --dmp-text: #f1f5f9;
    --dmp-muted: #94a3b8;
    --dmp-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --dmp-shadow-md: 0 4px 6px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
  }
}

[data-theme="dark-disabled-permanently"] .dmp-seo-page,
.dmp-seo-page[data-theme="dark-disabled-permanently"] {
  --dmp-primary: #93c5fd;
  --dmp-bg: #0f172a;
  --dmp-surface: #1e293b;
  --dmp-border: #334155;
  --dmp-text: #f1f5f9;
  --dmp-muted: #94a3b8;
  --dmp-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --dmp-shadow-md: 0 4px 6px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
}

/* Explicit overrides for elements using hardcoded colours */
[data-theme="dark-disabled-permanently"] .dmp-alert-danger { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark-disabled-permanently"] .dmp-alert-warning { background: #451a03; border-color: #78350f; color: #fde68a; }
/* FIX v4.6.9: removed the old per-theme .dmp-faq-q / [aria-expanded] / .dmp-faq-body
   overrides here. They are no longer needed (and were part of the bug): the base
   .dmp-faq-q rule already tracks --dmp-primary/--dmp-bg automatically in dark
   mode, and hover/focus/expanded now always use a fixed accent-blue + white
   pairing (see FAQ SECTION block above) that is correct in every theme without
   any extra override. .dmp-faq-body still tracks var(--dmp-surface)/var(--dmp-text)
   automatically, so no explicit dark-mode override is required for it either. */
[data-theme="dark-disabled-permanently"] .dmp-stat-pill { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark-disabled-permanently"] .dmp-stat-pill.smart { background: #0d2442; border-color: #1d4ed8; color: #93c5fd; }
[data-theme="dark-disabled-permanently"] .dmp-seg-step { background: #1e293b; border-color: #334155; }
[data-theme="dark-disabled-permanently"] .dmp-step-ic { background: #2d1f00; border-color: #d97706; }
[data-theme="dark-disabled-permanently"] .dmp-nearby-item { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark-disabled-permanently"] .dmp-plat-row { border-color: #334155; }
[data-theme="dark-disabled-permanently"] .dmp-line-stn-row { border-color: #334155; }
[data-theme="dark-disabled-permanently"] .dmp-line-stn-row.dmp-line-stn-ic { background: #2d2000; }
[data-theme="dark-disabled-permanently"] .dmp-open-finder-btn { background: #1d4ed8; color: #fff; }
[data-theme="dark-disabled-permanently"] .dmp-open-finder-btn:hover { background: #1e40af; }
[data-theme="dark-disabled-permanently"] .dmp-fare-note { background: #1e293b; color: #94a3b8; }
[data-theme="dark-disabled-permanently"] .dmp-copy-route-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-theme="dark-disabled-permanently"] .dmp-copy-route-btn:hover { background: #273548; }

/* ═══════════════════════════════════════════════════════
   CUSTOM CONTENT (CC) BLOCK — LAYOUT SAFETY FIX (v2)
   v4.6.64 — v1 (v4.6.63) only neutralized float on <img> and
   WordPress's own .alignleft/.alignright/.aligncenter classes.
   That missed the real-world case: admin-pasted HTML with an
   inline style="float:left/right" on ANY element (a <div>,
   <span>, <table>, etc.), which v1 did not touch at all — so
   the sideways-shift bug was still possible and was reported
   as still happening after v1.
   This version is a wildcard: it forces float:none on every
   descendant of a CC block, which — per the CSS spec — DOES
   win over a plain inline style="float:..." (an !important
   rule in a stylesheet beats a non-!important inline style).
   Also resets display on the block itself in case the admin's
   pasted root element was inline/inline-block/flex.
═══════════════════════════════════════════════════════ */
.dmp-custom-content-block.dmp-cc-seo {
  display: block !important;
  width: 100%;
  max-width: 100%;
  clear: both;
  float: none !important;
  overflow: visible;
}
.dmp-custom-content-block.dmp-cc-seo::after {
  content: "";
  display: table;
  clear: both;
}
.dmp-custom-content-block.dmp-cc-seo * {
  float: none !important;
}
.dmp-custom-content-block.dmp-cc-seo img,
.dmp-custom-content-block.dmp-cc-seo video,
.dmp-custom-content-block.dmp-cc-seo iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}