/* Vacation-light surfaces for the V12.13 destination and editorial pages.
   Loaded after the existing page styles and holiday-theme.css. */

/* Hotels and stays: quiet editorial cards around the destination photography. */
.pageHero.hotelHero,
.pageHero.experienceHero {
  background: linear-gradient(120deg, #f1f8ee, #eef9f8);
  border-bottom-color: #dce9e1;
}
.hotelHero .lede,
.experienceHero .lede,
.hotelHero .hotelEditorialNote,
.experienceHero .experienceNote {
  color: #526d72;
}
.hotelHero .stayJump a,
.experienceHero .experienceJump a {
  color: #166b70;
  background: #ffffffd9;
  border-color: #c8dfd4;
}
.hotelHero .stayJump a:hover,
.experienceHero .experienceJump a:hover {
  background: #e5f4eb;
  border-color: #94c9b7;
}
.hotelHero h1,
.experienceHero h1,
.experienceIntro h2,
.staySection .sectionIntro h2 {
  color: #164b55;
  font-weight: 400;
}
.experienceHero h1 em { color: #087f87; }
.stayDestinationCover,
.experienceCover {
  border-color: #c8dfd4;
  background: #2b787c;
  box-shadow: 0 8px 25px #164b550b;
}
.stayDestinationCover::after {
  background: linear-gradient(transparent, #063c4bc9);
}
.stayDestinationCover figcaption,
.stayDestinationCover figcaption > span { color: #fff; }
.stayDestinationCover small {
  color: #fff;
  background: #073f4ad6;
  border-color: #ffffff4d;
}
.hotelCard,
.experienceCard {
  background: #fff;
  border-color: #d7e7dd;
  box-shadow: 0 5px 17px #164b5505;
}
.experienceCard:hover {
  background: #fff;
  border-color: #9bcbbd;
  box-shadow: 0 10px 27px #164b550b;
}
.hotelCard h3,
.experienceCard h3 {
  color: #164b55;
  font-weight: 400;
}
.hotelCard p,
.experienceCard p,
.experienceIntro p,
.experienceNext .ctaBox p { color: #526d72; }
.hotelCard p strong { color: #285a60; }
.hotelSequence { color: #5e7b79; border-bottom-color: #dfebe3; }
.hotelSource,
.experiencePlan { color: #087b83; }
.experienceCover::after {
  background: linear-gradient(transparent, #063b48de);
}
.experienceCover figcaption,
.experienceCover figcaption strong { color: #fff; }
.experienceCover figcaption span { color: #d3f4df; }
.experienceCover figcaption small { color: #eff8f3; }

/* Destination search: a white workspace, sea-green filters and clear cards. */
.viatorDirectory .viatorDirectoryIntro,
.viatorDirectory .viatorQuickSearches > span { color: #526d72; }
.viatorDirectory .viatorQuickSearches button {
  color: #2a666c;
  background: #f3faf5;
  border-color: #cbded3;
}
.viatorDirectory .viatorQuickSearches button:hover,
.viatorDirectory .viatorQuickSearches button[aria-pressed='true'] {
  color: #0b686e;
  background: #dff2e8;
  border-color: #8fc2b1;
}
.viatorDirectory .viatorQuickSearches #viatorCuratedShortcut {
  color: #315d53;
  background: #fff9dc;
  border-color: #e7dfa9;
}
.viatorDirectory .viatorDirectoryControls,
.viatorDirectory .viatorDirectoryFilters {
  background: #fff;
  border-color: #d1e4da;
}
.viatorDirectory .viatorControlLabel,
.viatorDirectory .viatorCuratedToggle { color: #315d61; }
.viatorDirectory .viatorDirectoryControls input,
.viatorDirectory .viatorDirectoryControls select {
  color: #164b55;
  background: #f8fcf9;
  border-color: #bbd7cb;
}
.viatorDirectory .viatorDirectoryControls select option {
  color: #164b55;
  background: #fff;
}
.viatorDirectory .viatorDirectoryControls input:focus,
.viatorDirectory .viatorDirectoryControls select:focus {
  outline: 3px solid #b8dfd2;
  outline-offset: 2px;
  border-color: #087f87;
}
.viatorDirectory .viatorCuratedToggle input { accent-color: #087f87; }
.viatorDirectory .viatorCuratedToggle input:focus-visible {
  outline-color: #087f87;
}
.viatorDirectory .viatorDirectoryCount { color: #5c7778; }
.viatorDirectory .viatorClearFilters { color: #087b83; }
.viatorDirectory .viatorClearFilters:disabled {
  color: #708783;
  opacity: .7;
}
.viatorDirectory .viatorLocation {
  color: #164b55;
  background: #fff;
  border-color: #d9e7df;
  box-shadow: 0 5px 17px #164b5505;
}
.viatorDirectory .viatorLocationFeatured { border-color: #a5ceba; }
.viatorDirectory .viatorLocation .kicker { color: #567673; }
.viatorDirectory .viatorLocation h3 { color: #164b55; }
.viatorDirectory .viatorLocation p { color: #526d72; }
.viatorDirectory .viatorLocation .btn {
  color: #fff;
  background: #087f87;
  border-color: transparent;
}
.viatorDirectory .viatorLocation .btn:hover { background: #066b74; }
.viatorDirectory .viatorLocation .destinationBookingLink { color: #087b83; }
.viatorDirectory .viatorCuratedBadge {
  color: #355f50;
  background: #fff9da;
  border-color: #e5dda6;
}
.viatorDirectory .vstPhotoWrap,
.viatorDirectory .vstPhotoWrap.vstPhotoUnavailable {
  color: #fff;
  background: linear-gradient(135deg, #246f7a, #2a806f);
}
.viatorDirectory .vstPhotoFallback { color: #fff; }
.viatorDirectory .vstPhotoCredit { color: #fff; background: #063642df; }
.viatorDirectory .viatorDirectoryEmpty,
.viatorDirectory .viatorDirectoryRecovery {
  color: #164b55;
  background: #f0f8f1;
  border-color: #c7dece;
}
.viatorDirectory .viatorDirectoryEmpty p,
.viatorDirectory .viatorDirectoryRecovery p { color: #526d72; }
.viatorDirectory .viatorEmptyLinks a { color: #087b83; }

/* Guides: readable, calm long-form content with soft planning notes. */
.guideListing .guideListingCard {
  color: #164b55;
  background: #fff;
  border-color: #d8e6dc;
}
.guideListing .guideListingCard h2 {
  color: #164b55;
  font-size: 29px;
  line-height: 1.15;
}
.guideListing .guideListingCard p { color: #526d72; }
.guideListing .guideFitTags li {
  color: #3e6a5f;
  background: #edf7ed;
  border-color: #cee2cd;
}
.guidePlan,
.guideQuickStay { color: #087b83; }
.guideHeader h1 { color: #164b55; }
.guideHeader .lede { color: #526d72; }
.guideHeader .guideFacts div { background: #eff7f1; border-color: #d4e5d6; }
.guideHeader .guideFacts span { color: #567472; }
.guideHeader .guideFacts strong { color: #234f57; }
.guideCover { border-color: #d0e1d8; }
.guideToc { border-top-color: #d8e7dd; }
.guideToc strong { color: #087f87; }
.guideToc a { color: #4e706f; }
.guideToc a:hover,
.guideToc a[aria-current='location'] {
  color: #086a70;
  background: #e7f4ea;
  border-color: #c5dfcd;
}
.guideBody p,
.guideBody li { color: #496b70; }
.guideBody .guideIntro { color: #315d63; }
.guideBody h2 { color: #164b55; font-weight: 400; }
.guideBody section + section:not(.guideNext) { border-top-color: #dbe8df; }
.guideBody #itinerary li {
  color: #496b70;
  background: #f0f8f1;
  border-color: #d6e6d8;
}
.guideBody #itinerary li::marker { color: #08777f; }
.guideNext .btn.ghost { color: #066b74; }
.guideBody .guideNext {
  color: #164b55;
  background: #edf7ef;
  border-color: #cce2d1;
}
.guideBody .guideNext .affiliateNote { color: #567572; }
.guideBody a:not(.btn),
.breadcrumb a { color: #087b83; }
.relatedGuides { border-top-color: #d8e7dd; }

/* Travel eSIM: the existing Airalo flow in the same welcoming palette. */
.esimPage .esimHero { background: linear-gradient(120deg, #f2f8ec, #eef9f8); }
.esimPage .esimIntro h1 { color: #164b55; }
.esimPage .esimIntro h1 em { color: #087f87; }
.esimPage .esimIntro .lede,
.esimPage .esimIntroNote { color: #526d72; }
.esimPage .esimIntroNote svg { color: #087f87; }
.esimPage .esimChooser {
  color: #164b55;
  background: #fff;
  border-color: #cfe2d7;
  box-shadow: 0 18px 45px #164b5510;
}
.esimPage .esimChooserHeader h2 { color: #164b55; font-weight: 400; }
.esimPage .esimPartner {
  color: #3b6659;
  background: #fff9da;
  border-color: #e8dfa8;
}
.esimPage .esimChooser .heroPlanner {
  grid-template-columns: 1fr;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.esimPage .esimChooser .heroPlanner label { color: #315d61; }
.esimPage .esimChooser .heroPlanner input {
  color: #164b55;
  background: #f7fbf8;
  border-color: #bdd8cd;
}
.esimPage .esimChooser .heroPlanner > span { color: #5c7778; }
.esimPage .esimChooser .heroPopular > span { color: #5e7977; }
.esimPage .esimChooser .heroPopular a { color: #087b83; text-decoration-color: #add2c6; }
.esimPage .esimPrimary[aria-disabled='true'] {
  color: #456c64;
  background: #e3efea;
  border-color: #bfd9cb;
  box-shadow: none;
}
.esimPage .esimChooser .serviceHint,
.esimPage .esimDisclosure { color: #597672; }
.esimPage .esimDisclosure { border-top-color: #dbe8df; }
.esimPage .esimDisclosure a,
.esimPage .esimBrowse { color: #087b83; }
.esimPage .esimChecks { background: #fbfcf9; border-color: #dce8df; }
.esimPage .esimChecksHeading { color: #164b55; }
.esimPage .esimCheck { border-left-color: #c1dcaa; }
.esimPage .esimCheck h3 { color: #28565c; }
.esimPage .esimCheck p,
.esimPage .esimOtherTrips { color: #526d72; }
.esimPage .esimOtherTrips a { color: #087b83; }

/* The optional Rome campaign remains part of the same global holiday brand. */
.campaignHero { background: #edf6ef; }
.campaignHero::after {
  background: linear-gradient(90deg, #f5faf5f5 0%, #eef8f5e8 42%, #eef8f544 100%);
}
.campaignHero h1,
.campaignSection h2,
.campaignSteps h3,
.campaignStay h3 { color: #164b55; font-weight: 400; }
.campaignHero h1 em { color: #087f87; }
.campaignHero .lede,
.campaignHero .affiliateNote,
.campaignSectionIntro,
.campaignSteps p,
.campaignStay p,
.campaignStayNote,
.campaignExtras p { color: #526d72; }
.campaignGuideLink,
.campaignHero .affiliateNote a,
.campaignStepNumber { color: #087b83; }
.campaignSteps li { border-top-color: #b9d5c6; }
.campaignStaySection { background: #eef7ef; border-block-color: #d8e7dc; }
.campaignStay { background: #fff; border-color: #d1e3d7; box-shadow: 0 5px 17px #164b5505; }
.campaignFaq { border-top-color: #d4e4d9; }
.campaignFaq details { border-bottom-color: #d4e4d9; }
.campaignFaq summary { color: #315d61; }

@media (max-width: 760px) {
  .hotelHero .stayJump a,
  .experienceHero .experienceJump a { background: #ffffffed; }
  .hotelCard,
  .experienceCard,
  .campaignStay { border-radius: 20px; }
  .campaignHero::after {
    background: linear-gradient(90deg, #f5faf5f0 0%, #eef8f5db 65%, #eef8f58c 100%);
  }
}

/* Readable controls and small accents on the pale holiday surfaces. */
.heroPlanner.bookingDestinationPicker input::placeholder,
.bookingDestinationPicker input::placeholder,
.viatorDirectory .viatorDirectoryControls input::placeholder,
.esimPage .esimChooser .heroPlanner input::placeholder { color: #526f72; opacity: 1; }
body .bookingDestinationPicker input,
.heroPlanner.bookingDestinationPicker input,
.esimPage .esimChooser .heroPlanner input,
.viatorDirectory .viatorDirectoryControls input,
.viatorDirectory .viatorDirectoryControls select,
.field input, .field textarea { border-color: #6b8c83; }