/* Trip picker on city pages and travel guides (loaded with plan-picker.css only there).
   Country and /uk pages never load this file. */

/* ---------- City pages: the picker takes the place of the trip cards ---------- */
.city-experience #city-buying-guide.pp { scroll-margin-top: 140px; }
.ce-route-check { margin-top: 0; }

/* ---------- Travel guides: compact rows inside the "Staying connected" card ---------- */
.pp.is-guide { margin: 4px 0 14px; padding: 0; background: transparent; container-type: inline-size; }
.pp.is-guide .pp-wrap { max-width: none; padding: 0; }
.guide-city-section.guide-esim-card .pp.is-guide { max-width: 36rem; }
.pp-g-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.pp-g-title { font-size: 1rem; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; color: var(--pp-ink); }
.pp.is-guide .pp-currency { padding: 3px 10px; font-size: .75rem; }
.pp-g-list { display: grid; gap: 10px; }
.pp-g-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--pp-line); color: var(--pp-ink) !important; text-decoration: none !important; transition: box-shadow .2s ease, transform .15s ease; }
.pp-g-row:hover { box-shadow: inset 0 0 0 1.5px var(--pp-brand), var(--pp-shadow); }
.pp-g-row:focus-visible { outline: 3px solid var(--pp-brand); outline-offset: 2px; }
.pp-g-row .pp-icon { width: 40px; height: 40px; border-radius: 12px; }
.pp-g-copy { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.pp-g-name { font-size: .9375rem; line-height: 1.25; font-weight: 800; color: var(--pp-ink); }
.pp-g-meta { font-size: .8125rem; line-height: 1.4; color: var(--pp-muted); }
.pp-g-plan { font-weight: 700; color: var(--pp-ink-2); white-space: nowrap; }
.pp-g-price { font-size: 1.0625rem; font-weight: 800; color: var(--pp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-g-row .pp-arrow { width: 18px; height: 18px; color: var(--pp-brand); transition: transform .2s ease; }
.pp-g-row:hover .pp-arrow { transform: translateX(3px); }
[dir="rtl"] .pp-g-row:hover .pp-arrow { transform: scaleX(-1) translateX(3px); }
.pp-g-item.is-featured .pp-g-row { padding: 11px 13px; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--pp-brand), var(--pp-violet) 60%, #c026d3) border-box; box-shadow: var(--pp-shadow-lg); }
.pp-g-item.is-featured .pp-icon { color: #fff; background: linear-gradient(135deg, var(--pp-brand), var(--pp-violet)); }
.pp-g-item.is-featured .pp-g-price { color: var(--pp-brand-ink); }
.pp-g-item.is-featured { margin-top: 8px; }
/* The badge sits on the featured row's top edge, like the full picker's cards, so it never squeezes the text. */
.pp-g-badge { position: absolute; top: 0; inset-inline-start: 65px; z-index: 1; transform: translateY(-50%); max-width: calc(100% - 80px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 10px; border-radius: 999px; font-size: .6875rem; line-height: 1.3; font-weight: 800; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--pp-brand), var(--pp-violet)); box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .8); }
.pp-g-item.is-featured .pp-g-row { padding-top: 15px; }
.pp.is-guide .pp-shared { gap: 6px 10px; margin-top: 12px; padding: 0; }
.pp.is-guide .pp-shared li { min-height: 0; padding: 4px 10px; font-size: .8125rem; }
/* Narrow cards (phones, the country guide sidebar): trip and plan on their own lines. */
@container (max-width: 420px) { .pp-g-sep { display: none; } .pp-g-trip, .pp-g-plan { display: block; } }
[dir="rtl"] .pp-g-price { unicode-bidi: isolate; direction: ltr; }
@media (max-width: 359px) { .pp-g-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding-inline: 12px; } .pp-g-row .pp-arrow { display: none; } .pp-g-row .pp-icon { width: 36px; height: 36px; } .pp-g-badge { inset-inline-start: 58px; } }
@media (prefers-reduced-motion: reduce) { .pp-g-row, .pp-g-row .pp-arrow { transition: none; } .pp-g-row:hover .pp-arrow { transform: none; } }
@media (forced-colors: active) { .pp-g-row { border: 1px solid CanvasText; } }
@media print { .pp.is-guide { display: none; } }