/*==========================================
  CONRAD THEME
==========================================*/
/**
 * This file is generated from the template file: tools/generators/spawn-site/files/src/styles/globals.css__tmpl__
 * Please consider if the template also needs updating when editting this file.
 */
:root {
  --color-primary-rgb: 16, 76, 151;
  --color-dark: #000000;
  --color-dark-rgb: 34, 30, 32;
  --color-snow: #f4f2f3;
  --color-snow-rgb: 244, 242, 243;
  --color-cerulean: #6c8aa3;
  --color-cerulean-rgb: 108, 138, 163;
  --color-polynya: #2a3a4e;
  --color-polynya-rgb: 42, 58, 78;
  --color-gold: #bc9b6a;
  --color-gold-rgb: 188, 155, 106;
  --color-indigo: #005596;

  --color-grey-5: #e0e0e0;

  --color-light: #f2f2f2;
  --color-danger: #eb5757;
  --color-warn: #f2c94c;
  --color-info: #56ccf2;
  --color-success: #27ae60;

  --color-brand-1: #f0e5d8;
  --color-brand-2: var(--color-polynya);
  --color-brand-3: var(--color-cerulean);
  --color-brand-4: var(--color-snow);
  --color-brand-5: var(--color-gold);
  --color-brand-6: #c8b395;
  --color-brand-dark: var(--color-dark);
  --color-brand-dark-2: #212121;
  --color-brand-indigo: var(--color-indigo);

  --color-primary: #104c97;
  --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: 0, 156, 222;
  --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: var(--color-gold-rgb);
  --color-primary-alt: var(--color-gold-rgb);
  --color-secondary: var(--color-gold-rgb);
  --color-secondary-alt: var(--color-gold);
  --color-tertiary: 132, 35, 94;
  --color-tertiary-alt: 96, 27, 69;
  --color-quarternary: 229, 114, 0;
  --color-quarternary-alt: 197, 98, 0;
  --color-text: 18, 18, 18;
  --color-text-alt: 102, 102, 102;
  --color-text-disabled: 189, 189, 189;
  --color-text-inverse: 255, 255, 255;
  --color-outline-shadow: rgba(0, 156, 222, 0.3);
  --color-overlay: rgba(29, 29, 29, 0.3);
  --font-sans: 'Avenir Next';
  --font-serif: 'Georgia';
  --font-mono: 'Menlo';
  --font-headline: 'Avenir Next';
}

@font-face {
  font-family: Avenir Next;
  font-weight: 200;
  font-display: swap;
  src:
    url('/modules/assets/fonts/avenir-next/regular.woff') format('woff'),
    url('/modules/assets/fonts/avenir-next/regular.woff2') format('woff2');
}
@font-face {
  font-family: Avenir Next;
  font-weight: 600;
  font-display: swap;
  src:
    url('/modules/assets/fonts/avenir-next/bold.woff') format('woff'),
    url('/modules/assets/fonts/avenir-next/bold.woff2') format('woff2');
}

/* Replications of Conrad color theme CSS */
.bg-brand-1 {
  background-color: rgb(240, 229, 216);
}

*:focus:not(.exclude-focus) {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgba(var(--color-black), var(--tw-ring-opacity)) !important;
  --tw-ring-offset-width: 1px !important;
  transition-duration: 100ms !important;
}

*[data-testid='feeTransparency'] {
  color: #000;
}

[data-osc-product='rooms'] + div + div a span {
  color: #000;
}

[data-osc-product='rooms'] + div + div a span,
[data-osc-product='rooms'] + div + div a:hover span,
[data-osc-product='rooms'] + div + div a:focus span {
  color: #000;
}

.stroke-primary {
  stroke: #000 !important;
}

.bg-secondary,
.bg-brand-6 {
  background-color: rgb(188, 155, 106);
}

.bg-brand-dark {
  background-color: #000;
}

html {
  font-family: 'Avenir Next', Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
  text-transform: uppercase;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  /* letter-spacing: 8px; */
  overflow-wrap: break-word;
  letter-spacing: 4px;
}

@media (min-width: 1024px) {
  h1,
h2,
h3,
.h1,
.h2,
.h3 {
    letter-spacing: 8px;
  }
}

.font-headline {
  text-transform: uppercase;
}

p {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.btn {
  border-radius: 0px;
  border-width: 1px;
  border-style: solid;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-primary {
  appearance: none;
  white-space: nowrap;
  border-color: var(--color-brand-dark);
  background-color: var(--color-brand-dark);
  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: 500;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  background-color: #000;
  text-transform: uppercase;
}

.osc-search-content-wrapper .btn {
  text-transform: none !important;
  letter-spacing: 0em;
}

/* specificity:  0, 2, 1 */
[data-element-id='copy-block'] a.btn-primary:focus {
  border-color: var(--color-brand-6);
  background-color: var(--color-brand-6);
  color: var(--color-brand-dark);
  transition-duration: 100ms;
  background-color: rgb(188, 155, 106);
}

.btn-primary:hover,


[data-element-id='copy-block'] a.btn-primary:focus,
.btn-html-menu-primary-selected {
  border-color: var(--color-brand-6);
  background-color: var(--color-brand-6);
  color: var(--color-brand-dark);
  transition-duration: 100ms;
  background-color: rgb(188, 155, 106);
}

.btn-primary-outline {
  border-color: var(--color-brand-dark);
  color: var(--color-brand-dark);
  transition-duration: 100ms;
}

/* 0, 2, 0 */
.btn-primary-outline[data-testid='detailsBtn'],
.btn-primary-outline:hover,
.btn-primary-outline:focus,
.btn-html-menu-primary-outline-selected {
  border-color: var(--color-brand-dark);
  background-color: var(--color-brand-dark);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-duration: 100ms;
  background-color: #000;
}

/* 1, 3, 1 */
.btn-primary-outline[data-test-id='details-btn'],
button.btn-primary-outline[data-testid='detailsBtn']:focus {
  border-color: var(--color-brand-dark);
  background-color: var(--color-brand-dark);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-duration: 100ms;
  background-color: #000;
}

.btn-primary:focus {
  border-color: var(--color-brand-6);
  background-color: var(--color-brand-6);
  color: var(--color-brand-dark);
  --tw-shadow: 0 0 3px 3px var(--color-outline-shadow);
  --tw-shadow-colored: 0 0 3px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: var(--color-outline-shadow);
  --tw-shadow: var(--tw-shadow-colored);
  transition-duration: 100ms;
  background-color: rgb(188, 155, 106);
}

.btn-primary-outline svg {
  fill: rgb(var(--color-brand-dark));
}
.btn-primary-outline:hover svg {
  fill: rgb(var(--color-white));
}

/* why? [data-testid='nav-utility'] svg {
  fill: var(--color-gold);
} */

/* override for copy block achor focus state */
/* specificity: 0, 2, 1 */
[data-element-id='copy-block'] a:focus {
  border-color: var(--color-brand-dark);
  background-color: var(--color-brand-dark);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  background-color: #000;
}

.primary-overlay {
  background: rgb(10, 57, 113, 0.94);
}

.btn-secondary {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  color: var(--color-brand-dark);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-html-menu-secondary-selected {
  border-color: var(--color-brand-6);
  background-color: var(--color-brand-6);
  color: var(--color-brand-dark);
  background-color: rgb(188, 155, 106);
}

.pb-9-16 {
  padding-bottom: 56.25%;
}

.container--1680 {
  margin: 0 auto;
  width: 100%;
  max-width: 1680px;
}

.container-my--1680 {
  margin: 20px auto;
  width: 100%;
  max-width: 1680px;
}

.font-28-px {
  font-size: 22px;
}

@media (min-width: 1024px) {
  .font-28-px {
    font-size: 28px;
  }
}

[data-element-id='wp-content'] p {
  margin-bottom: 0.5rem;
}

a:focus,
button:focus,
.btn:focus {
  outline: -webkit-focus-ring-color auto 1px;
  outline-offset: 1px;
}

div[data-testid='booking-widget'] button.focus\:shadow-outline:focus {
  box-shadow: 0px 0px 3px 3px #1e1e1e !important;
}

[data-element-id='booking-widget-day-button'] {
  color: #000000;
}

.vh--80 {
  height: 80vh;
}
.vh--70 {
  height: 70vh;
}
.vh--60 {
  height: 60vh;
}

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

.cp-header-shop-form .osc-search-content-wrapper > div button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1rem;
}

[data-element-id='room-types-wrapper'] h2 {
  letter-spacing: 4px;
}

[data-element-id='room-types-wrapper'] div.bg-primary div,
[data-element-id='room-types-wrapper'] div.bg-primary p,
[data-element-id='room-types-wrapper'] div.bg-primary span {
  color: rgb(var(--color-black));
}

[data-element-id='room-types-wrapper'] button.underline {
  text-decoration-color: rgb(var(--color-black));
}

[data-element-id='room-types-wrapper'] svg.w-5.h-5 path,
[data-element-id='room-types-wrapper'] svg.w-5.h-5 + span.ml-2 {
  color: rgb(var(--color-black));
}

/* white and black button hover styling */

.btn-white:hover,
.btn-html-menu-white-selected {
  background-color: transparent;
  border-color: rgb(var(--color-white));
  color: rgb(var(--color-white));
}

.btn-white-outline:hover,
.btn-html-menu-white-outline-selected {
  background-color: rgb(var(--color-white));
  border-color: rgb(var(--color-white));
  color: rgb(var(--color-primary-alt));
}

.btn-black:hover,
.btn-html-menu-black-selected {
  background-color: transparent;
  border-color: rgb(var(--color-black));
  color: rgb(var(--color-black));
}

.btn-black-outline:hover,
.btn-html-menu-black-outline-selected {
  background-color: rgb(var(--color-black));
  border-color: rgb(var(--color-black));
  color: rgb(var(--color-white));
}

/* Hero Image Component */
[data-element-id='hero-image-main-title'] {
  font-weight: 700;
  text-transform: uppercase !important;
  letter-spacing: 5px;
}

[data-element-id='hero-image-subtitle'] {
  text-transform: none !important;
}

/* Hero Image CTA Defaults */
.btn-hero-default {
  --tw-text-opacity: 1;
  color: rgba(var(--color-black), var(--tw-text-opacity));
  background-color: #b08d59;
}

.btn-hero-default:hover,
.btn-hero-default:focus {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(var(--color-black), var(--tw-text-opacity));
}

.cp-imageModal .cp-imageModal-mask {
  background: rgba(0, 0, 0, 1);
  opacity: 0.95;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #1b1b1b #666666;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: #666666;
}

*::-webkit-scrollbar-thumb {
  background-color: #1b1b1b;
  border-radius: 10px;
  border: 4px solid #666666;
}

.cp-calendar-button--selected,
.cp-calendar-button--highlighted {
  background: #000;
  color: #fff;
}

.cp-calendar-monthArrows {
  color: #000;
}

.cp-calendar-monthArrowsSVG {
  stroke: #000;
}

.fill-bg {
  fill: #000;
}

.fill-gold {
  fill: #c3a572;
}

.propertyAlert {
  color: var(--color-dark);
  background-color: var(--color-brand-1);
}

.propertyAlert button {
  color: var(--color-dark);
}

/*====================================================== 
    OSC COMPOSABLE SEARCH FORM
======================================================*/

[data-osc-product='search-dates'] table .bg-primary,
[data-osc-product='search-dates'] table ::selection {
  background: #212121;
}

div.dialog-content-v2 h2 {
  text-transform: none;
  letter-spacing: 0;
}

/* SIGN IN MODAL OSC */

.dialog-content-v2 button:has(.btn-primary-link) div span,
.dialog-content-v2 button:has(.btn-primary-link) div svg,
.dialog-content-v2 button.btn-primary-text span span svg,
.dialog-content-v2 a:not(:has(.btn)) span {
  color: rgb(var(--color-dark));
  fill: rgb(var(--color-dark));
}

.dialog-content-v2 button:has(.btn-primary-link):hover div span,
.dialog-content-v2 button:has(.btn-primary-link):hover div svg,
.dialog-content-v2 button.btn-primary-text:hover span span svg,
.dialog-content-v2 a:not(:has(.btn)):hover span {
  color: rgb(77, 77, 77);
  fill: rgb(77, 77, 77);
}

/* LANGUAGE SELECTOR OSC */

:root {
  --osc-lang-bg: #ffffff;
  --osc-lang-bg-hover: #b08d59;
  --osc-lang-color: #000000;
  --osc-lang-color-hover: #000000;
}

[data-element-id='language-wrapper'] .font-semibold {
  font-weight: 500 !important;
}

/* Find Your best Room nav buttons */
button[data-element-id*='fybr-nav-'] {
  color: #000000;
}

/*====================================================== 
    EVENTS CALENDAR
======================================================*/
table#desktopCalendar tbody td h3 span {
  letter-spacing: -0.025em;
}
table#desktopCalendar tbody td h3:not(.text-text-disabled) span {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text), var(--tw-text-opacity));
}
[data-osc-date-picker='true'] td buttontable#desktopCalendar tbody td h3:not(.text-text-disabled) span[tabindex='-1']:not(:disabled) {
  background-color: #f0e5d8;
  border-color: #f0e5d8;
  color: rgb(0, 0, 0);
}

select#selectMonthDropdown {
  border-radius: 0px;
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-primary), var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(var(--color-text), var(--tw-text-opacity));
}

[data-osc-date-picker='true'] td buttonselect#selectMonthDropdown[tabindex='-1']:not(:disabled) {
  background-color: #f0e5d8;
  border-color: #f0e5d8;
  color: rgb(0, 0, 0);
}

/*====================================================== 
    CONTACT BAR
======================================================*/

[data-element-id='cp-contactBar'] {
  color: rgb(var(--color-black));
  background: var(--color-brand-1);
}

[data-element-id='cp-contactBar-checkin'],
[data-element-id='cp-contactBar-checkin'] .text-text-alt,
[data-element-id='cp-contactBar'] a {
  color: rgb(var(--color-black));
}

[data-element-id='cp-contactBar-address'] span {
  font-size: 1rem;
  line-height: 24px;
}

[data-element-id='cp-contactBar-checkin'] p {
  font-size: 1rem;
}

[data-element-id='cp-contactBar-checkin'] strong {
  font-weight: normal;
}

[data-element-id='cp-contactBar'] h1,
[data-element-id='cp-contactBar'] h2 {
  letter-spacing: 1px;
}

/*====================================================== 
    SOCIAL MEDIA
======================================================*/

/* Social media account link */
[data-element-id='cp-social-media'] [data-element-id='social-link'] a,
[data-element-id='cp-social-media'] .text-primary,
[data-element-id='cp-social-media'] > a.textprimary,
[data-element-id='cp-social-media'] [data-element-id='social-link'] .text-primary,
[data-element-id='cp-social-media'] [data-element-id='social-link'] a span,
[data-element-id='cp-social-media'] [data-element-id='social-link'] svg {
  color: rgb(var(--color-black));
}

/*====================================================== 
    COPY BLOCK
======================================================*/

[data-element-id='copy-block-component-div'] {
  color: rgb(var(--color-black));
}

[data-element-id='copy-block-component-div'] [data-element-id='subtitle-wrapper'] {
  color: #b08d59;
}

/*====================================================== 
    RETAIL FLYOUT
======================================================*/

[data-element-id='retail-flyout'],
[data-element-id='retail-flyout'] .text-bg {
  color: rgb(var(--color-black));
}

[data-element-id='retail-flyout'] > div,
[data-element-id='retail-flyout'] > button {
  background: rgb(176, 141, 89);
}

[data-element-id='retail-close-icon'],
[data-element-id='retail-flyout'] button svg {
  fill: #000000;
}

/*====================================================== 
    GOOGLE MAP
======================================================*/
.location-google-map-content,
.location-google-map-content a.text-primary {
  color: rgb(var(--color-black));
}

/*====================================================== 
    ROOMS
======================================================*/
[data-element-id='fee-transparency'].text-primary,
[data-element-id='fee-transparency-popunder'].text-primary {
  color: rgb(var(--color-black));
}

[data-element-id='room-card-title'] {
  letter-spacing: 1.5px;
  line-height: 26px;
  word-break: break-word;
}

/* STICKY SHOP FORM STYLES */

/* sticky shop form background override */
.cp-header-shop-form {
  background-color: transparent;
  border-top-color: #e3e3e3;
}

[data-osc-date-picker='true'] div div,
[data-osc-product='search-dates'],
[data-osc-shop-form-rooms='true'] div div,
[data-osc-shop-form-rooms='true'] + div,
[data-osc-shop-form-rooms='true'] + div + div,
[data-osc-shop-form-special-rates='true'] div div {
  border-color: rgb(189, 189, 189);
}

button#shop-form-dates[data-osc-product='shop-form-dates'] span {
  border-color: rgb(0, 0, 0);
}

[data-osc-date-picker='true'] td button.font-bold[tabindex='0']:not(:disabled):not(:focus) {
  background-color: rgb(176, 141, 89);
  border-color: rgb(176, 141, 89);
  color: rgb(0, 0, 0);
}

[data-osc-date-picker='true'] td button.font-bold[tabindex='0']:not(:disabled):not(.bg-bg-alt) {
  background-color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  color: #ffffff;
}

[data-osc-date-picker='true'] td button.text-text[tabindex='-1']:not(:disabled) {
  background-color: #f0e5d8;
  border-color: #f0e5d8;
  color: rgb(0, 0, 0);
}

[data-osc-date-picker='true'] td button[tabindex='0']:not(:disabled) {
  background-color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  color: #ffffff;
}

.cp-header-shop-form [data-osc-product='shop-form-dates'] span span {
  color: #000000;
}

[data-osc-date-picker='true'] input.form-checkbox {
  border-color: rgb(0, 0, 0);
}

[data-osc-date-picker='true'] input.form-checkbox:checked {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='rgba(0,0,0)' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
}

button[data-testid='shop-modal-done-cta']:hover,
button[data-testid='shop-modal-done-cta']:focus {
  color: #000000;
  background-color: transparent;
  border-color: #000000;
}

button[data-testid='shop-modal-done-cta'] + button:hover,
button[data-testid='shop-modal-done-cta'] + button:focus {
  background-color: rgb(176, 141, 89);
  border-color: rgb(176, 141, 89);
  color: #000000;
}

[data-osc-product='rooms'] h2 + button svg,
[data-osc-product='rooms'] h2 + button svg:hover,
[data-osc-product='rooms'] + div button,
[data-osc-product='rooms'] + div button:hover {
  stroke: #000000;
}

[data-osc-shop-form-rooms='true'] a span {
  color: rgb(0, 0, 0);
}

[data-osc-shop-form-rooms='true'] a span:hover,
[data-osc-shop-form-rooms='true'] a span:focus {
  color: rgb(102, 102, 102);
}

[data-osc-product='search-rates-second'] input.form-input,
[data-osc-product='search-rates-first'] input.form-checkbox {
  border-color: rgb(0, 0, 0);
}

[data-osc-product='search-rates-first'] input.form-checkbox:checked {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='rgba(0,0,0)' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
}

.cp-header-shop-form [data-osc-product='shop-form-button'] {
  color: #ffffff;
  border-color: #000000;
  background-color: #000000;
}

[data-osc-product='rooms'] h2 + button,
[data-osc-product='rooms'] h2 + button {
  border-color: #000000;
}

[data-osc-product='rooms'] h2 + button svg,
[data-osc-product='rooms'] h2 + button svg:hover {
  stroke: #000000;
}

.cp-header-shop-form [data-osc-product='shop-form-button']:hover,
.cp-header-shop-form [data-osc-product='shop-form-button']:focus {
  background-color: rgb(176, 141, 89);
  border-color: rgb(176, 141, 89);
  color: #000000;
}

[data-testid='rooms'] button svg {
  stroke: #000000;
}

[data-testid='rooms'] button:disabled svg {
  opacity: 0.5;
}

/* END STICKY SHOP FORM STYLES */