/* 1) Remove the grey card the module sets on the FORM */
.vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid > form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Keep spacing on the wrapper itself */
.vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid {
  padding: 24px !important;
}

/* 2) Make sure the Book Now column sits above the right column */
#contentheader .leftsearch  { z-index: 10010 !important; }
#contentheader .rightsearch { z-index: 1000 !important; }

/* 3) Slider overlay never blocks clicks (and is lighter like J3) */
#vikcstsld-slider .bs-slider-overlay { opacity: .1 !important; pointer-events: none !important; }

/* 4) Time dropdowns look/behave normally */
.vrcdivsearch.vrcdivsearchmodule .vrc-sm-time-container select {
  appearance: auto;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 10px !important;
  min-width: 80px;
}
.vrcdivsearch.vrcdivsearchmodule .vrctimesep {
  display: inline-block; margin: 0 6px; color: #fff;
}

/* Align the two columns perfectly */
.vrcdivsearch.vrcdivsearchmodule .vrc-searchmod-section-pickup,
.vrcdivsearch.vrcdivsearchmodule .vrc-searchmod-section-datetimes {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* left / right */
  column-gap: 24px;                 /* tweak if you want tighter/wider */
}

/* Remove the tiny left indent on time rows */
.vrcdivsearch.vrcdivsearchmodule .vrcsfentrytime,
.vrcdivsearch.vrcdivsearchmodule .vrcsfentrylabsel {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Keep the time selects tight and aligned */
.vrcdivsearch.vrcdivsearchmodule .vrc-sm-time-container {
  display: flex;
  align-items: center;
  gap: 8px;                         /* space around the colon */
}

/* === Review Slider Container === */
#google-reviews-slider {
  width: 100%;
  padding: 20px 0 56px;
  position: relative;
  overflow: visible; /* ensure dots / hover shadows aren't clipped */
  box-sizing: border-box;
}

/* === Card wrapper (each slide contains a card) === */
#google-reviews-slider .swiper-slide {
  height: auto; /* allow card to size naturally */
}

/* === Review Card === */
.review-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
  box-sizing: border-box;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* === Stars === */
.review-stars {
  color: #FFB400;           /* golden stars */
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 1;
  margin-bottom: 4px;
}

/* === Review Text ===
   - Default is "collapsed": show ~10 lines with fade
   - When expanded, fixed height with scrollbar
*/
.review-text {
  position: relative;
  line-height: 1.45;
  margin-bottom: 6px;
  white-space: pre-wrap;     /* keep paragraphs & line breaks from Takeout */
  word-wrap: break-word;
}

.review-text.collapsed {
  max-height: calc(1.45em * 10); /* ~10 lines visible */
  overflow: hidden;
}

.review-text.collapsed::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3.2em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
}

/* Expanded: fixed height + scroll to read full text */
.review-text.expanded {
  max-height: calc(1.45em * 10);
  overflow: auto;
  padding-right: 4px;         /* room for scrollbar */
  scrollbar-width: thin;      /* Firefox */
}

.review-text.expanded::-webkit-scrollbar {
  width: 6px;
}

.review-text.expanded::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 6px;
}

/* === Read More Button === */
.review-toggle {
  align-self: flex-start;
  appearance: none;
  border: 0;
  background: #f3f5f7;
  color: #2c6bed;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background .2s;
}

.review-toggle:hover {
  background: #e9edf3;
}

/* === Footer (avatar, author, date) === */
.review-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;          /* push footer to bottom of card */
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* === Pagination Dots: 2× bigger, clickable === */
#google-reviews-slider .swiper-pagination {
  bottom: 6px;
}

#google-reviews-slider .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 0 6px !important;
  background: #bbb;
  opacity: 1;
  transition: background .3s, transform .15s;
}

#google-reviews-slider .swiper-pagination-bullet:hover {
  transform: scale(1.1);
}

#google-reviews-slider .swiper-pagination-bullet-active {
  background: #2c6bed;
}

/* === Responsive niceties (optional) === */
@media (max-width: 899px) {
  .review-card { padding: 16px; }
  .review-avatar { width: 36px; height: 36px; }
  .review-stars { font-size: 15px; }
}

@media (max-width: 599px) {
  .review-card { padding: 14px; }
  .review-avatar { width: 34px; height: 34px; }
  .review-stars { font-size: 14px; }
}
/* Button styling with tighter spacing */
.reviews-google-btn {
  display: inline-block;
  margin: 4px 0 12px;   /* smaller top gap, moderate bottom gap */
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #2c6bed;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.reviews-google-btn:hover {
  background: #1d4fc0;
  transform: translateY(-2px);
}
/* --- Search module: mobile improvements (non-destructive) --- */

/* 0) Keep styles scoped to the Vik search module only */
.vrcdivsearch.vrcdivsearchmodule {
  --vrc-gap: 12px;
  --vrc-input-h: 48px;
  --vrc-radius: 12px;
  --vrc-font: 16px; /* prevents iOS zoom */
}

/* 1) Mobile layout: stack everything neatly */
@media (max-width: 640px) {
  /* Stack the two main sections */
  .vrcdivsearch.vrcdivsearchmodule .vrc-searchmod-section-pickup,
  .vrcdivsearch.vrcdivsearchmodule .vrc-searchmod-section-datetimes {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--vrc-gap);
    column-gap: 0;
  }

  /* Give each field block a little breathing room */
  .vrcdivsearch.vrcdivsearchmodule .vrcsfentrycont {
    display: grid;
    gap: 6px;
  }

  /* Inputs & selects: comfortable height and padding */
  .vrcdivsearch.vrcdivsearchmodule select,
  .vrcdivsearch.vrcdivsearchmodule input[type="text"],
  .vrcdivsearch.vrcdivsearchmodule input[type="date"],
  .vrcdivsearch.vrcdivsearchmodule input[type="time"] {
    height: var(--vrc-input-h) !important;
    font-size: var(--vrc-font);
    padding: 0 12px !important;
    border-radius: var(--vrc-radius);
  }

  /* Time (HH:MM) rows: keep hour/minute side-by-side with a tidy gap */
  .vrcdivsearch.vrcdivsearchmodule .vrc-sm-time-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* hour : minute */
    align-items: center;
    gap: 8px;
  }
  .vrcdivsearch.vrcdivsearchmodule .vrctimesep { margin: 0; }

  /* Full-width primary action button */
  .vrcdivsearch.vrcdivsearchmodule .vrcsearchbtn,
  .vrcdivsearch.vrcdivsearchmodule button[type="submit"],
  .vrcdivsearch.vrcdivsearchmodule input[type="submit"] {
    width: 100%;
    height: 52px;
    font-size: 17px;
    border-radius: 14px;
    letter-spacing: .02em;
  }

  /* Avoid overlap with chat bubble at the bottom-right */
  .vrcdivsearch.vrcdivsearchmodule form {
    padding-bottom: 72px !important;
  }
}

/* 2) Desktop/tablet nicety: keep the two-column alignment you already set */
@media (min-width: 641px) {
  .vrcdivsearch.vrcdivsearchmodule .vrc-searchmod-section-pickup,
  .vrcdivsearch.vrcdivsearchmodule .vrc-searchmod-section-datetimes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
}

/* 3) Better focus ring for accessibility */
.vrcdivsearch.vrcdivsearchmodule select:focus,
.vrcdivsearch.vrcdivsearchmodule input:focus {
  outline: 2px solid rgba(90,200,90,.9);
  outline-offset: 0;
}