.elementor-170 .elementor-element.elementor-element-47c8ed96{--display:flex;--min-height:90vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:70px;--padding-left:100px;--padding-right:100px;}.elementor-170 .elementor-element.elementor-element-47c8ed96:not(.elementor-motion-effects-element-type-background), .elementor-170 .elementor-element.elementor-element-47c8ed96 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://calmwaterretreat.ca/wp-content/uploads/2026/02/IMG_5720-2048x1365.webp");background-position:bottom center;background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-170 .elementor-element.elementor-element-792d2153{padding:0px 0px 10px 0px;}.elementor-170 .elementor-element.elementor-element-792d2153 .elementor-heading-title{font-family:"utile-display", Sans-serif;font-size:96px;font-weight:300;line-height:80px;color:var( --e-global-color-secondary );}.elementor-170 .elementor-element.elementor-element-4b3c10a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:080px;--padding-bottom:080px;--padding-left:0px;--padding-right:0px;}.elementor-170 .elementor-element.elementor-element-4b3c10a:not(.elementor-motion-effects-element-type-background), .elementor-170 .elementor-element.elementor-element-4b3c10a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-170 .elementor-element.elementor-element-c4cbd76{--display:flex;}.elementor-170 .elementor-element.elementor-element-f340db4{padding:0px 0px 40px 0px;text-align:center;}.elementor-170 .elementor-element.elementor-element-99bc3ff.elementor-element{--align-self:center;}@media(min-width:768px){.elementor-170 .elementor-element.elementor-element-47c8ed96{--content-width:1400px;}}@media(max-width:1024px){.elementor-170 .elementor-element.elementor-element-47c8ed96{--min-height:100vh;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}}@media(max-width:767px){.elementor-170 .elementor-element.elementor-element-47c8ed96{--min-height:800px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--padding-top:20px;--padding-bottom:50px;--padding-left:30px;--padding-right:30px;}.elementor-170 .elementor-element.elementor-element-47c8ed96:not(.elementor-motion-effects-element-type-background), .elementor-170 .elementor-element.elementor-element-47c8ed96 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:-642px 0px;}.elementor-170 .elementor-element.elementor-element-792d2153{text-align:start;}.elementor-170 .elementor-element.elementor-element-792d2153 .elementor-heading-title{font-size:54px;line-height:0.9em;}.elementor-170 .elementor-element.elementor-element-c4cbd76{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-170 .elementor-element.elementor-element-f340db4{padding:40px 40px 40px 40px;}.elementor-170 .elementor-element.elementor-element-99bc3ff{padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-99bc3ff *//* =====================================================
   CALMWATER x HOSTAWAY — COMPLETE UNIFIED CSS
   Covers:
   - Booking Search Widget
   - Calendar Widget
   - Arrow Fix (styled-components structure)
   ===================================================== */

/* -----------------------
   Design Tokens
------------------------ */
:root{
  --cw-ink: #1f2a24;
  --cw-surface: #fbfaf6;
  --cw-border: #d7d0c2;

  --cw-green: #2f5d4a;
  --cw-green-hover: #3d725b;

  --cw-sand: #e8dfcf;
  --cw-gold: #e3d3b3;

  --cw-focus: rgba(47,93,74,.25);

  --cw-radius-lg: 16px;
  --cw-radius-md: 12px;
  --cw-radius-sm: 10px;

  --cw-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* =====================================================
   WIDGET CONTAINERS
===================================================== */
#hostaway-booking-widget,
#hostaway-calendar-widget{
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-shadow);
  padding: clamp(16px, 2vw, 28px);
  color: var(--cw-ink);
  font-family: inherit !important;
}

/* In case embed injects iframe */
#hostaway-booking-widget iframe,
#hostaway-calendar-widget iframe{
  width: 100% !important;
  border-radius: var(--cw-radius-md) !important;
}

/* =====================================================
   TYPOGRAPHY
===================================================== */
#hostaway-booking-widget *,
#hostaway-calendar-widget *{
  font-family: inherit !important;
  letter-spacing: .01em;
}

/* Month titles */
#hostaway-calendar-widget [class*="month"],
#hostaway-calendar-widget h2{
  color: var(--cw-green) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}

/* =====================================================
   INPUTS
===================================================== */
#hostaway-booking-widget input,
#hostaway-booking-widget select,
#hostaway-calendar-widget input,
#hostaway-calendar-widget select{
  background: #fff !important;
  color: var(--cw-ink) !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: var(--cw-radius-md) !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
}

#hostaway-booking-widget input:focus,
#hostaway-calendar-widget input:focus{
  outline: none !important;
  border-color: var(--cw-green) !important;
  box-shadow: 0 0 0 4px var(--cw-focus) !important;
}

/* =====================================================
   BUTTONS (GENERAL)
===================================================== */
#hostaway-booking-widget button,
#hostaway-calendar-widget button{
  background: var(--cw-green) !important;
  color: #fff !important;
  border: 1px solid var(--cw-green) !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  transition: background .15s ease;
  cursor: pointer;
}

#hostaway-booking-widget button:hover,
#hostaway-calendar-widget button:hover{
  background: var(--cw-green-hover) !important;
}

/* =====================================================
   SEARCH BUTTON (top widget)
===================================================== */
#hostaway-booking-widget [class^="styled__Search"],
#hostaway-booking-widget [class*=" styled__Search"]{
  background: var(--cw-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#hostaway-booking-widget [class^="styled__Search"]:hover{
  background: var(--cw-green-hover) !important;
}

/* =====================================================
   CALENDAR DATE STATES
===================================================== */

/* Selected check-in / check-out */
#hostaway-calendar-widget .selected,
#hostaway-calendar-widget .active,
#hostaway-calendar-widget [aria-selected="true"]{
  background: var(--cw-green) !important;
  color: #fff !important;
  border-radius: var(--cw-radius-md) !important;
}

/* Range between */
#hostaway-calendar-widget .in-range,
#hostaway-calendar-widget .range,
#hostaway-calendar-widget [class*="range"]{
  background: var(--cw-sand) !important;
  color: var(--cw-ink) !important;
  border-radius: var(--cw-radius-sm);
}

/* Hover */
#hostaway-calendar-widget [class*="day"]:hover{
  background: var(--cw-gold) !important;
  border-radius: var(--cw-radius-sm);
}

/* =====================================================
   ARROW FIX (REAL SELECTORS FROM YOUR DOM)
===================================================== */

/* Target styled-components Prev/Next wrappers */
#hostaway-calendar-widget div[class^="styled__Prev"] > button,
#hostaway-calendar-widget div[class^="styled__Next"] > button{
  position: relative !important;
  min-width: 54px;
  min-height: 44px;
  border-radius: 999px !important;
  background: var(--cw-green) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: transparent !important;
  overflow: hidden !important;
}

/* Hide internal icon */
#hostaway-calendar-widget div[class^="styled__Prev"] > button svg,
#hostaway-calendar-widget div[class^="styled__Next"] > button svg{
  opacity: 0 !important;
}

/* Inject arrows */
#hostaway-calendar-widget div[class^="styled__Prev"] > button::before{
  content: "‹";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff !important;
  font-size: 30px;
  font-weight: 800;
}

#hostaway-calendar-widget div[class^="styled__Next"] > button::before{
  content: "›";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff !important;
  font-size: 30px;
  font-weight: 800;
}

#hostaway-calendar-widget div[class^="styled__Prev"] > button:hover,
#hostaway-calendar-widget div[class^="styled__Next"] > button:hover{
  background: var(--cw-green-hover) !important;
}

/* =====================================================
   FINAL ARROW POLISH — Search bar + Calendar
   ===================================================== */

/* -------------------------
   1) SEARCH BAR ARROWS
   Make arrows white on green (recommended)
-------------------------- */
#hostaway-booking-widget div[class^="styled__Prev"] > button,
#hostaway-booking-widget div[class^="styled__Next"] > button{
  background: var(--cw-green) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 999px !important;
  min-width: 54px;
  min-height: 44px;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  color: transparent !important; /* hide any default text/icon */
}

/* Hide any built-in icon */
#hostaway-booking-widget div[class^="styled__Prev"] > button svg,
#hostaway-booking-widget div[class^="styled__Next"] > button svg,
#hostaway-booking-widget div[class^="styled__Prev"] > button img,
#hostaway-booking-widget div[class^="styled__Next"] > button img{
  opacity: 0 !important;
}

/* Inject centered arrows (WHITE) */
#hostaway-booking-widget div[class^="styled__Prev"] > button::before{
  content: "‹";
  color: #fff !important;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

#hostaway-booking-widget div[class^="styled__Next"] > button::before{
  content: "›";
  color: #fff !important;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

/* Hover */
#hostaway-booking-widget div[class^="styled__Prev"] > button:hover,
#hostaway-booking-widget div[class^="styled__Next"] > button:hover{
  background: var(--cw-green-hover) !important;
}


/* -------------------------
   2) CALENDAR ARROWS
   Perfect centering + consistent sizing
-------------------------- */
#hostaway-calendar-widget div[class^="styled__Prev"] > button,
#hostaway-calendar-widget div[class^="styled__Next"] > button{
  min-width: 54px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  color: transparent !important;
}

/* Hide any built-in icon */
#hostaway-calendar-widget div[class^="styled__Prev"] > button svg,
#hostaway-calendar-widget div[class^="styled__Next"] > button svg,
#hostaway-calendar-widget div[class^="styled__Prev"] > button img,
#hostaway-calendar-widget div[class^="styled__Next"] > button img{
  opacity: 0 !important;
}

/* Inject centered arrows */
#hostaway-calendar-widget div[class^="styled__Prev"] > button::before{
  content: "‹";
  color: #fff !important;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

#hostaway-calendar-widget div[class^="styled__Next"] > button::before{
  content: "›";
  color: #fff !important;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

/* =====================================================
   HARD RESET + PERFECT CENTERING FOR HOSTAWAY ARROWS
   (Booking bar + Calendar)
   ===================================================== */

/* Target the actual Prev/Next buttons inside both widgets */
#hostaway-booking-widget div[class^="styled__Prev"] > button,
#hostaway-booking-widget div[class^="styled__Next"] > button,
#hostaway-calendar-widget div[class^="styled__Prev"] > button,
#hostaway-calendar-widget div[class^="styled__Next"] > button{
  /* hard reset layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* kill offsets */
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 0 !important;
  font-size: 0 !important;

  /* consistent shape */
  min-width: 54px !important;
  min-height: 44px !important;
  border-radius: 999px !important;

  /* your theme */
  background: var(--cw-green) !important;
  border: 1px solid rgba(255,255,255,.35) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* Hide *anything* Hostaway puts inside the arrow button (svg, spans, icons, etc.) */
#hostaway-booking-widget div[class^="styled__Prev"] > button > *,
#hostaway-booking-widget div[class^="styled__Next"] > button > *,
#hostaway-calendar-widget div[class^="styled__Prev"] > button > *,
#hostaway-calendar-widget div[class^="styled__Next"] > button > *{
  display: none !important;
}

/* Inject perfectly centered arrows */
#hostaway-booking-widget div[class^="styled__Prev"] > button::before,
#hostaway-calendar-widget div[class^="styled__Prev"] > button::before{
  content: "‹";
  display: block;
  color: #fff !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#hostaway-booking-widget div[class^="styled__Next"] > button::before,
#hostaway-calendar-widget div[class^="styled__Next"] > button::before{
  content: "›";
  display: block;
  color: #fff !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Hover */
#hostaway-booking-widget div[class^="styled__Prev"] > button:hover,
#hostaway-booking-widget div[class^="styled__Next"] > button:hover,
#hostaway-calendar-widget div[class^="styled__Prev"] > button:hover,
#hostaway-calendar-widget div[class^="styled__Next"] > button:hover{
  background: var(--cw-green-hover) !important;
}/* End custom CSS */