/*
Description:  Base Themeing für das BVfKFahrzeugbestand-Plugin
Version:      1.0
Author:       Elmar Elberskirch
Author URI:   https://www.bvfk.de
*/

/* ==========================================================================
   Base Themeing für das BVfKFahrzeugbestand-Plugin
   --bvfk-bg-color, --bvfk-fg-color, --bvfk-accent-color, --bvfk-border-radius, --bvfk-font-size
   ========================================================================== */

.bvfkfb {
  /* -------- Bootstrap Theme Tokens (scoped) -------- */

  /* Background & Text */
  --bs-body-bg: #0c0c0c;
  --bs-body-color: #fff;

  /* Primary / Links */
  --bs-primary: #f71616;
  --bs-link-color: #f71616;
  --bs-link-hover-color: color-mix(in srgb, #f71616, #000 15%);

  /* Borders / Radius */
  --bs-border-radius: 0px;
  --bs-border-radius-sm: calc(0px * 0.75);
  --bs-border-radius-lg: calc(0px * 1.25);

  /* Typo */
  --bs-font-size-base: 16px;

  --bs-card-color: #fff!important;
  --bs-body-color: #fff;

  --bs-body-color-rgb: rgb(255, 255, 255);
  --bs-body-color-rgb: rgb(from #fff r g b);

  /* Optional: Bootstrap uses these for muted-like tokens in components */
  --bs-secondary-color: color-mix(in srgb, #fff, transparent 25%);
  --bs-tertiary-color: color-mix(in srgb, #fff, transparent 50%);
  --bs-emphasis-color: #fff;

  /* Border colo r: aus fg ableiten (fg = UI-Foreground, nicht zwingend Text) */
  --bs-border-color: color-mix(in srgb, #fff, transparent 82%);

  --bs-sticky-top: 112px;
  --sticky-gap: 16px;
  /* Hexwert direkt eintragen, z.B. #052c65 (dunkelblau) */
  /* Icon-Variable entfernen, da wir mask-image nutzen */
    
}

.bvfkfb .accent-color {
  color: #fff!important;
}

/* Loader (falls das Element so heißt) */
.bvfkfb-ajax-loader-bild{
  border-radius: .5em;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  pointer-events: none; 
  background-color: color-mix(in srgb, #0c0c0c, transparent 15%);
}

/* -------- Base element styles within scope -------- */

.bvfkfb {
  background-color: transparent; /* Wrapper selbst bleibt transparent */
  color: #fff;
  font-size: 16px;
}

.bvfkfb p.mc-tiny {
  margin-bottom:0.1rem
}

.bvfkfb a {
  color: #f71616;
}

.bvfkfb a:hover {
  color: color-mix(in srgb, #f71616, #000 15%);
}

/* Headings immer gut lesbar */
.bvfkfb h1,
.bvfkfb h2,
.bvfkfb h3,
.bvfkfb h4,
.bvfkfb h5,
.bvfkfb h6 {
  color: #fff;
}

/* Utility */
.bvfkfb .text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bvfkfb .sticky-top {
  top: 112px;
  max-height: none;
  overflow-y: visible;
}

.bvfkfb .bvfk-sticky-filter {
  position: sticky;
  top: 112px;
  z-index: 1020;
}

.bvfkfb * {
  scroll-margin-top: 112px;
}

.bvfkfb .dropdown-menu {
  margin-top: calc(112px * 0.15);
}

.bvfkfb .bvfk-fixed-bar {
  position: fixed;
  top: 112px;
  left: 0;
  right: 0;
  z-index: 1050;
}

body.admin-bar .bvfkfb .bvfk-fixed-bar, body.admin-bar .bvfkfb .sticky-top {
  top: calc(112px + 32px);
}

@media (max-width: 980px){

  .bvfkfb .sticky-top,
  .bvfkfb .bvfk-sticky-filter, body.admin-bar .bvfkfb .bvfk-fixed-bar, body.admin-bar .bvfkfb .sticky-top{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  .mobile-col-reverse {
    flex-direction: column-reverse;
  }

}


/* -------- Buttons (Primary / Outline) -------- */

.bvfkfb .btn-primary {
  --bs-btn-bg: #f71616;
  --bs-btn-border-color: #f71616;
  --bs-btn-color: #fff;

  --bs-btn-hover-bg: color-mix(in srgb, #f71616, #000 12%);
  --bs-btn-hover-border-color: color-mix(in srgb, #f71616, #000 12%);
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: color-mix(in srgb, #f71616, #000 18%);
  --bs-btn-active-border-color: color-mix(in srgb, #f71616, #000 18%);
  --bs-btn-active-color: #fff;
}

.bvfkfb .btn-outline-primary {
  --bs-btn-color: #f71616;
  --bs-btn-border-color: #f71616;

  --bs-btn-hover-bg: #f71616;
  --bs-btn-hover-border-color: #f71616;
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: color-mix(in srgb, #f71616, #000 18%);
  --bs-btn-active-border-color: color-mix(in srgb, #f71616, #000 18%);
  --bs-btn-active-color: #fff;
} 

.btn-outline-primary.btn-whatsapp {
  border-color: #25d366;
  color:#25d366;
}

.btn-outline-primary.btn-whatsapp:hover {
  border-color: #25d366;
  background-color:#25d366;
  color:#fff;
}

/* Disabled state (theme-aware) */
.bvfkfb {
  --bvfk-disabled-opacity: .72;
  --bvfk-disabled-bg: color-mix(in srgb, #0c0c0c, #fff 8%);
  --bvfk-disabled-border: color-mix(in srgb, #fff, transparent 70%);
  --bvfk-disabled-text: color-mix(in srgb, #fff, transparent 35%);
  --bvfk-btn-disabled-color: color-mix(in srgb, #fff, transparent 35%);
  --bvfk-btn-disabled-bg: vcolor-mix(in srgb, #f71616, transparent 35%);
  --bvfk-btn-disabled-border-color: color-mix(in srgb, #f71616, transparent 35%);
  --bvfk-btn-outlined-disabled-color: color-mix(in srgb, #f71616, transparent 35%);
}

.bvfkfb .btn:disabled,
.bvfkfb .btn.disabled,
.bvfkfb button:disabled,
.bvfkfb input:disabled,
.bvfkfb select:disabled,
.bvfkfb textarea:disabled,
.bvfkfb .form-control:disabled,
.bvfkfb .form-select:disabled {
  opacity: var(--bvfk-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none !important;
}

.bvfkfb .btn-primary:disabled,
.bvfkfb .btn-primary.disabled {
  --bs-btn-disabled-color: var(--bvfk-disabled-text);
  --bs-btn-disabled-bg: var(--bvfk-disabled-bg);
  --bs-btn-disabled-border-color: var(--bvfk-disabled-border);
}

.bvfkfb .btn-outline-primary:disabled,
.bvfkfb .btn-outline-primary.disabled {
  --bs-btn-disabled-color: var(--bvfk-btn-outlined-disabled-color);
  --bs-btn-disabled-border-color: var(--bvfk-btn-disabled-border-color);
}

/* Merkzettel: Vergleichs-Button immer volle Breite, auch waehrend Loading/Disabled */
.bvfkfb .js-compare-toggle {
  display: block;
  width: 100% !important;
  min-width: 100%;
}

/* Merkzettel: Counter-Pill am "Fahrzeuge vergleichen"-Button */
.bvfkfb #vrglliste-count-badge {
  background-color: #f71616 !important;
  color: #fff !important;
}

.bvfkfb input:disabled,
.bvfkfb select:disabled,
.bvfkfb textarea:disabled,
.bvfkfb .form-control:disabled,
.bvfkfb .form-select:disabled {
  color: var(--bvfk-disabled-text);
  border-color: var(--bvfk-disabled-border);
  background-color: var(--bvfk-disabled-bg);
}

/* Falls du eigene Accent-Textklasse nutzt */
.bvfkfb .bvfk-text-accent,
.bvfkfb .text-primary {
  color: #f71616 !important;
}

.bvfkfb .bvfk-catbtn, .bvfkfb .bvfk-typebtn {
  border-radius: 0px;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  padding: 0 .75rem;

  border: 1px solid color-mix(in srgb, #f71616, #0c0c0c 85%);
  background: color-mix(in srgb, #fff, #0c0c0c 85%);
  color: #fff;

  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}

.bvfkfb .bvfk-catbtn:hover, .bvfkfb .bvfk-typebtn:hover {
  background: #f71616;
  color: #fff;
}

.bvfkfb .bvfk-catbtn.is-active, .bvfkfb .bvfk-typebtn.is-active {
  background: #f71616;
  border-color: #f71616;
  color: #fff;
}

/* Active */
.bvfkfb .bvfk-typebtn.is-active{
  background: #f71616;
  border-color: #f71616;
  color: #fff;
}


/* =========================================================
   Select Styling
   ========================================================= */
.bvfkfb select {
  appearance: none;
  border: 0;
  outline: 0;
  font: inherit;

  width: 200px;
  padding: 0.5rem 4rem 0.5rem 1rem;

  background:
    url(../images/Caret_down_font_awesome_whitevariation.svg)
      no-repeat right .8em center / 1.4em,
    linear-gradient(
      to left,
      color-mix(in srgb, #f71616, transparent 0%) 3em,
      color-mix(in srgb, #fff, transparent 85%) 3em
    );

  color: #fff;
  border-radius: 0px;
  cursor: pointer;
}

.bvfkfb select:hover {
  background:
    url(../images/Caret_down_font_awesome_whitevariation.svg)
      no-repeat right .8em center / 1.4em,
    linear-gradient(
      to left,
      color-mix(in srgb, #f71616, transparent 0%) 3em,
      color-mix(in srgb, #f71616, transparent 0%) 3em
    );

  color: #fff;
}


.bvfkfb select.form-select:hover {
  color: #fff;
}

/* Option-Farben: simpel & kompatibel */
.bvfkfb select option{
  color: #fff;
  background: #0c0c0c;
}
/* Sortier-Selects clean + flach */
.bvfkfb select#sort_feld_opt,
.bvfkfb select#sort_art_opt{
  border-radius: 0px !important;
  box-shadow: none !important;
  background-image: none !important;
  border: 1px solid color-mix(in srgb, #fff, transparent 85%);
  padding-right: 2rem;
}

.bvfkfb select#sort_feld_opt:focus,
.bvfkfb select#sort_art_opt:focus{
  outline: none !important;
  box-shadow: none !important;
  border-color: #f71616;
}

/* -------- Forms (Selects/Inputs) -------- */

.bvfkfb .form-select,
.bvfkfb select,
.bvfkfb .form-control,
.bvfkfb input[type="text"],
.bvfkfb input[type="search"],
.bvfkfb input[type="email"],
.bvfkfb input[type="number"],
.bvfkfb textarea {
  color: #fff;
  border-color: color-mix(in srgb, #fff, transparent 85%);
  border-radius: 0px;
}

/* Placeholder */
.bvfkfb .form-control::placeholder,
.bvfkfb input::placeholder,
.bvfkfb textarea::placeholder {
  color: color-mix(in srgb, #fff, transparent 55%);
}

.bvfkfb .form-select:focus,
.bvfkfb .form-control:focus,
.bvfkfb select:focus,
.bvfkfb input:focus,
.bvfkfb textarea:focus {
  border-color: color-mix(in srgb, #f71616, #000 10%);
  box-shadow: var(--bs-focus-ring-shadow);
  outline: 0;
}

.bvfkfb .select-wrap select{
  width: 100%;
}
/* Selects im Suchbereich */
.bvfkfb .bvfkfb-search .form-select {
  border-radius: 0px;
}

/* ===================================== */
/* Filter-Chips (Checkbox Styling)       */
/* ===================================== */

.bvfkfb-filter-fieldset ul.cb-liste {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Checkbox verstecken */
.bvfkfb-filter-fieldset ul.cb-liste input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


/* WLTP Block in Cards */
.bvfkfb .bvfk-wltp{
  margin-top: .25rem;
}

/* Quadratisches Effizienz-Badge */
.bvfkfb .bvfk-eff-square{
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem; /* gern auch 0px wenn du willst */
  color: #fff;
  background: #9e9e9e;
  flex: 0 0 auto;
}

.bvfkfb .bvfk-eff-letter{
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}

.bvfkfb .bvfk-eff-square i{
  font-size: 1.1rem;
}

/* Label wird zum Button */
.bvfkfb-filter-fieldset ul.cb-liste label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .45rem .9rem;
  border-radius: 0px;

  font-size: .9rem;
  font-weight: 500;

  border: 1px solid color-mix(in srgb, #fff, transparent 85%);
  background: #f71616;

  cursor: pointer;
  transition: all .15s ease;
}

.bvfkfb .bvfkfb-filter-fieldset ul.cb-liste input[type="checkbox"] + label {
	background-color: color-mix(in srgb, #fff, transparent 85%) !important;
}

/* Hover */
.bvfkfb-filter-fieldset ul.cb-liste label:hover {
  background: color-mix(in srgb, #f71616, #fff 15%);
}


/* ACTIVE STATE */
.bvfkfb-filter-fieldset ul.cb-liste input:checked + label {
  background: #f71616;
  border-color: #f71616;
  color: #fff;
}

/* kleiner Farbpunkte-Kreis */
.bvfkfb-filter-fieldset ul.cb-liste label::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: .4rem;
  background: currentColor;
}

.bvfkfb-filter-fieldset ul.cb-liste label {
  flex: 1 1 calc(33.333% - .5rem);
  text-align: center;
}



/* individuelle Farben */
.la-cb-blau::before    { background: #0d6efd!important; }
.la-cb-rot::before     { background: #dc3545!important; }
.la-cb-gruen::before   { background: #198754!important; }
.la-cb-grau::before    { background: #6c757d!important; }
.la-cb-schwarz::before { background: #000!important; }
.la-cb-silber::before  { background: #adb5bd!important; }
.la-cb-gold::before    { background: gold!important; }
.la-cb-weiss::before   { background: #fff!important; border:1px solid #ccc; }
.la-cb-braun::before   { background: #795548!important; }
.la-cb-orange::before  { background: #fd7e14!important; }
.la-cb-gelb::before    { background: #ffc107!important; }
.la-cb-lila::before    { background: #6f42c1!important; }
.la-cb-pink::before    { background: #d63384!important; }
.la-cb-tuerkis::before { background: #20c997!important; }

/* -------- Cards / Borders -------- */

.bvfkfb .card {
  color: #fff;
  border-color: color-mix(in srgb, #fff, transparent 82%);
  border-radius: 0px;
}

/* Accordion active header */
.bvfkfb .accordion-button:not(.collapsed) {
  background-color: #f71616;
  color: #fff;
}

.bvfkfb .accordion-button::after {
  mask-image: url('../images/accordion-arrow.svg');
  -webkit-mask-image: url('../images/accordion-arrow.svg');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background-color: #fff;
  content: "";
}

.bvfkfb .accordion-button:not(.collapsed)::after {
  mask-image: url('../images/accordion-arrow.svg');
  -webkit-mask-image: url('../images/accordion-arrow.svg');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background-color: #fff!important;
  content: "";
}




/* Optional: Fokus-Ring in Accent (Bootstrap nutzt box-shadow, daher gezielt) */
.bvfkfb {
  --bs-focus-ring-color: color-mix(in srgb, #f71616, transparent 75%);
  --bs-focus-ring-width: 0.2rem;
  --bs-focus-ring-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);

  /* Bootstrap Focus/Box-Shadow Variablen auf Accent-Farbe setzen */
  --bs-btn-focus-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%)!important;
  --bs-form-control-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%)!important;
  --bs-form-select-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%)!important;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%)!important;
  --bs-dropdown-link-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%)!important;
  --bs-nav-link-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%)!important;
  --bs-input-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%)!important;
}

/* Bootstrap Focus/Box-Shadow Variablen als Fallback direkt überschreiben */
.bvfkfb .btn:focus, .bvfkfb .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%) !important;
}
.bvfkfb .form-control:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%) !important;
}
.bvfkfb .form-select:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%) !important;
}
.bvfkfb .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%) !important;
}
.bvfkfb .dropdown-item:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%) !important;
}
.bvfkfb .nav-link:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%) !important;
}
.bvfkfb input:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, #f71616, transparent 50%) !important;
}



/* -------- “Active” State (z.B. Toggle-Buttons in Suche) -------- */

.bvfkfb .bvfkfb-search .is-active {
  background: #f71616 !important;
  border-color: #f71616 !important;
  color: #fff !important;
}

/* Card Look im Suchbereich */
.bvfkfb .bvfkfb-search {
  border-radius: 0px;
  border-color: color-mix(in srgb, #fff, transparent 85%);
}

/* Counter im Button */
.bvfkfb .bvfk-counter {
  font-weight: 700;
}

.bvfkfb .bvfkfb-badge{
  border: 1px solid color-mix(in srgb, #f71616, #0c0c0c 85%);
  background: color-mix(in srgb, #f71616, #0c0c0c 85%);
  color: #fff;
}

.bvfkfb .rounded-pill.bvfkfb-badge{
  border: 1px solid color-mix(in srgb, #f71616, #0c0c0c 85%);
  background: color-mix(in srgb, #f71616, #0c0c0c 85%);
  color: #fff;
}

.bvfkfb-bg{
  background-color: #0c0c0c;
}