@charset "utf-8";
/* CSS Document */

/* ===========================
   COLOR VARIABLES
   =========================== */
:root {
  --color-white: #FFFDF3;
  --color-black: #35250E;
  --color-gray-dark: #666;
  --color-gray-border: #CCC;
  --color-gold: #D7AF6A;
  --color-gold-dark: #96774B; /* Dark gold hover */
}

/* ===========================
   BAR BOOKING
   =========================== */
#bar_booking {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background: var(--color-white);
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

#bookingForm .el {
  display: block;
  width: 100%;
  padding: 0 5px;
}

/* PAYOFF TEXT */
#bar_booking .bolPayOff {
  width: 100%;
  height: 100%;
  color: var(--color-black);
  text-transform: uppercase;
  font-size: 1.7vw;
  text-align: center;
  font-family: 'Cormorant', serif;
  font-weight: 500;
}

/* ===========================
   INPUTS & SELECTS
   =========================== */
#bar_booking .inputBol,
#bar_booking .selectBol {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 10px;
  margin: 0;
  overflow: hidden;
  color: var(--color-gray-dark);
  border: 1px solid var(--color-gray-border);
  background-color: var(--color-white) !important;
  background-position: center right 10px;
  background-repeat: no-repeat;
  appearance: none;
  border-radius: 4px;
  transition: all 0.1s linear;
  font-size: 14px;
  font-family: 'Lora', serif;
  font-weight: 400;
  outline: none;
}

#bar_booking .inputBol {
  background-image: url('../img/inputCal.png');
}

#bar_booking .selectBol {
  background-image: url('../img/selectArrow.png');
}

/* ===========================
   BUTTON
   =========================== */
#bar_booking .btn {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 5px 2px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-white);
  background-color: var(--color-gold);
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  transition: all 0.2s ease-in-out;
  font-size: 20px;
  font-family: 'Cormorant', serif;
  font-weight: 500;
}

#bar_booking .btn:hover {
  background-color: var(--color-gold-dark);
}

/* ===========================
   MOBILE BUTTON
   =========================== */
#bar_booking .btn_mobile {
  background: var(--color-gold);
  color: var(--color-white);
  text-align: center;
  display: block;
  position: fixed;
  padding: 10px 0;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.05em;
  bottom: 0;
  width: 100%;
  z-index: 20;
  font-family: 'Cormorant', serif;
}

/* ===========================
   TABLE FIXES
   =========================== */
div#bar_booking table,
div#bar_booking td {
  margin: 0;
  padding: 0 10px !important;
  border: 0;
}

/* ===========================
   COLUMN SIZES
   =========================== */
#bar_booking .col1 {
  min-width: 40px;
  max-width: 160px;
}

#bar_booking .col3 {
  min-width: 40px;
  max-width: 170px;
}

/* ===========================
   UTILITY CLASSES
   =========================== */
.desktop_view_menu,
.desktop_view {
  display: block;
}

.mobile_view_menu,
.mobile_view {
  display: none;
}

.locked100 {
  position: relative;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

.h30 {
  height: 30px !important;
}

/* ===========================
   RESPONSIVE
   =========================== */

/* XS & MOBILE */
@media only screen and (max-width: 767px) {
  .desktop_view_menu {
    display: none;
  }

  .mobile_view_menu {
    display: block;
  }

  .desktop_view {
    display: none;
  }

  .mobile_view {
    display: block;
  }
}

/* SMALL UP TO 1300PX */
@media only screen and (max-width: 1300px) {
  #bookingForm .col1 {
    display: none;
  }

  #bar_booking .btn {
    font-size: 13px;
  }

  #back_top_mobile {
    padding: 25px 0 80px;
  }
}

/* ===========================
   DATEPICKER OVERRIDE
   =========================== */

/* Month & year */
.picker__month,
.picker__year {
  font-family: 'Cormorant', serif;
  font-weight: 500;
  color: var(--color-black);
}

.picker__year {
  color: var(--color-gray-dark);
}

/* Selects */
.picker__select--month,
.picker__select--year {
  border-color: var(--color-gray-border);
  font-family: 'Lora', serif;
  font-weight: 400;
}

.picker__select--month:focus,
.picker__select--year:focus {
  border-color: var(--color-gold);
}

/* Navigation arrows */
.picker__nav--prev:before,
.picker__nav--next:before {
  border-right-color: var(--color-black);
}

.picker__nav--next:before {
  border-left-color: var(--color-black);
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
  color: var(--color-black);
  background: rgba(212, 169, 67, 0.15); /* light gold */
}

/* Weekday labels */
.picker__weekday {
  color: var(--color-gray-dark);
  font-family: 'Lora', serif;
  font-weight: 400;
}

/* Days */
.picker__day {
  font-family: 'Lora', serif;
  font-weight: 400;
}

/* Today marker */
.picker__day--today:before {
  border-top-color: var(--color-gold-dark);
}

.picker__day--disabled:before {
  border-top-color: var(--color-gray-border);
}

/* Out of focus days */
.picker__day--outfocus {
  color: #dddddd;
}

/* Hover on days */
.picker__day--infocus:hover,
.picker__day--outfocus:hover {
  cursor: pointer;
  color: var(--color-black);
  background: rgba(212, 169, 67, 0.15); /* light gold */
}

/* Highlighted day */
.picker__day--highlighted {
  border-color: var(--color-gold);
}

.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
  cursor: pointer;
  color: var(--color-black);
  background: rgba(212, 169, 67, 0.15); /* light gold */
}

/* Selected day */
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  background: var(--color-gold);
  color: var(--color-white);
}

/* Disabled + highlighted */
.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
  background: #bbbbbb;
}

/* Footer */
.picker__footer {
  font-family: 'Cormorant', serif;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
  font-family: 'Cormorant', serif;
  font-weight: 500;
}

.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
  color: var(--color-black);
  background: rgba(212, 169, 67, 0.15); /* light gold */
  border-bottom-color: rgba(212, 169, 67, 0.15);
}

.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
  background: rgba(212, 169, 67, 0.15); /* light gold */
  border-color: var(--color-gold);
}

/* Footer icons */
.picker__button--today:before {
  border-top-color: var(--color-gold-dark);
}

.picker__button--clear:before {
  border-top-color: var(--color-gold-dark);
}

.picker__button--close:before {
  color: var(--color-gray-dark);
}

.picker__button--today[disabled]:before {
  border-top-color: var(--color-gray-border);
}