@import url("https://use.typekit.net/mch3imj.css");

@import url('https://fonts.googleapis.com/css2?family=Damion&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
    font-family: "weston_free_regular";
    src: url("https://external-stylesheets.s3.us-east-1.amazonaws.com/fonts/clydemays/weston_free-webfont.woff2") format("woff2"), url("https://external-stylesheets.s3.us-east-1.amazonaws.com/fonts/clydemays/weston_free-webfont.woff") format("woff");
}


/* Variables */
:root {
  --primary-color: #424242;
  --secondary-color: #a89968;
  --tertiary-color: #326295;
  --font-primary: "PT Serif", serif;
  --font-secondary: "abolition", serif;
  --font-button: "PT Serif", serif;
  --font-tagline: "Damion", cursive;
  --font-ornament: "weston_free_regular", serif;
  --transition: .1s;
  --uppercase: uppercase;
}

/* Typography */
body {
  color: var(--primary-color);
  font-family: var(--font-primary);
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
}

.TourPage-About-description a {
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

.TourPage-About-description a:hover {
  color: var(--secondary-color) !important;
}

h1, h2, h4, h5, h6, .infoPanel .tourName {
  font-family: var(--font-secondary) !important;
  font-weight: 600 !important;
  color: var(--primary-color) !important;
  font-optical-sizing: auto;
  font-style: normal;
}

h3 {
  font-family: var(--font-ornament) !important;
  font-weight: 400 !important;
  color: var(--tertiary-color) !important;
  font-optical-sizing: auto;
  font-style: normal;
}

.tour-title {
  font-size: 48px !important;
  line-height: 1 !important;
  color: var(--secondary-color) !important;
}

.TourPage-About-title {
  font-family: var(--font-secondary) !important;
  color: var(--secondary-color) !important;
  font-size: 60px !important;
  line-height: 1 !important;
}

.tour-tagline, .TourPage-About-tagline {
  font-family: var(--font-tagline) !important;
  color: var(--tertiary-color) !important;
  font-weight: 400 !important;
  font-size: 21px !important;
}

.tour-description, .tour-dates-available, .book-tour-details, .TourPage-About-description, .TourPage-BookingDetails,
.TourPage-BookingDetails .BookingRequest-form .ui.dropdown .text.default, .CheckoutSummary-ContentBox table td, .css-lkdkks {
  color: var(--primary-color) !important;
  font-weight: 400 !important;
}

.filter-buttons {
  font-weight: 600 !important;
}

/* onsite form fieds for dark maode */
/* .Plugins-TourPage-GlanceWrapper {
  color: var(--primary-color) !important;
}

.Plugins-TourPage-GlanceWrapper .TourPage-Glance .ui.grid .row:nth-child(2n) {
  background-color: transparent !important;
}

.ContactModal-header {
  color: var(--secondary-color) !important;
} */

/* Buttons */
.button, .ui.anygreen.button, .TourPage-ContactGuide-submit-button.ui.large.button,
#request-booking-mobile .ui.button, .ConfirmationContainer .ButtonContainer .ui.button,
.CheckoutNavigationController button.BookingRequest-submit, [data-testid="update-email-btn"],
.rescheduleModal .modalActions .submitButton, .contactModal .modalActions .submitButton, .ConfirmationDefault .GoGAdditionalInfoButton, [data-testid="apply-filter"] {
  font-family: var(--font-button) !important;
  font-weight: 400 !important;
  color: #fff;
  background: var(--secondary-color) !important;
  border: 1px solid var(--secondary-color) !important;
  border-radius: 0px;
  transition: var(--transition);
  font-optical-sizing: auto;
  font-style: normal;
}

.button:hover, .ui.anygreen.button:hover, .TourPage-ContactGuide-submit-button.ui.large.button:hover,
.ConfirmationContainer .ButtonContainer .ui.button:hover, .CheckoutNavigationController button.BookingRequest-submit:hover, .ConfirmationDefault .GoGAdditionalInfoButton:hover, .rescheduleModal .modalActions .submitButton:hover, .contactModal .modalActions .submitButton:hover, [data-testid="apply-filter"]:hover {
  background-color: transparent !important;
  color: var(--secondary-color) !important;
}

/* Secondary Buttons */
.ui.basic.button, .DiscountCodeContainer .DiscountCode-Input .ui.button,
[data-testid="dont-cancel-btn"], .ModifyBooking .ModifyBooking-Column.left .actionButtons .rescheduleButton,
.ModifyBooking .ModifyBooking-Column.left .actionButtons .contactButton,
.TourPage-ContactGuide-link.ui.basic.button {
  font-family: var(--font-button) !important;
  font-weight: 400 !important;
  color: var(--secondary-color) !important;
  background: transparent !important;
  border: 1px solid var(--secondary-color) !important;
  border-radius: 0px;
  transition: var(--transition);
  font-optical-sizing: auto;
  font-style: normal;
}

.ui.basic.button:hover, .DiscountCodeContainer .DiscountCode-Input .ui.button:hover, .ModifyBooking .ModifyBooking-Column.left .actionButtons .rescheduleButton:hover {
  background: var(--secondary-color) !important;
  border: 1px solid var(--secondary-color) !important;
  color: #ffffff !important;
}

/* .TourPage-ContactGuide-link.ui.basic.button .ContactGuide-link-text, .TourPage-ContactGuide-link.ui.basic.button .icon.anyfont {
  color: var(--secondary-color) !important;
} */

.TourPage-ContactGuide-link.ui.basic.button:hover,
.TourPage-ContactGuide-link.ui.basic.button:hover .ContactGuide-link-text,
.TourPage-ContactGuide-link.ui.basic.button:hover .icon.anyfont {
    color: #ffffff !important;
}

.css-3ztlt5 {
    border-style: solid !important;
    border-radius: 0 !important;
}

/* Additional Styles */

/*Hide "more" link on Experience details, display full details on desktop and mobile*/
.TourPage-About-description {/*Description section- remove collapse*/
  height: auto !important;
}

.TourPage-About-description:after, .TourPage-About-description-more {/*Description section- remove collapse and hides more button*/
  display: none !important;
}

/* .TourPage-About, .Plugins-TourPage-GlanceWrapper, .grid.tour-page #booking-container {
  background: transparent;
}

.ConfirmationDefault h1 .titleRow {
  font-weight: 400 !important;
  line-height: 1 !important;
} */

/* form fields for dark mode */
.multi-select-wrapper .ui.multi-select-dropdown, .multi-select-wrapper .ui.multi-select-options, .TourPage-BookingDetails .BookingRequest-form .ui.dropdown, #payment-main > div > div > div > div.ColumnContainer > div.ComponentContainer.RightColumn > div > div.CheckoutSummary > div.CheckoutSummary-Subtotal-PriceBreakdown-Deposit > div > div > div.Toggleable-Handler > table > tbody > tr > td.value > button, .CheckoutSummary-Container {
  background: transparent !important;
}

.CheckoutSummary, #payment-main > div > div > div > div.ColumnContainer > div.ComponentContainer.LeftColumn > div:nth-child(3) > div.CheckoutPayment.CheckoutSection > div:nth-child(2) > form > div > div.css-1lh4im4.exbukip1 > div.ui.input.t-Default.stripe-element.css-kgo85i.exbukip0 > label, #payment-main > div > div > div > div.ColumnContainer > div.ComponentContainer.LeftColumn > div:nth-child(3) > div.CheckoutPayment.CheckoutSection > div:nth-child(2) > form > div > div.css-1lh4im4.exbukip1 > div.ui.input.t-Default.stripe-element.css-gb4ymw.exbukip0 > label {
  color: var(--primary-color) !important;
}



@media (max-width: 600px) {
  .book-tour-btn {
    width: 250px;
    padding: 13px 0;
    margin-top: 32px;
    height: 50px;
    font-size: 16px;
  }
  .TourPage-About-title {
    font-size: 48px !important;
  }
  .CheckoutNavigationController button.BookingRequest-submit {
    height: 50px;
  }

  .MobileCheckout-CoverPhoto span.text .title .name {
    color: #fff !important;
  }
}