/*==========================================
  WALDORF ASTORIA THEME
==========================================*/

:root {
  --color-bg: 255, 255, 255;
  --color-bg-alt: 241, 241, 241;
  --color-bg-disabled: 228, 228, 228;
  --color-bg-inverse: 18, 18, 18;
  --color-bg-primary: 231, 242, 246;
  --color-bg-quarternary: 249, 219, 191;
  --color-border: 227, 227, 227;
  --color-border-alt: 220, 220, 220;
  --color-danger: 211, 3, 41;
  --color-danger-alt: 250, 229, 233;
  --color-info: 223, 196, 166;
  --color-info-alt: 229, 245, 251;
  --color-warn: 186, 131, 35;
  --color-warn-alt: 253, 237, 169;
  --color-success: 30, 97, 44;
  --color-success-alt: 226, 248, 226;
  --color-primary: 0, 0, 0; /* #20201F - 000000 */
  --color-primary-alt: 8, 8, 8;
  --color-secondary: 3, 33, 101; /* 222d59 - 032165 */
  --color-secondary-alt: 0, 25, 93;
  --color-tertiary: 154, 185, 173; /* 97AEB2 - 9AB9AD */
  --color-tertiary-alt: 146, 177, 165;
  --color-quarternary: 255, 255, 255; /* FFFFFF */
  --color-quarternary-alt: 247, 247, 247;
  --color-text: 18, 18, 18;
  --color-text-alt: 102, 102, 102;
  --color-text-disabled: 189, 189, 189;
  --color-text-inverse: 255, 255, 255;
  --color-white: 255, 255, 255;
  --color-outline-shadow: rgba(0, 156, 222, 0.3);
  --color-overlay: rgba(29, 29, 29, 0.3);
  /* 
    yeah i know, waldorf astoria serif aint a sans font, but we use this for 
    body copy everywhere and need to have this updated 
  */
  --font-sans: 'Waldorf Astoria Serif';
  --font-serif: 'Waldorf Astoria Serif';
  --font-mono: 'Menlo';
  --font-headline: 'Waldorf Astoria Sans';
  --font-headline-brand: 'Waldorf Astoria Sans';
}

@font-face {
  font-family: 'Waldorf Astoria Sans';
  font-weight: 400;
  font-display: swap;
  src: url('/modules/assets/fonts/waldorf-astoria-sans/WaldorfAstoriaSans-Regular.woff2');
}

@font-face {
  font-family: 'Waldorf Astoria Sans';
  font-weight: 600;
  font-display: swap;
  src: url('/modules/assets/fonts/waldorf-astoria-sans/WaldorfAstoriaSans-Bold.woff2');
}

@font-face {
  font-family: 'Waldorf Astoria Sans';
  font-weight: 300;
  font-display: swap;
  src: url('/modules/assets/fonts/waldorf-astoria-sans/WaldorfAstoriaSans-Light.woff2');
}

@font-face {
  font-family: 'Waldorf Astoria Serif';
  font-weight: 400;
  font-display: swap;
  src: url('/modules/assets/fonts/waldorf-astoria-serif/WaldorfAstoriaSerif-Regular.woff2');
}

@font-face {
  font-family: 'Waldorf Astoria Serif';
  font-weight: 400;
  font-display: swap;
  font-style: italic;
  src: url('/modules/assets/fonts/waldorf-astoria-serif/WaldorfAstoriaSerif-Regular-Italic.woff2');
}

@font-face {
  font-family: 'Waldorf Astoria Serif';
  font-weight: 300;
  font-display: swap;
  src: url('/modules/assets/fonts/waldorf-astoria-serif/WaldorfAstoriaSerif-Light.otf');
}

@font-face {
  font-family: 'Waldorf Astoria Serif';
  font-weight: 300;
  font-display: swap;
  font-style: italic;
  src: url('/modules/assets/fonts/waldorf-astoria-serif/WaldorfAstoriaSerif-Light-Italic.otf');
}

@font-face {
  font-family: 'Waldorf Astoria Serif';
  font-weight: 600;
  font-display: swap;
  src: url('/modules/assets/fonts/waldorf-astoria-serif/WaldorfAstoriaSerif-Bold.woff2');
}

@font-face {
  font-family: 'Waldorf Astoria Serif';
  font-weight: 600;
  font-display: swap;
  font-style: italic;
  src: url('/modules/assets/fonts/waldorf-astoria-serif/WaldorfAstoriaSerif-Bold-Italic.woff2');
}

/* HEADINGS */
h1,
h2,
h3,
h4,
h5,
h6,
h1 > *,
h2 > *,
h3 > *,
h4 > * {
  font-weight: 300 !important;
  text-transform: uppercase;
}

/* BUTTONS */

.bookingWidgetButton {
  font-weight: 300 !important;
  border-radius: 0px;
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-primary), var(--tw-bg-opacity));
  font-family: var(--font-headline), var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgba(var(--color-quarternary), var(--tw-text-opacity));
}

.btn:not(.bookingWidgetButton) {
  margin-left: 0px;
  border-color: transparent;
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-family: var(--font-headline), var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-transform: uppercase;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  font-weight: 400 !important;
  padding: 0;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  position: relative;
}

.btn#closeFiltersButton {
  position: absolute !important;
  top: 0.5rem !important;
}

.btn:not(.bookingWidgetButton):after {
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 100%;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  height: 3px;
  content: '' !important;
}

#roomInfoButton {
  border-radius: 0px;
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-primary), var(--tw-border-opacity));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 768px) {

  #roomInfoButton {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

#specialRatesButton {
  border-radius: 0px;
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-primary), var(--tw-border-opacity));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 768px) {

  #specialRatesButton {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* PRIMARY BUTTON STYLES */
.btn-primary,
.btn-primary-outline {
  --tw-text-opacity: 1;
  color: rgba(var(--color-primary), var(--tw-text-opacity));
  border-color: transparent !important;
}

.btn-primary:hover,
.btn-primary-outline:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-primary), var(--tw-text-opacity));
}

.btn-primary:after,
.btn-primary-outline:after {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-tertiary), var(--tw-bg-opacity));
}

.btn-primary:hover:after,
.btn-primary-outline:hover:after {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-primary), var(--tw-bg-opacity));
}

/* SECONDARY BUTTON STYLES */
.btn-secondary,
.btn-secondary-outline {
  --tw-text-opacity: 1;
  color: rgba(var(--color-primary), var(--tw-text-opacity));
}

.btn-secondary:hover,
.btn-secondary-outline:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-primary), var(--tw-text-opacity));
}

.btn-secondary:after,
.btn-secondary-outline:after {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-secondary), var(--tw-bg-opacity));
}

.btn-secondary:hover:after,
.btn-secondary-outline:hover:after {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-primary), var(--tw-bg-opacity));
}

/* TERTIARY BUTTON STYLES */
.btn-tertiary,
.btn-tertiary-outline {
  --tw-text-opacity: 1;
  color: rgba(var(--color-quarternary), var(--tw-text-opacity));
}

.btn-tertiary:hover,
.btn-tertiary-outline:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-quarternary), var(--tw-text-opacity));
}

.btn-tertiary:after,
.btn-tertiary-outline:after {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-tertiary), var(--tw-bg-opacity));
}

.btn-tertiary:hover:after,
.btn-tertiary-outline:hover:after {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-quarternary), var(--tw-bg-opacity));
}

/* QUATERNARY BUTTON STYLES */
.btn-quarternary,
.btn-quarternary-outline {
  --tw-text-opacity: 1;
  color: rgba(var(--color-primary), var(--tw-text-opacity));
}

.btn-quarternary:hover,
.btn-quarternary-outline:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-secondary), var(--tw-text-opacity));
}

.btn-quarternary:after,
.btn-quarternary-outline:after {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-primary), var(--tw-bg-opacity));
}

.btn-quarternary:hover:after,
.btn-quarternary-outline:hover:after {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-secondary), var(--tw-bg-opacity));
}

/* disabled button styles */
.btn:disabled,
.btn:disabled {
  color: rgb(var(--color-text-disabled));
}

.btn:disabled:hover,
.btn:disabled:hover {
  color: rgb(var(--color-text-disabled));
}

.btn:disabled:after,
.btn:disabled:after {
  color: rgb(var(--color-bg-disabled));
}

.btn:disabled:hover:after,
.btn:disabled:hover:after {
  color: rgb(var(--color-bg-disabled));
}

/* buttons inline with each other */
.btn:only-child {
  margin-right: 0px;
}

.btn {
  margin-right: 15px;
}

.btn:last-child {
  margin-right: 0px;
}

/*
   COMPONENT STYLING THAT CAN'T BE DONE VIA CMS
*/

/* Mobile nav */
.cp-mobileNav-subItems {
  font-family: var(--font-headline), var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400 !important;
}

/* Booking widget Dates */
#calendarButton {
  font-family: var(--font-serif), Georgia, Cambria, "Times New Roman", Times, serif;
}

#calendarButton div:last-of-type {
  --tw-border-opacity: 1 !important;
  border-color: rgba(var(--color-primary), var(--tw-border-opacity)) !important;
}

[data-reach-popover] thead tr th {
  font-family: var(--font-headline), var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
}

[data-reach-popover] .cp-calendar-button--highlighted {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-tertiary), var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(var(--color-primary), var(--tw-text-opacity));
}

.clear-results,
.filter-results {
  display: flex;
  align-items: center;
}

#roomInfoButton,
#specialRatesButton {
  border-color: var(--color-primary) !important;
}

.generic-modal-booking-widget .btn-primary.btn-xl {
  display: inline-block;
  width: auto;
  margin: 0 auto;
}

/* Hero Image */
.cp-heroImage-videoCta {
  font-family: var(--font-headline), var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Contact Bar */
.cp-contactBar-address:before,
.cp-contactBar-address:after {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(var(--color-primary), var(--tw-bg-opacity)) !important;
}

.cp-contactBar-address h1,
.cp-contactBar-address h2 {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.cp-contactBar-checkin .text-text {
  --tw-text-opacity: 1;
  color: rgba(var(--color-primary), var(--tw-text-opacity));
}

.address-icon,
.address-icon svg {
  color: #000000;
  fill: #000000 !important;
}

.cp-contactBar-tripadvisor:before,
.addressBarBorder:before,
.addressBarBorder:after {
  background-color: rgb(var(--color-primary)) !important;
}

.cp-contactBar-tripadvisor .border-text-disabled {
  border-color: rgb(var(--color-primary));
}

/* Room Tiles */
.popunder-cta {
  width: auto;
  display: inline-block;
}

/* @screen md {
  .address-icon {
    @apply text-primary;
  }
} */

.cp-offers h1 {
  font-family: var(--font-headline), var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 3rem;
  line-height: 1;
}

.cp-offers h2 {
  font-family: var(--font-serif), Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.5rem;
  line-height: 2rem;
}

.cp-offers p,
.cp-offers div {
  font-family: var(--font-serif), Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

body[data-brand-code='wa']
  [data-reach-dialog-content]
  .btn.btn-primary-outline {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Meetings Group */

[data-osc='meetings-group'] h2 {
  font-family: var(--font-headline), var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

[data-osc='meetings-group'] div a.btn {
  width: auto;
  align-self: flex-start;
}

[data-osc='meetings-group'] div a.btn:after {
  position: absolute;
  bottom: -0.25rem;
  width: 100%;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* OSC Composable Search Form */
[data-osc-product='search-rooms-button'],
[data-osc-product='search-rates-button'] {
  border: 1px solid #000 !important;
  margin-right: 0.5rem;
}

[data-osc-product='search-rooms-button'],
[data-osc-product='search-rates-button'],
[data-osc-product='shop-form-button'] {
  align-self: center;
}

[data-osc-product='search-rooms-button'] {
  margin-left: 0px;
  margin-right: 0px;
  border-radius: 0px;
}

[data-osc-product='search-rates-button'] {
  margin-left: 0px;
  margin-right: 0px;
  border-radius: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

@media (min-width: 768px) {

  [data-osc-product='search-rates-button'] {
    margin-right: 0.5rem;
  }
}

[data-osc-product='search-rooms-button'] button,
[data-osc-product='search-rates-button'] button {
  margin-bottom: 0px !important;
  border-radius: 0px !important;
}

[data-osc-product='search-rooms-button'] button {
  padding: 0.5rem !important;
}

@media (min-width: 768px) {

  [data-osc-product='search-rooms-button'] button {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

[data-osc-product='search-rates-button'] button {
  padding: 0.5rem !important;
}

@media (min-width: 768px) {

  [data-osc-product='search-rates-button'] button {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

[data-osc-product='search-rates-button'] button > span {
  margin: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {

  [data-osc-product='search-rates-button'] button > span {
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media (min-width: 1024px) {

  [data-osc-product='search-rates-button'] button > span {
    top: 0.5rem;
  }
}
[data-osc-product='search-rates-button'] button span + div {
  margin-left: 0.5rem;
  padding: 0px;
}

[data-osc-product='shop-form-button'] {
  margin-left: 0.5rem;
  margin-bottom: -0.25rem;
  padding: 0.5rem;
}

[dir="rtl"] [data-osc-product='shop-form-button'] {
  margin-right: 0.5rem;
}

.dialog-content > div > h2 + .btn {
  position: absolute;
  right: 0;
  top: 0;
}

[dir="rtl"] .dialog-content > div > h2 + .btn {
  left: 0;
}

[data-osc-product='search-rates-button'] button > div > span {
  margin-right: -0.25rem;
}

@media (min-width: 768px) {

  [data-element-id='osc-composable-hero-div-wrapper'] {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {

  [data-element-id='osc-composable-hero-div-wrapper'] {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* honors sign in font size for WA */
[data-element-id='honors-header-login'] button {
  font-family: var(--font-headline), var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-transform: uppercase;
}

[data-element-id='honors-wrapper'],
[data-element-id='honors-wrapper'] button {
  text-transform: uppercase;
}

/* language selector */
#lang-selector,
#language-dropdown {
  text-transform: uppercase;
}