/* =========================================================
   Qurikvoy — Custom Trip Planner
   desktop ≥1024 · tablet 768–1023 · mobile ≤767
   ========================================================= */
.page-planner {
  --p-ink: #1c1b1b;
  --p-text: #414751;
  --p-muted: #717782;
  --p-blue: #005a9a;
  --p-blue-2: #2373ba;
  --p-deep: #001d36;
  --p-rust: #bf4b0e;
  --p-badge: #d2e4ff;
  --p-cream: #fcf9f8;
  --p-sand: #f6f3f2;
  --p-chip: #f0eded;
  --p-line: #e7e2e0;
  --p-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --p-shadow-lg: 0 24px 48px -24px rgba(0, 29, 54, 0.35);
  background: var(--p-cream);
}

/* ---------- shared ---------- */
.page-planner [hidden] { display: none !important; }
.cp-sec { padding: 56px 0; }
.cp-sec--sand { background: var(--p-sand); }
.cp-sec--last { padding-bottom: 80px; }
.cp-head { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 700px; margin: 0 auto 28px; text-align: center; }
.cp-kicker { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.55px; text-transform: uppercase; color: var(--p-blue); }
.cp-h2 { margin: 4px 0 0; font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.72px; color: var(--p-ink); }
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, opacity 0.2s; }
.cp-btn:hover { transform: translateY(-2px); }
.cp-btn:disabled { opacity: 0.65; cursor: wait; transform: none; }
.cp-btn--blue { background: linear-gradient(90deg, var(--p-blue), var(--p-blue-2)); color: #fff; box-shadow: 0 10px 20px -10px rgba(0, 90, 154, 0.7); }
.cp-btn--gradient { background: linear-gradient(90deg, var(--p-rust), #9a3800); color: #fff; box-shadow: 0 12px 22px -10px rgba(191, 75, 14, 0.7); }
.cp-btn--soft { background: var(--p-chip); color: var(--p-ink); }
.cp-btn--soft:hover { background: #e7e3e3; }
.cp-btn--wa { background: #25d366; color: #fff; box-shadow: 0 10px 20px -10px rgba(37, 211, 102, 0.8); }
.cp-btn--light { background: #fff; color: var(--p-deep); }
.cp-btn:focus-visible, .cp-steps__btn:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; }

/* =========================================================
   1. HERO
   ========================================================= */
.cp-hero { padding: 8px 0 48px; background: linear-gradient(180deg, var(--p-sand) 0%, var(--p-cream) 100%); }
.cp-crumbs { display: flex; gap: 8px; margin: 0; padding: 16px 0; list-style: none; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--p-text); }
.cp-crumbs li + li::before { content: '›'; margin-right: 8px; color: var(--p-muted); }
.cp-crumbs a:hover { color: var(--p-blue); }
.cp-crumbs strong { font-weight: 600; color: var(--p-blue); }
.cp-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.cp-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--p-badge); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.3px; color: var(--p-deep); }
.cp-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--p-blue); animation: cp-pulse 2.2s ease-out infinite; }
@keyframes cp-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 90, 154, 0.5); } 100% { box-shadow: 0 0 0 8px rgba(0, 90, 154, 0); } }
.cp-hero h1 { margin: 0; font-size: 50px; line-height: 58px; font-weight: 800; letter-spacing: -1.2px; color: var(--p-ink); }
.cp-hero h1 span { display: block; background: linear-gradient(90deg, #005a9a 0%, #2373ba 50%, #bf4b0e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-hero__text { max-width: 580px; font-size: 18px; line-height: 28px; color: var(--p-text); }
.cp-hero__points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.cp-hero__points li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--p-ink); }
.cp-hero__visual { position: relative; margin: 0; overflow: hidden; border-radius: 24px; background: var(--p-sand); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.cp-hero__visual img { display: block; width: 100%; height: 440px; object-fit: cover; }
.cp-hero__visual figcaption { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: rgba(252, 249, 248, 0.95); font-size: 13px; font-weight: 700; line-height: 18px; color: var(--p-ink); box-shadow: var(--p-shadow); }
.cp-hero__visual figcaption span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--p-badge); color: var(--p-blue); }


/* =========================================================
   2. WIZARD
   ========================================================= */
.cp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.cp-wizard { padding: 32px; border-radius: 24px; background: #fff; box-shadow: var(--p-shadow-lg); scroll-margin-top: 130px; }
.cp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cp-steps__btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; text-align: left; font-size: 12px; font-weight: 600; line-height: 15px; color: var(--p-muted); }
.cp-steps__btn b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--p-chip); font-size: 12px; color: var(--p-text); transition: background 0.25s, color 0.25s; }
.cp-steps__btn:disabled { cursor: default; }
.cp-steps__btn.is-done { color: var(--p-ink); }
.cp-steps__btn.is-done b { background: var(--p-badge); color: var(--p-blue); }
.cp-steps__btn.is-current { color: var(--p-blue); }
.cp-steps__btn.is-current b { background: var(--p-blue); color: #fff; }
.cp-progress { height: 4px; margin: 14px 0 28px; border-radius: 4px; background: var(--p-chip); overflow: hidden; }
.cp-progress span { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--p-blue), var(--p-rust)); transition: width 0.5s var(--ease); }

.cp-panel { min-width: 0; margin: 0; padding: 0; border: 0; }
.cp-panel[hidden] { display: none; }
.cp-panel legend { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; padding: 0; font-size: 26px; line-height: 34px; font-weight: 700; letter-spacing: -0.4px; color: var(--p-ink); }
.cp-panel__num { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.55px; text-transform: uppercase; color: var(--p-rust); }
.cp-label { margin: 22px 0 10px; font-size: 13px; font-weight: 700; line-height: 18px; color: var(--p-ink); }
.cp-panel legend + .cp-label { margin-top: 0; }
.cp-label small { font-weight: 500; color: var(--p-muted); }
.page-planner input[type="radio"], .page-planner input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

.cp-tick { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--p-blue); color: #fff; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.25s var(--ease); }

.cp-dests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cp-dest { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--p-line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease); }
.cp-dest:hover { transform: translateY(-3px); box-shadow: var(--p-shadow); }
.cp-dest__media { position: relative; display: grid; place-items: center; height: 110px; overflow: hidden; background: linear-gradient(135deg, #d2e4ff, #ffdbcd); }
.cp-dest__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-dest__media > i { font-size: 34px; font-style: normal; }
.cp-dest__media em { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 29, 54, 0.75); font-size: 10px; font-style: normal; font-weight: 700; line-height: 14px; color: #fff; }
.cp-dest__body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.cp-dest strong { font-size: 14px; line-height: 19px; color: var(--p-ink); }
.cp-dest small { font-size: 11px; line-height: 15px; color: var(--p-muted); }
.cp-dest .cp-dest__best { margin-top: 2px; color: var(--p-blue); font-weight: 600; }
.cp-dest input:checked ~ .cp-dest__media .cp-tick { opacity: 1; transform: none; }
.cp-dest:has(input:checked) { border-color: var(--p-blue); box-shadow: 0 0 0 3px rgba(0, 90, 154, 0.12); }
.cp-dest:has(input:focus-visible), .cp-option:has(input:focus-visible), .cp-chip:has(input:focus-visible), .cp-month:has(input:focus-visible) { outline: 2px solid var(--p-blue); outline-offset: 2px; }

.cp-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cp-month { position: relative; cursor: pointer; }
.cp-month span { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border: 2px solid var(--p-line); border-radius: 12px; transition: border-color 0.2s, background 0.2s; }
.cp-month strong { font-size: 14px; line-height: 18px; color: var(--p-ink); }
.cp-month small { font-size: 11px; line-height: 14px; color: var(--p-muted); }
.cp-month:hover span { border-color: #b8c7d8; }
.cp-month input:checked + span { border-color: var(--p-blue); background: var(--p-blue); }
.cp-month input:checked + span strong, .cp-month input:checked + span small { color: #fff; }

.cp-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 40px; }
.cp-counter .cp-label { margin-top: 22px; }
.cp-stepper { display: inline-flex; align-items: center; border: 2px solid var(--p-line); border-radius: 14px; overflow: hidden; }
.cp-stepper button { width: 46px; height: 46px; font-size: 22px; font-weight: 600; color: var(--p-blue); transition: background 0.2s; }
.cp-stepper button:hover { background: var(--p-sand); }
.cp-stepper button:disabled { color: #c5cbd3; cursor: not-allowed; background: none; }
.cp-stepper input { width: 58px; height: 46px; border: 0; border-inline: 2px solid var(--p-line); text-align: center; font: inherit; font-size: 18px; font-weight: 700; color: var(--p-ink); -moz-appearance: textfield; }
.cp-stepper input::-webkit-outer-spin-button, .cp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-stepper input:focus { outline: none; background: #f5f9ff; }
.cp-counter > small { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--p-muted); }
.cp-switch { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; max-width: 320px; margin-top: 50px; cursor: pointer; }
.cp-switch span { grid-row: span 2; position: relative; width: 44px; height: 26px; border-radius: 999px; background: #cfd6de; transition: background 0.25s; }
.cp-switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.25s var(--ease); }
.cp-switch input:checked + span { background: var(--p-blue); }
.cp-switch input:checked + span::after { transform: translateX(18px); }
.cp-switch input:focus-visible + span { outline: 2px solid var(--p-blue); outline-offset: 2px; }
.cp-switch b { font-size: 14px; line-height: 18px; color: var(--p-ink); }
.cp-switch small { font-size: 12px; line-height: 16px; color: var(--p-muted); }

.cp-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cp-chip { position: relative; cursor: pointer; }
.cp-chip span { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; height: 100%; padding: 12px 14px; border: 2px solid var(--p-line); border-radius: 14px; transition: border-color 0.2s, background 0.2s; }
.cp-chip i { grid-row: span 2; font-size: 22px; font-style: normal; line-height: 1; }
.cp-chip b { font-size: 13px; line-height: 18px; color: var(--p-ink); }
.cp-chip small { font-size: 11px; line-height: 15px; color: var(--p-muted); }
.cp-chip:hover span { border-color: #b8c7d8; }
.cp-chip input:checked + span { border-color: var(--p-blue); background: #f2f7fd; }

.cp-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cp-option { position: relative; cursor: pointer; }
.cp-option > span { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; height: 100%; padding: 14px 44px 14px 14px; border: 2px solid var(--p-line); border-radius: 14px; transition: border-color 0.2s, background 0.2s; }
.cp-option i { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--p-sand); font-size: 22px; font-style: normal; }
.cp-option b { font-size: 14px; line-height: 19px; color: var(--p-ink); }
.cp-option small { font-size: 12px; line-height: 16px; color: var(--p-muted); }
.cp-option em { font-size: 11px; font-style: normal; font-weight: 700; line-height: 15px; color: var(--p-blue); }
.cp-option .cp-tick { top: 50%; right: 12px; margin-top: -13px; }
.cp-option:hover > span { border-color: #b8c7d8; }
.cp-option input:checked + span { border-color: var(--p-blue); background: #f2f7fd; }
.cp-option input:checked + span .cp-tick { opacity: 1; transform: none; }

.cp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.cp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-field--full { grid-column: 1 / -1; }
.cp-field > span { font-size: 12px; font-weight: 700; line-height: 16px; color: var(--p-ink); }
.cp-field small { font-weight: 500; color: var(--p-muted); }
.cp-field input, .cp-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 2px solid transparent; border-radius: 12px; background: var(--p-sand); font: inherit; font-size: 14px; color: var(--p-ink); transition: border-color 0.2s, background 0.2s; }
.cp-field textarea { resize: vertical; }
.cp-field input:focus, .cp-field textarea:focus { outline: none; border-color: rgba(0, 90, 154, 0.5); background: #fff; }
.cp-field.is-invalid input { border-color: #d93025; background: #fff6f5; }
.cp-field__error { font-size: 11px; font-weight: 600; color: #c5221f; }

.cp-error { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: #fdecea; font-size: 13px; font-weight: 600; line-height: 19px; color: #b3261e; }
.cp-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--p-chip); }
.cp-nav [data-next], .cp-nav [data-submit] { margin-left: auto; }

.cp-done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 8px 8px; text-align: center; outline: none; }
.cp-done[hidden] { display: none; }
.cp-done__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 10px rgba(37, 211, 102, 0.15); }
.cp-done h2 { margin: 8px 0 0; font-size: 26px; line-height: 34px; color: var(--p-ink); }
.cp-done p { max-width: 520px; font-size: 15px; line-height: 24px; color: var(--p-text); }
.cp-done__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* summary */
.cp-summary { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: var(--p-shadow-lg); }
.pl-native-sticky .cp-summary { position: sticky; top: var(--pl-top, 120px); }
.cp-summary__media { position: relative; display: grid; place-items: center; height: 150px; background: linear-gradient(135deg, #d2e4ff 0%, #ffdbcd 100%); font-size: 13px; font-weight: 600; color: var(--p-text); }
.cp-summary__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-summary__body { padding: 20px 22px 22px; }
.cp-summary__kicker { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.55px; text-transform: uppercase; color: var(--p-rust); }
.cp-summary h2 { margin: 4px 0 12px; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--p-ink); }
.cp-summary dl { margin: 0; }
.cp-summary dl div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--p-chip); font-size: 13px; line-height: 18px; }
.cp-summary dt { flex: none; color: var(--p-muted); }
.cp-summary dd { margin: 0; font-weight: 600; text-align: right; color: var(--p-ink); }
.cp-estimate { margin-top: 12px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #001d36 0%, #00497c 100%); color: #fff; }
.cp-estimate p { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.55px; text-transform: uppercase; color: #9ecaff; }
.cp-estimate strong { display: block; margin-top: 4px; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.3px; }
.cp-estimate small { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: #c8dcf2; }
.cp-summary__note { margin-top: 10px; font-size: 11px; line-height: 16px; color: var(--p-muted); }
.cp-summary__wa { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; color: #128c4a; text-decoration: underline; text-underline-offset: 3px; }

.cp-bar { display: none; }

/* =========================================================
   3. HOW IT WORKS, FAQ, CTA
   ========================================================= */
.cp-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cp-how__card { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 20px; background: #fff; box-shadow: var(--p-shadow); }
.cp-how__card span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--p-badge); font-size: 18px; font-weight: 800; color: var(--p-blue); }
.cp-how__card h3 { margin: 6px 0 0; font-size: 19px; line-height: 26px; color: var(--p-ink); }
.cp-how__card p { font-size: 14px; line-height: 22px; color: var(--p-text); }

.cp-faq { max-width: 860px; }
.cp-acc { display: flex; flex-direction: column; gap: 6px; }
.cp-acc__item { overflow: hidden; border-radius: 16px; background: var(--p-sand); }
.cp-acc h3 { margin: 0; }
.cp-acc button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px; text-align: left; font-size: 17px; font-weight: 600; line-height: 24px; color: var(--p-ink); }
.cp-acc button i { position: relative; flex: none; width: 14px; height: 14px; }
.cp-acc button i::before, .cp-acc button i::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: var(--p-blue); transition: transform 0.3s var(--ease); }
.cp-acc button i::after { transform: rotate(90deg); }
.cp-acc button[aria-expanded="true"] i::after { transform: rotate(0); }
.cp-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.cp-acc__panel > div { overflow: hidden; }
.cp-acc__item.is-open .cp-acc__panel { grid-template-rows: 1fr; }
.cp-acc__panel p { padding: 0 18px 18px; font-size: 15px; line-height: 24px; color: var(--p-text); }

.cp-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; overflow: hidden; padding: 40px; border-radius: 24px; background: linear-gradient(135deg, #001d36 0%, #00497c 100%); box-shadow: var(--p-shadow-lg); }
.cp-cta__ring { position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; border: 36px solid rgba(255, 255, 255, 0.07); border-radius: 50%; pointer-events: none; }
.cp-cta > div { position: relative; }
.cp-cta h2 { margin: 0; font-size: 30px; line-height: 38px; color: #fff; }
.cp-cta p { max-width: 560px; margin-top: 6px; font-size: 15px; line-height: 24px; color: #9ecaff; }
.cp-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1023px) {
  .cp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cp-hero h1 { font-size: 42px; line-height: 50px; }
  .cp-layout { grid-template-columns: minmax(0, 1fr); }
  .cp-aside { order: 2; }
  .pl-native-sticky .cp-summary { position: static; }
  .cp-dests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-steps__btn span { display: none; }
  .cp-steps__btn { justify-content: center; }
  .cp-cta { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {
  .cp-sec { padding: 36px 0; }
  .cp-sec--last { padding-bottom: 56px; }
  .cp-h2 { font-size: 27px; line-height: 34px; letter-spacing: -0.5px; }
  .cp-hero { padding-bottom: 32px; }
  .cp-crumbs { padding: 12px 0; }
  .cp-hero__copy { gap: 14px; }
  .cp-hero h1 { font-size: 34px; line-height: 41px; letter-spacing: -0.8px; }
  .cp-hero__text { font-size: 15px; line-height: 24px; }
  .cp-hero__copy > .cp-btn { width: 100%; }
  .cp-hero__visual img { height: 300px; }

  .cp-wizard { padding: 20px 16px; border-radius: 20px; }
  .cp-steps { gap: 4px; }
  .cp-progress { margin: 10px 0 20px; }
  .cp-panel legend { font-size: 21px; line-height: 28px; }
  .cp-dests { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cp-dest__media { height: 90px; }
  .cp-dest:hover { transform: none; }
  .cp-months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cp-row { gap: 4px 24px; }
  .cp-switch { margin-top: 22px; }
  .cp-chips { grid-template-columns: minmax(0, 1fr); }
  .cp-chips--addons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-chips--addons span { grid-template-columns: 1fr; gap: 4px; }
  .cp-chips--addons i { grid-row: auto; }
  .cp-options { grid-template-columns: minmax(0, 1fr); }
  .cp-fields { grid-template-columns: minmax(0, 1fr); }
  .cp-field input, .cp-field textarea { font-size: 16px; }
  .cp-nav { margin-top: 22px; }
  .cp-nav .cp-btn { flex: 1; padding-inline: 14px; }
  .cp-nav [data-submit] { white-space: normal; }

  .cp-summary { border-radius: 20px; }
  .cp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 24px rgba(0, 29, 54, 0.12); transform: translateY(110%); transition: transform 0.35s var(--ease); }
  .cp-bar.is-visible { transform: none; }
  .cp-bar span { display: flex; flex-direction: column; min-width: 0; }
  .cp-bar small { font-size: 11px; font-weight: 700; color: var(--p-muted); }
  .cp-bar strong { overflow: hidden; font-size: 16px; line-height: 21px; color: var(--p-ink); white-space: nowrap; text-overflow: ellipsis; }
  .cp-bar .cp-btn { flex: none; padding: 11px 18px; }

  .cp-how__card { padding: 22px; }
  .cp-acc button { padding: 15px; font-size: 15px; line-height: 22px; }
  .cp-acc__panel p { padding: 0 15px 15px; font-size: 14px; line-height: 22px; }
  .cp-cta { padding: 28px 18px; border-radius: 20px; }
  .cp-cta h2 { font-size: 24px; line-height: 31px; }
  .cp-cta__btns, .cp-cta__btns .cp-btn { width: 100%; }
}

/* =========================================================
   Step 2 “Choose your trip” + price breakdown (6-step planner)
   ========================================================= */
.cp-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cp-legend-state { color: var(--p-blue); }
.cp-trips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cp-trips[hidden] { display: none; }
.cp-trip { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--p-line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease); }
.cp-trip:hover { transform: translateY(-3px); box-shadow: var(--p-shadow); }
.cp-trip:has(input:checked) { border-color: var(--p-blue); box-shadow: 0 0 0 3px rgba(0, 90, 154, 0.12); }
.cp-trip:has(input:focus-visible) { outline: 2px solid var(--p-blue); outline-offset: 2px; }
.cp-trip__media { position: relative; display: grid; place-items: center; height: 118px; overflow: hidden; background: linear-gradient(135deg, #d2e4ff, #ffdbcd); }
.cp-trip__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-trip__media > i { font-size: 34px; font-style: normal; }
.cp-trip__media em { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 29, 54, 0.78); font-size: 11px; font-style: normal; font-weight: 800; line-height: 14px; color: #fff; }
.cp-trip input:checked ~ .cp-trip__media .cp-tick { opacity: 1; transform: none; }
.cp-trip__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px 14px 14px; }
.cp-trip__body strong { font-size: 14.5px; line-height: 20px; color: var(--p-ink); }
.cp-trip__body small { font-size: 11.5px; line-height: 16px; color: var(--p-muted); }
.cp-trip__price { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--p-text); }
.cp-trip__price b { font-size: 16px; font-weight: 800; color: var(--p-blue); }
.cp-trip__price s { margin-left: 4px; color: var(--p-muted); }
.cp-trip__link { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--p-rust); }
.cp-trip__link:hover { text-decoration: underline; }
.cp-trip--custom { border-style: dashed; }
.cp-trip--custom .cp-trip__media { height: 80px; }
@media (max-width: 1100px) { .cp-trips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .cp-trips { grid-template-columns: minmax(0, 1fr); }
  .cp-trip { flex-direction: row; }
  .cp-trip__media { flex: none; width: 116px; height: auto; min-height: 118px; }
  .cp-trip--custom .cp-trip__media { min-height: 90px; }
}

.cp-fixed-nights { flex: 1 1 260px; padding: 14px 16px; border-radius: 14px; background: #eef5fc; font-size: 13.5px; line-height: 20px; color: var(--p-text); }
.cp-fixed-nights b { color: var(--p-deep); }
.cp-fixed-nights small { display: block; margin-top: 4px; font-size: 12px; color: var(--p-muted); }
.cp-fixed-nights[hidden], .cp-counter[hidden] { display: none; }

.cp-estimate p span { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 10px; letter-spacing: 0.3px; color: #fff; }
.cp-breakdown { display: grid; gap: 6px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.cp-breakdown[hidden] { display: none; }
.cp-breakdown div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cp-breakdown dt { font-size: 12.5px; color: #dbe8f6; }
.cp-breakdown dt small { display: block; margin: 0; font-size: 11px; color: #9fb9d6; }
.cp-breakdown dd { margin: 0; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.cp-breakdown__total { margin-top: 4px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.22); }
.cp-breakdown__total dt { font-weight: 800; color: #fff; }
.cp-breakdown__total dd { font-size: 15px; }
/* breakdown inside the estimate: compact rows (not the summary list style) */
.cp-summary .cp-breakdown div { padding: 0; border-top: 0; font-size: 12.5px; line-height: 17px; }
.cp-summary .cp-breakdown dt { color: #dbe8f6; }
.cp-summary .cp-breakdown dd { color: #fff; font-weight: 700; }
.cp-summary .cp-breakdown .cp-breakdown__total { padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.22); }
.cp-summary .cp-breakdown .cp-breakdown__total dt { color: #fff; }