:root{--salonb-accent:#e91e63}
.salonb-app{background:var(--salonb-app-bg,#fff);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.salonb-header{background:linear-gradient(180deg,var(--salonb-grad1,#ffe3ea),var(--salonb-grad2,#fff));padding:18px 22px;border-bottom:1px solid var(--salonb-header-border,#f3e6ea)}
.salonb-steps{display:flex;gap:32px;align-items:center}
.salonb-step-ind{display:flex;align-items:center;gap:10px}
.salonb-badge{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--salonb-accent);color:var(--salonb-badge-text,#fff);font-weight:700;opacity:1}
.salonb-line{width:100px;height:6px;border-radius:4px;background:var(--salonb-step-line-bg,#eadde1)}
.salonb-body{padding:24px}
h3{margin:0 0 10px 0}
.salonb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:12px}
.salonb-card{border:1px solid var(--salonb-card-border,#e9e9ee);border-radius:12px;padding:16px;background:var(--salonb-card-bg,#fff);cursor:pointer;transition:all .2s}
.salonb-card:hover{box-shadow:0 8px 16px rgba(0,0,0,.05)}
.salonb-card.active{outline:2px solid var(--salonb-accent)}
label{display:block;margin:8px 0}
input,select,textarea,button{padding:10px 12px;border:1px solid var(--salonb-input-border,#dfe3e8);border-radius:10px;font-size:14px}
button{cursor:pointer}
.salonb-actions{display:flex;justify-content:space-between;margin-top:18px}
.salonb-btn{background:var(--salonb-btn-bg,var(--salonb-accent));border:none;color:var(--salonb-btn-text,#fff);padding:10px 16px;border-radius:10px;transition:background .15s ease,color .15s ease}
.salonb-btn:hover{background:var(--salonb-btn-hover-bg,var(--salonb-btn-bg,var(--salonb-accent)));color:var(--salonb-btn-hover-text,var(--salonb-btn-text,#fff))}
.salonb-btn:disabled{opacity:.5;cursor:not-allowed}
.salonb-time-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.salonb-time{display:flex;align-items:center;justify-content:center;border:1px solid var(--salonb-time-border,#e3e3ea);border-radius:10px;padding:10px 12px;background:var(--salonb-time-bg,#fff);cursor:pointer;color:var(--salonb-time-text,#111);transition:all .15s ease}
.salonb-time.active,.salonb-time:hover{background:var(--salonb-time-hover-bg,#fff0f5);border-color:var(--salonb-time-hover-border,var(--salonb-accent));color:var(--salonb-time-text,#111)}
.salonb-info{background:var(--salonb-info-bg,#fff0f2);color:var(--salonb-info-text,#111111);border-radius:10px;padding:12px;margin-bottom:12px}


/* === Widget Header Steps: volle Breite mit runden Badges === */
.salonb-header, .salonb-body { width: 100%; }
.salonb-badge{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.salonb-steps{ display:flex; align-items:center; width:100%; gap:0; }
.salonb-step-ind{ display:flex; align-items:center; min-width:0; gap:10px; flex:1 1 0; }
.salonb-step-ind:last-child{ flex:0 0 auto; }
.salonb-line{ flex:1 1 auto; min-width:0; height:6px; border-radius:4px; background:var(--salonb-step-line-bg,#eadde1); margin-left:12px; }
.salonb-step-ind:last-child .salonb-line{ display:none; }
@media (max-width: 480px){
  .salonb-body{ padding:14px; }
  .salonb-time-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
}



/* === Calendar field and mobile overflow fixes === */
.salonb-date-field { display:block; margin:8px 0; }
.salonb-date-field .salonb-date-click { position:relative; width:100%; }
.salonb-date-field input[type="date"] { display:block; width:100%; box-sizing:border-box; }

/* Prevent horizontal overflow in widget on small screens */
#salonb-app, .salonb-app { max-width:100%; overflow-x:hidden; }
.salonb-body { overflow:visible; }

@media (max-width:480px){
  #salonb-app, .salonb-app { border-radius:12px; }
  .salonb-header, .salonb-body { width:100%; max-width:100%; }
  .salonb-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
}


/* --- Mobile overflow hard-fix --- */
#salonb-app, .salonb-app { position: relative; width:100%; max-width:100%; overflow-x:hidden; }
#salonb-app *, .salonb-app * { box-sizing: border-box; min-width: 0; }
.salonb-header, .salonb-body { width:100%; max-width:100%; }
.salonb-step { min-width:0; }
.salonb-date-field, .salonb-date-field .salonb-date-click { width:100%; max-width:100%; }
.salonb-date-field input[type="date"] { width:100%; max-width:100%; display:block; }
.salonb-time-grid{ width:100%; max-width:100%; }

/* Hide default iOS extra padding spillover on date icon, keep icon */
.salonb-date-field input[type="date"]::-webkit-date-and-time-value { text-align:left; }
.salonb-date-field input[type="date"]::-webkit-calendar-picker-indicator { opacity:1; }

@supports (contain: layout) {
  #salonb-app, .salonb-app { contain: layout paint; }
}

@media (max-width:480px){
  .salonb-container, .salonb-app, .salonb-body { overflow-x:hidden; }
}


/* ===== CreativoMedia mobile date-picker fixes (v4) ===== */
:root { --sb-control-h: 44px; }

/* Prevent iOS/Safari inputs from expanding flex/grid widths */
.salonb-step * { box-sizing: border-box; min-width: 0; }

/* Normalize mobile date input sizing */
.salonb-date-field input[type="date"]{
  height: var(--sb-control-h);
  line-height: calc(var(--sb-control-h) - 2px);
  padding: 8px 12px;
  font-size: 16px;              /* avoid iOS zoom on focus */
  -webkit-appearance: none;
  appearance: none;
}

/* Remove default extra paddings around the calendar icon */
.salonb-date-field input[type="date"]::-webkit-calendar-picker-indicator{
  padding: 0;
  margin: 0;
}

/* Ensure full-width containers and no overflow horizontally */
.salonb-date-field,
.salonb-date-field .salonb-date-click{
  width: 100%;
  max-width: 100%;
}

@media (max-width: 480px){
  .salonb-app{max-width:100%; overflow-x:hidden;}
  .salonb-body{padding:16px;}
}
/* ===== End mobile date-picker fixes ===== */

/* PATCH: invalid field style */
.salonb-invalid{ outline:2px solid var(--salonb-error-color,#d00) !important; border-color:var(--salonb-error-color,#d00) !important; }
.salonb-error{font-size:12px;margin-top:6px;color:var(--salonb-error-color,#d00)}


/* Mobile: 2-Spalten-Layout für Leistungen */
@media (max-width: 640px){
  .salonb-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}


/* Kategorien-Navigation über den Leistungen */
.salonb-cat-nav-wrapper{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  margin-bottom:12px;
}

.salonb-cat-nav-scroll{
  flex:1;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:thin;
}

.salonb-cat-nav-scroll::-webkit-scrollbar{
  height:6px;
}

.salonb-cat-nav-scroll::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(0,0,0,.15);
}

.salonb-cat-arrow{
  border:1px solid var(--salonb-nav-arrow-border,#e3e3ea);
  background:var(--salonb-nav-arrow-bg,var(--salonb-nav-bg,#f3f3f8));
  color:var(--salonb-nav-arrow-text,inherit);
  width:32px;
  height:32px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  cursor:pointer;
}

.salonb-cat-arrow:hover{
  background:var(--salonb-nav-arrow-hover-bg,var(--salonb-nav-hover-bg,#e4e4f0));
  border-color:var(--salonb-nav-arrow-hover-border,#e3e3ea);
  color:var(--salonb-nav-arrow-hover-text,var(--salonb-nav-arrow-text,inherit));
}

.salonb-cat-arrow:active{
  background:var(--salonb-nav-arrow-hover-bg,var(--salonb-nav-arrow-bg,var(--salonb-nav-bg,#f3f3f8)));
  border-color:var(--salonb-nav-arrow-hover-border,var(--salonb-nav-arrow-border,#e3e3ea));
  color:var(--salonb-nav-arrow-hover-text,var(--salonb-nav-arrow-text,inherit));
}

.salonb-app .salonb-cat-arrow:focus,
.salonb-app .salonb-cat-arrow:focus-visible,
.salonb-app .salonb-cat-arrow:focus:not(:focus-visible){
  background: var(--salonb-nav-arrow-bg, var(--salonb-nav-bg,#f3f3f8)) !important;
  border-color: var(--salonb-nav-arrow-border,#e3e3ea) !important;
  color: var(--salonb-nav-arrow-text, inherit) !important;
  outline: none !important;
  box-shadow: none !important;
}

.salonb-cat-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  margin-right:8px;
  border-radius:999px;
  border:1px solid var(--salonb-nav-pill-border,#e3e3ea);
  background:var(--salonb-nav-pill-bg,#ffffff);
  color:var(--salonb-nav-pill-text,#111111);
  font-size:13px;
  cursor:pointer;
  transition:all .15s ease;
}

.salonb-cat-pill:hover{
  background:var(--salonb-nav-pill-hover-bg,var(--salonb-nav-pill-bg,#ffffff));
  border-color:var(--salonb-nav-pill-hover-border,var(--salonb-nav-pill-border,#e3e3ea));
  color:var(--salonb-nav-pill-hover-text,var(--salonb-nav-pill-text,#111111));
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}

.salonb-cat-pill.active{
  border-color:var(--salonb-nav-pill-active-border,var(--salonb-accent));
  background:var(--salonb-nav-pill-active-bg,var(--salonb-accent));
  color:var(--salonb-nav-pill-active-text,#fff);
}
0,1fr));
  }
}


/* Links in Consent-Text (AGB / Datenschutz) */
.salonb-consent a{
  color:var(--salonb-link-color,var(--salonb-accent,#0073aa));
}
.salonb-consent a:hover{
  color:var(--salonb-link-hover-color,var(--salonb-link-color,var(--salonb-accent,#0073aa)));
}