/* v2025-08-17F — ReelStep Sidebar (final, designed)
   Scope: single Destination page
   Targets: STI (.travel-info / .cost-list)
            LI  (.rs-local-insights / .local-insights / .rs-li / [data-rs-li])
   Goals:
   - Light, elegant gradient pane behind text (not harsh)
   - One clean border
   - Comfortable inner padding so text breathes
   - No inner boxes or extra borders
   - Readable dark text
   - No :has / :is
*/

/* ============== Titles (clean, consistent) ============== */
body.single-destination #secondary .widget_text .widget-title,
body.single-destination .destination-sidebar .widget_text .widget-title {
  color: #173b6c;
  font-weight: 700;
  margin: 0 0 .45rem 0;
  padding: 0 0 .3rem 0;
  border-bottom: 1px solid #d9e6ff;
}

/* ============== STI (Shared Travel Info) ============== */
/* Top-level bodies only */
body.single-destination #secondary .widget_text .textwidget>.travel-info,
body.single-destination #secondary .widget_text .textwidget>.cost-list,
body.single-destination .destination-sidebar .widget_text .textwidget>.travel-info,
body.single-destination .destination-sidebar .widget_text .textwidget>.cost-list {
  /* Subtle, visible pastel gradient — edit only the middle HEX to make darker/lighter */
  background: linear-gradient(160deg, #ffffff 0%, #f0f7ff 35%, #ffffff 100%) !important;
  border: 1px solid #c9dcff !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  /* ← breathing room for text */
  margin: .7rem 0 1.1rem 0 !important;
  box-shadow: 0 4px 10px rgba(14, 30, 72, 0.08) !important;
  color: #0f223a !important;
  /* readable dark text */
}

/* Remove any nested boxes/borders inside STI so the pane stays clean */
body.single-destination #secondary .widget_text .textwidget>.travel-info *,
body.single-destination #secondary .widget_text .textwidget>.cost-list *,
body.single-destination .destination-sidebar .widget_text .textwidget>.travel-info *,
body.single-destination .destination-sidebar .widget_text .textwidget>.cost-list * {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #0f223a !important;
}

/* ============== LI (Local Insights) ============== */
body.single-destination #secondary .widget_text .textwidget>.rs-local-insights,
body.single-destination #secondary .widget_text .textwidget>.local-insights,
body.single-destination #secondary .widget_text .textwidget>.rs-li,
body.single-destination #secondary .widget_text .textwidget>[data-rs-li],
body.single-destination .destination-sidebar .widget_text .textwidget>.rs-local-insights,
body.single-destination .destination-sidebar .widget_text .textwidget>.local-insights,
body.single-destination .destination-sidebar .widget_text .textwidget>.rs-li,
body.single-destination .destination-sidebar .widget_text .textwidget>[data-rs-li] {
  background: linear-gradient(160deg, #ffffff 0%, #f0f7ff 35%, #ffffff 100%) !important;
  border: 1px solid #c9dcff !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  margin: .7rem 0 1.1rem 0 !important;
  box-shadow: 0 4px 10px rgba(14, 30, 72, 0.08) !important;
  color: #0f223a !important;
}

/* Remove any nested boxes/borders inside LI */
body.single-destination #secondary .widget_text .textwidget>.rs-local-insights *,
body.single-destination #secondary .widget_text .textwidget>.local-insights *,
body.single-destination #secondary .widget_text .textwidget>.rs-li *,
body.single-destination #secondary .widget_text .textwidget>[data-rs-li] *,
body.single-destination .destination-sidebar .widget_text .textwidget>.rs-local-insights *,
body.single-destination .destination-sidebar .widget_text .textwidget>.local-insights *,
body.single-destination .destination-sidebar .widget_text .textwidget>.rs-li *,
body.single-destination .destination-sidebar .widget_text .textwidget>[data-rs-li] * {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #0f223a !important;
}

/* ============== Comfortable lists/links inside both panes ============== */
body.single-destination #secondary .widget_text .textwidget .travel-info ul,
body.single-destination #secondary .widget_text .textwidget .cost-list ul,
body.single-destination #secondary .widget_text .textwidget .rs-local-insights ul,
body.single-destination #secondary .widget_text .textwidget .local-insights ul,
body.single-destination #secondary .widget_text .textwidget .rs-li ul,
body.single-destination #secondary .widget_text .textwidget [data-rs-li] ul {
  margin: .35rem 0 0 1rem !important;
}

body.single-destination #secondary .widget_text .textwidget .travel-info li,
body.single-destination #secondary .widget_text .textwidget .cost-list li,
body.single-destination #secondary .widget_text .textwidget .rs-local-insights li,
body.single-destination #secondary .widget_text .textwidget .local-insights li,
body.single-destination #secondary .widget_text .textwidget .rs-li li,
body.single-destination #secondary .widget_text .textwidget [data-rs-li] li {
  margin: .25rem 0 !important;
}

body.single-destination #secondary .widget_text .textwidget .travel-info a,
body.single-destination #secondary .widget_text .textwidget .cost-list a,
body.single-destination #secondary .widget_text .textwidget .rs-local-insights a,
body.single-destination #secondary .widget_text .textwidget .local-insights a,
body.single-destination #secondary .widget_text .textwidget .rs-li a,
body.single-destination #secondary .widget_text .textwidget [data-rs-li] a {
  text-decoration: underline;
}

/* ============== Mobile ============== */
@media (max-width: 768px) {

  body.single-destination #secondary .widget_text .textwidget>.travel-info,
  body.single-destination #secondary .widget_text .textwidget>.cost-list,
  body.single-destination #secondary .widget_text .textwidget>.rs-local-insights,
  body.single-destination #secondary .widget_text .textwidget>.local-insights,
  body.single-destination #secondary .widget_text .textwidget>.rs-li,
  body.single-destination #secondary .widget_text .textwidget>[data-rs-li],
  body.single-destination .destination-sidebar .widget_text .textwidget>.travel-info,
  body.single-destination .destination-sidebar .widget_text .textwidget>.cost-list,
  body.single-destination .destination-sidebar .widget_text .textwidget>.rs-local-insights,
  body.single-destination .destination-sidebar .widget_text .textwidget>.local-insights,
  body.single-destination .destination-sidebar .widget_text .textwidget>.rs-li,
  body.single-destination .destination-sidebar .widget_text .textwidget>[data-rs-li] {
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-shadow: 0 3px 8px rgba(14, 30, 72, 0.08) !important;
  }
}

/* ==== ReelStep — Single Destination sidebar/layout fixes ==== */

/* A) Header top gap (single destination only) */
body.single-destination .site-header,
body.single-destination .ct-header,
body.single-destination .ct-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* B) Tighten space between featured video and sidebar */
body.single-destination .destination-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px !important;
}

body.single-destination .destination-featured-video,
body.single-destination .destination-sidebar {
  margin: 0 !important;
}

body.single-destination .ct-main-content {
  column-gap: 14px !important;
  grid-column-gap: 14px !important;
}

body.single-destination .ct-sidebar,
body.single-destination .destination-sidebar {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

@media (min-width:1024px) {

  body.single-destination .destination-wrap,
  body.single-destination .ct-main-content {
    gap: 16px !important;
    column-gap: 16px !important;
    grid-column-gap: 16px !important;
  }
}

@media (max-width:767.98px) {
  body.single-destination .destination-wrap {
    gap: 12px !important;
  }
}

/* C) STI (Arrival Essentials / Travel Info) — text spacing only (LI untouched) */
body.single-destination .travel-info p,
body.single-destination .travel-info li {
  margin: 0 0 .6rem 0 !important;
  line-height: 1.5;
}

body.single-destination .travel-info h4 {
  margin: 0 0 .5rem 0 !important;
  font-weight: 600;
  color: #173b6c;
}

body.single-destination .travel-info ul {
  margin: 0 !important;
  padding-left: 1.2rem;
}

/* ==== STI (Arrival Essentials) — hard normalize text margins ==== */

/* Scope precisely to the STI widget in the sidebar on single Destination */
body.single-destination #secondary .widget_text .travel-info {
  line-height: 1.5;
}

/* The UL itself */
body.single-destination #secondary .widget_text .travel-info ul.cost-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill all inline margins on <li> and control spacing ourselves */
body.single-destination #secondary .widget_text .travel-info ul.cost-list>li,
body.single-destination #secondary .widget_text .travel-info ul.cost-list>li[style],
body.single-destination #secondary .widget_text .travel-info ul.cost-list>li[style*="margin"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Space BETWEEN items only (cleaner than per-<p> margins) */
body.single-destination #secondary .widget_text .travel-info ul.cost-list>li+li {
  margin-top: .6rem !important;
}

/* Remove default <p> margins inside each item */
body.single-destination #secondary .widget_text .travel-info ul.cost-list>li>p {
  margin: 0 !important;
}

/* Keep labels tight and inline */
body.single-destination #secondary .widget_text .travel-info strong {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
}

/* No extra space after the last item */
body.single-destination #secondary .widget_text .travel-info ul.cost-list>li:last-child {
  margin-bottom: 0 !important;
}

.more-videos {
  margin: 1.5rem 0;
}

.more-videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.more-videos-grid .video-item {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: #333;
  text-decoration: none;
}

.more-videos-grid img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 6px;
}