/* Guides inside the shared site navigation and footer (see guideShell.js). */
.guides-page.has-site-nav { padding-top: 0; }

/* ---------- Arriving: "Getting online on arrival" as clear numbered steps ---------- */
.guides-page .guide-place-card .guide-arrival-block .guide-online-steps {
  counter-reset: gstep;
  list-style: none;
  padding: 0;
  gap: 0.75rem;
}
.guides-page .guide-place-card .guide-arrival-block .guide-online-steps li {
  counter-increment: gstep;
  display: block;
  position: relative;
  padding-left: 2.1rem;
  line-height: 1.55;
}
.guides-page .guide-place-card .guide-arrival-block .guide-online-steps li[hidden] { display: none; }
.guides-page .guide-place-card .guide-arrival-block .guide-online-steps li::before {
  content: counter(gstep);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--guide-primary, #4f46e5);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
.guides-page .guide-place-card .guide-arrival-block .guide-online-steps a,
.guides-page .guide-place-card .guide-online-more a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.guides-page .guide-place-card .guide-arrival-block:has(.guide-online-steps) {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}
.guides-page .guide-place-card .guide-online-more {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid #c7d2fe;
}

/* ---------- Weather: visible rain with mm values, °C / °F toggle ---------- */
.guides-page .gc-units {
  display: inline-flex;
  justify-self: start;
  padding: 3px;
  border: 1px solid var(--guide-border, #e2e8f0);
  border-radius: 999px;
  background: #f8fafc;
}
.guides-page .gc-units button {
  min-width: 3rem;
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--guide-text-muted, #475569);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.guides-page .gc-units button[aria-pressed="true"] { background: #fff; color: var(--guide-text, #0f172a); box-shadow: 0 1px 3px rgb(15 23 42 / .15); }
.guides-page .gc-units button:focus-visible { outline: 2px solid var(--guide-primary, #4f46e5); outline-offset: 2px; }

.guides-page .gc-legend-rain::before { background: #2563eb; }
.guides-page .gc-col { grid-template-columns: 2.25rem 2.5rem minmax(0, 1fr) 2.5rem 5.25rem; }
.guides-page .gc-rain {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: auto;
  background: none;
  border-radius: 0;
}
.guides-page .gc-rain-bar {
  position: relative;
  flex: 0 0 1.75rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #dbeafe;
  overflow: hidden;
}
.guides-page .gc-rain-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rain);
  min-width: 2px;
  border-radius: 999px;
  background: #2563eb;
}
.guides-page .gc-rain-mm {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1d4ed8;
  white-space: nowrap;
}
.guides-page .gc-rain-mm small { font-size: 0.65rem; font-weight: 600; color: #3b82f6; }

@container (min-width: 34rem) {
  .guides-page .gc-col { grid-template-columns: none; grid-template-rows: auto 8rem auto 3.25rem auto; }
  .guides-page .gc-rain { flex-direction: column-reverse; justify-content: flex-start; gap: 0.2rem; width: auto; height: 100%; }
  .guides-page .gc-rain-bar { flex: 1 1 auto; width: 0.625rem; height: auto; border-radius: 3px; }
  .guides-page .gc-rain-bar span { inset: auto 0 0 0; width: auto; height: var(--rain); border-radius: 3px 3px 0 0; }
  .guides-page .gc-rain-mm small { display: none; }
}
.guides-page .gc-fact-detail span[data-c] { font-weight: inherit; color: inherit; }
/* guide-climate.css styles every `.gc-rain span` as the old fill; undo that for the new parts. */
.guides-page .gc-rain > .gc-rain-bar { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: auto; background: #dbeafe; }
.guides-page .gc-rain > .gc-rain-mm { position: static; width: auto; height: auto; background: none; border-radius: 0; }
.guides-page .gc-col { gap: 0.4rem; }
@media (max-width: 420px) {
  .guides-page .gc-col { grid-template-columns: 2rem 2.25rem minmax(0, 1fr) 2.25rem 3.6rem; }
  .guides-page .gc-rain > .gc-rain-bar { flex-basis: 1.25rem; }
  .guides-page .gc-rain-mm small { display: none; }
}
@container (min-width: 34rem) {
  .guides-page .gc-rain > .gc-rain-bar { flex: 1 1 auto; width: 0.625rem; height: auto; border-radius: 3px; }
  .guides-page .gc-rain > .gc-rain-bar span { inset: auto 0 0 0; width: auto; height: var(--rain); }
}

/* Family call to action inside the guide eSIM card (guideCatalogueService). */
.guides-page .guide-esim-family { display: flex; align-items: center; gap: 0.85rem; margin-top: 1rem; padding: 0.85rem 1rem; border: 1px solid #c7d2fe; border-radius: 14px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); color: #1e1b4b; text-decoration: none; font-size: 0.9rem; line-height: 1.45; transition: border-color .15s ease, transform .15s ease; }
.guides-page .guide-esim-family:hover { border-color: #818cf8; transform: translateY(-1px); color: #1e1b4b; }
.guides-page .guide-esim-family:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
.guides-page .guide-esim-family strong { display: block; color: #312e81; font-weight: 800; }
.guides-page .guide-esim-family-icon { flex: 0 0 2.25rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: #4f46e5; color: #fff; }
.guides-page .guide-esim-family-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guides-page .guide-esim-family-go { margin-inline-start: auto; font-weight: 800; color: #4f46e5; }

/* Quiet link from the arrival box to the airport transfers guide. */
.guides-page .perk-hint { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--guide-text-muted); }
.guides-page .perk-hint a { font-weight: 700; color: var(--guide-primary-dark, #4338ca); }