/* ==========================================================================
   cards.css – Reusable Card Components and IDX Overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. IDX Guard Rails
   -------------------------------------------------------------------------- */
/* Keep Houzez card styling from bleeding into IDX widgets */
.IDX-wrapper-standard .card,
.IDX-wrapper-standard .module,
.IDX-wrapper-standard .widget {
  padding: 0 !important;
  background: var(--kaplon-white) !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   1. Base Cards (non-IDX)
   -------------------------------------------------------------------------- */
/* Card surfaces: align with surface and shadow tokens */
.card {
  margin-bottom: var(--space-4);
  padding: clamp(16px, 2vw, 24px);
  background: var(--surface-soft, var(--kaplon-white));
  border: 1px solid var(--card-border-soft);
  border-radius: var(--radius-4, 12px);
  box-shadow: var(--shadow-card-md, var(--shadow-md));
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.card:hover {
  box-shadow: var(--shadow-card-xl, var(--shadow-lg));
  transform: translateY(-2px);
}

.card .card-inner {
  margin: var(--space-2) 0;
  padding: clamp(12px, 1.5vw, 20px);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--card-border-soft);
  border-radius: var(--radius-3, 10px);
  box-shadow: var(--shadow-card-sm, var(--shadow-sm));
}

/* --------------------------------------------------------------------------
   1.3 Listing Card (generic utility)
   Purpose: reusable container for listing summaries across templates
   -------------------------------------------------------------------------- */
.listing-card {
  position: relative;
  padding: clamp(14px, 2vw, 18px);
  background: var(--surface-1);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-2, 8px);
  box-shadow: var(--shadow-xs);
}

.listing-card+.listing-card {
  margin-top: var(--space-2);
}

.listing-card :where(.listing-card__title) {
  margin: 0 0 6px;
  color: var(--kaplon-blue);
  font-weight: 700;
  line-height: 1.25;
}

.listing-card :where(.listing-card__meta) {
  margin-top: 8px;
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.5;
  /* consistent metadata rhythm */
}

/* Dark Mode Cards: swap to --dark-surface tokens */

.card:not(.idx-card):not(.IDX-panel) {
  overflow: hidden;
  background: var(--surface-soft, var(--kaplon-white));
  border: 1px solid var(--card-border-soft);
  border-radius: var(--radius-2, 12px);
  box-shadow: var(--shadow-card-md, var(--shadow-md));
  transition:
    box-shadow 0.18s cubic-bezier(0.4, 0.2, 0.2, 1),
    transform 0.18s cubic-bezier(0.4, 0.2, 0.2, 1);
  overflow-wrap: anywhere;
}

.card:not(.idx-card):not(.IDX-panel):hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.card:not(.idx-card):not(.IDX-panel)>.card-body {
  padding: clamp(16px, 2.4vw, 24px);
}

.card:not(.idx-card):not(.IDX-panel):not(:has(> .card-body)) {
  padding: clamp(16px, 2.4vw, 24px);
}

.card:not(.idx-card):not(.IDX-panel) :is(h1, h2, h3, h4) {
  margin-top: 0;
  margin-bottom: clamp(0.5rem, 1.2vw, 1rem);
  color: var(--kaplon-blue);
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
}

.card:not(.idx-card):not(.IDX-panel) p {
  margin-top: 0;
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
  color: var(--gray-darkest);
  line-height: 1.6;
}

.card:not(.idx-card):not(.IDX-panel) p:last-child {
  margin-bottom: 0;
}

.card:not(.idx-card):not(.IDX-panel) .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

.card:not(.idx-card):not(.IDX-panel) .btn:first-of-type {
  margin-top: clamp(0.5rem, 1vw, 0.75rem);
}

/* Listing callouts */
.card-listing .card-price {
  color: var(--kaplon-red);
  font-size: 1.25rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   1.1 Base Dark Mode
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1.2 Card Size Utility Classes
   -------------------------------------------------------------------------- */
.card-sm {
  padding: 0.75rem;
  border-radius: var(--radius-1, 6px);
  box-shadow: var(--shadow-sm);
}

.card-md {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--surface-soft, var(--kaplon-white));
  border: 1px solid var(--card-border-soft);
  border-radius: var(--radius-3, 10px);
  box-shadow: var(--shadow-md);
  color: var(--gray-darkest);
  gap: clamp(1rem, 1.5vw, 1.75rem);
}

.card-md h2 {
  margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
  color: var(--kaplon-blue);
  font-size: 1.5rem;
  font-weight: 700;
}

.card-md h3 {
  margin: 0 0 0.75rem;
  color: var(--kaplon-blue);
  font-weight: 700;
}

.card-md p,
.card-md ul,
.card-md li {
  margin: 0;
  color: var(--gray-darkest);
  line-height: 1.6;
}

.card-md :where(p, ul)+ :where(p, ul) {
  margin-top: var(--space-2);
}

.card-md li+li {
  margin-top: calc(var(--space-1) * 0.75);
}

.card-md p b,
.card-md p strong {
  font-weight: 700;
}

.card-md ul {
  padding-left: 1.25rem;
  line-height: 1.5;
  list-style-position: outside;
}

.card-md .btn,
.card-md .btn-brand {
  margin-top: auto;
  align-self: flex-start;
}

.card-md a:not(.btn):not(.btn-brand) {
  word-break: break-word;
}

.card-lg {
  padding: 2rem;
  border-radius: var(--radius-4, 12px);
  box-shadow: var(--shadow-lg);
}

.card-xl {
  padding: clamp(2.5rem, 4vw, 3rem);
  border-radius: var(--radius-4, 12px);
  box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   2. County & Community Cards
   -------------------------------------------------------------------------- */
.card.county-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
  padding: clamp(2rem, 3vw, 2.75rem);
  background: var(--surface-soft, var(--kaplon-white));
  border: 1px solid var(--card-border-soft);
  border-radius: var(--radius-2, 12px);
  box-shadow: var(--shadow-md);
  color: var(--gray-darkest);
  gap: clamp(1rem, 1.5vw, 1.75rem);
}

.card.county-card h2,
.card.county-card h3 {
  margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
  color: var(--kaplon-blue);
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
}

.card.county-card p,
.card.county-card ul,
.card.county-card li {
  margin: 0;
  line-height: 1.65;
}

.card.county-card li+li {
  margin-top: calc(var(--space-1, 0.5rem) * 0.75);
}

.card.county-card .btn {
  margin-top: auto;
}

.county-stack .county-card {
  width: 100%;
  max-width: none;
}

.county-card a {
  word-break: break-word;
}

.card.county-card h2.h2-with-icon,
.featured-town-card h2.h2-with-icon {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   3. Featured Town / Dark CTA Cards
   -------------------------------------------------------------------------- */
.featured-town-card {
  max-width: 700px;
  margin: clamp(1em, 2vw, 2em) auto 0;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-2, 12px);
  box-shadow: var(--shadow-card-sm);
}

.featured-town-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.featured-town-card h2 {
  margin: 0 0 0.75rem;
  color: var(--kaplon-red);
  font-size: 1.3rem;
  font-weight: 700;
}

.featured-town-card p {
  font-size: 1.05rem;
  line-height: 1.6;
}

.card-xl.surface-dark {
  padding: clamp(32px, 4vw, 48px);
  background: var(--kaplon-blue-dark);
  border-radius: var(--radius-2, 12px);
  box-shadow: var(--shadow-card-md);
  color: var(--kaplon-white);
  text-align: center;
}

.card-xl.surface-dark h3.text-brand-red {
  color: var(--brand-red) !important;
}

.card-xl.surface-dark h3.text-brand-primary,
.card-xl.surface-dark h2 {
  color: var(--white) !important;
}

.schools-card,
.lifestyle-card {
  max-width: var(--card-max-width, 50%);
}

.schools-card h2 {
  color: var(--kaplon-red);
}

.lifestyle-card h2 {
  color: var(--kaplon-blue);
}

/* --------------------------------------------------------------------------
   4. FAQ / Stack Helpers
   -------------------------------------------------------------------------- */
.card.faq-wrap .wp-block-rank-math-faq-block+.wp-block-rank-math-faq-block {
  margin-top: var(--space-2) !important;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2rem);
}

/* --------------------------------------------------------------------------
   5. IDX Share Box – Light & Dark Variants
   -------------------------------------------------------------------------- */
.idx-share-this,
.idx-card.idx-share-this,
.idx-card-body.idx-share-this-body,
#idx-share-this,
[class*="share-this"] {
  position: relative !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 16px 0 !important;
  padding: 20px !important;
  background: var(--white) !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--btn-radius, 12px) !important;
  box-shadow: var(--shadow-card-sm) !important;
  color: var(--kaplon-blue) !important;
}

.idx-share-this h3,
.idx-share-this h4,
.idx-share-this .idx-share-this-title,
.idx-share-this [class*="title"],
#idx-share-this h3,
#idx-share-this h4 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  color: var(--kaplon-blue) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.idx-share-this .social-icons,
.idx-share-this [class*="social"],
.idx-share-this--social-wrapper,
.idx-share-this [class*="icon"] {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-top: 16px !important;
  padding: 8px !important;
  background: transparent !important;
  gap: 8px !important;
}

.idx-share-this--social-icon,
.idx-share-this .idx-share-this--social-icon {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 6px !important;
  background-color: var(--white) !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow-card-xs) !important;
  cursor: pointer !important;
  transition:
    background-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    border-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    box-shadow var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    transform var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease) !important;
}

.idx-share-this--social-icon:hover,
.idx-share-this .idx-share-this--social-icon:hover {
  background-color: color-mix(in oklab, var(--kaplon-blue) 12%, var(--white)) !important;
  border-color: var(--kaplon-blue) !important;
  box-shadow: var(--shadow-card-sm) !important;
  transform: translateY(-1px) !important;
}

/* --------------------------------------------------------------------------
   6. Layout Guardrail – restore container padding on non-IDX pages
   -------------------------------------------------------------------------- */
body:not(.idx-page) .site-content .container,
body:not(.idx-page) .container {
  margin-right: auto;
  margin-left: auto;
  padding-right: clamp(12px, 3vw, 24px);
  padding-left: clamp(12px, 3vw, 24px);
}

@media (min-width: 1200px) {

  body:not(.idx-page) .site-content .container,
  body:not(.idx-page) .container {
    max-width: 1140px;
  }
}

/* --------------------------------------------------------------------------
   7. IDX Detail Card Toggle Fix
   -------------------------------------------------------------------------- */
.idx-details-card--body {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 !important;
  padding: var(--space-3, 16px) var(--space-4, 20px) !important;
  background: linear-gradient(135deg, var(--kaplon-blue) 0%, var(--kaplon-blue-light) 100%) !important;
  border-bottom: 2px solid var(--kaplon-red) !important;
}

.idx-details-card--body .idx-details-card--title {
  flex: 1 !important;
  margin: 0 !important;
  color: var(--white) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

.idx-details-card--body .idx-btn-toggle {
  position: relative !important;
  margin-left: 12px !important;
  padding: 6px 10px !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--white) !important;
  font-size: 18px !important;
  transition:
    color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    transform var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease) !important;
}

.idx-btn-toggle span {
  position: relative !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
}

.idx-details-card--body .idx-btn-toggle::before,
.idx-details-card--body .idx-btn-toggle::after,
.idx-details-card--body .idx-btn-toggle span::before,
.idx-details-card--body .idx-btn-toggle span::after,
.idx-btn-toggle span:before,
.idx-btn-toggle span:after {
  display: none !important;
  content: none !important;
}

.idx-details-card--body .idx-btn-toggle span::after {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 10 !important;
  display: block !important;
  color: var(--white) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  content: "−" !important;
  transform: translate(-50%, -50%) !important;
}

.idx-details-card--body .idx-btn-toggle--collapsed span::after {
  content: "+" !important;
}

.idx-details-card--body .idx-btn-toggle:hover {
  background-color: color-mix(in oklab, var(--white) 10%, transparent) !important;
}

/* --------------------------------------------------------------------------
   8. IDX Media
   -------------------------------------------------------------------------- */
.idx-property-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (prefers-color-scheme: dark) {
  html[data-kaplon-color-mode=system] .listing-card {
    background: var(--listing-card-bg-dark);
    border-color: var(--dark-border);
    box-shadow: var(--shadow-dark-sm);
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .listing-card :where(.listing-card__title) {
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .listing-card :where(.listing-card__meta) {
    color: var(--text-secondary-dark);
  }
  html[data-kaplon-color-mode=system] .card {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    box-shadow: var(--shadow-dark-md);
    color: var(--dark-text);
  }

  html[data-kaplon-color-mode=system] .card:hover {
    box-shadow: var(--shadow-dark-lg);
  }

  html[data-kaplon-color-mode=system] .card .card-inner {
    background: var(--dark-surface-base);
    border-color: var(--dark-border);
    box-shadow: var(--shadow-dark-sm);
  }
  html[data-kaplon-color-mode=system] .card:not(.idx-card):not(.IDX-panel) {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: var(--shadow-dark-md);
  }

  html[data-kaplon-color-mode=system] .card:not(.idx-card):not(.IDX-panel):hover {
    box-shadow: var(--shadow-dark-lg);
  }

  html[data-kaplon-color-mode=system] .card:not(.idx-card):not(.IDX-panel) :is(h1, h2, h3, h4) {
    color: var(--kaplon-blue-light);
  }

  html[data-kaplon-color-mode=system] .card:not(.idx-card):not(.IDX-panel) p {
    color: var(--dark-text-subtle);
  }

  html[data-kaplon-color-mode=system] .card-header {
    background: var(--dark-surface-base);
    color: var(--text-primary-dark);
    border-bottom-color: var(--dark-border);
  }

  html[data-kaplon-color-mode=system] .card-footer {
    background: var(--dark-surface-base);
    border-top-color: var(--dark-border);
  }
  html[data-kaplon-color-mode=system] .card-md {
    background: var(--gray-800);
    border-color: var(--gray-border-dark);
    box-shadow: var(--shadow-dark-card);
    color: var(--white-85);
  }

  html[data-kaplon-color-mode=system] .card-md h2,html[data-kaplon-color-mode=system] 
  .card-md h3 {
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .card-md p,html[data-kaplon-color-mode=system] 
  .card-md ul,html[data-kaplon-color-mode=system] 
  .card-md li {
    color: var(--white-85);
  }

  html[data-kaplon-color-mode=system] .card-md p b,html[data-kaplon-color-mode=system] 
  .card-md p strong {
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .card-md a:not(.btn):not(.btn-brand) {
    color: var(--kaplon-red);
  }

  html[data-kaplon-color-mode=system] .card-md a:not(.btn):not(.btn-brand):hover,html[data-kaplon-color-mode=system] 
  .card-md a:not(.btn):not(.btn-brand):focus-visible {
    color: var(--kaplon-red-light, var(--kaplon-red));
  }

  html[data-kaplon-color-mode=system] .card.county-card {
    background: var(--gray-900);
    border-color: var(--card-border-soft-dark);
    box-shadow: var(--shadow-dark-sm);
    color: var(--gray-200);
  }

  html[data-kaplon-color-mode=system] .card.county-card h2,html[data-kaplon-color-mode=system] 
  .card.county-card h3 {
    color: var(--kaplon-blue-light);
  }
  html[data-kaplon-color-mode=system] .idx-share-this,html[data-kaplon-color-mode=system] 
  .idx-card.idx-share-this,html[data-kaplon-color-mode=system] 
  .idx-card-body.idx-share-this-body,html[data-kaplon-color-mode=system] 
  #idx-share-this,html[data-kaplon-color-mode=system] 
  [class*="share-this"] {
    background: var(--gray-800) !important;
    border-color: var(--gray-600) !important;
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .idx-share-this h3,html[data-kaplon-color-mode=system] 
  .idx-share-this h4,html[data-kaplon-color-mode=system] 
  .idx-share-this .idx-share-this-title,html[data-kaplon-color-mode=system] 
  #idx-share-this h3,html[data-kaplon-color-mode=system] 
  #idx-share-this h4 {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .idx-share-this--social-icon,html[data-kaplon-color-mode=system] 
  .idx-share-this .idx-share-this--social-icon {
    background-color: var(--gray-700) !important;
    border-color: var(--gray-500) !important;
  }

  html[data-kaplon-color-mode=system] .idx-share-this--social-icon:hover,html[data-kaplon-color-mode=system] 
  .idx-share-this .idx-share-this--social-icon:hover {
    background-color: var(--gray-600) !important;
    border-color: var(--gray-400) !important;
  }
}
html[data-kaplon-color-mode=dark] .listing-card {
    background: var(--listing-card-bg-dark);
    border-color: var(--dark-border);
    box-shadow: var(--shadow-dark-sm);
    color: var(--text-primary-dark);
  }
html[data-kaplon-color-mode=dark] .listing-card :where(.listing-card__title) {
    color: var(--text-primary-dark);
  }
html[data-kaplon-color-mode=dark] .listing-card :where(.listing-card__meta) {
    color: var(--text-secondary-dark);
  }
html[data-kaplon-color-mode=dark] .card {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    box-shadow: var(--shadow-dark-md);
    color: var(--dark-text);
  }
html[data-kaplon-color-mode=dark] .card:hover {
    box-shadow: var(--shadow-dark-lg);
  }
html[data-kaplon-color-mode=dark] .card .card-inner {
    background: var(--dark-surface-base);
    border-color: var(--dark-border);
    box-shadow: var(--shadow-dark-sm);
  }
html[data-kaplon-color-mode=dark] .card:not(.idx-card):not(.IDX-panel) {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: var(--shadow-dark-md);
  }
html[data-kaplon-color-mode=dark] .card:not(.idx-card):not(.IDX-panel):hover {
    box-shadow: var(--shadow-dark-lg);
  }
html[data-kaplon-color-mode=dark] .card:not(.idx-card):not(.IDX-panel) :is(h1, h2, h3, h4) {
    color: var(--kaplon-blue-light);
  }
html[data-kaplon-color-mode=dark] .card:not(.idx-card):not(.IDX-panel) p {
    color: var(--dark-text-subtle);
  }
html[data-kaplon-color-mode=dark] .card-header {
    background: var(--dark-surface-base);
    color: var(--text-primary-dark);
    border-bottom-color: var(--dark-border);
  }
html[data-kaplon-color-mode=dark] .card-footer {
    background: var(--dark-surface-base);
    border-top-color: var(--dark-border);
  }
html[data-kaplon-color-mode=dark] .card-md {
    background: var(--gray-800);
    border-color: var(--gray-border-dark);
    box-shadow: var(--shadow-dark-card);
    color: var(--white-85);
  }
html[data-kaplon-color-mode=dark] .card-md h2,html[data-kaplon-color-mode=dark] 
  .card-md h3 {
    color: var(--white);
  }
html[data-kaplon-color-mode=dark] .card-md p,html[data-kaplon-color-mode=dark] 
  .card-md ul,html[data-kaplon-color-mode=dark] 
  .card-md li {
    color: var(--white-85);
  }
html[data-kaplon-color-mode=dark] .card-md p b,html[data-kaplon-color-mode=dark] 
  .card-md p strong {
    color: var(--white);
  }
html[data-kaplon-color-mode=dark] .card-md a:not(.btn):not(.btn-brand) {
    color: var(--kaplon-red);
  }
html[data-kaplon-color-mode=dark] .card-md a:not(.btn):not(.btn-brand):hover,html[data-kaplon-color-mode=dark] 
  .card-md a:not(.btn):not(.btn-brand):focus-visible {
    color: var(--kaplon-red-light, var(--kaplon-red));
  }
html[data-kaplon-color-mode=dark] .card.county-card {
    background: var(--gray-900);
    border-color: var(--card-border-soft-dark);
    box-shadow: var(--shadow-dark-sm);
    color: var(--gray-200);
  }
html[data-kaplon-color-mode=dark] .card.county-card h2,html[data-kaplon-color-mode=dark] 
  .card.county-card h3 {
    color: var(--kaplon-blue-light);
  }
html[data-kaplon-color-mode=dark] .idx-share-this,html[data-kaplon-color-mode=dark] 
  .idx-card.idx-share-this,html[data-kaplon-color-mode=dark] 
  .idx-card-body.idx-share-this-body,html[data-kaplon-color-mode=dark] 
  #idx-share-this,html[data-kaplon-color-mode=dark] 
  [class*="share-this"] {
    background: var(--gray-800) !important;
    border-color: var(--gray-600) !important;
    color: var(--white) !important;
  }
html[data-kaplon-color-mode=dark] .idx-share-this h3,html[data-kaplon-color-mode=dark] 
  .idx-share-this h4,html[data-kaplon-color-mode=dark] 
  .idx-share-this .idx-share-this-title,html[data-kaplon-color-mode=dark] 
  #idx-share-this h3,html[data-kaplon-color-mode=dark] 
  #idx-share-this h4 {
    color: var(--white) !important;
  }
html[data-kaplon-color-mode=dark] .idx-share-this--social-icon,html[data-kaplon-color-mode=dark] 
  .idx-share-this .idx-share-this--social-icon {
    background-color: var(--gray-700) !important;
    border-color: var(--gray-500) !important;
  }
html[data-kaplon-color-mode=dark] .idx-share-this--social-icon:hover,html[data-kaplon-color-mode=dark] 
  .idx-share-this .idx-share-this--social-icon:hover {
    background-color: var(--gray-600) !important;
    border-color: var(--gray-400) !important;
  }