/* =========================================================
   custom.css (Cleaned)
   Site: Mobile Detailers Directory (Helix Ultimate / Joomla)
   Notes:
   - Consolidated duplicate rules
   - Listings grid: 2 columns desktop/tablet, 1 column phones
   - Removed conflicting mobile overrides (e.g., width: 90%)
   ========================================================= */


/* =========================================================
   1) Offcanvas / Mobile Menu Controls
   ========================================================= */

/* Hide the offcanvas-only module on desktop */
@media (min-width: 992px) {
  .offcanvas-menu-only { display: none !important; }
}

/* Show offcanvas-only module on tablets/phones */
@media (max-width: 991.98px) {
  .offcanvas-menu-only { display: block !important; }
}

/* Ensure the Helix offcanvas toggle is visible on tablets/phones */
@media (max-width: 991.98px) {
  .sp-offcanvas-toggle,
  .offcanvas-toggler,
  .burger-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Extra safety for some Helix header variants */
@media (max-width: 767.98px) {
  .helix-ultimate #sp-header nav.sp-megamenu-wrapper #offcanvas-toggler,
  #sp-header a#offcanvas-toggler:not(.offcanvas-toggler-secondary) {
    display: flex !important;
  }
}

/* Burger icon color */
.burger-icon > span { background-color: #ffffff !important; }


/* =========================================================
   2) Service Page Layout + Buttons
   ========================================================= */

.service-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 20px;
}

.service-page h1 {
  color: #121212;
  margin-bottom: 16px;
}

.service-page h2 {
  color: #0F5FCC;
  margin-top: 32px;
}

.service-page h3 {
  color: #2E2E2E;
  margin-top: 20px;
}

.service-page p,
.service-page li {
  color: #121212;
  line-height: 1.6;
}

/* Buttons (sitewide) */
.btn-primary {
  background: #1E90FF;
  color: #ffffff;
  padding: 14px 22px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}
.btn-primary:hover { background: #0F5FCC; }

.btn-secondary {
  border: 2px solid #121212;
  color: #121212;
  padding: 14px 22px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}
.btn-secondary:hover {
  background: #121212;
  color: #ffffff;
}


/* =========================================================
   3) Service Cards + CTA Card
   ========================================================= */

/* Service Card Images */
.service-card img,
.cta-card img {
  width: 100%;
  max-width: 250px;      /* Controls how small they appear */
  aspect-ratio: 4 / 3;   /* Keeps shape consistent */
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto;        /* Center image inside card */
  display: block;
}

/* Custom Quote CTA Card */
.cta-card {
  position: relative;
  background: linear-gradient(135deg, #121212 0%, #1a1a1a 60%, #0F5FCC 130%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.cta-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 15px 35px rgba(0,0,0,0.45),
    0 0 0 1px rgba(30,144,255,0.25),
    0 0 25px rgba(30,144,255,0.45);
}

.cta-btn {
  padding: 10px 18px;
  font-size: 16px;
  line-height: 1.2;
}


/* =========================================================
   4) Footer (Helix bottom area)
   ========================================================= */

.seo-footer a {
  color: #D4B46A;
  transition: 0.2s ease;
}
.seo-footer a:hover { color: #FFFFFF; }

/* Fix outline-light button in dark footer */
.seo-footer .btn-outline-light {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background-color: transparent;
}
.seo-footer .btn-outline-light:hover,
.seo-footer .btn-outline-light:focus {
  background-color: #FFFFFF;
  color: #0D0D0D;
  border-color: #FFFFFF;
}


/* =========================================================
   5) Home Page: Popular Cities Section
   ========================================================= */

.bg-popular { background-color: #cfe3f7; }

.pc-card {
  border-radius: 1rem;
  overflow: hidden; /* Ensures images follow rounding */
}

.pc-img {
  height: 140px;
  object-fit: cover;
  border-radius: 1rem;
}

/**************************************************************
  FEATURED LISTINGS – CLEAN FINAL CSS
  Larger centered logos, stable vertical card layout
**************************************************************/

/* ===============================
   GRID LAYOUT
=================================*/

.featured-listings-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 1199.98px){
  .featured-listings-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px){
  .featured-listings-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px){
  .featured-listings-grid{ grid-template-columns: 1fr; }
}

/* ===============================
   CARD
=================================*/

.featured-listings-grid .fl-card{
  display: flex;
  flex-direction: column;   /* vertical stack */
  height: 100%;
  position: relative;

  text-decoration: none;
  color: inherit;

  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;

  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);

  transition: transform .18s ease, box-shadow .18s ease;
}

.featured-listings-grid .fl-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

/* ===============================
   BADGE
=================================*/

.featured-listings-grid .fl-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;

  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;

  color: #fff;
  background: #0d6efd;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* ===============================
   LOGO SECTION (LARGER + CENTERED)
=================================*/

.featured-listings-grid .fl-logo{
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 28px 20px 22px;
  background: #f4f8ff;
  border-bottom: 1px solid rgba(0,0,0,.06);

  height: 170px;                 /* ← increased height */
}

/* Make image larger */
.featured-listings-grid .fl-logo img{
  max-width: 100%;
  max-height: 130px;             /* ← increased size */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Missing logo fallback */
.featured-listings-grid .fl-logo--missing{
  font-size: 14px;
  font-weight: 600;
  opacity: .7;
}

/* ===============================
   BODY
=================================*/

.featured-listings-grid .fl-body{
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.featured-listings-grid .fl-title{
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-listings-grid .fl-meta{
  font-size: 15px;
  line-height: 1.4;
  opacity: .95;
}

.featured-listings-grid .fl-meta strong{
  font-weight: 800;
}

/* ===============================
   OPTIONAL: SECTION SPACING
=================================*/

#sp-featured-listings{
  padding: 40px 0;
}
/* ============================================
   LISTINGS (/listings) Category Blog layout
   Desktop + Tablet: 2 columns
   Phone: 1 column
   ============================================ */

/* Container holding the items */
.blog.com-content-category-blog .blog-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

/* Each item (works across Joomla/Helix variations) */
.blog.com-content-category-blog .blog-items > .item,
.blog.com-content-category-blog .blog-items > div,
.blog.com-content-category-blog .blog-items .blog-item {
  flex: 0 0 calc(50% - 12px) !important;
  max-width: calc(50% - 12px) !important;
  min-width: 0 !important;
}

/* Phone: 1 column */
@media (max-width: 767.98px) {
  .blog.com-content-category-blog .blog-items > .item,
  .blog.com-content-category-blog .blog-items > div,
  .blog.com-content-category-blog .blog-items .blog-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* =========================
   LISTINGS GRID
   ========================= */

.blog-items,
.category-blog .blog-items,
.com-content-category .blog-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.blog-item,
.com-content-category .blog-item,
.category-blog .blog-item {
	height: 100%;
	margin: 0;
}

/* =========================
   LISTINGS GRID
   ========================= */

.blog-items,
.category-blog .blog-items,
.com-content-category .blog-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.blog-item,
.com-content-category .blog-item,
.category-blog .blog-item {
	height: 100%;
	margin: 0;
}

/* =========================
   LISTING CARD
   ========================= */

.listing-card {
	position: relative;
	height: 100%;
	background: #ffffff;
	border: 1px solid #e3e3e3;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.listing-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
	border-color: #d2d2d2;
}

/* FULL CARD LINK */
.listing-card-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	text-decoration: none;
}

/* DO NOT place the whole content above the overlay */
.listing-card-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Only actual buttons / links that must stay clickable go above overlay */
.listing-card .btn,
.listing-card .icons,
.listing-card .dropdown,
.listing-card .readmore,
.listing-card .listing-card-actions,
.listing-card .listing-card-actions a,
.listing-card .listing-card-icons,
.listing-card .listing-card-icons a {
	position: relative;
	z-index: 3;
}

/* Optional: if you want title click to also go to article normally */
.listing-card .listing-card-title a {
	position: relative;
	z-index: 3;
}

/* =========================
   IMAGE
   ========================= */

.listing-card-image {
	position: relative;
	overflow: hidden;
	background: #f7f7f7;
}

.listing-card-image img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.listing-card:hover .listing-card-image img {
	transform: scale(1.03);
}

/* =========================
   BODY
   ========================= */

.listing-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 18px;
}

.listing-card-title {
	margin-bottom: 10px;
}

.listing-card-title h1,
.listing-card-title h2,
.listing-card-title h3,
.listing-card-title h4,
.listing-card-title h5,
.listing-card-title h6,
.listing-card-title .page-header {
	margin: 0;
	line-height: 1.3;
	font-size: 1.2rem;
}

.listing-card-title a {
	text-decoration: none;
}

.listing-card-title a:hover {
	text-decoration: underline;
}

.listing-card-meta {
	margin-bottom: 10px;
	font-size: 0.92rem;
}

.listing-card-tags {
	margin-bottom: 10px;
}

.listing-card-text {
	flex: 1 1 auto;
	margin-bottom: 14px;
}

.listing-card-text p:last-child {
	margin-bottom: 0;
}

/* =========================
   ACTIONS
   ========================= */

.listing-card-actions {
	margin-top: 12px;
}

.listing-card-actions + .listing-card-actions {
	margin-top: 10px;
}

.listing-card .readmore {
	margin-top: auto;
}

.listing-card .btn {
	border-radius: 8px;
}

/* =========================
   JOOMLA IMAGE CLEANUP
   ========================= */

.listing-card-image .item-image,
.listing-card-image .intro-image,
.listing-card-image figure {
	margin: 0;
}

.listing-card-image img {
	border: 0;
}

/* =========================
   UNPUBLISHED
   ========================= */

.listing-card.system-unpublished {
	opacity: 0.8;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 991px) {
	.blog-items,
	.category-blog .blog-items,
	.com-content-category .blog-items {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	.listing-card-image img {
		height: 200px;
	}
}

@media (max-width: 767px) {
	.blog-items,
	.category-blog .blog-items,
	.com-content-category .blog-items {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.listing-card-image img {
		height: 210px;
	}

	.listing-card-body {
		padding: 16px;
	}
}
/* =========================================================
   Helix Ultimate: FORCE the burger bars to show on mobile/tablet
   (high specificity + explicit width/height)
   ========================================================= */
@media (max-width: 991.98px) {

  /* Ensure the burger container is normal */
  body.ltr #sp-header #offcanvas-toggler .burger-icon{
    width: 26px !important;
    height: auto !important;
    display: inline-block !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* FORCE the 3 bars */
  body.ltr #sp-header #offcanvas-toggler .burger-icon > span{
    display: block !important;
    width: 100% !important;          /* key: prevents “invisible” 0-width spans */
    height: 2px !important;
    margin: 6px 0 !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* In case Helix draws any bar via pseudo elements */
  body.ltr #sp-header #offcanvas-toggler .burger-icon::before,
  body.ltr #sp-header #offcanvas-toggler .burger-icon::after{
    background-color: #ffffff !important;
  }

  /* Prevent the “white vertical bar” issue */
  body.ltr #sp-header #offcanvas-toggler{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}
.mp-cta-wrap{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:16px;
}
/* Hide the exact legend text "Fields" on registration */
#member-registration legend {
  display: none !important;
}
/* Featured Only Description in Red */
.form-text {
    color: red !important;
}
/* =========================
   Mobile Detailers Dashboard
   ========================= */
/* =========================================
   BASE DASHBOARD WRAPPER
   ========================================= */

section#sp-dashboard .mdd-dashboard {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  background: #f4f8ff;
  font-family: Arial, Helvetica, sans-serif;
  color: #1f2a44;
  box-sizing: border-box;
}

section#sp-dashboard .mdd-sidebar {
  width: 260px;
  min-width: 260px;
  background: linear-gradient(180deg, #123c8a 0%, #0f2f6b 100%);
  color: #ffffff;
  padding: 30px 22px;
  box-sizing: border-box;
}

section#sp-dashboard .mdd-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}

section#sp-dashboard .mdd-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 35px;
}

section#sp-dashboard .mdd-brand-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #3d7cff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
}

section#sp-dashboard .mdd-brand-text strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
}

section#sp-dashboard .mdd-brand-text span {
  display: block;
  font-size: 12px;
  color: #cddcff;
  margin-top: 3px;
}

section#sp-dashboard .mdd-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

section#sp-dashboard .mdd-nav a {
  color: #dbe7ff;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 12px;
  transition: 0.2s ease;
  font-size: 15px;
}

section#sp-dashboard .mdd-nav a:hover,
section#sp-dashboard .mdd-nav a.active {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

.mdd-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg,#1d4ed8,#2563eb,#60a5fa);
  color: #fff;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
}

.mdd-hero-left h1{
  font-size:32px;
  margin-bottom:10px;
}

.mdd-hero-text{
  max-width:550px;
  margin-bottom:20px;
}

.mdd-eyebrow{
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1px;
  opacity:.8;
}

.mdd-hero-buttons{
  display:flex;
  gap:12px;
}

.mdd-btn{
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}

.mdd-btn-primary{
  background:#ffffff;
  color:#1d4ed8;
}

.mdd-btn-primary:hover{
  background:#f1f5ff;
}

.mdd-btn-secondary{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
}

.mdd-plan-badge{
  background:rgba(255,255,255,.2);
  padding:8px 12px;
  border-radius:20px;
  font-size:13px;
  margin-bottom:10px;
  display:inline-block;
}

.mdd-plan-box{
  background:rgba(255,255,255,.15);
  padding:20px;
  border-radius:15px;
  max-width:260px;
}

.mdd-plan-box h3{
  margin-bottom:10px;
}

.mdd-btn-light{
  background:#dbeafe;
  color:#1e3a8a;
  padding:10px 14px;
  border-radius:8px;
}
/* =========================================
   DASHBOARD LAYOUT
   ========================================= */

/* Grid goes on the module column wrapper */
section#sp-dashboard .sp-column {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

/* Each module becomes a grid item */
section#sp-dashboard .sp-column > .sp-module {
  min-width: 0;
  margin: 0;
}

/* Hero module spans full width */
section#sp-dashboard .sp-column > .sp-module.mdd-dynamic-hero {
  grid-column: 1 / -1;
}

/* Remove default spacing that can break layout */
section#sp-dashboard .sp-module {
  margin-bottom: 0;
}

section#sp-dashboard .sp-module-content {
  height: 100%;
}

/* =========================================
   HERO MODULE
   ========================================= */

section#sp-dashboard .mdd-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: stretch;
  background: linear-gradient(135deg, #1e73be 0%, #155a96 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(21, 90, 150, 0.18);
}

section#sp-dashboard .mdd-hero-left,
section#sp-dashboard .mdd-hero-right {
  min-width: 0;
}

section#sp-dashboard .mdd-eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  margin: 0 0 10px;
}

section#sp-dashboard .mdd-hero h1 {
  margin: 0 0 12px;
  font-size: 2rem;
  line-height: 1.2;
  color: #fff;
}

section#sp-dashboard .mdd-hero-text {
  margin: 0;
  color: #eaf4ff;
}

section#sp-dashboard .mdd-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

section#sp-dashboard .mdd-plan-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

section#sp-dashboard .mdd-plan-box {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

section#sp-dashboard .mdd-hero-left,
section#sp-dashboard .mdd-hero-right,
section#sp-dashboard .mdd-main,
section#sp-dashboard .sp-module-content {
  min-width: 0;
}

section#sp-dashboard .mdd-plan-box h3 {
  margin: 0 0 10px;
  color: #fff;
}

section#sp-dashboard .mdd-plan-box p {
  margin: 0 0 14px;
  color: #eaf4ff;
}

/* =========================================
   DASHBOARD CARDS
   ========================================= */

section#sp-dashboard .dashboard-card {
  background: #ffffff;
  border: 1px solid #dbe3ec;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.04);
  height: 100%;
}

section#sp-dashboard .dashboard-card__header h3 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #12344d;
}

section#sp-dashboard .dashboard-stat {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid #e8eef5;
}

section#sp-dashboard .dashboard-stat:last-child {
  border-bottom: 0;
}

section#sp-dashboard .dashboard-stat__label {
  font-weight: 600;
  color: #4a6278;
}

section#sp-dashboard .dashboard-stat__value {
  text-align: right;
  color: #12344d;
  font-weight: 600;
  word-break: break-word;
}

/* =========================================
   BUTTONS
   ========================================= */

section#sp-dashboard .dashboard-actions,
section#sp-dashboard .mdd-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

section#sp-dashboard .dashboard-actions {
  margin-top: 20px;
}

section#sp-dashboard .dashboard-actions--stacked {
  margin-top: 22px;
}

section#sp-dashboard .mdd-btn,
section#sp-dashboard .dashboard-card .dashboard-actions a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Primary */
section#sp-dashboard .mdd-btn-primary,
section#sp-dashboard .btn-primary,
section#sp-dashboard .btn-primary:link,
section#sp-dashboard .btn-primary:visited {
  background: #1e73be;
  color: #ffffff !important;
  border: 1px solid #1e73be;
}

/* Primary hover */
section#sp-dashboard .mdd-btn-primary:hover,
section#sp-dashboard .mdd-btn-primary:focus,
section#sp-dashboard .btn-primary:hover,
section#sp-dashboard .btn-primary:focus,
section#sp-dashboard .btn-primary:active {
  background: #155a96;
  border-color: #155a96;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(21, 90, 150, 0.18);
  text-decoration: none;
}

/* Secondary */
section#sp-dashboard .mdd-btn-secondary,
section#sp-dashboard .btn-secondary,
section#sp-dashboard .btn-secondary:link,
section#sp-dashboard .btn-secondary:visited,
section#sp-dashboard .mdd-btn-light {
  background: #f5f8fc;
  color: #1e73be !important;
  border: 1px solid #d6e0ea;
}

/* Secondary hover */
section#sp-dashboard .mdd-btn-secondary:hover,
section#sp-dashboard .mdd-btn-secondary:focus,
section#sp-dashboard .btn-secondary:hover,
section#sp-dashboard .btn-secondary:focus,
section#sp-dashboard .btn-secondary:active,
section#sp-dashboard .mdd-btn-light:hover,
section#sp-dashboard .mdd-btn-light:focus {
  background: #e9f1f9;
  color: #155a96 !important;
  border-color: #c4d5e6;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.08);
  text-decoration: none;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 991px) {
  section#sp-dashboard .sp-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  section#sp-dashboard .mdd-hero {
    grid-template-columns: 1fr;
  }

  section#sp-dashboard .mdd-hero h1 {
    font-size: 1.75rem;
  }
}

@media (max-width: 767px) {
  section#sp-dashboard .sp-column {
    grid-template-columns: 1fr;
  }

  section#sp-dashboard .mdd-hero,
  section#sp-dashboard .dashboard-card {
    padding: 20px;
  }

  section#sp-dashboard .mdd-hero h1 {
    font-size: 1.5rem;
  }

  section#sp-dashboard .dashboard-stat {
    flex-direction: column;
    gap: 6px;
  }

  section#sp-dashboard .dashboard-stat__value {
    text-align: left;
  }
}
/* Quick Actions */
section#sp-dashboard .dashboard-actions--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

section#sp-dashboard .dashboard-actions--grid a {
  width: 100%;
  text-align: center;
}
/* Membership Status */
section#sp-dashboard .dashboard-membership-note {
  margin-top: 18px;
  padding: 14px 16px;
  background: #f7fafe;
  border: 1px solid #dbe7f3;
  border-radius: 10px;
}

section#sp-dashboard .dashboard-membership-note p {
  margin: 0 0 10px;
  color: #4a6278;
}

section#sp-dashboard .dashboard-membership-note p:last-child {
  margin-bottom: 0;
}
/* Profile Completion */
section#sp-dashboard .dashboard-progress {
  margin-bottom: 18px;
}

section#sp-dashboard .dashboard-progress__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: #12344d;
  font-weight: 600;
}

section#sp-dashboard .dashboard-progress__bar {
  width: 100%;
  height: 10px;
  background: #e8eef5;
  border-radius: 999px;
  overflow: hidden;
}

section#sp-dashboard .dashboard-progress__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1e73be 0%, #38a3ff 100%);
  border-radius: 999px;
}

section#sp-dashboard .dashboard-progress__meta {
  margin-top: 10px;
  color: #4a6278;
  font-size: 0.95rem;
}

section#sp-dashboard .dashboard-missing-items {
  margin-top: 18px;
  padding: 14px 16px;
  background: #f7fafe;
  border: 1px solid #dbe7f3;
  border-radius: 10px;
}

section#sp-dashboard .dashboard-missing-items p {
  margin: 0 0 10px;
  color: #12344d;
  font-weight: 600;
}

section#sp-dashboard .dashboard-missing-items ul {
  margin: 0;
  padding-left: 18px;
}

section#sp-dashboard .dashboard-missing-items li {
  margin: 0 0 6px;
  color: #4a6278;
}
/* Upgrade / Featured Benefits */
section#sp-dashboard .dashboard-upgrade-note {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #f7fafe;
  border: 1px solid #dbe7f3;
  border-radius: 10px;
}

section#sp-dashboard .dashboard-upgrade-note p {
  margin: 0 0 10px;
  color: #4a6278;
}

section#sp-dashboard .dashboard-upgrade-note p:last-child {
  margin-bottom: 0;
}

section#sp-dashboard .dashboard-benefits-list {
  margin: 0;
  padding-left: 18px;
}

section#sp-dashboard .dashboard-benefits-list li {
  margin: 0 0 8px;
  color: #4a6278;
}
/* Tips for Better Visibility */
section#sp-dashboard .dashboard-visibility-note {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #f7fafe;
  border: 1px solid #dbe7f3;
  border-radius: 10px;
}

section#sp-dashboard .dashboard-visibility-note p {
  margin: 0;
  color: #4a6278;
}

/* =========================================
   LISTINGS GRID
   ========================================= */

.com-content-category-blog__items.blog-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.com-content-category-blog__item.blog-item {
	display: flex;
	margin: 0;
	min-width: 0;
	height: 100%;
}

.item-content.listing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 520px;
	background: #fff;
	border: 1px solid #e4e4e4;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	cursor: pointer;
}

.item-content.listing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
	border-color: #d6d6d6;
}

.listing-card-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	text-decoration: none;
}

.listing-card-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	width: 100%;
}

.listing-card-logo-wrap {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 18px 0;
	min-height: 170px;
}

.listing-card-logo {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: contain;
	background: #fff;
	border-bottom: 1px solid #efefef;
	padding-bottom: 12px;
}

.listing-card-body {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px;
	min-height: 0;
}

.listing-card .btn,
.listing-card .listing-card-title a,
.listing-card .listing-card-phone a,
.listing-card .listing-card-icons,
.listing-card .listing-card-icons a {
	position: relative;
	z-index: 4;
}

.listing-card-icons {
	margin-bottom: 8px;
}

.listing-card-title {
	margin: 0 0 8px;
	font-size: 1.15rem;
	line-height: 1.3;
	min-height: 3em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.listing-card-title a {
	color: inherit;
	text-decoration: none;
}

.listing-card-title a:hover {
	text-decoration: underline;
}

.listing-card-location {
	margin-bottom: 12px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #6a6a6a;
	min-height: 1.5em;
}

.listing-card-summary {
	flex: 1 1 auto;
	margin-bottom: 14px;
	font-size: 0.97rem;
	line-height: 1.55;
	color: #333;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 6.2em;
}

.listing-card-phone {
	margin-bottom: 14px;
	min-height: 1.5em;
}

.listing-card-phone a {
	color: #222;
	text-decoration: none;
	font-weight: 600;
}

.listing-card-phone a:hover {
	text-decoration: underline;
}

.listing-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
}

.listing-card-actions .btn {
	border-radius: 10px;
	padding: 0.55rem 0.9rem;
}

.listing-card.system-unpublished {
	opacity: 0.8;
}

@media (max-width: 767px) {
	.com-content-category-blog__items.blog-items {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.item-content.listing-card {
		min-height: 0;
	}

	.listing-card-body {
		padding: 16px;
	}

	.listing-card-logo {
		height: 130px;
	}
}
.field-label {
  font-size: 1.2rem;
  font-weight: 600;
}
/* Dashboard equal height cards */

#sp-dashboard .row {
    display: flex;
    flex-wrap: wrap;
}

#sp-dashboard .row > div {
    display: flex;
}

#sp-dashboard .sp-module,
#sp-dashboard .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* make buttons stay aligned at bottom */
#sp-dashboard .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#sp-dashboard .card-body .btn,
#sp-dashboard .card-body a.btn {
    margin-top: auto;
}
#sp-dashboard .sp-module,
#sp-dashboard .card {
    padding: 24px;
}
#sp-dashboard .btn {
    width: 100%;
}
#sp-dashboard .card:hover,
#sp-dashboard .sp-module:hover {
    transform: translateY(-3px);
    transition: all .2s ease;
}
.listing-card-featured .listing-card-inner {
	position: relative;
	border: 1px solid rgba(139, 107, 63, 0.35);
	box-shadow: 0 8px 24px rgba(139, 107, 63, 0.10);
}

.listing-featured-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	display: inline-block;
	padding: 6px 10px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .4px;
	border-radius: 999px;
	background: #8b6b3f;
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.listing-card-featured:hover .listing-card-inner {
	transform: translateY(-2px);
	transition: all .2s ease;
}
.listing-card-featured .listing-card-inner {
	position: relative;
	border: 1px solid rgba(139, 107, 63, 0.35);
	box-shadow: 0 8px 24px rgba(139, 107, 63, 0.10);
}

.listing-featured-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	display: inline-block;
	padding: 6px 10px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .4px;
	border-radius: 999px;
	background: #4169E1;
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.listing-card-featured:hover .listing-card-inner {
	transform: translateY(-2px);
	transition: all .2s ease;
}
.listing-single-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
	align-items: center;
}

.listing-featured-badge-single {
	display: inline-block;
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .4px;
	border-radius: 999px;
	background: #8b6b3f;
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.listing-single-featured .page-header h1,
.listing-single-featured .page-header h2 {
	margin-bottom: 0;
}
.listing-single-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	align-items: center;
}

.listing-featured-badge-single {
	display: inline-block;
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .4px;
	border-radius: 999px;
	background: #8b6b3f;
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.directory-registration-info {
    padding: 0px 50px;
}
.directory-registration-info h2 {
    font-size: 32px;
}

.directory-registration-info ul {
    padding-left: 18px;
}

.directory-registration-info li {
    margin-bottom: 6px;
}
/* Top Bar - Left */
.topbar-find-detailer-btn {
    display: inline-block;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg,#2563eb,#1e3a8a);
    border-radius: 20px;
    text-decoration: none;
    transition: all .25s ease;
}

.topbar-find-detailer-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
/* Claim Listing */
.mdd-claim-listing-btn{
  display:inline-block;
  background:#1d4ed8;
  color:#fff;
  padding:12px 22px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  line-height:1.2;
  transition:all .2s ease;
}

.mdd-claim-listing-btn:hover{
  background:#1e40af;
  color:#fff;
  text-decoration:none;
}
.mdd-claim-box {
    text-align: center;
    margin: 0 0 24px 0;
}

.mdd-claim-box-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111827;
}

.mdd-claim-listing-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #1d4ed8;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.mdd-claim-listing-btn:hover,
.mdd-claim-listing-btn:focus {
    background: #1e40af;
    color: #ffffff !important;
    text-decoration: none;
}
/* Claim Listing Section */
.mdd-claim-box {
    text-align: center;
    margin: 0 auto 24px auto;
}

.mdd-claim-box-title {
    font-size: 22px;   /* same size as before */
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
}

.mdd-claim-listing-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #1d4ed8;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    transition: background 0.2s ease;
}

.mdd-claim-listing-btn:hover {
    background: #1e40af;
    color: #ffffff !important;
    text-decoration: none;
}
.mdd-claim-subtext{
    font-size:16px;
    margin-bottom:10px;
    color:#374151;
    text-align:center;
}
.mdd-claim-button {
    display: inline-block;
    background: #4169E1;
    color: #ffffff !important;
    padding: 14px 24px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
    transition: all 0.2s ease;
}

.mdd-claim-button:hover,
.mdd-claim-button:focus {
    background: #3157c9;
    color: #ffffff !important;
    text-decoration: none !important;
}

.mdd-claim-box {
    text-align: center;
}
.mdd-blog-wrap {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.mdd-blog-content {
  color: #2b2b2b;
  font-size: 17px;
  line-height: 1.85;
}

.mdd-blog-content p {
  margin: 0 0 22px;
}

.mdd-blog-content h2 {
  font-size: 30px;
  line-height: 1.3;
  color: #111827;
  margin: 38px 0 16px;
  padding-left: 14px;
  border-left: 5px solid #374151;
}

.mdd-blog-content h3 {
  font-size: 21px;
  line-height: 1.3;
  margin: 0 0 12px;
  color: #111827;
}

.mdd-blog-content ul {
  margin: 0 0 0 22px;
  padding: 0;
}

.mdd-blog-content li {
  margin-bottom: 10px;
}

.mdd-blog-intro {
  font-size: 20px;
  line-height: 1.75;
}

.mdd-blog-hero {
  background: linear-gradient(135deg, #374151, #111827);
  color: #ffffff;
  text-align: center;
  padding: 42px 28px;
  border-radius: 14px;
  margin-bottom: 36px;
}

.mdd-blog-hero h1 {
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.2;
  color: #ffffff;
}

.mdd-blog-hero p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: #e5e7eb;
}

.mdd-blog-tipbox,
.mdd-blog-examplebox {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px;
  margin: 28px 0;
}

.mdd-blog-examplebox {
  background: #f3f4f6;
}

.mdd-blog-tipbox p,
.mdd-blog-examplebox p,
.mdd-blog-finalbox p,
.mdd-blog-cta p {
  margin-bottom: 0;
}

.mdd-blog-finalbox {
  background: linear-gradient(135deg, #1f2937, #111827);
  color: #ffffff;
  padding: 30px;
  border-radius: 14px;
  margin: 42px 0 20px;
}

.mdd-blog-finalbox h2 {
  color: #ffffff;
  border-left: 5px solid #9ca3af;
  margin-top: 0;
}

.mdd-blog-finalbox p {
  color: #e5e7eb;
  margin-bottom: 16px;
}

.mdd-blog-finalbox p:last-child {
  margin-bottom: 0;
}

.mdd-blog-cta {
  text-align: center;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 30px;
  margin-top: 36px;
}

.mdd-blog-cta h2 {
  border-left: 0;
  padding-left: 0;
  margin-top: 0;
}

.mdd-blog-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #374151, #111827);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 10px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mdd-blog-btn:hover,
.mdd-blog-btn:focus {
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 0.92;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .mdd-blog-wrap {
    margin: 24px auto;
    padding: 0 15px;
  }

  .mdd-blog-hero {
    padding: 30px 20px;
  }

  .mdd-blog-hero h1 {
    font-size: 30px;
  }

  .mdd-blog-hero p {
    font-size: 16px;
  }

  .mdd-blog-content {
    font-size: 16px;
    line-height: 1.8;
  }

  .mdd-blog-content h2 {
    font-size: 24px;
  }

  .mdd-blog-intro {
    font-size: 18px;
  }

  .mdd-blog-finalbox,
  .mdd-blog-cta,
  .mdd-blog-tipbox,
  .mdd-blog-examplebox {
    padding: 20px;
  }

  .mdd-blog-btn {
    width: 100%;
    max-width: 340px;
  }
}
.mdd-blog-teaser {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 28px;
  margin: 0 0 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.mdd-blog-teaser-title {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.25;
}

.mdd-blog-teaser-title a {
  color: #111827;
  text-decoration: none;
}

.mdd-blog-teaser-title a:hover,
.mdd-blog-teaser-title a:focus {
  color: #374151;
  text-decoration: none;
}

.mdd-blog-teaser-meta {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 18px;
}

.mdd-blog-teaser-intro {
  font-size: 17px;
  line-height: 1.8;
  color: #2b2b2b;
}

.mdd-blog-teaser-intro p:last-child {
  margin-bottom: 0;
}

.mdd-blog-teaser-actions {
  margin-top: 22px;
}

.mdd-blog-teaser-icons {
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .mdd-blog-teaser {
    padding: 20px;
  }

  .mdd-blog-teaser-title {
    font-size: 24px;
  }

  .mdd-blog-teaser-intro {
    font-size: 16px;
  }
}
/* 
|--------------------------------------------------------------------------
| BLOG INTRO IMAGE STYLING
|--------------------------------------------------------------------------
| Clean, modern styling for blog teaser images
*/

.mdd-blog-teaser-image {
	margin: 0 0 20px; /* space below image */
}

.mdd-blog-teaser-image img {
	display: block;
	width: 100%;      /* responsive full width */
	height: auto;
	border-radius: 8px; /* soft rounded corners */
}

/* Optional caption styling */
.mdd-blog-teaser-image-caption {
	margin-top: 8px;
	font-size: 0.9rem;
	color: #666;
}
/* Center Blog Module */
.center-blog {
  text-align: center;
  padding: 20px 0px;
}

/* Center article images */
#sp-blog .sp-module-title {
	font-size: 3rem;
	color: #2F7F7F;
	padding-bottom: 20px;
}

/* Center article images */
.center-blog img {
  display: block;
  margin: 0 auto 15px auto;
}

/* Center titles */
.center-blog .mod-articles-item-title,
.center-blog h3,
.center-blog h4 {
  text-align: center;
}

/* Center intro text */
.center-blog .mod-articles-item-introtext,
.center-blog p {
  text-align: center;
  margin: 0 auto;
  max-width: 600px;
}

/* Center read more button */
.center-blog .mod-articles-item-readmore,
.center-blog .readmore {
  text-align: center;
  display: inline-block;
  margin-top: 10px;
}