/* ui-buttons.css – kompakte, responsive Buttons für THF Mediapics */

/* Farb- & Spacing-Token passend zum Dark-Layout */
:root{
  --btn-accent: #3aa0ff;          /* Akzentblau */
  --btn-accent-600:#1f8af3;
  --btn-accent-700:#1676d0;
  --btn-text:#e9eef5;              /* Helles Textgrau */
  --btn-border:#2b394a;            /* Dezente Linie */
  --btn-bg:#111926;               /* Dunkle Fläche */
  --btn-shadow: 0 2px 10px rgba(0,0,0,.25);
  --btn-radius: 9999px;           /* Pillenform */
  --btn-pad-y: .55rem;            /* Basis-Padding */
  --btn-pad-x: 1.0rem;
  --btn-font: 0.95rem;
}

/* Basis */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  font-size:var(--btn-font); line-height:1; font-weight:600;
  color:var(--btn-text);
  background:transparent; border:1px solid var(--btn-border);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius);
  cursor:pointer; user-select:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .08s ease;
  box-shadow:none;
}

/* Primärer Ghost/Outline-Stil */
.btn--primary{
  background:rgba(58,160,255,.08);
  border-color:rgba(58,160,255,.35);
}

/* Hover/Focus */
.btn:hover{ transform:translateY(-1px); }
.btn--primary:hover{
  background:rgba(58,160,255,.14);
  border-color:rgba(58,160,255,.55);
  box-shadow:var(--btn-shadow);
}
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(58,160,255,.35);
}

/* Aktiver Klick */
.btn:active{ transform:translateY(0); box-shadow:none; }

/* Größen – Desktop kompakt, Mobile griffig */
.btn--sm { --btn-font:.9rem;  --btn-pad-y:.45rem; --btn-pad-x:.9rem; }
.btn--md { --btn-font:.95rem; --btn-pad-y:.55rem; --btn-pad-x:1.0rem; }
.btn--lg { --btn-font:1.0rem; --btn-pad-y:.65rem; --btn-pad-x:1.1rem; }

/* Ladezustand */
.btn.is-loading{ pointer-events:none; opacity:.85; }
.btn .spinner{ width:1em; height:1em; border:2px solid transparent; border-top-color:var(--btn-text); border-right-color:var(--btn-text); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Container zentriert unter dem Card-Grid */
.load-more-wrap{
  display:flex; justify-content:center; align-items:center;
  padding:14px 0 28px;
}
.load-more-wrap .btn{ min-width: 11rem; }

/* Mobile: Button etwas höher & randbündig angenehmer */
@media (max-width: 767px){
  .load-more-wrap{ padding:12px 16px 24px; }
  .load-more-wrap .btn{ width: 100%; max-width: 420px; }
  .btn{ --btn-font:1rem; --btn-pad-y:.72rem; --btn-pad-x:1.05rem; }
}

/* Ultra-klein (z. B. iPhone 13): einspaltig, trotzdem nicht wuchtig */
@media (max-width: 390px){
  .btn{ --btn-font:.98rem; --btn-pad-y:.68rem; }
}


/* =======================================================================
   REQUEST-MODAL BUTTON TUNING (Termine)
   Ziel: "ANFRAGE SENDEN" weniger Glow, professioneller, Schatten dezenter
   Wir überschreiben gezielt nur den Primary-Button im Modal.
   ======================================================================= */

/* Primary im Modal: Glow reduzieren, Drop-Shadow/Filter abräumen */
#reqModal .req-btn.primary,
#reqModal .req-btn.primary:visited{
  /* falls irgendwo Neon-Glows definiert sind: neutralisieren */
  filter: none !important;
  text-shadow: none !important;

  /* ruhiger, hochwertiger Schatten (kein "Leuchten") */
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 2px 10px rgba(58,160,255,.16);

  /* Optional: wenn die Button-Styles eine sehr knallige Fläche nutzen,
     geben wir hier ein etwas gedeckteres Blau. Falls du die Farbe NICHT
     anfassen willst, diese 2 Zeilen einfach löschen. */
  background: linear-gradient(180deg, rgba(58,160,255,.95), rgba(31,138,243,.86));
  border: 1px solid rgba(255,255,255,.10);

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

#reqModal .req-btn.primary:hover{
  filter: none !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.40), 0 3px 12px rgba(58,160,255,.18);
  transform: translateY(-1px);
}

#reqModal .req-btn.primary:active{
  filter: none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.38), 0 2px 8px rgba(58,160,255,.14);
  transform: translateY(0);
}

/* Focus: sichtbar aber nicht übertrieben */
#reqModal .req-btn.primary:focus-visible{
  outline: 2px solid rgba(58,160,255,.55);
  outline-offset: 2px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 4px rgba(58,160,255,.18);
}

/* Disabled: ruhig */
#reqModal .req-btn.primary:disabled{
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.30);
}