/*
 Theme Name:   Swim Club
 Description:  A child theme for swim clubs built on the Sarova Hotels framework.
 Author:       Oncotton LTD
 Author URI:   https://oncotton.net
 Template:     sarova-hotels
 Version:      1.0
*/

/* ============================================================
   HEADER — fixed, full-width, three-column flex
   [logo] ......... [nav] ......... [phone + CTA + hamburger]
   ============================================================ */
#main {padding: 0}
.rbw-modal {display: none}
#masthead {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.35s ease;
}

/* Solid white header once the user has scrolled */
#masthead.is-scrolled {
    background: #fff;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

/* Slide the header up out of view when scrolling down */
#masthead.is-hidden {
    transform: translateY(-100%);
}
.wp-block-cover.trial-offer {border-radius: 20px}

/* Non-front pages always start with the white header */
body:not(.home):not(.front-page) #masthead {
    background: #fff !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 72px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* --- Logo -------------------------------------------------- */
.site-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.site-logo a,
.site-logo .custom-logo-link {
    display: block;
    line-height: 0;
}

.site-logo img,
.site-logo .custom-logo {
    height: 52px;
    width: auto;
    display: block;
}

/* --- Primary nav (desktop centre) -------------------------- */
/* The parent style.css sets #site-navigation to position:fixed which
   pulls it out of our flex row — override on desktop only. */
@media (min-width: 841px) {
    #site-navigation,
    nav#site-navigation {
        position: relative !important;
        top: auto !important;
        left: 40px !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        flex: 1 !important;
        display: flex !important;
        justify-content: start;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Hide mobile-only drawer items on desktop */
.nav-drawer-phone,
.nav-drawer-cta {
    display: none;
}

#site-navigation ul.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}

#site-navigation ul.nav-menu li {
    position: relative;
}
nav ul li a:after, nav ul li a:before {display: none}
/* Default: dark text (non-front pages always show white header) */
#site-navigation ul.nav-menu li a {
    display: block;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111 !important;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
}

/* Transparent header state: white text over hero image */
body.home #masthead:not(.is-scrolled) #site-navigation ul.nav-menu li a,
body.front-page #masthead:not(.is-scrolled) #site-navigation ul.nav-menu li a {
    color: #000 !important;
}

#site-navigation ul.nav-menu li a:hover,
#site-navigation ul.nav-menu li.current-menu-item > a {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 30px
}

body.home #masthead:not(.is-scrolled) #site-navigation ul.nav-menu li a:hover,
body.front-page #masthead:not(.is-scrolled) #site-navigation ul.nav-menu li a:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Header actions (right) -------------------------------- */
.header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-phone {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.header-phone a {
    color: #111;
    text-decoration: none;
}

body.home #masthead:not(.is-scrolled) .header-phone a,
body.front-page #masthead:not(.is-scrolled) .header-phone a {
    color: #000;
}

.header-cta {
    display: inline-block;
    padding: 9px 18px;
    background: #f29d4d;
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 30px;
    white-space: nowrap;
    transition: background 0.2s, transform 0.15s;
}

.header-cta:hover {
    background: #ab6c32;
    transform: translateY(-1px);
}

/* --- Hamburger button --------------------------------------- */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.menu-toggle .bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #111;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

body.home #masthead:not(.is-scrolled) .menu-toggle .bar,
body.front-page #masthead:not(.is-scrolled) .menu-toggle .bar {
    background: #fff;
}

/* Animate hamburger → X */
.menu-toggle.is-active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Overlay ----------------------------------------------- */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
}

.nav-overlay.is-active {
    display: block;
}

/* ============================================================
   MOBILE  ≤ 840px — nav becomes a right-side drawer
   ============================================================ */
@media (max-width: 840px) {

    .header-inner {
        padding: 0 16px;
        height: 64px;
    }

    .menu-toggle {
        display: flex;
        /* Lift above the nav drawer so the X is visible when drawer is open */
        position: relative;
        z-index: 10000;
    }

    /* Logo smaller on mobile so it fits the 64px header */
    .site-logo img,
    .site-logo .custom-logo {
        height: 40px;
    }

    /* Override the parent theme's generic .bar rule which sets
       width:32px / height:3px / transition:all .4s bounce —
       that breaks our hamburger dimensions and X animation. */
    .menu-toggle .bar,
    body.home       #masthead .menu-toggle .bar,
    body.front-page #masthead .menu-toggle .bar {
        width:      22px !important;
        height:     2px  !important;
        background: #111 !important;
        position:   static !important;
        left:       auto !important;
        top:        auto !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }

    /* Hide desktop phone and CTA on mobile */
    .header-phone,
    .header-actions .header-cta {
        display: none;
    }

    /* The nav drawer slides in from the right */
    #site-navigation {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        width: min(320px, 85vw) !important;
        height: 100dvh !important;
        background: #fff !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 80px 0 32px;
        overflow-y: auto;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 9999;
        transform: none !important;
    }
    #site-navigation.is-open {
        right: 0 !important;
    }

    #site-navigation ul.nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 16px;
    }

    /* Always dark inside the drawer regardless of hero state */
    #site-navigation ul.nav-menu li a,
    body.home #masthead:not(.is-scrolled) #site-navigation ul.nav-menu li a,
    body.front-page #masthead:not(.is-scrolled) #site-navigation ul.nav-menu li a {
        color: #111 !important;
        font-size: 1rem;
        padding: 14px 12px;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 0;
        background: none;
    }

    #site-navigation ul.nav-menu li a:hover,
    #site-navigation ul.nav-menu li.current-menu-item > a {
        background: #f7f7f7;
        color: #00ACD5 !important;
    }

    /* Show drawer-only items inside the open panel */
    .nav-drawer-phone {
        display: block;
        margin: 24px 28px 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: #555;
    }

    .nav-drawer-phone a {
        color: inherit;
        text-decoration: none;
    }

    .nav-drawer-cta {
        display: block;
        margin: 16px 28px 0;
        text-align: center;
        padding: 12px 20px;
        background: #00ACD5;
        color: #fff !important;
        font-weight: 700;
        font-size: 0.9rem;
        text-decoration: none;
        border-radius: 30px;
    }
}

/* ============================================================
   CONTENT — push content down by header height so nothing
   is hidden behind the fixed header
   ============================================================ */

/* Front page: cover block starts at top-0 behind the transparent header */
body.home #primary,
body.home .wp-site-blocks > main,
body.front-page #primary,
body.front-page .wp-site-blocks > main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* All other pages: push down by header height */
body:not(.home):not(.front-page) #primary,
body:not(.home):not(.front-page) .wp-site-blocks > main {
    padding-top: 72px !important;
}

.wp-block-image img {border-radius: 17px}

/* ============================================================
   SWIM BANNER — Cover block with a list of credentials inside.
   Add CSS class "swim-banner" to the Cover block.
   ============================================================ */
.wp-block-columns.no-gap .wp-block-cover {border-radius: 20px}

.swim-banner.wp-block-cover {
    max-height: 80px;
    padding: 0 !important;
}

.swim-banner .wp-block-cover__inner-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 100%;
}

/* Horizontal pill list */
.swim-banner ul.wp-block-list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.swim-banner ul.wp-block-list li {
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding: 0 22px;
    position: relative;
    list-style: none !important;
}
.swim-banner ul.wp-block-list li::before {
    display: none;
    content: none;
}

/* Thin vertical divider between items */
.swim-banner ul.wp-block-list li + li::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 13px;
    background: rgba(255, 255, 255, 0.38);
}

@media (max-width: 840px) {
    .swim-banner.wp-block-cover {
        max-height: none;
    }

    .swim-banner ul.wp-block-list li {
        font-size: 0.72rem;
        padding: 5px 14px;
    }
	.wp-block-cover {padding: 30px 20px !important}
}

/* ============================================================
   SWIM PROGRAMMES — 3-column cards
   Add CSS class "swim-programmes" to the Columns block.
   ============================================================ */
.swim-programmes.wp-block-columns {
    gap: 24px !important;
    align-items: stretch !important;
}

.swim-programmes .wp-block-column {
    background: #fff;
    border-radius: 14px;
    padding: 36px 28px 28px;
    display: flex !important;
    flex-direction: column;
}




.swim-programmes .wp-block-column .wp-block-heading {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 6px !important;
}

/* Age / level label */
.swim-programmes .wp-block-column > p:first-of-type {
    font-size: 0.75rem;
    font-weight: 700;
    color: #00ACD5;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 10px;
}

/* Description — grows to push button to bottom */
.swim-programmes .wp-block-column > p:nth-of-type(2) {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    flex-grow: 1;
    margin: 0 0 24px;
}

/* Outline button */
.swim-programmes .wp-block-button__link {
    border: 2px solid #00ACD5 !important;
    color: #00ACD5 !important;
    background: transparent !important;
    border-radius: 30px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 9px 22px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.swim-programmes .wp-block-button__link:hover {
    background: #00ACD5 !important;
}

@media (max-width: 840px) {
    .swim-programmes.wp-block-columns {
        gap: 16px !important;
    }
    .swim-banner ul.wp-block-list {margin: 30px 0 !important}

  .wp-block-cover.alignfull.swim-banner {
    margin-top: 0!important;
    }
    .swim-programmes .wp-block-column {
        padding: 28px 22px 22px;
    }

    .swim-programmes .wp-block-column::before {
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
    }
    .has-extra-extra-large-font-size {font-size: 2.5rem !important}
    .wp-block-columns.reverse-column {flex-direction: column-reverse;}
}

/* ============================================================
   BUTTON STABILITY
   1. box-sizing: border-box  → border changes are absorbed inside
      the element — total height never shifts.
   2. outline: none           → kills the grey browser focus ring
      that some browsers show on pointer hover.
   3. Restore outline only on keyboard focus-visible so
      keyboard users still get an accessible indicator.
   ============================================================ */
.wp-block-button__link,
.wp-element-button,
button.btn-primary,
input[type="submit"],
.gform_button,
.header-cta,
a.header-cta,
.nav-drawer-cta {
    box-sizing: border-box !important;
    outline: none !important;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.gform_button:hover,
.gform_button:focus,
.header-cta:hover,
.header-cta:focus {
    outline: none !important;
}

/* Keyboard-only focus ring — does not affect layout */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.gform_button:focus-visible,
.header-cta:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 3px !important;
}

/* ============================================================
   BUTTON TRANSITIONS — override parent's transition: background-color .5s
   which leaves color/border-color/box-shadow snapping instantly.
   All buttons get a fast, complete transition so nothing jumps.
   ============================================================ */
.wp-block-button__link,
.wp-element-button,
button.btn-primary,
.gform_button,
.header-cta,
.nav-drawer-cta,
a.header-cta,
a.nav-drawer-cta {
    transition:
        background     0.2s ease,
        background-color 0.2s ease,
        color          0.2s ease,
        border-color   0.2s ease,
        box-shadow     0.2s ease,
        transform      0.15s ease !important;
}

/* Keep the swim-programmes card outline button in sync */
.swim-programmes .wp-block-button__link {
    transition:
        background     0.2s ease,
        background-color 0.2s ease,
        color          0.2s ease,
        border-color   0.2s ease !important;
}

.gform_button, .wp-block-button__link, .wp-element-button, button.btn-primary {
    background: #f29d4d !important;
}

/* ============================================================
   LEAFLET MAP  [global_map] shortcode
   ============================================================ */
.global-map {
    height: 490px;
    width: 100%;
    overflow: hidden;
    background: #e9ecef;
    border-radius: 14px;
}

.map-label-primary {
    background: #00ACD5 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    padding: 3px 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
    white-space: nowrap;
}

.map-label-primary::before { display: none !important; }

.map-label {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
    white-space: nowrap;
}

.map-label::before { display: none !important; }


/* ============================================================
   GRAVITY FORMS — DATE PICKER
   ============================================================ */
.gform_wrapper .gform_fields {grid-row-gap: 0;}
/* Input + icon wrapper */
.gfield--input-type-datepicker .ginput_container_date {
    position: relative;
    display: flex;
    align-items: center;
}
.gfield--input-type-datepicker input.datepicker {
    width: 100%;
    padding: 11px 44px 11px 14px !important;
    font-size: 0.9rem;
    color: #333;
    background: #fff;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    box-sizing: border-box !important;
}

.gfield--input-type-datepicker input.datepicker:focus {
    border-color: #00ACD5 !important;
    box-shadow: 0 0 0 3px rgba(0, 172, 213, 0.12) !important;
    outline: none !important;
}

/* Calendar icon — float inside the input on the right */
.gfield--input-type-datepicker img.ui-datepicker-trigger {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.gfield--input-type-datepicker img.ui-datepicker-trigger:hover {
    opacity: 0.9;
}

/* ── jQuery UI popup ─────────────────────────────────────── */
#ui-datepicker-div {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13) !important;
    padding: 16px !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    z-index: 99999 !important;
    width: 288px !important;
}

/* Header bar */
.ui-datepicker .ui-datepicker-header {
    background: #00ACD5 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 6px !important;
    margin-bottom: 12px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff !important;
}

.ui-datepicker .ui-datepicker-title {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Prev / Next arrows */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: static !important;
    top: auto !important;
    cursor: pointer !important;
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    border-radius: 6px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

/* Replace the default jQuery UI icon text with CSS arrows */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none !important;
}

.ui-datepicker .ui-datepicker-prev::after {
    content: '‹';
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
}

.ui-datepicker .ui-datepicker-next::after {
    content: '›';
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
}

/* Calendar grid */
.ui-datepicker table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

/* Day-of-week headers */
.ui-datepicker th {
    text-align: center !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #aaa !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 4px 0 8px !important;
    border: none !important;
    background: none !important;
}

/* Day cells */
.ui-datepicker td {
    padding: 2px !important;
    border: none !important;
    text-align: center !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    font-size: 0.825rem !important;
    text-decoration: none !important;
    color: #333 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

/* Hover */
.ui-datepicker td a:hover {
    background: rgba(0, 172, 213, 0.12) !important;
    color: #00ACD5 !important;
}

/* Selected day */
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-active:hover {
    background: #00ACD5 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* Today highlight */
.ui-datepicker td .ui-state-highlight {
    background: rgba(0, 172, 213, 0.1) !important;
    color: #00ACD5 !important;
    font-weight: 700 !important;
}

/* Greyed-out other-month days */
.ui-datepicker td.ui-datepicker-other-month a,
.ui-datepicker td.ui-datepicker-unselectable span {
    color: #ccc !important;
    cursor: default !important;
}

.ui-datepicker td.ui-datepicker-unselectable {
    cursor: default !important;
}

.entry-content>.wp-block-cover.alignfull:first-child {
margin-top: 0!important;
}

/* ── Force fieldset reset ── */
#field_2_33,
#field_2_30 {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  background: none !important;
}

#field_2_33 .gfield_label,
#field_2_30 .gfield_label {
  display: none !important;
}

/* ── Layout: checkbox + label side by side ── */
#field_2_33 .gchoice,
#field_2_30 .ginput_container_consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
}

/* ── Hide GF's default checkbox entirely and replace it ── */
#field_2_33 .gfield-choice-input,
#input_2_30_1 {
  all: unset !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin-top: 2px !important;
  border: 2px solid #c9a84c !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background-color 0.15s, border-color 0.15s !important;
}

#field_2_33 .gfield-choice-input:checked,
#input_2_30_1:checked {
  background-color: #c9a84c !important;
  border-color: #c9a84c !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5 6.5-7' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 11px !important;
}

#field_2_33 .gfield-choice-input:focus,
#input_2_30_1:focus {
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25) !important;
}

/* ── Label text ── */
#field_2_33 .gform-field-label--type-inline,
#field_2_30 .gfield_consent_label {
  all: unset !important;
  display: block !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  color: #1a2744 !important;
  cursor: pointer !important;
}

#field_2_30 .gfield_consent_label a {
  color: #c9a84c !important;
  text-decoration: underline !important;
}

.gfield_required_asterisk {
  color: #e53e3e !important;
  margin-left: 2px !important;
}
#input_2_14 {
margin: 0 0 40px 0}


/* ============================================
   NEWSLETTER SIGNUP — LAYOUT + POLISH
   Targets: #gform_4 (Gravity Forms ID 4)
   No font overrides. Colours tuned for the
   blue pool-photo background.
   ============================================ */

/* ── Hide GF footer, honeypot, asterisks ───────────────────────────────────── */
#gform_4 .gform-footer.gform_footer,
#gform_4 .gform_footer {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#gform_4 #field_4_6,
#gform_4 .gform_validation_container {
  display: none !important;
}

#gform_4 .gfield_required {
  display: none !important;
}

/* ── Form & body wrapper ────────────────────────────────────────────────────── */
#gform_4,
#gform_4 .gform-body.gform_body {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Fields container — full-width inline row ──────────────────────────────── */
#gform_4 #gform_fields_4.gform_fields {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-end !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* ── Individual field wrappers ─────────────────────────────────────────────── */
#gform_4 .gfield {
  flex: 1 1 180px !important;
  min-width: 140px !important;
  padding: 0 !important;
  margin: 0 !important;
}

#gform_4 #field_submit {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Labels ─────────────────────────────────────────────────────────────────── */
#gform_4 .gfield_label.gform-field-label {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
	top: -20px
}

/* ── Input containers ───────────────────────────────────────────────────────── */
#gform_4 .ginput_container,
#gform_4 .ginput_container_text,
#gform_4 .ginput_container_email {
  width: 100% !important;
  margin: 0 !important;
}

/* ── Inputs — override the bare underline style ─────────────────────────────── */
#gform_4 input#input_4_4,
#gform_4 input#input_4_5,
#gform_4 input#input_4_1,
#gform_4 .ginput_container input[type="text"],
#gform_4 .ginput_container input[type="email"] {
  width: 100% !important;
  height: 50px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 6px !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

#gform_4 input#input_4_4::placeholder,
#gform_4 input#input_4_5::placeholder,
#gform_4 input#input_4_1::placeholder,
#gform_4 .ginput_container input[type="text"]::placeholder,
#gform_4 .ginput_container input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

#gform_4 input#input_4_4:focus,
#gform_4 input#input_4_5:focus,
#gform_4 input#input_4_1:focus,
#gform_4 .ginput_container input[type="text"]:focus,
#gform_4 .ginput_container input[type="email"]:focus {
  border-color: rgba(255, 255, 255, 0.85) !important;
  background-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Submit button — solid white ────────────────────────────────────────────── */
#gform_4 #gform_submit_button_4,
#gform_4 input[type="submit"]#gform_submit_button_4 {
  height: 50px !important;
  padding: 0 32px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a8fb5 !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
}

#gform_4 #gform_submit_button_4:hover,
#gform_4 input[type="submit"]#gform_submit_button_4:hover {
  background-color: rgba(255, 255, 255, 0.88) !important;
  transform: translateY(-1px) !important;
}

#gform_4 #gform_submit_button_4:active,
#gform_4 input[type="submit"]#gform_submit_button_4:active {
  transform: translateY(0) !important;
  background-color: rgba(255, 255, 255, 0.75) !important;
}

/* ── Privacy / description text below ───────────────────────────────────────── */
#gform_4 .gfield_description,
#gform_4 .gform_description {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 12px !important;
  margin-top: 12px !important;
}

#gform_4 .gfield_description a,
#gform_4 .gform_description a {
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: underline !important;
}

/* ── Validation errors ───────────────────────────────────────────────────────── */
#gform_4 .gfield_error input {
  border-color: #ffaaaa !important;
}

#gform_4 .validation_message {
  color: #ffcccc !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* ── Responsive: stack on mobile ────────────────────────────────────────────── */
@media (max-width: 640px) {
  #gform_4 #gform_fields_4.gform_fields {
    flex-direction: column !important;
    gap: 12px !important;
  }

  #gform_4 .gfield,
  #gform_4 #field_submit {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  #gform_4 #gform_submit_button_4,
  #gform_4 input[type="submit"]#gform_submit_button_4 {
    width: 100% !important;
  }
}
/* Fix Leaflet marker icon hidden by .wp-block-column img max-width: 100% */
.leaflet-container .leaflet-primary-pane img { max-width: none !important; }