.katogan-booking-widget{
  --kb-ink:#130E16; --kb-cream:#F7F1E6; --kb-fuchsia:#FF3E86; --kb-gold:#C9A24B;
  font-family: 'Manrope', sans-serif;
  max-width: 720px; margin: 0 auto;
  background: var(--kb-ink); color: #FBF7F0;
  border-radius: 4px; padding: 32px; position: relative;
}
.kb-steps{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; font-family:'Space Mono',monospace; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; }
.kb-step{ opacity:0.4; }
.kb-step.active{ opacity:1; color: var(--kb-fuchsia); }

.kb-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:14px; }
.kb-choice{
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14);
  border-radius:3px; padding:16px; text-align:left; cursor:pointer; color:inherit;
  display:flex; flex-direction:column; gap:6px; transition: border-color .2s ease, background .2s ease;
}
.kb-choice:hover{ border-color: var(--kb-fuchsia); background: rgba(255,62,134,0.08); }
.kb-choice img{ width:48px; height:48px; border-radius:50%; object-fit:cover; margin-bottom:6px; }
.kb-choice strong{ font-family:'Bodoni Moda', serif; font-style:italic; font-size:1.05rem; }
.kb-choice span{ font-size:0.82rem; opacity:0.7; }
.kb-deposit-note{ color: var(--kb-gold); }

/* ---------- Navigation par categorie (etape 1) ---------- */
.kb-cat-tiles{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.kb-cat-tile{
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); color:inherit;
  border-radius:3px; padding:14px 18px; min-width:110px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:'Space Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; text-align:center;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.kb-cat-tile svg{ opacity:0.75; }
.kb-cat-tile:hover{ border-color: var(--kb-fuchsia); }
.kb-cat-tile.active{ border-color: var(--kb-fuchsia); background: rgba(255,62,134,0.12); color: var(--kb-fuchsia); }
.kb-cat-tile.active svg{ opacity:1; }
.kb-cat-tile.kb-cat-empty{ opacity:0.3; cursor:not-allowed; }

.kb-services-layout{ display:grid; grid-template-columns: 220px 1fr; gap:28px; }
@media (max-width: 640px){ .kb-services-layout{ grid-template-columns: 1fr; } }

.kb-subcats{ display:flex; flex-direction:column; gap:4px; }
.kb-subcat{
  background:none; border:0; color:rgba(251,247,240,0.6); text-align:left; padding:10px 4px;
  font-family:'Space Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;
  cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.08);
}
.kb-subcat:hover{ color:#fff; }
.kb-subcat.active{ color: var(--kb-fuchsia); }

.kb-service-list{ display:flex; flex-direction:column; }
.kb-service-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.08);
}
.kb-service-info{ display:flex; flex-direction:column; gap:4px; }
.kb-service-info strong{ font-family:'Bodoni Moda', serif; font-style:italic; font-size:1.02rem; }
.kb-service-info span{ font-size:0.8rem; opacity:0.65; }
.kb-select-btn{
  flex:none; background: var(--kb-fuchsia); color: var(--kb-ink); border:0; padding:10px 20px;
  border-radius:3px; font-family:'Space Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
  cursor:pointer; transition: transform .2s ease;
}
.kb-select-btn:hover{ transform: translateY(-1px); }

#kb-date{
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.2); color:inherit;
  padding:10px 14px; border-radius:3px; font-family:'Space Mono',monospace; margin-bottom:20px;
}
.kb-slots{ display:flex; flex-wrap:wrap; gap:10px; }
.kb-slot{
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.18); color:inherit;
  padding:10px 16px; border-radius:3px; cursor:pointer; font-family:'Space Mono',monospace; font-size:0.85rem;
}
.kb-slot:hover{ border-color: var(--kb-fuchsia); }
.kb-slot.selected{ background: var(--kb-fuchsia); color: var(--kb-ink); border-color: var(--kb-fuchsia); }

#kb-contact-form{ display:flex; flex-direction:column; gap:14px; }
#kb-contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:0.85rem; }
#kb-contact-form input{
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.2); color:inherit;
  padding:10px 14px; border-radius:3px; font-family:inherit;
}
.kb-summary{ background: rgba(255,255,255,0.04); border-radius:3px; padding:14px 16px; font-size:0.9rem; }
.kb-summary p{ margin:4px 0; }

.kb-back{
  margin-top:18px; background:none; border:0; color:rgba(255,255,255,0.5);
  font-family:'Space Mono',monospace; font-size:0.75rem; text-transform:uppercase; cursor:pointer;
}
.kb-back:hover{ color:#fff; }

.btn.btn-primary{
  font-family:'Space Mono',monospace; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em;
  background: var(--kb-fuchsia); color: var(--kb-ink); border:0; padding:14px 24px; border-radius:3px; cursor:pointer;
}

.kb-error{ color:#FF6B6B; margin-top:16px; font-size:0.9rem; }
.kb-loading{ color:rgba(255,255,255,0.6); margin-top:16px; font-size:0.9rem; }

.katogan-booking-success{
  background: rgba(255,62,134,0.12); border:1px solid var(--kb-fuchsia); color:#FBF7F0;
  padding:20px; border-radius:4px; margin-bottom:20px; font-family:'Manrope',sans-serif;
}
.katogan-booking-pending{
  background: rgba(201,162,75,0.12); border:1px solid var(--kb-gold); color:#FBF7F0;
  padding:20px; border-radius:4px; margin-bottom:20px;
}
.katogan-booking-empty{ text-align:center; color:#888; }