/* ============================================================
   Passion Fruits — SimplyBook.me Widget Theme
   Palette : Creme  #FFFAF0 · Schwarz #000000 · Korall #E9868A
   Schrift : Spinnaker (Google Font)
   Quelle  : ausgelesen von https://www.passion-fruits.ch/
   Einfügen: SimplyBook → Custom Features → "Custom CSS"
             → am besten in BEIDE Reiter kopieren:
               "Booking pages CSS"  UND  "Widget CSS"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spinnaker&display=swap');

/* ---- Theme-Variablen (steuern große Teile des Widgets) ---- */
:root, .sb-layout {
  --colors_accent:#E9868A !important; --base-color:#000000 !important;
  --btn-bg:#000000 !important;        --btn-text-color:#FFFAF0 !important;
  --colors_text:#000000 !important;   --chat_bg:#FFFAF0 !important;
}

/* ---- Hintergrund: creme; Hero-Bild + Türkis-Overlay entfernen ---- */
html, body, .sb-layout, .page--booking, .page--index, .step-content,
.category-step, .default-bg, .default-bg.other, .full-info, .close-full-info {
  background:#FFFAF0 !important; background-image:none !important;
}
.masked { background-color:transparent !important; background-image:none !important; }

/* ---- Schrift: Spinnaker überall AUSSER Icon-Fonts (Font Awesome) ---- */
.sb-layout, .sb-layout *:not(.fa):not([class*="fa-"]):not(i) {
  font-family:'Spinnaker', sans-serif !important;
}

/* ---- Textfarben ---- */
.sb-layout, .title-main, .title-small, .title-sub, .small-title, .category-item,
.step_info_item, .booking-info, .masked, .masked * { color:#000000 !important; }
.nav a, .nav-item, .menu-item a, .header_nav_wrap a { color:#000000 !important; }
.step-content a, .link, a.link { color:#E9868A !important; }

/* ---- Icons (Inline-SVG) → korall ---- */
svg.sb-inline-svg path, svg.sb-inline-svg circle, svg.sb-inline-svg rect,
svg.sb-inline-svg polygon, svg.sb-inline-svg ellipse {
  fill:#E9868A !important; stroke:#E9868A !important;
}

/* ---- Buttons ---- */
.btn, .main_btn { border-radius:0 !important; }

/* Sekundär (z. B. SELECT) = schwarzer Umriss, füllt sich beim Hover */
.btn.select, .btn.select.custom { background:transparent !important; border:1.6px solid #000000 !important; }
.btn.select a, .btn.select.custom a { color:#000000 !important; }
.btn.select:hover, .btn.select.custom:hover { background:#000000 !important; }
.btn.select:hover a, .btn.select.custom:hover a { color:#FFFAF0 !important; }

/* Primär (Confirm booking / Next / …) = vollflächig schwarz, creme Text */
.btn:not(.select):not(.select.custom),
.main_btn, .btn.book, .btn.next, .btn.finish, .btn-primary, button[type=submit] {
  background:#000000 !important; color:#FFFAF0 !important;
  border:1.6px solid #000000 !important; border-radius:0 !important;
}
.btn:not(.select):not(.select.custom) a,
.btn:not(.select):not(.select.custom) span { color:#FFFAF0 !important; }
.btn:not(.select):not(.select.custom):hover { background:#2a2a2a !important; }

/* ---- Kalender & Zeit ---- */
.date.selected, .day.selected { background:#000000 !important; color:#FFFAF0 !important; border-radius:0 !important; }
.sb-cell.free { background:#FCEBEC !important; color:#000000 !important; }              /* verfügbare Zeit */
.sb-cell.free:hover, .sb-cell.selected, .sb-cell.active { background:#000000 !important; color:#FFFAF0 !important; }
.slot { background:#ffffff !important; border:1px solid #E9868A !important; border-radius:0 !important; color:#000000 !important; }
.circle { background-color:#E9868A !important; border-color:#E9868A !important; }       /* Legenden-Punkt */

/* Monats-Pfeile (Font Awesome, liegen auf dem ::before des Containers) → korall */
#sb_prev_month::before, #sb_next_month::before,
.fa-angle-left, .fa-angle-right, #sb_prev_month .fa, #sb_next_month .fa { color:#E9868A !important; }

/* --- A-Services: Service-Icons ausblenden (Look wie B) --- */
.excerpt-info .preloader.__default-svg-icon,
.excerpt-info .default.img { display:none !important; }

/* --- Kompaktere Service-Karten: leeres Beschreibungsfeld entfernen --- */
.excerpt-info .txt.short { display:none !important; }
.excerpt-info .tab-pd { padding:16px 20px 16px !important; }
.excerpt-info .cap.short { margin-bottom:10px !important; }

/* --- Leere linke Spalte ("Book now") im eingebetteten Widget entfernen --- */
html.is-widget header.widget { display:none !important; }
.sb-layout.iframe { padding-left:0 !important; }