/* ---- Variables ---- */
:root {
--ep-primary:   #000000;
--ep-secondary: #17C2AC;
--ep-accent:    #17C2AC;
--ep-text:      #000000;
--ep-muted:     #1A1A1A;
--ep-border:    #e5e5e5;
--ep-bg:        #F7F7F7;
--ep-white:     #fff;
--fioxen-heading-font-family: 'Lato';
--ep-radius:    6px;
--ep-shadow:    0 2px 12px rgba(0,0,0,.08);
--ep-shadow-hover: 0 6px 24px rgba(0,0,0,.14);
--ep-transition: all .25s ease;
}

/* ---- Wrapper ---- */
.ep-listing-wrap { position: relative; }
.ep-no-results { padding: 2rem; text-align: center; color: var(--ep-muted); font-style: italic; }

/* ---- Layout Switcher ---- */
.ep-layout-controls {
  display: inline-flex;
  gap: 4px;
}
/* Standalone (not inside lt_results-sorting) */
.ep-listing-wrap > .ep-layout-controls {
  margin-bottom: 16px;
  justify-content: flex-end;
  width: 100%;
}
/* Inside lt_results-sorting â€” float right to mirror theme bar */
.lt_results-sorting .ep-layout-controls {
  float: right;
  margin: 0 0 0 10px;
}
.ep-layout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: 6px;
  cursor: pointer;
  color: var(--ep-muted, #777);
  font-size: 16px;
  line-height: 1;
  transition: var(--ep-transition);
}
.ep-layout-btn.active,
.ep-layout-btn:hover {
  background: var(--ep-primary, #2c5d8f);
  border-color: var(--ep-primary, #2c5d8f);
  color: #fff;
}
.ep-layout-btn i { font-size: 16px; }
.ep-layout-btn .dashicons { vertical-align: middle; font-size: 16px; width: 16px; height: 16px; }

/* ---- Grid layout â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   Fioxen's block-grid is FLOAT-based (template.css):
     [class*="block-grid-"] { display:block; margin:0 -15px }
     .lg-block-grid-N > div  { width:X%; float:left; padding:0 15px }
   Setting display:grid here overrides that and causes items to render at
   ~1/9 of their correct width.  Strategy: clearfix only + fallback widths. */
.ep-items.ep-layout-grid::before,
.ep-items.ep-layout-grid::after { display: table; content: " "; }
.ep-items.ep-layout-grid::after { clear: both; }

/* Fallback widths â€” mirror Fioxen's lg-block-grid-N values */
.ep-items.ep-layout-grid.ep-col-2 .listing-block-item { width: 50%; }
.ep-items.ep-layout-grid.ep-col-3 .listing-block-item { width: 33.33333%; }
.ep-items.ep-layout-grid.ep-col-4 .listing-block-item { width: 25%; }
.ep-items.ep-layout-grid .listing-block-item          { margin-bottom: 24px; }
@media (max-width: 1024px) {
  .ep-items.ep-layout-grid.ep-col-3 .listing-block-item,
  .ep-items.ep-layout-grid.ep-col-4 .listing-block-item { width: 50%; }
}
@media (max-width: 600px) {
  .ep-items.ep-layout-grid .listing-block-item { width: 100% !important; float: none; }
}

/* ---- Masonry: CSS columns (same display:block as block-grid) ---- */
.ep-items.ep-layout-masonry { display: block; column-gap: 24px; }
.ep-items.ep-layout-masonry.ep-col-2 { columns: 2; }
.ep-items.ep-layout-masonry.ep-col-3 { columns: 3; }
.ep-items.ep-layout-masonry.ep-col-4 { columns: 4; }
/* Override block-grid float so CSS columns can work */
.ep-items.ep-layout-masonry .listing-block-item { float: none !important; width: auto !important; break-inside: avoid; margin-bottom: 24px; }
@media (max-width: 1024px) { .ep-items.ep-layout-masonry { columns: 2 !important; } }
@media (max-width: 600px)  { .ep-items.ep-layout-masonry { columns: 1 !important; } }

/* ---- List layout: full-width stacked ---- */
.ep-items.ep-layout-list::before,
.ep-items.ep-layout-list::after { display: table; content: " "; }
.ep-items.ep-layout-list::after { clear: both; }
.ep-items.ep-layout-list .listing-block-item { width: 100% !important; float: none; margin-bottom: 12px; }

/* ---- Date badge (events â€” positioned over listing-image) ---- */
.ep-date-badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: var(--ep-primary);
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.2;
  pointer-events: none;
}
.ep-date-month { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.ep-date-day   { display: block; font-size: 22px; font-weight: 700; }

/* Date badge in list view (inside listing-image, left-aligned) */
.ep-date-list {
  position: absolute;
  top: 12px; left: 12px;
  right: auto;
}

/* ----------------------------------------------------------------
   CARD IMAGE & LOGO â€” .listing-block is the real card wrapper
   (generated by post_class('listing-block') in grid.php).
   Fioxen's template.css styles the container but NOT the <img>
   dimensions â€” we fill that gap here.
   ---------------------------------------------------------------- */
.listing-block .listing-image { position: relative; overflow: hidden; }

/* â”€â”€ Main card thumbnail â€” .ep-listing-img class added in template â”€â”€
   !important overrides any inline width/height attrs that Google proxy
   images carry (e.g. width="287" from the API photo URL).              */
.listing-block .listing-image .ep-listing-img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .4s ease;
}
.listing-block:hover .listing-image .ep-listing-img { transform: scale(1.04); }

/* Masonry card */
.listing-block-2 .listing-image .ep-listing-img {
  height: auto !important;
  max-height: 240px !important;
}

/* List layout: narrow horizontal thumbnail */
.ep-layout-list .listing-block .listing-image .ep-listing-img,
.ep-layout-list .listing-block-2 .listing-image .ep-listing-img {
  width: 180px !important;
  height: 140px !important;
}

/* â”€â”€ Logo circle (45Ã—45 from Fioxen CSS, position:absolute top-right) â”€â”€ */
.listing-block .listing-image .listing-logo img,
.listing-block-2 .listing-image .listing-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* lt-meta-top: uses Elementor's --e-global-color-secondary for its background.
   Provide a safe fallback so the strip still shows when Elementor isn't active. */
.ep-listing-wrap .listing-block .listing-content .lt-meta-top {
  background: var(--e-global-color-secondary, var(--ep-primary, #2c5d8f));
}

/* ---- Ensure hidden map data divs stay invisible ---- */
.listing-data,
.listing-data.d-none,
.listing-data.hidden { display: none !important; }

/* ---- Star rating ---- */
.lt-avg-review { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
.lt-avg-review .rating { display: inline-flex; gap: 2px; }
.lt-avg-review .rating i { font-size: 13px; color: #ccc; }
.lt-avg-review .rating i.active { color: var(--ep-secondary, #f0a500); }
.ep-rating-number { font-size: 13px; font-weight: 700; color: var(--ep-text); }

/* ---- Price-tag overlay on listing image top ---- */
.listing-block .listing-image .lt-top {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  pointer-events: none;
}
.listing-block .listing-image .lt-top .price {
  display: inline-block;
  background: var(--ep-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}
.listing-block .listing-image .lt-top .price small {
  font-weight: 400;
  font-size: 11px;
  margin-left: 2px;
}

/* ---- Single post rating ---- */
.ep-single-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ep-single-rating .rating i { font-size: 16px; color: #ccc; }
.ep-single-rating .rating i.active { color: var(--ep-secondary, #f0a500); }
.ep-single-rating span { font-size: 15px; font-weight: 600; color: var(--ep-muted); }

/* ---- Single taxonomy pills ---- */
.ep-single-taxes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ep-single-taxes .cat-item {
  font-size: 12px;
  padding: 3px 10px;
  background: var(--ep-bg);
  border: 1px solid var(--ep-border);
  border-radius: 20px;
  color: var(--ep-primary);
  text-decoration: none;
}
.ep-single-taxes .cat-item:hover { background: var(--ep-primary); color: #fff; border-color: var(--ep-primary); }

/* ---- Btn sizes ---- */
.btn-theme.btn-sm { font-size: 12px; padding: 4px 12px; }
.btn-theme.btn-action { min-width: 120px; }

/* ---- Amenities bar (plugin-specific, theme has no equivalent) ---- */
.ep-amenities-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.ep-amenity-tag {
  background: var(--ep-bg);
  color: var(--ep-muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--ep-border);
}
.ep-amenity-more { font-size: 11px; color: var(--ep-primary); padding: 2px 6px; }
.ep-amenities-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ep-amenity-item { background: var(--ep-bg); border: 1px solid var(--ep-border); padding: 6px 14px; border-radius: 20px; font-size: 13px; }

/* ---- Search form â€” supplement theme's lt-listing-search-form ---- */
/* The theme handles the core styling; we only add what's missing */
.lt-listing-search-form .search_price .content-inner { position: relative; }
.lt-listing-search-form input[type="number"] {
  width: 100%;
  padding-left: 28px;
}

/* ---- Secondary button (Book Now / Get Tickets) ---- */
.btn-theme.btn-border {
  background: transparent;
  border: 2px solid currentColor;
}
.btn-theme.btn-border:hover { background: var(--ep-primary); border-color: var(--ep-primary); color: #fff; }
.ml-5 { margin-left: 5px; }

/* ---- Map Layout ---- */
.ep-map-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  overflow: hidden;
  height: 520px;
}
.ep-map-sidebar { overflow-y: auto; background: var(--ep-white); border-right: 1px solid var(--ep-border); }
.ep-map-sidebar-inner,
.ep-map-listing-wrap { padding: 12px; }
.ep-map-canvas { width: 100%; height: 100%; min-height: 400px; background: var(--ep-bg); }
.ep-map-single { border-radius: var(--ep-radius); overflow: hidden; }

.ep-map-card { display: flex; gap: 10px; padding: 10px; border-bottom: 1px solid var(--ep-border); cursor: pointer; transition: background .2s; }
.ep-map-card:hover { background: var(--ep-bg); }
.ep-map-card.is-active { background: #eaf2fb; }
.ep-map-card img { width: 70px; height: 55px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.ep-map-card-body h4 { font-size: 13px; margin: 0 0 4px; }
.ep-map-card-body h4 a { color: var(--ep-text); text-decoration: none; }
.ep-map-card-body p  { font-size: 12px; color: var(--ep-muted); margin: 0; }

@media (max-width: 768px) {
  .ep-map-layout { grid-template-columns: 1fr; height: auto; }
  .ep-map-canvas { height: 340px; }
  .ep-map-sidebar { max-height: 260px; }
}

/* ---- Leaflet popup — full styles further down near line ~5070 ---- */

/* ---- Calendar ---- */
.ep-calendar-wrap { margin-bottom: 28px; }
.ep-calendar { background: var(--ep-white); border: 1px solid var(--ep-border); border-radius: var(--ep-radius); overflow: hidden; }
.ep-calendar-header { display: flex; align-items: center; justify-content: space-between; background: var(--ep-primary); color: #fff; padding: 12px 18px; }
.ep-cal-title { font-size: 16px; font-weight: 600; }
.ep-cal-nav { color: #fff; text-decoration: none; font-size: 18px; padding: 0 8px; }
.ep-cal-nav:hover { opacity: .7; }
.ep-cal-table { width: 100%; border-collapse: collapse; }
.ep-cal-table th { text-align: center; padding: 8px; font-size: 12px; font-weight: 600; color: var(--ep-muted); text-transform: uppercase; }
.ep-cal-table td { vertical-align: top; padding: 6px 8px; border-top: 1px solid var(--ep-border); min-height: 70px; font-size: 13px; }
.ep-cal-today .ep-cal-num { background: var(--ep-primary); color: #fff; border-radius: 50%; width: 24px; height: 24px; line-height: 24px; display: inline-block; text-align: center; }
.ep-cal-has-events .ep-cal-num { color: var(--ep-primary); font-weight: 700; }
.ep-cal-event-title { display: block; font-size: 11px; background: var(--ep-primary); color: #fff; border-radius: 6px; padding: 1px 4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ep-cal-event-title:hover { background: var(--ep-secondary); color: #fff; }
.ep-cal-empty { background: var(--ep-bg); }

/* ---- Pagination ---- */
.ep-pagination { margin-top: 28px; text-align: center; }
.ep-pagination ul { list-style: none; display: inline-flex; gap: 4px; margin: 0; padding: 0; }
.ep-pagination li a,
.ep-pagination li span.page-numbers { display: inline-block; padding: 7px 13px; border: 1px solid var(--ep-border); border-radius: 6px; font-size: 14px; text-decoration: none; color: var(--ep-text); transition: var(--ep-transition); }
.ep-pagination li span.current,
.ep-pagination li a:hover { background: var(--ep-primary); border-color: var(--ep-primary); color: #fff; }

/* ---- Archive header ---- */
.ep-archive-header { margin-bottom: 24px; }
.ep-archive-title  { font-size: 28px; font-weight: 700; margin-bottom: 6px; }

/* ---- Single Event / Lodging ---- */
.ep-single-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; }
@media (max-width: 900px) { .ep-single-grid { grid-template-columns: 1fr; } }
.ep-single-image { margin-bottom: 20px; border-radius: var(--ep-radius); overflow: hidden; }
.ep-single-image img { width: 100%; height: auto; display: block; }
.ep-single-title { font-size: 30px; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.ep-single-meta-bar { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 20px; padding: 14px 18px; background: var(--ep-bg); border-radius: var(--ep-radius); }
.ep-meta-block { display: flex; flex-direction: column; }
.ep-meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ep-muted); font-weight: 600; }
.ep-meta-value { font-size: 15px; font-weight: 500; color: var(--ep-text); }
.ep-meta-value.ep-price { color: var(--ep-primary); font-size: 18px; font-weight: 700; }
.ep-single-description { margin-bottom: 24px; line-height: 1.7; }
.ep-single-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ep-amenities-section { margin-bottom: 24px; }
.ep-amenities-section h3 { font-size: 18px; margin-bottom: 12px; }
.ep-single-sidebar { display: flex; flex-direction: column; gap: 20px; }
.ep-sidebar-card { background: var(--ep-white); border: 1px solid var(--ep-border); border-radius: var(--ep-radius); padding: 18px; }
.ep-sidebar-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ep-border); }
.ep-sidebar-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 14px; color: var(--ep-text); }
.ep-sidebar-row a { color: var(--ep-primary); text-decoration: none; }
.ep-sidebar-row a:hover { text-decoration: underline; }

/* ---- Image Gallery ---- */
.ep-gallery { margin-bottom: 28px; }
.ep-gallery h3 { font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.ep-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ep-gallery-item { display: block; border-radius: var(--ep-radius); overflow: hidden; aspect-ratio: 4/3; background: var(--ep-bg); }
.ep-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--ep-transition); }
.ep-gallery-item:hover img { transform: scale(1.04); }
@media (max-width: 600px) { .ep-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- AJAX loading state â€” pure-CSS overlay (no gif dependency) ---- */
@keyframes ep-fade-pulse { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes ep-grid-spin  { to{transform:rotate(360deg)} }

/* Dim the wrap during load */
.ep-listing-wrap.ep-loading { pointer-events: none; }

/* Skeleton card shimmer */
.ep-skeleton-item .ep-skeleton-card {
  background: #fff;
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: var(--ep-radius, 8px);
  overflow: hidden;
}
.ep-skeleton-img {
  width: 100%; height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: ep-shimmer 1.4s infinite linear;
}
@keyframes ep-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ep-skeleton-body { padding: 16px; }
.ep-skeleton-line {
  height: 12px; border-radius: 6px; margin-bottom: 10px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: ep-shimmer 1.4s infinite linear;
}
.ep-skeleton-line--title  { width: 70%; height: 16px; }
.ep-skeleton-line--wide   { width: 85%; }
.ep-skeleton-line--med    { width: 60%; }
.ep-skeleton-line--short  { width: 40%; margin-bottom: 0; }

/* Centre-spinner that shows when items container is emptied for a reload */
.ep-items.ep-items-loading {
  min-height: 260px;
  display: flex !important;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* ====================================================================
   EP Lodging Showcase widget â€” real ep_lodging data in Fioxen's
   gsc-listing-banner style-1 cards
   ==================================================================== */
.ep-lodging-showcase { display: flex; flex-wrap: wrap; gap: 0; width: 100%; }
.ep-showcase-col { flex: 0 0 auto; }
.ep-showcase-cols-2 .ep-showcase-col { width: 50%; }
.ep-showcase-cols-3 .ep-showcase-col { width: 33.3333%; }
.ep-showcase-cols-4 .ep-showcase-col { width: 25%; }
.ep-showcase-cols-5 .ep-showcase-col { width: 20%; }
.ep-lodging-showcase .gsc-listing-banner { height: 100%; }
.ep-lodging-showcase .banner-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.ep-showcase-price { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: #fff; }
.ep-showcase-price small { font-weight: 400; font-size: 11px; }
.ep-showcase-feat { position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--ep-secondary, #f0a500); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 3px 8px; border-radius: 6px; }
@media (max-width: 1199px) { .ep-showcase-cols-5 .ep-showcase-col { width: 25%; } }
@media (max-width: 991px)  { .ep-showcase-cols-4 .ep-showcase-col, .ep-showcase-cols-5 .ep-showcase-col { width: 33.3333%; } }
@media (max-width: 767px)  { .ep-showcase-cols-3 .ep-showcase-col, .ep-showcase-cols-4 .ep-showcase-col, .ep-showcase-cols-5 .ep-showcase-col { width: 50%; } }
@media (max-width: 480px)  { .ep-showcase-col { width: 100% !important; } }

/* =====================================================================
   EP DETAIL PAGE â€” Single Event & Single Lodging
   Hero banner â†’ 2-column grid (content + sticky sidebar)
   ===================================================================== */

/* ---- Article wrapper ---- */
.ep-single { display: block; }

/* ===========================================================
   HERO BANNER
   =========================================================== */
.ep-detail-hero {
  position: relative;
  min-height: 420px;
  background-color: #1a2e44;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
}
.ep-detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.20) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.80) 100%
  );
  display: flex;
  align-items: flex-end;
  width: 100%;
}
.ep-detail-hero-inner {
  position: relative;
  padding: 52px 0 42px;
  width: 100%;
}

/* Breadcrumb */
.ep-breadcrumb-hero {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}
.ep-breadcrumb-hero a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color .2s;
}
.ep-breadcrumb-hero a:hover { color: #fff; }
.ep-breadcrumb-hero > span { color: rgba(255,255,255,.45); }

/* Category badges row in hero */
.ep-hero-cats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ep-hero-cats a,
.ep-hero-cats .cat-item {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 3px 11px;
  border-radius: 20px;
  background: var(--ep-primary, #2c5d8f);
  color: #fff !important;
  text-decoration: none !important;
  transition: background .2s;
}
.ep-hero-cats a:hover { background: var(--ep-secondary, #f0a500); }

.ep-hero-cats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}
.ep-hero-cats-row a,
.ep-hero-cats-row .cat-item {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 3px 11px;
  border-radius: 20px;
  background: var(--ep-primary, #2c5d8f);
  color: #fff !important;
  text-decoration: none !important;
  transition: background .2s;
}
.ep-hero-cats-row a:hover { background: var(--ep-secondary, #f0a500); }

/* Featured badge */
.ep-featured-badge-hero {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 3px 11px;
  border-radius: 20px;
  background: var(--ep-secondary, #f0a500);
  color: #fff;
}

/* Hero title */
.ep-detail-title {
  color: #fff;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 16px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* Hero meta row */
.ep-hero-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
}
.ep-hero-meta-row > div {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
}
.ep-hero-meta-row > div i {
  color: var(--ep-secondary, #f0a500);
  font-size: 14px;
  flex-shrink: 0;
}
/* Rating inside hero meta row inherits white text */
.ep-hero-rating .rating i        { color: rgba(255,255,255,.35); }
.ep-hero-rating .rating i.active { color: var(--ep-secondary, #f0a500); }
.ep-hero-rating .ep-rating-number { color: rgba(255,255,255,.9); font-size: 13px; font-weight: 700; }

/* Event date badge (top-right corner of hero inner) */
.ep-hero-date-badge {
  position: absolute;
  top: 24px;
  right: 0;
  background: var(--ep-secondary, #f0a500);
  color: #fff;
  text-align: center;
  padding: 10px 18px;
  border-radius: 8px 0 0 8px;
  line-height: 1.1;
  box-shadow: -3px 3px 14px rgba(0,0,0,.25);
}
.ep-hero-date-badge .ep-date-month {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 700;
}
.ep-hero-date-badge .ep-date-day {
  display: block;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

/* ===========================================================
   DETAIL CONTAINER & 2-COLUMN GRID
   =========================================================== */
.ep-detail-container {
  padding-top: 40px;
  padding-bottom: 64px;
}
.ep-detail-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1100px) {
  .ep-detail-grid { grid-template-columns: 1fr 300px; gap: 24px; }
}
@media (max-width: 860px) {
  .ep-detail-grid { grid-template-columns: 1fr; gap: 0; }
  .ep-detail-sidebar { order: -1; margin-bottom: 28px; }
}

/* ===========================================================
   META BAR STRIP
   =========================================================== */
.ep-detail-meta-bar {
  display: flex;
  flex-wrap: wrap;
  background: var(--ep-white, #fff);
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: var(--ep-radius, 8px);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--ep-shadow, 0 2px 12px rgba(0,0,0,.08));
}
.ep-meta-block-alt {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  padding: 14px 20px;
  border-right: 1px solid var(--ep-border, #e5e5e5);
}
.ep-meta-block-alt:last-child { border-right: none; }
.ep-meta-block-alt .ep-meta-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--ep-muted, #777);
  font-weight: 700;
  margin-bottom: 5px;
}
.ep-meta-block-alt .ep-meta-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ep-text, #333);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.ep-meta-block-alt .ep-price-big {
  font-size: 21px;
  font-weight: 800;
  color: var(--ep-primary, #2c5d8f);
}
@media (max-width: 600px) {
  .ep-meta-block-alt { flex: 1 1 45%; border-bottom: 1px solid var(--ep-border, #e5e5e5); }
  .ep-meta-block-alt:nth-last-child(-n+2):not(:has(~ .ep-meta-block-alt)) { border-bottom: none; }
}

/* ===========================================================
   CONTENT SECTIONS (card style)
   =========================================================== */
.ep-detail-section {
  background: var(--ep-white, #fff);
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: var(--ep-radius, 8px);
  padding: 26px 28px 24px;
  margin-bottom: 24px;
  box-shadow: var(--ep-shadow, 0 2px 12px rgba(0,0,0,.08));
}
.ep-detail-section:last-child { margin-bottom: 0; }
.ep-detail-section h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ep-border, #e5e5e5);
  color: var(--ep-text, #333);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ep-detail-section h2 i {
  color: var(--ep-primary, #2c5d8f);
  font-size: 16px;
}
.ep-detail-description {
  line-height: 1.8;
  color: var(--ep-text, #333);
  font-size: 15px;
}
.ep-detail-description p { margin-bottom: 14px; }
.ep-detail-description p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .ep-detail-section { padding: 18px 16px 16px; }
}

/* ===========================================================
   PHOTO GALLERY
   =========================================================== */
.ep-detail-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ep-gallery-thumb {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ep-bg, #f7f8fa);
  position: relative;
}
.ep-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.ep-gallery-thumb:hover img { transform: scale(1.06); }
.ep-gallery-thumb-hero {
  grid-column: span 3;
  aspect-ratio: 16 / 7;
}
/* "+N more" overlay on the last thumbnail */
.ep-gallery-more {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.52);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  pointer-events: none;
}
@media (max-width: 600px) {
  .ep-detail-gallery { grid-template-columns: repeat(2, 1fr); }
  .ep-gallery-thumb-hero { grid-column: span 2; aspect-ratio: 16 / 8; }
}

/* ===========================================================
   AMENITY GRID
   =========================================================== */
.ep-amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}
.ep-amenity-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--ep-bg, #f7f8fa);
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ep-text, #333);
  font-weight: 500;
  transition: border-color .2s, background .2s;
}
.ep-amenity-chip:hover {
  border-color: var(--ep-primary, #2c5d8f);
  background: #eaf2fb;
}
.ep-amenity-chip i {
  color: var(--ep-primary, #2c5d8f);
  font-size: 14px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

/* ===========================================================
   ACTION BUTTONS (events â€” Get Tickets / Event Website)
   =========================================================== */
.ep-detail-actions-section {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ep-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ep-primary, #2c5d8f);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 6px;
  text-decoration: none;
  border: 2px solid var(--ep-primary, #2c5d8f);
  transition: var(--ep-transition, all .25s ease);
  cursor: pointer;
  line-height: 1;
}
.ep-book-btn:hover {
  background: #1f4470;
  border-color: #1f4470;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(44,93,143,.35);
}
.ep-book-btn i { font-size: 14px; flex-shrink: 0; }

.ep-outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--ep-primary, #2c5d8f);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 6px;
  text-decoration: none;
  border: 2px solid var(--ep-primary, #2c5d8f);
  transition: var(--ep-transition, all .25s ease);
  cursor: pointer;
  line-height: 1;
}
.ep-outline-btn:hover {
  background: var(--ep-primary, #2c5d8f);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.ep-outline-btn i { font-size: 14px; flex-shrink: 0; }

/* Mobile-only CTA: hidden on desktop, shown below content on mobile */
.ep-detail-cta-mobile { display: none; }
@media (max-width: 860px) { .ep-detail-cta-mobile { display: block; } }

/* ===========================================================
   SIDEBAR
   =========================================================== */
.ep-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 96px; /* clears sticky nav */
}
@media (max-width: 860px) {
  .ep-detail-sidebar { position: static; top: auto; }
}

/* Sidebar widget card */
.ep-sidebar-widget {
  background: var(--ep-white, #fff);
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: var(--ep-radius, 8px);
  overflow: hidden;
  box-shadow: var(--ep-shadow, 0 2px 12px rgba(0,0,0,.08));
}

/* Widget header */
.ep-widget-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ep-primary, #2c5d8f);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 13px 18px;
}
.ep-widget-head i { font-size: 15px; }

/* Widget body */
.ep-widget-body { padding: 18px; }

/* Booking price */
.ep-booking-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--ep-primary, #2c5d8f);
  margin-bottom: 16px;
  line-height: 1.1;
}
.ep-booking-price small {
  font-size: 14px;
  font-weight: 400;
  color: var(--ep-muted, #777);
  margin-left: 4px;
}

/* Booking meta rows */
.ep-booking-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--ep-border, #e5e5e5);
  font-size: 13px;
}
.ep-booking-meta-row:last-of-type {
  border-bottom: none;
  margin-bottom: 16px;
}
.ep-booking-meta-row .label {
  color: var(--ep-muted, #777);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.ep-booking-meta-row .value {
  color: var(--ep-text, #333);
  font-weight: 600;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Full-width book button inside widget */
.ep-sidebar-widget .ep-book-btn {
  width: 100%;
  margin-top: 4px;
}

/* Inline stars (inside .value) */
.ep-stars-inline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ep-stars-inline .rating { display: inline-flex; gap: 2px; }
.ep-stars-inline .rating i { font-size: 11px; color: #ddd; }
.ep-stars-inline .rating i.active { color: var(--ep-secondary, #f0a500); }

/* Contact list */
.ep-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ep-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ep-border, #e5e5e5);
  font-size: 14px;
  color: var(--ep-text, #333);
  line-height: 1.5;
}
.ep-contact-list li:first-child { padding-top: 0; }
.ep-contact-list li:last-child  { border-bottom: none; padding-bottom: 0; }
.ep-contact-list li i {
  color: var(--ep-primary, #2c5d8f);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  text-align: center;
}
.ep-contact-list li a {
  color: var(--ep-primary, #2c5d8f);
  text-decoration: none;
  word-break: break-word;
}
.ep-contact-list li a:hover { text-decoration: underline; }

/* Map iframe wrapper */
.ep-map-iframe-wrap {
  position: relative;
  overflow: hidden;
  line-height: 0;
  border-top: 1px solid var(--ep-border, #e5e5e5);
}
.ep-map-iframe-wrap iframe {
  display: block;
  width: 100%;
  border: none;
}

/* Directions link below map */
.ep-directions-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 16px;
  background: var(--ep-bg, #f7f8fa);
  border-top: 1px solid var(--ep-border, #e5e5e5);
  font-size: 13px;
  font-weight: 700;
  color: var(--ep-primary, #2c5d8f);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.ep-directions-link:hover {
  background: var(--ep-primary, #2c5d8f);
  color: #fff;
  text-decoration: none;
}
.ep-directions-link i { font-size: 14px; }

/* ===========================================================
   HERO RESPONSIVE
   =========================================================== */
@media (max-width: 768px) {
  .ep-detail-hero     { min-height: 320px; }
  .ep-detail-hero-inner { padding: 36px 0 30px; }
  .ep-detail-title    { font-size: 22px; }
  .ep-hero-date-badge { top: 18px; padding: 8px 14px; }
  .ep-hero-date-badge .ep-date-day { font-size: 26px; }
}
@media (max-width: 480px) {
  .ep-detail-hero     { min-height: 250px; }
  .ep-detail-hero-inner { padding: 28px 0 22px; }
  .ep-detail-title    { font-size: 20px; }
  .ep-hero-meta-row   { gap: 4px 12px; }
  .ep-hero-meta-row > div { font-size: 13px; }
  .ep-widget-body     { padding: 14px; }
  .ep-booking-price   { font-size: 22px; }
}

/* ===========================================================
   SIDEBAR LAYOUT  (layout_style="left")
   Mirrors Fioxen's lt-page_layout-filters_left structure.
   =========================================================== */
.ep-layout-filters-left .ep-listing-inner { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.ep-layout-filters-left .ep-sidebar-col   { width: 33.33333%; padding: 0 15px; }
.ep-layout-filters-left .ep-content-col   { width: 66.66667%; padding: 0 15px; }
@media (max-width: 991px) {
  .ep-layout-filters-left .ep-sidebar-col,
  .ep-layout-filters-left .ep-content-col { width: 100%; float: none; }
  .ep-layout-filters-left .ep-sidebar-col { margin-bottom: 28px; }
}

/* Sidebar search panel: form itself is the white card (no extra wrapper needed) */

/* Filter by Features section */
.ep-filter-features-title {
  font-size: 14px;
  font-weight: 700;
  margin: 16px 0 10px;
  color: var(--ep-text, #333);
}
.ep-amenity-checklist { list-style: none; margin: 0; padding: 0; }
.ep-amenity-checklist li { padding: 4px 0; font-size: 13px; }
.ep-amenity-checklist label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ep-text, #333); }
.ep-amenity-checklist input[type="checkbox"] { accent-color: var(--ep-primary, #2c5d8f); width: 15px; height: 15px; }

/* Fioxen's lt-review-show-start overlay star rating
   The Fioxen theme (template.css) already has the full .lt-review-show-start
   structure â€” .review-results, .base-stars, .votes-stars are all styled there.
   We only ensure the wrapper stays in normal document flow inside our cards
   (Fioxen sometimes floats it in masonry; we want it inline in grid cards). */
.listing-block .lt-content-block .lt-review-show-start,
.listing-block .listing-content  .lt-review-show-start {
  position: static !important;
  float:    none  !important;
  clear: both;
  margin: 6px 0 8px;
}
/* Rating meta row: numeric value + count shown inline after the stars */
.ep-rating-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  line-height: 1;
}
.ep-rating-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--ep-text, #333);
}
.ep-review-cnt {
  font-size: 12px;
  color: var(--ep-muted, #777);
  font-weight: 400;
}

/* More-cat popup */
.lt_block-category { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.lt_block-category .more-cat { position: relative; }
.lt_block-category .more-cat-number {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px;
  background: var(--ep-bg, #f7f8fa);
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: 4px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  color: var(--ep-text, #333);
}
.lt_block-category .more-cat-content {
  display: none;
  position: absolute; top: 110%; left: 0; z-index: 20;
  background: #fff;
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: 6px;
  padding: 8px;
  min-width: 140px;
  box-shadow: var(--ep-shadow, 0 2px 12px rgba(0,0,0,.08));
}
.lt_block-category .more-cat:hover .more-cat-content { display: block; }

/* Detail-arrow icon in card footer (replaces old wishlist heart) */
.wishlist-icon-content a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: 50%;
  color: var(--ep-muted, #777);
  font-size: 14px;
  text-decoration: none;
  transition: var(--ep-transition);
}
.wishlist-icon-content a:hover { color: var(--ep-primary, #2c5d8f); border-color: var(--ep-primary, #2c5d8f); }
/* Arrow variant: starts with primary colour, fills on hover */
.wishlist-icon-content a.ep-detail-arrow {
  color: var(--ep-primary, #2c5d8f);
  border-color: var(--ep-primary, #2c5d8f);
  font-size: 13px;
}
.wishlist-icon-content a.ep-detail-arrow:hover {
  background: var(--ep-primary, #2c5d8f);
  color: #fff;
  border-color: var(--ep-primary, #2c5d8f);
  transform: translateX(2px);
}

/* ===========================================================
   SIDEBAR FILTER FORM  (lodging-sidebar.php widgets)
   Mirrors Fioxen's lt-sidebar-search widget panel style.
   =========================================================== */

/* Each filter block */
.ep-sidebar-widget {
  background: #fff;
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: var(--ep-radius, 8px);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.ep-sidebar-widget:last-child { margin-bottom: 0; }

/* Widget title bar */
.ep-sidebar-widget .widget-title,
.ep-sidebar-widget > h3.widget-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ep-text, #333);
  margin: 0;
  padding: 13px 18px 12px;
  border-bottom: 1px solid var(--ep-border, #e5e5e5);
  background: var(--ep-bg, #f7f8fa);
}

/* Widget content area */
.ep-sidebar-widget .widget-content {
  padding: 16px 18px;
}

/* Keyword input */
.ep-sidebar-search-input {
  position: relative;
  display: flex;
  align-items: center;
}
.ep-sidebar-search-input .icon {
  position: absolute;
  left: 12px;
  color: var(--ep-muted, #777);
  font-size: 15px;
  pointer-events: none;
}
.ep-sidebar-search-input input[type="text"] {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  color: var(--ep-text, #333);
  outline: none;
  transition: border-color .2s;
}
.ep-sidebar-search-input input[type="text"]:focus {
  border-color: var(--ep-primary, #2c5d8f);
}

/* Radio / checkbox list */
.list-filter {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-filter li {
  padding: 3px 0;
}
.ep-filter-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ep-text, #333);
  cursor: pointer;
  padding: 4px 2px;
  transition: color .15s;
}
.ep-filter-label:hover { color: var(--ep-primary, #2c5d8f); }
.ep-filter-label input[type="radio"],
.ep-filter-label input[type="checkbox"] {
  accent-color: var(--ep-primary, #2c5d8f);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Price range row */
.ep-price-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ep-price-input-wrap {
  position: relative;
  flex: 1;
}
.ep-price-input-wrap .ep-currency {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--ep-muted, #777);
  pointer-events: none;
}
.ep-price-input-wrap input[type="number"] {
  width: 100%;
  padding: 8px 8px 8px 22px;
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  outline: none;
  transition: border-color .2s;
}
.ep-price-input-wrap input[type="number"]:focus {
  border-color: var(--ep-primary, #2c5d8f);
}
.ep-price-sep {
  color: var(--ep-muted, #777);
  font-size: 14px;
  flex-shrink: 0;
}

/* Action buttons */
.ep-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px !important;
  border: 1px solid var(--ep-border, #e5e5e5) !important;
}
.ep-sidebar-search-btn,
.ep-sidebar-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--ep-transition);
  text-align: center;
  text-decoration: none;
  line-height: 1;
}
.ep-sidebar-search-btn {
  background: var(--ep-primary, #2c5d8f);
  border: 2px solid var(--ep-primary, #2c5d8f);
  color: #fff;
}
.ep-sidebar-search-btn:hover {
  background: #1f4470;
  border-color: #1f4470;
  color: #fff;
  text-decoration: none;
}
.ep-sidebar-reset-btn {
  background: transparent;
  border: 2px solid var(--ep-border, #e5e5e5);
  color: var(--ep-muted, #777);
}
.ep-sidebar-reset-btn:hover {
  border-color: var(--ep-primary, #2c5d8f);
  color: var(--ep-primary, #2c5d8f);
  text-decoration: none;
}

/* Field rows inside the sidebar form inherit their padding from
   .lt-listing-filters.style-1 .content-inner (defined further below) */

/* Responsive: on tablet, sidebar stacks above content */
@media (max-width: 991px) {
  .ep-layout-filters-left .ep-sidebar-col,
  .ep-layout-filters-left .ep-content-col {
    width: 100% !important;
    float: none;
  }
  .ep-layout-filters-left .ep-sidebar-col { margin-bottom: 28px; }
}

/* ===========================================================
   FIOXEN SIDEBAR FILTER FORM  (exact HTML clone)
   Styles for: lt-listing-filters style-1 inside lt-sidebar-search
   =========================================================== */

/* Fioxen's sidebar form â€” the form element is the white card */
.lt-sidebar-search .lt-listing-filters.style-1 {
  background: #fff;
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: var(--ep-radius, 8px);
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

/* Mobile toggle button */
.lt-control-search-mobile {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ep-primary, #2c5d8f);
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 12px;
}
.lt-control-search-mobile i { font-size: 15px; }
@media (max-width: 991px) {
  .lt-control-search-mobile { display: flex; }
  .lt-sidebar-search .lt-listing-filters.style-1 { display: none; }
  .lt-sidebar-search .lt-listing-filters.style-1.lt-mobile-open { display: block; }
}
.lt-control-search-mobile-close {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ep-muted, #777);
  font-size: 13px;
  text-decoration: none;
  padding: 8px 16px 0;
  margin-bottom: 4px;
}
.lt-control-search-mobile-close:hover { color: var(--ep-primary, #2c5d8f); }

/* Each form field row */
.lt-listing-filters.style-1 .search_jobs > div {
  border-bottom: 1px solid var(--ep-border, #e5e5e5);
}
.lt-listing-filters.style-1 .search_jobs > div:last-child { border-bottom: none; }

/* â”€â”€ content-inner: icon overlaid inside input (works against Fioxen overrides) â”€â”€ */
.lt-listing-filters.style-1 .content-inner {
  position: relative !important;
  display: block !important;   /* block so input takes 100% width; icon overlays */
  min-height: 50px !important;
  padding: 0 !important;
  line-height: 50px;           /* vertically centres the input text */
}

/* Absolutely-positioned icon sits inside the left padding of the input */
.lt-listing-filters.style-1 .content-inner > .icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--ep-muted, #aaa) !important;
  font-size: 15px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  line-height: 1 !important;
}

/* Input & select fill the full row; left-pad creates room for the icon */
.lt-listing-filters.style-1 .content-inner input[type="text"],
.lt-listing-filters.style-1 .content-inner select {
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  padding: 0 38px 0 38px !important;
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  color: var(--ep-text, #333) !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 50px !important;
  box-sizing: border-box !important;
}

/* Custom chevron for select (suppresses native OS arrow via appearance:none) */
.lt-listing-filters.style-1 .content-inner select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

/* Submit button â€” hidden; filtering is now live (on-change).
   Kept in CSS in case a top-filter form still uses it. */
.lt-listing-filters.style-1 .search_submit {
  display: none !important;
}

/* â”€â”€ Reset Filters button â”€â”€ */
.ep-filter-reset-row {
  padding: 14px;
  border-top: 1px solid var(--ep-border, #e5e5e5);
}
.ep-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px 20px;
  background: var(--ep-primary, #2c5d8f);
  color: #fff !important;
  border: 2px solid var(--ep-primary, #2c5d8f);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .2s, border-color .2s;
  line-height: 1;
  box-sizing: border-box;
}
.ep-reset-btn:hover {
  background: #1f4470;
  border-color: #1f4470;
  color: #fff !important;
}
.ep-reset-btn i { font-size: 14px; }

/* Mobile-only Search submit button.
   Hidden on desktop because each form interaction already triggers live
   AJAX filtering; on mobile (<= 991px) live filtering is suppressed so
   the user can build up multiple selections and confirm with this button,
   which fires the filter and closes the sidebar overlay. */
.ep-mobile-only-btn { display: none; }
@media (max-width: 991px) {
  .ep-filter-reset-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .ep-filter-reset-row .ep-mobile-only-btn,
  .ep-filter-reset-row .ep-reset-filters { flex: 1 1 0; width: auto; }
  .ep-mobile-only-btn { display: flex; }
}

/* showing_jobs â€” legacy: hide old Reset text-link row if still present in markup */
.lt-listing-filters.style-1 .showing_jobs {
  display: none !important;
}

/* â”€â”€ Sidebar field label row (section heading above the input) â”€â”€ */
.ep-sidebar-field-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ep-muted, #aaa);
}
.ep-sidebar-field-label i { font-size: 13px; }

/* Filter by Features â€” always visible (matches Fioxen demo) */
.lt-filter-by-amenities .content-inner {
  flex-direction: column;
  align-items: flex-start !important;
  padding: 12px 16px !important;
  min-height: auto !important;
}
.lt-filter-by-amenities .title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ep-text, #333);
  margin: 0 0 8px;
  display: block;
  width: 100%;
  cursor: default;
  user-select: none;
}
.lt-filter-by-amenities .filter-by-amenities { padding-top: 4px; width: 100%; }
.lt-filter-by-amenities .amenities-list { list-style: none; margin: 0; padding: 0; }
.lt-filter-by-amenities .amenity-cat-item { padding: 3px 0; }

/* ===========================================================
   PRETTY CHECKBOX
   Fioxen's theme (template.css) ships the full pretty-checkbox
   v1 library CSS AND specific sidebar-filter overrides â€” we
   intentionally defer to those rules and add only what's needed.
   Our previous full replica caused misalignment because it
   conflicted with the theme's label:before / icon positioning.
   =========================================================== */

/* Force the native input invisible (belt-and-suspenders, theme
   already does this but without !important). */
.pretty input[type='checkbox'],
.pretty input[type='radio'] {
  opacity: 0 !important;
  cursor: pointer !important;
}

/* Use our primary colour for the checked icon background in the
   sidebar filter (overrides theme's --e-global-color-primary so
   the two stay in sync even if Elementor isn't active). */
.lt-listing-filters .search_jobs .lt-filter-by-amenities
.amenities-list > li .pretty .state .icon {
  background: var(--ep-primary, #2c5d8f) !important;
}

/* Ensure the unchecked grey box renders (belt-and-suspenders). */
.lt-listing-filters .search_jobs .lt-filter-by-amenities
.amenities-list > li .pretty .state label:before {
  background: #e9ebed !important;
  border-radius: 4px !important;
  border: none !important;
}

/* â”€â”€ Amenities show-more toggle â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
/* !important beats Fioxen's li { display: list-item } rule */
.amenities-list > li.ep-amenity-hidden { display: none !important; }
.ep-amenities-toggle {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ep-primary, #2c5d8f);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}
.ep-amenities-toggle:hover { text-decoration: underline; color: var(--ep-primary, #2c5d8f); }

/* â”€â”€ Filter by Features â€” collapsible section header â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.ep-features-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.ep-features-toggle .ep-toggle-arrow {
  font-size: 13px;
  color: var(--ep-muted, #999);
  transition: transform .25s ease;
  flex-shrink: 0;
}
.ep-features-toggle.ep-collapsed .ep-toggle-arrow {
  transform: rotate(-90deg);
}

/* â”€â”€ Keyword clear (Ã—) button â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.ep-keyword-wrap .content-inner,
.ep-keyword-inner {
  position: relative;
  display: flex;
  align-items: center;
}

/* Magnifying-glass icon on the left */
.ep-keyword-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ep-muted, #aaa);
  font-size: 15px;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}

/* Keyword input: pad for icon left + clear button right */
.ep-keyword-inner input[type="text"],
.ep-keyword-inner .ep-keyword-input {
  flex: 1;
  padding-left: 34px  !important;
  padding-right: 36px !important;
}

/* Clear (x) button: visible only when input has a value */
.ep-kw-clear,
.ep-keyword-clear {
  position: absolute !important;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  color: var(--ep-muted, #aaa);
  font-size: 15px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: color .15s ease, background .15s ease;
}
.ep-kw-clear:hover,
.ep-keyword-clear:hover {
  color: var(--ep-accent, #e84545);
  background: rgba(0,0,0,.06);
}
/* Hidden state: only show when the input has a value */
.ep-kw-clear--hidden {
  display: none !important;
}
/* Safety: hide mobile-close X when sidebar is always visible (not overlay) */
.lt-listing-filters:not(.lt-mobile-open) .lt-control-search-mobile-close {
  display: none;
}
/* ===========================================================
   PRETTY CHECKBOX
   Fioxen's theme (template.css) ships the full pretty-checkbox
   v1 library CSS AND specific sidebar-filter overrides â€” we
   intentionally defer to those rules and add only what's needed.
   Our previous full replica caused misalignment because it
   conflicted with the theme's label:before / icon positioning.
   =========================================================== */

/* Force the native input invisible (belt-and-suspenders, theme
   already does this but without !important). */
.pretty input[type='checkbox'],
.pretty input[type='radio'] {
  opacity: 0 !important;
  cursor: pointer !important;
}

/* Use our primary colour for the checked icon background in the
   sidebar filter (overrides theme's --e-global-color-primary so
   the two stay in sync even if Elementor isn't active). */
.lt-listing-filters .search_jobs .lt-filter-by-amenities
.amenities-list > li .pretty .state .icon {
  background: var(--ep-primary, #2c5d8f) !important;
}

/* Ensure the unchecked grey box renders (belt-and-suspenders). */
.lt-listing-filters .search_jobs .lt-filter-by-amenities
.amenities-list > li .pretty .state label:before {
  background: #e9ebed !important;
  border-radius: 4px !important;
  border: none !important;
}

/* â”€â”€ Amenities show-more toggle â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
/* !important beats Fioxen's li { display: list-item } rule */
.amenities-list > li.ep-amenity-hidden { display: none !important; }
.ep-amenities-toggle {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ep-primary, #2c5d8f);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}
.ep-amenities-toggle:hover { text-decoration: underline; color: var(--ep-primary, #2c5d8f); }

/* â”€â”€ Filter by Features â€” collapsible section header â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.ep-features-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.ep-features-toggle .ep-toggle-arrow {
  font-size: 13px;
  color: var(--ep-muted, #999);
  transition: transform .25s ease;
  flex-shrink: 0;
}
.ep-features-toggle.ep-collapsed .ep-toggle-arrow {
  transform: rotate(-90deg);
}

/* â”€â”€ Keyword clear (Ã—) button â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.ep-keyword-wrap .content-inner,
.ep-keyword-inner {
  position: relative;
  display: flex;
  align-items: center;
}

/* Magnifying-glass icon on the left */
.ep-keyword-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ep-muted, #aaa);
  font-size: 15px;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}

/* Keyword input: pad for icon left + clear button right */
.ep-keyword-inner input[type="text"],
.ep-keyword-inner .ep-keyword-input {
  flex: 1;
  padding-left: 34px  !important;
  padding-right: 36px !important;
}

/* Clear (x) button: visible only when input has a value */
.ep-kw-clear,
.ep-keyword-clear {
  position: absolute !important;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  color: var(--ep-muted, #aaa);
  font-size: 15px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: color .15s ease, background .15s ease;
}
.ep-kw-clear:hover,
.ep-keyword-clear:hover {
  color: var(--ep-accent, #e84545);
  background: rgba(0,0,0,.06);
}
/* Hidden state: only show when the input has a value */
.ep-kw-clear--hidden {
  display: none !important;
}
/* Safety: hide mobile-close X when sidebar is always visible (not overlay) */
.lt-listing-filters:not(.lt-mobile-open) .lt-control-search-mobile-close {
  display: none;
}

/* â”€â”€ +N more-cat popup â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.more-cat {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.more-cat-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 50px;
  background: var(--ep-primary, #2c5d8f);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease;
  user-select: none;
}
.more-cat-number:hover { background: #1f4470; }
.more-cat-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px); /* open upward so it doesn't cover the card image */
  left: 0;
  z-index: 200;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--ep-border, #e5e5e5);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 6px 0;
  white-space: nowrap;
}
/* Arrow pointer at bottom of popup */
.more-cat-content::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1px solid var(--ep-border, #e5e5e5);
  border-bottom: 1px solid var(--ep-border, #e5e5e5);
  transform: rotate(45deg);
}
.more-cat.ep-more-open .more-cat-content,
.more-cat:hover .more-cat-content {
  display: block;
}
.more-cat-content .cat-item {
  display: block;
  padding: 6px 14px;
}
.more-cat-content .cat-item a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ep-text, #333);
  text-decoration: none;
  transition: color .15s ease;
}
.more-cat-content .cat-item a:hover { color: var(--ep-primary, #2c5d8f); }
.more-cat-content .cat-item .icon i {
  font-size: 14px;
  color: var(--ep-muted, #999);
}
.more-cat-content .cat-item a:hover .icon i { color: var(--ep-primary, #2c5d8f); }

/* ===========================================================
   LOAD MORE BUTTON  (Fioxen .load_more_jobs)
   =========================================================== */
.load_more_jobs {
  display: block;
  text-align: center;
  padding: 13px 24px;
  margin: 24px auto 0;
  background: #fff;
  border: 2px solid var(--ep-border, #e5e5e5);
  border-radius: 6px;
  color: var(--ep-text, #333);
  font-size: 14px;
  text-decoration: none;
  transition: all .2s ease;
  cursor: pointer;
  max-width: 240px;
}
.load_more_jobs strong {
  font-weight: 700;
  pointer-events: none;
}
.load_more_jobs:hover {
  background: var(--ep-primary, #2c5d8f);
  border-color: var(--ep-primary, #2c5d8f);
  color: #fff;
  text-decoration: none;
}
/* Loading state: kill any theme/browser focus ring that turns red,
   and inject a clean CSS spinner before the button text. */
@keyframes ep-spin { to { transform: rotate(360deg); } }
.load_more_jobs.ep-loading-more {
  opacity: .75;
  cursor: wait;
  pointer-events: none;
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--ep-border, #e5e5e5) !important;
  background: #fff !important;
  color: var(--ep-muted, #777) !important;
}
.load_more_jobs.ep-loading-more strong::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--ep-border, #e5e5e5);
  border-top-color: var(--ep-primary, #2c5d8f);
  border-radius: 50%;
  animation: ep-spin .65s linear infinite;
  vertical-align: middle;
  margin-right: 7px;
  margin-bottom: 1px;
}

/* ===========================================================
   FEATURED LODGING GRID WRAP
   Used by [ep_featured_lodging] shortcode and
   EP Featured Lodging Grid Elementor widget.
   =========================================================== */
.ep-featured-lodging-wrap {
  width: 100%;
}
.ep-featured-heading {
  margin-bottom: 28px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--ep-text, #222);
  line-height: 1.25;
}

/* ===========================================================
   CARD DESCRIPTION â€” 2-line clamp with ellipsis
   Shown below the property title in grid / list / masonry cards.
   Only renders when a description is available (API-synced content).
   =========================================================== */
.ep-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Pixel-perfect fallback for browsers that ignore line-clamp */
  max-height: calc(1.55em * 2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ep-muted, #777);
  margin: 4px 0 8px;
  padding: 0;
  word-break: break-word;
}

/* ===========================================================
   DUAL RANGE PRICE SLIDER
   =========================================================== */

/* Row wrapper â€” matches .search_price_range card row */
.ep-price-slider-row .content-inner.ep-price-slider-content {
  padding: 14px 16px 18px;
  display: block;
}

/* Top row: icon + label + live value display */
.ep-price-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--ep-text, #333);
}
.ep-price-label-row .icon {
  position: static !important; /* override the absolute-position from .content-inner .icon */
  font-size: 15px;
  color: var(--ep-muted, #777);
  flex-shrink: 0;
}
.ep-price-label {
  flex: 1;
  font-weight: 500;
}
.ep-price-value-display {
  font-weight: 600;
  color: var(--ep-primary, #2c5d8f);
  white-space: nowrap;
}

/* Track container â€” positions the fill div and both thumbs */
.ep-dual-range-wrap {
  position: relative;
  height: 36px;          /* tall enough for thumb hit-area */
  padding-top: 14px;     /* push thumbs down so they sit over the track */
  box-sizing: border-box;
}

/* Grey background track */
.ep-range-track {
  position: relative;
  height: 4px;
  background: var(--ep-border, #e5e5e5);
  border-radius: 4px;
  top: 4px;
}

/* Coloured fill between the two thumbs */
.ep-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--ep-primary, #2c5d8f);
  border-radius: 4px;
  pointer-events: none;
}

/* Both range inputs overlap the track exactly */
.ep-range-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;   /* only the thumb itself is interactive */
  cursor: pointer;
}
.ep-range-thumb::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
  height: 4px;
}
.ep-range-thumb::-moz-range-track {
  background: transparent;
  height: 4px;
  border: none;
}

/* Thumb â€” circular handle */
.ep-range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ep-primary, #2c5d8f);
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
  cursor: pointer;
  margin-top: -7px;       /* vertically centre on the 4px track */
  transition: transform .15s ease, box-shadow .15s ease;
}
.ep-range-thumb::-moz-range-thumb {
  pointer-events: all;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ep-primary, #2c5d8f);
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ep-range-thumb:focus::-webkit-slider-thumb,
.ep-range-thumb:hover::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.ep-range-thumb:focus::-moz-range-thumb,
.ep-range-thumb:hover::-moz-range-thumb {
  transform: scale(1.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

/* Ensure the max thumb sits above the min thumb when they overlap */
.ep-range-max { z-index: 2; }
.ep-range-min { z-index: 1; }

/* =============================================================================
   FIOXEN BLOCK-GRID SYSTEM â€” self-contained copy for WP-Job-Manager independence
   Source: Fioxen theme assets/css/template.css (lines 1930â€“3070)
   These classes power the responsive grid used by job_listings containers:
     xx-block-grid-* @ 380px  |  xs-block-grid-* @ 640px
     sm-block-grid-* @ 768px  |  md-block-grid-* @ 1024.1px
     lg-block-grid-* @ 1200px
   Once WP Job Manager is removed, layout continues to work via these rules.
   ============================================================================= */

[class*="block-grid-"] {
  display: block;
  margin: 0 -15px;
  padding: 0;
}
[class*="block-grid-"]:before,
[class*="block-grid-"]:after {
  display: table;
  content: " ";
}
[class*="block-grid-"]:after {
  clear: both;
}
[class*="block-grid-"] > div {
  display: block;
  float: left;
  height: auto;
  padding: 0 15px;
  width: 100%;
}
[class*="block-grid-"] > div:after {
  display: block;
}

/* â”€â”€ xx-block-grid-* @ min-width: 380px â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (min-width: 380px) {
  .xx-block-grid-1 > div { width: 100%; }
  .xx-block-grid-1 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-1 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-1 > div:nth-of-type(1n+1)  { clear: both; }
  .xx-block-grid-1 > div:nth-of-type(1n+1):after { display: none; }
  .xx-block-grid-1 > div:nth-last-child(-n+1):before { content: none; }

  .xx-block-grid-2 > div { width: 50%; }
  .xx-block-grid-2 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-2 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-2 > div:nth-of-type(2n+1)  { clear: both; }
  .xx-block-grid-2 > div:nth-of-type(2n+1):after { display: none; }
  .xx-block-grid-2 > div:nth-last-child(-n+2):before { content: none; }

  .xx-block-grid-3 > div { width: 33.33333%; }
  .xx-block-grid-3 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-3 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-3 > div:nth-of-type(3n+1)  { clear: both; }
  .xx-block-grid-3 > div:nth-of-type(3n+1):after { display: none; }
  .xx-block-grid-3 > div:nth-last-child(-n+3):before { content: none; }

  .xx-block-grid-4 > div { width: 25%; }
  .xx-block-grid-4 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-4 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-4 > div:nth-of-type(4n+1)  { clear: both; }
  .xx-block-grid-4 > div:nth-of-type(4n+1):after { display: none; }
  .xx-block-grid-4 > div:nth-last-child(-n+4):before { content: none; }

  .xx-block-grid-5 > div { width: 20%; }
  .xx-block-grid-5 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-5 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-5 > div:nth-of-type(5n+1)  { clear: both; }
  .xx-block-grid-5 > div:nth-of-type(5n+1):after { display: none; }
  .xx-block-grid-5 > div:nth-last-child(-n+5):before { content: none; }

  .xx-block-grid-6 > div { width: 16.66667%; }
  .xx-block-grid-6 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-6 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-6 > div:nth-of-type(6n+1)  { clear: both; }
  .xx-block-grid-6 > div:nth-of-type(6n+1):after { display: none; }
  .xx-block-grid-6 > div:nth-last-child(-n+6):before { content: none; }

  .xx-block-grid-7 > div { width: 14.28571%; }
  .xx-block-grid-7 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-7 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-7 > div:nth-of-type(7n+1)  { clear: both; }
  .xx-block-grid-7 > div:nth-of-type(7n+1):after { display: none; }
  .xx-block-grid-7 > div:nth-last-child(-n+7):before { content: none; }

  .xx-block-grid-8 > div { width: 12.5%; }
  .xx-block-grid-8 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-8 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-8 > div:nth-of-type(8n+1)  { clear: both; }
  .xx-block-grid-8 > div:nth-of-type(8n+1):after { display: none; }
  .xx-block-grid-8 > div:nth-last-child(-n+8):before { content: none; }

  .xx-block-grid-9 > div { width: 11.11111%; }
  .xx-block-grid-9 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-9 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-9 > div:nth-of-type(9n+1)  { clear: both; }
  .xx-block-grid-9 > div:nth-of-type(9n+1):after { display: none; }
  .xx-block-grid-9 > div:nth-last-child(-n+9):before { content: none; }

  .xx-block-grid-10 > div { width: 10%; }
  .xx-block-grid-10 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-10 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-10 > div:nth-of-type(10n+1) { clear: both; }
  .xx-block-grid-10 > div:nth-of-type(10n+1):after { display: none; }
  .xx-block-grid-10 > div:nth-last-child(-n+10):before { content: none; }

  .xx-block-grid-11 > div { width: 9.09091%; }
  .xx-block-grid-11 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-11 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-11 > div:nth-of-type(11n+1) { clear: both; }
  .xx-block-grid-11 > div:nth-of-type(11n+1):after { display: none; }
  .xx-block-grid-11 > div:nth-last-child(-n+11):before { content: none; }

  .xx-block-grid-12 > div { width: 8.33333%; }
  .xx-block-grid-12 > div:nth-of-type(1n)    { clear: none; }
  .xx-block-grid-12 > div:nth-of-type(1n):after { display: block; }
  .xx-block-grid-12 > div:nth-of-type(12n+1) { clear: both; }
  .xx-block-grid-12 > div:nth-of-type(12n+1):after { display: none; }
  .xx-block-grid-12 > div:nth-last-child(-n+12):before { content: none; }
}

/* â”€â”€ xs-block-grid-* @ min-width: 640px â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (min-width: 640px) {
  .xs-block-grid-1 > div { width: 100%; }
  .xs-block-grid-1 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-1 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-1 > div:nth-of-type(1n+1)  { clear: both; }
  .xs-block-grid-1 > div:nth-of-type(1n+1):after { display: none; }
  .xs-block-grid-1 > div:nth-last-child(-n+1):before { content: none; }

  .xs-block-grid-2 > div { width: 50%; }
  .xs-block-grid-2 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-2 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-2 > div:nth-of-type(2n+1)  { clear: both; }
  .xs-block-grid-2 > div:nth-of-type(2n+1):after { display: none; }
  .xs-block-grid-2 > div:nth-last-child(-n+2):before { content: none; }

  .xs-block-grid-3 > div { width: 33.33333%; }
  .xs-block-grid-3 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-3 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-3 > div:nth-of-type(3n+1)  { clear: both; }
  .xs-block-grid-3 > div:nth-of-type(3n+1):after { display: none; }
  .xs-block-grid-3 > div:nth-last-child(-n+3):before { content: none; }

  .xs-block-grid-4 > div { width: 25%; }
  .xs-block-grid-4 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-4 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-4 > div:nth-of-type(4n+1)  { clear: both; }
  .xs-block-grid-4 > div:nth-of-type(4n+1):after { display: none; }
  .xs-block-grid-4 > div:nth-last-child(-n+4):before { content: none; }

  .xs-block-grid-5 > div { width: 20%; }
  .xs-block-grid-5 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-5 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-5 > div:nth-of-type(5n+1)  { clear: both; }
  .xs-block-grid-5 > div:nth-of-type(5n+1):after { display: none; }
  .xs-block-grid-5 > div:nth-last-child(-n+5):before { content: none; }

  .xs-block-grid-6 > div { width: 16.66667%; }
  .xs-block-grid-6 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-6 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-6 > div:nth-of-type(6n+1)  { clear: both; }
  .xs-block-grid-6 > div:nth-of-type(6n+1):after { display: none; }
  .xs-block-grid-6 > div:nth-last-child(-n+6):before { content: none; }

  .xs-block-grid-7 > div { width: 14.28571%; }
  .xs-block-grid-7 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-7 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-7 > div:nth-of-type(7n+1)  { clear: both; }
  .xs-block-grid-7 > div:nth-of-type(7n+1):after { display: none; }
  .xs-block-grid-7 > div:nth-last-child(-n+7):before { content: none; }

  .xs-block-grid-8 > div { width: 12.5%; }
  .xs-block-grid-8 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-8 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-8 > div:nth-of-type(8n+1)  { clear: both; }
  .xs-block-grid-8 > div:nth-of-type(8n+1):after { display: none; }
  .xs-block-grid-8 > div:nth-last-child(-n+8):before { content: none; }

  .xs-block-grid-9 > div { width: 11.11111%; }
  .xs-block-grid-9 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-9 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-9 > div:nth-of-type(9n+1)  { clear: both; }
  .xs-block-grid-9 > div:nth-of-type(9n+1):after { display: none; }
  .xs-block-grid-9 > div:nth-last-child(-n+9):before { content: none; }

  .xs-block-grid-10 > div { width: 10%; }
  .xs-block-grid-10 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-10 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-10 > div:nth-of-type(10n+1) { clear: both; }
  .xs-block-grid-10 > div:nth-of-type(10n+1):after { display: none; }
  .xs-block-grid-10 > div:nth-last-child(-n+10):before { content: none; }

  .xs-block-grid-11 > div { width: 9.09091%; }
  .xs-block-grid-11 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-11 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-11 > div:nth-of-type(11n+1) { clear: both; }
  .xs-block-grid-11 > div:nth-of-type(11n+1):after { display: none; }
  .xs-block-grid-11 > div:nth-last-child(-n+11):before { content: none; }

  .xs-block-grid-12 > div { width: 8.33333%; }
  .xs-block-grid-12 > div:nth-of-type(1n)    { clear: none; }
  .xs-block-grid-12 > div:nth-of-type(1n):after { display: block; }
  .xs-block-grid-12 > div:nth-of-type(12n+1) { clear: both; }
  .xs-block-grid-12 > div:nth-of-type(12n+1):after { display: none; }
  .xs-block-grid-12 > div:nth-last-child(-n+12):before { content: none; }
}

/* â”€â”€ sm-block-grid-* @ min-width: 768px â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (min-width: 768px) {
  .sm-block-grid-1 > div { width: 100%; }
  .sm-block-grid-1 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-1 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-1 > div:nth-of-type(1n+1)  { clear: both; }
  .sm-block-grid-1 > div:nth-of-type(1n+1):after { display: none; }
  .sm-block-grid-1 > div:nth-last-child(-n+1):before { content: none; }

  .sm-block-grid-2 > div { width: 50%; }
  .sm-block-grid-2 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-2 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-2 > div:nth-of-type(2n+1)  { clear: both; }
  .sm-block-grid-2 > div:nth-of-type(2n+1):after { display: none; }
  .sm-block-grid-2 > div:nth-last-child(-n+2):before { content: none; }

  .sm-block-grid-3 > div { width: 33.33333%; }
  .sm-block-grid-3 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-3 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-3 > div:nth-of-type(3n+1)  { clear: both; }
  .sm-block-grid-3 > div:nth-of-type(3n+1):after { display: none; }
  .sm-block-grid-3 > div:nth-last-child(-n+3):before { content: none; }

  .sm-block-grid-4 > div { width: 25%; }
  .sm-block-grid-4 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-4 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-4 > div:nth-of-type(4n+1)  { clear: both; }
  .sm-block-grid-4 > div:nth-of-type(4n+1):after { display: none; }
  .sm-block-grid-4 > div:nth-last-child(-n+4):before { content: none; }

  .sm-block-grid-5 > div { width: 20%; }
  .sm-block-grid-5 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-5 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-5 > div:nth-of-type(5n+1)  { clear: both; }
  .sm-block-grid-5 > div:nth-of-type(5n+1):after { display: none; }
  .sm-block-grid-5 > div:nth-last-child(-n+5):before { content: none; }

  .sm-block-grid-6 > div { width: 16.66667%; }
  .sm-block-grid-6 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-6 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-6 > div:nth-of-type(6n+1)  { clear: both; }
  .sm-block-grid-6 > div:nth-of-type(6n+1):after { display: none; }
  .sm-block-grid-6 > div:nth-last-child(-n+6):before { content: none; }

  .sm-block-grid-7 > div { width: 14.28571%; }
  .sm-block-grid-7 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-7 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-7 > div:nth-of-type(7n+1)  { clear: both; }
  .sm-block-grid-7 > div:nth-of-type(7n+1):after { display: none; }
  .sm-block-grid-7 > div:nth-last-child(-n+7):before { content: none; }

  .sm-block-grid-8 > div { width: 12.5%; }
  .sm-block-grid-8 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-8 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-8 > div:nth-of-type(8n+1)  { clear: both; }
  .sm-block-grid-8 > div:nth-of-type(8n+1):after { display: none; }
  .sm-block-grid-8 > div:nth-last-child(-n+8):before { content: none; }

  .sm-block-grid-9 > div { width: 11.11111%; }
  .sm-block-grid-9 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-9 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-9 > div:nth-of-type(9n+1)  { clear: both; }
  .sm-block-grid-9 > div:nth-of-type(9n+1):after { display: none; }
  .sm-block-grid-9 > div:nth-last-child(-n+9):before { content: none; }

  .sm-block-grid-10 > div { width: 10%; }
  .sm-block-grid-10 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-10 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-10 > div:nth-of-type(10n+1) { clear: both; }
  .sm-block-grid-10 > div:nth-of-type(10n+1):after { display: none; }
  .sm-block-grid-10 > div:nth-last-child(-n+10):before { content: none; }

  .sm-block-grid-11 > div { width: 9.09091%; }
  .sm-block-grid-11 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-11 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-11 > div:nth-of-type(11n+1) { clear: both; }
  .sm-block-grid-11 > div:nth-of-type(11n+1):after { display: none; }
  .sm-block-grid-11 > div:nth-last-child(-n+11):before { content: none; }

  .sm-block-grid-12 > div { width: 8.33333%; }
  .sm-block-grid-12 > div:nth-of-type(1n)    { clear: none; }
  .sm-block-grid-12 > div:nth-of-type(1n):after { display: block; }
  .sm-block-grid-12 > div:nth-of-type(12n+1) { clear: both; }
  .sm-block-grid-12 > div:nth-of-type(12n+1):after { display: none; }
  .sm-block-grid-12 > div:nth-last-child(-n+12):before { content: none; }
}

/* â”€â”€ md-block-grid-* @ min-width: 1024.1px â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (min-width: 1024.1px) {
  [class*="block-grid-"]       { margin: 0 -15px; }
  [class*="block-grid-"] > div { padding: 0 15px; }
  .item-columns                { padding: 0 15px; }

  .md-block-grid-1 > div { width: 100%; }
  .md-block-grid-1 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-1 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-1 > div:nth-of-type(1n+1)  { clear: both; }
  .md-block-grid-1 > div:nth-of-type(1n+1):after { display: none; }
  .md-block-grid-1 > div:nth-last-child(-n+1):before { content: none; }

  .md-block-grid-2 > div { width: 50%; }
  .md-block-grid-2 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-2 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-2 > div:nth-of-type(2n+1)  { clear: both; }
  .md-block-grid-2 > div:nth-of-type(2n+1):after { display: none; }
  .md-block-grid-2 > div:nth-last-child(-n+2):before { content: none; }

  .md-block-grid-3 > div { width: 33.33333%; }
  .md-block-grid-3 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-3 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-3 > div:nth-of-type(3n+1)  { clear: both; }
  .md-block-grid-3 > div:nth-of-type(3n+1):after { display: none; }
  .md-block-grid-3 > div:nth-last-child(-n+3):before { content: none; }

  .md-block-grid-4 > div { width: 25%; }
  .md-block-grid-4 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-4 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-4 > div:nth-of-type(4n+1)  { clear: both; }
  .md-block-grid-4 > div:nth-of-type(4n+1):after { display: none; }
  .md-block-grid-4 > div:nth-last-child(-n+4):before { content: none; }

  .md-block-grid-5 > div { width: 20%; }
  .md-block-grid-5 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-5 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-5 > div:nth-of-type(5n+1)  { clear: both; }
  .md-block-grid-5 > div:nth-of-type(5n+1):after { display: none; }
  .md-block-grid-5 > div:nth-last-child(-n+5):before { content: none; }

  .md-block-grid-6 > div { width: 16.66667%; }
  .md-block-grid-6 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-6 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-6 > div:nth-of-type(6n+1)  { clear: both; }
  .md-block-grid-6 > div:nth-of-type(6n+1):after { display: none; }
  .md-block-grid-6 > div:nth-last-child(-n+6):before { content: none; }

  .md-block-grid-7 > div { width: 14.28571%; }
  .md-block-grid-7 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-7 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-7 > div:nth-of-type(7n+1)  { clear: both; }
  .md-block-grid-7 > div:nth-of-type(7n+1):after { display: none; }
  .md-block-grid-7 > div:nth-last-child(-n+7):before { content: none; }

  .md-block-grid-8 > div { width: 12.5%; }
  .md-block-grid-8 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-8 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-8 > div:nth-of-type(8n+1)  { clear: both; }
  .md-block-grid-8 > div:nth-of-type(8n+1):after { display: none; }
  .md-block-grid-8 > div:nth-last-child(-n+8):before { content: none; }

  .md-block-grid-9 > div { width: 11.11111%; }
  .md-block-grid-9 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-9 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-9 > div:nth-of-type(9n+1)  { clear: both; }
  .md-block-grid-9 > div:nth-of-type(9n+1):after { display: none; }
  .md-block-grid-9 > div:nth-last-child(-n+9):before { content: none; }

  .md-block-grid-10 > div { width: 10%; }
  .md-block-grid-10 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-10 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-10 > div:nth-of-type(10n+1) { clear: both; }
  .md-block-grid-10 > div:nth-of-type(10n+1):after { display: none; }
  .md-block-grid-10 > div:nth-last-child(-n+10):before { content: none; }

  .md-block-grid-11 > div { width: 9.09091%; }
  .md-block-grid-11 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-11 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-11 > div:nth-of-type(11n+1) { clear: both; }
  .md-block-grid-11 > div:nth-of-type(11n+1):after { display: none; }
  .md-block-grid-11 > div:nth-last-child(-n+11):before { content: none; }

  .md-block-grid-12 > div { width: 8.33333%; }
  .md-block-grid-12 > div:nth-of-type(1n)    { clear: none; }
  .md-block-grid-12 > div:nth-of-type(1n):after { display: block; }
  .md-block-grid-12 > div:nth-of-type(12n+1) { clear: both; }
  .md-block-grid-12 > div:nth-of-type(12n+1):after { display: none; }
  .md-block-grid-12 > div:nth-last-child(-n+12):before { content: none; }
}

/* â”€â”€ lg-block-grid-* @ min-width: 1200px â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (min-width: 1200px) {
  [class*="block-grid-"]       { margin: 0 -15px; }
  [class*="block-grid-"] > div { padding: 0 15px; }
  .item-columns                { padding: 0 15px; }

  .lg-block-grid-1 > div { width: 100%; }
  .lg-block-grid-1 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-1 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-1 > div:nth-of-type(1n+1)  { clear: both; }
  .lg-block-grid-1 > div:nth-of-type(1n+1):after { display: none; }
  .lg-block-grid-1 > div:nth-last-child(-n+1):before { content: none; }

  .lg-block-grid-2 > div { width: 50%; }
  .lg-block-grid-2 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-2 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-2 > div:nth-of-type(2n+1)  { clear: both; }
  .lg-block-grid-2 > div:nth-of-type(2n+1):after { display: none; }
  .lg-block-grid-2 > div:nth-last-child(-n+2):before { content: none; }

  .lg-block-grid-3 > div { width: 33.33333%; }
  .lg-block-grid-3 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-3 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-3 > div:nth-of-type(3n+1)  { clear: both; }
  .lg-block-grid-3 > div:nth-of-type(3n+1):after { display: none; }
  .lg-block-grid-3 > div:nth-last-child(-n+3):before { content: none; }

  .lg-block-grid-4 > div { width: 25%; }
  .lg-block-grid-4 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-4 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-4 > div:nth-of-type(4n+1)  { clear: both; }
  .lg-block-grid-4 > div:nth-of-type(4n+1):after { display: none; }
  .lg-block-grid-4 > div:nth-last-child(-n+4):before { content: none; }

  .lg-block-grid-5 > div { width: 20%; }
  .lg-block-grid-5 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-5 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-5 > div:nth-of-type(5n+1)  { clear: both; }
  .lg-block-grid-5 > div:nth-of-type(5n+1):after { display: none; }
  .lg-block-grid-5 > div:nth-last-child(-n+5):before { content: none; }

  .lg-block-grid-6 > div { width: 16.66667%; }
  .lg-block-grid-6 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-6 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-6 > div:nth-of-type(6n+1)  { clear: both; }
  .lg-block-grid-6 > div:nth-of-type(6n+1):after { display: none; }
  .lg-block-grid-6 > div:nth-last-child(-n+6):before { content: none; }

  .lg-block-grid-7 > div { width: 14.28571%; }
  .lg-block-grid-7 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-7 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-7 > div:nth-of-type(7n+1)  { clear: both; }
  .lg-block-grid-7 > div:nth-of-type(7n+1):after { display: none; }
  .lg-block-grid-7 > div:nth-last-child(-n+7):before { content: none; }

  .lg-block-grid-8 > div { width: 12.5%; }
  .lg-block-grid-8 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-8 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-8 > div:nth-of-type(8n+1)  { clear: both; }
  .lg-block-grid-8 > div:nth-of-type(8n+1):after { display: none; }
  .lg-block-grid-8 > div:nth-last-child(-n+8):before { content: none; }

  .lg-block-grid-9 > div { width: 11.11111%; }
  .lg-block-grid-9 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-9 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-9 > div:nth-of-type(9n+1)  { clear: both; }
  .lg-block-grid-9 > div:nth-of-type(9n+1):after { display: none; }
  .lg-block-grid-9 > div:nth-last-child(-n+9):before { content: none; }

  .lg-block-grid-10 > div { width: 10%; }
  .lg-block-grid-10 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-10 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-10 > div:nth-of-type(10n+1) { clear: both; }
  .lg-block-grid-10 > div:nth-of-type(10n+1):after { display: none; }
  .lg-block-grid-10 > div:nth-last-child(-n+10):before { content: none; }

  .lg-block-grid-11 > div { width: 9.09091%; }
  .lg-block-grid-11 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-11 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-11 > div:nth-of-type(11n+1) { clear: both; }
  .lg-block-grid-11 > div:nth-of-type(11n+1):after { display: none; }
  .lg-block-grid-11 > div:nth-last-child(-n+11):before { content: none; }

  .lg-block-grid-12 > div { width: 8.33333%; }
  .lg-block-grid-12 > div:nth-of-type(1n)    { clear: none; }
  .lg-block-grid-12 > div:nth-of-type(1n):after { display: block; }
  .lg-block-grid-12 > div:nth-of-type(12n+1) { clear: both; }
  .lg-block-grid-12 > div:nth-of-type(12n+1):after { display: none; }
  .lg-block-grid-12 > div:nth-last-child(-n+12):before { content: none; }
}

/* â”€â”€ .no_job_listings_found â€” matches Fioxen's empty-state message â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.no_job_listings_found { margin: 0 15px; }

/* =====================================================================
   SINGLE DETAIL PAGE â€” ep_lodging / ep_event  (V2 â€” clean rewrite)
   All class names match templates/lodging/single.php exactly.
   Zero inline styles in templates â€” all layout/colour lives here.
   ===================================================================== */

/* ===========================================================================
   SINGLE PAGE â€” base wrapper
   =========================================================================== */
.ep-single-page { background: #fff; }

/* Shared container â€” mirrors Fioxen's .elementor-container max-width/padding */
.ep-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

/* ===========================================================================
   SECTION 1 â€” HERO BANNER
   Background-image injected by ep-single.js via data-ep-bg (no inline style).
   ::after provides the dark gradient overlay.
   =========================================================================== */
.ep-hero-section {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    background: #1a2b3c center center / cover no-repeat;
    overflow: hidden;
}
.ep-hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.70) 100%);
    pointer-events: none;
}
.ep-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 20px 50px;
}
.ep-hero-cats {
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ep-hero-cats .cat-item,
.ep-hero-cats a {
    display: inline-block;
    background: var(--ep-secondary, #f0a500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 4px 12px;
    border-radius: 3px;
    text-decoration: none;
}
.ep-hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff !important;   /* always white — hero always has a dark overlay */
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.ep-hero-address {
    color: rgba(255,255,255,.88);
    font-size: .95rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ep-hero-address i { font-size: 14px; }

/* ===========================================================================
   SECTION 2 â€” INFO BAR  (white card under hero)
   =========================================================================== */
.ep-info-bar {
    background: #fff;
    border-bottom: 1px solid var(--ep-border, #e5e5e5);
    padding: 20px 0;
}
.ep-info-bar .ep-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 30px;
}
.ep-info-bar-left {
    flex: 1 1 auto;
    min-width: 0;
}
.ep-info-bar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 24px;
}

/* Breadcrumb */
.ep-breadcrumb {
    font-size: .82rem;
    color: var(--ep-muted, #777);
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}
.ep-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}
.ep-breadcrumb a:hover { color: var(--ep-primary, #2c5d8f); }
.ep-breadcrumb span[aria-current] { color: var(--ep-text, #333); font-weight: 500; }

/* Category chips inside info bar */
.ep-info-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}
.ep-info-cats .cat-item,
.ep-info-cats a {
    display: inline-block;
    background: var(--ep-secondary, #f0a500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: 3px;
    text-decoration: none;
    transition: background .2s;
}
.ep-info-cats .cat-item:hover,
.ep-info-cats a:hover { background: #d4920a; }

.ep-info-rating { margin-bottom: 6px; }
.ep-info-address {
    font-size: .88rem;
    color: var(--ep-muted, #777);
    display: flex;
    align-items: center;
    gap: 5px;
}
.ep-info-address i { color: var(--ep-primary, #2c5d8f); }

/* Meta icon boxes (price/checkin/checkout) */
.ep-meta-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ep-meta-box-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ep-bg, #f7f8fa);
    border: 1px solid var(--ep-border, #e5e5e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--ep-primary, #2c5d8f);
    flex-shrink: 0;
}
.ep-meta-box-body {
    display: flex;
    flex-direction: column;
}
.ep-meta-box-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ep-muted, #777);
}
.ep-meta-box-value {
    font-size: .9rem;
    font-weight: 700;
    color: var(--ep-text, #333);
}

/* ===========================================================================
   SECTION 3 â€” ACTIONS BAR  (Book Now / Directions / Share)
   =========================================================================== */
.ep-actions-bar {
    background: var(--ep-bg, #f7f8fa);
    border-bottom: 1px solid var(--ep-border, #e5e5e5);
    padding: 12px 0;
}
.ep-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.ep-actions-left,
.ep-actions-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Buttons */
.ep-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 9px 18px;
    border-radius: 4px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .2s, transform .15s;
    white-space: nowrap;
}
.ep-btn-book {
    background: var(--ep-accent, #e84545);
    color: #fff !important;
}
.ep-btn-book:hover {
    background: #c0392b;
    transform: translateY(-1px);
    color: #fff !important;
}
.ep-btn-directions {
    background: #fff;
    color: var(--ep-text, #333) !important;
    border: 1px solid var(--ep-border, #e5e5e5);
}
.ep-btn-directions:hover {
    background: var(--ep-bg, #f7f8fa);
    color: var(--ep-text, #333) !important;
}
.ep-btn-share {
    background: #fff;
    color: var(--ep-text, #333);
    border: 1px solid var(--ep-border, #e5e5e5);
}
.ep-btn-share:hover {
    background: var(--ep-bg, #f7f8fa);
}
.ep-btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* Share dropdown */
.fioxen-post-share {
    position: relative;
    display: inline-flex;
}
.fioxen-post-share .share-content {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid var(--ep-border, #e5e5e5);
    border-radius: 6px;
    padding: 8px;
    box-shadow: var(--ep-shadow-hover);
    z-index: 100;
    display: none;
    gap: 6px;
    white-space: nowrap;
}
.ep-single-page .fioxen-post-share.share-open .share-content {
    display: flex !important;
}
.fioxen-post-share .share-content a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ep-bg, #f7f8fa);
    border: 1px solid var(--ep-border, #e5e5e5);
    color: var(--ep-text, #333);
    font-size: 14px;
    text-decoration: none;
    transition: var(--ep-transition);
}
.fioxen-post-share .share-content a:hover {
    background: var(--ep-primary, #2c5d8f);
    border-color: var(--ep-primary, #2c5d8f);
    color: #fff;
}

/* ===========================================================================
   SECTION 4 â€” MAIN 2-COL BODY
   =========================================================================== */
.ep-main-section {
    background: var(--ep-bg, #f7f8fa);
    padding: 32px 0 56px;
}

/* CSS Grid — predictable 2-col layout, no flex-wrap surprises */
.ep-detail-main {
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: start;
    gap: 28px;
}
.ep-detail-content { min-width: 0; }
.ep-detail-sidebar { min-width: 0; }

@media (max-width: 991px) {
    .ep-detail-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /* Show sidebar (map + contact) ABOVE the photo/desc on mobile */
    .ep-detail-sidebar { order: -1; }
}
@media (max-width: 600px) {
    .ep-main-section { padding: 20px 0 36px; }
    .ep-detail-main  { gap: 14px; }
}

/* ---- Shared card style ---- */
.ep-card {
    background: #fff;
    border: 1px solid var(--ep-border, #e5e5e5);
    border-radius: var(--ep-radius, 8px);
    box-shadow: var(--ep-shadow);
    margin-bottom: 24px;
    overflow: hidden;
}
.ep-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ep-text, #333);
    margin: 0;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--ep-border, #e5e5e5);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ep-card-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: var(--ep-primary, #2c5d8f);
    border-radius: 2px;
    flex-shrink: 0;
}
.ep-card-body {
    padding: 18px 20px 16px;
}
.ep-card-body p:last-child { margin-bottom: 0; }

/* ---- Photo grid ---- */
.ep-photo-grid {
    padding: 0;
    margin-bottom: 24px;
}
/* Main hero image — 16:9 aspect ratio, scales with column width */
.ep-photo-main {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 16 / 9;
    background: var(--ep-bg, #f7f8fa);
}
.ep-photo-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.ep-photo-main:hover img { transform: scale(1.02); }
.ep-photo-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
/* Thumbnail strip — 4-up below the main image */
.ep-photo-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-top: 3px;
}
.ep-photo-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 4 / 3;
    background: var(--ep-bg, #f7f8fa);
}
.ep-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.ep-photo-thumb:hover img { transform: scale(1.06); }
.ep-photo-more-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.52);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ---- Description card ---- */
.ep-description .ep-card-body { font-size: .95rem; line-height: 1.7; color: var(--ep-text, #333); }

/* ---- Amenities grid ---- */
.ep-amenities-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 10px;
}
.ep-amenity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--ep-text, #333);
    line-height: 1.3;
}
.ep-amenity-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--ep-bg, #f7f8fa);
    border: 1px solid var(--ep-border, #e5e5e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ep-primary, #2c5d8f);
    font-size: 15px;
    flex-shrink: 0;
}
.ep-amenity-name { flex: 1; }

/* ---- Tags ---- */
.ep-tags-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-tag-link {
    display: inline-block;
    background: var(--ep-bg, #f7f8fa);
    color: var(--ep-primary, #2c5d8f);
    border: 1px solid var(--ep-border, #e5e5e5);
    border-radius: 4px;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 10px;
    text-decoration: none;
    transition: var(--ep-transition);
}
.ep-tag-link:hover {
    background: var(--ep-primary, #2c5d8f);
    color: #fff;
    border-color: var(--ep-primary, #2c5d8f);
}

/* ---- Location card (detail-page sidebar) — renamed from ep-map-card to
        avoid collision with the list-view map sidebar card style (line ~282) ---- */
.ep-location-card {
    /* Force block layout so title + map iframe always stack vertically.
       Fioxen theme sometimes applies display:flex to .ep-card children. */
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}
/* Map iframe wrapper inside the location card */
.ep-location-card .ep-map-wrap,
.ep-map-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    background: var(--ep-bg, #f7f8fa);
    /* No border-radius here — .ep-card already clips corners via overflow:hidden */
    overflow: hidden;
}
/* When .ep-map-wrap is a direct child of .ep-card (not inside .ep-location-card)
   it still needs radius so it doesn't look odd in other contexts. */
.ep-card > .ep-map-wrap {
    border-radius: 0;  /* card clips it */
}
.ep-map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Leaflet map fallback (ep-single.js inits when no iframe present) */
.ep-single-map { position: relative; }

@media (max-width: 600px) {
    .ep-map-wrap { height: 210px; }
}

/* Get Directions link below the map */
.ep-directions-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ep-primary, #2c5d8f);
    text-decoration: none;
    border-top: 1px solid var(--ep-border, #e5e5e5);
    transition: background .2s, color .2s;
    background: #fff;
}
.ep-directions-link i { font-size: 17px; }
.ep-directions-link:hover {
    background: var(--ep-primary, #2c5d8f);
    color: #fff;
}

/* ---- Contact info card ---- */
.ep-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ep-border, #e5e5e5);
    font-size: .9rem;
    color: var(--ep-text, #333);
}
.ep-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.ep-info-row i {
    color: var(--ep-primary, #2c5d8f);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.ep-info-row a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}
.ep-info-row a:hover { color: var(--ep-primary, #2c5d8f); }

/* ---- Booking card ---- */
.ep-book-card {
    border-top: 3px solid var(--ep-accent, #e84545);
}
.ep-book-times {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ep-border, #e5e5e5);
    font-size: .88rem;
    color: var(--ep-text, #333);
}
.ep-book-times strong { color: var(--ep-text, #333); font-weight: 700; }
.ep-book-card .ep-btn-book {
    display: flex;
    margin: 16px 20px 16px;
    width: calc(100% - 40px);
    justify-content: center;
}

/* ---- Hours table ---- */
.ep-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.ep-hours-table .ep-hours-row td {
    padding: 7px 4px;
    border-bottom: 1px solid var(--ep-border, #e5e5e5);
    line-height: 1.4;
}
.ep-hours-table .ep-hours-row:last-child td { border-bottom: none; }
.ep-hours-day {
    font-weight: 600;
    color: var(--ep-text, #333);
    width: 110px;
    white-space: nowrap;
}
.ep-hours-time {
    color: var(--ep-muted, #666);
}
/* Today's row */
.ep-hours-row.ep-hours-today td {
    font-weight: 700;
    background-color: rgba(63,95,74,.08);
}
.ep-hours-row.ep-hours-today .ep-hours-day {
    color: #3f5f4a;
}
.ep-hours-row.ep-hours-today .ep-hours-time {
    color: #3f5f4a;
}

/* ---- Open / Closed status badge ---- */
.ep-open-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 3px 9px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 8px;
    white-space: nowrap;
}
.ep-open-badge::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ep-open-now {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}
.ep-open-now::before { background: #22c55e; }
.ep-closed-now {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}
.ep-closed-now::before { background: #ef4444; }

/* Inline badge in the info bar hours box */
.ep-open-status-inline {
    display: block;
    margin-top: 4px;
}
.ep-open-status-inline .ep-open-badge {
    margin-left: 0;
    font-size: 10px;
    padding: 2px 7px;
}

/* Card title badge alignment */
.ep-card-title .ep-open-status-badge {
    display: inline-block;
    vertical-align: middle;
}
.ep-open-status-badge:empty { display: none; }

/* Featured badge */
.ep-badge-featured {
    display: inline-block;
    background: var(--ep-secondary, #f0a500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 3px;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media ( max-width: 1024px ) {
    .ep-detail-content { flex-basis: 100%; }
    .ep-detail-sidebar { flex-basis: 100%; min-width: 0; }
    .ep-info-bar-right { width: 100%; }
    .ep-amenities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 767px ) {
    .ep-hero-section  { min-height: 240px; }
    .ep-hero-title    { font-size: 1.9rem; }
    /* Photo grid uses aspect-ratio — no fixed heights needed at mobile */
    .ep-photo-strip   { grid-template-columns: repeat(3, 1fr); }
    .ep-amenities-grid { grid-template-columns: repeat(2, 1fr); }
    .ep-actions-row   { flex-direction: column; align-items: flex-start; }
    .ep-info-bar .ep-container { flex-direction: column; }
    .ep-meta-box-icon { width: 36px; height: 36px; font-size: 15px; }
}



/* ==========================================================================
   EP Lodging Categories Grid  (.ep-cat-grid / .ep-cat-card)
   Used by: EP Lodging Categories widget + [ep_lodging_categories] shortcode
   Fully self-contained — zero Fioxen theme-class dependency.
   Renders correctly in Elementor editor, preview, and frontend.
   ========================================================================== */

/*
   Elementor Container fix.
   When placed inside an Elementor flex container (.e-con / .e-con-inner),
   the widget element becomes a flex item and collapses to auto/0 width.
   Force the widget element AND its inner container to be full-width block
   so the grid always stretches to 100% of the column.
*/
.elementor-widget-ep_lodging_categories {
    width: 100% !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
    display: block !important;
}
.elementor-widget-ep_lodging_categories .elementor-widget-container {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box;
}
.ep-cat-outer {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Grid wrapper */
.ep-cat-grid {
    display: grid;
    width: 100%;
    gap: var(--ep-cat-gap, 20px);
}
.ep-cat-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ep-cat-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ep-cat-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Card cell */
.ep-cat-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,.13);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ep-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0,0,0,.22);
}

/* Photo area — height driven by CSS custom property */
.ep-cat-card-bg {
    position: relative;
    width: 100%;
    height: var(--ep-cat-h, 280px);
    overflow: hidden;
    border-radius: 10px;
    background: #1a3a5c;
}

/* Actual photo */
.ep-cat-card-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.ep-cat-card:hover .ep-cat-card-bg img {
    transform: scale(1.06);
}

/* Placeholder gradient when no image is available */
.ep-cat-card-bg .ep-cat-img-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2c5d8f 0%, #1a3a5c 100%);
}

/* Dark gradient over photo so text is legible */
.ep-cat-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.22) 40%,
        rgba(0,0,0,.76) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Count badge — top-right */
.ep-cat-count {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 5px 12px;
    border-radius: 20px;
    z-index: 2;
    white-space: nowrap;
}

/* Title + description — bottom-left */
.ep-cat-card-foot {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 18px 18px;
    z-index: 2;
}
.ep-cat-name {
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff !important;
    line-height: 1.3;
    letter-spacing: .2px;
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
    transition: color .2s ease;
}
.ep-cat-desc {
    display: block;
    margin: 4px 0 0;
    font-size: .80rem;
    color: rgba(255,255,255,.78);
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Full-card overlay link — sits above everything, makes entire card clickable */
.ep-cat-card-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .ep-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .ep-cat-grid { grid-template-columns: 1fr !important; }
    .ep-cat-name  { font-size: .92rem; }
    .ep-cat-count { font-size: 11px; padding: 4px 9px; }
}

/* ====================================================================
   LEAFLET CUSTOM PIN — moved here from ep-map.js (was inline <style>)
   ==================================================================== */
.ep-map-marker {
    background: transparent;
    border: none;
}
.ep-marker-pin {
    width: 20px;
    height: 28px;
    background: var(--ep-primary, #2c5d8f);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.ep-marker-pin::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
}

/* ====================================================================
   PRICE DISPLAY — .ep-price-range / .ep-price-per / .ep-price-sep
   Output by EP_Helpers::format_price_range() — used in cards + singles
   ==================================================================== */
.ep-price-range {
    font-weight: 700;
    color: var(--ep-primary, #2c5d8f);
    /* The $ sign is output by format_price_range() — no ::before needed */
}
.ep-price-per {
    font-size: .82em;
    font-weight: 400;
    color: var(--ep-muted, #777);
    margin-left: 2px;
}
.ep-price-sep {
    margin: 0 3px;
    color: var(--ep-muted, #777);
    font-weight: 400;
}

/* Price badge on card image overlay (list + masonry layouts) */
.ep-price-badge {
    line-height: 1.3;
}
.ep-price-badge .ep-price-range {
    color: #fff;
    font-size: 1em;
}
.ep-price-badge .ep-price-per {
    color: rgba(255,255,255,.85);
}

/* Price in detail-page info bar */
.ep-meta-box-value.ep-price-display .ep-price-range {
    font-size: 1.15em;
}
.ep-meta-box-value.ep-price-display .ep-price-per {
    font-size: .78em;
}

/* Directions link — base rules defined earlier in this file (search ".ep-directions-link") */


/* Mobile sidebar filter overlay
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    /* The .lt-control-search-mobile button is already styled by Fioxen;
       here we add the overlay behaviour when lt-mobile-open is present. */
    .lt-listing-filters {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: 100%;
        overflow-y: auto;
        background: #fff;
        z-index: 9999;
        box-shadow: 4px 0 24px rgba(0,0,0,.18);
        padding: 16px;
        transition: transform .3s ease;
        transform: translateX(-100%);
    }
    .lt-listing-filters.lt-mobile-open {
        display: block;
        transform: translateX(0);
    }
    /* Dark backdrop behind the open sidebar */
    .lt-listing-filters.lt-mobile-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,.45);
        z-index: -1;
    }
    /* Mobile close button — shown only when overlay is open */
    .lt-control-search-mobile-close {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        padding: 6px 0 14px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--ep-border, #e5e5e5);
        color: var(--ep-text, #333);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }
    .lt-control-search-mobile-close i {
        font-size: 20px;
        color: var(--ep-accent, #e84545);
    }

    /* Hide the sidebar open button on mobile — we use .ep-mobile-filter-btn
       in the content column instead, so no duplicate buttons */
    .lt-page_layout-filters_left .ep-sidebar-col .lt-control-search-mobile {
        display: none;
    }
    /* Remove the sidebar col's visual space on mobile
       (form stays in DOM with position:fixed for overlay to work) */
    .lt-page_layout-filters_left .ep-sidebar-col {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .lt-page_layout-filters_left .ep-sidebar-col .lt-sidebar-search {
        margin: 0;
        padding: 0;
    }
}

/* ── Mobile "Filters" button (content column, hidden on desktop) ──────── */
.ep-mobile-filter-btn {
    display: none;                          /* hidden on desktop */
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 20px;
    margin-bottom: 14px;
    background: var(--ep-primary, #2c5d8f);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    transition: background .18s ease;
    cursor: pointer;
}
.ep-mobile-filter-btn i { font-size: 16px; }
.ep-mobile-filter-btn:hover,
.ep-mobile-filter-btn:focus {
    background: var(--ep-primary-dark, #1e4270);
    color: #fff;
    text-decoration: none;
}
@media (max-width: 991px) {
    .ep-mobile-filter-btn { display: flex; }
}

/* Lock body scroll while mobile filter sidebar is open */
body.ep-sidebar-open {
    overflow: hidden;
}

/* ====================================================================
   GALLERY LIGHTBOX  —  .ep-lightbox
   Self-contained popup slideshow; no Elementor, Swiper, or fancybox.
   Triggered by [data-ep-gallery] links in single.php photo grid.
   ==================================================================== */

/* Overlay backdrop */
.ep-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    outline: none;
}
.ep-lightbox.ep-lb-open {
    display: flex;
    animation: ep-lb-fadein .22s ease;
}
@keyframes ep-lb-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Lock body scroll when lightbox is open */
body.ep-lb-body-lock {
    overflow: hidden !important;
}

/* ── Stage (image container) ─────────────────────────────────────── */
.ep-lb-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 92vw;
    max-height: 80vh;
}

/* Main image */
.ep-lb-img {
    display: block;
    max-width: 88vw;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition: opacity .28s ease;
    border-radius: 4px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .55);
    user-select: none;
}
.ep-lb-img.ep-lb-img-ready {
    opacity: 1;
}

/* ── Spinner ─────────────────────────────────────────────────────── */
.ep-lb-loader {
    position: absolute;
    display: none;
    font-size: 34px;
    color: rgba(255, 255, 255, .65);
    pointer-events: none;
}
.ep-lb-loader.ep-lb-loading {
    display: flex;
    animation: ep-spin .75s linear infinite;
}

/* ── Shared button base ──────────────────────────────────────────── */
.ep-lb-btn {
    position: fixed;
    background: rgba(255, 255, 255, .13);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    transition: background .15s ease, transform .15s ease;
    z-index: 100001;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.ep-lb-btn:hover,
.ep-lb-btn:focus-visible {
    background: rgba(255, 255, 255, .30);
}

/* Close — top-right corner */
.ep-lb-close {
    top: 16px;
    right: 16px;
}
.ep-lb-close:hover { transform: scale(1.1) rotate(90deg); }

/* Prev / Next — vertically centred on sides */
.ep-lb-prev {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.ep-lb-next {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.ep-lb-prev:hover { transform: translateY(-50%) scale(1.12); }
.ep-lb-next:hover { transform: translateY(-50%) scale(1.12); }

/* ── Footer (counter + caption) ─────────────────────────────────── */
.ep-lb-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    letter-spacing: .4px;
    text-align: center;
    max-width: 80vw;
    pointer-events: none;
    user-select: none;
}
.ep-lb-counter {
    font-weight: 700;
    color: #fff;
    font-size: 14px;
}
.ep-lb-title {
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70vw;
}

/* ====================================================================
   RESTAURANT PRICE BADGE ON CARDS  —  .ep-restaurant-price
   Used in templates/restaurants/loop/grid.php|list.php|masonry.php
   ==================================================================== */
.ep-restaurant-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ep-primary, #2c5d8f);
}
.ep-restaurant-price .icon {
    font-size: 13px;
    color: var(--ep-muted, #777);
}

/* ====================================================================
   RESTAURANT PRICE TIER PILLS  —  $ / $$ / $$$ / $$$$
   Used in restaurants-sidebar.php price filter.
   ==================================================================== */
.ep-price-tier-row .content-inner {
    padding: 14px 16px;
    display: block;
}
.ep-price-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ep-text, #333);
    margin-bottom: 10px;
}
.ep-price-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ep-price-tier-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 5px 12px;
    border: 1px solid var(--ep-border, #d8d8d8);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ep-text, #444);
    background: #fff;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
    user-select: none;
    line-height: 1.4;
}
.ep-price-tier-btn:hover {
    border-color: var(--ep-primary, #2c5d8f);
    color: var(--ep-primary, #2c5d8f);
}
.ep-price-tier-btn.active,
.ep-price-tier-btn input:checked ~ * {
    background: var(--ep-primary, #2c5d8f);
    border-color: var(--ep-primary, #2c5d8f);
    color: #fff;
}
.ep-price-tier-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Photo grid — cursor pointer on gallery links ────────────────── */
.ep-photo-grid [data-ep-gallery] {
    cursor: zoom-in;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ep-lb-prev { left: 6px; }
    .ep-lb-next { right: 6px; }
    .ep-lb-btn  { width: 40px; height: 40px; font-size: 18px; }
    .ep-lb-img  { max-width: 96vw; max-height: 72vh; }
}

/* =======================================================================
   TRIBE-EVENT-BLOCK  — used by [ep_events_upcoming] and [ep_events layout="tribe"]
   Mirrors GVA / Fioxen gva-element-gva-events / EP_Events_Featured_Renderer
   ======================================================================= */

/* ── Card container ────────────────────────────────────────────────────── */
.tribe-event-block {
    position: relative;
    background: #fff;
    border-radius: var(--ep-radius, 8px);
    overflow: hidden;
    box-shadow: var(--ep-shadow, 0 2px 12px rgba(0,0,0,.08));
    transition: box-shadow .25s ease, transform .2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.tribe-event-block:hover {
    box-shadow: var(--ep-shadow-hover, 0 6px 24px rgba(0,0,0,.14));
    transform: translateY(-3px);
}

/* ── Image wrapper ─────────────────────────────────────────────────────── */
.tribe-events-event-image {
    position: relative;
    overflow: hidden;
    height: 220px;
    background: #1a3a5c;
}
.tribe-events-event-image a { display: block; height: 100%; }
.tribe-events-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.tribe-event-block:hover .tribe-events-event-image img {
    transform: scale(1.05);
}

/* ── Date badge (top-left overlay) ────────────────────────────────────── */
.tribe-start-date {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: #00b09b;            /* overridden per-card via inline style */
    color: #fff;
    border-radius: 6px;
    padding: 7px 12px;
    text-align: center;
    line-height: 1.1;
    min-width: 48px;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.tribe-start-date .day {
    font-size: 22px;
    font-weight: 700;
    display: block;
}
.tribe-start-date .month {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    display: block;
    text-transform: uppercase;
}

/* ── Featured ribbon ───────────────────────────────────────────────────── */
.tribe-event-block .lt-featured {
    position: absolute;
    top: 14px;
    right: -28px;
    z-index: 2;
    background: var(--ep-secondary, #f0a500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 36px;
    transform: rotate(45deg);
    letter-spacing: .5px;
    text-transform: uppercase;
    pointer-events: none;
}

/* ── Content block ─────────────────────────────────────────────────────── */
.tribe-event-content {
    padding: 18px 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Schedule line */
.tribe-events-event-meta {
    font-size: 13px;
    color: var(--ep-muted, #777);
    display: flex;
    align-items: center;
    gap: 5px;
}
.tribe-event-schedule-details {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tribe-event-schedule-details .icon {
    color: var(--ep-primary, #2c5d8f);
    font-size: 14px;
    flex-shrink: 0;
}

/* Title */
.tribe-events-list-event-title.event-title {
    margin: 2px 0 4px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.tribe-events-list-event-title.event-title a {
    color: var(--ep-text, #333);
    text-decoration: none;
    transition: color .2s ease;
}
.tribe-events-list-event-title.event-title a:hover {
    color: var(--ep-primary, #2c5d8f);
}

/* Location */
.tribe-event-location {
    font-size: 13px;
    color: var(--ep-muted, #777);
    display: flex;
    align-items: flex-start;
    gap: 5px;
}
.tribe-event-location i {
    color: var(--ep-accent, #e84545);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Tickets button */
.tribe-event-tickets {
    margin-top: auto;
    padding-top: 10px;
}
.ep-tribe-ticket-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ep-primary, #2c5d8f);
    color: #fff;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}
.ep-tribe-ticket-btn:hover {
    background: #1e4270;
    color: #fff;
}

/* Status badges */
.tribe-event-content .ep-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ep-status-past  { background: #f5f5f5; color: #999; }
.ep-status-today { background: #fff3cd; color: #856404; }

/* Full-card link overlay */
.tribe-event-url {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}
/* Lift ticket button above overlay */
.tribe-event-tickets,
.tribe-events-event-meta a,
.tribe-events-list-event-title a {
    position: relative;
    z-index: 2;
}

/* ── Responsive tribe grid ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tribe-events-event-image { height: 180px; }
    .tribe-events-list-event-title.event-title { font-size: 15px; }
}
@media (max-width: 480px) {
    .tribe-events-event-image { height: 160px; }
    .tribe-event-content { padding: 14px 14px 12px; }
}


/* =======================================================================
   EP UPCOMING EVENTS FILTER BAR  — [ep_events_upcoming] inline filter
   ======================================================================= */

/* ── Wrapper ───────────────────────────────────────────────────────────── */
.ep-events-upcoming-wrap { position: relative; }

/* ─────────────────────────────────────────────────────────────────────────
   EP EVENTS — SIMPLIFIED FILTER BAR  (.ep-sf-bar)
   Used by [ep_events_upcoming show_search="yes"]
   Two fields: keyword + date range
   ─────────────────────────────────────────────────────────────────────── */
.ep-sf-bar {
    margin-bottom: 28px;
}
.ep-sf-form { width: 100%; }

/* Pill-shaped single-row container */
.ep-sf-inner {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    padding: 6px 6px 6px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    overflow: visible;
}

/* ── Fields ── */
.ep-sf-field {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 0;
}

/* Vertical divider between keyword and date range */
.ep-sf-keyword { border-right: 1.5px solid #e2e8f0; }

/* ── Keyword field ── */
.ep-sf-keyword {
    position: relative;
    padding: 0 12px 0 18px;
    gap: 8px;
}
.ep-sf-label {
    color: #94a3b8;
    font-size: 17px;
    flex-shrink: 0;
    cursor: pointer;
    line-height: 1;
}
.ep-sf-input {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14.5px;
    color: #1e293b;
    padding: 0;
}
.ep-sf-input::placeholder { color: #94a3b8; }

/* Clear × button */
.ep-sf-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color .15s;
}
.ep-sf-clear:hover { color: #e63946; }
.ep-kw-clear--hidden { display: none !important; }

/* ── Date range field ── */
.ep-sf-daterange {
    padding: 0 12px 0 14px;
    gap: 0;
    flex: 1.4 1 0;
    position: relative;
}
.ep-sf-daterange-icon {
    color: #94a3b8;
    font-size: 17px;
    flex-shrink: 0;
    margin-right: 8px;
    line-height: 1;
}
/* Flatpickr range display input (replaces dual date pickers) */
.ep-sf-range-display {
    flex: 1 1 0;
    min-width: 160px;
    height: 40px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #374151;
    padding: 0;
    cursor: pointer;
}
.ep-sf-range-display::placeholder { color: #94a3b8; }
.ep-sf-range-display:focus { color: var(--ep-primary, #2c5d8f); }
/* Hide button — shown only when dates are selected */
.ep-date-clear { display: none; }
.ep-date-clear:not(.ep-date-clear--hidden) { display: flex; }

/* ── Active state: date range field when dates are selected ── */
.ep-sf-daterange.has-dates {
    background: rgba(44,93,143,.05);
    border-radius: 40px;
}
.ep-sf-daterange.has-dates .ep-sf-daterange-icon { color: var(--ep-primary, #2c5d8f); }
.ep-sf-daterange.has-dates .ep-sf-range-display  { color: var(--ep-primary, #2c5d8f); font-weight: 600; }

/* ── Loading / filtering state ── */
/* Applied to .ep-sf-inner while AJAX is running */
.ep-sf-inner.ep-filtering {
    pointer-events: none;
    opacity: .7;
}
/* Subtle pulse on the date field while filtering */
.ep-sf-daterange.has-dates.ep-filtering-field {
    animation: ep-sf-pulse .8s ease-in-out infinite alternate;
}
@keyframes ep-sf-pulse {
    from { background: rgba(44,93,143,.05); }
    to   { background: rgba(44,93,143,.13); }
}

/* ── Legacy: keep .ep-sf-date for any other templates that still use it ── */
.ep-sf-date {
    flex: 1 1 0;
    min-width: 80px;
    height: 40px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #1e293b;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.ep-sf-date:focus { color: var(--ep-primary, #2c5d8f); }
/* Show native date picker chrome; style just the text */
.ep-sf-date::-webkit-calendar-picker-indicator {
    opacity: .45;
    cursor: pointer;
}
.ep-sf-date-sep {
    flex-shrink: 0;
    padding: 0 6px;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1;
    font-weight: 300;
}

/* ── Reset button (icon only) ── */
.ep-sf-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 6px;
    flex-shrink: 0;
    background: transparent;
    color: #94a3b8;
    border: 1.5px solid #e2e8f0;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    transition: color .2s, border-color .2s, transform .2s;
}
.ep-sf-reset-btn:hover {
    color: #e63946;
    border-color: #e63946;
    transform: rotate(-45deg);
    text-decoration: none;
}

/* ── Results bar (opt-in: show_count="yes") ─────────────────────────────── */
.ep-upcoming-results-bar {
    font-size: 14px;
    color: var(--ep-muted, #777);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ep-border, #e5e5e5);
}
.ep-upcoming-results-bar .results-number {
    font-weight: 700;
    color: var(--ep-text, #333);
    font-size: 16px;
    margin-right: 4px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ep-sf-inner {
        flex-wrap: wrap;
        border-radius: 16px;
        padding: 10px 12px;
        gap: 8px;
    }
    .ep-sf-keyword,
    .ep-sf-daterange {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1.5px solid #e2e8f0;
        padding: 0 0 8px;
    }
    .ep-sf-daterange { border-bottom: none; padding-bottom: 0; }
    .ep-sf-reset-btn  { flex-shrink: 0; }
}
@media (max-width: 480px) {
    .ep-sf-date-sep { display: none; }
    .ep-sf-date     { min-width: 0; flex: 1 1 100%; }
    .ep-sf-daterange { flex-wrap: wrap; gap: 6px; }
    .ep-sf-range-display { min-width: 0; }
}

/* ── Flatpickr range input: wider to fit "Jan 5, 2025 → Jan 20, 2025" ── */
.ep-sf-range-display {
    min-width: 200px;
}
@media (max-width: 600px) {
    .ep-sf-range-display { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Flatpickr calendar — full custom theme
   monthSelectorType: 'static' in JS eliminates the dropdown-overlay bug.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer shell ── */
.flatpickr-calendar {
    font-family: inherit !important;
    font-size: 13px !important;
    border-radius: 16px !important;
    border: 1px solid #dde4ee !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06) !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 312px !important;
    max-width: calc(100vw - 20px) !important;
    z-index: 99999 !important;
    /* Avoid clipping by parent overflow on some themes */
    margin-top: 4px !important;
}
/* Arrow pointer (optional — hide it for a cleaner look) */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none !important; }

/* ── Month / year header ── */
.flatpickr-months {
    background: var(--ep-primary, #2c5d8f) !important;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}
.flatpickr-month {
    background: transparent !important;
    height: 54px !important;
    line-height: 54px !important;
    border-radius: 0 !important;
    flex: 1 !important;
    overflow: visible !important;
}
/* Prev / Next arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 54px !important;
    padding: 0 !important;
    top: auto !important;
    color: rgba(255,255,255,.9) !important;
    fill: rgba(255,255,255,.9) !important;
    border-radius: 0 !important;
    transition: background .15s !important;
    flex-shrink: 0 !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    fill: #fff !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: inherit !important;
    width: 13px !important;
    height: 13px !important;
}

/* Month + Year labels */
.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 54px !important;
    padding: 0 !important;
    position: static !important;
    width: 100% !important;
    left: auto !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
}
/* Static month text (monthSelectorType:'static') */
.flatpickr-current-month .cur-month {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: .2px !important;
}
/* Year number input wrapper */
.flatpickr-current-month .numInputWrapper {
    width: 60px !important;
}
.flatpickr-current-month .numInputWrapper input {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    padding: 0 18px 0 2px !important;
    text-align: center !important;
    width: 100% !important;
}
.flatpickr-current-month .numInputWrapper:hover {
    background: rgba(255,255,255,.14) !important;
    border-radius: 6px !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after  { border-bottom-color: rgba(255,255,255,.8) !important; }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: rgba(255,255,255,.8) !important; }
/* Month dropdown select — hidden when monthSelectorType:'static', styled if ever shown */
.flatpickr-current-month select.flatpickr-monthDropdown-months {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    outline: none !important;
    max-width: 130px !important;
}
.flatpickr-current-month select.flatpickr-monthDropdown-months:hover {
    background: rgba(255,255,255,.15) !important;
}
.flatpickr-current-month select.flatpickr-monthDropdown-months option {
    background: #2c5d8f !important;
    color: #fff !important;
}

/* ── Weekday header row ── */
.flatpickr-weekdays {
    background: #f0f4f9 !important;
    border-bottom: 1px solid #e2e8f2 !important;
    padding: 8px 0 7px !important;
    height: auto !important;
}
.flatpickr-weekday {
    color: var(--ep-primary, #2c5d8f) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    line-height: 1 !important;
}
span.flatpickr-weekday { background: transparent !important; }

/* ── Days container ── */
.flatpickr-days {
    border: none !important;
    width: 100% !important;
    padding: 0 !important;
}
.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 6px 10px 12px !important;
    box-sizing: border-box !important;
}

/* ── Individual day cells ── */
.flatpickr-day {
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 36px !important;
    line-height: 36px !important;
    max-width: 36px !important;
    width: 36px !important;
    margin: 2px 1px !important;
    border: 1px solid transparent !important;
    color: #334155 !important;
    transition: background .12s, color .12s, border-color .12s !important;
}
.flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange):not(.flatpickr-disabled) {
    background: rgba(44,93,143,.10) !important;
    border-color: transparent !important;
    color: var(--ep-primary, #2c5d8f) !important;
    font-weight: 600 !important;
}
/* Selected start + end */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--ep-primary, #2c5d8f) !important;
    border-color: var(--ep-primary, #2c5d8f) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}
.flatpickr-day.startRange { border-radius: 8px 4px 4px 8px !important; }
.flatpickr-day.endRange   { border-radius: 4px 8px 8px 4px !important; }
.flatpickr-day.startRange.endRange { border-radius: 8px !important; }
/* In-range highlight */
.flatpickr-day.inRange {
    background: rgba(44,93,143,.10) !important;
    border-color: transparent !important;
    color: var(--ep-primary, #2c5d8f) !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    box-shadow: -4px 0 0 rgba(44,93,143,.10), 4px 0 0 rgba(44,93,143,.10) !important;
}
/* Today indicator */
.flatpickr-day.today {
    border-color: var(--ep-primary, #2c5d8f) !important;
    font-weight: 700 !important;
    color: var(--ep-primary, #2c5d8f) !important;
}
.flatpickr-day.today.selected,
.flatpickr-day.today.startRange,
.flatpickr-day.today.endRange { color: #fff !important; }
.flatpickr-day.today:hover:not(.selected):not(.startRange):not(.endRange) {
    background: var(--ep-primary, #2c5d8f) !important;
    border-color: var(--ep-primary, #2c5d8f) !important;
    color: #fff !important;
}
/* Disabled + out-of-month days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #c8d3e0 !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: default !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #c0cad8 !important;
}

/* ── Input open state ── */
.ep-flatpickr-range.active,
.ep-flatpickr-range:focus { outline: none !important; }

/* ── Mobile: full-width, centre-anchored ── */
@media (max-width: 480px) {
    .flatpickr-calendar {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        margin-top: 6px !important;
    }
    .dayContainer { padding: 4px 6px 10px !important; }
    .flatpickr-day {
        height: 34px !important;
        line-height: 34px !important;
        max-width: 34px !important;
        width: 34px !important;
        font-size: 12px !important;
        margin: 1px !important;
    }
}

/* =======================================================================
   EP EVENTS LISTING — TOP FILTER BAR  (.ep-events-filter-bar)
   Used by [ep_events] — search, date range, category/type, search+reset
   ======================================================================= */

.ep-events-filter-bar {
    margin-bottom: 28px;
}
.ep-events-top-form { width: 100%; }

/* ── Flex row ─────────────────────────────────────────────────────────── */
.ep-filter-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    background: #fff;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ── Each field ─────────────────────────────────────────────────────── */
.ep-filter-field { flex: 1 1 160px; min-width: 0; }
.ep-filter-keyword   { flex: 2 1 220px; }
.ep-filter-daterange { flex: 2 1 280px; }
.ep-filter-cat,
.ep-filter-type      { flex: 1 1 150px; }
.ep-filter-submit,
.ep-filter-reset     { flex: 0 0 auto; }

/* ── Input group (icon + input) ─────────────────────────────────────── */
.ep-filter-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #f7f8fa;
    border: 1px solid #dde2e8;
    border-radius: 7px;
    overflow: hidden;
    height: 44px;
    transition: border-color .2s;
}
.ep-filter-input-group:focus-within {
    border-color: var(--ep-primary, #2c5d8f);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(44,93,143,.08);
}

.ep-filter-icon {
    position: absolute;
    left: 11px;
    font-size: 15px;
    color: #888;
    pointer-events: none;
    z-index: 1;
}

/* ── Text / date inputs ─────────────────────────────────────────────── */
.ep-filter-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 12px 0 34px;
    font-size: 14px;
    color: #333;
    outline: none;
    box-shadow: none;
}
.ep-filter-input::placeholder { color: #aaa; }
input.ep-filter-input[type="date"] {
    padding-left: 34px;
    cursor: pointer;
}

/* ── Select ─────────────────────────────────────────────────────────── */
.ep-filter-select {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23777' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* ── Date range — side by side ──────────────────────────────────────── */
.ep-filter-daterange-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ep-filter-date-sep {
    color: #aaa;
    font-size: 13px;
    flex-shrink: 0;
}
.ep-filter-daterange-inner .ep-filter-input-group { flex: 1 1 0; }

/* ── Clear (×) button inside keyword field ──────────────────────────── */
.ep-filter-keyword .ep-kw-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    padding: 2px 4px;
    line-height: 1;
    font-size: 13px;
    z-index: 2;
}
.ep-filter-keyword .ep-kw-clear:hover { color: #555; }
.ep-filter-keyword .ep-kw-clear--hidden { display: none; }

/* ── Search button ──────────────────────────────────────────────────── */
.ep-filter-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 22px;
    background: var(--ep-primary, #2c5d8f);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s;
    white-space: nowrap;
}
.ep-filter-search-btn:hover {
    background: var(--ep-primary-dark, #1e4470);
    transform: translateY(-1px);
}
.ep-filter-search-btn i { font-size: 15px; }

/* ── Reset button ───────────────────────────────────────────────────── */
.ep-filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    background: #f1f3f5;
    color: #555;
    border: 1px solid #dde2e8;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.ep-filter-reset-btn:hover {
    background: #e9ecef;
    color: #222;
    text-decoration: none;
}
.ep-filter-reset-btn i { font-size: 13px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .ep-filter-bar-inner { padding: 12px; gap: 8px; }
    .ep-filter-field,
    .ep-filter-keyword,
    .ep-filter-daterange { flex: 1 1 100%; }
    .ep-filter-submit,
    .ep-filter-reset     { flex: 1 1 auto; }
    .ep-filter-search-btn,
    .ep-filter-reset-btn  { width: 100%; justify-content: center; }
    .ep-filter-daterange  { flex-wrap: wrap; }
    .ep-filter-daterange-inner .ep-filter-input-group { flex: 1 1 120px; }
}
@media (max-width: 480px) {
    .ep-filter-daterange-inner { flex-direction: column; }
    .ep-filter-date-sep { display: none; }
}

/* =======================================================================
   EVENT SINGLE DETAIL PAGE V2
   .ep-event-single-v2  —  hero banner + 8/4 col layout + sidebar
   ======================================================================= */

/* ── 1. Hero Banner — SPLIT LAYOUT (title left / image right) ──────── */
/*
 * Background: solid brand gradient — no blurred image background.
 * Image from Google (or any source) is shown cleanly on the RIGHT side,
 * not stretched/blurred as a full-width hero backdrop.
 */
.ep-event-hero {
    position: relative;
    background: linear-gradient(135deg, #0d1b2a 0%, var(--ep-primary, #2c5d8f) 100%);
    overflow: hidden;
}

/* ── Split grid container ── */
.ep-hero-inner {
    position: relative;
    z-index: 1;
    padding: 0 20px;
    width: 100%;
}

.ep-hero-split {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    align-items: center;
    padding: 52px 0;
}

/* No image: single column, centred text */
.ep-hero-split.ep-hero-no-image {
    grid-template-columns: 1fr;
    max-width: 760px;
    padding: 64px 0;
}

/* ── LEFT: text content ── */
.ep-hero-split-left {
    /* inherits white text from child rules below */
}

/* ── RIGHT: contained event image box ── */
.ep-hero-split-right {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 12px 48px rgba(0,0,0,.45);
    background: rgba(255,255,255,.06);
    flex-shrink: 0;
}

.ep-hero-event-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s ease;
}
.ep-hero-split-right:hover .ep-hero-event-img {
    transform: scale(1.03);
}

/* Overlay "view more" button on the image */
.ep-hero-img-more {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background .2s;
}
.ep-hero-img-more:hover {
    background: var(--ep-primary, #2c5d8f);
    color: #fff;
}

/* ── Breadcrumb (legacy class kept for compat; no longer rendered inside hero) ── */
.ep-hero-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.75);
    margin-bottom: 14px;
}
.ep-hero-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.ep-hero-breadcrumb a:hover { color: #fff; }
.ep-hero-breadcrumb i { font-size: 10px; color: rgba(255,255,255,.5); }
.ep-hero-breadcrumb span { color: #fff; }

/* ── Unified detail-page breadcrumb bar (below hero on both events & lodging) ── */
.ep-detail-breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid var(--ep-border, #e5e5e5);
    padding: 10px 0;
}
.ep-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: .82rem;
    color: var(--ep-muted, #777);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ep-detail-breadcrumb a {
    color: var(--ep-muted, #777);
    text-decoration: none;
    transition: color .2s;
}
.ep-detail-breadcrumb a:hover {
    color: var(--ep-primary, #2c5d8f);
}
.ep-detail-breadcrumb i {
    font-size: 10px;
    color: #bbb;
    line-height: 1;
}
.ep-detail-breadcrumb span[aria-current="page"] {
    color: var(--ep-text, #333);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* Category badge chips (always on dark bg inside hero) */
.ep-hero-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.ep-hero-cats .cat-item {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    letter-spacing: .4px;
    text-transform: uppercase;
    transition: background .2s;
}
.ep-hero-cats .cat-item:hover {
    background: rgba(255,255,255,.3);
    color: #fff;
}
.ep-badge-featured {
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* Title */
.ep-hero-title {
    font-size: clamp(24px, 3.4vw, 42px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 18px;
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
    max-width: 620px;
}

/* Meta bar (location, date, time) */
.ep-hero-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}
.ep-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.88);
    font-size: 14px;
}
.ep-hero-meta-item i { font-size: 15px; color: rgba(255,255,255,.65); }

/* Gallery trigger button */
.ep-hero-gallery-btn-wrap { margin-top: 0; }
.ep-hero-gallery-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 20px;
    border-radius: 24px;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.ep-hero-gallery-btn:hover {
    background: rgba(255,255,255,.26);
    border-color: rgba(255,255,255,.5);
    color: #fff;
    text-decoration: none;
}

/* ── Responsive: hero split ── */
@media (max-width: 1100px) {
    .ep-hero-split { grid-template-columns: 1fr 320px; gap: 36px; }
}
@media (max-width: 767px) {
    .ep-hero-split {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 32px 0 0;
    }
    .ep-hero-split-right {
        border-radius: 0;
        aspect-ratio: 16 / 7;
        margin: 24px -20px 0; /* bleed to edges on mobile */
        width: calc(100% + 40px);
    }
    .ep-hero-title { font-size: clamp(22px, 6vw, 32px); }
}

/* ── 2. Actions Bar ──────────────────────────────────────────────────── */
.ep-event-actions-bar {
    background: #fff;
    border-bottom: 1px solid #eaecf0;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    position: sticky;
    top: 0;
    z-index: 100;
}
.ep-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
}

/* Status badges */
.ep-status-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ep-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.ep-status-upcoming { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.ep-status-today    { background: #fff7ed; color: #d97706; border: 1px solid #fed7aa; }
.ep-status-past     { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }

/* Action buttons */
.ep-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ep-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    border: 2px solid transparent;
}
.ep-btn-primary {
    background: var(--ep-primary, #2c5d8f);
    color: #fff;
}
.ep-btn-primary:hover {
    background: var(--ep-primary-dark, #1e4470);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.ep-btn-outline {
    background: transparent;
    color: var(--ep-primary, #2c5d8f);
    border-color: var(--ep-primary, #2c5d8f);
}
.ep-btn-outline:hover {
    background: var(--ep-primary, #2c5d8f);
    color: #fff;
    text-decoration: none;
}
.ep-btn-ghost {
    background: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}
.ep-btn-ghost:hover {
    background: #e5e7eb;
    color: #111;
    text-decoration: none;
}

/* ── Source / ticket-provider buttons ───────────────────────────────── */
/* Used in actions bar: "Learn More", "Eventbrite", "Tickets.com" etc.  */
.ep-btn-source {
    background: transparent;
    color: #374151;
    border-color: #d1d5db;
    font-weight: 500;
    letter-spacing: 0;
}
.ep-btn-source i { margin-left: 5px; font-size: 12px; opacity: .7; }
.ep-btn-source:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
    text-decoration: none;
    transform: translateY(-1px);
}
.ep-source-buttons-row { flex-wrap: wrap; }

/* ── Share dropdown widget ───────────────────────────────────────────── */
.ep-share-wrap {
    position: relative;
}
.ep-share-toggle .ep-share-caret {
    font-size: 10px;
    margin-left: 4px;
    transition: transform .2s;
}
.ep-share-toggle[aria-expanded="true"] .ep-share-caret {
    transform: rotate(180deg);
}
.ep-share-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 180px;
    z-index: 999;
    overflow: hidden;
    padding: 4px 0;
    animation: ep-share-in .18s ease;
}
@keyframes ep-share-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ep-share-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-family: inherit;
    text-align: left;
}
.ep-share-link i { font-size: 16px; width: 18px; text-align: center; }
.ep-share-link:hover { background: #f3f4f6; color: #111; text-decoration: none; }
.ep-share-link.ep-copied { color: #16a34a; }
.ep-share-link.ep-copied .ep-copy-label::after { content: ' ✓'; }

/* Sidebar multi-source ticket buttons */
.ep-tickets-src-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.ep-tickets-src-btn:last-of-type { margin-bottom: 0; }
.ep-src-ext-icon { font-size: 11px; opacity: .6; flex-shrink: 0; }

/* ── 3. Body Layout ──────────────────────────────────────────────────── */
.ep-event-body {
    background: #f8f9fb;
    padding: 40px 0 60px;
}

/*
 * CSS Grid layout — immune to Bootstrap col-* overrides.
 * Main column fills remaining space; sidebar is fixed at 380px.
 * Below 1199px: shrinks to 320px. Below 991px: single-column stack.
 */
.ep-event-body-inner {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 1199px) {
    .ep-event-body-inner { grid-template-columns: 1fr 320px; }
}
@media (max-width: 991px) {
    .ep-event-body-inner {
        grid-template-columns: 1fr;
    }
    /* Sidebar stacks AFTER main content on mobile */
    .ep-event-sidebar { order: 2; }
    .ep-event-main    { order: 1; }
}

/* Main column */
.ep-event-main { min-width: 0; }

/* Sidebar column */
.ep-event-sidebar { min-width: 0; }

/* ── 4. Main Content Blocks ──────────────────────────────────────────── */
.ep-ev-block {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eaecf0;
    padding: 28px 30px;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.ep-ev-block:last-child { margin-bottom: 0; }

.ep-ev-block-title {
    font-size: 17px;
    font-weight: 700;
    color: #111;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f1f3f5;
    display: flex;
    align-items: center;
    gap: 9px;
}
.ep-ev-block-title i {
    font-size: 20px;
    color: var(--ep-primary, #2c5d8f);
}

/* Description */
.ep-ev-description-body {
    font-size: 15px;
    line-height: 1.75;
    color: #444;
}
.ep-ev-description-body p { margin-bottom: 1em; }

/* Schedule table */
.ep-ev-schedule-table { display: flex; flex-direction: column; gap: 0; }
.ep-ev-schedule-row {
    display: flex;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #f1f3f5;
    gap: 16px;
}
.ep-ev-schedule-row:last-child { border-bottom: none; padding-bottom: 0; }
.ep-ev-schedule-row.ep-schedule-today { background: #f0fdf4; margin: 0 -30px; padding: 13px 30px; }

.ep-ev-schedule-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .4px;
    min-width: 110px;
    flex-shrink: 0;
}
.ep-ev-schedule-label i { font-size: 16px; color: var(--ep-primary, #2c5d8f); }
.ep-ev-schedule-val {
    font-size: 15px;
    color: #111;
    font-weight: 500;
    flex: 1;
}
.ep-ev-price { color: var(--ep-primary, #2c5d8f); font-weight: 700; font-size: 16px; }

/* Tags */
.ep-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ep-tag-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3f4f6;
    color: #555;
    font-size: 13px;
    padding: 5px 13px;
    border-radius: 20px;
    text-decoration: none;
    transition: all .2s;
    border: 1px solid #e5e7eb;
}
.ep-tag-link:hover {
    background: var(--ep-primary, #2c5d8f);
    color: #fff;
    border-color: var(--ep-primary, #2c5d8f);
    text-decoration: none;
}
.ep-tag-link i { font-size: 11px; }

/* ── Venue Information block (main content column) ──────────────────── */
.ep-ev-venue-block { }  /* inherits .ep-ev-block padding/margin/card styles */
.ep-ev-venue-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
@media (max-width: 767px) {
    .ep-ev-venue-grid { grid-template-columns: 1fr; }
}
.ep-ev-venue-block .ep-venue-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f5;
}
.ep-ev-venue-block .ep-venue-row:last-child { border-bottom: none; }
.ep-ev-venue-block .ep-venue-icon {
    width: 32px;
    height: 32px;
    background: #f0f5fb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ep-primary, #2c5d8f);
    font-size: 15px;
    flex-shrink: 0;
}
.ep-ev-venue-block .ep-venue-info { flex: 1; min-width: 0; }
.ep-ev-venue-block .ep-venue-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ca3af;
    margin-bottom: 2px;
}
.ep-ev-venue-block .ep-venue-value {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
    display: block;
    word-break: break-word;
}
.ep-ev-venue-block .ep-venue-link { color: var(--ep-primary, #2c5d8f); }
.ep-ev-venue-block .ep-venue-link:hover { text-decoration: underline; }
.ep-ev-venue-block .ep-venue-name-row .ep-venue-value { color: #111; font-weight: 700; }
.ep-ev-venue-block .ep-venue-map-row .ep-venue-link {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ── Map popups — rich info card (single-page Leaflet + listing map) ─── */
.ep-popup-content {
    font-family: inherit;
    max-width: 260px;
    min-width: 200px;
    overflow: hidden;
    border-radius: 8px;
}
/* Image strip */
.ep-popup-img {
    margin: -10px -10px 10px; /* bleed into Leaflet's default padding */
    overflow: hidden;
    height: 130px;
}
.ep-popup-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Body */
.ep-popup-body {
    padding: 2px 0 0;
}
/* Rating row */
.ep-popup-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.ep-popup-stars {
    color: #f59e0b;
    font-size: 13px;
    letter-spacing: 1px;
}
.ep-popup-rating-num {
    font-size: 12px;
    font-weight: 700;
    color: #111;
}
.ep-popup-review-ct {
    font-size: 11px;
    color: #6b7280;
}
/* Date badge — events */
.ep-popup-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--ep-primary, #2c5d8f);
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    width: fit-content;
}
/* Title */
.ep-popup-content h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 5px;
    line-height: 1.3;
}
.ep-popup-content h4 a { color: #111; text-decoration: none; }
.ep-popup-content h4 a:hover { color: var(--ep-primary, #2c5d8f); }
/* Price */
.ep-popup-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--ep-primary, #2c5d8f);
    margin: 2px 0 4px;
}
/* Address / venue */
.ep-popup-address {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 8px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.ep-popup-addr-icon { flex-shrink: 0; font-style: normal; }
.ep-popup-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ep-primary, #2c5d8f);
    text-decoration: none;
    margin-top: 4px;
}
.ep-popup-link:hover { text-decoration: underline; }
/* Map sidebar card address */
.ep-map-card-address {
    font-size: 12px;
    color: #6b7280;
    margin: 4px 0 0;
}

/* ── 5. Sidebar Cards ────────────────────────────────────────────────── */
.ep-sidebar-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eaecf0;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    overflow: hidden;
}
.ep-sidebar-card:last-child { margin-bottom: 0; }

.ep-sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 20px;
    background: #f8f9fb;
    border-bottom: 1px solid #eaecf0;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ep-sidebar-card-header i {
    font-size: 18px;
    color: var(--ep-primary, #2c5d8f);
}

/* ── Calendar Date Widget Card ─────────────────────────────────────── */
.ep-sidebar-cal-card { overflow: hidden; padding: 0; }

/* Month + year header bar */
.ep-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    background: var(--ep-primary, #2c5d8f);
    color: #fff;
}
.ep-cal-hmonth {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.ep-cal-hyear {
    font-size: 13px;
    font-weight: 400;
    opacity: .8;
}

/* Large day + weekday body */
.ep-cal-body {
    text-align: center;
    padding: 20px 16px 16px;
    background: #fff;
    border-bottom: 1px solid #eaecf0;
    position: relative;
}

/* Subtle grid lines for the calendar-page look */
.ep-cal-body::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ep-primary, #2c5d8f), #e63946);
}

.ep-cal-day-num {
    display: block;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    color: #111;
    letter-spacing: -2px;
}
.ep-cal-weekday {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 6px;
}

/* Info rows (time, date, location) */
.ep-cal-footer {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
}
.ep-cal-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ep-cal-info-icon {
    width: 30px;
    height: 30px;
    background: #f0f6ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ep-cal-info-icon i {
    font-size: 15px;
    color: var(--ep-primary, #2c5d8f);
}
.ep-cal-info-text {
    font-size: 13.5px;
    color: #1f2937;
    font-weight: 500;
    line-height: 1.4;
    padding-top: 6px;
}

/* Status badges inside the cal footer */
.ep-cal-today-badge,
.ep-cal-past-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}
.ep-cal-today-badge {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}
.ep-cal-past-badge {
    background: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* ── Map card ── */
.ep-sidebar-map-card { padding: 0; overflow: hidden; }
.ep-sidebar-map-wrap {
    height: 240px;
    position: relative;
}
.ep-sidebar-map-wrap .lt-listing--map,
.ep-sidebar-map-wrap .ep-map-wrap {
    width: 100%;
    height: 100%;
}
.ep-sidebar-map-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}
.ep-sidebar-directions-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ep-primary, #2c5d8f);
    text-decoration: none;
    border-top: 1px solid #eaecf0;
    transition: background .2s;
}
.ep-sidebar-directions-link:hover {
    background: #f0f6ff;
    color: var(--ep-primary, #2c5d8f);
    text-decoration: none;
}
.ep-sidebar-directions-link i { font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   Full-width detail page map section  (.ep-detail-map-section)
   No title / button header — pure map, flush edge-to-edge.
   Shared by both events and lodging single pages.
   ══════════════════════════════════════════════════════════════════════ */
.ep-detail-map-section {
    padding: 0;
    overflow: hidden;
    line-height: 0;   /* remove phantom whitespace gap below iframe */
}
.ep-detail-map-canvas {
    width: 100%;
    height: 500px;
    position: relative;
    background: #e8ecf0;
    display: block;
}
.ep-detail-map-canvas iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}
/* Leaflet / JS map fill */
.ep-detail-map-canvas .ep-map-wrap,
.ep-detail-map-canvas .lt-listing--map {
    width: 100%;
    height: 100%;
}
/* Mobile */
@media (max-width: 767px) {
    .ep-detail-map-canvas { height: 340px; }
}

/* ── Venue info card ── */
.ep-sidebar-venue-body {
    padding: 8px 0;
}
.ep-venue-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid #f1f3f5;
    transition: background .15s;
}
.ep-venue-row:last-child { border-bottom: none; }
.ep-venue-row:hover { background: #fafbfc; }
.ep-venue-name-row { background: #f8f9fb; }
.ep-venue-icon {
    width: 36px;
    height: 36px;
    background: #eef2ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ep-venue-icon i {
    font-size: 17px;
    color: var(--ep-primary, #2c5d8f);
}
.ep-venue-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ep-venue-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
}
.ep-venue-value {
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
    word-break: break-word;
}
.ep-venue-link {
    color: var(--ep-primary, #2c5d8f);
    text-decoration: none;
}
.ep-venue-link:hover { text-decoration: underline; }

/* ── Tickets card ── */
.ep-sidebar-tickets-body { padding: 20px; }
.ep-tickets-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e5e7eb;
}
.ep-tickets-price-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}
.ep-tickets-price-value {
    font-size: 22px;
    color: var(--ep-primary, #2c5d8f);
    font-weight: 800;
}

.ep-tickets-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: #111;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: .3px;
    transition: background .2s, transform .15s;
}
.ep-tickets-buy-btn:hover {
    background: #222;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.ep-tickets-buy-btn i { font-size: 17px; }

.ep-tickets-free {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #ecfdf5;
    color: #059669;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    margin: 0;
}
.ep-tickets-free i { font-size: 16px; }

.ep-tickets-directions-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    color: #6b7280;
    text-decoration: none;
    transition: color .2s;
}
.ep-tickets-directions-link:hover { color: var(--ep-primary, #2c5d8f); }

@media (max-width: 767px) {
    .ep-event-body { padding: 20px 0 40px; }
    .ep-ev-block   { padding: 20px; }
    .ep-ev-schedule-row.ep-schedule-today { margin: 0 -20px; padding: 13px 20px; }
    .ep-actions-row { padding: 12px 16px; }
    .ep-hero-inner  { padding: 24px 16px 36px; }
    .ep-sidebar-map-wrap { height: 200px; }
    .ep-event-actions-bar { position: static; }
    /* Breadcrumb bar: tighten padding and clamp long titles */
    .ep-detail-breadcrumb-bar { padding: 8px 0; }
    .ep-detail-breadcrumb span[aria-current="page"] { max-width: 200px; }
    /* Share dropdown: open left on small screens to avoid right overflow */
    .ep-share-dropdown { right: auto; left: 0; }
    /* Source buttons: full-row wrapping */
    .ep-source-buttons-row { gap: 8px; }
    .ep-btn-source { font-size: 13px; padding: 8px 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRIBE-STYLE LOAD MORE BUTTON
   Used by [ep_events] (tribe layout) and [ep_events_upcoming]
   Both .ep-tribe-load-more and .ep-upcoming-load-more share this styling.
   ─────────────────────────────────────────────────────────────────────────────*/
.ep-tribe-load-more-wrap {
    text-align: center;
    padding: 36px 0 16px;
    width: 100%;
    clear: both;
}

.ep-tribe-load-more,
.ep-upcoming-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    min-width: 220px;
    padding: 14px 40px;
    background: #111;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 40px;
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: background .22s ease, border-color .22s ease, transform .18s ease, box-shadow .22s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
}

.ep-tribe-load-more:hover,
.ep-upcoming-load-more:hover {
    background: #e63946;
    border-color: #e63946;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(230,57,70,.32);
}

/* Inner label + icon row */
.ep-tribe-load-more .ep-lm-inner,
.ep-upcoming-load-more .ep-lm-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ep-tribe-load-more .ep-lm-inner i,
.ep-upcoming-load-more .ep-lm-inner i {
    font-size: 18px;
    transition: transform .3s ease;
}

.ep-tribe-load-more:hover .ep-lm-inner i,
.ep-upcoming-load-more:hover .ep-lm-inner i {
    transform: translateY(3px);
}

/* Spinner — hidden by default, shown only during loading via .ep-loading-more */
.ep-tribe-load-more .ep-lm-spinner,
.ep-upcoming-load-more .ep-lm-spinner {
    display: none;
    align-items: center;
    justify-content: center;
}

.ep-tribe-load-more .ep-lm-spinner i,
.ep-upcoming-load-more .ep-lm-spinner i {
    font-size: 20px;
    animation: ep-spin 0.75s linear infinite;
}

/* Loading state */
.ep-tribe-load-more.ep-loading-more,
.ep-upcoming-load-more.ep-loading-more {
    pointer-events: none;
    background: #444;
    border-color: #444;
    box-shadow: none;
    transform: none;
}

.ep-tribe-load-more.ep-loading-more .ep-lm-spinner,
.ep-upcoming-load-more.ep-loading-more .ep-lm-spinner {
    display: inline-flex;
}

.ep-tribe-load-more.ep-loading-more .ep-lm-inner,
.ep-upcoming-load-more.ep-loading-more .ep-lm-inner {
    display: none;
}

@keyframes ep-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR / LODGING LOAD MORE BUTTON
   Used by [ep_lodging sidebar="left"] and non-tribe paged layouts
   ─────────────────────────────────────────────────────────────────────────────*/
.ep-load-more-wrap {
    text-align: center;
    padding: 32px 0 16px;
    width: 100%;
    clear: both;
}

.ep-load-more-wrap .ep-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 200px;
    padding: 14px 36px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 40px;
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .22s ease;
}

.ep-load-more-wrap .ep-load-more:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.ep-load-more-wrap .ep-load-more .ep-lm-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ep-load-more-wrap .ep-load-more .ep-lm-inner i {
    font-size: 18px;
    transition: transform .3s ease;
}

.ep-load-more-wrap .ep-load-more:hover .ep-lm-inner i {
    transform: translateY(3px);
}

.ep-load-more-wrap .ep-load-more .ep-lm-spinner {
    display: none;
    align-items: center;
    justify-content: center;
}

.ep-load-more-wrap .ep-load-more .ep-lm-spinner i {
    font-size: 20px;
    animation: ep-spin 0.75s linear infinite;
}

.ep-load-more-wrap .ep-load-more.ep-loading-more {
    pointer-events: none;
    box-shadow: none;
    transform: none;
    opacity: .8;
}

.ep-load-more-wrap .ep-load-more.ep-loading-more .ep-lm-inner {
    display: none;
}

.ep-load-more-wrap .ep-load-more.ep-loading-more .ep-lm-spinner {
    display: inline-flex;
}

/* =========================================================
   EP Lodging Categories Widget — class-based layout
   All inline sizes/colors replaced by Elementor selectors.
   CSS variables used where a value drives multiple rules.
   ========================================================= */
.ep-cat-outer {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.ep-cat-grid {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    gap: 16px; /* overridden by gap control selector */
}
.ep-cat-cols-1 { grid-template-columns: 1fr; }
.ep-cat-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ep-cat-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ep-cat-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Featured 5-card layout: left 2-cell col | tall center | right 2-cell col */
.ep-cat-featured-5 {
    grid-template-columns: 1fr 1.6fr 1fr;
    grid-template-rows: 280px 280px; /* overridden by card_height selector */
}
.ep-cat-featured-5 > .ep-cat-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.ep-cat-featured-5 > .ep-cat-card:nth-child(2) { grid-column: 1; grid-row: 2; }
.ep-cat-featured-5 > .ep-cat-card:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
.ep-cat-featured-5 > .ep-cat-card:nth-child(4) { grid-column: 3; grid-row: 1; }
.ep-cat-featured-5 > .ep-cat-card:nth-child(5) { grid-column: 3; grid-row: 2; }
/* Center card spans both rows — fill the grid cell height */
.ep-cat-featured-5 > .ep-cat-card:nth-child(3)             { height: 100%; }
.ep-cat-featured-5 > .ep-cat-card:nth-child(3) .ep-cat-card-wrap { height: 100%; }

/* Card */
.ep-cat-card {
    position: relative;
    border-radius: 12px; /* overridden by card_border_radius selector */
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
}
.ep-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,.28) !important;
}

/* Card wrap — fixed height (overridden per-widget by card_height selector) */
.ep-cat-card-wrap {
    position: relative;
    width: 100%;
    height: 280px; /* overridden by card_height selector */
    overflow: hidden;
    background: #1a3a5c; /* overridden by placeholder_bg selector */
}

/* Card image */
.ep-cat-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.ep-cat-card:hover .ep-cat-card-img {
    transform: scale(1.06);
}

/* Placeholder gradient — shown when no image */
.ep-cat-placeholder-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #1a3a5c 0%, #0d2137 100%);
    /* overridden by placeholder_bg selector */
}

/* Dark gradient overlay */
.ep-cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--ep-ov-top,    rgba(0,0,0,0))    0%,
        var(--ep-ov-bottom, rgba(0,0,0,0.82)) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Count badge — top-right pill */
.ep-cat-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    background: #e84545;   /* overridden by badge_bg selector */
    color: #ffffff;         /* overridden by badge_color selector */
    font-size: 11px;        /* overridden by badge_font_size selector */
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 30px;   /* overridden by badge_radius selector */
    line-height: 1;
    white-space: nowrap;
}

/* Name + subtitle content area */
.ep-cat-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 22px;
    z-index: 2;
}
.ep-cat-name {
    margin: 0 0 4px;
    padding: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff; /* overridden by name_color selector */
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
    transition: color .2s ease;
}
.ep-cat-subtitle {
    display: block;
    font-size: 14px;               /* overridden by subtitle_size selector */
    color: rgba(255,255,255,0.80); /* overridden by subtitle_color selector */
    font-weight: 400;
}

/* Full-card clickable link overlay */
.ep-cat-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
}

/* Responsive — featured layout collapses to 2-col then 1-col */
@media (max-width: 768px) {
    .ep-cat-featured-5 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto !important;
    }
    .ep-cat-featured-5 > .ep-cat-card,
    .ep-cat-featured-5 > .ep-cat-card:nth-child(3) {
        grid-column: auto !important;
        grid-row: auto !important;
        height: auto !important;
    }
    .ep-cat-featured-5 .ep-cat-card-wrap,
    .ep-cat-featured-5 > .ep-cat-card:nth-child(3) .ep-cat-card-wrap {
        height: 260px !important;
    }
    .ep-cat-cols-3,
    .ep-cat-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ep-cat-featured-5 {
        grid-template-columns: 1fr;
    }
    .ep-cat-featured-5 .ep-cat-card-wrap {
        height: 220px !important;
    }
    .ep-cat-cols-2,
    .ep-cat-cols-3,
    .ep-cat-cols-4 { grid-template-columns: 1fr; }
}