@charset "UTF-8";
/*
       _ _                     _   _
 _ __ / / | ___ _ __ ___  __ _| |_(_)_   _____
| '_ \| | |/ __| '__/ _ \/ _` | __| \ \ / / _ \
| |_) | | | (__| | |  __/ (_| | |_| |\ V /  __/
| .__/|_|_|\___|_|  \___|\__,_|\__|_| \_/ \___|
|_|

/*
|--------------------------------------------------------------------------
| Variables
| Author: P11 Interactive Team
| Visit us: @ p11.com
|--------------------------------------------------------------------------
|
| This file holds all of the variables for the site.
| 1. Fonts
| 2. Colors
| 3. Color Variations
| 4. Transparent Colors
| 5. Color List
| 6. Screen Sizes / Breakpoints
|
*/
/*
| 1. Fonts
| --------------------------------------------------
| These font variables are used to hold the values for
| the sitewide fonts used on the project.
|
*/
/*
| 2. Colors
| --------------------------------------------------
| The variables are used to store the color theme for
| the site.
|
*/
/*
| 3. Color Variations
| --------------------------------------------------
| These color variations are auto generated by the
| following functions below.
*/
/*
| 4. Transparent Colors
| --------------------------------------------------
| These transparent colors are auto generated by the
| following functions below.
*/
/*
| 5. Colors List
| --------------------------------------------------
| This list is used for building out the various
| classes for using colors accross the site, classes
| for type, background colors, etc.
*/
/*
| 6. Screen Sizes / Breakpoints
| --------------------------------------------------
| Breakpoint variables in pixel widths for media queries.
|
*/
/*
| Extra small mobile
*/
/*
| Mobile
*/
/*
| Tablet
*/
/*
| Middle Sized Devices
*/
/*
| Small Laptop
*/
/*
| Large Laptop / Desktop
*/
/*
| Large Desktop
*/
/*
       _ _                     _   _
 _ __ / / | ___ _ __ ___  __ _| |_(_)_   _____
| '_ \| | |/ __| '__/ _ \/ _` | __| \ \ / / _ \
| |_) | | | (__| | |  __/ (_| | |_| |\ V /  __/
| .__/|_|_|\___|_|  \___|\__,_|\__|_| \_/ \___|
|_|

/*
|--------------------------------------------------------------------------
| Mixins
| Author: P11 Interactive Team
| Visit us: @ p11.com
|--------------------------------------------------------------------------
| 1. Resets
| 2. Positioning
|
| Notes: Define patterns of property value pairs, which can then be reused in other rule sets
|
*/
/*
| Font Smoothing
| --------------------------------------------------
|
| Aligns most of the browsers with the same font antialiasing.
|
*/
/*
| Strict Button Style
| --------------------------------------------------
|
| Sets the button style appearance to none for various
| mobile browsers and OS's that will auto change the styling
|
*/
/*
| Positioning
| --------------------------------------------------
|
| The following mixins are used for positioning elements
| via the absolute rule
|
*/
/*
| Transition
| --------------------------------------------------
|
| Used to apply all browser prefixes for the css3
| transition property
|
*/
/*
| Box Shadow
| --------------------------------------------------
|
| Used to apply all browser prefixes for the css3
| box-shadow property
|
*/
/*
| Text Shadow
| --------------------------------------------------
|
| Used to apply all browser prefixes for the css3
| text-shadow property
|
*/
/*
| SVG Shadow
| --------------------------------------------------
|
| Used to apply all browser prefixes for the css3
| filter property
|
*/
/*
| Responsive Media Query Mixins
| --------------------------------------------------
|
| The following mixins are used for applying various
| media queries and specified breakpoints
|
*/
/*
| Transparent Colors
| --------------------------------------------------
|
| Function for creating transparent colors.
|
*/
/*
| Gradient Backgrounds
| --------------------------------------------------
|
| Mixin for creating gradient backgrounds
| @include bg-gradient(fn-transparent-color($color-black, 1), fn-transparent-color($color-black, 0), top, bottom, 0%, 100%);
|
*/
/*
| Rotation
| --------------------------------------------------
|
| Mixin for applying the correct browser prefixes for the
| transform: rotate property
|
*/
/*
| Keyframe animations
| --------------------------------------------------
| Mixin for applying animations to elements
|
*/
/* ── Base / reset ── */
/* body {
	background: #f5f2ec;
	font-family: $font-main-medium;
	color: #3a2e22;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
} */
.tour-btn {
  display: inline-block;
  width: 100%;
  max-width: 220px;
  background: #005E8A;
  color: #ffffff !important;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1.2em;
  font-weight: 600;
  text-decoration: none !important;
  text-align: center;
  margin: 0 auto;
  margin: 20px 0 10px 0;
}
.tour-btn:hover {
  color: #ffffff !important;
  background: #003b57;
}

/* ── Form wrapper ── */
.form-wrapper {
  width: 100%;
  max-width: 780px;
}

/* ── Field grid ── */
.field-row {
  display: flex;
  gap: 40px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.fielditem {
  flex: 1 1 calc(50% - 20px);
  min-width: 200px;
  position: relative;
}

/* ── Animate-label inputs ── */
.fielditem label {
  position: absolute;
  top: 4px;
  left: 0;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: #005E8A;
  pointer-events: none;
  transition: all 0.2s ease;
}

.fielditem input[type=text],
.fielditem input[type=email] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #005E8A;
  padding: 22px 0 6px;
  font-size: 15px;
  font-family: "AcherusGrotesqueMedium", sans-serif;
  color: #3a2e22;
  outline: none;
  transition: border-color 0.2s;
}

.fielditem input:focus {
  border-bottom-color: #003b57;
}

/* ── Date trigger field ── */
.date-field {
  flex: 1 1 calc(50% - 20px);
  min-width: 200px;
  position: relative;
}

.date-field label {
  display: block;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: #005E8A;
  margin-bottom: 0;
  pointer-events: none;
}

.date-trigger {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #005E8A;
  padding: 22px 0 6px;
  font-size: 15px;
  font-family: "AcherusGrotesqueMedium", sans-serif;
  color: #3a2e22;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s;
}

.date-trigger:hover,
.date-trigger:focus {
  border-bottom-color: #003b57;
  outline: none;
}

.date-trigger .placeholder {
  color: #3a2e22;
  font-size: 15px;
}

.date-trigger .placeholder.empty {
  color: transparent;
  /* hidden until set */
}

.date-trigger svg {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.date-trigger:hover svg {
  opacity: 0.85;
}

/* ── Calendar popover ── */
.cal-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 100;
  background: #ccefff;
  border: 1px solid #005E8A;
  box-shadow: 0 8px 32px rgba(60, 40, 10, 0.12);
  width: 280px;
  padding: 20px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cal-popover.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Cal header */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cal-header .month-label {
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #385167;
  font-weight: normal;
}

.cal-nav {
  background: none;
  border: none;
  cursor: pointer;
  color: #003b57;
  padding: 2px 6px;
  font-size: 16px;
  line-height: 1;
  transition: color 0.15s;
}

.cal-nav:hover {
  color: #5a3d00;
}

/* Day-of-week header */
.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 6px;
}

.cal-dow span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #005E8A;
  text-transform: uppercase;
  padding: 2px 0;
}

/* Day grid */
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-family: "AcherusGrotesqueMedium", sans-serif;
  cursor: pointer;
  border-radius: 2px;
  color: #3a2e22;
  transition: background 0.12s, color 0.12s;
}

.cal-day:hover {
  background: #ede7d8;
}

.cal-day.other-month {
  color: #5e85a7;
}

.cal-day.today {
  color: #003b57;
  font-weight: bold;
}

.cal-day.selected {
  background: #003b57;
  color: #ccefff;
  border-radius: 2px;
}

.cal-day.past,
.cal-day.sunday {
  color: #5e85a7;
  cursor: default;
  pointer-events: none;
}

/* ── Submit row ── */
.submit-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.required-text {
  font-size: 12px;
  color: #005E8A;
  letter-spacing: 0.04em;
}

.submit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #003b57;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "AcherusGrotesqueMedium", sans-serif;
  transition: color 0.15s;
}

.submit-btn:hover {
  color: #5a3d00;
}

.submit-btn svg {
  width: 10px;
  height: 10px;
}

/* ── Validation error states ── */
.field-error .date-trigger,
.field-error .time-select,
.field-error .home-size-select {
  border-bottom-color: #b94040;
}

.field-error-msg {
  display: none;
  font-size: 12px;
  color: #b94040;
  letter-spacing: 0.03em;
  margin-top: 5px;
}

.field-error .field-error-msg {
  display: block;
}

/* hidden inputs for form submission */
#selectedDate,
#selectedTime {
  display: none;
}

/* ── Time dropdown field ── */
.time-field {
  flex: 1 1 calc(50% - 20px);
  min-width: 200px;
  position: relative;
}

.time-field label {
  display: block;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: #005E8A;
  pointer-events: none;
  margin-bottom: 0;
}

.time-select-wrapper {
  position: relative;
  width: 100%;
}

.time-select-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #003b57;
  pointer-events: none;
  opacity: 0.6;
}

.time-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid #005E8A;
  padding: 22px 20px 6px 0;
  font-size: 15px;
  font-family: "AcherusGrotesqueMedium", sans-serif;
  color: #3a2e22;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.time-select:focus {
  border-bottom-color: #003b57;
}

.time-select:disabled {
  color: #5e85a7;
  cursor: not-allowed;
  border-bottom-color: #005E8A;
}

.time-select option {
  font-family: "AcherusGrotesqueMedium", sans-serif;
  color: #3a2e22;
  background: #ccefff;
}

/* ── Home size dropdown field ── */
.home-size-field {
  flex: 1 1 calc(50% - 20px);
  min-width: 200px;
  position: relative;
}

.home-size-field label {
  display: block;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: #005E8A;
  pointer-events: none;
  margin-bottom: 0;
}

.home-size-select-wrapper {
  position: relative;
  width: 100%;
}

.home-size-select-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #003b57;
  pointer-events: none;
  opacity: 0.6;
}

.home-size-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid #005E8A;
  padding: 22px 20px 6px 0;
  font-size: 15px;
  font-family: "AcherusGrotesqueMedium", sans-serif;
  color: #3a2e22;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.home-size-select:focus {
  border-bottom-color: #003b57;
}

.home-size-select option {
  font-family: "AcherusGrotesqueMedium", sans-serif;
  color: #3a2e22;
  background: #ccefff;
}

/*# sourceMappingURL=tour-form.css.map */