/* ============================================================
   HOWZIT PORTAL — MAIN STYLESHEET
   Font: Onest (Google Fonts) | Inspired by BobShop.co.za
   ============================================================ */
:root {
  --orange:       #ff6a02;
  --orange-dark:  #e05800;
  --orange-light: #fff3e8;
  --navy:         #2d1952;
  --navy-mid:     #1885b0;
  --teal:         #00968e;
  --green:        #059669;
  --light-bg:     #f5f5f5;
  --white:        #ffffff;
  --text-dark:    #1a1a2e;
  --text-muted:   #666;
  --border:       #e0e0e0;
  --card-shadow:  0 2px 8px rgba(0,0,0,0.08);
  --radius:       8px;
  --radius-sm:    4px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Onest', sans-serif; font-size: 14px; color: var(--text-dark); background: var(--light-bg); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange); }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ── CATEGORY TABS ── */
.category-tabs { background: var(--white); border-bottom: 2px solid var(--border); }
.category-tabs-inner { max-width: 1400px; margin: 0 auto; padding: 16px 20px; }
.cat-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 13px; font-weight: 700; color: var(--text-muted); border-bottom: 3px solid transparent; transition: all 0.2s; cursor: pointer; flex-shrink: 0; }
.cat-tab i { font-size: 14px; }
.cat-tab:hover { color: var(--orange); background: var(--orange-light); }
.cat-tab.active { color: var(--orange); border-bottom-color: var(--orange); background: var(--orange-light); }
.cat-tab .tab-emoji { font-size: 16px; }

/* ── MAIN HEADER ── */
.main-header { background: var(--white); border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
.header-inner { display: flex; align-items: center; gap: 0; padding: 12px 20px; max-width: 1400px; margin: 0 auto; }
.logo-link { flex-shrink: 0; width: 220px; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo-img { height: 44px; width: auto; display: block; }
.search-wrapper { flex: 1; margin-left: 20px; }
.search-bar { display: flex; border: 2px solid var(--orange); border-radius: 30px; overflow: hidden; background: #fff; transition: box-shadow 0.2s; }
.search-bar:focus-within { box-shadow: 0 0 0 3px rgba(255,106,2,0.15); }
.search-input { flex: 1; border: none; outline: none; padding: 9px 16px; font-family: 'Onest', sans-serif; font-size: 14px; color: var(--text-dark); background: transparent; }
.search-select { border: none; border-left: 1px solid var(--border); outline: none; padding: 9px 10px; font-family: 'Onest', sans-serif; font-size: 12px; color: var(--text-muted); background: #f9f9f9; cursor: pointer; max-width: 160px; }
.search-btn { background: var(--orange); border: none; color: #fff; padding: 9px 18px; cursor: pointer; font-size: 14px; transition: background 0.2s; }
.search-btn:hover { background: var(--orange-dark); }

/* Header actions alignment fix */
.header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: 20px; }

.action-link { display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 600; color: var(--navy); gap: 2px; transition: color 0.2s; cursor: pointer; }
.action-link i { font-size: 20px; }
.action-link:hover { color: var(--orange); }
.inquiry-link-legacy { background: var(--orange); color: #fff !important; padding: 8px 16px; border-radius: 30px; flex-direction: row; gap: 8px; font-size: 13px; }
.inquiry-link-legacy:hover { background: var(--orange-dark); }
.inquiry-count-badge { background: var(--navy); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.auth-bar { background: #f8f0ea; text-align: center; padding: 5px; font-size: 12px; color: var(--text-muted); border-top: 1px solid #f0dfd0; }
.auth-bar a { color: var(--orange); font-weight: 600; }
.auth-bar a:hover { text-decoration: underline; }
.auth-bar .divider { margin: 0 8px; color: #ccc; }

/* ── PAGE LAYOUT ── */
.page-layout { display: flex; max-width: 1400px; margin: 0 auto; gap: 0; min-height: 80vh; }

/* ── SIDEBAR ── */
.sidebar { width: 220px; flex-shrink: 0; background: var(--white); border-right: 1px solid var(--border); padding-bottom: 20px; }
.sidebar-header { background: var(--navy); padding: 14px 16px; }
.sidebar-title { color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.sidebar-title i { color: var(--orange); }
.category-nav { padding: 6px 0; }
.cat-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 13px; font-weight: 500; color: var(--text-dark); border-bottom: 1px solid #f5f5f5; transition: background 0.15s, color 0.15s; cursor: pointer; }
.cat-item:hover, .cat-item.active { background: #fff5ee; color: var(--orange); }
.cat-icon { width: 22px; height: 22px; background: #fff3e8; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--orange); flex-shrink: 0; }
.sidebar-promo-links { padding: 12px 10px 6px; display: flex; flex-direction: column; gap: 6px; }
.promo-link { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; transition: opacity 0.2s; }
.promo-link:hover { opacity: 0.85; cursor: pointer; }

/* ── MAIN CONTENT ── */
.main-content { flex: 1; padding: 16px; min-width: 0; }

/* ── HERO BANNER ── */
.hero-banner { border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; position: relative; }
.hero-slides { position: relative; }
.hero-slide { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; min-height: 100px; border-radius: var(--radius); overflow: hidden; position: relative; }
.hero-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(45,25,82,0.92) 0%, rgba(24,133,176,0.75) 100%); }
.hero-text { position: relative; z-index: 1; color: #fff; }
.hero-sub { font-size: 11px; opacity: 0.8; margin-bottom: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
.hero-title { font-size: 20px; font-weight: 800; margin-bottom: 10px; line-height: 1.2; }
.hero-cta { display: inline-block; background: var(--orange); color: #fff; padding: 7px 18px; border-radius: 30px; font-weight: 700; font-size: 12px; transition: background 0.2s, transform 0.2s; }
.hero-cta:hover { background: var(--orange-dark); color: #fff; transform: translateY(-1px); }
.hero-img-wrap { position: relative; z-index: 1; width: 160px; height: 90px; overflow: hidden; border-radius: 6px; flex-shrink: 0; }
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.hero-dots { display: flex; justify-content: center; gap: 7px; padding: 6px 0 2px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #ccc; cursor: pointer; transition: background 0.2s; }
.dot.active { background: var(--orange); }

/* ── BANNER MARKETING SECTION (compact) ── */
.marketing-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.marketing-banner { border-radius: var(--radius); overflow: hidden; position: relative; min-height: 110px; display: flex; align-items: center; padding: 16px 20px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.marketing-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.marketing-banner-text { position: relative; z-index: 2; color: #fff; flex: 1; }
.marketing-banner-text h3 { font-size: 16px; font-weight: 800; margin-bottom: 4px; line-height: 1.2; }
.marketing-banner-text p { font-size: 12px; opacity: 0.9; margin-bottom: 8px; }
.marketing-banner-cta { display: inline-block; background: var(--orange); color: #fff; padding: 5px 14px; border-radius: 30px; font-weight: 700; font-size: 11px; transition: background 0.2s; }
.marketing-banner-cta:hover { background: var(--orange-dark); color: #fff; }
.marketing-banner-img { position: relative; z-index: 2; width: 120px; height: 80px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.marketing-banner-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }

/* ── TRUST / CATEGORY BADGES (compact) ── */
.trust-badges { display: flex; gap: 8px; margin-bottom: 14px; }
.trust-item { flex: 1; background: var(--white); border-radius: var(--radius); padding: 10px 12px; display: flex; align-items: center; gap: 10px; box-shadow: var(--card-shadow); border: 1px solid var(--border); }
.trust-icon { font-size: 18px; color: var(--orange); flex-shrink: 0; }
.trust-item strong { font-weight: 700; font-size: 12px; display: block; margin-bottom: 1px; }
.trust-item p { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.trust-item a { color: var(--orange); font-weight: 600; }
.trust-item a:hover { text-decoration: underline; }

/* ── HOWZIT ADMIN SECTION (compact) ── */
.howzit-admin-section { background: linear-gradient(135deg, #2d1952 0%, #1885b0 100%); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; color: #fff; position: relative; overflow: hidden; }
.howzit-admin-section::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: rgba(255,106,2,0.1); border-radius: 50%; }
.howzit-admin-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.howzit-admin-badge { background: var(--orange); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.howzit-admin-title { font-size: 18px; font-weight: 800; }
.howzit-admin-desc { font-size: 12px; opacity: 0.85; margin-bottom: 12px; max-width: 600px; }
.howzit-admin-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.admin-feature { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding: 14px; display: flex; align-items: flex-start; gap: 10px; transition: background 0.2s; }
.admin-feature:hover { background: rgba(255,255,255,0.14); }
.admin-feature i { font-size: 18px; color: var(--orange); margin-top: 2px; }
.admin-feature-text h5 { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.admin-feature-text p { font-size: 11px; opacity: 0.75; line-height: 1.4; }
.howzit-admin-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--orange); color: #fff; padding: 12px 28px; border-radius: 30px; font-weight: 700; font-size: 14px; transition: background 0.2s, transform 0.2s; }
.howzit-admin-cta:hover { background: var(--orange-dark); color: #fff; transform: translateY(-1px); }

/* ── CLIENT ADVERT SECTION ── */
.client-advert { background: var(--white); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; border: 1px solid var(--border); box-shadow: var(--card-shadow); display: flex; cursor: pointer; transition: box-shadow 0.2s; }
.client-advert:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.client-advert-img { width: 200px; flex-shrink: 0; overflow: hidden; }
.client-advert-img img { width: 100%; height: 100%; object-fit: cover; min-height: 120px; }
.client-advert-body { padding: 16px 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.client-advert-body h4 { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.client-advert-body p { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.client-advert-sponsor { font-size: 10px; color: var(--orange); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── PRODUCT SECTIONS ── */
.product-section { background: var(--white); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; border: 1px solid var(--border); box-shadow: var(--card-shadow); }

/* ── PRODUCT GRID ── */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.product-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; position: relative; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.product-badge { position: absolute; top: 10px; left: 10px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 4px; z-index: 1; }
.product-img { height: 180px; overflow: hidden; background: #f9f9f9; position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.product-card:hover .product-img img { transform: scale(1.05); }
.product-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.product-title { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 36px; }
.product-vendor { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.product-vendor i { color: var(--teal); font-size: 10px; }
.product-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.product-price-wrap { display: flex; flex-direction: column; }
.price-current { font-size: 16px; font-weight: 800; color: var(--text-dark); }
.price-old { font-size: 11px; color: #999; text-decoration: line-through; }
.contact-btn { background: var(--navy); color: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.contact-btn:hover { background: var(--orange); }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9990000; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-box { background: #fff; width: 100%; max-width: 800px; border-radius: 12px; overflow: hidden; animation: modalIn 0.3s ease; max-height: 90vh; display: flex; flex-direction: column; }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modal-header { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: #fcfcfc; }
.modal-header h3 { font-size: 18px; font-weight: 800; color: var(--navy); }
.modal-close { background: none; border: none; font-size: 24px; color: #999; cursor: pointer; transition: color 0.2s; }
.modal-close:hover { color: var(--orange); }
.modal-body { padding: 24px; overflow-y: auto; display: flex; gap: 24px; }
.modal-img-col { flex: 0 0 300px; }
.modal-img-col img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.modal-info-col { flex: 1; }
.modal-price { font-size: 24px; font-weight: 800; color: var(--orange); margin-bottom: 16px; }
.modal-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.modal-primary-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: var(--orange); color: #fff; border: none; border-radius: 30px; font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.modal-primary-btn:hover { background: var(--orange-dark); }
.modal-wishlist { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: var(--navy); color: #fff; border: none; border-radius: 30px; font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.modal-wishlist:hover { background: var(--navy-mid); }
.modal-qty-row { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.modal-qty-label { font-size: 14px; font-weight: 700; color: var(--navy); }
.qty-control { display: flex; align-items: center; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; }
.qty-btn { width: 36px; height: 36px; border: none; background: var(--light-bg); color: var(--navy); font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.qty-btn:hover { background: var(--orange); color: #fff; }
.qty-input { width: 50px; height: 36px; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 700; color: var(--text-dark); outline: none; -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.modal-seller-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.modal-bids { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.modal-bids i { color: var(--green); }
.modal-contact-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
/* Image Lightbox — zoomable for Howzit Market items only */
.image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  /* Stack the gallery lightbox ABOVE the business popup
     (#productModal / .modal-overlay = 9990000) so zooming a gallery
     image inside the popup shows it on TOP. Kept BELOW the promotions
     viewer (9995000), and below lead/quote/splash overlays. */
  z-index: 9994000;
  background: rgba(0,0,0,0.88);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.image-lightbox.active { display: flex; }
.image-lightbox img {
  max-width: 90vw; max-height: 90vh;
  object-fit: contain; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  cursor: zoom-in; transition: transform 0.3s ease;
  transform-origin: center center;
}
.image-lightbox img.zoomed {
  transform: scale(2.5); cursor: grab;
  max-width: none; max-height: none;
}
.image-lightbox img.zoomed:active { cursor: grabbing; }
.image-lightbox-close {
  position: absolute; top: 20px; right: 20px;
  background: rgba(255,255,255,0.2); border: none; color: #fff;
  font-size: 28px; cursor: pointer; width: 44px; height: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; z-index: 10;
}
.image-lightbox-close:hover { background: rgba(255,255,255,0.4); }

/* Only Howzit Mall images get zoom cursor */
.modal-main-img.howzit-mall-zoom { cursor: zoom-in; }
.modal-main-img.howzit-mall-zoom:hover { transform: scale(1.02); }
.modal-main-img { transition: transform 0.2s; }
.modal-btn { flex: 1; padding: 12px; border-radius: 30px; font-weight: 700; cursor: pointer; border: none; font-family: 'Onest', sans-serif; transition: background 0.2s; text-align: center; }
.modal-btn-primary { background: var(--orange); color: #fff; }
.modal-btn-primary:hover { background: var(--orange-dark); }
.modal-btn-secondary { background: var(--navy); color: #fff; }
.modal-btn-secondary:hover { background: var(--navy-mid); }
.modal-contact-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.modal-contact-title { font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.modal-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-contact-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: #f8f8f8; border-radius: 8px; }
.modal-contact-item i { font-size: 16px; color: var(--orange); width: 20px; text-align: center; }
.modal-contact-item a { color: var(--navy); font-weight: 600; font-size: 13px; }
.modal-contact-item a:hover { color: var(--orange); }
.modal-contact-label { font-size: 11px; color: var(--text-muted); display: block; }

/* ── PAYMENT SECTION ── */
.payment-section { background: var(--white); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; border: 1px solid var(--border); text-align: center; box-shadow: var(--card-shadow); }
.payment-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
.payment-icons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pay-icon { background: #f5f5f5; border: 1px solid var(--border); border-radius: 6px; padding: 6px 14px; font-size: 11px; font-weight: 700; color: var(--text-dark); cursor: default; transition: background 0.15s; }
.pay-icon:hover { background: #ffe5cc; }

/* ── FOOTER ── */
.site-footer { background: var(--navy); color: #c8d8e8; padding: 40px 20px 0; margin-top: 20px; }
.footer-top { max-width: 1400px; margin: 0 auto; display: flex; gap: 40px; padding-bottom: 30px; flex-wrap: wrap; }
.footer-brand { flex: 0 0 220px; }
.footer-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.footer-logo-img { height: 40px; width: auto; display: block; }
.footer-contact { font-size: 13px; line-height: 1.8; color: #a0b8cc; }
.footer-contact a { color: var(--orange); }
.footer-contact a:hover { text-decoration: underline; }
.footer-sibling-brands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.brand-pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); color: #c8d8e8; transition: background 0.2s, color 0.2s; }
.brand-pill:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.footer-col { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 8px; }
.footer-col h4 { font-size: 13px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-col a { font-size: 12.5px; color: #a0b8cc; transition: color 0.2s; }
.footer-col a:hover { color: var(--orange); }
.app-badges { display: flex; flex-direction: column; gap: 8px; }
.app-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: 9px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; transition: background 0.2s; }
.app-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.app-btn i { font-size: 16px; }
.footer-bottom { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; color: #7090a8; flex-wrap: wrap; gap: 10px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: #7090a8; }
.footer-links a:hover { color: var(--orange); }

/* ── CART SIDEBAR ── */
.inquiry-sidebar-legacy { position: fixed; top: 0; right: 0; width: 340px; height: 100%; background: #fff; z-index: 9999; box-shadow: -4px 0 20px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; }
.inquiry-sidebar-legacy.open { transform: translateX(0); }
.inquiry-sidebar-legacy-header { background: var(--navy); color: #fff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; }
.inquiry-sidebar-legacy-close { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.inquiry-sidebar-legacy-close:hover { background: rgba(255,255,255,0.15); }
.inquiry-sidebar-legacy-items { flex: 1; overflow-y: auto; padding: 12px; }
.inquiry-empty-legacy { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.inquiry-empty-legacy i { font-size: 48px; color: #ddd; margin-bottom: 12px; display: block; }
.inquiry-item-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.inquiry-item-img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }
.inquiry-item-info { flex: 1; min-width: 0; }
.inquiry-item-name { font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inquiry-item-price { font-size: 13px; font-weight: 800; color: var(--orange); }
.inquiry-item-qty { font-size: 11px; color: var(--text-muted); }
.inquiry-item-remove { background: none; border: none; color: #ccc; font-size: 16px; cursor: pointer; padding: 4px; border-radius: 4px; transition: color 0.2s; }
.inquiry-item-remove:hover { color: #e55; }
.inquiry-sidebar-legacy-footer { padding: 16px; border-top: 1px solid var(--border); }
.inquiry-total-row { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.inquiry-total-price { color: var(--orange); }
.submit-inquiry-btn { width: 100%; background: var(--orange); color: #fff; border: none; padding: 14px; border-radius: 30px; font-family: 'Onest', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.submit-inquiry-btn:hover { background: var(--orange-dark); }

/* ── TOAST ── */
/* CLIENT FIX (Submit Review "not clickable"): the toast carried z-index 20000,
   which is BELOW the business popup (.modal-overlay = 9990000), the catalogue
   viewer (9995000), the inquiry sidebar / quote / lead popups (2147483600-02)
   and the search-results overlay (2147483610). Every toast fired while one of
   those layers was open — e.g. "Please select a star rating." / "Please write
   a review." / "Please tick the POPIA consent box…" / "Thank you! Your review
   was submitted…" after tapping Submit Review — rendered BEHIND the popup, so
   visitors saw NO response and concluded the button was not clickable.
   Lift the toast above all popup layers; only the splash screen (2147483647)
   stays higher. */
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--navy); color: #fff; padding: 12px 24px; border-radius: 30px; font-size: 13px; font-weight: 600; z-index: 2147483620; opacity: 0; transition: opacity 0.3s, transform 0.3s; white-space: normal; text-align: center; max-width: 92vw; display: flex; align-items: center; justify-content: center; gap: 8px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast i { color: var(--orange); }

/* ── CATEGORY CONTENT SECTIONS ── */
.category-content { display: none; }
.category-content.active { display: block; }

/* ── MOBILE NAV ── */
.mobile-menu-btn { display: none; background: var(--navy); border: none; color: #fff; padding: 8px 14px; border-radius: 6px; cursor: pointer; align-items: center; gap: 8px; font-family: 'Onest', sans-serif; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.mobile-menu-btn i { font-size: 16px; }
.mobile-menu-btn:hover { background: var(--orange); }
.mobile-nav-drawer { position: fixed; top: 0; left: 0; width: 280px; height: 100%; background: #fff; z-index: 9999; box-shadow: 4px 0 20px rgba(0,0,0,0.25); overflow-y: auto; transform: translateX(-100%); transition: transform 0.3s ease; }
.mobile-nav-drawer.open { transform: translateX(0); }
.drawer-header { background: var(--navy); padding: 16px; display: flex; align-items: center; justify-content: space-between; }
.drawer-logo { display: flex; align-items: center; gap: 8px; }
.drawer-logo-img { height: 32px; width: auto; display: block; }
.drawer-close { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; }
.drawer-close:hover { background: rgba(255,255,255,0.15); }
.drawer-section-title { background: #f5f5f5; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); padding: 8px 16px; border-bottom: 1px solid var(--border); }
.drawer-cat-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; font-size: 14px; font-weight: 500; color: var(--text-dark); transition: background 0.15s, color 0.15s; cursor: pointer; }
.drawer-cat-item:hover { background: #fff5ee; color: var(--orange); }
.drawer-cat-item .cat-icon { background: #fff3e8; width: 28px; height: 28px; }
.drawer-promo { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; }
.mobile-nav-overlay.open { display: block; }
.mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--border); z-index: 500; padding: 6px 0; box-shadow: 0 -3px 12px rgba(0,0,0,0.1); }
.mobile-bottom-nav-inner { display: flex; justify-content: space-around; align-items: center; }
.mob-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: color 0.2s; position: relative; }
.mob-nav-item i { font-size: 20px; }
.mob-nav-item.active, .mob-nav-item:hover { color: var(--orange); }
/* The "Get Quotes" bottom-nav item now matches the other nav items exactly
   (no more blue gradient pill that made it look inconsistent). It simply
   inherits the standard .mob-nav-item look and uses the active/hover orange. */
.mob-nav-item.mob-nav-quotes { background: none; color: var(--text-muted); border-radius: 8px; padding: 4px 8px; box-shadow: none; }
.mob-nav-item.mob-nav-quotes i { color: inherit; }
.mob-nav-item.mob-nav-quotes:hover, .mob-nav-item.mob-nav-quotes.active { color: var(--orange); opacity: 1; }
.mob-nav-inquiry-badge { position: absolute; top: -2px; right: 2px; background: #e11d2e; color: #fff; font-size: 9px; font-weight: 700; border-radius: 50%; min-width: 15px; height: 15px; padding: 0 3px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; box-sizing: border-box; }

/* ── RESPONSIVE ── */
/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .howzit-admin-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .sidebar { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-badges { flex-direction: column; }
  .hero-img-wrap { display: none; }
  .marketing-banner-img { display: none; }
  .mobile-bottom-nav { display: block; }
  body { padding-bottom: 64px; }
  .business-card { flex-direction: column; }
  .business-card-img { width: 100%; height: 160px; }
  .client-advert { flex-direction: column; }
  .client-advert-img { width: 100%; height: 160px; }
  .header-inner { justify-content: space-between; }
  .logo-link { flex: 0 0 auto; width: auto; }
  .header-actions { margin-left: auto; order: 2; }
}

@media (max-width: 768px) {
  /* Category card responsive styles handled in main category card block */
}

@media (max-width: 640px) {
  .header-inner { flex-wrap: wrap; gap: 10px; }
  .logo-img { height: 36px; }
  .search-wrapper { order: 3; max-width: 100%; width: 100%; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { flex-direction: column; gap: 20px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .modal-body { flex-direction: column; }
  .modal-img-col { flex: none; width: 100%; }
  .inquiry-sidebar-legacy { width: 100%; }
  .howzit-admin-features { grid-template-columns: 1fr; }
  .header-actions { gap: 12px; }
  .action-link span { display: none; }
  .inquiry-link-legacy { padding: 6px 12px; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  /* Category card 480px styles handled in main category card block */
}

/* ── CATEGORY CARDS ── */
.category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.category-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--card-shadow);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.category-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  transform-origin: center;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: var(--orange);
  background: var(--orange-light);
}
.category-card:hover::after {
  transform: scaleX(1);
}
.category-card:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition-duration: 0.1s;
}
.category-card.active {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255,106,2,0.15);
  border-color: var(--orange);
  background: var(--orange-light);
}
.category-card.active::after {
  transform: scaleX(1);
}
.category-card.active .category-card-icon {
  background: var(--orange);
  color: #fff;
}
.category-card-icon {
  width: 46px;
  height: 46px;
  background: var(--orange-light);
  color: var(--orange);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.category-card:hover .category-card-icon {
  transform: scale(1.08);
}
.category-card-content strong {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 3px;
  color: var(--navy);
  transition: color 0.25s;
}
.category-card.active .category-card-content strong {
  color: var(--orange);
}
.category-card-content p {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Mobile adjustments for category cards */
@media (max-width: 768px) {
  .category-cards {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
  }
  .category-card { padding: 12px; gap: 10px; }
  .category-card-icon { width: 38px; height: 38px; font-size: 15px; border-radius: 10px; }
  .category-card-content strong { font-size: 12px; }
  .category-card-content p { display: none; }
}

@media (max-width: 480px) {
  .category-cards {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .category-card-content p { display: none; }
  .category-card { padding: 10px; gap: 8px; flex-direction: column; text-align: center; }
  .category-card-icon { width: 36px; height: 36px; font-size: 14px; }
  .category-card-content strong { font-size: 11px; }
}

/* ── RESTORED PRODUCT STYLES ── */
.product-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 5px; }
.badge { padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; color: #fff; text-transform: uppercase; }
.badge.sale { background: #e55; }
.badge.new { background: var(--teal); }
.product-discount { position: absolute; top: 10px; right: 10px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 4px; z-index: 2; }
.product-img-wrap { height: 180px; overflow: hidden; background: #f9f9f9; border-bottom: 1px solid var(--border); }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.product-card:hover .product-img-wrap img { transform: scale(1.05); }
.product-info { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.product-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.seller { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.condition { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.condition.new-badge { background: #e6fffa; color: #00a3c4; }
.product-price { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; display: flex; align-items: baseline; gap: 6px; }
.product-price sup { font-size: 11px; margin-left: 1px; }
.product-old-price { font-size: 12px; color: #999; text-decoration: line-through; font-weight: 400; }
.bid-btn, .buy-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 30px; font-size: 12px; font-weight: 700; transition: all 0.2s; text-align: center; }
.bid-btn { background: var(--navy); color: #fff; }
.bid-btn:hover { background: var(--navy-mid); }
.buy-btn { background: var(--orange); color: #fff; }
.buy-btn:hover { background: var(--orange-dark); }

/* ── BUSINESS GRID (Local Market, Attorneys, Skills) ── */
.business-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.business-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  position: relative;
}
.business-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.business-card-img {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.business-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.business-card-body {
  padding: 12px;
  flex: 1;
  min-width: 0;
}
.business-card-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.badge-featured {
  background: var(--orange-light);
  color: var(--orange);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.badge-verified {
  background: #ecfdf5;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.business-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.business-card-type {
  font-size: 11px;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.business-card-type i {
  font-size: 10px;
}
.business-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.business-card-location {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}
.business-card-location i {
  color: var(--orange);
  font-size: 10px;
}
.business-card-actions {
  display: flex;
  gap: 8px;
}
.btn-action {
  flex: 1;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.2s, opacity 0.2s;
  font-family: 'Onest', sans-serif;
}
.btn-contact {
  background: var(--navy);
  color: #fff;
}
.btn-contact:hover {
  background: var(--navy-mid);
}
.btn-website {
  background: var(--orange);
  color: #fff;
}
.btn-website:hover {
  background: var(--orange-dark);
}

/* ── HOTEL GRID ── */
.hotel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.hotel-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  position: relative;
}
.hotel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.hotel-card-img {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  overflow: hidden;
  background: #f5f5f5;
  position: relative;
}
.hotel-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hotel-card-rating {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}
.hotel-card-body {
  padding: 12px;
  flex: 1;
  min-width: 0;
}
.hotel-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hotel-card-type {
  font-size: 11px;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hotel-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.hotel-card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.hotel-detail {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.hotel-detail i {
  color: var(--orange);
  font-size: 10px;
}
.hotel-card-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--orange);
  margin-bottom: 10px;
}
.hotel-card-actions {
  display: flex;
  gap: 8px;
}

/* ── SKILL CARDS ── */
.skill-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  position: relative;
}
.skill-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.skill-card-logo {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skill-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skill-card-body {
  padding: 12px;
  flex: 1;
  min-width: 0;
}
.skill-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skill-card-type {
  font-size: 11px;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 4px;
}
.skill-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.skill-card-location {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.skill-card-location i {
  color: var(--orange);
  font-size: 10px;
}
.skill-card-actions {
  display: flex;
  gap: 8px;
}

/* ── SKILLS FILTERS ── */
.skills-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.skills-filter-select,
.filter-select {
  flex: 1;
  min-width: 150px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  color: var(--text-dark);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s;
}
.skills-filter-select:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--orange);
}
.skills-count {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 600;
}

/* ── PAGINATION ── */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 0;
}
.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 30px;
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.2s;
}
.pagination-btn:hover:not(:disabled) {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-info {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ── SEARCH RESULTS OVERLAY ── */
.search-results-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Deep dim so the page behind is barely visible — focus stays on results */
  background: rgba(10, 8, 20, 0.86);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  /* Must sit ABOVE everything on the page, including the Losus chatbot
     toggle/container (1000001), the notification bell (1000000), the
     cb/wb launchers (2147483001-2147483002) and the inquiry/quote/lead
     popups (2147483600-2147483602). Only the splash screen (2147483647)
     stays higher. */
  z-index: 2147483610;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 16px 40px;
  overflow-y: auto;
  /* Contain scroll inside the popup — stop it chaining to the page behind */
  overscroll-behavior: contain;
}
.search-results-overlay.open {
  display: flex;
}
/* Lock page scroll while the popup is open (toggled from JS) */
body.search-overlay-open {
  overflow: hidden;
}
/* CLIENT FIX (Promotions popup opened from search results appeared UNDERNEATH
   the search overlay): the business detail modal (#productModal) sits at
   z-index 9990000, which is below the search overlay (2147483610). When the
   detail modal is opened from within the search results, lift it above the
   overlay so it is always visible on top. #productModal follows
   #searchResultsOverlay in the DOM, so the sibling selector applies. */
.search-results-overlay.open ~ .modal-overlay.open {
  z-index: 2147483615;
}
.search-results-container {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  animation: modalIn 0.3s ease;
}

/* ── Professional popup header ── */
.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--navy) 0%, #3d2370 100%);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.search-results-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.search-title-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,106,2,0.18);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.search-title-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.search-title-heading {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}
.search-title-query {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-title-query strong {
  color: #fff;
  font-weight: 700;
}
.search-total {
  font-size: 11px;
  color: var(--orange);
  font-weight: 700;
  background: rgba(255,106,2,0.16);
  border: 1px solid rgba(255,106,2,0.4);
  padding: 3px 11px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.search-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}
.search-close-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: rotate(90deg);
}
.search-section {
  border-bottom: 1px solid var(--light-bg);
}
.search-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fafafa;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.search-section-header i {
  color: var(--orange);
}
.search-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--orange);
  font-weight: 600;
  background: var(--orange-light);
  padding: 2px 10px;
  border-radius: 20px;
}
.search-section-results {
  padding: 8px 12px;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.search-result-item:hover {
  background: var(--orange-light);
}
.search-result-item img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.search-result-info {
  flex: 1;
  min-width: 0;
}
.search-result-info h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-info p {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Result call-to-action button (Contact / Book / Hire / Quote) ── */
.search-result-cta {
  flex-shrink: 0;
  align-self: center;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 8px 18px;
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255,106,2,0.3);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.search-result-cta:hover {
  background: var(--orange-dark);
  box-shadow: 0 4px 12px rgba(255,106,2,0.4);
  transform: translateY(-1px);
}
.search-result-cta:active {
  transform: translateY(0);
}
/* ── Result action stack (primary CTA + View Promotions) ── */
.search-result-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}
.search-result-actions .search-result-cta {
  align-self: stretch;
  text-align: center;
}
.search-result-promo {
  flex-shrink: 0;
  background: #fff;
  color: var(--orange);
  border: 1.5px solid var(--orange);
  border-radius: 30px;
  padding: 6px 14px;
  font-family: 'Onest', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.search-result-promo:hover {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 3px 10px rgba(255,106,2,0.35);
}
.search-result-promo:active {
  transform: translateY(1px);
}
.search-more {
  text-align: center;
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  cursor: pointer;
  transition: background 0.15s;
}
.search-more:hover {
  background: var(--orange-light);
}
.search-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}
.search-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.search-no-results {
  text-align: center;
  padding: 40px 20px;
}
.search-no-results h3 {
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 8px;
}
.search-no-results p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.search-category-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.search-category-shortcuts button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--orange-light);
  border: 1px solid var(--orange);
  border-radius: 30px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Onest', sans-serif;
  transition: all 0.2s;
}
.search-category-shortcuts button:hover {
  background: var(--orange);
  color: #fff;
}

/* ── NOTIFICATION BOX ── */
.notification-box {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 1000000 !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange) 0%, var(--navy) 100%);
  box-shadow: 0 4px 20px rgba(232, 101, 26, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
}
.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e55;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
/* Notification popup restyled to match the "Get Quotes" / "My Inquiries"
   pop-up: a right-side, full-height slide-in panel (380px) with a dark
   header + close button. Only the structural/layout CSS is copied —
   the notification colour scheme (navy gradient header, orange accents)
   is kept. */
.notification-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 100vw;
  height: 100%;
  height: 100vh; /* explicit fallback so the panel always fills the screen */
  height: 100dvh; /* dynamic viewport height: fills visible area on Chrome Android */
  background: #fff;
  border-radius: 0;
  box-shadow: -4px 0 20px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 2147483600;
  animation: none;
}
.notification-panel.open {
  transform: translateX(0);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.notification-panel-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.notification-panel-header h4 {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.notification-panel-header h4 i { color: var(--orange); }
.notification-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.notification-empty {
  text-align: center;
  padding: 30px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ===================================================================== */
/* HOWZIT BOT ICON MODE — only ONE bottom-right icon at a time           */
/*                                                                       */
/* body[data-bot-mode="default"] -> Notification bell visible            */
/* body[data-bot-mode="cb"]      -> Chatbot (cb) bubble visible only     */
/* body[data-bot-mode="wb"]      -> Webbot  (wb) robot visible only      */
/*                                                                       */
/* The bottom-LEFT system chatbot (Losus) is unaffected here — it stays  */
/* on the left and only its AUTO pop-up is suppressed on cb/wb pages.    */
/* ===================================================================== */

/* Default: show notification bell, hide embedded bot launchers. */
body[data-bot-mode="default"] .notification-box { display: flex; }
body[data-bot-mode="default"] .hzc-bubble,
body[data-bot-mode="default"] #hzpWbLauncher { display: none !important; }

/* Chatbot demo (cb): hide notification bell + webbot launcher, show cb bubble. */
body[data-bot-mode="cb"] .notification-box,
body[data-bot-mode="cb"] #hzpWbLauncher { display: none !important; }
body[data-bot-mode="cb"] .hzc-bubble { display: flex; }

/* Webbot demo (wb): hide notification bell + cb bubble, show wb robot. */
body[data-bot-mode="wb"] .notification-box,
body[data-bot-mode="wb"] .hzc-bubble { display: none !important; }
body[data-bot-mode="wb"] #hzpWbLauncher { display: flex; }

/* Safety net: if a launcher somehow lingers on the wrong page, force-hide it.
   (The JS manager removes leftover launchers, but this guards against races.) */
body[data-bot-mode="default"] .hzc-panel,
body[data-bot-mode="default"] #hzpWbOverlay { display: none !important; }

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.15s;
  border-bottom: 1px solid #f5f5f5;
}
.notification-item:hover {
  background: var(--orange-light);
}
.notification-item.read {
  opacity: 0.6;
}
.notification-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange-light);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.notification-item-content {
  flex: 1;
  min-width: 0;
}
.notification-item-content p {
  font-size: 12px;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 2px;
}
.notification-time {
  font-size: 10px;
  color: var(--text-muted);
}

/* ── PRODUCT CAROUSEL (for Styleb modal) ── */
.product-carousel {
  position: relative;
  width: 300px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
}
.carousel-track {
  position: relative;
  height: 230px;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.carousel-slide.active {
  opacity: 1;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 2;
}
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
.carousel-prev:hover,
.carousel-next:hover {
  background: #fff;
}
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.2s;
}
.carousel-dot.active {
  background: var(--orange);
}

/* ── STYLEB VARIANT SELECT ── */
.styleb-variant-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.styleb-variant {
  flex: 1;
}
.styleb-variant label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.styleb-variant select {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  color: var(--text-dark);
  background: #fff;
  cursor: pointer;
}
.styleb-variant select:focus {
  outline: none;
  border-color: var(--orange);
}

/* ── NO RESULTS MESSAGE ── */
.no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.no-results i {
  font-size: 32px;
  color: #ddd;
  margin-bottom: 12px;
  display: block;
}

/* ── PRODUCT DESC SHORT ── */
.product-desc-short {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

/* ── HIGHLIGHT CARD (search result navigation) ── */
.highlight-card {
  animation: highlightPulse 2s ease-in-out;
}
@keyframes highlightPulse {
  0%, 100% { box-shadow: var(--card-shadow); }
  50% { box-shadow: 0 0 0 4px var(--orange), 0 6px 20px rgba(255,106,2,0.3); }
}

/* ── CONTACT MODAL STYLES ── */
.contact-detail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-detail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #f8f8f8;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.contact-detail-item i {
  font-size: 20px;
  color: var(--orange);
  width: 28px;
  text-align: center;
}
.contact-detail-item .contact-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}
.contact-detail-item .contact-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.contact-detail-item .contact-value a {
  color: var(--navy);
}
.contact-detail-item .contact-value a:hover {
  color: var(--orange);
}

/* ── RESPONSIVE FIXES FOR NEW GRIDS ── */
@media (max-width: 992px) {
  .business-grid {
    grid-template-columns: 1fr;
  }
  .hotel-grid {
    grid-template-columns: 1fr;
  }
  .business-card {
    flex-direction: column;
  }
  .business-card-img {
    width: 100%;
    height: 140px;
  }
  .hotel-card {
    flex-direction: column;
  }
  .hotel-card-img {
    width: 100%;
    height: 160px;
  }
  .notification-panel {
    width: 100%;
    max-width: 100vw;
    right: 0;
  }
}

@media (max-width: 640px) {
  .business-grid {
    grid-template-columns: 1fr;
  }
  .hotel-grid {
    grid-template-columns: 1fr;
  }
  /* Search popup becomes a near-full-screen sheet on mobile */
  .search-results-overlay {
    padding: 0;
    align-items: stretch;
  }
  .search-results-container {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .search-results-header {
    border-radius: 0;
    padding: 14px 16px;
  }
  .search-result-item {
    gap: 10px;
    padding: 12px 10px;
  }
  .search-result-item img {
    width: 40px;
    height: 40px;
  }
  .search-result-cta {
    padding: 8px 14px;
    font-size: 11px;
  }
  .search-result-actions {
    gap: 5px;
  }
  .search-result-promo {
    padding: 6px 12px;
    font-size: 10px;
  }
  .notification-panel {
    width: 100%;
    max-width: 100vw;
  }
  .product-carousel {
    width: 100%;
  }
  .carousel-track {
    height: 240px;
  }
}

/* ── Section Search Bars ── */
.section-search-bar {
  position: relative;
  margin: 16px 0;
}
.section-search-input {
  width: 100%;
  padding: 13px 18px 13px 46px;
  border: 2px solid #d7dbe0;
  border-radius: 30px;
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff6a02' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") no-repeat 18px center;
  background-size: 16px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.section-search-input:hover {
  border-color: #b9c0c8;
}
.section-search-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,106,2,0.14);
}
.section-search-input::placeholder {
  color: #9aa0a6;
}

/* ── LOCAL MARKET CARDS (db-locmarket.js classes) ── */
.product-card .product-image {
  height: 160px;
  overflow: hidden;
  background: #f9f9f9;
  position: relative;
}
.product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.product-card:hover .product-image img {
  transform: scale(1.05);
}
.product-card .product-info {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card .product-info h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card .product-info p {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 6px 0;
}
.product-card .product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.product-card .product-rating span:first-child {
  color: #f59e0b;
}
.product-card .business-info {
  margin-top: auto;
}
.product-card .business-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.product-card .product-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.product-card .btn-add-cart,
.product-card .btn-quick-view {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Onest', sans-serif;
}
.product-card .btn-add-cart {
  background: var(--navy);
  color: #fff;
}
.product-card .btn-add-cart:hover {
  background: var(--orange);
}
/* Contact Provider button on the Local Market menu page (db-locmarket.js)
   uses .btn-add-cart .btn-contact-provider — override the inherited navy
   with a teal fill so it matches the homepage Contact Provider buttons. */
.product-card .btn-contact-provider,
.btn-contact-provider {
  background: var(--teal) !important;
  color: #fff !important;
}
.product-card .btn-contact-provider:hover,
.btn-contact-provider:hover {
  background: #007a73 !important;
}
.product-card .btn-quick-view {
  background: #10b981;
  color: #fff;
}
.product-card .btn-quick-view:hover {
  background: #059669;
}
.product-card .btn-quick-view.btn-secondary {
  background: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
}
.product-card .btn-quick-view.btn-success {
  background: #10b981;
  color: #fff;
}

/* ── SKILL/ATTORNEY/LODGE CARDS (db-attorneys.js, db-lodges.js, db-skills.js classes) ── */
.skill-card .skill-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 0 12px;
}
.skill-card .skill-logo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skill-card .skill-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skill-card .skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.skill-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.skill-badge.verified {
  background: #dbeafe;
  color: #1d4ed8;
}
.skill-badge.sponsored {
  background: #fef3c7;
  color: #d97706;
}
.skill-badge.inactive {
  background: #f3f4f6;
  color: #9ca3af;
}
.skill-card .skill-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skill-card .skill-type-badge {
  font-size: 11px;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 4px;
}
.skill-card .skill-description {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 6px 0;
}
.skill-card .skill-location {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.skill-card .skill-location .location-icon {
  font-size: 10px;
}
.skill-card .skill-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.skill-card .skill-phone .phone-icon {
  font-size: 12px;
}
.skill-card .skill-phone .phone-number {
  font-weight: 600;
}
.skill-card .skill-phone .xxxx-placeholder {
  color: var(--orange);
  font-weight: 700;
}
.skill-card .skill-phone .btn-view-phone {
  background: none;
  border: none;
  color: var(--orange);
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  font-family: 'Onest', sans-serif;
}
.skill-card .skill-phone .btn-view-phone:hover {
  text-decoration: underline;
}
.skill-card .skill-services {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.skill-card .skill-services small {
  display: block;
  margin-bottom: 2px;
}
.skill-card .skill-card-footer {
  display: flex;
  gap: 6px;
  padding: 8px 12px 12px 12px;
}
.skill-card .skill-card-footer .btn-skill-chat,
.skill-card .skill-card-footer .btn-skill-website,
.skill-card .skill-card-footer .btn-skill-view,
.skill-card .skill-card-footer .btn-skill-contact {
  flex: 1;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Onest', sans-serif;
  text-align: center;
}
.skill-card .skill-card-footer .btn-skill-chat,
.skill-card .skill-card-footer .btn-skill-view {
  background: var(--navy);
  color: #fff;
}
.skill-card .skill-card-footer .btn-skill-chat:hover,
.skill-card .skill-card-footer .btn-skill-view:hover {
  background: #1e3a5f;
}
/* Hire Me button on the Skills & Services menu page (db-skills.js)
   uses .btn-skill-view .btn-hire-now — match the same colour scheme as
   the Attorneys (Request Quote) and Accommodation (Book Service) menu
   pages: light-grey background with navy text, navy fill on hover. */
.skill-card .skill-card-footer .btn-hire-now,
.btn-hire-now {
  background: #f3f4f6 !important;
  color: var(--navy) !important;
  border: 1px solid var(--border) !important;
}
.skill-card .skill-card-footer .btn-hire-now:hover,
.btn-hire-now:hover {
  background: #e5e7eb !important;
}
.skill-card .skill-card-footer .btn-skill-website {
  background: var(--orange);
  color: #fff;
}
.skill-card .skill-card-footer .btn-skill-website:hover {
  background: #d4550f;
}
.skill-card .skill-card-footer .btn-skill-contact {
  background: #f3f4f6;
  color: var(--navy);
  border: 1px solid var(--border);
}
.skill-card .skill-card-footer .btn-skill-contact:hover {
  background: #e5e7eb;
}
.skill-card .skill-card-footer .btn-skill-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.skill-card .skill-card-footer .btn-skill-disabled:hover {
  background: #d1d5db;
}

/* ── Responsive card grids for Local Market, Attorneys, Lodges, Skills ── */
#navigation_y,
#navigation_a,
#navigation_b,
#navigation_s {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
#navigation_y .product-card,
#navigation_a .skill-card,
#navigation_b .skill-card,
#navigation_s .skill-card {
  display: flex;
  flex-direction: column;
}

/* ── SKILL MODAL STYLES ── */
.skill-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.skill-modal-logo {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  background: #f5f5f5;
}
.skill-modal-type {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
  background: #fff7ed;
  padding: 4px 10px;
  border-radius: 6px;
  margin-top: 4px;
}
.skill-profile-section {
  margin-bottom: 12px;
}
.skill-profile-section h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.skill-profile-section p,
.skill-profile-section div {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── DYNAMIC SERVICES SECTION (db-services.js) ── */
.services-dynamic-section {
  margin-bottom: 32px;
}
.service-filters-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.service-filter-btn {
  padding: 6px 14px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Onest', sans-serif;
  color: var(--text-muted);
}
.service-filter-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.service-filter-btn.active {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.service-bulk-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.service-bulk-inquiry-btn {
  padding: 8px 18px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Onest', sans-serif;
}
.service-bulk-inquiry-btn:hover {
  background: var(--orange);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.service-product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.service-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.service-product-card.featured {
  border-color: var(--orange);
}
.service-featured-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}
.service-product-image {
  height: 140px;
  overflow: hidden;
  background: #f9f9f9;
  position: relative;
}
.service-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.service-product-card:hover .service-product-image img {
  transform: scale(1.05);
}
.service-product-info {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-product-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.service-product-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  flex: 1;
  line-height: 1.3;
}
.service-product-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 8px 0;
}
.service-product-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.service-product-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
}
.service-product-duration {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.service-category-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--orange);
  background: #fff7ed;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.service-inquiry-btn {
  margin-top: auto;
  width: 100%;
  padding: 8px 14px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Onest', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.service-inquiry-btn:hover {
  background: var(--orange);
}
.service-inquiry-btn.added {
  background: #10b981;
}
.service-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
}
.service-page-btn {
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Onest', sans-serif;
}
.service-page-btn:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
}
.service-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.service-page-info {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ============================================================
   HOWZIT PORTAL 2.0 — BUSINESS EXPOSURE ADDITIONS
   New styles for inquiry system, membership tiers, CTA cards, etc.
   ============================================================ */

/* ── INQUIRY SIDEBAR (replaces Cart Sidebar) ── */
.inquiry-sidebar {
  position: fixed; top: 0; right: 0; width: 380px; height: 100%;
  background: #fff; z-index: 2147483600; box-shadow: -4px 0 20px rgba(0,0,0,0.2);
  transform: translateX(100%); transition: transform 0.3s ease;
  display: flex; flex-direction: column;
}
.inquiry-sidebar.open { transform: translateX(0); }
.inquiry-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2147483599;
}
.inquiry-overlay.open { display: block; }
.inquiry-sidebar-header {
  background: var(--navy); color: #fff; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 15px;
}
.inquiry-sidebar-header i { color: var(--orange); }
.inquiry-close {
  background: none; border: none; color: #fff; font-size: 22px;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.inquiry-close:hover { background: rgba(255,255,255,0.15); }
.inquiry-list { flex: 1; overflow-y: auto; padding: 12px; }
.inquiry-empty {
  text-align: center; padding: 40px 20px; color: var(--text-muted);
}
.inquiry-empty i { font-size: 48px; color: #ddd; margin-bottom: 12px; display: block; }
.inquiry-empty p { font-weight: 600; margin-bottom: 6px; }
.inquiry-empty small { font-size: 12px; }

/* Inquiry Items */
.inquiry-item {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; margin-bottom: 10px; transition: box-shadow 0.2s;
}
.inquiry-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.inquiry-item.status-pending { border-left: 4px solid var(--orange); }
.inquiry-item.status-submitted { border-left: 4px solid var(--green); background: #f0fdf4; }
.inquiry-item.status-failed { border-left: 4px solid #e55; background: #fef2f2; }
.inquiry-item-header { display: flex; align-items: center; gap: 10px; }
.inquiry-item-logo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: #f5f5f5; }
.inquiry-item-logo img { width: 100%; height: 100%; object-fit: cover; }
.inquiry-logo-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--orange-light); color: var(--orange); font-size: 18px;
}
.inquiry-item-info { flex: 1; min-width: 0; }
.inquiry-item-info h4 {
  font-size: 13px; font-weight: 700; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.inquiry-item-info small { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.inquiry-item-info small i { color: var(--orange); }

/* Inquiry Type Badges */
.inquiry-type-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px;
}
.inquiry-type-badge.badge-contact { background: #ede9fe; color: #7c3aed; }
.inquiry-type-badge.badge-quote { background: #fff7ed; color: #c2410c; }
.inquiry-type-badge.badge-booking { background: #ecfdf5; color: #059669; }
.inquiry-type-badge.badge-hire { background: #eff6ff; color: #2563eb; }
.inquiry-type-badge.badge-whatsapp { background: #ecfdf5; color: #16a34a; }

.inquiry-remove {
  background: none; border: none; color: #ccc; font-size: 14px;
  cursor: pointer; padding: 4px; border-radius: 4px; transition: color 0.2s;
}
.inquiry-remove:hover { color: #e55; }

.inquiry-status-msg {
  font-size: 11px; font-weight: 600; padding: 4px 0; color: var(--green);
}
.inquiry-status-msg.failed { color: #e55; }
.inquiry-status-msg i { margin-right: 4px; }

.inquiry-item-actions {
  display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0;
}
.inquiry-action-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; font-size: 14px; color: var(--navy); transition: all 0.2s;
}
.inquiry-action-btn:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-light); }
.inquiry-action-btn.whatsapp-btn { color: #25d366; border-color: #25d366; }
.inquiry-action-btn.whatsapp-btn:hover { background: #dcfce7; }
.inquiry-action-btn.phone-btn { color: var(--navy); }
.inquiry-action-btn.email-btn { color: var(--orange); }

.inquiry-sidebar-footer {
  padding: 10px 12px; border-top: 1px solid var(--border);
  display: flex; gap: 6px; align-items: stretch;
}
.inquiry-submit-btn {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 6px; background: var(--orange); color: #fff; border: none;
  border-radius: 8px; font-family: 'Onest', sans-serif; font-size: 12px;
  font-weight: 700; cursor: pointer; transition: background 0.2s;
  white-space: nowrap; line-height: 1.2;
}
.inquiry-submit-btn:hover { background: var(--orange-dark); }
.inquiry-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.inquiry-clear-btn {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 6px; background: #f3f4f6; color: #666; border: none;
  border-radius: 8px; font-family: 'Onest', sans-serif; font-size: 12px;
  font-weight: 700; cursor: pointer; transition: background 0.2s;
  white-space: nowrap; line-height: 1.2;
}
.inquiry-clear-btn:hover { background: #e5e7eb; }
.inquiry-addmore-btn {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 6px; background: #f3f4f6; color: #666; border: none;
  border-radius: 8px; font-family: 'Onest', sans-serif; font-size: 12px;
  font-weight: 700; cursor: pointer; transition: background 0.2s;
  white-space: nowrap; line-height: 1.2;
}
.inquiry-addmore-btn:hover { background: #e5e7eb; }

/* Inquiry Badge (for header) */
.inquiry-badge {
  position: absolute; top: -6px; right: -6px; background: var(--orange);
  color: #fff; font-size: 10px; font-weight: 800; width: 18px; height: 18px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; z-index: 1;
}

/* Inquiry link in header */
.inquiry-link { position: relative; }
.inquiry-count {
  background: var(--orange); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; margin-left: 2px;
}

/* WhatsApp Header Button */
.whatsapp-header-btn { color: #25d366 !important; }
.whatsapp-header-btn:hover { color: #16a34a !important; }

/* Body lock when inquiry open */
body.inquiry-open { overflow: hidden; }

/* ── HOMEPAGE CTA CARDS ── */
.homepage-ctas {
  background: var(--white); border-radius: var(--radius); padding: 18px;
  margin-bottom: 20px; border: 1px solid var(--border); box-shadow: var(--card-shadow);
}
.cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cta-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: all 0.2s;
}
.cta-card:hover {
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  border-color: var(--orange);
}
.cta-card-icon {
  width: 44px; height: 44px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.cta-card-body { flex: 1; min-width: 0; }
.cta-card-body strong { font-size: 13px; color: var(--navy); display: block; margin-bottom: 2px; }
.cta-card-body p { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.cta-card-arrow { color: var(--orange); font-size: 14px; flex-shrink: 0; }

/* ── FEATURED BUSINESSES SECTION ── */
.featured-businesses-section {
  background: var(--white); border-radius: var(--radius); padding: 18px;
  margin-bottom: 20px; border: 1px solid var(--border); box-shadow: var(--card-shadow);
}
.featured-businesses-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.section-view-all {
  font-size: 13px; font-weight: 700; color: var(--orange);
  display: flex; align-items: center; gap: 4px;
}
.section-view-all:hover { color: var(--orange-dark); }
.section-subtitle {
  font-size: 13px; color: var(--text-muted); margin-top: 4px;
}

/* ── MEMBERSHIP TIERS SECTION ── */
.membership-tiers-section {
  background: var(--white); border-radius: var(--radius); padding: 24px;
  margin-bottom: 20px; border: 1px solid var(--border); box-shadow: var(--card-shadow);
}
.tiers-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
  margin-top: 16px;
}
.tier-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; text-align: center; position: relative; transition: all 0.2s;
}
.tier-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.tier-card.tier-popular { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.tier-popular-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: #fff; font-size: 10px; font-weight: 800;
  padding: 3px 12px; border-radius: 20px; white-space: nowrap;
}
.tier-header { margin-bottom: 16px; }
.tier-header i { display: block; margin: 0 auto 8px; }
.tier-header h3 { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.tier-price { font-size: 22px; font-weight: 800; color: var(--text-dark); }
.tier-features {
  text-align: left; list-style: none; padding: 0; margin: 16px 0;
}
.tier-features li {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 0;
  font-size: 12px; color: var(--text-dark); line-height: 1.4;
  border-bottom: 1px solid #f5f5f5;
}
.tier-features li:last-child { border-bottom: none; }
.tier-features li i { font-size: 10px; margin-top: 3px; flex-shrink: 0; }
.tier-cta-btn {
  display: inline-block; width: 100%; padding: 10px; border: none;
  border-radius: 30px; color: #fff; font-family: 'Onest', sans-serif;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.2s;
  text-align: center;
}
.tier-cta-btn:hover { opacity: 0.9; }

/* ── SIDEBAR CTA LINKS ── */
.sidebar-cta-links { padding: 12px 10px 6px; }
.sidebar-cta-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted); padding: 8px 6px 6px;
  display: flex; align-items: center; gap: 6px;
}
.sidebar-cta-title i { color: var(--orange); }
.sidebar-cta-btn {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px;
  border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff;
  transition: opacity 0.2s; margin-bottom: 6px;
}
.sidebar-cta-btn:hover { opacity: 0.85; color: #fff; }
.sidebar-cta-btn.cta-advertise { background: var(--orange); }
.sidebar-cta-btn.cta-showcase { background: var(--navy); }
.sidebar-cta-btn.cta-find { background: var(--teal); }
.sidebar-cta-btn.cta-quotes { background: #b45309; }

/* ── MODAL BUSINESS EXPOSURE BUTTONS ── */
.modal-secondary-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; background: var(--navy); color: #fff; border: none;
  border-radius: 30px; font-family: 'Onest', sans-serif; font-size: 13px;
  font-weight: 700; cursor: pointer; transition: background 0.2s;
}
.modal-secondary-btn:hover { background: var(--navy-mid); }
.modal-whatsapp-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; background: #25d366; color: #fff; border: none;
  border-radius: 30px; font-family: 'Onest', sans-serif; font-size: 13px;
  font-weight: 700; cursor: pointer; transition: background 0.2s;
}
.modal-whatsapp-btn:hover { background: #16a34a; }

/* ── MOBILE NAV BADGE (Inquiry) ── */
.mob-nav-badge {
  position: absolute; top: 0; right: 2px; background: var(--orange);
  color: #fff; font-size: 9px; font-weight: 700; border-radius: 50%;
  width: 16px; height: 16px; display: flex; align-items: center;
  justify-content: center; border: 1px solid #fff;
}

/* ── FOOTER TAGLINE ── */
.footer-tagline { font-size: 13px; color: #a0b8cc; margin-bottom: 12px; }

/* ── RESPONSIVE FIXES FOR INQUIRY SYSTEM ── */
@media (max-width: 640px) {
  .inquiry-sidebar { width: 100%; }
  .tiers-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; }
  .featured-businesses-grid { grid-template-columns: 1fr; }
}

/* ── CATALOGUE SECTION STYLES ── */
.product-section .section-title .fa-book-open { color: var(--teal); }

/* ============================================================
   HOWZIT PORTAL v2 — ENHANCEMENT STYLES
   WhatsApp Popup, Search Enhancements, Business Profile,
   Verification Badges, Gallery, Reviews, Brochures
   PRESERVES all existing styles — additive only
   ============================================================ */

/* ── WHATSAPP POPUP ── */
.wa-popup { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; font-family: 'Onest', sans-serif; }
.wa-popup.open { display: flex; align-items: center; justify-content: center; }
.wa-popup-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); }
.wa-popup-container { position: relative; width: 400px; max-width: 92vw; max-height: 85vh; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; animation: waPopupSlideIn 0.25s ease-out; }
@keyframes waPopupSlideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.wa-popup-header { background: #25D366; color: #fff; padding: 16px; display: flex; align-items: center; justify-content: space-between; }
.wa-popup-header-info { display: flex; align-items: center; gap: 12px; }
.wa-popup-avatar { width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.wa-popup-title { font-weight: 700; font-size: 14px; }
.wa-popup-subtitle { font-size: 12px; opacity: 0.9; }
.wa-popup-close { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.wa-popup-close:hover { background: rgba(255,255,255,0.2); }
.wa-popup-body { padding: 16px; overflow-y: auto; flex: 1; }
.wa-popup-greeting { background: #e1f5eb; color: #1a472a; padding: 10px 14px; border-radius: 0 10px 10px 10px; font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
.wa-popup-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.wa-popup-option { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f5f5f5; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-dark); transition: all 0.15s; text-align: left; }
.wa-popup-option:hover { background: #e8f5e9; border-color: #25D366; color: #1a472a; }
.wa-popup-option i { color: #25D366; font-size: 12px; }
.wa-popup-custom { border-top: 1px solid var(--border); padding-top: 14px; }
.wa-popup-custom-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.wa-popup-custom-input { display: flex; gap: 8px; }
.wa-popup-input { flex: 1; border: 1px solid var(--border); border-radius: 20px; padding: 8px 14px; font-family: 'Onest', sans-serif; font-size: 13px; outline: none; transition: border-color 0.2s; }
.wa-popup-input:focus { border-color: #25D366; }
.wa-popup-send-btn { background: #25D366; color: #fff; border: none; border-radius: 20px; padding: 8px 16px; font-family: 'Onest', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.2s; white-space: nowrap; }
.wa-popup-send-btn:hover { background: #1da851; }
.wa-popup-footer { padding: 10px 16px; background: #f5f5f5; border-top: 1px solid var(--border); }
.wa-popup-footer small { font-size: 10px; color: var(--text-muted); }

/* ── VERIFICATION BADGES ── */
.badge-verified-business { display: inline-flex; align-items: center; gap: 4px; background: #e8f5e9; color: #2e7d32; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.3px; }
.badge-verified-business i { font-size: 10px; }
.badge-featured-business { display: inline-flex; align-items: center; gap: 4px; background: #fff3e0; color: #e65100; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.3px; }
.badge-featured-business i { font-size: 10px; }
.badge-premium-business { display: inline-flex; align-items: center; gap: 4px; background: #f3e5f5; color: #7b1fa2; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.3px; }
.badge-premium-business i { font-size: 10px; }

/* ── SEARCH SUGGESTIONS DROPDOWN ── */
.search-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 200; max-height: 320px; overflow-y: auto; display: none; }
.search-suggestions.open { display: block; }
.search-suggestion-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--text-dark); transition: background 0.15s; border-bottom: 1px solid #f5f5f5; }
.search-suggestion-item:hover { background: #f8f8f8; }
.search-suggestion-item i { color: var(--text-muted); font-size: 14px; width: 18px; text-align: center; }
.search-suggestion-item .suggestion-text { flex: 1; }
.search-suggestion-item .suggestion-type { font-size: 10px; color: var(--text-muted); background: #f0f0f0; padding: 2px 8px; border-radius: 10px; }
.search-suggestion-item .suggestion-count { font-size: 10px; color: var(--text-muted); }

/* ── SEARCH FILTER CHIPS ── */
.search-filter-bar { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.search-filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--text-muted); transition: all 0.15s; }
.search-filter-chip:hover, .search-filter-chip.active { background: var(--orange-light); border-color: var(--orange); color: var(--orange); }
.search-filter-chip i { font-size: 10px; }
.search-province-select { border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font-family: 'Onest', sans-serif; font-size: 11px; color: var(--text-muted); background: #fff; cursor: pointer; outline: none; }
.search-province-select:focus { border-color: var(--orange); }

/* ── BUSINESS PROFILE ENHANCEMENTS ── */
.profile-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.profile-gallery-item { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; cursor: pointer; }
.profile-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.profile-gallery-item:hover img { transform: scale(1.05); }
.profile-gallery-item.more-overlay { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); color: #fff; font-size: 14px; font-weight: 700; }
.profile-gallery-item.more-overlay img { filter: brightness(0.5); }

.profile-reviews-section { margin: 16px 0; }
.profile-reviews-summary { display: flex; align-items: center; gap: 16px; padding: 12px; background: #f8f8f8; border-radius: 8px; margin-bottom: 12px; }
.profile-reviews-score { text-align: center; }
.profile-reviews-score .score-number { font-size: 32px; font-weight: 800; color: var(--navy); line-height: 1; }
.profile-reviews-score .score-stars { color: #f59e0b; font-size: 14px; margin-top: 4px; }
.profile-reviews-score .score-count { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.profile-reviews-bars { flex: 1; }
.profile-reviews-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 11px; color: var(--text-muted); }
.profile-reviews-bar .bar-fill { flex: 1; height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.profile-reviews-bar .bar-fill-inner { height: 100%; background: #f59e0b; border-radius: 3px; transition: width 0.3s; }

.profile-review-item { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.profile-review-item:last-child { border-bottom: none; }
.profile-review-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.profile-review-author { font-weight: 700; font-size: 13px; color: var(--text-dark); }
.profile-review-date { font-size: 11px; color: var(--text-muted); }
.profile-review-stars { color: #f59e0b; font-size: 12px; margin-bottom: 4px; }
.profile-review-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.profile-review-verified { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: #2e7d32; font-weight: 600; }

.profile-brochure-download { display: flex; align-items: center; gap: 10px; padding: 12px; background: #f0f4ff; border: 1px solid #c5d5f0; border-radius: 8px; cursor: pointer; transition: background 0.2s; text-decoration: none; color: var(--navy); }
.profile-brochure-download:hover { background: #e0e8f8; }
.profile-brochure-download i { font-size: 24px; color: var(--navy); }
.profile-brochure-download .brochure-info { flex: 1; }
.profile-brochure-download .brochure-name { font-weight: 700; font-size: 13px; }
.profile-brochure-download .brochure-size { font-size: 11px; color: var(--text-muted); }

.profile-highlights { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.profile-highlight-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #f0f0f0; border-radius: 15px; font-size: 11px; color: var(--text-dark); }
.profile-highlight-tag i { font-size: 10px; color: var(--orange); }

.profile-response-time { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--green); font-weight: 600; }

/* ── VIEW PROFILE BUTTON (adds into existing cards) ── */
.btn-view-profile { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--orange); background: transparent; color: var(--orange); border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: 'Onest', sans-serif; }
.btn-view-profile:hover { background: var(--orange); color: #fff; }

/* ── WHATSAPP QUICK BUTTON (for cards) ── */
.btn-wa-quick { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid #25D366; background: transparent; color: #25D366; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: 'Onest', sans-serif; }
.btn-wa-quick:hover { background: #25D366; color: #fff; }

/* ── REQUEST CATALOGUE CTA ── */
.btn-request-catalogue { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--teal); background: transparent; color: var(--teal); border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: 'Onest', sans-serif; }
.btn-request-catalogue:hover { background: var(--teal); color: #fff; }

/* ── CONVERSION POPUP (non-intrusive) ── */
.conversion-popup { position: fixed; bottom: 80px; right: 20px; width: 320px; max-width: 90vw; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); z-index: 9000; display: none; overflow: hidden; animation: convPopSlide 0.3s ease-out; }
.conversion-popup.show { display: block; }
@keyframes convPopSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.conversion-popup-header { background: var(--orange); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.conversion-popup-header h4 { font-size: 13px; font-weight: 700; margin: 0; }
.conversion-popup-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; }
.conversion-popup-body { padding: 16px; }
.conversion-popup-body p { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.conversion-popup-cta { display: block; width: 100%; padding: 10px; background: var(--orange); color: #fff; border: none; border-radius: 8px; font-family: 'Onest', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; transition: background 0.2s; }
.conversion-popup-cta:hover { background: var(--orange-dark); }
.conversion-popup-cta.whatsapp-cta { background: #25D366; }
.conversion-popup-cta.whatsapp-cta:hover { background: #1da851; }

/* ── RESPONSIVE ENHANCEMENTS ── */
@media (max-width: 768px) {
  .wa-popup-container { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0; }
  .profile-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .conversion-popup { right: 10px; left: 10px; width: auto; bottom: 70px; }
  .search-filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
}
@media (max-width: 480px) {
  .profile-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Quick Inquiry Modal ──────────────────────────────────── */
.quick-inquiry-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.quick-inquiry-content {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.quick-inquiry-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  color: #888;
  cursor: pointer;
}
.quick-inquiry-close:hover { color: #333; }

/* ── Business Profile Overlay ─────────────────────────────── */
.profile-gallery-thumb {
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.2s;
}
.profile-gallery-thumb:hover { transform: scale(1.05); }
.profile-gallery-thumb img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}
.review-star {
  font-size: 24px;
  cursor: pointer;
  color: #ccc;
  transition: color 0.15s;
}
.review-star:hover, .review-star.active { color: #ff6a02; }

/* ── Conversion Popup ─────────────────────────────────────── */
.conversion-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9998;
  animation: slideUpFadeIn 0.4s ease;
}
.conversion-popup-content {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 320px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  border-left: 4px solid var(--orange);
  position: relative;
}
.conversion-popup-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  color: #888;
  cursor: pointer;
}
.conversion-popup-close:hover { color: #333; }

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

@media (max-width: 768px) {
  .conversion-popup { left: 10px; right: 10px; bottom: 10px; }
  .conversion-popup-content { max-width: 100%; }
}

/* ── Performance & Lazy Loading ────────────────────────────── */
img[data-src] {
  opacity: 0;
  transition: opacity 0.3s ease;
}
img[data-src].loaded,
img[data-src].hzp-loaded {
  opacity: 1;
}
.hzp-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: hzpShimmer 1.5s infinite;
  border-radius: 8px;
  min-height: 60px;
}
@keyframes hzpShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── View Profile Button ───────────────────────────────────── */
.btn-view-profile {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-view-profile:hover {
  background: var(--orange);
}

/* ── Verification & Featured Badges ────────────────────────── */
.badge-verified-business {
  background: var(--teal);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  z-index: 2;
}
.badge-featured-business {
  background: var(--orange);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  z-index: 2;
}

/* ── Section Filter Chips ──────────────────────────────────── */
.section-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 0 4px;
}
.filter-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--light-bg, #f5f5f5);
  color: var(--navy);
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.filter-chip:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.filter-chip.active {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* ── Catalogue CTA Banner ──────────────────────────────────── */
.catalogue-cta-banner {
  background: linear-gradient(135deg, var(--navy) 0%, #3d2972 100%);
  color: #fff;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  margin: 20px 0;
}
.catalogue-cta-banner h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 8px;
}
.catalogue-cta-banner p {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  margin-bottom: 16px;
}
.catalogue-cta-banner .btn-cta {
  background: var(--orange);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.catalogue-cta-banner .btn-cta:hover {
  background: #e55d00;
}

/* ── Catalogue Category Filters ────────────────────────────── */
.catalogue-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px 0;
}
.catalogue-filter-chip {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: #f0f0f0;
  color: var(--navy);
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.2s;
}
.catalogue-filter-chip:hover,
.catalogue-filter-chip.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}


/* ═══════════════════════════════════════════════════════════════
   COMPACT SEARCH (Fix #4 — replaces oversized hero banner)
   ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
   FEATURED BUSINESSES CAROUSEL (replaces duplicate compact search)
   ══════════════════════════════════════════════════════════════════════════════ */
.featured-carousel-section {
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
}
.carousel-loading {
  text-align: center;
  padding: 40px;
}
.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.carousel-track {
  position: relative;
  height: 230px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 8px;
  flex: 1;
  align-items: flex-start;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-card {
  min-width: 240px;
  max-width: 260px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.carousel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: var(--orange);
}
.carousel-card-img {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.carousel-card:hover .carousel-card-img img {
  transform: scale(1.05);
}
.carousel-card-body {
  padding: 12px;
}
.carousel-card-body h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ---- Task 4: compact small-image-box carousel cards (replaces big alphabet banner) ---- */
.carousel-skill-card {
  min-width: 230px;
  max-width: 250px;
  flex-shrink: 0;
  align-self: flex-start;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.carousel-skill-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: var(--orange);
}
.carousel-skill-card .skill-logo {
  width: 56px;
  height: 56px;
  border-radius: 8px;
}
.carousel-skill-card .skill-card-header { padding: 8px 8px 0; }
.carousel-skill-card .skill-card-body { padding: 6px 10px; }
.carousel-skill-card .skill-card-footer { padding: 6px 10px 10px; gap: 5px; position: relative; z-index: 2; }
.carousel-skill-card .btn-skill-contact { font-size: 11px; padding: 5px 9px; position: relative; z-index: 3; }
.carousel-skill-card .btn-view-profile { font-size: 11px; padding: 4px 10px; position: relative; z-index: 3; }
.carousel-skill-card .skill-description { font-size: 11px; }
.carousel-card-location {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.carousel-card-location i { color: var(--orange); font-size: 10px; }
.carousel-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carousel-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 2;
}
.carousel-nav:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #ddd;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.carousel-dot.active {
  background: var(--orange);
  transform: scale(1.3);
}
.carousel-dot:hover { background: var(--orange); }

@media (max-width: 768px) {
  .carousel-card { min-width: 200px; max-width: 220px; }
  .carousel-card-img { height: 100px; }
  .carousel-skill-card { min-width: 200px; max-width: 220px; }
  .carousel-nav { width: 30px; height: 30px; font-size: 12px; }
}

@media (max-width: 480px) {
  .carousel-card { min-width: 180px; max-width: 200px; }
  .carousel-card-img { height: 90px; }
  .carousel-skill-card { min-width: 175px; max-width: 195px; }
  .carousel-nav { display: none; }
  .featured-carousel-section { padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED SECTION (reusable for lodges, attorneys, skills, locmarket)
   ═══════════════════════════════════════════════════════════════ */
.featured-section {
  margin-bottom: 20px;
  padding: 0;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
}
.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title i {
  color: var(--orange);
  font-size: 14px;
}
.section-view-all {
  font-size: 12px;
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.section-view-all:hover {
  color: var(--orange);
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Compact featured grid — uses skill-card style small logo boxes */
.featured-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.featured-skill-card {
  flex-direction: column;
  min-height: 0;
  align-self: flex-start;
}
.featured-skill-card .skill-card-header {
  padding: 8px 8px 0;
  align-items: flex-start;
}
.featured-skill-card .skill-logo {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f5f5;
}
.featured-skill-card .skill-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-skill-card .skill-card-body {
  padding: 6px 10px;
  flex: none;
}
.featured-skill-card .skill-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.featured-skill-card .skill-type-badge {
  font-size: 10px;
  margin-bottom: 3px;
}
.featured-skill-card .skill-description {
  font-size: 11px;
  color: #666;
  margin: 0 0 4px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-skill-card .skill-location {
  font-size: 11px;
  color: var(--text-muted);
}
.featured-skill-card .skill-card-footer {
  padding: 6px 10px 10px;
  gap: 5px;
  position: relative;
  z-index: 2;
}
.featured-skill-card .btn-skill-contact {
  font-size: 11px;
  padding: 5px 9px;
  position: relative;
  z-index: 3;
}

/* ── PER-CATEGORY CTA BUTTON COLOURS ─────────────────────────────────── */
/* Primary CTA (Hire Me / Request Quote / Book Service / Contact Provider)
   gets a distinct fill per category, while the Profile button stays a
   neutral outline — so the two buttons are always visually differentiated
   (matches the Attorneys / Accommodation styling). */
.featured-skill-card .btn-view-profile {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--border);
  font-weight: 600;
  position: relative;
  z-index: 3;
}
.featured-skill-card .btn-view-profile:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ── PER-CATEGORY CTA BUTTON COLOURS (high-specificity selectors) ──
   The card element carries both .skill-card (or .featured-skill-card)
   and the .hz-cta-X category class, e.g.:
     <div class="skill-card featured-skill-card hz-cta-skills-market">
       <div class="skill-card-footer">
         <button class="btn-skill-contact">…</button>
   So we compound the card classes and descend into the footer:
     .featured-skill-card.hz-cta-skills-market .skill-card-footer .btn-skill-contact
   = specificity 0,4,0, which beats the base rule
     .skill-card .skill-card-footer .btn-skill-contact  (0,3,0)
   that otherwise paints the button navy-on-grey. */

/* Skills & Services homepage cards — match the Attorneys / Accommodation
   colour scheme used on their menu pages: primary button = light-grey
   background with navy text; Profile button = navy fill with white text. */
.featured-skill-card.hz-cta-skills-market .skill-card-footer .btn-skill-contact,
.skill-card.hz-cta-skills-market .skill-card-footer .btn-skill-contact {
  background: #f3f4f6 !important;
  color: var(--navy) !important;
  border: 1px solid var(--border) !important;
}
.featured-skill-card.hz-cta-skills-market .skill-card-footer .btn-skill-contact:hover,
.skill-card.hz-cta-skills-market .skill-card-footer .btn-skill-contact:hover {
  background: #e5e7eb !important;
}
.featured-skill-card.hz-cta-skills-market .skill-card-footer .btn-view-profile,
.skill-card.hz-cta-skills-market .skill-card-footer .btn-view-profile {
  background: var(--navy) !important;
  color: #fff !important;
  border: 1px solid var(--navy) !important;
}
.featured-skill-card.hz-cta-skills-market .skill-card-footer .btn-view-profile:hover,
.skill-card.hz-cta-skills-market .skill-card-footer .btn-view-profile:hover {
  background: #221238 !important;
}

/* Legal Attorneys — Request Quote = navy fill */
.featured-skill-card.hz-cta-legal-attorneys .skill-card-footer .btn-skill-contact,
.skill-card.hz-cta-legal-attorneys .skill-card-footer .btn-skill-contact {
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
}
.featured-skill-card.hz-cta-legal-attorneys .skill-card-footer .btn-skill-contact:hover,
.skill-card.hz-cta-legal-attorneys .skill-card-footer .btn-skill-contact:hover {
  background: #1e3a5f !important;
}
.featured-skill-card.hz-cta-legal-attorneys .skill-card-footer .btn-view-profile,
.skill-card.hz-cta-legal-attorneys .skill-card-footer .btn-view-profile {
  background: #fff !important;
  color: var(--navy) !important;
  border: 1px solid var(--navy) !important;
}
.featured-skill-card.hz-cta-legal-attorneys .skill-card-footer .btn-view-profile:hover,
.skill-card.hz-cta-legal-attorneys .skill-card-footer .btn-view-profile:hover {
  background: var(--navy) !important;
  color: #fff !important;
}

/* Accommodation — Book Service = orange fill */
.featured-skill-card.hz-cta-hotels-lodges .skill-card-footer .btn-skill-contact,
.skill-card.hz-cta-hotels-lodges .skill-card-footer .btn-skill-contact {
  background: var(--orange) !important;
  color: #fff !important;
  border: none !important;
}
.featured-skill-card.hz-cta-hotels-lodges .skill-card-footer .btn-skill-contact:hover,
.skill-card.hz-cta-hotels-lodges .skill-card-footer .btn-skill-contact:hover {
  background: var(--orange-dark) !important;
}
.featured-skill-card.hz-cta-hotels-lodges .skill-card-footer .btn-view-profile,
.skill-card.hz-cta-hotels-lodges .skill-card-footer .btn-view-profile {
  background: #fff !important;
  color: var(--orange) !important;
  border: 1px solid var(--orange) !important;
}
.featured-skill-card.hz-cta-hotels-lodges .skill-card-footer .btn-view-profile:hover,
.skill-card.hz-cta-hotels-lodges .skill-card-footer .btn-view-profile:hover {
  background: var(--orange) !important;
  color: #fff !important;
}

/* Local Market / Contact Provider = teal fill */
.featured-skill-card.hz-cta-local-market .skill-card-footer .btn-skill-contact,
.skill-card.hz-cta-local-market .skill-card-footer .btn-skill-contact {
  background: var(--teal) !important;
  color: #fff !important;
  border: none !important;
}
.featured-skill-card.hz-cta-local-market .skill-card-footer .btn-skill-contact:hover,
.skill-card.hz-cta-local-market .skill-card-footer .btn-skill-contact:hover {
  background: #007a73 !important;
}
.featured-skill-card.hz-cta-local-market .skill-card-footer .btn-view-profile,
.skill-card.hz-cta-local-market .skill-card-footer .btn-view-profile {
  background: #fff !important;
  color: var(--teal) !important;
  border: 1px solid var(--teal) !important;
}
.featured-skill-card.hz-cta-local-market .skill-card-footer .btn-view-profile:hover,
.skill-card.hz-cta-local-market .skill-card-footer .btn-view-profile:hover {
  background: var(--teal) !important;
  color: #fff !important;
}
.featured-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.featured-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.featured-card-img {
  height: 100px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-card-body {
  padding: 10px;
}
.featured-card-body h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.featured-card-location {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 4px 0;
}
.featured-card-location i {
  color: var(--orange);
  margin-right: 3px;
}
.featured-card-desc {
  font-size: 11px;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-card-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.featured-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.featured-card-btn.primary {
  background: var(--teal);
  color: #fff;
}
.featured-card-btn.primary:hover {
  background: #1a8a7a;
}
.featured-card-btn.whatsapp {
  background: #25D366;
  color: #fff;
}
.featured-card-btn.whatsapp:hover {
  background: #1ebe5a;
}
.featured-card-btn.phone {
  background: var(--navy);
  color: #fff;
}
.featured-card-btn.phone:hover {
  background: #0f2744;
}

/* ═══════════════════════════════════════════════════════════════
   CATALOGUE SHOWCASE (Fix #7 — Business Catalogue Visibility)
   ═══════════════════════════════════════════════════════════════ */
/* ── LOCAL DISCOVERY SECTION ── */
/* ===== DISCOVER BUSINESSES NEAR YOU — Redesigned ===== */
.local-discovery-section {
  background: linear-gradient(135deg, #ffffff 0%, #faf8ff 100%);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* Header: icon + title on left, Browse All on right */
.discovery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.discovery-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.discovery-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--orange), #ff8534);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255,106,2,0.3);
}
.discovery-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 2px 0;
  font-family: 'Onest', sans-serif;
  line-height: 1.2;
}
.discovery-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  font-family: 'Onest', sans-serif;
}
.discovery-browse-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Onest', sans-serif;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.discovery-browse-all:hover {
  background: var(--orange);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.discovery-browse-all i {
  font-size: 11px;
  transition: transform 0.2s;
}
.discovery-browse-all:hover i {
  transform: translateX(3px);
}

/* Tab bar */
.discovery-tabs-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid #eee;
  padding-bottom: 0;
}
.discovery-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Onest', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 8px 8px 0 0;
}
.discovery-tab-btn i {
  font-size: 12px;
}
.discovery-tab-btn:hover {
  color: var(--orange);
  background: rgba(255,106,2,0.06);
}
.discovery-tab-btn.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
  font-weight: 700;
}

/* Chips grid */
.discovery-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
}

/* Province chip */
.discovery-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border: 1.5px solid #e8e4f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Onest', sans-serif;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.discovery-chip::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--orange), #ff8534);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 0;
}
.discovery-chip:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,106,2,0.2);
}
.discovery-chip:hover::before {
  opacity: 1;
}
.discovery-chip:hover .discovery-chip-name,
.discovery-chip:hover .discovery-chip-prov {
  color: #fff;
  position: relative;
  z-index: 1;
}
.discovery-chip:active {
  transform: translateY(0);
}

/* Province chip content */
.discovery-chip-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  transition: color 0.2s;
  position: relative;
  z-index: 1;
}

/* City chip — has emoji + name + province */
.discovery-chip .discovery-chip-emoji {
  font-size: 18px;
  margin-right: 6px;
  position: relative;
  z-index: 1;
}
.discovery-chip .discovery-chip-prov {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
  transition: color 0.2s;
}
/* For city chips, stack content vertically */
.discovery-chip:has(.discovery-chip-emoji) {
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
}
.discovery-chip:has(.discovery-chip-emoji) .discovery-chip-name {
  font-size: 12px;
}

/* Responsive */
@media (max-width: 768px) {
  .local-discovery-section { padding: 18px; }
  .discovery-title { font-size: 16px; }
  .discovery-subtitle { font-size: 12px; }
  .discovery-header { gap: 10px; }
  .discovery-browse-all { padding: 7px 13px; font-size: 12px; }
  .discovery-chips { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
}
@media (max-width: 600px) {
  .discovery-tabs-bar { justify-content: center; }
  .discovery-tab-btn { flex: 1; justify-content: center; max-width: 200px; }
  .discovery-chips { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .discovery-chips { grid-template-columns: 1fr; }
  .discovery-header { flex-direction: column; align-items: flex-start; }
}

.catalogue-showcase {
  margin-bottom: 20px;
}
.catalogue-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.catalogue-showcase-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}
.catalogue-showcase-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.catalogue-showcase-card img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 8px;
}
.catalogue-showcase-card h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px 0;
}
.catalogue-showcase-card p {
  font-size: 11px;
  color: #888;
  margin: 0;
}
.catalogue-showcase-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.catalogue-category-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}
.catalogue-category-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0,150,142,0.1);
  transform: translateY(-2px);
}
.catalogue-category-icon {
  width: 40px;
  height: 40px;
  background: rgba(0,150,142,0.1);
  color: var(--teal);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.2s;
}
.catalogue-category-card:hover .catalogue-category-icon {
  background: var(--teal);
  color: #fff;
}
.catalogue-category-text strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}
.catalogue-category-text p {
  font-size: 10px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .catalogue-showcase-categories {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .catalogue-showcase-categories {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RECENTLY ADDED BUSINESSES
   ═══════════════════════════════════════════════════════════════ */
.recently-added-section {
  margin-bottom: 20px;
}
.recently-added-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.recently-added-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  cursor: pointer;
}
.recently-added-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.recently-added-card img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.recently-added-card-info {
  flex: 1;
  min-width: 0;
}
.recently-added-card-info h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recently-added-card-info p {
  font-size: 11px;
  color: #888;
  margin: 0;
}
.recently-added-card-badge {
  font-size: 10px;
  background: #e8f5e9;
  color: #2e7d32;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED LOCAL SERVICES
   ═══════════════════════════════════════════════════════════════ */
.featured-local-services {
  margin-bottom: 20px;
}
.local-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.local-service-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}
.local-service-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.local-service-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--teal), var(--orange));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px auto;
  color: #fff;
  font-size: 16px;
}
.local-service-card h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 3px 0;
}
.local-service-card p {
  font-size: 11px;
  color: #888;
  margin: 0 0 8px 0;
}
.local-service-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  background: var(--teal);
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.local-service-card-btn:hover {
  background: #1a8a7a;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE CTAs
   ═══════════════════════════════════════════════════════════════ */
.homepage-ctas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}
.homepage-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.homepage-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════════════════════════
   WHATSAPP INQUIRY POPUP (Fix #6 — Full Inquiry Flow)
   ═══════════════════════════════════════════════════════════════ */
.whatsapp-inquiry-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1110000;
  justify-content: center;
  align-items: center;
}
.whatsapp-inquiry-overlay.active {
  display: flex;
}
.whatsapp-inquiry-popup {
  background: #fff;
  border-radius: 14px;
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  animation: waPopupSlideIn 0.25s ease-out;
}
@keyframes waPopupSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.whatsapp-inquiry-header {
  background: #25D366;
  color: #fff;
  padding: 14px 18px;
  border-radius: 14px 14px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.whatsapp-inquiry-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.whatsapp-inquiry-close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.whatsapp-inquiry-close:hover {
  background: rgba(255,255,255,0.35);
}
.whatsapp-inquiry-body {
  padding: 16px 18px;
}
.whatsapp-inquiry-field {
  margin-bottom: 12px;
}
.whatsapp-inquiry-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.whatsapp-inquiry-field input,
.whatsapp-inquiry-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.whatsapp-inquiry-field input:focus,
.whatsapp-inquiry-field textarea:focus {
  border-color: #25D366;
  box-shadow: 0 0 0 2px rgba(37,211,102,0.12);
}
.whatsapp-inquiry-field textarea {
  min-height: 80px;
  resize: vertical;
}
.whatsapp-inquiry-business-name {
  font-size: 13px;
  color: var(--teal);
  font-weight: 500;
  padding: 6px 10px;
  background: #f0faf7;
  border-radius: 6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.whatsapp-inquiry-submit {
  width: 100%;
  padding: 11px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}
.whatsapp-inquiry-submit:hover {
  background: #1ebe5a;
}
.whatsapp-inquiry-note {
  font-size: 11px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   BUSINESS PROFILE ENHANCEMENTS (Fix #8)
   ═══════════════════════════════════════════════════════════════ */
.business-profile-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.business-profile-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.business-profile-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.business-profile-action-btn.btn-whatsapp {
  background: #25D366;
  color: #fff;
}
.business-profile-action-btn.btn-quote {
  background: var(--orange);
  color: #fff;
}
.business-profile-action-btn.btn-call {
  background: var(--navy);
  color: #fff;
}
.business-profile-action-btn.btn-brochure {
  background: var(--teal);
  color: #fff;
}
.business-profile-action-btn.btn-directions {
  background: #4285F4;
  color: #fff;
}
.business-profile-action-btn.btn-email {
  background: #777;
  color: #fff;
}

.business-hours-section {
  margin: 12px 0;
  padding: 10px 14px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #eee;
}
.business-hours-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 6px 0;
}
.business-hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
}
.business-hours-row .day {
  color: #666;
}
.business-hours-row .hours {
  color: var(--navy);
  font-weight: 500;
}
.business-hours-row .closed {
  color: #e53935;
}

.business-social-links {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.business-social-link {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  color: var(--navy);
  font-size: 14px;
  transition: all 0.2s;
  text-decoration: none;
}
.business-social-link:hover {
  background: var(--teal);
  color: #fff;
}

.business-verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.badge-verified {
  background: #e8f5e9;
  color: #2e7d32;
}
.badge-featured {
  background: #fff3e0;
  color: #e65100;
}
.badge-premium {
  background: #f3e5f5;
  color: #7b1fa2;
}

.business-map-placeholder {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  margin: 12px 0;
  background: #f0f0f0;
  border: 1px solid #eee;
}
.business-map-placeholder iframe {
  width: 100%;
  height: 100%;
  border: none;
}


/* Quick fix: Grow Your Business plans use the same one-line arrow carousel style as Featured Businesses */
.tiers-carousel-wrapper {
  margin-top: 8px;
}
.tiers-carousel-track {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 2px 12px;
  flex: 1;
}
.tiers-carousel-track::-webkit-scrollbar { display: none; }
.tiers-carousel-track .tier-card {
  flex: 0 0 280px;
  min-width: 280px;
  max-width: 280px;
  scroll-snap-align: start;
}

/* Quick fix: cleaner business popup contact section + fixed bottom action buttons */
.modal-box:has(.business-popup-action-bar) {
  max-height: 92vh;
}
.modal-box:has(.business-popup-action-bar) .modal-body {
  padding-bottom: 0;
}
.modal-info-col {
  min-width: 0;
}
.business-popup-contact-section {
  margin: 16px 0 14px;
  padding: 14px;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.business-popup-contact-section .modal-contact-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 12px;
  letter-spacing: .04em;
}
.business-popup-contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}
.business-popup-contact-item {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #edf1f5;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
.business-popup-contact-item i {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 111, 33, .10);
  color: var(--orange);
  font-size: 13px;
}
.business-popup-contact-item > div {
  min-width: 0;
}
.business-popup-contact-item .modal-contact-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  line-height: 1.2;
}
.business-popup-contact-item a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}
.business-popup-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin: 18px -24px 0;
  padding: 14px 24px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -8px 22px rgba(15, 23, 42, .08);
  backdrop-filter: blur(12px);
  border-radius: 0 0 16px 16px;
}
.business-popup-action-bar .business-profile-action-btn {
  width: 100%;
  min-height: 42px;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
@media (max-width: 640px) {
  .tiers-carousel-track .tier-card {
    flex-basis: 82vw;
    min-width: 82vw;
    max-width: 82vw;
  }
  .business-popup-contact-list {
    grid-template-columns: 1fr;
  }
  .business-popup-action-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: -16px;
    margin-right: -16px;
    padding: 10px 16px;
  }
}

/* ============================================================
   CONTACTS MODAL (Attorneys / Lodges "Contacts" popup) — Fix #1
   Clean card layout for the contact details shown in the
   Bootstrap modal. Email/phone sections that hold "0" are
   never rendered by the JS (isValidContactValue), this just
   makes the rendered ones look consistent and tidy.
   ============================================================ */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.contact-item:hover {
  border-color: #f4d3bd;
  background: #fffaf6;
}
.contact-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 101, 26, 0.12);
  color: var(--orange);
  font-size: 16px;
}
.contact-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.contact-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 600;
}
.contact-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  word-break: break-word;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact-link:hover {
  color: var(--orange);
}
.whatsapp-link .whatsapp-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #25d366;
  color: #fff !important;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
}
.whatsapp-link .whatsapp-btn:hover {
  background: #1da851;
}
@media (max-width: 480px) {
  .contact-item {
    gap: 10px;
    padding: 10px 12px;
  }
  .contact-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
  .contact-link {
    font-size: 13px;
  }
}

/* ============================================================
   BUSINESS PROFILE POPUP — Redesigned compact layout (Issue #2)
   Small avatar image, clean sections, organized sticky footer.
   Uses .bp-* classes (rendered by openBusinessDetail in app.js).
   ============================================================ */

/* Make the modal box adapt to the new compact design */
.modal-box:has(.bp-layout) {
  max-width: 560px;
  max-height: 92vh;
}
.modal-box:has(.bp-layout) .modal-body {
  padding: 0;
  display: flex;          /* column flex: .bp-layout fills it and can shrink */
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;          /* REQUIRED: lets the body shrink so .bp-scroll scrolls */
  overflow: hidden;       /* scrolling happens inside .bp-scroll */
}

.bp-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;          /* allow the middle area to shrink + scroll */
}

/* ---- FIXED header (business name, type, location) — never scrolls ---- */
.bp-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  border-bottom: 1px solid #e5e7eb;
  flex: 0 0 auto;    /* fixed height: no shrink, no grow */
  position: relative; /* anchor for the in-header close button */
}

/* Dedicated close button rendered inside the business profile header.
   Always visible/clickable (independent of the stock .modal-header close
   button, which the splash overlay can hide on wildcard subdomains). */
.bp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.08);
  color: #334155;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  transition: background .2s, color .2s, transform .15s;
}
.bp-close:hover { background: rgba(220, 38, 38, 0.95); color: #fff; transform: scale(1.06); }
@media (max-width: 560px) {
  .bp-close { top: 10px; right: 10px; width: 34px; height: 34px; font-size: 17px; }
}

/* ---- SCROLLABLE middle area (CLIENT REQUEST #3) ----
   Everything between the fixed header and the fixed footer (Available
   Promotions, About, Contact, Hours, Map, Gallery, Reviews, Write a Review,
   Brochure) scrolls here — no section is ever hidden/cut off. */
.bp-scroll {
  flex: 1 1 auto;
  min-height: 0;     /* REQUIRED for overflow to work in a flex column */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;   /* smooth momentum scroll on mobile */
  overscroll-behavior: contain;        /* don't chain scroll to the page behind */
  scrollbar-width: thin;
}
.bp-scroll::-webkit-scrollbar { width: 8px; }
.bp-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 8px; }
.bp-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.bp-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- Compact header avatar ---- */
.bp-avatar {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(15,23,42,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bp-identity {
  flex: 1;
  min-width: 0;
  padding-right: 40px; /* keep the name/badges clear of the in-header close button */
}
.bp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.bp-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.bp-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 4px;
  line-height: 1.2;
  word-break: break-word;
}
.bp-location {
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.bp-location i { color: var(--green); font-size: 12px; }
.bp-social {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bp-social .business-social-link {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

/* ---- Scrollable content area ---- */
.bp-section {
  padding: 14px 22px;
  border-bottom: 1px solid #f1f5f9;
}
.bp-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bp-section-title i { color: var(--orange); font-size: 13px; }
.bp-desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
  white-space: pre-line;
}

/* Expandable description: clamped to 3 lines until "more..." is clicked */
.bp-desc.bp-desc-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-desc-more {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0 0;
  display: inline-block;
}
.bp-desc-more:hover { text-decoration: underline; color: #1d4ed8; }

/* ---- Contact chips ---- */
.bp-contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bp-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  max-width: 100%;
  transition: all 0.18s;
}
.bp-contact-chip:hover {
  background: #fff7ed;
  border-color: var(--orange);
  color: var(--orange-dark);
  transform: translateY(-1px);
}
.bp-contact-chip i {
  font-size: 13px;
  color: var(--orange);
  flex-shrink: 0;
}
.bp-contact-chip.bp-chip-wa i { color: #25D366; }
.bp-contact-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

/* ---- Hours (reuse existing business-hours-section) ---- */
.bp-hours-wrap { padding-top: 6px; padding-bottom: 6px; }
.bp-hours-wrap .business-hours-section {
  margin: 0;
  background: #f8fafc;
}

/* ---- Map ---- */
.bp-map {
  margin: 0;
  height: 160px;
}

/* ---- FIXED action footer (CLIENT REQUEST #3) — never scrolls away ----
   Sits AFTER .bp-scroll in the .bp-layout flex column, so it is always
   visible at the bottom of the popup while the sections scroll above it. */
.bp-actions {
  /* CLIENT FIX: dropped `position: sticky; bottom: 0` — a leftover from the
     pre-scroll redesign. The footer is now a plain flex item (flex: 0 0 auto)
     in the .bp-layout column BELOW .bp-scroll, so it is already always
     visible. Sticky+bottom on that element made some mobile browsers clamp
     it over the bottom of the scroll area (covering the Submit Review
     button's hit area) — static is the correct value here. */
  position: static;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 18px 16px;
  background: rgba(255,255,255,0.97);
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -8px 22px rgba(15,23,42,0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 5;
  flex: 0 0 auto;   /* fixed footer: no shrink, no grow, always visible */
}
.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 8px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 1.15;
  transition: all 0.18s;
  box-shadow: 0 2px 7px rgba(0,0,0,0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 42px;
}
.bp-btn i { font-size: 13px; flex-shrink: 0; }
.bp-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,0.16);
}
.bp-btn-whatsapp   { background: #25D366; color: #fff; }
.bp-btn-whatsapp:hover { background: #1ebe5a; }
.bp-btn-primary    { background: var(--orange); color: #fff; }
.bp-btn-primary:hover { background: var(--orange-dark); }
.bp-btn-claim      { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; border: 1px solid #b45309; }
.bp-btn-claim:hover { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }

/* ---- Claim buttons (fixed order: primary CTA first · Claim / Remove last) ---- */
/* "Claim / Remove" button — always the LAST action in the popup. The FIRST
   action is the primary CTA (Request Quote / Book Service / Hire Me /
   Contact Provider). A single claim action only — no duplicates. */
/* Tail "Claim / Remove" button — always the LAST action in the popup.
   It closes the action grid as a full-width final row. */
.bp-btn-claim-tail {
  grid-column: 1 / -1;
  max-width: 340px;
  justify-self: center;
}
.bp-btn-call       { background: var(--navy); color: #fff; }
.bp-btn-call:hover { background: var(--navy-mid); }
.bp-btn-email      { background: #64748b; color: #fff; }
.bp-btn-email:hover { background: #475569; }
.bp-btn-brochure   { background: var(--teal); color: #fff; }
.bp-btn-brochure:hover { filter: brightness(0.92); }
.bp-btn-directions { background: #4285F4; color: #fff; }
.bp-btn-directions:hover { background: #3367d6; }
.bp-btn-website { background: #1e293b; color: #fff; }
.bp-btn-website:hover { background: #0f172a; }
.bp-btn-chat    { background: #16a34a; color: #fff; }
.bp-btn-chat:hover { background: #15803d; }

/* ---- Disabled / inactive buttons (grey) ---- */
/* Applied alongside the normal colour class (e.g. bp-btn-whatsapp bp-btn-disabled)
   so an inactive button is visibly greyed out instead of hidden. */
.bp-btn.bp-btn-disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  opacity: 0.85;
  box-shadow: none !important;
  pointer-events: none;
}
.bp-btn.bp-btn-disabled:hover {
  transform: none !important;
  background: #e2e8f0 !important;
  box-shadow: none !important;
}
.bp-btn.bp-btn-disabled i { color: #94a3b8 !important; }

/* ---- Business Showcase: AVAILABLE PROMOTIONS block ----
   Rendered by js/showcase.js inside the business popup: a list of promotion
   rows (thumbnail, title, type label, "Uploaded: ..." date). Only metadata +
   thumbnails load here — full files open in the flipbook viewer on click. */
.bp-section.bp-promotions { border-bottom: 1px solid #f1f5f9; }
.bp-promo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.bp-promo-item {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.bp-promo-item:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 14px rgba(255,106,2,0.14);
  transform: translateY(-1px);
}
.bp-promo-item:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
/* Thumbnail tile (46px) with a permanent fallback glyph underneath the img */
.bp-promo-thumb {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  overflow: hidden;
  background: #f1f5f9;
}
.bp-promo-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 16px;
}
.bp-promo-thumb img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* img failed to load -> tinted tile + glyph (class added by onerror) */
.bp-promo-nothumb { background: #f8fafc; }

.bp-promo-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bp-promo-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-promo-type {
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bp-promo-type i { font-size: 10px; }
.bp-promo-date {
  font-size: 11px;
  color: #94a3b8;
}
.bp-promo-open {
  flex: 0 0 auto;
  align-self: center;
  color: #cbd5e1;
  font-size: 12px;
  transition: color 0.18s, transform 0.18s;
}
.bp-promo-item:hover .bp-promo-open {
  color: var(--orange);
  transform: translateX(2px);
}
/* Empty state ("No promotions available at the moment.") */
.bp-promo-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 13px;
}
.bp-promo-empty i { font-size: 15px; color: #cbd5e1; }
/* Loading state (spinner shown while the placeholder block fills) */
.bp-promo-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  color: #94a3b8;
  font-size: 13px;
}
.bp-promo-loading i { color: var(--orange); }

/* ---- Promotions pagination (CLIENT REQUEST #2) ----
   Appears ONLY when there are more than 5 promotions. Prev/next + counter;
   page changes re-render the list in place (the popup never refreshes). */
.bp-promo-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}
.bp-promo-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06);
}
.bp-promo-page-btn:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
  background: #fff7ed;
  transform: translateY(-1px);
}
.bp-promo-page-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.bp-promo-page-btn:disabled,
.bp-promo-page-btn.bp-promo-page-btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #f8fafc;
  transform: none;
  box-shadow: none;
}
.bp-promo-page-info {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

/* Make primary + claim span full width on first row for emphasis */
.bp-btn-primary, .bp-btn-claim {
  grid-column: span 1;
}

/* ---- Extra header bits ---- */
.bp-response {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.bp-response i { color: var(--teal); font-size: 11px; }
.bp-highlights { margin-top: 4px; }
.bp-highlights .profile-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.bp-highlights .profile-highlight-tag {
  background: #eef2ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
}

/* ---- Gallery (async) ---- */
.bp-gallery-section .profile-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bp-gallery-section .profile-gallery-thumb {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1;
}
.bp-gallery-section .profile-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Brochure link ---- */
.bp-brochure-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s;
}
.bp-brochure-link:hover {
  background: #fee2e2;
  transform: translateY(-1px);
}

/* ---- Reviews (async) ---- */
.bp-section .profile-reviews-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 8px;
}
.bp-section .review-stars { color: #f59e0b; letter-spacing: 1px; }
.bp-section .profile-review-item {
  padding: 8px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 13px;
}

/* ---- Mobile ---- */
@media (max-width: 560px) {
  /* CLIENT FIX: exempt the phone bottom-sheet business popup from the
     ≤992px 72px bottom-nav reserve (`.modal-overlay.open { padding-bottom:
     72px }`) which, being later in the file, beat this block's `padding: 0`
     and cost the popup 72px of height on phones — squeezing the Write-a-
     Review form and its Submit Review button. The bottom-sheet is full-
     width and 94vh tall; the nav sits behind its dimmed backdrop, so no
     reserve is needed. `!important` mirrors the reserve rule's intent. */
  .modal-overlay:has(.bp-layout) {
    padding: 0 !important;
    align-items: flex-end;
  }
  .modal-box:has(.bp-layout) {
    max-width: 100%;
    /* FIX: the bottom-sheet is specified as a full 94vh sheet, but only
       max-height was set, so short-content listings (e.g. Attorneys with
       "No promotions available") collapsed to a half-screen box while
       longer ones nearly filled the screen. A fixed height makes every
       business popup a consistent full-height sheet on phones. */
    height: 94vh;
    height: 94dvh;   /* modern mobile browsers: excludes dynamic toolbars */
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: 14px 14px 0 0;
    align-self: flex-end;
    margin: 0;
  }
  .bp-header { padding: 16px 16px 14px; gap: 12px; }
  .bp-avatar { flex-basis: 64px; width: 64px; height: 64px; border-radius: 13px; }
  .bp-name { font-size: 18px; }
  .bp-section { padding: 12px 16px; }
  .bp-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 14px 14px;
  }
  /* Business Showcase promotions: single column on phones */
  .bp-promo-list { grid-template-columns: 1fr; }
  .bp-promo-item { padding: 9px; gap: 9px; }
  /* Buttons render in DOM order (Claim first … Claim / Remove last);
     each keeps a clear full row so the order is obvious on phones. */
  .bp-btn-claim-tail { grid-column: 1 / -1; max-width: 100%; }
}

/* QUICK CLIENT FIXES — mobile floating icons, marketplace jump spacing, popup action grid */
@media (max-width: 992px) {
  /* Push ALL floating launcher icons ABOVE the fixed mobile bottom nav
     (which is ~64px tall) so they never overlap / hide the menu.
     Bottom nav height (64px) + gap (12px) = 76px from the bottom.        */
  .notification-box {
    bottom: 84px !important;
  }
  .chatbot-toggle {
    bottom: 84px !important;
  }
  .hzc-bubble {
    bottom: 84px !important;
  }
  .hzp-wb-launcher,
  #hzpWbLauncher {
    bottom: 84px !important;
  }
  /* The chatbot / webbot panels that open above the bubble must also shift up */
  .hzc-panel {
    bottom: 160px !important;
  }
  .conversion-popup {
    bottom: 150px !important;
  }
  .toast {
    bottom: 150px !important;
  }
  .wa-popup.open,
  .modal-overlay.open {
    /* Reserve space so the fixed mobile bottom nav stays reachable below
       LEGACY popups on phones/tablets (≤992px). The phone bottom-sheet
       business popup (.bp-layout) is exempted inside the 560px block. */
    padding-bottom: 72px;
  }
}

/* Make business/profile popup content reserve space for a neat bottom action grid */
.modal-body:has(.business-popup-action-bar) {
  position: relative;
  padding-bottom: 92px !important;
}
.modal-info-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.business-popup-action-bar {
  position: sticky;
  bottom: 0;
  margin-top: auto !important;
  padding: 14px 0 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, #fff 28%, #fff 100%);
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px !important;
  align-items: stretch;
  z-index: 5;
}
.business-popup-action-bar .business-profile-action-btn,
.business-profile-actions .business-profile-action-btn {
  min-height: 42px;
  border-radius: 8px !important;
  padding: 9px 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

@media (max-width: 768px) {
  .modal-body {
    flex-direction: column;
  }
  .modal-img-col {
    flex: 0 0 auto;
  }
  .modal-body:has(.business-popup-action-bar) {
    padding-bottom: 110px !important;
  }
  .business-popup-action-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important;
  }
  .business-popup-action-bar .business-profile-action-btn,
  .business-profile-actions .business-profile-action-btn {
    min-height: 38px;
    border-radius: 7px !important;
    font-size: 11px;
    padding: 8px 7px !important;
  }
}

/* ============================================================
   CHATBOT DEMO PAGE STYLES (mirrors the Webbot demo popup exactly)
   ============================================================ */
.chatbot-demo-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* Hero */
.chatbot-demo-hero {
  text-align: center;
  padding: 40px 20px 28px;
  background: linear-gradient(135deg, #001a33 0%, #003366 50%, #004080 100%);
  border-radius: 18px;
  color: #fff;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.chatbot-demo-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0,198,255,0.25) 0%, transparent 70%);
  border-radius: 50%;
}
.chatbot-demo-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}
.chatbot-demo-hero-title {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.2;
}
.chatbot-demo-hero-sub {
  font-size: 15px;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
  opacity: 0.9;
}

/* Widget card */
.chatbot-demo-widget-wrap {
  margin-bottom: 40px;
}
.chatbot-demo-widget-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
  overflow: hidden;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid #eee;
}
.chatbot-demo-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  color: #fff;
}
.chatbot-demo-widget-head-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chatbot-demo-widget-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.chatbot-demo-widget-head-info strong {
  display: block;
  font-size: 15px;
}
.chatbot-demo-widget-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.9;
}
.chatbot-demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
}
.chatbot-demo-widget-live {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.chatbot-demo-widget-body {
  padding: 30px 20px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f8ff;
}
.chatbot-demo-launcher-placeholder {
  text-align: center;
  color: #6b7280;
}
.chatbot-demo-launcher-icon {
  font-size: 42px;
  color: #0072ff;
  margin-bottom: 12px;
}
.chatbot-demo-launcher-placeholder p {
  font-size: 14px;
  margin: 0 0 6px;
  color: #374151;
}
.chatbot-demo-launcher-hint {
  font-size: 12px;
  color: #9ca3af;
}
.chatbot-demo-widget-note {
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.chatbot-demo-widget-note i {
  color: #0072ff;
}

/* Features grid */
.chatbot-demo-features {
  margin-bottom: 44px;
}
.chatbot-demo-features-title {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: #001a33;
  margin-bottom: 28px;
}
.chatbot-demo-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.chatbot-demo-feature {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  border: 1px solid #eee;
  transition: transform 0.2s, box-shadow 0.2s;
}
.chatbot-demo-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,114,255,0.12);
}
.chatbot-demo-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00c6ff20 0%, #0072ff20 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #0072ff;
  margin-bottom: 14px;
}
.chatbot-demo-feature h4 {
  font-size: 17px;
  font-weight: 700;
  color: #001a33;
  margin: 0 0 8px;
}
.chatbot-demo-feature p {
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
  margin: 0;
}

/* Embed section */
.chatbot-demo-embed {
  margin-bottom: 44px;
  background: #f0f8ff;
  border-radius: 18px;
  padding: 32px 24px;
  border: 1px solid #d6ecff;
}
.chatbot-demo-embed-title {
  font-size: 24px;
  font-weight: 800;
  color: #001a33;
  margin-bottom: 10px;
}
.chatbot-demo-embed-intro {
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
  margin-bottom: 24px;
  max-width: 720px;
}
.chatbot-demo-embed-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.chatbot-demo-embed-step {
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  border: 1px solid #eee;
}
.chatbot-demo-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 12px;
}
.chatbot-demo-embed-step h4 {
  font-size: 16px;
  font-weight: 700;
  color: #001a33;
  margin: 0 0 6px;
}
.chatbot-demo-embed-step p {
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
  margin: 0;
}
.chatbot-demo-embed-step code {
  background: #e6f3ff;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  color: #0072ff;
}
.chatbot-demo-embed-code {
  background: #001a33;
  border-radius: 12px;
  overflow: hidden;
}
.chatbot-demo-embed-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  color: #80d8ff;
  font-size: 13px;
  font-weight: 600;
}
.chatbot-demo-copy-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.chatbot-demo-copy-btn:hover {
  background: rgba(255,255,255,0.2);
}
.chatbot-demo-embed-code pre {
  margin: 0;
  padding: 18px;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.7;
  font-family: 'Courier New', monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* CTA */
.chatbot-demo-cta {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  border-radius: 18px;
  padding: 40px 24px;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
}
.chatbot-demo-cta-inner {
  max-width: 640px;
  margin: 0 auto;
}
.chatbot-demo-cta h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 12px;
}
.chatbot-demo-cta p {
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.95;
  margin: 0 0 24px;
}
.chatbot-demo-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.chatbot-demo-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.chatbot-demo-cta-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.chatbot-demo-cta-btn-primary {
  background: #fff;
  color: #0072ff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.chatbot-demo-cta-btn-secondary {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
}

/* Responsive */
@media (max-width: 768px) {
  .chatbot-demo-hero-title { font-size: 24px; }
  .chatbot-demo-features-title { font-size: 22px; }
  .chatbot-demo-embed-title { font-size: 20px; }
  .chatbot-demo-cta h2 { font-size: 22px; }
  .chatbot-demo-section { padding: 12px 12px 40px; }
  .chatbot-demo-features-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WEBBOT DEMO PAGE STYLES (mirrors the Chatbot demo popup exactly)
   ============================================================ */
.webbot-demo-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* Hero */
.webbot-demo-hero {
  text-align: center;
  padding: 40px 20px 28px;
  background: linear-gradient(135deg, #001a33 0%, #003366 50%, #004080 100%);
  border-radius: 18px;
  color: #fff;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.webbot-demo-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0,198,255,0.25) 0%, transparent 70%);
  border-radius: 50%;
}
.webbot-demo-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}
.webbot-demo-hero-title {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.2;
}
.webbot-demo-hero-sub {
  font-size: 15px;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
  opacity: 0.9;
}

/* Widget card */
.webbot-demo-widget-wrap {
  margin-bottom: 40px;
}
.webbot-demo-widget-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
  overflow: hidden;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid #eee;
}
.webbot-demo-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  color: #fff;
}
.webbot-demo-widget-head-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.webbot-demo-widget-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.webbot-demo-widget-head-info strong {
  display: block;
  font-size: 15px;
}
.webbot-demo-widget-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.9;
}
.webbot-demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
}
.webbot-demo-widget-live {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.webbot-demo-widget-body {
  padding: 30px 20px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f8ff;
}
.webbot-demo-launcher-placeholder {
  text-align: center;
  color: #6b7280;
}
.webbot-demo-launcher-icon {
  font-size: 42px;
  color: #0072ff;
  margin-bottom: 12px;
}
.webbot-demo-launcher-placeholder p {
  font-size: 14px;
  margin: 0 0 6px;
  color: #374151;
}
.webbot-demo-launcher-hint {
  font-size: 12px;
  color: #9ca3af;
}
.webbot-demo-widget-note {
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.webbot-demo-widget-note i {
  color: #0072ff;
}

/* Features grid */
.webbot-demo-features {
  margin-bottom: 44px;
}
.webbot-demo-features-title {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: #001a33;
  margin-bottom: 28px;
}
.webbot-demo-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.webbot-demo-feature {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  border: 1px solid #eee;
  transition: transform 0.2s, box-shadow 0.2s;
}
.webbot-demo-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,114,255,0.12);
}
.webbot-demo-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00c6ff20 0%, #0072ff20 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #0072ff;
  margin-bottom: 14px;
}
.webbot-demo-feature h4 {
  font-size: 17px;
  font-weight: 700;
  color: #001a33;
  margin: 0 0 8px;
}
.webbot-demo-feature p {
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
  margin: 0;
}

/* Embed section */
.webbot-demo-embed {
  margin-bottom: 44px;
  background: #f0f8ff;
  border-radius: 18px;
  padding: 32px 24px;
  border: 1px solid #d6ecff;
}
.webbot-demo-embed-title {
  font-size: 24px;
  font-weight: 800;
  color: #001a33;
  margin-bottom: 10px;
}
.webbot-demo-embed-intro {
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
  margin-bottom: 24px;
  max-width: 720px;
}
.webbot-demo-embed-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.webbot-demo-embed-step {
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  border: 1px solid #eee;
}
.webbot-demo-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 12px;
}
.webbot-demo-embed-step h4 {
  font-size: 16px;
  font-weight: 700;
  color: #001a33;
  margin: 0 0 6px;
}
.webbot-demo-embed-step p {
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
  margin: 0;
}
.webbot-demo-embed-step code {
  background: #e6f3ff;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  color: #0072ff;
}
.webbot-demo-embed-code {
  background: #001a33;
  border-radius: 12px;
  overflow: hidden;
}
.webbot-demo-embed-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  color: #80d8ff;
  font-size: 13px;
  font-weight: 600;
}
.webbot-demo-copy-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.webbot-demo-copy-btn:hover {
  background: rgba(255,255,255,0.2);
}
.webbot-demo-embed-code pre {
  margin: 0;
  padding: 18px;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.7;
  font-family: 'Courier New', monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* CTA */
.webbot-demo-cta {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  border-radius: 18px;
  padding: 40px 24px;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
}
.webbot-demo-cta-inner {
  max-width: 640px;
  margin: 0 auto;
}
.webbot-demo-cta h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 12px;
}
.webbot-demo-cta p {
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.95;
  margin: 0 0 24px;
}
.webbot-demo-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.webbot-demo-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.webbot-demo-cta-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.webbot-demo-cta-btn-primary {
  background: #fff;
  color: #0072ff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.webbot-demo-cta-btn-secondary {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
}

/* Responsive */
@media (max-width: 768px) {
  .webbot-demo-hero-title { font-size: 24px; }
  .webbot-demo-features-title { font-size: 22px; }
  .webbot-demo-embed-title { font-size: 20px; }
  .webbot-demo-cta h2 { font-size: 22px; }
  .webbot-demo-section { padding: 12px 12px 40px; }
  .webbot-demo-features-grid { grid-template-columns: 1fr; }
}

/* ===== Phase 12: Responsive overflow fix for very narrow screens (<=414px) ===== */
@media (max-width: 414px) {
  .inquiry-sidebar { width: 100% !important; max-width: 100vw; }
  .inquiry-sidebar-legacy { width: 100% !important; max-width: 100vw; }
  html, body { overflow-x: hidden; }
  .lead-form-overlay { padding: 0 !important; }
  .lead-form-modal { width: 100% !important; max-width: 100vw !important; border-radius: 0 !important; max-height: 100vh !important; }
  .ad-tab-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bd-tab-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ══════════════════════════════════════════════════════════════════
   PICTURE ADVERT SLOTS (Ads Manager — js/ads.js)
   inline-small  300×300  — square card inside the items grid
   inline-wide   600×300  — spans both grid columns
   banner-wide   970×250  — below the category hero banner
   banner-strip  728×180  — between grid and pagination
   ══════════════════════════════════════════════════════════════════ */
.hz-ad-slot {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  background: #fff;
  margin: 0;
}
.hz-ad-slot .hz-ad-slide {
  position: relative;
  display: none;
  width: 100%;
}
.hz-ad-slot .hz-ad-slide.active { display: block; }
.hz-ad-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hz-ad-slide .hz-ad-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(45,25,82,0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.hz-ad-slide .hz-ad-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
  color: #fff;
  padding: 26px 12px 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}
.hz-ad-slide .hz-ad-caption strong { display: block; font-size: 13px; }
.hz-ad-slide .hz-ad-caption em { font-style: normal; opacity: 0.9; }

/* dots */
.hz-ad-dots {
  position: absolute;
  bottom: 8px;
  right: 10px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
.hz-ad-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hz-ad-dot.active {
  background: var(--orange);
  transform: scale(1.25);
}

/* — inline slots inside the listing grids —
     v13: an inline advert NEVER renders larger than its nominal size.
     inline-wide  600×300  — spans 2 card columns, capped at 600px, centered
     inline-tall  300×600  — one column, capped at 300px, centered
     inline-small 300×300  — one column, capped at 300px, centered      */
.hz-ad-slot--inline-small {
  grid-column: auto;
  max-width: 300px;
  justify-self: center;
  width: 100%;
}
.hz-ad-slot--inline-wide {
  grid-column: auto / span 2;   /* two cards wide, not the whole grid */
  max-width: 600px;             /* never larger than the sold 600×300 */
  justify-self: center;
  width: 100%;
}
/* keep the sold aspect ratio crisp whatever image is uploaded */
.hz-ad-slot--inline-wide .hz-ad-slide img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.hz-ad-slot--inline-small .hz-ad-slide img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* a wide advert alone in a row still stays at 600px max, centered */
.hz-ad-slot--inline-wide:only-child {
  grid-column: 1 / -1;
  max-width: 600px;
  justify-self: center;
}

/* — banner positions — */
.hz-ad-slot--banner-wide,
.hz-ad-slot--banner-strip {
  grid-column: 1 / -1;
  margin: 18px auto 0 auto;
}
.hz-ad-slot--banner-wide  { max-width: 970px; }
.hz-ad-slot--banner-strip { max-width: 728px; margin-bottom: 18px; }

/* pause rotation on hover */
.hz-ad-slot:hover .hz-ad-slide img { filter: brightness(1.04); }

/* responsive */
@media (max-width: 992px) {
  .hz-ad-slot--banner-wide,
  .hz-ad-slot--banner-strip { max-width: 100%; }
}
@media (max-width: 640px) {
  .hz-ad-slide .hz-ad-caption { font-size: 11px; padding: 22px 10px 8px 10px; }
  .hz-ad-slide .hz-ad-caption strong { font-size: 12px; }
  .hz-ad-dots { bottom: 6px; right: 8px; }
}

/* ══════════════════════════════════════════════════════════════════
   SCHOOLS DIRECTORY (Find Schools — js/db-schools.js)
   ══════════════════════════════════════════════════════════════════ */
.schools-section { animation: fadeIn 0.3s ease; }

/* ============================================================
   COOKIE CONSENT BANNER (POPIA / CPA)
   ============================================================ */
#hzp-cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
  background: var(--navy); color: #fff;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.35);
  transform: translateY(110%);
  transition: transform .3s ease;
  padding: 14px 0;
}
#hzp-cookie-banner.hzp-cookie-in  { transform: translateY(0); }
#hzp-cookie-banner.hzp-cookie-out { transform: translateY(110%); }
.hzp-cookie-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.hzp-cookie-text { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.5; flex: 1; min-width: 260px; }
.hzp-cookie-text i { color: var(--orange); font-size: 18px; }
.hzp-cookie-text a { color: #ffb27a; text-decoration: underline; }
.hzp-cookie-text a:hover { color: #fff; }
.hzp-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hzp-cookie-btn {
  border: none; cursor: pointer; font-weight: 700; font-size: 12.5px;
  padding: 10px 18px; border-radius: 6px; font-family: inherit;
  transition: transform .15s, box-shadow .15s;
}
.hzp-cookie-btn:hover { transform: translateY(-1px); }
.hzp-cookie-btn.primary { background: var(--orange); color: #fff; }
.hzp-cookie-btn.primary:hover { background: var(--orange-dark); }
.hzp-cookie-btn.secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.hzp-cookie-btn.secondary:hover { background: rgba(255,255,255,0.12); }
@media (max-width: 640px) {
  #hzp-cookie-banner { padding: 10px 0; }
  .hzp-cookie-inner { flex-direction: column; align-items: stretch; }
  .hzp-cookie-actions { justify-content: stretch; }
  .hzp-cookie-btn { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   PICTURE ADVERT SLOTS — v10 additions (Ads Manager / js/ads.js v10)
   New: inline-tall 300×600 portrait slot · home page banner spacing ·
        inline slots inside the home page featured strips
   ══════════════════════════════════════════════════════════════════════ */

/* — inline-tall: 300×600 portrait advert occupying ONE grid cell — */
.hz-ad-slot--inline-tall {
  grid-column: auto;              /* one column, like a listing card */
  align-self: start;
  max-width: 300px;               /* never larger than the sold 300×600 */
  justify-self: center;
  width: 100%;
}
.hz-ad-slot--inline-tall .hz-ad-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 2;            /* keep the portrait ratio crisp */
  object-fit: cover;
}

/* — home page: banner-wide directly under the "Need a Local Service?"
     lead hero gets balanced spacing so it reads as its own strip — */
#mainContent .lead-hero-section + .hz-ad-slot--banner-wide {
  margin: 0 auto 4px auto;
  max-width: 970px;
}
/* extra breathing room before the first featured strip follows the ad */
.hz-ad-slot--banner-wide + .featured-carousel-section,
.hz-ad-slot--banner-wide + section.featured-section {
  margin-top: 18px;
}

/* — inline adverts inside the home page featured strips:
     match the strip gap so the ad card lines up with its neighbours — */
.featured-grid > .hz-ad-slot,
.featured-grid-compact > .hz-ad-slot,
.catalogue-showcase-grid > .hz-ad-slot,
.recently-added-grid > .hz-ad-slot,
.local-services-grid > .hz-ad-slot {
  align-self: start;
}
/* a 600×300 wide advert inside ANY home page strip must not stretch
   the whole strip — cap it at the double-card width (600px max) */
.catalogue-showcase-grid > .hz-ad-slot--inline-wide,
.recently-added-grid > .hz-ad-slot--inline-wide,
.local-services-grid > .hz-ad-slot--inline-wide {
  grid-column: auto / span 2;     /* span 2 cells instead of full width */
  max-width: 600px;               /* nominal sold size — never stretch   */
  justify-self: center;
}
/* a tall 300×600 advert inside those strips stays one cell, capped */
.catalogue-showcase-grid > .hz-ad-slot--inline-tall,
.recently-added-grid > .hz-ad-slot--inline-tall,
.local-services-grid > .hz-ad-slot--inline-tall {
  grid-column: auto;
  max-width: 300px;
  justify-self: center;
}
.catalogue-showcase-grid > .hz-ad-slot--inline-small,
.recently-added-grid > .hz-ad-slot--inline-small,
.local-services-grid > .hz-ad-slot--inline-small {
  grid-column: auto;
  max-width: 300px;
  justify-self: center;
}
/* when the strip collapses to one column, the wide ad takes the row */
@media (max-width: 540px) {
  .catalogue-showcase-grid > .hz-ad-slot--inline-wide,
  .recently-added-grid > .hz-ad-slot--inline-wide,
  .local-services-grid > .hz-ad-slot--inline-wide {
    grid-column: 1 / -1;
    max-width: 100%;
  }
}
/* a 600×300 wide advert inside a compact featured strip should not
   stretch the whole strip — cap it at the double-card width */
.featured-grid-compact > .hz-ad-slot--inline-wide,
.featured-grid > .hz-ad-slot--inline-wide {
  grid-column: auto / span 2;     /* span 2 cells instead of full width */
  max-width: 600px;               /* nominal sold size — never stretch   */
  justify-self: center;
}
.featured-grid-compact > .hz-ad-slot--inline-wide:only-child,
.featured-grid > .hz-ad-slot--inline-wide:only-child {
  grid-column: 1 / -1;            /* full width when it is alone in the row */
}

/* — Business Support page: banner below the .bs-hero — */
.bsupport-page .hz-ad-slot--banner-wide {
  max-width: 970px;
  margin: 18px auto 0 auto;
}

/* — responsive: portrait advert keeps its own height on phones,
     and a span-2 wide advert collapses to full width when the
     featured grids drop to a single column — */
@media (max-width: 640px) {
  .hz-ad-slot--inline-tall .hz-ad-slide img {
    aspect-ratio: auto;           /* let a tall image keep its own height */
  }
  .hz-ad-slot--inline-wide .hz-ad-slide img {
    aspect-ratio: 2 / 1;          /* keep 600×300 ratio on phones too */
  }
  #mainContent .lead-hero-section + .hz-ad-slot--banner-wide {
    max-width: 100%;
  }
  /* phones: every inline advert (wide, tall, small) collapses to a
     single full-width cell with a 2:1 (or natural) image — it never
     creates an implicit second column that overflows the grid. */
  .hz-ad-slot--inline-wide,
  .hz-ad-slot--inline-tall,
  .hz-ad-slot--inline-small {
    grid-column: 1 / -1;          /* take the one available column    */
    max-width: 100%;
    justify-self: stretch;
  }
  .hz-ad-slot--inline-wide:only-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 540px) {
  .featured-grid > .hz-ad-slot--inline-wide,
  .featured-grid-compact > .hz-ad-slot--inline-wide {
    grid-column: 1 / -1;          /* single column — take the full row */
    max-width: 100%;
  }
}


/* ============================================================
   PICTURE ADVERTS v11 — default placeholder slots
   ("Advertise Here" gray images while a section is unsold;
    managed from Ads Manager → Ad Sections & Defaults)
   ============================================================ */
.hz-ad-slot--default .hz-ad-slide img {
  opacity: 0.98;
  transition: opacity .25s ease;
}
.hz-ad-slot--default:hover .hz-ad-slide img { opacity: 1; }
/* subtle dashed outline marks "available space" without shouting */
.hz-ad-slot--default {
  outline: 1px dashed rgba(255,255,255,0.0);
  outline-offset: -1px;
}
.hz-ad-slot--default .hz-ad-tag {
  background: rgba(90,94,102,0.75);   /* softer tag on gray placeholders */
}
/* placeholders look intentional, not like broken content */
.hz-ad-slot--default .hz-ad-caption strong { font-weight: 600; letter-spacing: .4px; }
.hz-ad-slot--default .hz-ad-caption em { display: none; }
/* the placeholder image already carries the text — keep the caption overlay
   minimal: hide business name on default slides, keep the tag visible */
.hz-ad-slot--default .hz-ad-slide .hz-ad-caption { display: none; }

/* keep a low visual weight in grids so cards stay the hero */
.hz-ad-slot--default { box-shadow: 0 1px 6px rgba(0,0,0,0.06); }

/* ---- responsive defaults ---- */
@media (max-width: 640px) {
  .hz-ad-slot--default { box-shadow: none; }
}

/* ============================================================
   FULL-SCREEN CATALOGUE FLIPBOOK MODAL (DearFlip viewer)
   Same design/behaviour as tcdirect.co.za/catalogue/
   ============================================================ */
#catalogueModal {
  /* Stack the full-screen promotions viewer ABOVE the business
     popup (#productModal / .modal-overlay = 9990000) so clicking a
     promotion inside the popup opens the viewer on TOP of it.
     Keep it BELOW the lead/quote/splash overlays (2147483600+) and
     the chatbot/WhatsApp layers, which must always win. */
  z-index: 9995000;
}
#catalogueModal .catalogue-modal-dialog,
#catalogueModal .modal-dialog {
  margin: 0;
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
#catalogueModal .catalogue-modal-content,
#catalogueModal .modal-content {
  pointer-events: auto;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  border: 0;
  border-radius: 0;
  background: #777777; /* DearFlip default viewer background */
  overflow: hidden;
}
#catalogueModal .modal-body {
  height: 100%;
  padding: 0;
  overflow: hidden;
}
#catalogueModal #catalogueFrame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
#catalogueModal .modal-body { position: relative; }
/* Loading spinner overlay for the DearFlip viewer. Toggled by
   openCatalogue() (legacy) and Showcase.open() via style.display='flex'. */
#catalogueModal #iframeSpinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2050;
  background: rgba(45,25,82,0.55);
  color: #fff;
  font-size: 26px;
}
/* Floating round close button (top-right) — DearFlip style */
#catalogueModal .catalogue-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2100;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.85);
  color: #fff;
  font-size: 18px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  transition: background .2s, transform .15s;
}
#catalogueModal .catalogue-close-btn:hover {
  background: rgba(220, 38, 38, 0.95);
  transform: scale(1.06);
}
/* Hide the stock Bootstrap 5 fade-scale animation for a full-bleed switch */
#catalogueModal.fade {
  transition: opacity .25s ease;
}
#catalogueModal.fade .modal-dialog {
  transition: none;
  transform: none;
}
@media (max-width: 640px) {
  #catalogueModal .catalogue-close-btn {
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
}

/* ══════════════════ STATISTICS & ENGAGEMENT (§1 §2 §7 §8 §22) ══════════════════
   Compact metrics row for business cards. All numbers come from the
   stats block attached by fetch_*.php (SQLite hzp_stat_totals mirror) —
   nothing is hard-coded (§2) and withheld metrics are never rendered (§6). */
.hzp-stats-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
  margin: 6px 0 2px;
}
.hzp-stats-row .hzp-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.hzp-stats-row .hzp-stat i {
  font-size: 11px;
  color: var(--navy-mid);
}
.hzp-stats-row .hzp-stat-like {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}
.hzp-stats-row .hzp-stat-like:hover {
  background: var(--orange-light);
  border-color: var(--orange);
  color: var(--text-dark);
}
.hzp-stats-row .hzp-stat-like.hzp-liked {
  background: var(--orange-light);
  border-color: var(--orange);
  color: var(--orange);
}
.hzp-stats-row .hzp-stat-like.hzp-liked i {
  color: var(--orange);
}
.hzp-stats-row .hzp-stat-like:disabled {
  opacity: 0.55;
  cursor: wait;
}
@media (max-width: 375px) {
  .hzp-stats-row { gap: 4px 8px; }
}