/* ===========================================================
   Koochly Liquid Glass Theme (Dark)
   Loaded via media query (prefers-color-scheme: dark)
   =========================================================== */

/* Page background */
.kfd-liquid {
  background: radial-gradient(1200px 800px at 20% 10%, rgba(60,65,80,0.45), rgba(18,20,27,0.7)) fixed,
              linear-gradient(160deg, rgba(22,25,32,0.92), rgba(10,11,16,0.92));
  color: #e9ecf1;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  transition: background 0.4s ease, color 0.3s ease;
}

/* Container frame */
.kfd-container {
  background: rgba(26, 28, 36, 0.55);
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.35);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  padding: 24px;
  margin-bottom: 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Headings */
.kfd-h1-fa, .kfd-h2-fa {
  color: #f5f7fb;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  font-weight: 600;
}
.kfd-intro-fa, .kfd-desc-fa {
  color: rgba(235,238,245,0.92) !important;
  font-weight: 400;
}

/* Section blocks */
.kfd-section {
  background: rgba(28, 30, 38, 0.65);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.35);
  margin: 20px 0;
  padding: 20px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.06);
}
.kfd-section:hover {
  background: rgba(36, 39, 50, 0.58);
}

/* Cards */
.kfd-card {
  background: rgba(28, 30, 38, 0.75);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.45);
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
  border: 1px solid rgba(255,255,255,0.06);
  color: #e6e9f0;
}
.kfd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  background: rgba(36, 39, 48, 0.8);
}

/* TOC (top navigation menu) */
.kfd-toc {
  background: rgba(25, 27, 35, 0.7);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.35);
  border: 1px solid transparent;
  background-image:
    linear-gradient(160deg, rgba(28,30,38,0.75), rgba(28,30,38,0.75)),
    linear-gradient(90deg, #3BBFCB 0%, #D8A45C 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.kfd-liquid .kfd-toc a {
  background: rgba(40, 42, 52, 0.82) !important;
  color: #e8eef7 !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.35);
  background-image:
    linear-gradient(rgba(40,42,52,0.82), rgba(40,42,52,0.82)),
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.kfd-liquid .kfd-toc a:hover {
  background: rgba(52, 55, 66, 0.9) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.45);
}

/* SEO section */
.kfd-seo-faq {
  background: rgba(30,32,42,0.55);
  border-radius: 12px;
  box-shadow: inset 0 0 1px rgba(255,255,255,0.05);
  padding: 20px;
  margin-top: 20px;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Links */
a {
  color: #6fb8ff;
  text-decoration: none;
}
a:hover {
  color: #a7d2ff;
  text-decoration: underline;
}

/* Stars / ratings (ensure contrast) */
.kfd-reviews-badge .kfd-score,
.kfd-reviews .kfd-score {
  color: #ffd76a;
}

/* Smooth transitions for all glass surfaces */
.kfd-section, .kfd-container, .kfd-card, .kfd-toc, .kfd-seo-faq {
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Improve paragraph and small text contrast */
p, .kfd-section p {
  color: rgba(235, 238, 245, 0.92) !important;
}

/* Target only unexpected white surfaces */
.kfd-liquid .kfd-card,
.kfd-liquid .kfd-toc,
.kfd-liquid .kfd-section {
  background-color: rgba(25, 27, 35, 0.7);
}
.kfd-liquid .kfd-card p,
.kfd-liquid .kfd-card .kfd-text,
.kfd-liquid .kfd-card .kfd-meta {
  color: #e6e9f0;
}

/* =======================================================================
   Harden dark glass on listing cards (covers multiple markup variants)
   ======================================================================= */

/* Common wrappers that may not have .kfd-card */
.kfd-liquid .kfd-section [class*="card"],
.kfd-liquid .kfd-cards [class*="card"],
.kfd-liquid .kfd-grid > div,
.kfd-liquid .kfd-listing-page .kfd-section > div {
  background: rgba(28, 30, 38, 0.78) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.45) !important;
  color: #e6e9f0 !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

/* Inner text in cards */
.kfd-liquid .kfd-section [class*="card"] * {
  color: #e6e9f0 !important;
}

/* Fix explicit white backgrounds on nested elements */
.kfd-liquid .kfd-section [class*="card"] [style*="background:#fff"],
.kfd-liquid .kfd-section [class*="card"] [style*="background: #fff"],
.kfd-liquid .kfd-section [class*="card"] [style*="background-color:#fff"],
.kfd-liquid .kfd-section [class*="card"] [style*="background-color: #fff"] {
  background: transparent !important;
}

/* Hover */
.kfd-liquid .kfd-section [class*="card"]:hover {
  background: rgba(36, 39, 48, 0.85) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.5) !important;
}

/* QR box styling (dark, business single) */
.kfd-business-single.kfd-liquid [class*="qr"],
.kfd-business-single.kfd-liquid .kfd-qr,
.kfd-business-single.kfd-liquid .kfd-qr-box,
.kfd-business-single.kfd-liquid .qr-box,
.kfd-business-single.kfd-liquid .qr_wrapper {
  background: rgba(28, 30, 38, 0.78);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.45);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  padding: 16px;
}

.kfd-business-single.kfd-liquid [class*="qr"] * {
  color: #e6e9f0;
}

.kfd-business-single.kfd-liquid [class*="qr"] img {
  background: rgba(245, 245, 245, 0.88) !important; /* light gray background for QR contrast */
  border-radius: 10px;
  display: block;
  padding: 6px; /* slight padding to separate QR from glass edge */
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Business title styling (dark mode) */
.kfd-business-single.kfd-liquid .kfd-title,
.kfd-business-single.kfd-liquid h1.kfd-title,
.kfd-business-single.kfd-liquid h1,
.kfd-business-single.kfd-liquid .business-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #f3f6fb !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
/* ===========================================================
   Card titles & links colours (dark mode)
   =========================================================== */
:root { --kfd-teal: #3BBFCB; --kfd-teal-2: #66dbe1; }

/* Titles inside cards to near-white */
.kfd-liquid .kfd-section [class*="card"] h3,
.kfd-liquid .kfd-section [class*="card"] h4,
.kfd-liquid .kfd-card h3,
.kfd-liquid .kfd-card h4 {
  color: #eef2f7 !important;
}
/* If titles are links, keep them light */
.kfd-liquid .kfd-section [class*="card"] h3 a,
.kfd-liquid .kfd-section [class*="card"] h4 a,
.kfd-liquid .kfd-card h3 a,
.kfd-liquid .kfd-card h4 a {
  color: #eef2f7 !important;
}
.kfd-liquid .kfd-section [class*="card"] h3 a:hover,
.kfd-liquid .kfd-section [class*="card"] h4 a:hover,
.kfd-liquid .kfd-card h3 a:hover,
.kfd-liquid .kfd-card h4 a:hover {
  color: #ffffff !important;
}

/* Other links on cards use brand teal */
.kfd-liquid .kfd-section [class*="card"] a:not(h3 a):not(h4 a),
.kfd-liquid .kfd-card a:not(h3 a):not(h4 a) {
  color: var(--kfd-teal) !important;
}
.kfd-liquid .kfd-section [class*="card"] a:not(h3 a):not(h4 a):hover,
.kfd-liquid .kfd-card a:not(h3 a):not(h4 a):hover {
  color: var(--kfd-teal-2) !important;
}

/* ===========================================================
   Teal accent for phone toggle & more link (dark mode)
   =========================================================== */
.kfd-liquid .kfd-phone-toggle,
.kfd-liquid .kfd-more-link {
  color: var(--kfd-teal) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.kfd-liquid .kfd-phone-toggle:hover,
.kfd-liquid .kfd-more-link:hover {
  color: var(--kfd-teal-2) !important;
}

/* ===========================================================
   Gradient border for category container (dark mode)
   =========================================================== */
.kfd-liquid .kfd-section .kfd-toc,
.kfd-liquid .kfd-toc,
.kfd-listing-page .kfd-toc,
.kfd-liquid [class*="kfd-toc"],
.kfd-liquid .kfd-cats,
.kfd-liquid .kfd-categories {
  position: relative;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background:
    linear-gradient(160deg, rgba(28,30,38,0.78), rgba(28,30,38,0.78)) padding-box,
    linear-gradient(90deg, #3BBFCB 0%, #D8A45C 100%) border-box !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.30),
              inset 0 1px 0 rgba(255,255,255,0.06),
              inset 0 -1px 0 rgba(0,0,0,0.35) !important;
}

/* Optional: soften on hover */
.kfd-liquid .kfd-toc:hover {
  background:
    linear-gradient(160deg, rgba(36,39,50,0.80), rgba(30,33,44,0.80)) padding-box,
    linear-gradient(90deg, #3BBFCB 0%, #D8A45C 100%) border-box !important;
}