/* The itinerary pages use class "btn-gold" on two buttons ("See price & book" and the
   closing "Enquire Now"), but the public stylesheet only defines "btn-primary", so
   they showed no background. Same gold look, defined once here. */
.btn-gold{ background:var(--c-gold); color:var(--c-forest); }
.btn-gold:hover{ background:var(--c-gold-deep); color:var(--c-white); transform:translateY(-2px); box-shadow:var(--shadow-soft); }

/* Beach add-on pop-up ("Add a beach holiday?"). Uses the site's planner-overlay
   shell (already full-screen on phones); only the pieces below are new. */
.beach-addon-strip{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:30px 34px; border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--c-teal) 0%, var(--c-forest-light) 100%);
  color:#fff; box-shadow:var(--shadow-soft);
}
.beach-addon-strip h2{ font-family:var(--font-display); font-size:1.7rem; margin:0 0 6px; color:#fff; }
.beach-addon-strip p{ margin:0; max-width:56ch; color:rgba(255,255,255,.88); line-height:1.55; }
.beach-addon-strip .btn{ flex:0 0 auto; }
.beach-addon-strip.is-soft{ background:var(--c-sand); color:var(--c-charcoal); box-shadow:none; border:1px solid var(--c-line); }
.beach-addon-strip.is-soft h2{ color:var(--c-charcoal); font-size:1.35rem; }
.beach-addon-strip.is-soft p{ color:var(--c-charcoal-soft); }

.ba-help{ color:var(--c-charcoal-soft); margin:6px 0 0; }
.ba-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0 8px; }
.ba-card{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; text-align:left;
  min-height:260px; padding:24px; border:0; border-radius:var(--radius-md); cursor:pointer; overflow:hidden;
  color:#fff; font:inherit; background:var(--c-teal); transition:transform .2s, box-shadow .2s;
}
.ba-card[data-key="zanzibar"]{ background:linear-gradient(160deg,#14807a 0%,#0b4f4c 100%); }
.ba-card[data-key="seychelles"]{ background:linear-gradient(160deg,#2f4536 0%,#1e2b22 100%); }
.ba-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,14,11,.82) 0%, rgba(10,14,11,.1) 70%); }
.ba-card > *:not(img){ position:relative; z-index:1; }
.ba-card:hover, .ba-card:focus-visible{ transform:translateY(-3px); box-shadow:var(--shadow-deep); outline:3px solid var(--c-gold); outline-offset:2px; }
.ba-card-name{ font-family:var(--font-display); font-size:1.8rem; font-weight:600; }
.ba-card-blurb{ margin:6px 0 12px; font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.92); }
.ba-card-count{ font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-gold-light); }

.ba-back{ background:none; border:0; padding:0; margin:0 0 14px; font:inherit; font-weight:700; color:var(--c-teal); cursor:pointer; }
.ba-back:hover{ text-decoration:underline; }
.ba-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ba-opt{ border:1.5px solid var(--c-line); border-radius:var(--radius-md); background:var(--c-white); padding:18px 20px; }
.ba-opt.is-best{ border-color:var(--c-gold-deep); box-shadow:0 4px 18px rgba(196,149,74,.14); }
.ba-opt-top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:6px; }
.ba-opt h3{ font-family:var(--font-display); font-size:1.15rem; margin:0; color:var(--c-charcoal); flex:1 1 220px; }
.ba-chip{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:20px; background:var(--c-sand); color:var(--c-charcoal); white-space:nowrap; }
.ba-chip.is-fit{ background:var(--c-gold); color:#fff; }
.ba-opt p{ margin:4px 0 0; font-size:.9rem; line-height:1.5; color:var(--c-charcoal-soft); }
.ba-price{ font-weight:700; color:var(--c-charcoal); }
.ba-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.ba-footnote{ margin:22px 0 0; font-size:.85rem; color:var(--c-charcoal-soft); line-height:1.55; }

@media(max-width:720px){
  .beach-addon-strip{ padding:24px 20px; }
  .ba-cards{ grid-template-columns:1fr; }
  .ba-card{ min-height:200px; }
  .ba-actions .btn{ flex:1 1 100%; text-align:center; }
}
@media (prefers-reduced-motion: reduce){ .ba-card{ transition:none; } }