/* ===================================================================
   NEXT GEN CLUB – Custom CSS für SimplyBook.me
   Einfügen unter: Custom Features → Custom CSS → Tab "Booking pages CSS"
   WICHTIG: Die @import-Zeile muss GANZ OBEN stehen (sonst lädt die Schrift nicht).
   Farben/Schriften wie auf n-g-x.com. Zum Anpassen nur die Werte in :root ändern.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ngc-ink:#0E0D0B;         /* Fast-Schwarz (Text / Dunkelflächen) */
  --ngc-ivory:#F5F1E9;       /* Elfenbein (Hintergrund) */
  --ngc-gold:#C9941F;        /* Gold (Primär) */
  --ngc-gold-hi:#E7B53E;     /* Helles Gold (Hover / Akzent) */
  --ngc-line:rgba(201,148,31,.28);  /* dezente Goldlinie */
}

/* --- Grundfläche + Schrift --- */
body,
.sb-widget,
#sb-main-container,
.booking-page,
.sbookingWidget,
.sbookingWrapper{
  background:var(--ngc-ivory) !important;
  color:var(--ngc-ink) !important;
  font-family:'Inter',system-ui,Arial,sans-serif !important;
}

/* --- Überschriften im Display-Font --- */
h1,h2,h3,h4,
.sb-title,.sb-step-title,.service-title,.sb-service-name,.provider-name,.sb-widget-title{
  font-family:'Bricolage Grotesque','Inter',sans-serif !important;
  color:var(--ngc-ink) !important;
  letter-spacing:.2px !important;
}

/* --- Primäre Buttons (Buchen / Weiter / Bestätigen) --- */
.sb-btn,
button.sb-btn,
.btn-primary,
.sb-book-button,
.sb-next-btn,
.book-now,
[class*="book"] button,
button[type="submit"]{
  background:var(--ngc-gold) !important;
  border:1px solid var(--ngc-gold) !important;
  color:var(--ngc-ink) !important;
  font-family:'Inter',sans-serif !important;
  font-weight:600 !important;
  border-radius:999px !important;
  box-shadow:none !important;
  transition:background .2s, transform .2s !important;
}
.sb-btn:hover,
.btn-primary:hover,
.sb-book-button:hover,
.sb-next-btn:hover,
button[type="submit"]:hover{
  background:var(--ngc-gold-hi) !important;
  border-color:var(--ngc-gold-hi) !important;
  transform:translateY(-1px) !important;
}

/* --- Sekundäre / Umriss-Buttons (Zurück etc.) --- */
.sb-btn-secondary,.btn-secondary,.sb-back-btn{
  background:transparent !important;
  color:var(--ngc-ink) !important;
  border:1px solid var(--ngc-line) !important;
  border-radius:999px !important;
}
.sb-btn-secondary:hover,.btn-secondary:hover{
  border-color:var(--ngc-gold) !important;
  color:var(--ngc-gold) !important;
}

/* --- Links --- */
a,.sb-link{color:var(--ngc-gold) !important}
a:hover{color:var(--ngc-gold-hi) !important}

/* --- Aktive/ausgewählte Zeitslots & Auswahl --- */
.sb-time-slot.selected,
.time-slot.active,
.sb-selected,
.is-selected{
  background:var(--ngc-gold) !important;
  color:var(--ngc-ink) !important;
  border-color:var(--ngc-gold) !important;
}
.sb-time-slot:hover,.time-slot:hover{
  border-color:var(--ngc-gold) !important;
}

/* --- Karten / Kacheln (Service, Provider, Membership) --- */
.sb-service,.sb-provider,.service-card,.membership-card,.sb-card{
  background:#ffffff !important;
  border:1px solid var(--ngc-line) !important;
  border-radius:16px !important;
}

/* --- Kalender-Akzente --- */
.calendar .today,.sb-calendar .today{color:var(--ngc-gold) !important}
.calendar td.available:hover{background:rgba(201,148,31,.12) !important}

/* --- Kopfbereich dunkel absetzen (OPTIONAL – Block löschen, wenn nicht gewünscht) --- */
.sb-header,.booking-header{
  background:var(--ngc-ink) !important;
  color:var(--ngc-ivory) !important;
  border-bottom:1px solid var(--ngc-line) !important;
}
.sb-header h1,.sb-header .company-name{color:var(--ngc-ivory) !important}

/* --- Fokus-Zustände (Barrierefreiheit) --- */
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:2px solid var(--ngc-gold-hi) !important;
  outline-offset:2px !important;
}

/* ===================================================================
   KONTAKTBLOCK: nur Bezeichnungen statt Nummern/URLs
   Ersetzt den sichtbaren Linktext durch ein sauberes Label.
   (Der Link selbst bleibt voll funktionsfähig – Klick/Tap wie gehabt.)
   Labels unten in content:"..." beliebig anpassbar.
   =================================================================== */

/* Telefon & simplybook.it komplett ausblenden
   (falls in Settings → Company Information noch gefüllt) */
a[href^="tel:"],
a[href*="simplybook.it"],
a[href*="simplybook.me"]{
  display:none !important;
}

/* Originaltext unsichtbar machen, Label einsetzen */
a[href*="wa.me"],
a[href*="whatsapp"],
a[href^="mailto:"],
a[href*="google.com/maps"],
a[href*="instagram.com"]{
  font-size:0 !important;          /* blendet Nummer / URL aus */
  letter-spacing:0 !important;
  word-break:normal !important;
  white-space:nowrap !important;
}

a[href*="wa.me"]::after,
a[href*="whatsapp"]::after,
a[href^="mailto:"]::after,
a[href*="google.com/maps"]::after,
a[href*="instagram.com"]::after{
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:.2px !important;
  color:var(--ngc-gold) !important;
}

a[href*="wa.me"]::after,
a[href*="whatsapp"]::after      { content:"WhatsApp" !important; }
a[href^="mailto:"]::after       { content:"E-Mail" !important; }
a[href*="google.com/maps"]::after{ content:"Adresse & Anfahrt" !important; }
a[href*="instagram.com"]::after { content:"Instagram" !important; }

/* Icons (falls vorhanden) sichtbar halten */
a[href*="wa.me"] i, a[href*="wa.me"] svg,
a[href^="mailto:"] i, a[href^="mailto:"] svg,
a[href*="google.com/maps"] i, a[href*="google.com/maps"] svg,
a[href*="instagram.com"] i, a[href*="instagram.com"] svg{
  font-size:16px !important;
  vertical-align:middle !important;
}

/* Etwas Luft zwischen den Kontaktzeilen */
.sb-company-info li,
.company-info li,
.contacts li{
  margin-bottom:8px !important;
}