/* Cartfa × VCardi — chroma bridge
   Remap plugin UI onto skin tokens so dashboard, feeds, slider,
   pro search and map modals follow the active Cartfa skin. */

body.cartfa-theme {
  --primary-color: var(--cartfa-accent, #7c5cff);
  --primary-hover: var(--cartfa-icon-hover, #7c5cff);
  --secondary-color: var(--cartfa-accent-soft, #22d3ee);
  --light-bg: var(--cartfa-page-bg, #f5f3ff);
  --white: var(--cartfa-surface, #fff);
  --border-color: var(--cartfa-border, #ddd6fe);
  --text-primary: var(--cartfa-text, #0f172a);
  --text-secondary: var(--cartfa-muted, #64748b);
  --vcardi-dyn-bar-bg: color-mix(in srgb, var(--cartfa-surface, #fff) 86%, transparent);
  --vcardi-dyn-bar-color: var(--cartfa-text, #0f172a);
  --vcardi-brand: linear-gradient(135deg, var(--cartfa-accent, #7c5cff), var(--cartfa-accent-soft, #22d3ee));
  --vcardi-brand-shadow: 0 8px 22px color-mix(in srgb, var(--cartfa-accent, #7c5cff) 28%, transparent);
}

body.cartfa-theme .vcardi-feed-container,
body.cartfa-theme .vcardi-search-container,
body.cartfa-theme .vcardi-dashboard,
body.cartfa-theme .vcardi-my-cards {
  background: transparent !important;
  min-height: 0 !important;
  color: var(--cartfa-text, #0f172a);
}

/* ========== Shared chroma buttons / chips ========== */
body.cartfa-theme .vcardi-load-more-btn,
body.cartfa-theme .vcardi-search-submit-btn,
body.cartfa-theme .vcardi-dashboard-modal-btn,
body.cartfa-theme .vcardi-map-modal-btn,
body.cartfa-theme .vcardi-location-picker-confirm,
body.cartfa-theme .vcardi-dynamic-gps-btn {
  background: var(--vcardi-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--vcardi-brand-shadow) !important;
}

body.cartfa-theme .vcardi-search-reset-btn,
body.cartfa-theme .vcardi-location-picker-cancel,
body.cartfa-theme .vcardi-dynamic-location-cancel {
  background: var(--cartfa-surface, #fff) !important;
  color: var(--cartfa-text, #0f172a) !important;
  border: 1px solid var(--cartfa-border, #ddd6fe) !important;
  border-radius: 12px !important;
}

body.cartfa-theme .vcardi-spinner,
body.cartfa-theme [style*="border-top: 4px solid #667eea"] {
  border-top-color: var(--cartfa-accent, #7c5cff) !important;
}

/* ========== Feed cards ========== */
body.cartfa-theme .vcardi-feed-title {
  color: var(--cartfa-accent, #7c5cff) !important;
}

body.cartfa-theme .vcardi-feed-card {
  background: color-mix(in srgb, var(--cartfa-surface, #fff) 92%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--cartfa-accent, #7c5cff) 14%, transparent) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(10px);
}

body.cartfa-theme .vcardi-feed-card:hover {
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.1),
    0 0 0 1px color-mix(in srgb, var(--cartfa-accent-soft, #22d3ee) 35%, transparent) !important;
}

body.cartfa-theme .vcardi-action-btn:hover,
body.cartfa-theme a.vcardi-action-btn:hover {
  border-color: var(--cartfa-accent, #7c5cff) !important;
  color: var(--cartfa-accent, #7c5cff) !important;
}

body.cartfa-theme .vcardi-like-btn.liked,
body.cartfa-theme .vcardi-feed-card .liked {
  background: linear-gradient(135deg, #f43f5e, #fb7185) !important;
}

/* Dynamic filter bar */
body.cartfa-theme .vcardi-dynamic-filters-wrap {
  border-color: color-mix(in srgb, var(--cartfa-accent, #7c5cff) 18%, transparent) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cartfa-accent, #7c5cff) 8%, transparent);
}

body.cartfa-theme .vcardi-dynamic-filters-wrap.is-fixed::after,
body.cartfa-theme .vcardi-dynamic-filters-wrap.is-sticky::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cartfa-accent-soft, #22d3ee) 18%,
    var(--cartfa-accent-gold, #e8c872) 50%,
    var(--cartfa-accent, #7c5cff) 82%,
    transparent
  );
  opacity: 0.75;
}

body.cartfa-theme .vcardi-dynamic-category-select:focus {
  border-color: var(--cartfa-accent, #7c5cff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cartfa-accent, #7c5cff) 18%, transparent) !important;
}

body.cartfa-theme .vcardi-dynamic-location-panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--cartfa-accent-soft, #22d3ee) 14%, #fff), var(--cartfa-surface, #fff) 62%, color-mix(in srgb, var(--cartfa-accent, #7c5cff) 10%, #fff)) !important;
  border-color: color-mix(in srgb, var(--cartfa-accent, #7c5cff) 22%, transparent) !important;
}

body.cartfa-theme .vcardi-dynamic-location-icon {
  background: color-mix(in srgb, var(--cartfa-accent, #7c5cff) 16%, #fff) !important;
  color: var(--cartfa-accent, #7c5cff) !important;
}

body.cartfa-theme .vcardi-dynamic-location-title {
  color: var(--cartfa-text, #0f172a) !important;
}

body.cartfa-theme .vcardi-dynamic-map-btn,
body.cartfa-theme .vcardi-dynamic-location-confirm {
  background: linear-gradient(135deg, var(--cartfa-accent, #7c5cff), var(--cartfa-accent-gold, #e8c872)) !important;
  color: #fff !important;
}

/* ========== Slider ========== */
body.cartfa-theme .vcardi-top-rated-slider-container {
  --vcardi-slider-accent: var(--cartfa-accent, #7c5cff);
  --vcardi-slider-accent-2: var(--cartfa-accent-soft, #22d3ee);
}

body.cartfa-theme .vcardi-top-rated-slider {
  background:
    radial-gradient(circle at 15% 10%, var(--cartfa-aurora-2, rgba(139, 124, 255, .18)), transparent 35%),
    radial-gradient(circle at 85% 90%, var(--cartfa-aurora-1, rgba(34, 211, 238, .18)), transparent 35%),
    var(--cartfa-page-bg, #f5f3ff) !important;
  border-color: color-mix(in srgb, var(--cartfa-accent, #7c5cff) 16%, transparent) !important;
  box-shadow:
    0 22px 55px color-mix(in srgb, var(--cartfa-accent, #7c5cff) 14%, transparent),
    0 5px 18px rgba(15, 23, 42, .06) !important;
}

body.cartfa-theme .vcardi-slider-prev,
body.cartfa-theme .vcardi-slider-next {
  background: color-mix(in srgb, var(--cartfa-surface, #fff) 86%, transparent) !important;
  color: var(--cartfa-accent, #7c5cff) !important;
  border: 1px solid color-mix(in srgb, var(--cartfa-accent, #7c5cff) 22%, transparent) !important;
  backdrop-filter: blur(10px);
}

body.cartfa-theme .vcardi-slider-progress-bar {
  background: var(--vcardi-brand) !important;
}

/* ========== Dashboard page ========== */
body.cartfa-theme .vcardi-dashboard-main-title {
  color: var(--cartfa-text, #0f172a) !important;
  border-image: linear-gradient(90deg, var(--cartfa-accent-soft, #22d3ee), var(--cartfa-accent-gold, #e8c872), var(--cartfa-accent, #7c5cff)) 1 !important;
}

body.cartfa-theme .vcardi-dashboard-item {
  background: color-mix(in srgb, var(--cartfa-surface, #fff) 90%, transparent) !important;
  color: var(--cartfa-text, #0f172a) !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--cartfa-accent, #7c5cff) 12%, transparent) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(12px);
}

body.cartfa-theme .vcardi-dashboard-item h3 {
  color: var(--cartfa-text, #0f172a) !important;
}

body.cartfa-theme .vcardi-dashboard-icon {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--cartfa-accent, #7c5cff) 28%, transparent) !important;
}

/* ========== Dashboard modal ========== */
body.cartfa-theme .vcardi-dashboard-modal-overlay {
  background:
    radial-gradient(900px 420px at 85% 0%, var(--cartfa-aurora-1, rgba(34, 211, 238, .22)), transparent 55%),
    radial-gradient(800px 480px at 10% 100%, var(--cartfa-aurora-2, rgba(139, 124, 255, .22)), transparent 50%),
    rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
}

body.cartfa-theme .vcardi-dashboard-modal-title {
  color: #fff !important;
  text-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
}

body.cartfa-theme .vcardi-dashboard-modal-item {
  background: color-mix(in srgb, var(--cartfa-surface, #fff) 88%, transparent) !important;
  color: var(--cartfa-text, #0f172a) !important;
  border: 1px solid color-mix(in srgb, var(--cartfa-accent, #7c5cff) 16%, transparent) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
  backdrop-filter: blur(16px);
}

body.cartfa-theme .vcardi-dashboard-modal-item-title {
  color: var(--cartfa-text, #0f172a) !important;
}

body.cartfa-theme .vcardi-dashboard-modal-close-btn {
  background: color-mix(in srgb, var(--cartfa-surface, #fff) 18%, transparent) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
}

body.cartfa-theme .vcardi-dashboard-modal-home-link {
  background: var(--vcardi-brand) !important;
  box-shadow: var(--vcardi-brand-shadow) !important;
  border-radius: 14px !important;
}

body.cartfa-theme .vcardi-dashboard-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* ========== Map + location modals ========== */
body.cartfa-theme .vcardi-map-modal-overlay,
body.cartfa-theme .vcardi-location-picker-modal,
body.cartfa-theme .vcardi-dynamic-location-modal {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
}

body.cartfa-theme .vcardi-map-modal-content,
body.cartfa-theme .vcardi-location-picker-modal-content,
body.cartfa-theme .vcardi-dynamic-location-modal-content {
  background: var(--cartfa-surface, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--cartfa-accent, #7c5cff) 18%, transparent) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22) !important;
  overflow: hidden;
}

body.cartfa-theme .vcardi-map-modal-header,
body.cartfa-theme .vcardi-location-picker-modal-header,
body.cartfa-theme .vcardi-dynamic-location-modal-header {
  border-bottom: 1px solid transparent !important;
  background:
    linear-gradient(var(--cartfa-surface, #fff), var(--cartfa-surface, #fff)) padding-box,
    linear-gradient(90deg, var(--cartfa-accent-soft, #22d3ee), var(--cartfa-accent-gold, #e8c872), var(--cartfa-accent, #7c5cff)) border-box;
  border-bottom: 1px solid color-mix(in srgb, var(--cartfa-accent, #7c5cff) 16%, transparent) !important;
}

body.cartfa-theme .vcardi-map-modal-header h3,
body.cartfa-theme .vcardi-location-picker-modal-header h3,
body.cartfa-theme .vcardi-dynamic-location-modal-header h3 {
  color: var(--cartfa-text, #0f172a) !important;
}

body.cartfa-theme .vcardi-map-modal-container,
body.cartfa-theme .vcardi-location-picker-map,
body.cartfa-theme .vcardi-dynamic-location-map {
  border-color: color-mix(in srgb, var(--cartfa-accent, #7c5cff) 16%, transparent) !important;
  border-radius: 12px !important;
}

/* ========== Search (shared + pro) ========== */
body.cartfa-theme .vcardi-search-form-container {
  background: color-mix(in srgb, var(--cartfa-surface, #fff) 90%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--cartfa-accent, #7c5cff) 14%, transparent) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}

body.cartfa-theme .vcardi-search-form-container::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cartfa-accent-soft, #22d3ee), var(--cartfa-accent-gold, #e8c872), var(--cartfa-accent, #7c5cff));
}

body.cartfa-theme .vcardi-search-field-group label {
  color: var(--cartfa-text, #0f172a) !important;
}

body.cartfa-theme .vcardi-search-field-group input[type="text"],
body.cartfa-theme .vcardi-search-field-group select {
  border: 1px solid var(--cartfa-border, #ddd6fe) !important;
  border-radius: 12px !important;
  background: var(--cartfa-surface, #fff) !important;
  color: var(--cartfa-text, #0f172a) !important;
}

body.cartfa-theme .vcardi-search-field-group input[type="text"]:focus,
body.cartfa-theme .vcardi-search-field-group select:focus {
  border-color: var(--cartfa-accent, #7c5cff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cartfa-accent, #7c5cff) 16%, transparent) !important;
}

body.cartfa-theme .vcardi-location-picker-btn,
body.cartfa-theme .vcardi-location-gps-btn {
  border-color: color-mix(in srgb, var(--cartfa-accent, #7c5cff) 35%, transparent) !important;
  color: var(--cartfa-accent, #7c5cff) !important;
  background: color-mix(in srgb, var(--cartfa-accent, #7c5cff) 8%, #fff) !important;
  border-radius: 999px !important;
}

body.cartfa-theme .vcardi-location-picker-btn:hover,
body.cartfa-theme .vcardi-location-gps-btn:hover {
  background: var(--vcardi-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.cartfa-theme .vcardi-search-hint,
body.cartfa-theme .vcardi-location-info {
  color: var(--cartfa-muted, #64748b) !important;
  background: color-mix(in srgb, var(--cartfa-accent, #7c5cff) 6%, #fff) !important;
}

/* Pro search layout */
body.cartfa-theme .vcardi-search-pro {
  max-width: min(100% - 24px, var(--cartfa-max, 1200px));
  padding: 28px 0 48px !important;
}

body.cartfa-theme .vcardi-search-hero {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 720px;
}

body.cartfa-theme .vcardi-search-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  margin: 0 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cartfa-accent, #7c5cff) 18%, #fff);
  background: color-mix(in srgb, var(--cartfa-surface, #fff) 90%, transparent);
  color: var(--cartfa-accent, #7c5cff);
  font-size: 11px;
  font-weight: 700;
}

body.cartfa-theme .vcardi-search-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cartfa-accent-soft, #22d3ee);
}

body.cartfa-theme .vcardi-search-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cartfa-text, #0f172a);
}

body.cartfa-theme .vcardi-search-hero p {
  margin: 0;
  color: var(--cartfa-muted, #64748b);
  font-size: 15px;
  line-height: 1.9;
}

body.cartfa-theme .vcardi-search-pro .vcardi-search-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}

body.cartfa-theme .vcardi-search-pro .vcardi-search-field-group:first-child,
body.cartfa-theme .vcardi-search-pro .vcardi-search-field-group.vcardi-search-q,
body.cartfa-theme .vcardi-search-pro .vcardi-search-actions,
body.cartfa-theme .vcardi-search-pro .vcardi-search-field-group:has(#search-term) {
  grid-column: 1 / -1;
}

body.cartfa-theme .vcardi-search-pro #search-term {
  min-height: 54px;
  font-size: 16px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
}

body.cartfa-theme .vcardi-search-pro .vcardi-search-actions {
  margin-top: 4px;
  display: flex;
  gap: 12px;
}

body.cartfa-theme .vcardi-search-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

body.cartfa-theme .vcardi-search-scopes span {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cartfa-accent, #7c5cff);
  background: color-mix(in srgb, var(--cartfa-accent, #7c5cff) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--cartfa-accent, #7c5cff) 16%, transparent);
}

body.cartfa-theme .vcardi-search-filters-label {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--cartfa-muted, #64748b);
}

body.cartfa-theme .vcardi-search-pro .vcardi-search-loc {
  grid-column: 1 / -1;
}

body.cartfa-theme .vcardi-search-pro .vcardi-search-submit-btn {
  flex: 1;
  min-height: 50px;
  font-size: 16px !important;
}

body.cartfa-theme .vcardi-search-pro .vcardi-search-reset-btn {
  min-height: 50px;
}

body.cartfa-theme .vcardi-search-empty,
body.cartfa-theme .vcardi-search-loading {
  text-align: center;
  padding: 36px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--cartfa-surface, #fff) 88%, transparent);
  border: 1px dashed color-mix(in srgb, var(--cartfa-accent, #7c5cff) 22%, transparent);
  color: var(--cartfa-muted, #64748b);
}

body.cartfa-theme .vcardi-search-results-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 18px;
}

body.cartfa-theme .vcardi-search-results-count {
  color: var(--cartfa-accent, #7c5cff) !important;
  font-weight: 700;
}

body.cartfa-theme .vcardi-search-pagination button {
  border: 1px solid var(--cartfa-border, #ddd6fe) !important;
  background: var(--cartfa-surface, #fff) !important;
  color: var(--cartfa-text, #0f172a) !important;
  border-radius: 10px !important;
}

body.cartfa-theme .vcardi-search-pagination button:hover:not(:disabled),
body.cartfa-theme .vcardi-search-pagination button.active {
  background: var(--vcardi-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.cartfa-theme .vcardi-location-clear-btn {
  border-color: #fb7185 !important;
  color: #e11d48 !important;
  background: #fff !important;
  border-radius: 999px !important;
}

body.cartfa-theme #vcardi-location-clear-btn[style*="display: none"] {
  display: none !important;
}

body.cartfa-theme .vcardi-dashboard-main-title {
  border-bottom-color: var(--cartfa-accent, #7c5cff) !important;
}

body.cartfa-theme .vcardi-map-modal-close,
body.cartfa-theme .vcardi-location-picker-close {
  color: var(--cartfa-muted, #64748b) !important;
}

body.cartfa-theme .vcardi-map-modal-close:hover,
body.cartfa-theme .vcardi-location-picker-close:hover {
  color: var(--cartfa-accent, #7c5cff) !important;
}

body.cartfa-theme .vcardi-map-modal-content button:not(.vcardi-map-modal-close) {
  background: var(--vcardi-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
}

body.cartfa-theme .vcardi-dynamic-tool {
  border-color: color-mix(in srgb, var(--cartfa-accent, #7c5cff) 14%, transparent);
  background: color-mix(in srgb, var(--cartfa-surface, #fff) 82%, transparent);
}

body.cartfa-theme .vcardi-map-stat-value,
body.cartfa-theme .vcardi-map-avatar-fallback {
  color: var(--cartfa-accent, #7c5cff) !important;
}

body.cartfa-theme .vcardi-map-avatar-frame {
  background: var(--vcardi-brand) !important;
  box-shadow: var(--vcardi-brand-shadow) !important;
}

body.cartfa-theme .vcardi-map-btn:not(.secondary):not(.danger):not(.outline) {
  background: var(--vcardi-brand) !important;
}

body.cartfa-theme .vcardi-map-btn.outline {
  border-color: var(--cartfa-accent, #7c5cff) !important;
  color: var(--cartfa-accent, #7c5cff) !important;
}

body.cartfa-theme .vcardi-map-btn.outline:hover {
  background: var(--vcardi-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.cartfa-theme .vcardi-map-popup-link {
  background: var(--vcardi-brand) !important;
}

body.cartfa-theme .vcardi-search-results-header h2 {
  color: var(--cartfa-text, #0f172a) !important;
}

body.cartfa-scheme-dark .vcardi-feed-card,
body.cartfa-scheme-dark .vcardi-dashboard-item,
body.cartfa-scheme-dark .vcardi-search-form-container,
body.cartfa-scheme-dark .vcardi-dashboard-modal-item,
body.cartfa-scheme-dark .vcardi-map-modal-content {
  background: color-mix(in srgb, var(--cartfa-surface, #121826) 92%, transparent) !important;
  color: var(--cartfa-text, #eef2ff) !important;
}

@media (max-width: 720px) {
  body.cartfa-theme .vcardi-search-pro .vcardi-search-form {
    grid-template-columns: 1fr;
  }
}