/* Values measured from the 1440px Figma export (body content only) */
:root {
  --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --navy: #00334D;          /* page title + section titles */
  --teal: #009FB6;          /* section icons */
  --orange: #F97A17;        /* accents, submit button */
  --orange-soft: #FFF2E5;   /* active pill, plus button */
  --page-bg: #f8f9fb;
  --field-bg: #F8F9FA;
  --border: #E3E5E8;        /* card + field borders */
  --text: #737B8C;          /* labels, intro, consent text */
  --placeholder: #8F96A3;   /* placeholders, icons, counter values */
  --danger: #ff133f;        /* required asterisk */
  --minus-bg: #F3F4F6;
  --check-border: #c8cbd2;
  --soft-shadow: 0 2px 8px 0 #00000014;
}
.form-wrap { width: 100%; max-width: 840px; margin-inline: auto; }

body {background: #F8F9FA;color: var(--text);font-size: 14px;}

/* Cards */
.form-card {background: #fff;border: 1px solid var(--border);border-radius: 16px;overflow: hidden;}
.form-card.intro {box-shadow: 0 2px 8px 0 #00000014;}
.form-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
  color: var(--navy);
}
.form-card-header i {color: var(--teal);font-size: 17px;line-height: 1;}
.form-card-body {padding: 16px;box-shadow: 0 2px 8px 0 #00000014;}
.form-card.intro .form-card-body { padding: 16px; }

/* Page heading */
.page-title {font-size: 24px;line-height: 28px;font-weight: 700;color: var(--navy);margin: 0 0 6px;}
.title-accent {width: 48px;height: 3px;background: var(--orange);border-radius: 1.5px;margin-bottom: 16px;}
.page-intro { font-size: 14px; line-height: 16px; font-weight: 400; color: var(--text); margin: 0; }

/* Labels */
.form-label {
  display: block;
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.req { color: var(--danger); margin-left: 4px; }

/* Fields: one 44px rounded box, icon + control inside */
.field {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 44px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
  padding: 8px 12px;
}
.field > i { font-size: 18px; color: var(--placeholder); margin-right: 8px; line-height: 1; }
.field .form-control, .field .form-select {
  flex: 1 1 auto; min-width: 0; height: 100%;
  background-color: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: 0 12px 0 0;
  font-size: 14px; font-weight: 400; color: var(--navy);
}
.field .form-control::placeholder { color: var(--placeholder); opacity: 1; }
.field .form-select {
  color: var(--placeholder);
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238f95a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 14px center; background-size: 14px;
}
.field .form-select.has-value { color: var(--navy); }
.field:focus-within { border-color: var(--orange); box-shadow: 0 0 0 .2rem rgba(249, 123, 23, .15); background: #fff; }
#date { cursor: pointer; }

textarea.form-control {
  min-height: 100px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--navy);
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  /* box-shadow: var(--soft-shadow); */
  resize: vertical;
  line-height: 16px;
}
textarea.form-control::placeholder { color: var(--placeholder); opacity: 1; }
textarea.form-control:focus { background: #fff; border-color: var(--orange); box-shadow: 0 0 0 .2rem rgba(249, 123, 23, .15); }

/* Preferred contact method pills: 36px high, 8px gap */
.contact-pill { position: relative; }
.contact-pill input { position: absolute; opacity: 0; pointer-events: none; }
.contact-pill label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: var(--placeholder);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50rem;
  box-shadow: var(--soft-shadow);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.contact-pill input:checked + label { background: var(--orange-soft); border-color: var(--orange); color: var(--orange); font-weight: 600; }
.contact-pill input:focus-visible + label { box-shadow: 0 0 0 .2rem rgba(249, 123, 23, .25); }

/* Steppers (adults, children, child age): 44px box, 28px round buttons */
.counter {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 11px;
  background: var(--field-bg); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--soft-shadow);
}
.counter-btn {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.counter-btn[data-action="dec"] {background: var(--minus-bg);color: #737B8C;}
.counter-btn[data-action="inc"] {background: var(--orange-soft);color: var(--orange);font-weight: 700;}
.counter-btn:hover:not(:disabled) { filter: brightness(.96); }
.counter-btn:disabled { opacity: .45; cursor: not-allowed; }
.counter-btn:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(249, 123, 23, .25); }
.counter-value { flex: 1; text-align: center; font-size: 14px; font-weight: 400; color: var(--placeholder); }

/* Consent: 16px box, text 14px / 22px */
.consent-row {display: flex;align-items: center;gap: 12px;padding: 8px 0 0 12px;margin-top: 8px;}
.consent-box {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--check-border);
  border-radius: 4px;
  background-color: #fff;
}
.consent-box:checked { background-color: var(--orange); border-color: var(--orange); }
.consent-box:focus { border-color: var(--orange); box-shadow: 0 0 0 .2rem rgba(249, 123, 23, .2); }
.consent-text { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--text); cursor: pointer; }
.consent-text .req { margin-left: 0; }

/* Submit: 52px pill */
.btn-submit {
  height: 52px;
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  border-radius: 50rem;
  box-shadow: 0 4px 14px rgba(249, 123, 23, .30);
}
.btn-submit:hover, .btn-submit:focus-visible { background: #ea6f0e; border-color: #ea6f0e; color: #fff; }

/* jQuery UI datepicker themed to match */
.ui-datepicker {
  font-family: var(--bs-body-font-family);
  width: 19rem; padding: .75rem;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
  z-index: 1080 !important;
}
.ui-datepicker .ui-datepicker-header { background: transparent; border: 0; padding: .25rem 0 .5rem; }
.ui-datepicker .ui-datepicker-title { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 2rem; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: .35rem; width: 2rem; height: 2rem; border: 0; border-radius: 8px; cursor: pointer; }
.ui-datepicker .ui-datepicker-prev { left: .25rem; }
.ui-datepicker .ui-datepicker-next { right: .25rem; }
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background: var(--orange-soft); }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { margin-top: -8px; }
.ui-datepicker th { font-size: 11px; font-weight: 500; color: var(--text); padding: .4rem 0; }
.ui-datepicker td { padding: 2px; }
.ui-datepicker td .ui-state-default { background: transparent; border: 0; border-radius: 8px; text-align: center; padding: .45rem 0; font-size: 13px; color: var(--navy); }
.ui-datepicker td .ui-state-hover { background: var(--orange-soft); color: var(--orange); }
.ui-datepicker td .ui-state-highlight { background: var(--field-bg); font-weight: 700; }
.ui-datepicker td .ui-state-active { background: var(--orange); color: #fff; }
.ui-datepicker td.ui-state-disabled .ui-state-default { color: #cbd5e1; }
span.form-label.d-block {
    margin-bottom: 8px;
}
/*success form*/
    /* Values measured from the 1440px Figma export (body content only) */
:root {
  --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --navy: #00334D;          /* title + reference label */
  --orange: #f97b17;        /* reference value, primary button */
  --page-bg: #F8F9FA;       /* page + reference chip background */
  --border: #e4e5e9;        /* secondary button border */
  --text: #737a8a;          /* description, secondary button text */
  --success: #0AC247;       /* check icon */
  --success-soft: #E5FFF2;  /* icon circle */
}
/* Centers the card in the body area (design frame is 700px high) */
.success-area { min-height: 700px; display: flex; align-items: center; padding-block: 48px; }
.success-wrap { width: 100%; max-width: 840px; margin-inline: auto; }

.success-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 #00000014;
  padding: 39px 24px;
  text-align: center;
  border: 1px solid #F2F2F2;
}

.success-icon {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--success-soft); border-radius: 50%;
  color: var(--success); font-size: 32px; line-height: 1;
}

.success-title {font-size: 22px;line-height: 26px;font-weight: 700;color: var(--navy);margin: 0 0 8px;}

.success-text {
  max-width: 580px; margin: 0 auto;
  font-size: 14px; line-height: 21px; font-weight: 400; color: var(--text);
}

.ref-chip {
  display: inline-block;
  margin-top: 32px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--page-bg);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: var(--navy);
}
.ref-chip .ref-value {color: var(--orange);margin-left: 2px;}

.success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }

.btn-wg {
  height: 40px;
  padding: 12px 20px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
  line-height: 16px;
}
.btn-wg-secondary { background: #fff; border: 1px solid var(--border); color: var(--text); }
.btn-wg-secondary:hover { background: var(--page-bg); color: var(--navy); }
.btn-wg-primary { background: var(--orange); border: 1px solid var(--orange); color: #fff; }
.btn-wg-primary:hover { background: #ea6f0e; border-color: #ea6f0e; color: #fff; }
.btn-wg:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(249, 123, 23, .25); }

/* Adult and child age dropdowns */
#activityForm #adultsInput,
#activityForm #childrenInput,
#activityForm #adultAgeContainer .form-select,
#activityForm #childAgeContainer .form-select {
    width: 100%;
    height: 44px;
    padding: 8px 40px 8px 12px;
    font-family: var(--bs-body-font-family);
    font-size: 14px;
    font-weight: 400;
    color: var(--navy);
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--soft-shadow);
}

/* Match the existing orange focus effect */
#activityForm #adultsInput:focus,
#activityForm #childrenInput:focus,
#activityForm #adultAgeContainer .form-select:focus,
#activityForm #childAgeContainer .form-select:focus {
    background-color: #fff;
    border-color: var(--orange);
    box-shadow: 0 0 0 0.2rem rgba(249, 123, 23, 0.15);
    outline: none;
}

/* Guest count and age dropdowns */
#activityForm #adultsInput,
#activityForm #childrenInput,
#activityForm #guestAgeContainer .age-select {
    width: 100%;
    height: 44px;
    padding: 8px 36px 8px 12px;
    font-family: var(--bs-body-font-family);
    font-size: 14px;
    color: var(--navy);
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--soft-shadow);
}

#activityForm #adultsInput:focus,
#activityForm #childrenInput:focus,
#activityForm #guestAgeContainer .age-select:focus {
    background-color: #fff;
    border-color: var(--orange);
    box-shadow: 0 0 0 0.2rem rgba(249, 123, 23, 0.15);
}

/* Consistent spacing for age labels */
#guestAgeContainer .form-label {
    margin-bottom: 6px;
}

/* Transportation: adult and child count dropdowns */
#transportForm #adultsInput,
#transportForm #childrenInput {
    display: block;
    width: 100%;
    height: 44px;
    padding: 8px 36px 8px 12px;

    font-family: var(--bs-body-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;

    color: var(--navy) !important;
    background-color: var(--field-bg) !important;

    border: 1px solid var(--border);
    border-radius: 8px;

    box-shadow: var(--soft-shadow);
    appearance: auto;
    -webkit-appearance: auto;
}

/* Focused dropdown */
#transportForm #adultsInput:focus,
#transportForm #childrenInput:focus {
    color: var(--navy) !important;
    background-color: #fff !important;
    border-color: var(--orange);
    box-shadow: 0 0 0 0.2rem rgba(249, 123, 23, 0.15);
    outline: none;
}

/* Dropdown option text */
#transportForm #adultsInput option,
#transportForm #childrenInput option {
    color: #00334D;
    background-color: #fff;
}