/* /esim-day-pass (src/services/dayPassPage.js). Builds on hubs.css. */
.dp .hub-hero p { color: #e0e7ff; }
.dp-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 1.25rem; }
.dp-stats div { display: flex; align-items: baseline; gap: 0.375rem; }
.dp-stats strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.dp-stats span { font-size: 0.9375rem; color: #e0e7ff; }

/* Search, in the hero (revealed by /scripts/day-pass.js) */
.dp-search { max-width: 34rem; margin: 1.5rem 0 0; }
/* Space is reserved before the script reveals the search, so nothing shifts. */
.dp-search.is-pending { visibility: hidden; }
.dp-search label { display: block; margin-bottom: 0.5rem; font-weight: 700; color: #fff; }
.dp-search-field { position: relative; }
.dp-search-field svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #475569; pointer-events: none; }
.dp-search input { width: 100%; min-height: 52px; padding: 0.75rem 1rem 0.75rem 2.875rem; border: 2px solid transparent; border-radius: 0.875rem; background: #fff; font-size: 1rem; color: #0f172a; box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.45); }
.dp-search input::placeholder { color: #64748b; }
.dp-search input:focus-visible { outline: 3px solid #fde68a; outline-offset: 2px; }
.dp .hub-hero .dp-search-status { min-height: 1.25rem; margin: 0.5rem 0 0; font-size: 0.9375rem; font-weight: 600; color: #fff; }
.dp-empty { padding: 1rem 1.25rem; border: 1px dashed #94a3b8; border-radius: 0.875rem; background: #fff; color: #334155; }
.dp-empty a { color: #312e81; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Destination grid and cards */
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 0.625rem; align-items: start; }
.dp-dest { border: 1px solid #e2e8f0; border-radius: 0.875rem; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.dp-dest[open] { grid-column: 1 / -1; border-color: #a5b4fc; box-shadow: 0 12px 30px -18px rgba(67, 56, 202, 0.45); }
.dp-dest summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem; min-height: 64px; padding: 0.625rem 0.75rem 0.625rem 0.875rem; cursor: pointer; list-style: none; border-radius: inherit; }
.dp-dest summary::-webkit-details-marker, .dp-region summary::-webkit-details-marker { display: none; }
.dp-dest summary:hover { background: #f8fafc; }
.dp-dest summary:focus-visible, .dp-region summary:focus-visible { outline: 3px solid #4338ca; outline-offset: 2px; }
.dp-flag { display: inline-flex; width: 28px; justify-content: center; color: #4338ca; }
.dp-flag img { width: 28px; height: 21px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px #e2e8f0; }
.dp-dest-name { display: grid; gap: 0.125rem; min-width: 0; }
.dp-dest-name strong { font-size: 1rem; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.dp-dest-name small { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: #475569; }
.dp-dest-from { display: grid; justify-items: end; line-height: 1.15; text-align: right; white-space: nowrap; }
.dp-dest-from small { font-size: 0.75rem; color: #475569; }
.dp-dest-from strong { font-size: 1.0625rem; font-weight: 800; color: #312e81; }
.dp-chevron { flex: none; color: #4338ca; transition: transform 0.15s; }
details[open] > summary > .dp-chevron { transform: rotate(180deg); }
.dp-dest-body { padding: 0.25rem 0.875rem 1rem; border-top: 1px solid #eef2ff; }
.dp-dest-hint { margin: 0.625rem 0; font-size: 0.8125rem; font-weight: 600; color: #475569; }
.dp-dest-more { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; margin-top: 0.5rem; color: #312e81; font-size: 0.9375rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dp-dest-more:focus-visible { outline: 3px solid #4338ca; outline-offset: 2px; border-radius: 4px; }
.dp-5g { display: inline-block; padding: 0.0625rem 0.4375rem; border-radius: 999px; background: #4338ca; color: #fff; font-size: 0.6875rem; font-weight: 800; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.dp-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.375rem 0.75rem; border: 1px solid #c7d2fe; border-radius: 0.75rem; background: #fff; color: #1e1b4b; font-size: 0.875rem; text-decoration: none; }
.dp-chip strong { color: #312e81; }
.dp-chip:hover { border-color: #4338ca; background: #eef2ff; }
.dp-chip:focus-visible { outline: 3px solid #4338ca; outline-offset: 2px; }

/* Regions: one collapsible group each */
.dp-regions { display: grid; gap: 0.625rem; }
.dp-region { border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; }
.dp-region > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 0.875rem 1.125rem; cursor: pointer; list-style: none; border-radius: inherit; }
.dp-region > summary:hover { background: #f8fafc; }
.dp-region-head { display: grid; gap: 0.125rem; }
.dp-region-head h3 { margin: 0; font-size: 1.125rem; font-weight: 800; color: #0f172a; }
.dp-region-head span { font-size: 0.875rem; color: #475569; }
.dp-region-head strong { color: #312e81; }
.dp-region[open] > summary { border-bottom: 1px solid #eef2ff; border-radius: 1rem 1rem 0 0; }
.dp-region > .dp-grid { padding: 0.875rem; background: #f8fafc; border-radius: 0 0 1rem 1rem; }
.dp-popular .dp-grid { margin-top: 0.25rem; }

/* How it works */
.dp-steps { list-style: none; counter-reset: dp; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.875rem; margin: 1rem 0 0; padding: 0; }
.dp-steps li { counter-increment: dp; display: grid; gap: 0.375rem; padding: 1.125rem 1.25rem; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; }
.dp-steps li::before { content: counter(dp, decimal-leading-zero); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; color: #4338ca; }
.dp-steps strong { font-size: 1rem; color: #0f172a; }
.dp-steps span { font-size: 0.9375rem; line-height: 1.6; color: #475569; }

@media (max-width: 640px) {
  .dp-dest summary { gap: 0.625rem; padding: 0.5rem 0.5rem 0.5rem 0.75rem; }
  .dp-region > summary { padding: 0.75rem 0.875rem; }
  .dp-region > .dp-grid { padding: 0.625rem; }
  .dp-dest-body { padding: 0.25rem 0.75rem 0.875rem; }
}
@media (prefers-reduced-motion: reduce) { .dp-chevron, .dp-dest { transition: none; } }
@media (min-width: 900px) {
  .dp-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dp-region[open] { grid-column: 1 / -1; }
}