/**
 * VRI VikBooking Theme Override
 * Comprehensive CSS reskin of ALL VikBooking frontend shortcode views
 * to match the Nº9 (VRI) design language.
 *
 * Source of truth: Lodgify plugin styling
 *
 * Design tokens:
 *   Primary:       #006B9D (Number Nine blue)
 *   Secondary:     #3E8FBB (light blue)
 *   Accent:        #E6DCC8 (warm beige)
 *   Cream:         #F4F3E8
 *   Text:          #006B9D
 *   Text Secondary:#666666
 *   Text Light:    #999999
 *   Border:        #e0e0e0 / #C0B38B (tan-gold) / #e5e5e5
 *   Success:       #4CAF50
 *   Error:         #dc3545
 *   Warning:       #f5a623
 */


/* ==========================================================================
   0. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* VikBooking built-in variable overrides */
  --vbo-base-color: #006B9D;
  --vbo-base-color-hover: #3E8FBB;
  --vbo-darkblue-color: #006B9D;
  --vbo-blue-color: #006B9D;
  --vbo-blue-color-hover: #3a4b3a;
  --vbo-green-color: #3E8FBB;
  --vbo-orange-color: #E6DCC8;
  --vbo-red-color: #dc3545;

  --vbo-white-bg-color: #FFFFFF;
  --vbo-grey-bg-color: #f0f0f0;
  --vbo-light-grey-bg-color: #f9f9f9;
  --vbo-light-dark-grey-bg-color: #006B9D;

  --vbo-border-color: #e0e0e0;
  --vbo-light-border-color: #e5e5e5;

  --vbo-text-color: #006B9D;
  --vbo-middle-text-color: #666666;
  --vbo-light-text-color: #999999;
  --vbo-contrast-text-color: #F4F3E8;

  /* VRI design language tokens */
  --vri-primary: #006B9D;
  --vri-secondary: #3E8FBB;
  --vri-accent: #E6DCC8;
  --vri-cream: #F4F3E8;

  --vri-text: #006B9D;
  --vri-text-secondary: #666666;
  --vri-text-light: #999999;

  --vri-bg: #FFFFFF;
  --vri-bg-secondary: #f9f9f9;

  --vri-border: #e0e0e0;
  --vri-border-tan: #C0B38B;
  --vri-border-light: #e5e5e5;
  --vri-border-dark: #006B9D;

  --vri-success: #4CAF50;
  --vri-error: #dc3545;
  --vri-warning: #f5a623;

  --vri-primary-hover: #2f4230;
  --vri-bg-search: #EDF4F9;
  --vri-text-muted: #888888;

  --vri-radius-card: 12px;
  --vri-radius-input: 8px;
  --vri-radius-button: 8px;
  --vri-radius-small: 6px;
  --vri-radius-circle: 50%;
  --vri-radius-search: 48px;
  --vri-radius-search-inner: 44px;
  --vri-radius-gallery: 20px;
  --vri-radius-pill: 20px;

  --vri-btn-primary-bg: #006B9D;
  --vri-btn-primary-text: #F4F3E8;
  --vri-btn-primary-hover: #2f4230;

  --vri-shadow-light: 0 2px 6px rgba(0,0,0,.08);
  --vri-shadow: 0 4px 12px rgba(0,0,0,.08);
  --vri-shadow-hover: 0 8px 25px rgba(0,0,0,.15);
  --vri-shadow-heavy: 0 20px 60px rgba(0,0,0,0.3);
  --vri-shadow-focus: 0 0 0 3px rgba(174,192,171,0.1);

  --vri-font-body: 14px;
  --vri-line-height-body: 1.5;
  --vri-line-height-heading: 1.2;
}


/* ==========================================================================
   1. GLOBAL TYPOGRAPHY & BASE
   ========================================================================== */

.com_vikbooking {
  font-family: inherit;
  color: var(--vri-text);
  font-size: var(--vri-font-body);
  line-height: var(--vri-line-height-body);
}

.com_vikbooking h1 {
  color: var(--vri-text);
  font-weight: 800;
  font-size: 32px;
  line-height: var(--vri-line-height-heading);
}

.com_vikbooking h2 {
  color: var(--vri-text);
  font-weight: 700;
  font-size: 24px;
  line-height: var(--vri-line-height-heading);
}

.com_vikbooking h3 {
  color: var(--vri-text);
  font-weight: 700;
  font-size: 20px;
  line-height: var(--vri-line-height-heading);
}

.com_vikbooking h4 {
  color: var(--vri-text);
  font-weight: 700;
  font-size: 18px;
  line-height: var(--vri-line-height-heading);
}

/* Links */
.com_vikbooking a {
  color: var(--vri-primary);
  transition: color 0.2s ease;
}

.com_vikbooking a:hover {
  color: var(--vri-secondary);
}

/* Horizontal separator */
.com_vikbooking hr {
  border: none;
  border-top: 1px solid var(--vri-border);
  margin: 20px 0;
}

/* Intro/closing text blocks */
.vbo-intro-main,
.vbo-closing-main {
  color: var(--vri-text-secondary);
  font-size: var(--vri-font-body);
  line-height: var(--vri-line-height-body);
  margin-bottom: 24px;
}


/* ==========================================================================
   2. BUTTONS
   ========================================================================== */

/* --- Primary action button --- */
.vbo-pref-color-btn,
.com_vikbooking .btn.vbo-pref-color-btn,
.com_vikbooking .booknow,
.com_vikbooking .vbsubmit,
.com_vikbooking input[type="submit"].vbo-pref-color-btn,
.vbo-search-submit input[type="submit"],
.vbselectr,
.vbo-av-btn {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
  border: none !important;
  border-radius: var(--vri-radius-button) !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: var(--vri-font-body) !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  text-decoration: none !important;
  display: inline-block;
  line-height: 1.4;
}

.vbo-pref-color-btn:hover,
.com_vikbooking .btn.vbo-pref-color-btn:hover,
.com_vikbooking .booknow:hover,
.com_vikbooking .vbsubmit:hover,
.com_vikbooking input[type="submit"].vbo-pref-color-btn:hover,
.vbo-search-submit input[type="submit"]:hover,
.vbselectr:hover,
.vbo-av-btn:hover {
  background: var(--vri-secondary) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: var(--vri-shadow);
}

/* Large button variant */
.com_vikbooking .btn-large,
.com_vikbooking .vbsubmit.btn-large {
  padding: 15px 30px !important;
  font-size: 16px !important;
}

/* --- Secondary / ghost button --- */
.vbo-pref-color-btn-secondary,
.com_vikbooking .vbo-goback-link {
  background: transparent !important;
  color: var(--vri-primary) !important;
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-button) !important;
  padding: 10px 20px !important;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
  display: inline-block;
  text-decoration: none !important;
}

.vbo-pref-color-btn-secondary:hover,
.com_vikbooking .vbo-goback-link:hover {
  background: var(--vri-bg-secondary) !important;
  border-color: var(--vri-secondary) !important;
}

/* --- Tertiary / outlined button --- */
.com_vikbooking .btn-outlined {
  background: var(--vri-bg) !important;
  border: 2px solid var(--vri-secondary) !important;
  color: var(--vri-text) !important;
  border-radius: var(--vri-radius-button) !important;
  padding: 10px 20px !important;
  font-weight: 600;
  transition: background 0.2s ease;
}

.com_vikbooking .btn-outlined:hover {
  background: #f5faf5 !important;
}


/* ==========================================================================
   3. FORM INPUTS
   ========================================================================== */

.com_vikbooking input[type="text"],
.com_vikbooking input[type="email"],
.com_vikbooking input[type="tel"],
.com_vikbooking input[type="number"],
.com_vikbooking input[type="date"],
.com_vikbooking input[type="password"],
.com_vikbooking textarea,
.com_vikbooking select,
.com_vikbooking .vbinput,
.com_vikbooking .vbtextarea,
.com_vikbooking .vbselectm {
  background: var(--vri-bg) !important;
  border: 2px solid var(--vri-border-tan) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 12px !important;
  font-size: var(--vri-font-body);
  color: var(--vri-text);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.com_vikbooking input[type="text"]::placeholder,
.com_vikbooking input[type="email"]::placeholder,
.com_vikbooking textarea::placeholder {
  color: var(--vri-text-light);
}

.com_vikbooking input:hover,
.com_vikbooking select:hover,
.com_vikbooking textarea:hover {
  border-color: #004E73 !important;
}

.com_vikbooking input:focus,
.com_vikbooking select:focus,
.com_vikbooking textarea:focus {
  border-color: var(--vri-secondary) !important;
  background: var(--vri-cream) !important;
  outline: none !important;
  box-shadow: var(--vri-shadow-focus) !important;
}

/* Select with larger radius */
.com_vikbooking select.vbselectm {
  border-radius: var(--vri-radius-card) !important;
}

/* Labels */
.com_vikbooking label,
.vbo-oconfirm-cfield-label {
  font-weight: 600;
  color: var(--vri-text);
  font-size: var(--vri-font-body);
  margin-bottom: 6px;
  display: block;
}


/* ==========================================================================
   4. STEP BAR (Booking Progress)
   ========================================================================== */

.vbo-stepbar {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  gap: 4px;
}

.vbo-stepbar li {
  flex: 1;
  text-align: center;
  padding: 14px 10px;
  font-weight: 600;
  font-size: var(--vri-font-body);
  border-bottom: 4px solid var(--vri-border);
  color: var(--vri-text-secondary);
  transition: all 0.2s ease;
}

.vbo-stepbar li.vbo-step-complete {
  border-bottom-color: var(--vri-secondary);
  color: var(--vri-text);
}

.vbo-stepbar li.vbo-step-current {
  border-bottom-color: var(--vri-primary);
  color: var(--vri-primary);
  font-weight: 800;
}


/* ==========================================================================
   5. MAIN SEARCH FORM (vikbooking view)
   Transforms VikBooking's default search form into VRI's pill-shaped
   glassmorphism search bar matching the Lodgify plugin design.
   ========================================================================== */

/* --- Outer container: glassmorphism pill --- */
.vbo-search-mainview,
.vbdivsearch {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border-radius: 48px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  padding: 7px !important;
  overflow: visible !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Inner bar: light blue pill --- */
.vb-search-inner {
  display: flex !important;
  align-items: center !important;
  background: #EDF4F9 !important;
  border-radius: 44px !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  min-height: 64px !important;
}

/* --- All input blocks: inline fields --- */
.vb-search-inner .vbo-search-inpblock,
.vbo-search-inpblock {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 24px !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: relative !important;
  height: 64px !important;
  box-sizing: border-box !important;
}

.vbo-search-inpblock-checkin {
  flex: 1.3 !important;
}

.vbo-search-inpblock-checkout {
  flex: 1.3 !important;
}

/* --- Hide all labels inside the search bar --- */
.vb-search-inner label,
.vbo-search-inpblock > label,
.vbo-search-inpblock-checkin > label,
.vbo-search-inpblock-checkout > label,
.vbo-search-num-rooms > label,
.vbo-search-num-rooms label,
.vbo-search-num-adults-entry-label,
.vbo-search-num-children-entry-label,
.vbo-search-categories > label,
.vbo-search-categories label,
.vb-search-inner .vbo-search-num-adults-entry label,
.vb-search-inner .vbo-search-num-children-entry label {
  display: none !important;
}

/* --- Input group: borderless inline --- */
.vbo-search-inpblock .input-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Date & text inputs inside search bar: transparent, no border --- */
.vb-search-inner input[type="text"],
.vbo-search-inpblock .input-group input[type="text"],
.vbo-search-mainview input#checkindate,
.vbo-search-mainview input#checkoutdate,
.vbdivsearch input#checkindate,
.vbdivsearch input#checkoutdate {
  border: none !important;
  background: transparent !important;
  font-size: 16px !important;
  color: #222 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  line-height: 1.2 !important;
}

.vb-search-inner input[type="text"]:focus,
.vbo-search-mainview input#checkindate:focus,
.vbo-search-mainview input#checkoutdate:focus,
.vbdivsearch input#checkindate:focus,
.vbdivsearch input#checkoutdate:focus {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Calendar trigger icon: left-aligned, properly sized --- */
.vbo-search-inpblock .input-group i,
.vbo-search-inpblock .input-group .vbo-caltrigger,
.vbo-search-inpblock .input-group .vb-cal-img,
.vb-search-inner i.vbo-caltrigger,
.vb-search-inner .vb-cal-img {
  color: #555 !important;
  font-size: 20px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  order: -1 !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* --- All selects inside the search bar: minimal style --- */
.vb-search-inner select,
.vbo-search-num-rooms select,
.vbo-search-num-rooms #vbo-roomsnum,
.vbo-search-num-adults-entry-inp select,
.vbo-search-num-children-entry-inp select,
.vbo-search-categories select,
#vbo-roomsnum {
  border: none !important;
  background: transparent !important;
  font-size: 16px !important;
  color: #222 !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  width: auto !important;
  min-width: 20px !important;
  height: auto !important;
  min-height: 0 !important;
  font-family: inherit !important;
  border-radius: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* --- Injected SVG icons for rooms/adults/children --- */
.vri-sb-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #555 !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 4px !important;
  vertical-align: middle !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* --- Guests / rooms block: inline in the bar --- */
.vbo-search-num-racblock {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  height: 64px !important;
}

.vbo-search-num-rooms {
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  margin: 0 !important;
  height: 64px !important;
}

.vbo-search-num-aduchild-block {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  min-width: auto !important;
  margin: 0 !important;
  height: 64px !important;
}

.vbo-search-num-aduchild-entry {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 64px !important;
}

/* Hide "Room 1" text */
.vbo-search-roomnum {
  display: none !important;
}

.vbo-search-num-adults-entry,
.vbo-search-num-children-entry {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 14px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  height: 64px !important;
}

/* --- Category dropdown --- */
.vbo-search-categories {
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  margin: 0 !important;
  height: 64px !important;
}

/* --- Nights display: hidden --- */
#vbjstotnights {
  display: none !important;
}

/* --- Search button: primary blue pill --- */
.vbo-search-submit {
  margin: 0 !important;
  padding: 6px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.vb-search-inner .vbo-search-submit .vbo-pref-color-btn,
.vb-search-inner .vbo-search-submit button[type="submit"],
.vbo-search-submit .vbo-pref-color-btn,
.vbo-search-submit button[type="submit"] {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
  border: none !important;
  border-radius: 44px !important;
  padding: 17px 40px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  transform: none !important;
}

.vbo-search-submit .vbo-pref-color-btn:hover,
.vbo-search-submit button[type="submit"]:hover {
  background: #3a4b3a !important;
  transform: scale(1.02) !important;
  box-shadow: none !important;
}

/* --- Hidden inputs --- */
.vb-search-inner input[type="hidden"] {
  display: none !important;
}

/* --- Override any WordPress theme input styling bleeding into the bar --- */
.vb-search-inner .input-group::before,
.vb-search-inner .input-group::after {
  display: none !important;
}


/* ==========================================================================
   6. ROOM LIST (roomslist view)
   ========================================================================== */

.vblistcontainer {
  margin-bottom: 30px;
}

.vblist {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.room_result {
  margin-bottom: 0 !important;
}

.room_result-inner,
.vblistroomblock {
  background: var(--vri-bg) !important;
  border: 1px solid var(--vri-border-light) !important;
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow) !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.room_result:hover .room_result-inner,
.vblistroomblock:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--vri-shadow-hover) !important;
}

/* Room image */
.vbimglistdiv {
  overflow: hidden !important;
  position: relative;
}

.vbo-roomslist-imglink {
  display: block;
}

.vbimglistdiv .vblistimg {
  width: 100% !important;
  height: 250px !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.3s ease;
}

.vblistroomblock:hover .vblistimg {
  transform: scale(1.03);
}

/* Gallery overlay trigger */
.vbmodalrdetails,
.vbo-roomslist-opengallery {
  background: rgba(33, 46, 33, 0.7) !important;
  color: var(--vri-cream) !important;
  border-radius: var(--vri-radius-small) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vbmodalrdetails:hover,
.vbo-roomslist-opengallery:hover {
  background: rgba(33, 46, 33, 0.9) !important;
}

.vbo-roomslist-opengallery-cont {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
}

/* VikFX gallery within room list */
.vikfx-gallery {
  border-radius: var(--vri-radius-card) !important;
  overflow: hidden !important;
}

/* Room info section */
.vbo-info-room,
.vbdescrlistdiv {
  padding: 18px 20px !important;
}

/* Room name */
.vbrowcname {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--vri-text) !important;
  margin-bottom: 8px !important;
  line-height: var(--vri-line-height-heading);
}

.vbrowcname a {
  color: var(--vri-text) !important;
  text-decoration: none !important;
}

.vbrowcname a:hover {
  color: var(--vri-secondary) !important;
}

/* Room category badge */
.vblistroomcat {
  display: inline-block;
  background: var(--vri-cream);
  color: var(--vri-text);
  padding: 4px 10px;
  border-radius: var(--vri-radius-small);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Room description */
.vbrowcdescr {
  color: var(--vri-text-secondary) !important;
  font-size: var(--vri-font-body) !important;
  line-height: var(--vri-line-height-body) !important;
  margin-bottom: 12px;
}

/* Amenity characteristics */
.roomlist_carats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.roomlist_carats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--vri-cream);
  padding: 6px 12px;
  border-radius: var(--vri-radius-small);
  font-size: 13px;
  color: var(--vri-text);
}

.roomlist_carats span i {
  color: var(--vri-secondary);
}

/* Price section */
.vbcontdivtot {
  padding: 18px 20px !important;
  background: transparent !important;
}

.vbdivtot {
  padding: 12px 0 !important;
  background: transparent !important;
}

.vbdivtotinline {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.vbsrowprice {
  margin-bottom: 8px;
}

/* Guest capacity */
.vbrowroomcapacity {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--vri-text-secondary);
}

.vbrowroomcapacity i,
.vbrowroomcapacity .vbo-pref-color-text {
  color: var(--vri-secondary) !important;
}

/* Price display */
.vbsrowpricediv {
  margin-bottom: 4px;
}

.room_cost {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--vri-text) !important;
}

.vbo_currency {
  font-weight: 700;
  color: var(--vri-text);
}

.vbo_price {
  font-weight: 800;
  color: var(--vri-text);
}

.vbliststartfrom {
  font-size: 13px;
  color: var(--vri-text-secondary);
}

.vbliststartfrom-subtxt {
  font-size: 12px;
  color: var(--vri-text-light);
}

/* Select room / book button */
.vbselectordiv {
  padding: 18px 20px !important;
}

/* List section heading */
.vbclistheadt {
  font-size: 20px;
  font-weight: 700;
  color: var(--vri-text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--vri-border);
}


/* ==========================================================================
   7. ROOM DETAILS (roomdetails view)
   ========================================================================== */

.vbdetroom {
  margin-bottom: 30px;
}

.vbroomdetcont {
  background: var(--vri-bg);
}

.vbroomimgdesc {
  margin-bottom: 24px;
}

/* Search detail header */
.vbo-searchdet-head {
  margin-bottom: 24px;
}

/* Gallery container */
.vbo-searchdet-gallery-container {
  border-radius: var(--vri-radius-card) !important;
  overflow: hidden !important;
  margin-bottom: 24px;
}

/* Description box */
.room_description_box {
  color: var(--vri-text-secondary);
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 24px;
}

/* Room name */
.vblistroomnamediv {
  margin-bottom: 16px;
}

.vblistroomname {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--vri-text) !important;
  margin-bottom: 12px !important;
  line-height: var(--vri-line-height-heading);
}

/* Characteristics / amenities */
.room_carats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.room_carats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--vri-cream);
  padding: 6px 12px;
  border-radius: var(--vri-radius-small);
  font-size: 13px;
  color: var(--vri-text);
}

.room_carats span i {
  color: var(--vri-secondary);
}

/* Price box on room detail */
.vb_detcostroom {
  margin-top: 24px;
}

.vb_detpriceroombt {
  margin-bottom: 16px;
}

.vbsrchdetpricebox {
  background: var(--vri-bg) !important;
  border: 2px solid var(--vri-primary) !important;
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow) !important;
  overflow: hidden;
}

.vbsrchdetpriceboxinner {
  padding: 24px !important;
}

.vbroomnumnightsdet {
  color: var(--vri-text-secondary);
  font-size: var(--vri-font-body);
  margin-bottom: 8px;
}

/* Price detail table */
.vbpricedetstable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.vbpricedetstrhead {
  font-weight: 700;
  color: var(--vri-text);
  border-bottom: 2px solid var(--vri-border);
}

.vbpricedetstrhead td {
  padding: 10px 0;
}

.vbpricedetstable-leftcol {
  text-align: left;
  color: var(--vri-text-secondary);
}

.vbpricedetstable-rightcol {
  text-align: right;
  font-weight: 700;
  color: var(--vri-text);
}

.vbpricedetstr0,
.vbpricedetstr1 {
  border-bottom: 1px solid var(--vri-border);
}

.vbpricedetstr0 td,
.vbpricedetstr1 td {
  padding: 10px 0;
}

.vbpricedetstr1 {
  background: var(--vri-bg-secondary);
}


/* ==========================================================================
   8. SEARCH RESULTS (search view)
   ========================================================================== */

.vbo-results-head {
  background: var(--vri-bg) !important;
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow) !important;
  padding: 20px 24px !important;
  margin-bottom: 24px !important;
}

.vbo-results-chdates {
  margin-top: 12px;
}

.vbo-results-chdates a {
  color: var(--vri-primary);
  font-weight: 600;
  text-decoration: none;
}

.vbo-results-chdates a:hover {
  color: var(--vri-secondary);
}

/* Room result card within search */
.vbo-room-result-wrap {
  margin-bottom: 24px !important;
}

.vbo-room-result-inner {
  background: var(--vri-bg) !important;
  border: 1px solid var(--vri-border-light) !important;
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow) !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.vbo-room-result-wrap:hover .vbo-room-result-inner {
  transform: translateY(-2px) !important;
  box-shadow: var(--vri-shadow-hover) !important;
}

.vbo-room-result-head {
  background: var(--vri-bg-secondary) !important;
  border-bottom: 1px solid var(--vri-border) !important;
  padding: 16px 20px !important;
}

.vbo-room-result-body {
  padding: 20px !important;
}

.vbo-room-result-body-img {
  border-radius: var(--vri-radius-input);
  overflow: hidden;
  margin-bottom: 16px;
}

.vbo-room-result-body-img img {
  width: 100%;
  height: auto;
  display: block;
}

.vbo-room-result-body-details {
  margin-bottom: 16px;
}

.vbo-room-result-body-rname {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--vri-text) !important;
  margin-bottom: 8px !important;
  line-height: var(--vri-line-height-heading);
}

.vbo-room-result-body-rname a {
  color: var(--vri-text) !important;
  text-decoration: none !important;
}

.vbo-room-result-body-rname a:hover {
  color: var(--vri-secondary) !important;
}

/* Booking solutions */
.vbo-room-result-body-bookingsolutions {
  margin-top: 16px;
}

.vbo-room-result-body-bookingsolution {
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 14px !important;
  margin-bottom: 8px !important;
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.vbo-room-result-body-bookingsolution:hover {
  border-color: var(--vri-secondary) !important;
  background: rgba(174, 192, 171, 0.05) !important;
}


/* ==========================================================================
   9. SHOW PRICES / RATE PLANS (showprc view)
   ========================================================================== */

.vbo-showprc-wrapper {
  background: var(--vri-bg) !important;
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow) !important;
  overflow: hidden !important;
}

.vbo-showprc-rateplans-wrapper {
  padding: 20px;
}

.vbo-showprc-pricetable {
  width: 100%;
  border-collapse: collapse;
}

/* Rate plan headers */
.vbsearchheadroom {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
  border-radius: var(--vri-radius-input) 0 0 var(--vri-radius-input) !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
}

.vbsearchheadperson {
  background: var(--vri-secondary) !important;
  color: #FFFFFF !important;
  border-radius: 0 var(--vri-radius-input) var(--vri-radius-input) 0 !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
}

/* Rate plan entries */
.vbo-showprc-price-entry {
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 14px !important;
  margin-bottom: 8px !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.vbo-showprc-price-entry:hover {
  border-color: var(--vri-secondary) !important;
  background: rgba(174, 192, 171, 0.05) !important;
}

.vbo-showprc-price-entry-radio {
  margin-right: 12px;
}

.vbo-showprc-price-entry-rateplan {
  font-weight: 600;
  color: var(--vri-text);
}

.vbo-showprc-price-entry-cost {
  font-weight: 800;
  font-size: 18px;
  color: var(--vri-text);
}

/* Options / extras */
.vbo-showprc-optionstable {
  width: 100%;
  margin-top: 16px;
}

.vbo-showprc-option-entry {
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 14px !important;
  margin-bottom: 8px !important;
  transition: border-color 0.2s ease;
}

.vbo-showprc-option-entry:hover {
  border-color: var(--vri-secondary) !important;
}

.vbo-showprc-option-entry-name {
  font-weight: 600;
  color: var(--vri-text);
  margin-bottom: 4px;
}

.vbo-showprc-option-entry-descr {
  font-size: 13px;
  color: var(--vri-text-secondary);
  line-height: var(--vri-line-height-body);
}

.vbo-showprc-option-entry-cost {
  font-weight: 700;
  color: var(--vri-text);
}

/* Child fees */
.vbo-showprc-child-fees-wrapper {
  background: var(--vri-cream);
  border: 1px solid var(--vri-accent);
  border-radius: var(--vri-radius-input);
  padding: 16px;
  margin-top: 12px;
}


/* ==========================================================================
   10. BOOKING DETAILS (booking view)
   ========================================================================== */

.vbo-booking-details-intro {
  margin-bottom: 24px;
}

.vbo-booking-details-topcontainer {
  background: var(--vri-bg) !important;
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

/* Status headers */
.vbo-booking-details-head {
  border-radius: var(--vri-radius-input) !important;
  padding: 12px 20px !important;
  font-weight: 700;
  margin-bottom: 20px;
}

.vbo-booking-details-head-confirmed {
  background: var(--vri-secondary) !important;
  color: #FFFFFF !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 12px 20px !important;
  font-weight: 700;
}

.vbo-booking-details-head-pending {
  background: var(--vri-accent) !important;
  color: var(--vri-text) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 12px 20px !important;
  font-weight: 700;
}

.vbo-booking-details-head-cancelled {
  background: #fce4e4 !important;
  color: var(--vri-error) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 12px 20px !important;
  font-weight: 700;
}

/* Booking info */
.vbo-booking-details-midcontainer {
  margin-bottom: 24px;
}

.vbo-booking-details-bookinfos {
  background: var(--vri-bg);
}

.vbvordudatatitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--vri-text);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--vri-border);
}

.vbo-booking-details-bookinfo {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--vri-border) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vbo-booking-details-bookinfo:last-child {
  border-bottom: none !important;
}

.vbo-booking-details-bookinfo-lbl {
  font-weight: 600 !important;
  color: var(--vri-text) !important;
}

.vbo-booking-details-bookinfo-val {
  color: var(--vri-text-secondary) !important;
}

/* Room info in booking */
.vbo-booking-rooms-wrapper {
  margin-top: 24px;
}

.vbvordroominfo {
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-card) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  background: var(--vri-bg) !important;
}

.vbvordroominfo-multi {
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-card) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  background: var(--vri-bg) !important;
}

.vbo-booking-roomphoto {
  border-radius: var(--vri-radius-input);
  overflow: hidden;
  margin-bottom: 12px;
}

.vbo-booking-roomphoto img {
  width: 100%;
  height: auto;
  display: block;
}

.vbordroomdet {
  font-size: var(--vri-font-body);
  color: var(--vri-text-secondary);
  line-height: var(--vri-line-height-body);
}

.vbo-booking-room-extras {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--vri-border);
}

/* Booking item rows */
.vbo-booking-item-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--vri-border);
}

.vbo-booking-item-row:last-child {
  border-bottom: none;
}

.vbo-booking-pricename {
  color: var(--vri-text-secondary);
}

.vbo-booking-pricedet {
  font-weight: 600;
  color: var(--vri-text);
}

/* Cost summary */
.vbo-booking-costs-list {
  margin-top: 16px;
}

.vbo-booking-cost-detail {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--vri-border) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
}

.vbo-booking-cost-detail:last-child {
  border-bottom: none !important;
}

.vbo-booking-cost-detail-total {
  font-weight: 800 !important;
  font-size: 18px !important;
  border-top: 2px solid var(--vri-primary) !important;
  padding-top: 14px !important;
  margin-top: 8px !important;
}

.vbo-booking-cost-detail-remainingbalance {
  background: var(--vri-cream);
  border: 1px solid var(--vri-accent);
  border-radius: var(--vri-radius-input);
  padding: 12px 16px;
  margin-top: 8px;
}

.vbo-booking-cost-lbl {
  color: var(--vri-text-secondary);
}

.vbo-booking-cost-val {
  font-weight: 700;
  color: var(--vri-text);
}

/* Legacy cost styling */
.vbvordcosts {
  background: var(--vri-bg) !important;
  border: 2px solid var(--vri-primary) !important;
  border-radius: var(--vri-radius-card) !important;
  padding: 24px !important;
  box-shadow: var(--vri-shadow) !important;
}

.vbvordcoststot {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--vri-text) !important;
}

.vbvordcoststitle {
  font-weight: 700;
  color: var(--vri-text);
  font-size: 16px;
  margin-bottom: 12px;
}

.vbvordextraservices {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--vri-border);
}

.vbvordcostsoptionals {
  color: var(--vri-text-secondary);
  font-size: 13px;
}

/* Pay button */
.vbvordpaybutton {
  margin-top: 20px;
  text-align: center;
}

.vbvordpaybutton input[type="submit"],
.vbvordpaybutton .btn {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
  border: none !important;
  border-radius: var(--vri-radius-button) !important;
  padding: 15px 30px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.vbvordpaybutton input[type="submit"]:hover,
.vbvordpaybutton .btn:hover {
  background: var(--vri-secondary) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}


/* ==========================================================================
   11. ORDER CONFIRMATION (oconfirm view)
   ========================================================================== */

.vbo-oconfirm-tblcont {
  margin-bottom: 24px;
}

/* Custom fields form */
.vbcustomfields {
  background: var(--vri-bg) !important;
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-card) !important;
  padding: 24px !important;
  box-shadow: var(--vri-shadow) !important;
}

.vbo-oconfirm-cfield-entry {
  margin-bottom: 16px !important;
}

.vbo-oconfirm-cfield-label {
  font-weight: 600;
  color: var(--vri-text);
  margin-bottom: 6px;
  display: block;
}

.vbo-oconfirm-cfield-input {
  width: 100%;
}

.vbo-oconfirm-cfield-input input,
.vbo-oconfirm-cfield-input select,
.vbo-oconfirm-cfield-input textarea {
  border: 2px solid var(--vri-border-tan) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 12px !important;
}

/* Payment method selection */
.vbo-oconfirm-paymentopts {
  border-top: none !important;
  margin-top: 24px !important;
}

.vbo-oconfirm-paymethods-list {
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.vbo-oconfirm-paymethods-list li {
  border: 2px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 16px !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  flex: 1;
  min-width: 200px;
}

.vbo-oconfirm-paymethods-list li:hover {
  border-color: var(--vri-secondary) !important;
  background: rgba(174, 192, 171, 0.05) !important;
}

.vbo-oconfirm-paymethod-item-active,
.vbo-oconfirm-paymethods-list li.vbo-oconfirm-paymethod-item-active {
  border-color: var(--vri-primary) !important;
  background: var(--vri-cream) !important;
}

.vbo-payment-image {
  max-height: 40px;
  width: auto;
}

/* Deposit selection */
.vbo-oconfirm-choosedeposit {
  background: var(--vri-cream) !important;
  border: 1px solid var(--vri-accent) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 18px !important;
  margin-top: 16px !important;
}

.vbo-oconfirm-choosedeposit-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.vbo-oconfirm-choosedeposit-paydeposit-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vbo-oconfirm-choosedeposit-paydeposit-balance {
  background: var(--vri-accent);
  border: 2px solid var(--vri-border-tan);
  padding: 8px 14px;
  border-radius: var(--vri-radius-input);
  font-weight: 600;
  color: var(--vri-text);
}

/* Order table */
.vbtableorder {
  border-collapse: collapse !important;
  width: 100% !important;
  border-radius: var(--vri-radius-card) !important;
  overflow: hidden !important;
}

.vbtableorderfrow {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
}

.vbtableorderfrow td,
.vbtableorderfrow th {
  padding: 14px 18px !important;
  font-weight: 700 !important;
}

.vbo-oconfirm-roomrow td {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--vri-border) !important;
}

.vbordrowtotal td {
  padding: 14px 18px !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  background: var(--vri-bg-secondary) !important;
}

/* CC overlay container */
.vbo-offline-cc-container {
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 20px !important;
}

.vbo-offline-cc-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--vri-border);
}

.vbo-offline-cc-row:last-child {
  border-bottom: none;
}

.vbo-offline-cc-lbl {
  font-weight: 600;
  color: var(--vri-text);
}

.vbo-offline-cc-val {
  color: var(--vri-text-secondary);
}

/* Coupon section */
.vbentercoupon {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--vri-border);
}

.vbentercoupon-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.vbo-coupon-outer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vbhaveacoupon {
  font-weight: 600;
  color: var(--vri-text);
  cursor: pointer;
}

.vbhaveacoupon:hover {
  color: var(--vri-secondary);
}

.vbinputcoupon {
  border: 2px solid var(--vri-border-tan) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 10px 14px !important;
  font-size: var(--vri-font-body);
}

.vbsubmitcoupon {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
  border: none !important;
  border-radius: var(--vri-radius-button) !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vbsubmitcoupon:hover {
  background: var(--vri-secondary) !important;
  color: #FFFFFF !important;
}

/* PIN code section */
.vbo-enterpin-block {
  margin-top: 20px;
  padding: 20px;
  background: var(--vri-bg-secondary);
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-card);
}

.vbo-pincode-inp {
  border: 2px solid var(--vri-border-tan) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 12px !important;
  font-size: 18px !important;
  text-align: center;
  letter-spacing: 4px;
  font-weight: 700;
}

.vbo-enterpin-success {
  color: var(--vri-success);
  font-weight: 600;
  margin-top: 8px;
}

.vbo-enterpin-error {
  color: var(--vri-error);
  font-weight: 600;
  margin-top: 8px;
}

.vbo-enterpin-welcome {
  font-size: 16px;
  font-weight: 700;
  color: var(--vri-text);
  margin-bottom: 12px;
}

.vbo-enterpin-btns {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}


/* ==========================================================================
   12. ORDERS LIST / GUEST PORTAL (orderslist view)
   ========================================================================== */

.vbo-bookings-list-container {
  margin-bottom: 30px;
}

.vbo-bookings-list-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--vri-bg);
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-card);
  overflow: hidden;
  box-shadow: var(--vri-shadow);
}

.vbo-bookings-list-table-head {
  background: var(--vri-primary);
  color: var(--vri-cream);
}

.vbo-bookings-list-table-head-row {
  background: var(--vri-primary);
}

.vbo-bookings-list-table-head-row th,
.vbo-bookings-list-table-head-row td {
  padding: 14px 18px;
  font-weight: 700;
  color: var(--vri-cream);
  text-align: left;
  font-size: var(--vri-font-body);
}

.vbo-bookings-list-table-body {
  background: var(--vri-bg);
}

.vbo-bookings-list-table-row,
.vbo-bookings-list-table-body-row {
  border-bottom: 1px solid var(--vri-border);
  transition: background 0.2s ease;
}

.vbo-bookings-list-table-body-row:hover {
  background: var(--vri-bg-secondary);
}

.vbo-bookings-list-table-body-row:last-child {
  border-bottom: none;
}

/* Status rows */
.vbo-bookings-list-table-body-row-confirmed {
  border-left: 4px solid var(--vri-secondary);
}

.vbo-bookings-list-table-body-row-standby {
  border-left: 4px solid var(--vri-warning);
}

.vbo-bookings-list-table-body-row-cancelled {
  border-left: 4px solid var(--vri-error);
  opacity: 0.7;
}

.vbo-bookings-list-table-cell {
  padding: 14px 18px;
  font-size: var(--vri-font-body);
  color: var(--vri-text);
}

.vbo-bookings-list-table-cell-bstatus {
  font-weight: 600;
}

.vbo-bookings-list-table-cell-lbl {
  font-weight: 600;
  color: var(--vri-text);
  display: none;
}

/* Legacy orders list card */
.vbo-orderslist-order {
  background: var(--vri-bg) !important;
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  transition: box-shadow 0.2s ease;
}

.vbo-orderslist-order:hover {
  box-shadow: var(--vri-shadow-hover) !important;
}


/* ==========================================================================
   13. AVAILABILITY CALENDAR (availability view)
   ========================================================================== */

.vbo-availability-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Legend */
.vblegendediv {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

.vblegenda {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
}

.vblegenda-status {
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  display: inline-block;
}

.vblegenda-lbl {
  color: var(--vri-text-secondary);
  font-size: 13px;
}

.vblegfree {
  background: var(--vri-bg-secondary) !important;
  border: 1px solid var(--vri-border);
}

.vblegwarning {
  background: #fff3cd !important;
  border: 1px solid #ffc107;
}

.vblegbusy {
  background: #f5d5d5 !important;
  border: 1px solid #f5c6cb;
}

/* Calendar wrapper */
.vbo-availability-wrapper {
  margin-top: 20px;
}

.vbo-availability-room-container {
  background: var(--vri-bg) !important;
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

/* Room details within availability */
.vbo-availability-room-details {
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--vri-border) !important;
}

.vbo-availability-room-details-first {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.vbo-availability-room-details-left {
  flex: 1;
  min-width: 0;
}

.vbo-availability-room-details-right {
  flex-shrink: 0;
}

.vbo-availability-room-details-descr {
  color: var(--vri-text-secondary);
  font-size: 13px;
  line-height: var(--vri-line-height-body);
  margin-top: 8px;
}

.vbo-availability-room-details-last {
  padding: 12px 20px;
  border-top: 1px solid var(--vri-border);
}

.vbo-availability-room-details-last-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Calendar month */
.vbo-availability-room-monthcal {
  padding: 16px;
}

.vbo-availability-month-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--vri-text);
  text-align: center;
  padding: 10px 0;
  margin-bottom: 8px;
}

.vbo-availability-room-monthdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.vbo-availability-month-day {
  text-align: center;
  padding: 8px 4px;
  border-radius: 4px;
  font-size: 13px;
  transition: background 0.2s ease;
}

.vbo-availability-daynumber {
  font-weight: 600;
  display: block;
}

.vbo-availability-weekday {
  font-size: 11px;
  color: var(--vri-text-light);
  text-transform: uppercase;
}

/* Month status indicators */
.vbo-availability-room-monthstatus {
  padding: 8px 16px;
}

.vbo-availability-month-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* Calendar date picker global */
.vbcal,
.vbcalcontainer {
  border: 2px solid #e7e3d9 !important;
  border-radius: var(--vri-radius-card) !important;
  overflow: hidden !important;
}

/* Calendar cells */
.vbo-free-cell,
.vbtdfree {
  background: var(--vri-bg-secondary) !important;
  color: var(--vri-text) !important;
}

.vbo-occupied-cell,
.vbtdbusy {
  background: #f5d5d5 !important;
  color: #721c24 !important;
}

.vbo-partially-cell,
.vbtdwarning {
  background: #fff3cd !important;
  color: #856404 !important;
}

/* Calendar check-in/check-out selected dates */
.vbo-checkin-selected,
.vbo-checkout-selected {
  background: var(--vri-primary) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
}

/* Calendar date range */
.vbo-date-range {
  background: #F0F0F0 !important;
}

/* Today */
.vbo-today {
  border: 2px solid var(--vri-secondary) !important;
}


/* ==========================================================================
   14. SEARCH SUGGESTIONS (searchsuggestions view)
   ========================================================================== */

.vbo-search-suggestions-container {
  margin-top: 24px;
}

.vbo-splitstay-suggestions-container {
  margin-top: 24px;
}

.vbo-search-suggestions-intro {
  font-size: 16px;
  font-weight: 600;
  color: var(--vri-text);
  margin-bottom: 16px;
}

.vbo-booking-solutions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vbo-splitstay-solutions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vbo-booking-solution,
.vbo-splitstay-solution {
  background: var(--vri-bg);
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-card);
  padding: 20px;
  box-shadow: var(--vri-shadow-light);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.vbo-booking-solution:hover,
.vbo-splitstay-solution:hover {
  box-shadow: var(--vri-shadow);
  border-color: var(--vri-secondary);
}

/* Solution dates */
.vbo-booking-solution-dates {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

.vbo-booking-solution-checkin,
.vbo-booking-solution-checkout {
  flex: 1;
}

.vbo-booking-solution-date-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--vri-text-light);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.vbo-booking-solution-date-dt {
  font-size: 16px;
  font-weight: 700;
  color: var(--vri-text);
}

/* Solution rooms */
.vbo-booking-solution-rooms {
  margin-bottom: 12px;
}

.vbo-booking-solution-totrooms {
  font-size: 13px;
  color: var(--vri-text-secondary);
  margin-bottom: 8px;
}

.vbo-booking-solution-room,
.vbo-splitstay-solution-room {
  padding: 8px 0;
  border-bottom: 1px solid var(--vri-border);
}

.vbo-booking-solution-room:last-child,
.vbo-splitstay-solution-room:last-child {
  border-bottom: none;
}

.vbo-booking-solution-rname {
  font-weight: 600;
  color: var(--vri-text);
}

.vbo-splitstay-solution-details {
  font-size: 13px;
  color: var(--vri-text-secondary);
}

.vbo-booking-solution-book {
  margin-top: 12px;
}

/* Availability calendar within suggestions */
.vbo-search-suggestions-av {
  margin-top: 24px;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vbo-search-suggestions-month-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.vbo-search-suggestions-av-mon {
  margin-bottom: 16px;
}

.vbo-search-suggestions-month-day {
  text-align: center;
  padding: 6px 4px;
  border-radius: 4px;
  font-size: 12px;
}

.vbo-search-suggestions-month-day-requested {
  border: 2px solid var(--vri-secondary);
  background: rgba(174, 192, 171, 0.1);
}

.vbo-suggestion-daynumber {
  font-weight: 600;
  display: block;
}

.vbo-suggestion-weekday {
  font-size: 10px;
  color: var(--vri-text-light);
  text-transform: uppercase;
}

.vbo-suggestion-free {
  background: var(--vri-bg-secondary);
  color: var(--vri-text);
}

.vbo-suggestion-busy {
  background: #f5d5d5;
  color: #721c24;
}

.vbo-suggestion-selected {
  background: var(--vri-primary);
  color: #FFFFFF;
}


/* ==========================================================================
   15. PACKAGES (packageslist & packagedetails views)
   ========================================================================== */

.vbo-pkglist-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

.vbo-pkglist-pkg {
  background: var(--vri-bg);
  border: 1px solid var(--vri-border-light);
  border-radius: var(--vri-radius-card);
  box-shadow: var(--vri-shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vbo-pkglist-pkg:hover {
  transform: translateY(-2px);
  box-shadow: var(--vri-shadow-hover);
}

.vbo-pkglist-pkg-bone {
  position: relative;
}

.vbo-pkglist-pkg-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.vbo-pkglist-pkg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vbo-pkglist-pkg-btwo {
  padding: 20px;
}

.vbo-pkglist-pkg-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--vri-text);
  margin-bottom: 8px;
  line-height: var(--vri-line-height-heading);
}

.vbo-pkglist-pkg-name a {
  color: var(--vri-text);
  text-decoration: none;
}

.vbo-pkglist-pkg-name a:hover {
  color: var(--vri-secondary);
}

.vbo-pkglist-pkg-dates-cont {
  margin-bottom: 12px;
}

.vbo-pkglist-pkg-dates {
  font-size: 13px;
  color: var(--vri-text-secondary);
}

.vbo-pkglist-pkg-dates-lbl {
  font-weight: 600;
  color: var(--vri-text);
}

.vbo-pkglist-pkg-dates-ft {
  color: var(--vri-text-secondary);
}

.vbo-pkglist-pkg-shortdescr {
  font-size: var(--vri-font-body);
  color: var(--vri-text-secondary);
  line-height: var(--vri-line-height-body);
  margin-bottom: 16px;
}

.vbo-pkglist-pkg-bthree {
  padding: 16px 20px;
  border-top: 1px solid var(--vri-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vbo-pkglist-pkg-cost {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.vbo-pkglist-pkg-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--vri-text);
}

.vbo-pkglist-pkg-priceper {
  font-size: 13px;
  color: var(--vri-text-secondary);
}

.vbo-pkglist-pkg-details {
  font-weight: 600;
  color: var(--vri-primary);
  text-decoration: none;
}

.vbo-pkglist-pkg-details:hover {
  color: var(--vri-secondary);
}

.vbo-pkglist-pkg-benefits {
  margin-top: 12px;
}

.vbo-pkglist-pkg-benefits li {
  padding: 4px 0;
  font-size: 13px;
  color: var(--vri-text-secondary);
}

/* Package detail page */
.vbo-pkgdet-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--vri-text);
  margin-bottom: 20px;
  line-height: var(--vri-line-height-heading);
}

.vbo-pkgdet-container {
  margin-bottom: 30px;
}

.vbo-pkgdet-topwrap {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.vbo-pkgdet-img {
  flex: 1;
  min-width: 300px;
  border-radius: var(--vri-radius-card);
  overflow: hidden;
}

.vbo-pkgdet-img img {
  width: 100%;
  height: auto;
  display: block;
}

.vbo-pkgdet-descrprice-block {
  flex: 1;
  min-width: 280px;
}


/* ==========================================================================
   16. PROMOTIONS (promotions view)
   ========================================================================== */

.vbo-promotions-container {
  margin-bottom: 30px;
}

.vbo-promotion-details {
  margin-bottom: 24px;
}

.vbo-promotion-det-wrapper {
  background: var(--vri-bg);
  border: 1px solid var(--vri-border-light);
  border-radius: var(--vri-radius-card);
  box-shadow: var(--vri-shadow);
  overflow: hidden;
}

.vbo-promotion-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--vri-text);
  padding: 20px;
  line-height: var(--vri-line-height-heading);
}

.vbo-promotion-description {
  padding: 0 20px 16px;
  font-size: var(--vri-font-body);
  color: var(--vri-text-secondary);
  line-height: var(--vri-line-height-body);
}

.vbo-promotion-wrapper {
  padding: 0 20px 20px;
}

/* Promotion dates */
.vbo-promotion-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--vri-cream);
  border-radius: var(--vri-radius-input);
}

.vbo-promotion-dates-left {
  display: flex;
  gap: 16px;
  flex: 1;
}

.vbo-promotion-date-from,
.vbo-promotion-date-to {
  flex: 1;
}

.vbo-promotion-date-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--vri-text-light);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.vbo-promotion-dates-right {
  flex-shrink: 0;
}

.vbo-promotion-date-validuntil {
  font-size: 13px;
  color: var(--vri-text-secondary);
  font-weight: 600;
}

.vbo-promotion-date-weekdays {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.vbo-promotion-date-weekday {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vri-radius-circle);
  font-size: 11px;
  font-weight: 600;
  background: var(--vri-bg);
  border: 1px solid var(--vri-border);
  color: var(--vri-text-secondary);
}

.vbo-promotion-date-weekday.active {
  background: var(--vri-primary);
  color: var(--vri-cream);
  border-color: var(--vri-primary);
}

/* Promotion discount */
.vbo-promotion-discount {
  background: var(--vri-accent);
  border: 2px solid var(--vri-border-tan);
  padding: 8px 14px;
  border-radius: var(--vri-radius-input);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.vbo-promotion-discount-details {
  font-weight: 600;
  color: var(--vri-text);
}

.vbo-promotion-discount-percent-amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--vri-text);
}

.vbo-promotion-discount-percent-txt {
  font-size: 13px;
  color: var(--vri-text-secondary);
}

/* Promotion rooms */
.vbo-promotion-bottom-block {
  margin-top: 16px;
}

.vbo-promotion-rooms-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.vbo-promotion-room-block {
  background: var(--vri-bg);
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-card);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.vbo-promotion-room-block:hover {
  box-shadow: var(--vri-shadow);
}

.vbo-promotion-room-img {
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.vbo-promotion-room-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vbo-promotion-room-name {
  padding: 12px 16px;
  font-weight: 700;
  color: var(--vri-text);
}

.vbo-promotion-room-book-block {
  padding: 12px 16px;
  border-top: 1px solid var(--vri-border);
}

.vbo-promotion-room-book-link {
  display: inline-block;
  background: var(--vri-primary);
  color: var(--vri-cream) !important;
  border-radius: var(--vri-radius-button);
  padding: 10px 20px;
  font-weight: 600;
  font-size: var(--vri-font-body);
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.vbo-promotion-room-book-link:hover {
  background: var(--vri-secondary);
  color: #FFFFFF !important;
}

/* Promotion block (inline within search results) */
.vbo-promotion-block {
  border: 1px solid var(--vri-secondary) !important;
  background: rgba(174, 192, 171, 0.08) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 12px 16px !important;
  margin: 8px 0;
}

.vbo-promotion-icon {
  color: var(--vri-secondary) !important;
}


/* ==========================================================================
   17. LOGIN / REGISTER (loginregister view)
   ========================================================================== */

.loginregistercont {
  max-width: 500px;
  margin: 0 auto 30px;
}

.loginregister-block {
  background: var(--vri-bg);
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-card);
  box-shadow: var(--vri-shadow);
  padding: 30px;
  margin-bottom: 24px;
}

.registerblock {
  background: var(--vri-bg);
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-card);
  box-shadow: var(--vri-shadow);
  padding: 30px;
}

.loginregister-inner-block {
  margin-bottom: 16px;
}

.loginregister-row {
  margin-bottom: 16px;
}

.loginregister-lbl {
  font-weight: 600;
  color: var(--vri-text);
  margin-bottom: 6px;
  display: block;
  font-size: var(--vri-font-body);
}

.loginregister-val {
  width: 100%;
}

.loginregister-val .vbinput {
  width: 100%;
  border: 2px solid var(--vri-border-tan) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 12px !important;
}

.loginregister-submit {
  margin-top: 20px;
  text-align: center;
}

.loginregister-submit input[type="submit"],
.loginregister-submit .btn {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
  border: none !important;
  border-radius: var(--vri-radius-button) !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  font-size: var(--vri-font-body) !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.loginregister-submit input[type="submit"]:hover,
.loginregister-submit .btn:hover {
  background: var(--vri-secondary) !important;
  color: #FFFFFF !important;
}


/* ==========================================================================
   18. PRE-CHECK-IN (precheckin view)
   ========================================================================== */

.vbo-precheckin-container {
  margin-bottom: 30px;
}

.vbo-precheckin-room-wrapper {
  margin-bottom: 24px;
}

.vbo-precheckin-room-wrap {
  background: var(--vri-bg);
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-card);
  box-shadow: var(--vri-shadow);
  overflow: hidden;
  margin-bottom: 20px;
}

/* Guest count badges */
.vbo-precheckin-guestscount-complete {
  background: var(--vri-secondary);
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: var(--vri-radius-small);
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.vbo-precheckin-guestscount-incomplete {
  background: var(--vri-warning);
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: var(--vri-radius-small);
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.vbo-precheckin-room-head {
  padding: 18px 20px;
  background: var(--vri-bg-secondary);
  border-bottom: 1px solid var(--vri-border);
  font-weight: 700;
  color: var(--vri-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vbo-precheckin-adults-cont {
  padding: 20px;
}

.vbo-precheckin-adult-wrap {
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-input);
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease;
}

.vbo-precheckin-adult-wrap:hover {
  border-color: var(--vri-secondary);
}

.vbo-precheckin-adult-num {
  font-weight: 700;
  color: var(--vri-text);
  margin-bottom: 12px;
  font-size: 16px;
}

.vbo-precheckin-guest-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.vbo-precheckin-disclaimer {
  background: var(--vri-cream);
  border-left: 4px solid var(--vri-secondary);
  padding: 16px 20px;
  border-radius: 0 var(--vri-radius-input) var(--vri-radius-input) 0;
  margin-top: 20px;
  font-size: 13px;
  color: var(--vri-text-secondary);
  line-height: var(--vri-line-height-body);
}


/* ==========================================================================
   19. SIGNATURE (signature view)
   ========================================================================== */

.vbo-sign-bookdet-container {
  background: var(--vri-bg);
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-card);
  box-shadow: var(--vri-shadow);
  margin-bottom: 24px;
  overflow: hidden;
}

.vbo-sign-bookdet-wrap {
  padding: 20px;
}

.vbo-sign-bookdet-head {
  font-size: 18px;
  font-weight: 700;
  color: var(--vri-text);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--vri-border);
}

.vbo-sign-bookdet-foot {
  padding: 16px 20px;
  background: var(--vri-bg-secondary);
  border-top: 1px solid var(--vri-border);
}

/* Signature pad */
.vbo-signature-container {
  margin-bottom: 24px;
}

.vbo-signature-pad {
  background: var(--vri-bg);
  border: 2px solid var(--vri-border-tan);
  border-radius: var(--vri-radius-card);
  overflow: hidden;
}

.vbo-signature-pad-head {
  padding: 14px 20px;
  background: var(--vri-bg-secondary);
  border-bottom: 1px solid var(--vri-border);
  font-weight: 700;
  color: var(--vri-text);
}

.vbo-signature-pad-body {
  padding: 20px;
  min-height: 200px;
  background: #FFFFFF;
}

.vbo-signature-pad-body canvas {
  border: 1px dashed var(--vri-border);
  border-radius: var(--vri-radius-input);
  cursor: crosshair;
}

.vbo-signature-pad-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--vri-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vbo-signature-signabove {
  font-size: 12px;
  color: var(--vri-text-light);
  text-align: center;
  margin-top: 4px;
}

.vbo-signature-cmds {
  display: flex;
  gap: 8px;
}

.vbo-signature-cmd {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
  border: none !important;
  border-radius: var(--vri-radius-button) !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vbo-signature-cmd:hover {
  background: var(--vri-secondary) !important;
  color: #FFFFFF !important;
}

.vbo-current-signature-p {
  font-size: 13px;
  color: var(--vri-text-secondary);
  margin-bottom: 12px;
}

.vbo-signature-currentimg {
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-input);
  padding: 12px;
  background: var(--vri-bg);
}

.vbo-signature-currentimg img {
  max-width: 100%;
  height: auto;
}


/* ==========================================================================
   20. REVIEW / RATING (revstay view)
   ========================================================================== */

.vbo-booking-leavereview-wrap {
  max-width: 600px;
  margin: 0 auto 30px;
}

.vbo-booking-leavereview-content {
  background: var(--vri-bg);
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-card);
  box-shadow: var(--vri-shadow);
  padding: 30px;
}

.vbo-booking-leavereview-inner {
  margin-bottom: 20px;
}

/* Star ratings */
.vbo-booking-starrating-wrap {
  margin-bottom: 20px;
}

.vbo-booking-starrating-cont {
  margin-bottom: 16px;
}

.vbo-booking-review-servicename {
  font-weight: 600;
  color: var(--vri-text);
  margin-bottom: 8px;
  font-size: var(--vri-font-body);
}

.vbo-booking-review-global {
  font-size: 16px;
  font-weight: 700;
  color: var(--vri-text);
  margin-bottom: 16px;
}

.vbo-booking-starrating-stars {
  display: inline-flex;
  gap: 4px;
}

.vbo-review-star {
  font-size: 24px;
  color: var(--vri-border);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.1s ease;
}

.vbo-review-star:hover {
  transform: scale(1.15);
}

.vbo-review-star-full,
.vbo-review-star.active {
  color: var(--vri-warning) !important;
}

/* Review message */
.vbo-booking-review-message {
  margin-top: 20px;
}

.vbo-booking-review-message-inner textarea {
  border: 2px solid var(--vri-border-tan) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 14px !important;
  width: 100%;
  min-height: 120px;
  font-size: var(--vri-font-body);
  line-height: var(--vri-line-height-body);
  resize: vertical;
}

.vbo-booking-review-message-privacy {
  font-size: 12px;
  color: var(--vri-text-light);
  margin-top: 8px;
}

.vbo-booking-review-cmds {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.vbo-booking-review-cmd {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
  border: none !important;
  border-radius: var(--vri-radius-button) !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vbo-booking-review-cmd:hover {
  background: var(--vri-secondary) !important;
  color: #FFFFFF !important;
}


/* ==========================================================================
   21. GALLERY (vikfx)
   ========================================================================== */

.vikfx-gallery-container,
.vikfx-compact-gallery-container,
.vikfx-roomdetails-gallery-container {
  border-radius: var(--vri-radius-card) !important;
  overflow: hidden !important;
}

.vikfx-gallery-navigation-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
  z-index: 10;
}

.vikfx-gallery-navigation-controls button,
.vikfx-gallery-previous-image,
.vikfx-gallery-next-image {
  background: rgba(33, 46, 33, 0.7) !important;
  color: var(--vri-cream) !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--vri-radius-circle) !important;
  cursor: pointer;
  transition: background 0.2s ease;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.vikfx-gallery-navigation-controls button:hover,
.vikfx-gallery-previous-image:hover,
.vikfx-gallery-next-image:hover {
  background: rgba(33, 46, 33, 0.9) !important;
}

.vikfx-gallery-fade-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--vri-radius-card);
}

.vikfx-gallery-fade-container img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================================
   22. DIALOGS / MODALS
   ========================================================================== */

.vbdialog-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px);
}

.vbdialog-overlay-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--vri-bg) !important;
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-circle) !important;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--vri-text);
  transition: background 0.2s ease;
  z-index: 10;
}

.vbdialog-overlay-close:hover {
  background: var(--vri-bg-secondary) !important;
}

.vbdialog-inner {
  background: var(--vri-bg) !important;
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow-heavy) !important;
  padding: 28px !important;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.vbdialog-reqinfo {
  font-size: var(--vri-font-body);
  color: var(--vri-text);
  line-height: var(--vri-line-height-body);
}

.vbo-overlay-checkin-body {
  padding: 20px;
}

.vbo-info-overlay-content {
  padding: 20px;
  font-size: var(--vri-font-body);
  color: var(--vri-text);
  line-height: var(--vri-line-height-body);
}

.vbo-offline-cc-overlay-inner {
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow-heavy) !important;
  background: var(--vri-bg) !important;
  padding: 28px !important;
}


/* ==========================================================================
   23. UTILITY / HELPER CLASSES
   ========================================================================== */

/* Icon colors */
.vbo-pref-color-text,
.com_vikbooking i.vbo-pref-color-text {
  color: var(--vri-secondary) !important;
}

.vbo-pref-color-element {
  color: var(--vri-primary) !important;
}

.vbo-pref-bordertext {
  border-color: var(--vri-primary) !important;
  color: var(--vri-primary) !important;
}

/* Tax visibility */
.vbo-hide-tax {
  display: none;
}

/* JS helpers */
.vbo-js-helpers {
  display: none;
}

/* Guests policy */
.vbo-guests-allowed-policy {
  background: var(--vri-cream);
  border-left: 4px solid var(--vri-secondary);
  padding: 16px 20px;
  border-radius: 0 var(--vri-radius-input) var(--vri-radius-input) 0;
  font-size: 13px;
  color: var(--vri-text-secondary);
  line-height: var(--vri-line-height-body);
  margin: 16px 0;
}

/* Booking modification helper */
.vbo-booking-modification-helper {
  background: var(--vri-cream);
  border: 1px solid var(--vri-accent);
  border-radius: var(--vri-radius-card);
  padding: 20px;
  margin-bottom: 24px;
}

.vbo-booking-modification-helper-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vbo-booking-modification-msg {
  font-size: var(--vri-font-body);
  color: var(--vri-text);
  line-height: var(--vri-line-height-body);
}

.vbo-booking-modification-canc {
  color: var(--vri-error);
  font-weight: 600;
  cursor: pointer;
}

.vbo-booking-modification-canc:hover {
  text-decoration: underline;
}

/* Unavailable block */
.vbo-unavailable-block {
  border: 1px solid #f5c6cb !important;
  background: #fff5f5 !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 12px 16px !important;
}

/* Discount badges */
.vbo-room-result-price-before-discount {
  text-decoration: line-through;
  color: var(--vri-text-secondary);
  font-size: var(--vri-font-body);
}

.vbo-room-result-price-before-discount-percent {
  background: var(--vri-secondary) !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 700;
}

/* Price display element */
.vblistdivcost {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
  border-radius: var(--vri-radius-small) !important;
  padding: 10px 14px !important;
  font-weight: 700;
}

/* Tooltips */
.vbo-tooltip-wrap {
  background: var(--vri-primary) !important;
  color: var(--vri-cream) !important;
  border-radius: var(--vri-radius-small) !important;
  padding: 8px 14px !important;
  font-size: 13px;
}

/* Loading spinner */
.vbo-loading-overlay {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* Check-in / check-out location */
.vbcheckinloc,
.vbcheckoutloc {
  background: var(--vri-cream) !important;
  border: 1px solid var(--vri-accent) !important;
  border-radius: var(--vri-radius-input) !important;
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
}


/* ==========================================================================
   24. FAVOURITES SYSTEM (VRI Custom)
   ========================================================================== */

.vri-favourite-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: var(--vri-radius-circle);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: var(--vri-shadow-light);
}

.vri-favourite-btn:hover {
  background: #FFFFFF;
  transform: scale(1.1);
}

.vri-favourite-btn.active svg {
  fill: #e74c3c;
  stroke: #e74c3c;
}

.vri-favourite-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--vri-text-secondary);
  stroke-width: 2;
}


/* ==========================================================================
   25. MOBILE SUMMARY BAR (VRI Custom)
   ========================================================================== */

.vri-mobile-summary {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--vri-bg);
  border-top: 1px solid var(--vri-border);
  box-shadow: 0 -4px 12px rgba(0,0,0,.08);
  padding: 12px 16px;
  z-index: 9999;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vri-mobile-summary__price {
  font-size: 18px;
  font-weight: 800;
  color: var(--vri-text);
}

.vri-mobile-summary__dates {
  font-size: 12px;
  color: var(--vri-text-secondary);
}

.vri-mobile-summary__btn {
  background: var(--vri-primary);
  color: var(--vri-cream);
  border: none;
  border-radius: var(--vri-radius-button);
  padding: 12px 24px;
  font-weight: 600;
  font-size: var(--vri-font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.vri-mobile-summary__btn:hover {
  background: var(--vri-secondary);
  color: #FFFFFF;
}


/* ==========================================================================
   26. PAGINATION
   ========================================================================== */

.com_vikbooking .pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 30px 0;
  list-style: none;
  padding: 0;
}

.com_vikbooking .pagination li a,
.com_vikbooking .pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--vri-border);
  border-radius: var(--vri-radius-input);
  color: var(--vri-text);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.com_vikbooking .pagination li a:hover {
  background: var(--vri-bg-secondary);
  border-color: var(--vri-secondary);
}

.com_vikbooking .pagination li.active span,
.com_vikbooking .pagination li .active {
  background: var(--vri-primary);
  color: var(--vri-cream);
  border-color: var(--vri-primary);
}


/* ==========================================================================
   27. MODULES / WIDGETS
   ========================================================================== */

/* Rooms widget */
.vbmodroomscontainer .vbmodrooms-item {
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-card) !important;
  overflow: hidden !important;
  box-shadow: var(--vri-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vbmodroomscontainer .vbmodrooms-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--vri-shadow-hover) !important;
}

/* Horizontal search widget */
.mod_vikbooking_horizontalsearch {
  background: var(--vri-bg) !important;
  border: 1px solid var(--vri-border) !important;
  border-radius: var(--vri-radius-card) !important;
  box-shadow: var(--vri-shadow) !important;
  padding: 20px !important;
}


/* ==========================================================================
   28. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
  /* Show mobile summary bar */
  .vri-mobile-summary {
    display: flex;
  }

  /* Reduce padding on cards */
  .room_result-inner,
  .vblistroomblock,
  .vbo-booking-details-topcontainer,
  .vbcustomfields,
  .loginregister-block,
  .registerblock {
    padding: 16px !important;
  }

  /* Stack search form inputs */
  .vbo-search-num-racblock {
    flex-direction: column;
  }

  .vbo-booking-solution-dates {
    flex-direction: column;
    gap: 12px;
  }

  /* Table responsive labels */
  .vbo-bookings-list-table-cell-lbl {
    display: block;
    margin-bottom: 4px;
  }

  /* Packages single column */
  .vbo-pkglist-container {
    grid-template-columns: 1fr;
  }

  /* Promotion rooms single column */
  .vbo-promotion-rooms-list {
    grid-template-columns: 1fr;
  }

  /* Pre-checkin fields single column */
  .vbo-precheckin-guest-fields {
    grid-template-columns: 1fr;
  }

  /* Promotion dates stack */
  .vbo-promotion-dates {
    flex-direction: column;
  }

  .vbo-promotion-dates-left {
    flex-direction: column;
  }

  /* Package detail topwrap stack */
  .vbo-pkgdet-topwrap {
    flex-direction: column;
  }

  .vbo-pkgdet-img {
    min-width: 100%;
  }

  /* Payment methods stack */
  .vbo-oconfirm-paymethods-list {
    flex-direction: column !important;
  }

  .vbo-oconfirm-paymethods-list li {
    min-width: 100% !important;
  }

  /* Step bar font size */
  .vbo-stepbar li {
    font-size: 12px;
    padding: 10px 6px;
  }

  /* Room name smaller */
  .vblistroomname {
    font-size: 22px !important;
  }

  .com_vikbooking h1 {
    font-size: 24px;
  }

  .com_vikbooking h2 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  /* Even smaller padding */
  .vbo-search-mainview,
  .vbdivsearch,
  .vb-search-inner {
    padding: 16px !important;
  }

  .vbo-booking-review-cmds {
    flex-direction: column;
  }

  .vbo-signature-cmds {
    flex-direction: column;
  }

  .vbo-enterpin-btns {
    flex-direction: column;
  }

  .vbentercoupon-inner {
    flex-direction: column;
  }
}