/* Jia Booking - Frontend - Design moderne */
.alb-booking-wrapper { 
    --jb-primary:#5a6fd8; --jb-primary_dark:#4656b0; --jb-secondary:#f5f7ff; 
    --jb-text:#1a1a2e; --jb-text_light:#6c757d; --jb-border:#e9ecef; --jb-success:#00c9a7; --jb-background:#ffffff;
    max-width:900px; margin:30px auto; font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; 
    background:var(--jb-background); border-radius:20px; box-shadow:0 12px 48px rgba(26,26,46,0.08); 
    overflow:hidden; border:1px solid var(--jb-border);
}
.alb-steps { display:flex; background:var(--jb-secondary); padding:20px 30px; gap:12px; border-bottom:1px solid var(--jb-border); }
.alb-step { display:flex; align-items:center; gap:10px; flex:1; opacity:0.5; transition:0.3s; font-weight:500; font-size:14px; color:var(--jb-text_light); }
.alb-step.active { opacity:1; color:var(--jb-primary); }
.alb-step.done { opacity:1; color:var(--jb-success); }
.alb-step-num { width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--jb-border); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.alb-step.active .alb-step-num { background:var(--jb-primary); color:#fff; border-color:var(--jb-primary); }
.alb-step.done .alb-step-num { background:var(--jb-success); color:#fff; border-color:var(--jb-success); }
.alb-content { padding:32px; }
.alb-services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.alb-service-card { border:2px solid var(--jb-border); border-radius:14px; padding:20px; cursor:pointer; transition:all 0.2s; background:#fff; position:relative; }
.alb-service-card:hover { border-color:var(--jb-primary); transform:translateY(-2px); box-shadow:0 8px 24px rgba(90,111,216,0.12); }
.alb-service-card.selected { border-color:var(--jb-primary); background:var(--jb-secondary); }
.alb-service-color { width:8px; height:100%; position:absolute; left:0; top:0; border-radius:14px 0 0 14px; }
.alb-service-name { font-weight:700; font-size:16px; color:var(--jb-text); margin-bottom:6px; padding-left:12px; }
.alb-service-desc { font-size:13px; color:var(--jb-text_light); margin-bottom:10px; padding-left:12px; }
.alb-service-meta { display:flex; gap:12px; font-size:13px; color:var(--jb-text_light); padding-left:12px; }
.alb-employees-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.alb-employee-card { text-align:center; border:2px solid var(--jb-border); border-radius:14px; padding:20px; cursor:pointer; transition:0.2s; }
.alb-employee-card:hover, .alb-employee-card.selected { border-color:var(--jb-primary); background:var(--jb-secondary); }
.alb-employee-avatar { width:64px; height:64px; border-radius:50%; background:var(--jb-secondary); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:var(--jb-primary); }
.alb-calendar { display:flex; gap:24px; }
.alb-dates { flex:1; }
.alb-date-picker { width:100%; padding:14px; border:2px solid var(--jb-border); border-radius:10px; font-size:14px; }
.alb-times { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:300px; overflow-y:auto; }
.alb-time-slot { padding:10px; border:2px solid var(--jb-border); border-radius:8px; text-align:center; cursor:pointer; font-weight:600; font-size:14px; transition:0.2s; }
.alb-time-slot:hover { border-color:var(--jb-primary); color:var(--jb-primary); }
.alb-time-slot.selected { background:var(--jb-primary); color:#fff; border-color:var(--jb-primary); }
.alb-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.alb-input-group { display:flex; flex-direction:column; gap:6px; }
.alb-input-group.full { grid-column:1 / -1; }
.alb-input-group label { font-weight:600; font-size:13px; color:var(--jb-text); }
.alb-input { padding:14px 16px; border:2px solid var(--jb-border); border-radius:10px; font-size:14px; transition:0.2s; width:100%; }
.alb-input:focus { outline:none; border-color:var(--jb-primary); box-shadow:0 0 0 4px rgba(90,111,216,0.1); }
.alb-actions { display:flex; justify-content:space-between; margin-top:28px; gap:12px; }
.alb-btn { padding:14px 28px; border-radius:10px; border:none; font-weight:700; font-size:14px; cursor:pointer; transition:0.2s; }
.alb-btn-secondary { background:#fff; border:2px solid var(--jb-border); color:var(--jb-text); }
.alb-btn-primary { background:var(--jb-primary); color:#fff; flex:1; }
.alb-btn-primary:hover { background:var(--jb-primary_dark); transform:translateY(-1px); }
.alb-btn:disabled { opacity:0.5; cursor:not-allowed; }
.alb-success-box { text-align:center; padding:40px; }
.alb-success-icon { width:80px; height:80px; background:var(--jb-success); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:36px; color:#fff; }
.alb-loading { text-align:center; padding:40px; color:var(--jb-text_light); }
@media(max-width:768px){ .alb-steps { flex-direction:column; } .alb-calendar { flex-direction:column; } .alb-form-grid { grid-template-columns:1fr; } .alb-times { grid-template-columns:repeat(2,1fr); } }