/* =====================================================
   Activities Detail — EatRav-style redesign
   Scoped entirely under `.eatrav-activity` so the shared
   travlla-tour-detail.css (tours / transport) is unaffected.
   ===================================================== */

.eatrav-activity {
  /* Company brand palette — main brand color is the Patagonia teal #00A0C6
     (the same accent the tour-detail pages use). All accents on this page
     derive from these, so any leaked .trv- styling also renders in teal. */
  --er-red: #00A0C6;        /* brand teal — primary accent/CTA */
  --er-red-dark: #00809E;   /* darker teal for hover */
  --er-red-soft: #e3f4f9;   /* light teal tint for soft backgrounds */
  --er-ink: #17181c;
  --er-body: #5b6169;
  --er-muted: #8a9099;
  --er-line: #e6e8ec;
  --er-soft: #f6f7f9;
  --er-blue-pill: #e3f4f9;  /* date field pill (teal tint) */
  --er-blue-ink: #00809E;   /* date field text (dark teal) */
  --er-green: #00A0C6;      /* included / highlight checks — brand teal */
  --er-navy: #26317c;
  --primary-color1: #00A0C6;
  --primary-color2: #00809E;
}

.eatrav-activity,
.eatrav-activity p,
.eatrav-activity li,
.eatrav-activity span {
  color: var(--er-body);
}

/* No top gap under the header (removes the shared .trv-tour-detail-page
   .section-full margin-top too, if present in the tree). */
.eatrav-activity .section-full {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 80px;
}

/* =========================================================
   GALLERY MOSAIC
   ========================================================= */
.er-gallery {
  display: grid;
  gap: 14px;
  height: 520px;
  margin-bottom: 40px;
}

/* Count-adaptive mosaic layouts.
   Columns model: left (1) | middle/main (2) | right (1). */
.er-gallery--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.er-gallery--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.er-gallery--3 { grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr; }
.er-gallery--4,
.er-gallery--5 { grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 1fr; }

/* 1: single image fills everything. 2: two equal columns (auto-placed). */

/* 3: left | middle(big) | right */
.er-gallery--3 .er-g-1 { grid-column: 2; grid-row: 1; }
.er-gallery--3 .er-g-2 { grid-column: 1; grid-row: 1; }
.er-gallery--3 .er-g-3 { grid-column: 3; grid-row: 1; }

/* 4: left splits into two stacked; middle + right stay full height */
.er-gallery--4 .er-g-1 { grid-column: 2; grid-row: 1 / span 2; }
.er-gallery--4 .er-g-2 { grid-column: 1; grid-row: 1; }
.er-gallery--4 .er-g-3 { grid-column: 3; grid-row: 1 / span 2; }
.er-gallery--4 .er-g-4 { grid-column: 1; grid-row: 2; }

/* 5: both sides split into two stacked; middle stays big */
.er-gallery--5 .er-g-1 { grid-column: 2; grid-row: 1 / span 2; }
.er-gallery--5 .er-g-2 { grid-column: 1; grid-row: 1; }
.er-gallery--5 .er-g-3 { grid-column: 3; grid-row: 1; }
.er-gallery--5 .er-g-4 { grid-column: 1; grid-row: 2; }
.er-gallery--5 .er-g-5 { grid-column: 3; grid-row: 2; }

.er-gallery .er-g-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  background: var(--er-soft);
}

.er-gallery .er-g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.er-gallery .er-g-item:hover img {
  transform: scale(1.06);
}

/* Overlay buttons on the hero (bottom-right) */
.er-gallery .er-g-actions {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 10px;
  z-index: 3;
}

.er-gallery .er-g-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: none;
  border-radius: 30px;
  background: rgba(20, 22, 26, 0.66);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.25s ease;
  cursor: pointer;
  line-height: 1;
}

.er-gallery .er-g-btn:hover {
  background: var(--er-red);
  color: #fff;
}

.er-gallery .er-g-btn i {
  font-size: 15px;
}

/* Hidden fancybox links used by "See all photos" */
.er-gallery-hidden {
  display: none;
}

@media (max-width: 991px) {
  .er-gallery { height: 440px; }
}

@media (max-width: 767px) {
  .er-gallery,
  .er-gallery--1,
  .er-gallery--2,
  .er-gallery--3,
  .er-gallery--4,
  .er-gallery--5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 135px;
    height: auto;
    gap: 10px;
  }
  /* Reset explicit desktop placements, then let the main image lead. */
  .er-gallery .er-g-item { grid-column: auto; grid-row: auto; }
  .er-gallery--1 .er-g-1,
  .er-gallery--3 .er-g-1,
  .er-gallery--4 .er-g-1,
  .er-gallery--5 .er-g-1 { grid-column: 1 / -1; grid-row: span 2; }
  .er-gallery--2 .er-g-item { grid-column: 1 / -1; }
  .er-gallery .er-g-btn span { display: none; }
  .er-gallery .er-g-btn { padding: 9px 12px; }
}

/* =========================================================
   TITLE / META
   ========================================================= */
.er-head-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.18;
  color: var(--er-ink);
  margin: 0 0 14px;
}

@media (max-width: 767px) {
  .er-head-title { font-size: 26px; }
}

.er-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-bottom: 6px;
}

.er-meta .er-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--er-ink);
}

.er-meta .er-rating .er-stars i { color: #f7b500; font-size: 15px; }
.er-meta .er-rating small { color: var(--er-muted); font-weight: 500; }

.er-meta .er-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-body);
}

.er-meta .er-meta-item i { color: var(--er-red); font-size: 15px; }

/* =========================================================
   TABS (Overview / Tour plan)
   ========================================================= */
.er-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  background: var(--er-soft);
  border-radius: 40px;
  margin: 26px 0 22px;
  max-width: 100%;
}

.er-tabs .er-tab {
  border: none;
  background: transparent;
  color: var(--er-ink);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 26px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .er-tabs { gap: 4px; padding: 5px; }
  .er-tabs .er-tab { padding: 9px 16px; font-size: 14px; }
}

.er-tabs .er-tab.active {
  background: var(--er-red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(232, 64, 75, 0.28);
}

.er-tab-pane { display: none; }
.er-tab-pane.active { display: block; animation: erFade 0.35s ease; }

@keyframes erFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   SECTIONS / TYPOGRAPHY
   ========================================================= */
.er-section { margin-bottom: 40px; }

.er-section-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--er-ink);
  margin-bottom: 18px;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .er-section-title { font-size: 23px; }
}

.er-rte {
  font-size: 16px;
  line-height: 1.75;
  color: var(--er-body);
}
.er-rte p { margin-bottom: 16px; }
.er-rte img { max-width: 100%; border-radius: 12px; }

.er-divider {
  height: 1px;
  background: var(--er-line);
  border: 0;
  margin: 34px 0;
}

/* =========================================================
   FEATURE BADGES (Free Cancellation, Duration ...)
   ========================================================= */
.er-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 34px;
  margin: 26px 0 4px;
}

@media (max-width: 575px) {
  .er-features { grid-template-columns: 1fr; gap: 18px; }
}

.er-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.er-feature .er-f-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--er-red-soft);
  color: var(--er-red);
  font-size: 20px;
}

.er-feature .er-f-body h6 {
  font-size: 16px;
  font-weight: 700;
  color: var(--er-ink);
  margin: 2px 0 3px;
}

.er-feature .er-f-body p {
  font-size: 14px;
  color: var(--er-muted);
  margin: 0;
  line-height: 1.5;
}

/* =========================================================
   HIGHLIGHTS / WHAT'S INCLUDED CHECK LISTS
   ========================================================= */
.er-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.er-check-list.er-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 40px;
}

@media (max-width: 767px) {
  .er-check-list.er-two-col { grid-template-columns: 1fr; }
}

.er-check-list li {
  position: relative;
  padding-left: 32px;
  font-size: 15.5px;
  color: var(--er-body);
  line-height: 1.5;
}

.er-check-list li > i {
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 19px;
}

.er-check-list li.er-yes > i { color: var(--er-green); }
.er-check-list li.er-no > i { color: #e0454f; }
.er-check-list li.er-no { color: var(--er-muted); }

/* Highlights use a filled green circle-check */
.er-highlights li > i { color: var(--er-green); }

/* =========================================================
   TOUR PLAN — accordion timeline
   ========================================================= */
.er-tourplan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 20px;
}

.er-tourplan-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--er-ink);
  margin: 0;
}

.er-expand-all {
  border: 0;
  background: transparent;
  color: var(--er-blue-ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 2px;
}
.er-expand-all:hover { text-decoration: underline; }

.er-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}

.er-acc-item {
  display: grid;
  grid-template-columns: 96px 26px 1fr;
  align-items: stretch;
}

/* Day pill (specificity raised so `.eatrav-activity span` can't grey it out) */
.eatrav-activity .er-acc-day {
  align-self: start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  padding: 9px 0;
  border-radius: 30px;
  background: var(--er-navy);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Dot + connector line column */
.er-acc-dot {
  position: relative;
}
.er-acc-dot::before {         /* connector line */
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 18px;
  bottom: -2px;
  width: 2px;
  background: var(--er-line);
}
.er-acc-item:last-child .er-acc-dot::before { display: none; }
.er-acc-dot::after {          /* red dot */
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--er-red);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--er-red-soft);
  z-index: 1;
}

/* Collapsible main */
.er-acc-main { border-bottom: 1px solid var(--er-line); }

.er-acc-head {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  text-align: left;
}

.er-acc-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--er-ink);
  line-height: 1.4;
}

/* Inline "Day 01:" prefix — hidden on desktop (navy pill shows it), shown on mobile. */
.er-acc-daytext { display: none; }

.er-acc-chevron {
  flex: 0 0 auto;
  color: var(--er-muted);
  font-size: 14px;
  transition: transform 0.3s ease;
}
.er-acc-item.open .er-acc-chevron { transform: rotate(180deg); color: var(--er-red); }

.er-acc-body {
  display: none;
  padding: 0 0 18px;
}
.er-acc-item.open .er-acc-body { display: block; }
.er-acc-body p {
  font-size: 15px;
  color: var(--er-body);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 575px) {
  /* Mobile tour plan: drop the navy day pill, fold "Day 01:" into the title,
     keep the red-dot timeline (dot column + collapsible title/chevron). */
  .er-acc-item { grid-template-columns: 24px 1fr; }
  .eatrav-activity .er-acc-day { display: none; }
  .er-acc-daytext { display: inline; }
  .er-acc-title { font-size: 15px; }
}

/* FAQ uses the shared tour-detail styles (.trv-de-list-st1 / .trv-list-st-1)
   so it matches the tour details page exactly. */

/* =========================================================
   MAP / ALERT
   ========================================================= */
.er-map iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 16px;
}

.eatrav-activity .tour-static-alert { border-radius: 14px; }

/* =========================================================
   SIDEBAR
   ========================================================= */
.eatrav-activity .side-bar { position: sticky; top: 100px; }

@media (max-width: 991px) {
  .eatrav-activity .side-bar { position: static; }
}

/* Booking card */
.eatrav-activity .booking-form-wrap {
  background: #fff !important;
  border: 1px solid var(--er-line) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 18px 44px rgba(20, 22, 26, 0.07);
  margin-bottom: 26px;
}

.eatrav-activity .booking-form-wrap > h4 {
  font-size: 19px;
  font-weight: 700;
  color: var(--er-ink);
  margin-bottom: 4px;
}

.eatrav-activity .booking-form-wrap > p {
  font-size: 13.5px;
  color: var(--er-muted);
  margin-bottom: 18px;
}

/* Tabs (Online booking / Inquiry) */
.eatrav-activity .booking-form-wrap .nav-pills {
  gap: 6px;
  background: var(--er-soft);
  padding: 5px;
  border-radius: 30px;
  margin-bottom: 22px !important;
}

.eatrav-activity .booking-form-wrap .nav-pills .nav-link {
  flex: 1;
  border-radius: 24px !important;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--er-body);
  padding: 9px 10px;
  background: transparent;
}

.eatrav-activity .booking-form-wrap .nav-pills .nav-link.active {
  background: var(--er-red) !important;
  color: #fff !important;
}

/* Group blocks + labels */
.eatrav-activity .er-bk-block {
  padding: 16px 0;
  border-top: 1px solid var(--er-line);
}
.eatrav-activity .er-bk-block:first-of-type { border-top: 0; padding-top: 4px; }

.eatrav-activity .er-bk-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--er-ink);
  margin-bottom: 12px;
  display: block;
}

.eatrav-activity .er-bk-hint {
  font-size: 13px;
  color: var(--er-muted);
  margin: 0;
}

/* Date field styled as the reference's blue pill */
.eatrav-activity .tour-date-wrap { margin-bottom: 0 !important; }
.eatrav-activity .tour-date-wrap h6 { display: none; }

.eatrav-activity .tour-date-wrap .form-inner { margin-bottom: 0 !important; }

.eatrav-activity .tour-date-wrap .form-group {
  position: relative;
  background: var(--er-blue-pill);
  border-radius: 30px;
  padding: 0;
}

/* NOTE: booking-calendar.css targets this input with an ID selector
   (`.daterange#booking-date-input`), which outranks plain classes. We match
   that specificity (class chain + the same ID) and use !important on the box
   props so the field renders as the blue pill with room for the icon instead
   of the default grey box (whose 14px padding made the date overlap the icon). */
.eatrav-activity .tour-date-wrap .form-group .daterange,
.eatrav-activity .tour-date-wrap .form-group .daterange#booking-date-input {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  height: 50px !important;
  border-radius: 30px !important;
  padding: 0 44px 0 46px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--er-blue-ink) !important;
  box-shadow: none !important;
  cursor: pointer;
}

.eatrav-activity .tour-date-wrap .form-group .daterange#booking-date-input:focus,
.eatrav-activity .tour-date-wrap .form-group .daterange#booking-date-input.active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.eatrav-activity .tour-date-wrap .form-group .daterange::placeholder {
  color: var(--er-blue-ink);
  opacity: 0.85;
}

.eatrav-activity .tour-date-wrap .form-group > svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  fill: var(--er-blue-ink);
  pointer-events: none;
}

.eatrav-activity .tour-date-wrap .form-group:after {
  content: "\F282";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--er-blue-ink);
  font-size: 14px;
  pointer-events: none;
}

/* Departure time / meeting-point-style radio list */
.eatrav-activity .tour-time-wrap { margin-bottom: 0 !important; }
.eatrav-activity .tour-time-wrap h6 { display: none; }

.eatrav-activity .tour-time-options { gap: 10px !important; flex-direction: column; }

.eatrav-activity .time-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--er-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-body);
}

.eatrav-activity .time-option:hover { border-color: var(--er-red); }

.eatrav-activity .time-option input[type="radio"] {
  accent-color: var(--er-red);
  width: 17px;
  height: 17px;
  margin: 0;
}

.eatrav-activity .time-option:has(input:checked) {
  border-color: var(--er-red);
  background: var(--er-red-soft);
}

.eatrav-activity .time-option:has(input:checked) span { color: var(--er-ink); font-weight: 600; }

/* Tickets — quantity counters */
.eatrav-activity .number-input-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.eatrav-activity .number-input-lable {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--er-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.eatrav-activity .number-input-lable .sprice,
.eatrav-activity .number-input-lable .mainPriceText,
.eatrav-activity .number-input-lable .cprice { color: var(--er-red); font-weight: 700; }

.eatrav-activity .number-input-lable .rprice {
  color: var(--er-muted);
  font-weight: 500;
  font-size: 13px;
}

.eatrav-activity .quantity-counter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--er-line);
  border-radius: 30px;
  padding: 3px;
}

.eatrav-activity .quantity-counter a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--er-ink);
  background: var(--er-soft);
  transition: all 0.2s ease;
  text-decoration: none;
}

.eatrav-activity .quantity-counter a:hover { background: var(--er-red); color: #fff; }

.eatrav-activity .quantity-counter .quantity__input {
  width: 34px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 700;
  color: var(--er-ink);
  font-size: 14px;
  padding: 0;
}

/* Add Extra — checkboxes */
.eatrav-activity .booking-form-item-type h5 {
  font-size: 15px;
  font-weight: 700;
  color: var(--er-ink);
  margin-bottom: 12px;
}

.eatrav-activity .checkbox-container { display: flex; flex-direction: column; gap: 4px; }

.eatrav-activity .check-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  padding-left: 30px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--er-ink);
  cursor: pointer;
  user-select: none;
}

.eatrav-activity .check-container input { position: absolute; opacity: 0; height: 0; width: 0; }

.eatrav-activity .check-container .checkmark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  border: 2px solid var(--er-line);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.eatrav-activity .check-container:hover .checkmark { border-color: var(--er-red); }

.eatrav-activity .check-container input:checked ~ .checkmark {
  background: var(--er-red);
  border-color: var(--er-red);
}

.eatrav-activity .check-container input:checked ~ .checkmark:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.eatrav-activity .check-container .price {
  margin-left: auto;
  font-weight: 700;
  color: var(--er-ink);
  font-size: 14px;
}

/* Receipt breakdown */
.eatrav-activity #booking-receipt-breakdown { margin-top: 4px; }

.eatrav-activity .single-total {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  margin: 0 !important;
  border-top: 1px dashed var(--er-line);
}

.eatrav-activity .single-total .title {
  font-size: 13px;
  font-weight: 700;
  color: var(--er-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.eatrav-activity .single-total ul {
  display: flex;
  align-items: center;
  gap: 8px !important;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--er-body);
}

.eatrav-activity .single-total ul li { display: flex; align-items: center; gap: 6px; }
.eatrav-activity .single-total svg { display: none; }
.eatrav-activity .single-total .total { margin-left: auto; }
.eatrav-activity .single-total .total span { font-weight: 700; color: var(--er-ink); }

/* Total row */
.eatrav-activity .total-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 18px;
  padding: 18px 0 4px;
  border-top: 2px solid var(--er-line);
  font-size: 18px;
  font-weight: 700;
  color: var(--er-ink);
}

.eatrav-activity .total-price .me-3 { margin: 0 !important; }
.eatrav-activity .total-price .total_amount_show { color: var(--er-red); font-size: 22px; }

/* Book now / primary buttons */
.eatrav-activity .primary-btn1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 30px !important;
  background: var(--er-red);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 20px;
  transition: background 0.25s ease, transform 0.1s ease;
  cursor: pointer;
}

.eatrav-activity .primary-btn1:hover { background: var(--er-red-dark); color: #fff; }
.eatrav-activity .primary-btn1:active { transform: translateY(1px); }
.eatrav-activity .primary-btn1[disabled],
.eatrav-activity .primary-btn1.disabled { opacity: 0.55; cursor: not-allowed; }

/* Availability info */
.eatrav-activity #availability-info .mb-4 {
  margin: 10px 0 0 !important;
  font-size: 14px;
  color: var(--er-body);
}

/* =========================================================
   TOP RATED WIDGET
   ========================================================= */
.er-widget {
  background: #fff;
  border: 1px solid var(--er-line);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 26px;
}

.er-widget-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--er-ink);
  margin-bottom: 16px;
}

.er-rated-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--er-line);
  text-decoration: none;
}
.er-rated-item:first-of-type { border-top: 0; padding-top: 0; }

.er-rated-item .er-rated-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--er-soft);
}

.er-rated-item .er-rated-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.er-rated-item .er-rated-body { min-width: 0; }

.er-rated-item .er-rated-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--er-ink);
  line-height: 1.35;
  margin: 2px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.er-rated-item:hover .er-rated-name { color: var(--er-red); }

.er-rated-item .er-rated-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--er-red);
}

.er-rated-item .er-rated-price s {
  color: var(--er-muted);
  font-weight: 500;
  font-size: 13px;
  margin-left: 6px;
}

/* =========================================================
   MOBILE — the inline sidebar booking card carries `.desktop-booking`, so
   the template hides it below 992px; booking happens through the fixed
   bottom bar + slide-up modal instead. (The JS moves #booking-form-container
   into the modal, where it becomes visible again.)
   ========================================================= */
@media (max-width: 991.98px) {
  /* Clear space so the fixed bottom booking bar never overlaps the last
     content (Top Rated / support banner / footer). */
  .eatrav-activity .section-full { padding-bottom: 130px; }
}

/* Bottom-bar CTA stays full width like the rest of the template. */
.eatrav-activity .mobile-booking-button .primary-btn1 { width: 100%; }