/* This file for custom booking style  */
/* On the https://republic.crazywebstudio.xyz/vip-table-booking/ page */
:root {
  --cws-color-text-primary: #fff;
  --cws-color-text-red: #ed1030;
  --cws-color-text-black: #000;
}

.vip-table-booking-page {
  background-image: url('/wp-content/uploads/2024/06/bg-bottom-800px-img.jpg');
  background-size: contain;
}

body:not(.et-tb) #main-content.vip-table-booking-page .container {
  padding-top: 100px;
}

.vip-table-booking-page .container {
  width: 90%;
}

.vip-table-booking-page #content-area {
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.booking-header-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.vip-table-booking-page h2 {
  font-size: 40px;
  text-transform: uppercase;
}

.floor-selection {
  display: flex;
  gap: 20px;
}

.floor-selection li {
  display: flex;
}

.floor-selection a {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  padding: 10px 20px;
  border: 1px solid var(--cws-color-text-red);
  transition: all .3s;
  color: var(--cws-color-text-primary);
  background-color: var(--cws-color-text-black);
  font-family: 'Republic Font', Helvetica, Arial, Lucida, sans-serif !important;
}

.floor-selection a:hover,
.floor-selection a.active {
  color: var(--cws-color-text-primary);
  background-color: var(--cws-color-text-red);
  /*border-color: var(--cws-color-text-red);*/
}

.vip-table-booking-page .nf-form-content input:not([type=button]),
.vip-table-booking-page .nf-form-content select.ninja-forms-field,
.vip-table-booking-page .nf-form-content textarea {
  background: transparent;
  border-radius: 5px;
  border: 1px solid #888;
  color: #fff;
}

.vip-table-booking-page select option {
  background-color: #000 !important;
}

.vip-table-booking-page .nf-form-content .listselect-wrap .nf-field-element div {
  background: transparent !important;
  border-radius: 5px;
}

.vip-table-booking-page .nf-form-content .list-select-wrap .nf-field-element>div:focus,
.vip-table-booking-page .nf-form-content input:not([type=button]):focus,
.vip-table-booking-page .nf-form-content textarea:focus {
  background: transparent;
}

.vip-table-booking-page .nf-form-fields-required {
  display: none;
}

.vip-table-booking-page .textarea-wrap textarea.ninja-forms-field {
  height: 80px;
}

.floor-map {
  padding-top: 10px;
  width: 100%;
  position: relative;
}

.floor-container img,
.floor-container svg {
  width: 100%;
  height: auto;
  transition: opacity 0.3s;
}

.floor-container svg {
  position: absolute;
  left: 0;
}

.floor-container img {
  position: relative;
}

.floor-container .svg-bg-floor {
  z-index: 1;
}

.floor-container .svg-hover-floor {
  z-index: 2;
  opacity: 1;
}

.svg-hover-floor .mapping-action.actived {
  opacity: 0.5 !important;
}

.svg-hover-floor .mapping-action:hover {
  opacity: 0.5 !important;
}

.svg-hover-floor .mapping-action:not(.actived) {
  opacity: 0;
}

.booking-table-container {
  display: flex;
}

.booking-column {
  flex: 1 1 50%;
}

.mapping-action:hover {
  cursor: pointer;
}

.display-none {
  display: none;
}

.booking-details-container {
  display: none;
  font-size: 16px;
}

.booking-title-container {
  display: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.5em;
}

.booking-title-container strong {
  font-size: 24px;
}

.booking-details-container strong {
  font-size: 18px;
  line-height: 1;
  padding-bottom: 15px;
  display: flex;
}

.booking-details-container ul {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  background: transparent;
  border-radius: 5px;
  border: 1px solid #888;
  color: #fff;
  padding: 10px 10px;
  line-height: 2;
}

.booking-details-container li {
  flex: 0 0 50%;
}

.booking-details-container li:last-child,
.booking-details-container li:nth-child(3),
.booking-details-container li:nth-child(4),
.booking-details-container li:nth-child(5) {
  flex: 1 1 100%;
}

.booking-details-container li span {
  color: var(--cws-color-text-red);
  font-weight: 500;
}

.checkbox-container .nf-field-label {
  max-width: 40px;
}

.checkbox-container .field-wrap .nf-field-description {
  margin-right: 0;
  line-height: 1.3;
}

.nf-form-content input[type=submit].bf-submit {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  background-color: var(--cws-color-text-red);
  padding: 10px 20px;
  transition: all .3s;
  width: 100%;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid var(--cws-color-text-red);
}

.nf-form-content input[type=submit].bf-submit:hover {
  color: var(--cws-color-text-red);
  background-color: var(--cws-color-text-black);
  border-color: var(--cws-color-text-red);
}

@media (max-width: 980px) {
  .vip-table-booking-page #content-area {
    flex-direction: column;
  }

  .booking-table-container .et_pb_row {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .booking-details-container li {
    flex: 1 1 100%;
  }
}

@media (max-width: 480px) {
  .floor-selection {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .floor-selection li {
    width: 100%;
  }

  .floor-selection a {
    font-size: 16px;
    width: 100%;
    text-align: center;
  }

  .vip-table-booking-page h2 {
    font-size: 32px;
  }

  .booking-table-container .booking-form-area .nf-field-container {
    margin-bottom: 10px;
    font-size: 14px;
  }
}


/* Flatpickr → dark look + #ed1030 accent */
.flatpickr-calendar {
  background: #000;
  color: #eee;
  border: 1px solid #222;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.flatpickr-months,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year {
  color: #eee;
}

.flatpickr-weekdays,
.flatpickr-weekday {
  background: #111;
  color: #aaa;
}

.flatpickr-days,
.dayContainer {
  background: #111;
}

.flatpickr-day {
  color: #e0e0e0;
  border-radius: 8px;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #ed1030;
  border-color: #ed1030;
}

.flatpickr-day.today {
  border-color: #ed1030;
  color: #fff;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #ed1030 !important;
  border-color: #ed1030 !important;
  color: #fff !important;
}

.flatpickr-day.inRange {
  background: rgba(237, 16, 48, .15);
  border-color: rgba(237, 16, 48, .15);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: #fff;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: #ed1030;
}

/* The little triangle pointer should match the dark bg */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #111 !important;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #111 !important;
}

/* Header strip */
.flatpickr-months,
.flatpickr-months .flatpickr-month {
  background: #111 !important;
  color: #eee !important;
  border-bottom: 1px solid #222 !important;
}

/* Month + year controls */
.flatpickr-current-month,
.flatpickr-current-month .cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent !important;
  color: #eee !important;
}

/* Month dropdown items (when opened) */
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: #111;
  color: #eee;
}

/* Year stepper arrows */
.flatpickr-current-month .numInputWrapper span.arrowUp:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-bottom-color: #eee;
  /* up */
  border-top-color: #eee;
  /* down */
}

/* Weekday row to blend with header */
.flatpickr-weekdays,
.flatpickr-weekday {
  background: #111 !important;
  color: #aaa !important;
  border-bottom: 1px solid #222 !important;
}

/* Accent (keep from your previous setup) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #ed1030 !important;
  border-color: #ed1030 !important;
  color: #fff !important;
}

.flatpickr-day.nextMonthDay {
  color: #aaa;
}

.flatpickr-day.nextMonthDay:hover {
  color: #fff;
  background-color: #ed1030;
  border-color: #ed1030;
}

.flatpickr-day.nextMonthDay.flatpickr-disabled {
  color: rgba(57, 57, 57, 0.1);
}

/* WooCommerce Integration - Hidden fields */
.republic-woocommerce-enabled .bf-name,
.republic-woocommerce-enabled .bf-last-name,
.republic-woocommerce-enabled .bf-phone,
.republic-woocommerce-enabled .bf-email {
  display: none !important;
}