/* ============================================================
   Optain Store Finder v4 – 100% CD-konformes CSS
   Alle Werte direkt aus DevTools optain.ady.at exportiert

   DESIGN TOKENS:
   ─────────────────────────────────────────────────────────
   Text-Font:        Rubik, sans-serif
   Button-Font:      Manrope, sans-serif   ← !
   Text-Color:       #040136
   Heading-Color:    #192a3d
   Primary-Blue:     #0086DD              ← Aktionsfarbe
   Palette-1:        #2872fa              ← Theme-Blau
   Palette-2:        #1559ed
   Palette-3:        #3A4F66
   Palette-5:        #e1e8ed              ← Border
   Palette-6:        #f2f5f7              ← BG Light
   Button-Radius:    50px / 100px  PILL   ← !
   Button-Weight:    200                  ← !
   Button-Height:    ~56px (elementor)
   Input-Radius:     27px                 ← RUND
   Input-Height:     45px
   Input-Border:     2px solid #e1e8ed
   Transition:       0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955)
============================================================ */

#osf-root, #osf-root * { box-sizing: border-box; }

#osf-root {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #040136;
}

/* ── SUCHLEISTE ─────────────────────────────────────────── */
#osf-root .osf-search-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px; margin-bottom: 16px;
}

#osf-root .osf-search-field-wrap {
  position: relative; flex: 1 1 240px;
}
#osf-root .osf-search-pin {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: none; stroke: #3A4F66;
  stroke-width: 2; stroke-linecap: round; pointer-events: none;
}

/* Input – exakt wie Kontaktformular: radius 10px, border 1.6px rgba, Manrope */
#osf-root .osf-search-field {
  width: 100% !important;
  height: 45px !important;
  padding: 0 18px 0 44px !important;
  border: 1.6px solid rgba(227, 227, 227, 0.8) !important;
  border-radius: 10px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgb(31, 33, 36) !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
              box-shadow   0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#osf-root .osf-search-field:focus {
  border-color: #2872fa !important;
  box-shadow: 0 0 0 3px rgba(40,114,250,.12) !important;
}
#osf-root .osf-search-field::placeholder { color: #3A4F66; opacity: 0.6; }

#osf-root .osf-or {
  font-family: 'Rubik', sans-serif;
  font-size: 15px; color: #3A4F66; flex-shrink: 0;
}

/* ── BUTTONS – Basis ────────────────────────────────────────
   Quelle: .ct-button & .elementor-button DevTools
   Font: Manrope  |  Weight: 200  |  Radius: 50px (Pill)
   Transition: 0.12s cubic-bezier(...)
─────────────────────────────────────────────────────────── */
#osf-root .osf-btn,
#osf-root a.osf-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  border-radius: 50px !important;          /* Pill – DevTools bestätigt */
  font-family: 'Manrope', sans-serif !important;  /* Manrope! nicht Rubik */
  font-size: 15px !important;
  font-weight: 200 !important;             /* 200 – DevTools bestätigt */
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
              color       0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
              border-color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955) !important;
}
#osf-root .osf-btn svg,
#osf-root a.osf-btn svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Primär – ausgefüllt blau #0086DD (wie .ct-button "Scan Buchen") */
#osf-root .osf-btn--blue,
#osf-root a.osf-btn--blue {
  background: #0086DD !important;
  color: #ffffff !important;
  border: none !important;
}
#osf-root .osf-btn--blue:hover,
#osf-root a.osf-btn--blue:hover {
  background: #006bb5 !important;
  color: #ffffff !important;
}

/* Profil-Button – Cards View: Outline Pill */
#osf-root .osf-row__actions .osf-btn--portrait,
#osf-root .osf-row__actions a.osf-btn--portrait {
  background: transparent !important;
  color: #0086DD !important;
  border: 1.6px solid #0086DD !important;
  border-radius: 50px !important;
  padding: 11px 24px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 200 !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955) !important;
}
#osf-root .osf-row__actions .osf-btn--portrait:hover,
#osf-root .osf-row__actions a.osf-btn--portrait:hover {
  background: #0086DD !important;
  color: #ffffff !important;
}

/* ── TOOLBAR ────────────────────────────────────────────── */
#osf-root .osf-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
#osf-root .osf-toolbar__left {
  display: flex; flex-direction: column; gap: 10px;
}
#osf-root .osf-info {
  font-family: 'Rubik', sans-serif;
  font-size: 14px; color: #3A4F66; margin: 0;
}
#osf-root .osf-info strong { color: #040136; font-weight: 600; }

/* Sort-Buttons */
#osf-root .osf-sort-btns {
  display: none; /* wird per JS eingeblendet nach Suche */
  align-items: center; gap: 8px; flex-wrap: wrap;
}
#osf-root .osf-sort-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  border: 1.6px solid #e1e8ed !important;
  border-radius: 50px !important;
  background: #fff !important;
  color: #3A4F66 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955) !important;
  white-space: nowrap !important;
}
#osf-root .osf-sort-btn:hover {
  border-color: #0086DD !important;
  color: #0086DD !important;
}
#osf-root .osf-sort-btn--active {
  background: #0086DD !important;
  border-color: #0086DD !important;
  color: #fff !important;
}

/* View-Toggle */
#osf-root .osf-view-toggle { display: flex; gap: 4px; }
#osf-root .osf-view-btn {
  width: 38px !important; height: 38px !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1.5px solid #e1e8ed !important;
  border-radius: 8px !important;
  cursor: pointer; padding: 0 !important;
  transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#osf-root .osf-view-btn svg {
  width: 16px; height: 16px; fill: none;
  stroke: #3A4F66; stroke-width: 2; stroke-linecap: round;
}
#osf-root .osf-view-btn--active {
  background: #0086DD !important;
  border-color: #0086DD !important;
}
#osf-root .osf-view-btn--active svg { stroke: #fff; }
#osf-root .osf-view-btn:not(.osf-view-btn--active):hover {
  border-color: #0086DD !important;
}
#osf-root .osf-view-btn:not(.osf-view-btn--active):hover svg {
  stroke: #0086DD;
}

/* ── LOADING / LEER ─────────────────────────────────────── */
#osf-root .osf-loading,
#osf-root .osf-empty {
  padding: 48px 0; font-size: 15px; color: #3A4F66;
  font-family: 'Rubik', sans-serif;
  display: flex; align-items: center; gap: 10px;
}
#osf-root .osf-spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 2.5px solid #e1e8ed; border-top-color: #0086DD;
  border-radius: 50%;
  animation: osf-spin .65s linear infinite; flex-shrink: 0;
}
@keyframes osf-spin { to { transform: rotate(360deg); } }

/* ── ZEILEN-LISTE ───────────────────────────────────────── */
@keyframes osf-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── KACHEL (Cards View) ─────────────────────────────────── */
#osf-root .osf-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: none;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 20px;
  background: rgb(247, 245, 241);   /* exakt wie auf der Seite */
  animation: osf-in .35s ease both;
  transition: box-shadow 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
              transform  0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#osf-root .osf-row:hover {
  box-shadow: rgba(41, 51, 61, 0.12) 0px 8px 28px 0px;
  transform: translateY(-2px);
}

/* Bild links – 50% */
#osf-root .osf-row__img-wrap {
  flex: 0 0 50% !important; max-width: 50% !important; overflow: hidden;
  border-radius: 15px 0 0 15px;
}
#osf-root .osf-row__img {
  width: 100%; height: 100%; min-height: 280px;
  background-color: rgb(247, 245, 241);
  background-size: cover; background-position: center;
  transition: transform 0.4s ease;
}
#osf-root .osf-row:hover .osf-row__img { transform: scale(1.04); }

#osf-root .osf-row__img--empty {
  background: linear-gradient(135deg, #192a3d 0%, #040136 100%) !important;
  display: flex; align-items: center; justify-content: center;
}
#osf-root .osf-row__img--empty svg {
  width: 60px; height: 60px;
  stroke: rgba(255,255,255,.2); fill: none;
  stroke-width: 1; stroke-linecap: round;
}

/* Infos rechts – 50%, vertikal zentriert */
#osf-root .osf-row__body {
  flex: 0 0 50% !important; max-width: 50% !important;
  padding: 35px 40px;
  display: flex; flex-direction: column;
  justify-content: center !important;
}

/* Distanz */
#osf-root .osf-row__dist {
  font-family: 'Rubik', sans-serif;
  font-size: 14px; color: #3A4F66;
  font-weight: 400; margin: 0 0 4px 0;
}

/* Name – h2-Stil: Rubik 700, #192a3d, 30px */
#osf-root .osf-row__name {
  font-family: 'Rubik', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #192a3d !important;
  line-height: 1.3 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  letter-spacing: normal !important;
}

/* Adresse – Links standard dunkel, hover blau */
#osf-root .osf-row__addr { margin-bottom: 6px; line-height: 1.8; }
#osf-root .osf-row__addr a {
  display: block; font-size: 15px;
  font-family: 'Rubik', sans-serif;
  color: #192a3d;
  text-decoration: none;
  transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#osf-root .osf-row__addr a:hover {
  color: #0086DD;
}

/* Status */
#osf-root .osf-row__status {
  font-family: 'Rubik', sans-serif;
  font-size: 15px; font-weight: 600;
  margin: 4px 0 10px 0; padding: 0;
}
#osf-root .osf-row__status--open   { color: #1a7a45; }
#osf-root .osf-row__status--closed { color: #c0392b; }

/* Kontakt */
#osf-root .osf-row__contacts {
  display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 0;
}
#osf-root .osf-row__contacts a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px; color: #3A4F66;
  text-decoration: none;
  transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#osf-root .osf-row__contacts a:hover { color: #0086DD; }
#osf-root .osf-row__contacts a .osf-icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 100%;
  background: rgba(218, 222, 228, 0.35);
  flex-shrink: 0;
}
#osf-root .osf-row__contacts svg {
  width: 12px; height: 12px; flex-shrink: 0;
  fill: none; stroke: #3A4F66;
  stroke-width: 2; stroke-linecap: round;
}

/* Öffnungszeiten */
#osf-root .osf-row__hours {
  display: flex; align-items: flex-start; gap: 6px;
  font-family: 'Rubik', sans-serif;
  font-size: 13px; color: #3A4F66;
  margin: 8px 0 20px 0;
  white-space: normal; word-break: break-word; line-height: 1.5;
}
#osf-root .osf-row__hours svg {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px;
  fill: none; stroke: #3A4F66; stroke-width: 2; stroke-linecap: round;
}

/* Buttons in der Card (Cards-View) */
#osf-root .osf-row__actions {
  margin-top: auto;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ── KOMPAKTE LISTENANSICHT ──────────────────────────────── */
/* ══════════════════════════════════════════════════════════
   KOMPAKTE LISTENANSICHT – Redesign
   Layout: [Distanz] [Info: Name, Adresse, Kontakt, Zeiten] [Button rechts]
   ══════════════════════════════════════════════════════════ */
#osf-root.osf-view--list .osf-row {
  flex-direction: row !important;
  align-items: center !important;
  border: none !important;
  border-radius: 15px !important;
  margin-bottom: 10px !important;
  padding: 24px 32px !important;
  background: rgb(247, 245, 241) !important;
  box-shadow: none !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}
#osf-root.osf-view--list .osf-row:hover {
  background: rgb(240, 237, 232) !important;
  box-shadow: rgba(41, 51, 61, 0.07) 0px 4px 20px 0px !important;
  transform: none !important;
}
/* Bild ausblenden */
#osf-root.osf-view--list .osf-row__img-wrap { display: none !important; }

/* Body: volle Breite, Flex-Row, vertikal zentriert */
#osf-root.osf-view--list .osf-row__body {
  flex-direction: row !important;
  align-items: center !important;
  padding: 0 !important;
  gap: 0 !important;
  flex: 1 !important;
  max-width: 100% !important;
}

/* Distanz – linke Spalte */
#osf-root.osf-view--list .osf-row__dist {
  display: block !important;
  flex: 0 0 80px !important;
  min-width: 80px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #3A4F66 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Info-Block: Name + Adresse + Kontakt + Stunden */
#osf-root.osf-view--list .osf-row__info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 0 !important;
}
#osf-root.osf-view--list .osf-row__name {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #192a3d !important;
  margin: 0 0 5px 0 !important;
  line-height: 1.25 !important;
}

/* Adresse */
#osf-root.osf-view--list .osf-row__addr {
  margin: 0 0 6px 0 !important;
  line-height: 1.5 !important;
}
#osf-root.osf-view--list .osf-row__addr a {
  display: inline !important;
  font-size: 14px !important;
  color: #3A4F66 !important;
  text-decoration: none !important;
}
#osf-root.osf-view--list .osf-row__addr a::after { content: ', '; color: #3A4F66; }
#osf-root.osf-view--list .osf-row__addr a:last-child::after { content: ''; }
#osf-root.osf-view--list .osf-row__addr a:hover { color: #0086DD !important; }

/* Status ausblenden */
#osf-root.osf-view--list .osf-row__status { display: none !important; }

/* Kontakt – horizontal nebeneinander */
#osf-root.osf-view--list .osf-row__contacts {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 4px !important;
}
#osf-root.osf-view--list .osf-row__contacts a {
  font-size: 14px !important;
  color: #0086DD !important;
  gap: 5px !important;
}
#osf-root.osf-view--list .osf-row__contacts .osf-icon-wrap {
  display: none !important; /* kein Kreis in Listenansicht */
}
#osf-root.osf-view--list .osf-row__contacts svg {
  stroke: #0086DD !important;
}

/* Öffnungszeiten */
#osf-root.osf-view--list .osf-row__hours {
  display: flex !important;
  align-items: flex-start !important;
  font-size: 13px !important;
  color: #3A4F66 !important;
  margin: 0 !important;
  gap: 6px !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.5 !important;
}

/* Rechts: "zum Filialprofil" als Outline-Button */
#osf-root.osf-view--list .osf-row__actions {
  flex-direction: column !important;
  align-items: flex-end !important;
  margin-top: 0 !important;
  margin-left: 24px !important;
  flex-shrink: 0 !important;
  gap: 0 !important;
}
#osf-root.osf-view--list .osf-btn--portrait {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  color: #0086DD !important;
  border: 1.6px solid #0086DD !important;
  border-radius: 50px !important;
  padding: 10px 20px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 200 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  height: auto !important;
  transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955) !important;
}
#osf-root.osf-view--list .osf-btn--portrait:hover {
  background: #0086DD !important;
  color: #fff !important;
}


/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 720px) {
  #osf-root .osf-row { flex-direction: column; }
  #osf-root .osf-row__img-wrap { flex: none; max-width: 100%; }
  #osf-root .osf-row__img { min-height: 220px; height: 220px; }
  #osf-root .osf-row__body { padding: 20px; }
  #osf-root .osf-row__name { font-size: 22px !important; }
  #osf-root .osf-row__actions { max-width: 100%; }
  #osf-root .osf-search-bar { flex-direction: column; align-items: stretch; }
  #osf-root .osf-or { text-align: center; }
  #osf-root .osf-btn--blue { justify-content: center; }
}

/* ── RADIUS SLIDER ───────────────────────────────────────── */
#osf-root .osf-radius-wrap {
  margin-bottom: 16px;
}
#osf-root .osf-radius-bar {
  display: flex; align-items: center; gap: 12px;
  background: rgb(247, 245, 241);
  border-radius: 15px;
  padding: 14px 24px;
}
#osf-root .osf-radius-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: #3A4F66; stroke-width: 2; stroke-linecap: round;
}
#osf-root .osf-radius-label {
  font-family: 'Rubik', sans-serif;
  font-size: 14px; font-weight: 500;
  color: #192a3d; flex-shrink: 0;
  white-space: nowrap;
}
#osf-root .osf-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #0086DD 0%, #0086DD var(--pct,50%), #e1e8ed var(--pct,50%), #e1e8ed 100%);
  outline: none;
  cursor: pointer;
  min-width: 100px;
}
#osf-root .osf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #0086DD;
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(0,134,221,.4);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
#osf-root .osf-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 10px rgba(0,134,221,.5);
}
#osf-root .osf-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #0086DD;
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(0,134,221,.4);
  cursor: pointer;
}
#osf-root .osf-radius-val {
  font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 700;
  color: #0086DD; flex-shrink: 0;
  min-width: 54px; text-align: right;
}