/* ==========================================================================
   TSS RV Directory Suite — UI fixes
   Scope notes: selectors target Hello Elementor + Elementor Pro header,
   ElementsKit nav, and Directorist v7/v8 front-end classes. All rules are
   additive and safe to remove by disabling the module.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) HEADER: logo size, CTA alignment, responsive behaviour
   NOTE: this site's header is an Elementor TEMPLATE (elementor-314), not a
   theme-builder header location — selectors target the widgets directly.
   -------------------------------------------------------------------------- */
.elementor-widget-theme-site-logo img,
header .custom-logo,
header img[src*="logo" i] {
	max-height: 64px !important;
	width: auto !important;
	object-fit: contain;
}

@media (max-width: 1024px) {
	.elementor-widget-theme-site-logo img,
	header .custom-logo,
	header img[src*="logo" i] {
		max-height: 48px !important;
	}
}

/* Keep all 8 menu items on ONE row on desktop (container ~987px) */
@media (min-width: 1025px) {
	.elementskit-navbar-nav {
		flex-wrap: nowrap !important;
		justify-content: center;
	}
	.elementskit-navbar-nav > li > a.ekit-menu-nav-link {
		padding: 10px 9px !important;
		font-size: 14.5px !important;
		white-space: nowrap;
	}
}
@media (min-width: 1025px) and (max-width: 1280px) {
	.elementskit-navbar-nav > li > a.ekit-menu-nav-link {
		font-size: 13.5px !important;
		padding: 10px 7px !important;
	}
}

/* Keep the three CTA buttons pinned right and on one line */
.tss-header-ctas,
.elementor-location-header .elementor-element:last-child > .elementor-widget-wrap {
	justify-content: flex-end !important;
	flex-wrap: nowrap !important;
}

/* Tablet / mobile: let header rows wrap cleanly instead of misaligning */
@media (max-width: 1024px) {
	.elementor-location-header .elementor-section .elementor-container,
	.elementor-location-header .e-con-inner {
		flex-wrap: wrap !important;
		row-gap: 8px;
	}
	.elementor-location-header .elementskit-menu-container {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.elementor-location-header .elementor-button,
	.elementor-location-header .elementskit-btn {
		padding: 8px 14px !important;
		font-size: 13px !important;
	}
}

/* --------------------------------------------------------------------------
   2) NAV DROPDOWN: readable spacing + hover handled in JS (tss-open class)
   -------------------------------------------------------------------------- */
.elementskit-navbar-nav > li > a,
.elementskit-navbar-nav .elementskit-nav-item {
	padding-top: 10px;
	padding-bottom: 10px;
}

.elementskit-dropdown li a,
.elementskit-navbar-nav .elementskit-dropdown .elementskit-nav-item {
	padding: 9px 18px !important;
	line-height: 1.45 !important;
	white-space: nowrap;
}

/* JS adds .tss-open and keeps it for 400ms after mouseleave so the submenu
   does not vanish while the cursor travels to it. */
li.tss-open > .elementskit-dropdown,
li.tss-open > .elementskit-megamenu-panel,
li.tss-open > .elementskit-submenu-panel,
li.tss-open > .sub-menu,
li.tss-open > ul.dropdown-menu {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	pointer-events: auto !important;
	transform: none !important;
}

/* Add a hover bridge so the gap between menu item and dropdown is hoverable */
.elementskit-navbar-nav > li.elementskit-dropdown-has > .elementskit-dropdown::before,
.elementskit-navbar-nav > li.elementskit-dropdown-has > .elementskit-megamenu-panel::before,
.elementskit-navbar-nav > li.menu-item-has-children > .elementskit-dropdown::before,
.elementskit-navbar-nav > li.menu-item-has-children > .sub-menu::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

/* --------------------------------------------------------------------------
   3) HERO SEARCH: input/placeholder/quick-link visibility on image bg
   -------------------------------------------------------------------------- */
.directorist-search-form input::placeholder {
	color: #5a6472 !important;
	opacity: 1;
}
.directorist-search-form input {
	color: #1b2430 !important;
}

/* Quick category links under the hero search bar */
.directorist-search-top__btn a,
.directorist-search-form ~ * a[href*="single-category"],
.tss-hero-quicklinks a {
	color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   4) LISTING CATEGORY HEADING (restyled via JS into eyebrow + title)
   -------------------------------------------------------------------------- */
.tss-cat-heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 10px;
}
.tss-cat-heading .tss-eyebrow {
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
	font-weight: 600;
}
.tss-cat-heading .tss-cat-name {
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.15;
	color: #111c33;
	font-weight: 700;
	position: relative;
	padding-bottom: 10px;
}
.tss-cat-heading .tss-cat-name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: #111c33;
}

/* --------------------------------------------------------------------------
   5) SEARCH BAR ON LISTING / CATEGORY PAGES: make it clearly visible
   -------------------------------------------------------------------------- */
.directorist-archive-contents .directorist-search-form,
.directorist-category-single .directorist-search-form,
.directorist-listings-header .directorist-search-form {
	border: 1px solid #d7dce3;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(17, 28, 51, 0.06);
	background: #fff;
	padding: 6px 10px;
}
.directorist-search-form .directorist-btn,
.directorist-search-form button[type="submit"] {
	background: #111c33 !important;
	color: #fff !important;
	border-radius: 9px !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Filter sidebar: give empty checkbox rows breathing room */
.directorist-search-modal .directorist-checkbox,
.directorist-advanced-filter .directorist-checkbox {
	margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   6) CARD SIZE COMPACTION (classes added by JS based on section headings)
   -------------------------------------------------------------------------- */
/* Pricing cards — one row on desktop, compact */
.tss-compact-pricing .elementor-container,
.tss-compact-pricing .e-con-inner {
	align-items: stretch;
}
.tss-compact-pricing .elementor-widget-image img {
	max-height: 150px;
	object-fit: cover;
}
.tss-compact-pricing h3 {
	font-size: 20px !important;
}
.tss-compact-pricing p,
.tss-compact-pricing li {
	font-size: 14px !important;
	line-height: 1.5 !important;
}
@media (min-width: 1025px) {
	.tss-compact-pricing .elementor-column {
		max-width: 33.33% !important;
	}
	/* Row-level e-con containers must fill parent width */
	.tss-compact-pricing > .e-con-inner > .e-con {
		max-width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* Blog cards — reduce height/footprint */
.tss-compact-blog .elementor-post__thumbnail__link,
.tss-compact-blog .elementor-post__thumbnail {
	max-height: 180px;
	overflow: hidden;
}
.tss-compact-blog .elementor-post__title,
.tss-compact-blog .elementor-post__title a {
	font-size: 17px !important;
	line-height: 1.35 !important;
}
.tss-compact-blog .elementor-post__excerpt p {
	font-size: 13.5px !important;
}

/* Tool section — tighter container */
.tss-compact-tools .e-con-inner,
.tss-compact-tools .elementor-container {
	max-width: 980px !important;
	margin: 0 auto;
}
.tss-compact-tools {
	padding-top: 36px !important;
	padding-bottom: 36px !important;
}

/* --------------------------------------------------------------------------
   7) GENERIC: directorist grid card polish (hours/amenity chips from JS)
   -------------------------------------------------------------------------- */
.tss-card-extra {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 2px;
}
.tss-card-extra .tss-chip {
	font-size: 11.5px;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 999px;
	background: #eef2f7;
	color: #2b3850;
	white-space: nowrap;
}
.tss-card-extra .tss-chip--open {
	background: #e7f6ec;
	color: #176b37;
	font-weight: 600;
}
.tss-card-extra .tss-chip--closed {
	background: #fdeeee;
	color: #9b2226;
	font-weight: 600;
}

/* "View All" button injected after related-listings sections */
.tss-view-all-wrap {
	text-align: center;
	margin: 18px 0 6px;
}
.tss-view-all-wrap a {
	display: inline-block;
	background: #111c33;
	color: #fff !important;
	padding: 11px 26px;
	border-radius: 9px;
	font-weight: 600;
	text-decoration: none;
}
.tss-view-all-wrap a:hover {
	opacity: 0.9;
}

/* 6. Review filter — star-label text beside rating checkboxes */
.directorist-checkbox-rating .tss-star-label {
    margin-left: 6px;
    font-size: 13px;
    color: #555;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   7) Long-Term badge (T3)
   -------------------------------------------------------------------------- */
.tss-badge-longterm {
    background-color: #28a745 !important;
    color: #fff !important;
}
.tss-badge-longterm .directorist-icon-mask {
    --directorist-icon: url(https://rvparksmidlandtx.com/wp-content/plugins/directorist/assets/icons/line-awesome/svgs/calendar-check-solid.svg);
}

/* Badge row on single listing page */
.single-at_biz_dir .tss-badge-longterm {
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* === 8. All Listings — section grouping  =============================== */
.tss-section-header .elementor-widget-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.tss-view-all {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2d6a4f;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.tss-view-all:hover {
  color: #1b4332;
  text-decoration: underline;
}
@media (max-width: 820px) {
  .tss-section-header .elementor-widget-container {
    gap: 0.25rem;
  }
  .tss-view-all {
    font-size: 0.85rem;
  }
}

/* === 9. All Listings — interactive map panel  ============================= */
.tss-map-panel {
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  padding: 0 15px;
}
.tss-map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border: 2px solid #2d6a4f;
  border-radius: 8px;
  background: #fff;
  color: #2d6a4f;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tss-map-toggle:hover {
  background: #2d6a4f;
  color: #fff;
}
.tss-map-toggle--open {
  background: #2d6a4f;
  color: #fff;
}
#tss-listings-map {
  width: 100%;
  height: 400px;
  margin-top: 0.75rem;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  z-index: 1;
}
.tss-map-panel .leaflet-popup-content {
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
}
.tss-map-panel .leaflet-popup-content a {
  color: #2d6a4f;
  text-decoration: none;
}
.tss-map-panel .leaflet-popup-content a:hover {
  text-decoration: underline;
}
@media (max-width: 820px) {
  #tss-listings-map {
    height: 300px;
    border-radius: 8px;
  }
  .tss-map-toggle {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }
}


/* ── Review submission form (T6) ────────────────────────── */
.tss-review-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e0e0e0; }
.tss-review-form h4 { margin: 0 0 16px; font-size: 18px; color: #1a1a2e; }
.tss-review-form__stars { margin-bottom: 16px; }
.tss-review-form__stars label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; color: #333; }
.tss-star-rating { display: flex; gap: 4px; }
.tss-star { font-size: 28px; color: #d0d0d0; cursor: pointer; transition: color 0.15s; user-select: none; }
.tss-star.active, .tss-star.hover { color: #f5a623; }
.tss-review-form__field { margin-bottom: 14px; }
.tss-review-form__field label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 14px; color: #333; }
.tss-review-form__field input,
.tss-review-form__field textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; font-family: inherit; box-sizing: border-box; }
.tss-review-form__field textarea { resize: vertical; }
.tss-review-form__field input:focus,
.tss-review-form__field textarea:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
.tss-review-form__submit { background: #2563eb; color: #fff; border: none; padding: 12px 28px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.tss-review-form__submit:hover { background: #1d4ed8; }
.tss-review-form__submit:disabled { background: #94a3b8; cursor: not-allowed; }
.tss-review-form__message { margin-top: 12px; padding: 10px 14px; border-radius: 6px; font-size: 14px; }
.tss-review-form__message.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.tss-review-form__message.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Read More collapse on description (T7) ─────────────── */
.tss-desc__content {
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.tss-desc__content.collapsed {
    position: relative;
}
.tss-desc__content.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}
.tss-read-more-btn {
    display: block;
    margin: 12px auto 0;
    padding: 8px 24px;
    background: none;
    border: 1px solid #2563eb;
    color: #2563eb;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.tss-read-more-btn:hover {
    background: #2563eb;
    color: #fff;
}

/* ── Mobile swipe gallery — scroll-snap at ≤820px (T8) ─── */
@media (max-width: 820px) {
  .tss-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    border-radius: 12px;
  }
  .tss-gallery::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
  }

  /* Each slide = full width */
  .tss-gallery__main {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .tss-gallery__main img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
  }

  /* Thumbs container becomes transparent — children are flex items */
  .tss-gallery__thumbs {
    display: contents;
  }
  .tss-gallery__thumbs a {
    flex: 0 0 100%;
    scroll-snap-align: start;
    pointer-events: none;           /* prevent link navigation while swiping */
  }
  .tss-gallery__thumbs a img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
  }
}

/* ── Blog page card polish (T9) ──────────────────────── */
/* Scope: body.blog .elementor-widget-loop-grid */

/* Card wrapper — white bg, rounded, shadow, hover lift */
body.blog .e-loop-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.blog .e-loop-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Featured image — cap height, cover crop */
body.blog .e-loop-item .elementor-widget-theme-post-featured-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* Title — tighter, 2-line clamp */
body.blog .e-loop-item .elementor-widget-theme-post-title {
    padding: 14px 16px 0;
}
body.blog .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title {
    font-size: 17px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Excerpt — 3-line clamp, muted color */
body.blog .e-loop-item .elementor-widget-text-editor {
    padding: 8px 16px 16px;
}
body.blog .e-loop-item .elementor-widget-text-editor .elementor-widget-container {
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Grid gap tighten */
body.blog .elementor-widget-loop-grid .elementor-loop-container.elementor-grid {
    gap: 24px;
}

/* Page heading spacing */
body.blog .elementor-page-96 .elementor-widget-heading .elementor-heading-title {
    margin-bottom: 8px;
}

/* Responsive: 1-col on mobile */
@media (max-width: 767px) {
    body.blog .e-loop-item .elementor-widget-theme-post-featured-image img {
        height: 200px;
    }
}

/* --------------------------------------------------------------------------
   R1: Listing badge ribbons (Popular / Long-Term)
   -------------------------------------------------------------------------- */
.tss-gallery__main { position: relative; }

.tss-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
}
.tss-ribbon--long-term {
    background: #111c33;
    color: #fff;
}
.tss-ribbon--popular {
    background: #ffc83d;
    color: #1b2430;
}
.tss-ribbon + .tss-ribbon {
    top: 34px;
}

/* --------------------------------------------------------------------------
   12) STICKY HEADER SPACER: prevent duplicate overlay from blocking mobile sidebar
   Elementor's sticky header creates a visibility:hidden spacer copy. The overlay
   inside that spacer inherits position:fixed and visibility:visible, which covers
   the real sidebar and steals clicks. Hide all interactive elements from the spacer.
   -------------------------------------------------------------------------- */
.elementor-sticky__spacer .elementskit-menu-overlay,
.elementor-sticky__spacer .elementskit-menu-container {
    display: none !important;
    pointer-events: none !important;
}