/* Extra css for styling this site additional to Bootstrap */


/* My Styles */
.main-article h2,
.main-article h3 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.main-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-divider {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    align-self: stretch; /* matches the height of the tallest column in the row, so it reads as a proper divider rather than a short dash */
}

.container-card {
    background-color: color-mix(in srgb, var(--color-primary) 92%, transparent);
    border: 1px solid rgba(255,255,255,0.08);
}

/* Article Images */

.main-article figure {
    margin: 1.5rem 0;
}

.main-article figure.align_left {
    float: left;
    margin: 0.5rem 1.5rem 1rem 0;
}

.main-article figure.align_right {
    float: right;
    margin: 0.5rem 0 1rem 1.5rem;
}

.main-article figure.align_center {
    margin: 1.5rem auto;
    text-align: center;
}

.main-article figure img {
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
    display: block;
}

.main-article figure.align_center img {
    margin: 0 auto;
}

.main-article figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    font-style: italic;
    text-align: inherit; /* follows figure alignment */
}

/* Same alignment classes, but for bare <img> tags — pwimage only wraps
   images in a <figure> when a caption is added; without a caption the
   align_* class lands directly on the <img> instead. */
.main-article img.align_left {
    float: left;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
    margin: 0.5rem 1.5rem 1rem 0;
}

.main-article img.align_right {
    float: right;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0 1rem 1.5rem;
}

.main-article img.align_center {
    display: block;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
}

/* Customised Links */
a,
a:link,
.nav-link,
.btn-link {
    color: #a8c5e0 !important;          /* soft bright blue-teal – good contrast & fresh */
}

a,
a:link {
    color: #a8c5e0 !important;
}

a:hover,
a:focus {
    color: #d1e0ed !important;
}

a.text-white {
    color: white !important;
}
a.text-white:hover {
    color: #e0e0e0 !important;  /* or whatever hover you want */
}


/* Navbar */
.navbar {
  border-bottom: 4px solid var(--color-accent);
  background-color: var(--color-navbar);
}

.navbar-toggler {
    border: 2px solid var(--color-primary) !important;
    border-radius: 6px;                    /* optional: softer roundness */
    background-color: transparent;
    transition: background-color 0.2s ease; /* same hover treatment as the other buttons (.btn-custom etc.) */
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgb(0,0,0)' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); /* subtle depth */
}

/* Protect navbar links (reset to Bootstrap default or your theme) */
.navbar a,
.navbar .nav-link,
.navbar-brand,
.navbar .nav-link {
    color: var(--color-primary) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: color-mix(in srgb, var(--color-primary) 75%, transparent) !important;
}

/* More breathing room between items now the menu has grown to 6 (Home,
   Apartments, Galleries, Local Map, Blog, Contact) — applies on both
   desktop (inline) and the collapsed mobile menu (stacked), where the
   extra horizontal padding is just a larger, easier tap target rather
   than a spacing problem. !important because Bootstrap's own CSS loads
   after main.css and carries identical specificity, so it wins the tie
   without it (same issue as the map popup link colour). */
.navbar-nav .nav-link {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
    white-space: nowrap; /* stops e.g. "Local Map" wrapping onto two lines in the squeeze zone just above the collapse breakpoint */
}


/* Customised Buttons */
.btn-custom {
    background-color: var(--color-primary) !important;
    color: white !important;
    border: none !important;
    transition: background-color 0.2s ease;
}

.btn-custom:hover,
.btn-custom:focus {
    background-color: color-mix(in srgb, var(--color-primary) 85%, black) !important; /* deeper, smoother hover */
    color: white !important;
}

.btn-custom:active {
    background-color: color-mix(in srgb, var(--color-primary) 70%, black) !important; /* strong press state */
    color: white !important;
}

.btn-custom-alt {
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
    border: none !important;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-custom-alt:hover,
.btn-custom-alt:focus {
    background-color: color-mix(in srgb, var(--color-accent) 80%, white) !important;
    color: var(--color-primary) !important;
}

.btn-custom-alt:active {
    background-color: color-mix(in srgb, var(--color-accent) 80%, black) !important;
    color: var(--color-primary) !important;
}

a.btn-custom-alt,
a.btn-custom-alt:link,
a.btn-custom-alt:visited {
    color: var(--color-primary) !important;
}

.btn-airbnb {
    background-color: #FF5A5F !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-airbnb:hover,
.btn-airbnb:focus {
    background-color: #e04e53 !important;
    color: #ffffff !important;
}

.btn-airbnb:active {
    background-color: #c94448 !important;
    color: #ffffff !important;
}

a.btn-airbnb,
a.btn-airbnb:link,
a.btn-airbnb:visited {
    color: #ffffff !important;
}

.btn-booking {
    background-color: #003580 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-booking:hover,
.btn-booking:focus {
    background-color: #002a6b !important;
    color: #ffffff !important;
}

.btn-booking:active {
    background-color: #001f52 !important;
    color: #ffffff !important;
}

a.btn-booking,
a.btn-booking:link,
a.btn-booking:visited {
    color: #ffffff !important;
}

.btn-whatsapp {
    background-color: #25D366 !important; /* WhatsApp brand green */
    color: #ffffff !important;
    border: none !important;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background-color: #1DA851 !important;
    color: #ffffff !important;
}

.btn-whatsapp:active {
    background-color: #128C7E !important;
    color: #ffffff !important;
}

/* Newsletter signup form (Brevo embed, sitewide in the footer). The pasted
   embed's own inline styles are hand-edited to match the site's dark
   container-card panel look (background/border/radius/shadow, text colours
   flipped to white) — see site_newsletter_embed field. These rules are just
   a safety net: the outer wrapper background and button colour, so a fresh
   unedited Brevo paste still looks reasonable even before anyone hand-edits
   it again. !important is needed because Brevo sets most of its own colours
   as inline styles, which beat any external CSS rule without it. */
.newsletter-embed .sib-form {
    background-color: transparent !important;
    padding: 0 !important; /* Brevo's own stylesheet gives this 32px of top padding by default — that's what was pushing the form down out of line with the other footer columns */
}

.newsletter-embed .sib-form-block__button {
    background-color: var(--color-accent) !important; /* same orange as .btn-custom-alt — the site's "this matters, click it" colour */
    color: var(--color-primary) !important;
    border-radius: 0.375rem !important;
    transition: background-color 0.2s ease;
}

.newsletter-embed .sib-form-block__button:hover,
.newsletter-embed .sib-form-block__button:focus {
    background-color: color-mix(in srgb, var(--color-accent) 80%, white) !important;
}

.newsletter-embed #sib-container input.input,
.newsletter-embed #sib-container #EMAIL.input {
    border-radius: 0.375rem !important;
    border: 1px solid var(--bs-border-color, #495057) !important;
    background-color: var(--bs-body-bg, #212529) !important;
    color: var(--bs-body-color, #dee2e6) !important;
}

/* Brevo's error/success messaging — both the per-field validation label
   (.entry__error, e.g. "This field cannot be left blank.") and the
   full-form result panel (#error-message / #success-message) — ships with
   hardcoded inline colours (pink/red or green pastel, dark text) meant for
   a white background, so it clashes against this dark panel. Reuses the
   exact same danger/success palette as .alert-danger / .alert-success
   above rather than picking new colours, so every "something went wrong"
   message on the site looks the same regardless of whether Bootstrap or
   Brevo rendered it. !important for the same reason as the input/button
   overrides above — Brevo sets these inline. */
.newsletter-embed .entry__error,
.newsletter-embed #error-message {
    background-color: #5c1a1a !important;
    border-color: #c62828 !important;
    color: #ffcdd2 !important;
    padding: 0.5rem 0.75rem !important; /* Brevo's own label has none — text was sitting flush against the box edges */
}

.newsletter-embed #success-message {
    background-color: #1a3c2e !important;
    border-color: #2e7d32 !important;
    color: #a5d6a7 !important;
    padding: 0.75rem 1rem !important;
}

/* Google's reCAPTCHA v3 floating badge (bottom-right corner, every page,
   loaded by the Brevo newsletter embed's recaptcha/api.js script). Google's
   terms permit hiding this badge only if the "protected by reCAPTCHA..."
   disclosure text is shown near the form instead — see .recaptcha-disclosure
   below and the matching markup in _main.php's newsletter block. */
.grecaptcha-badge {
    visibility: hidden !important;
}

.recaptcha-disclosure {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.5rem 0 0;
    max-width: 420px; /* matches .newsletter-embed--footer #sib-container's cap — without this the
                          unwrapped line is wider than the form and stretches the whole panel to fit it */
}

.recaptcha-disclosure a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
}

/* Brevo's own stylesheet loads after ours (its <link> sits inside the
   pasted embed, later in the page than main.css) and appears to also use
   !important on this — when both sides use !important, CSS falls back to
   comparing specificity next, so targeting the input's actual id="EMAIL"
   (an ID selector) rather than just its .input class is what wins this,
   regardless of load order. */
#EMAIL.input {
    border-radius: 0.375rem !important;
    border: 1px solid var(--bs-border-color, #495057) !important;
    background-color: var(--bs-body-bg, #212529) !important;
    color: var(--bs-body-color, #dee2e6) !important;
}

/* Footer variant — keeps all of Brevo's text content (heading, description,
   label, helper text) intact, just narrower so it doesn't crowd out the
   rest of the footer. The inner Brevo box loses its own panel look
   (background/border/shadow/padding stripped) since the highlight panel is
   now the wrapper div itself below, using the same translucent-white-over-
   dark-navy technique the footer's own wave watermark almost certainly
   uses — matches it by construction rather than guessing an exact hex. */
/* Reusable "panel within a panel" highlight — same translucent-white-over-
   dark-navy look as the footer newsletter panel, just without its wave
   background image. Used to draw extra attention to a cluster of content
   (e.g. the booking buttons on a property card) sitting inside a regular
   .container-card. */
.highlight-panel {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    padding: 1.5rem;
}

.newsletter-embed--footer {
    background-color: rgba(255, 255, 255, 0.05);
    background-image: var(--footer-logo-url); /* set inline per-page from SiteHelper::getFooterLogoUrl() — was the general footer's background before, moved here after it accidentally looked great overlapping this panel on mobile */
    background-repeat: no-repeat;
    background-position: calc(100% + 370px) center; /* the source PNG (fistralbreakslogolargewaveopaque.png, 800x333) only has wave artwork in its left half (px 22-430) — the right half is transparent padding, so plain "100%"/"right" positioning was aligning that blank space to the panel edge instead of the wave itself. This shifts the whole image 370px further right (the width of that blank half) so the wave's own right edge lands at the panel edge instead. */
    background-size: auto; /* natural size, same as it rendered in the old full-width footer background — the fixed 260px was shrinking it down to a small corner icon instead */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    padding: 1.5rem;
    overflow: hidden; /* clips the logo to the panel's rounded corners rather than letting it bleed past the edge */
    position: relative;
}

.newsletter-embed--footer #sib-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 420px !important;
    margin: 0 !important;
}

a.btn-whatsapp,
a.btn-whatsapp:link,
a.btn-whatsapp:visited {
    color: #ffffff !important;
}

/* Plain white buttons (Contact page's Email Us / Call Us) — same fix as
   the branded buttons above: the global `a { color }` rule otherwise wins
   and leaves the text a washed-out pale blue on the white background. */
.btn-light,
a.btn-light,
a.btn-light:link,
a.btn-light:visited {
    color: var(--color-primary) !important;
}

.btn-light:hover,
.btn-light:focus {
    color: var(--color-primary) !important;
}

/* Carousels used at top of pages */
.carousel-item img {
   height: 60vh;
   object-fit: cover;
   object-position: center;
   width: 100%;
}

.carousel-item {
  position: relative;
}

.carousel-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  color: white !important;
}

.carousel-caption {
  z-index: 2;
  background: rgba(0, 0, 0, 0.3);
  padding: 1.5rem;
  border-radius: 0.5rem;
  color: white !important;
  text-shadow: 1px 1px 3px black;
}

/* Reviews carousel (home page) — reuses the same carousel module/shell as
   the photo carousels above, but slides are review cards, not photos.
   The rules above assume every .carousel-item is a photo (a full-cover
   ::before overlay with no pointer-events:none — silently blocks clicks
   on anything inside; a forced 60vh image height) — undo both, scoped to
   this carousel only, and narrow the prev/next hit zones so they don't
   overlap the centered review text on typical desktop widths. */
.reviews-carousel .carousel-item::before {
  content: none;
}

.reviews-carousel .carousel-item img {
  height: auto;
}

.reviews-carousel .carousel-control-prev,
.reviews-carousel .carousel-control-next {
  width: 8%;
}

/* Reviews vary a lot in length, and Bootstrap's carousel sizes itself to
   whichever slide is active — so without a fixed height, the whole panel
   (and the prev/next arrows with it) resizes and shifts as it auto-advances,
   which is what causes misclicks. A fixed min-height keeps every slide the
   same size; line-clamping the review text stops a long one from
   overflowing it. Taller on mobile since the photo stacks above the text
   there instead of sitting beside it. */
.reviews-carousel-slide {
  min-height: 340px;
}

@media (min-width: 768px) {
  .reviews-carousel-slide {
    min-height: 220px;
  }
}

.reviews-carousel .review-text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Any thumbnail that opens the shared image modal (galleries, property
   photos, local-place photos, reviews) — one rule instead of adding
   cursor:pointer to every template that renders a clickable thumbnail. */
[data-bs-toggle="modal"] {
    cursor: pointer;
}

/* Uniform-height "justified" photo grid — same approach as ProcessWire's
   own admin image-field widget: each photo keeps its own natural aspect
   ratio (no cropping), sized to a common row height, and rows wrap via
   flex-wrap. Used by galleries, property photos, and local-place photos —
   replaces the old equal-width Bootstrap column grid, which only fixed
   photo height and left portrait photos narrow with mismatched gaps next
   to landscape ones. */
.photo-grid {
    display: flex;
    flex-wrap: wrap;
}

.photo-grid-thumb {
    height: 260px;
    width: auto;
    max-width: 100%;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .photo-grid-thumb {
        height: 160px;
    }
}

/* More photos used when listing galleries */
.more-photos-indicator {
    cursor: pointer;
}

.more-overlay {
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.25s ease;
    pointer-events: none; /* allows click to go through to the <a> */
}

.more-photos-indicator:hover .more-overlay {
    background: rgba(0, 0, 0, 0.75);
}

.more-overlay .badge {
    font-weight: 600;
    letter-spacing: 0.5px;
}


/* Leaflet + OpenStreetMap used for location on properties */
.property-map {
    height: 600px;
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0px 24px 54px 0px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Leaflet's own controls/popups use light backgrounds by design (matches
   the map tiles) — just make sure they don't look broken against the
   dark page background around them */
.property-map .leaflet-popup-content-wrapper,
.property-map .leaflet-popup-tip {
    background: #ffffff;
    color: var(--color-primary);
}

/* The page is dark-themed (data-bs-theme="dark"), so Bootstrap's default
   link colour is tuned for a dark background — inside the white Leaflet
   popup that reads as washed-out pale blue. !important because Bootstrap's
   own dark-theme link colour rule also carries !important. */
.property-map .leaflet-popup-content-wrapper a {
    color: #003580 !important; /* same dark blue as .btn-booking, reads clearly on white */
    font-weight: 600;
}

.property-map .leaflet-popup-content-wrapper a:hover,
.property-map .leaflet-popup-content-wrapper a:focus {
    color: #002a6b !important;
}

.property-map .leaflet-popup-content-wrapper .place-category {
    color: #212529 !important; /* normal near-black text instead of Bootstrap's grey .text-muted */
    display: block;
}

.property-map .leaflet-popup-content-wrapper .place-popup-article {
    color: var(--color-primary) !important;
    font-size: 0.875rem;
}

/* Leaflet's own default popup styling puts an 18px top+bottom margin on
   every <p> inside a popup — that's what was causing the big gaps between
   the Bedrooms/Sleeps/Features lines. Override generically for any <p>
   in one of our popups, rather than fighting it per line. */
.property-map .leaflet-popup-content-wrapper p {
    margin: 0.15rem 0 !important;
}

/* Property thumbnail shown at the top of a property's popup on the Local
   Guide map (local-guide.php) */
.property-map .leaflet-popup-content-wrapper .place-popup-photo {
    display: block;
    width: 100%;
    max-width: 240px;
    border-radius: 0.5rem;
}

/* Colour swatch shown next to each category name in the Local Guide map's
   layer control (local-guide.php) — the filter/key. */
.leaflet-control-layers-overlays span.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Coloured pin markers used on the Local Guide map (local-guide.php) —
   plain CSS circles via L.divIcon, no external icon image files needed.
   Colour itself is set inline per-marker (see place_category colour map
   in local-guide.php), this just handles the shared shape/border. */
.place-marker span {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Text-list panels under the Local Guide map (local-guide.php) — square off
   the left corners so the coloured accent bar (border-left, set inline per
   category) reads as a flat tab rather than curving away at top/bottom.
   Bootstrap's own .rounded-4 utility sets border-radius with !important
   (true of all its rounded-* utilities), so this has to match with
   !important too — plain higher specificity isn't enough to beat it. */
.local-guide-panel.rounded-4 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* "View on map" button on each Local Guide text-list panel — scrolls back
   up to the map and focuses that place's own marker (see the JS in
   local-guide.php). Colour is set inline per-category to match the panel's
   accent border; border/icon both use currentColor so only one inline
   style is needed per button. */
.local-guide-focus-btn {
    background: none;
    border: 1px solid currentColor;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.local-guide-focus-btn:hover,
.local-guide-focus-btn:focus-visible {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.08);
}


/* Dots used on the floorplans on properties */
.dot {
    position: absolute;
    width: min(28px, 5vw);
    height: min(28px, 5vw);
    background: #a8c5e0;
    border: min(3px, 0.8vw) solid white;   /* border also scales a bit */
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 min(4px, 1vw) color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: all 0.25s ease;
}

.dot:hover {
    transform: translate(-50%, -50%) scale(1.35);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.dot::after {
    content: attr(data-desc);
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}

.dot:hover::after {
    opacity: 1;
}


/* Facilities list on properties — icon + label per item */
.facilities-item {
    margin-bottom: 0.75rem;
}

.facilities-icon {
    color: #ffffff; /* orange stays reserved for buttons (Book Now etc.) so they still stand out */
    width: 1.25em;
}

/* Property Type / Bedrooms / Sleeps / Features rows on the property page */
.property-info-icon {
    color: #ffffff;
    width: 1.25em;
}


/* Pagination look better */
.custom-pager .page-item.active .page-link,
.custom-pager .page-link.active {
  background-color: #2c3e50 !important;
  border-color: #2c3e50 !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
  pointer-events: none;           /* disables hover/focus/click */
  cursor: default;
}

/* Remove hover/focus effects on active */
.custom-pager .page-item.active .page-link:hover,
.custom-pager .page-item.active .page-link:focus,
.custom-pager .page-link.active:hover,
.custom-pager .page-link.active:focus {
  background-color: #2c3e50 !important;
  border-color: #2c3e50 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Custom alerts to make look better */
/* Lighten and style all Bootstrap alert types */

.alert {
  border-width: 1px;
  border-radius: 0.5rem;
  color: #e9ecef;
}

.alert-primary {
  background-color: #0d3b66;
  border-color: #1e5a8f;
  color: #d1e8ff;
}

.alert-secondary {
  background-color: #2c3e50;
  border-color: #495057;
  color: #ced4da;
}

.alert-success {
  background-color: #1e4d2b;
  border-color: #2e7d32;
  color: #c8e6c9;
}

.alert-info {
  background-color: #0a3d5e;
  border-color: #0288d1;
  color: #b3e5fc;
}

.alert-warning {
  background-color: #5c3f00;
  border-color: #ff9800;
  color: #fff3cd;
}

.alert-danger {
  background-color: #5c1a1a;
  border-color: #c62828;
  color: #ffcdd2;
}

.alert-light {
  background-color: #37474f;
  border-color: #455a64;
  color: #eceff1;
}

.alert-dark {
  background-color: #212529;
  border-color: #343a40;
  color: #dee2e6;
}

/* Success message override (your green one) */
.alert-success,
.alert.alert-success {
  background-color: #1a3c2e !important;
  border-color: #2e7d32 !important;
  color: #a5d6a7 !important;
}

#cookie-banner {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 9999;
    padding: 1.25rem 1rem;
    /* A bit more visual weight than a bare 1px border — this now gates
       three third-party services (GA, Lodgify, Brevo/reCAPTCHA), not just
       one, so it's worth it reading as more than an afterthought without
       going all the way to a blocking centred modal (unnecessary for
       compliance and would hurt booking conversion on first visit). */
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
    font-size: 1.0625rem;
}