/* n10-site-code: [Imported] Seasonal Packages CSS [Nine10 CSS] · last edited by unknown on 2026-11-09 17:28:19 UTC · Nine10 entries are maintained by Nine10; use the Client entries for site changes. */
/**
 * GP Tourism — /packages/
 * Paste into: Custom CSS & JS → new CSS snippet, page = /packages/.
 */

/* --- Client additions (kept as-is) --- */
.label-sm .gfield_consent_label {
  font-style: italic !important;
  font-size: 13px !important;
}
.bullet li {
  list-style-type: disc !important;
}

/* Tiles are clickable — say so. */
.pkg-tile,
.hotel-tile {
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.pkg-tile:hover,
.hotel-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 20, 40, .22);
}

.pkg-tile:focus-visible,
.hotel-tile:focus-visible {
  outline: 3px solid #cade8a;
  outline-offset: 3px;
}

/* Selected state (packages only — hotel tiles are now outbound links) */
.pkg-tile.is-selected {
  border-color: #cade8a;
  box-shadow: 0 14px 30px rgba(0, 20, 40, .28);
}

/* ---------------------------------------------------------------
   STEP 3 — #Hotels
   Hidden until the form is submitted, then revealed showing only the
   hotel that was chosen. Hidden by default in CSS (not by JS) so there
   is no flash of the section before scripts run.
   The editor exemption keeps it visible while you build in Elementor.
   --------------------------------------------------------------- */
body:not(.elementor-editor-active) #Hotels:not(.is-revealed) {
  display: none;
}

/* Non-matching hotels after the reveal. */
.hotel-tile.is-hidden {
  display: none !important;
}

/* The one match shouldn't stretch oddly in a flex row built for three. */
#Hotels.is-revealed .hotel-tile {
  flex-grow: 0;
}

/* Source content lives inside each tile so it stays editable in Elementor,
   but is never shown there — only cloned into the detail box. */
.pkg-details {
  display: none !important;
}

/* Client addition: white text inside the (dark) detail box. */
.pkg-detail p,
.pkg-detail li,
.pkg-detail h2,
.pkg-detail h3,
.pkg-detail h4,
.pkg-detail h5,
.pkg-detail h6 {
  color: #FFF !important;
}

/* Detail box.
 *
 * Until a package is picked, hide EVERYTHING inside the box except the empty
 * message. Keyed off :not(.is-filled) rather than .is-empty so the box starts
 * hidden with no flash of placeholder content before the JS runs — and so you
 * don't have to remember to add a state class in Elementor.
 *
 * The :has() clause keeps any container that WRAPS the empty message visible,
 * so it works whether .pkg-detail-empty is a direct child or nested deeper.
 *
 * body:not(.elementor-editor-active) exempts the Elementor editor — otherwise
 * the box would look empty while you're trying to build it.
 */
body:not(.elementor-editor-active)
  .pkg-detail:not(.is-filled) > *:not(.pkg-detail-empty):not(:has(.pkg-detail-empty)) {
  display: none;
}

/* Once filled, the placeholder gets out of the way. */
.pkg-detail.is-filled .pkg-detail-empty {
  display: none;
}

/* Mirror of the package description shown beneath the form's package <select>.
   Hidden until a package is chosen; the editor exemption keeps it visible so
   you can position and style it in Elementor. */
body:not(.elementor-editor-active) .pkg-form-body:not(.is-filled) {
  display: none;
}

/* ---------------------------------------------------------------
   Form 14 confirmation message — colour + spacing.
   The message was entered with stray <br> tags between blocks, so
   every gap was doubled (a <br> plus the element's own margin). We
   suppress those <br>s and let margins do the spacing. ID-scoped so
   it beats theme defaults without !important.
   --------------------------------------------------------------- */
#gform_confirmation_message_14,
#gform_confirmation_message_14 p,
#gform_confirmation_message_14 li,
#gform_confirmation_message_14 strong,
#gform_confirmation_message_14 a {
  color: #002B4D;
}

#gform_confirmation_message_14 {
  line-height: 1.6;
}

/* Kill the stray line breaks — margins handle the rhythm instead. */
#gform_confirmation_message_14 br {
  display: none;
}

/* Uniform rhythm. Bold section headers already stand out by weight, and CSS
   can't reliably tell a fully-bold header from an inline bold phrase (:only-child
   ignores text-node siblings), so we don't special-case them. */
#gform_confirmation_message_14 p {
  margin: 0 0 1.1em;
}

#gform_confirmation_message_14 ul {
  margin: 0 0 1.1em;
  padding-left: 1.25em;
}

#gform_confirmation_message_14 li {
  margin: 0 0 .5em;
}

#gform_confirmation_message_14 > *:first-child { margin-top: 0; }
#gform_confirmation_message_14 > *:last-child  { margin-bottom: 0; }