@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--primary:#2563eb;--primary-hover:#1d4ed8;--secondary:#10b981;--accent:#f59e0b;--bg-color:#f8fafc;--card-bg:#fffffff2;--text-main:#1e293b;--text-muted:#64748b;--border-color:#e2e8f0;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--glass-bg:#ffffffb3;--glass-border:#fff3}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}body{background:var(--bg-color);color:var(--text-main);background-image:radial-gradient(at 0 0,#ebf2ff 0,#0000 50%),radial-gradient(at 50% 0,#f5f7ff 0,#0000 50%),radial-gradient(at 100% 0,#ebf2ff 0,#0000 50%);justify-content:center;align-items:center;min-height:100vh;padding:20px;line-height:1.5;display:flex}#root{width:100%;max-width:1200px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.animate-fade{animation:.5s ease-out forwards fadeIn}.animate-slide{animation:.4s ease-out forwards slideIn}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--shadow-lg);border-radius:24px}.btn{cursor:pointer;border:none;border-radius:12px;padding:12px 24px;font-size:1rem;font-weight:600;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #2563eb4d}.btn-secondary{color:var(--text-main);border:1px solid var(--border-color);background:#fff}.btn-secondary:hover{background:var(--bg-color)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.booking-container{min-height:600px;display:flex;overflow:hidden}.sidebar{color:#fff;background:#0f172a;border-top-left-radius:24px;border-bottom-left-radius:24px;flex-direction:column;width:360px;padding:40px 30px;display:flex}.logo-area{align-items:center;gap:12px;margin-bottom:60px;display:flex}.nav-logo{object-fit:cover;border-radius:8px;width:40px;height:40px}.step-nav{flex-direction:column;flex-grow:1;gap:32px;display:flex}.step-item{opacity:.5;align-items:center;gap:16px;transition:all .3s;display:flex}.step-item.active{opacity:1}.step-item.completed{opacity:.8}.step-icon-container{justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:relative}.step-number{border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.8rem;font-weight:700;display:flex}.step-check{color:var(--secondary);font-size:1.2rem;display:none}.step-item.completed .step-number{display:none}.step-item.completed .step-check{display:block}.step-item.active .step-number{background:var(--primary);border-color:var(--primary)}.step-details{flex-direction:column;display:flex}.step-label{font-weight:500}.step-subtext{color:#94a3b8;margin-top:2px;font-size:.75rem}.sidebar-footer{border-top:1px solid #ffffff1a;margin-top:40px;padding-top:20px;font-size:.85rem}.sidebar-footer a{color:#94a3b8;text-decoration:none}.content{background:#fff;border-top-right-radius:24px;border-bottom-right-radius:24px;flex-direction:column;flex-grow:1;padding:40px 60px;display:flex}.content-header{align-items:center;gap:16px;margin-bottom:40px;display:flex}.back-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:.9rem}.content-header h1{color:var(--text-main);font-size:1.8rem;font-weight:700}.step-content{flex-grow:1}.instruction{color:var(--text-muted);margin-bottom:20px;font-size:.9rem}.services-list{flex-direction:column;gap:12px;display:flex}.service-card{border:1px solid var(--border-color);cursor:pointer;border-radius:16px;align-items:center;gap:16px;padding:16px 24px;transition:all .2s;display:flex}.service-card:hover{border-color:var(--primary);background:#f0f7ff}.service-card.selected{border-color:var(--primary);background:#eff6ff;border-width:2px}.service-icon{background:#f1f5f9;border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;display:flex}.service-card.selected .service-icon{background:#fff}.service-info h3{font-size:1rem;font-weight:600}.service-price{color:var(--text-muted);font-size:.85rem}.radio-indicator{border:2px solid var(--border-color);border-radius:50%;width:20px;height:20px;margin-left:auto;position:relative}.service-card.selected .radio-indicator{border-color:var(--primary)}.service-card.selected .radio-indicator:after{content:"";background:var(--primary);border-radius:50%;width:10px;height:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.datetime-picker{flex-direction:column;gap:30px;display:flex}.booking-fields-grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}.select-wrapper{width:100%;position:relative}.custom-select{appearance:none;cursor:pointer;background-color:#fff;padding-right:40px}.select-arrow{color:var(--text-muted);pointer-events:none;font-size:.7rem;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.time-preview{background:#f0f7ff;border:1px solid #bfdbfe;border-radius:16px;align-items:center;gap:16px;margin-top:30px;padding:20px;display:flex}.preview-icon{width:44px;height:44px;box-shadow:var(--shadow-sm);background:#fff;border-radius:12px;justify-content:center;align-items:center;font-size:1.5rem;display:flex}.preview-text p{color:var(--primary);margin-bottom:2px;font-size:.85rem}.preview-text strong{color:var(--text-main);font-size:1rem}.duration-picker{margin-top:20px}.form-input{border:1px solid var(--border-color);border-radius:12px;outline:none;width:100%;padding:12px 16px;font-size:1rem;transition:border-color .2s}.form-input:focus{border-color:var(--primary)}.slots-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;display:grid}.time-slot{border:1px solid var(--border-color);cursor:pointer;background:#fff;border-radius:8px;padding:10px;font-size:.85rem;transition:all .2s}.time-slot:hover{border-color:var(--primary);color:var(--primary)}.time-slot.selected{background:var(--primary);color:#fff;border-color:var(--primary)}.info-form{flex-direction:column;gap:20px;display:flex}.form-row{gap:20px;display:flex}.form-group{flex-direction:column;flex:1;gap:8px;display:flex}.form-group label{color:var(--text-main);font-size:.9rem;font-weight:500}.phone-input{align-items:center;gap:10px;display:flex}.country-code{border:1px solid var(--border-color);white-space:nowrap;background:#f1f5f9;border-radius:12px;padding:12px;font-size:.9rem}.content-footer{flex-direction:column;align-items:flex-end;gap:12px;margin-top:40px;display:flex}.error-message{color:#ef4444;font-size:.85rem;font-weight:500;animation:.3s fadeIn}.next-btn{min-width:160px}@media (width<=768px){.booking-container{flex-direction:column}.sidebar{border-radius:24px 24px 0 0;width:100%;padding:30px}.content{border-radius:0 0 24px 24px;padding:30px}.step-nav{flex-direction:row;padding-bottom:10px;overflow-x:auto}.step-label,.step-subtext{display:none}.form-row{flex-direction:column}}.success-screen{text-align:center;background:#fff;justify-content:center;align-items:center;padding:60px}.success-content{flex-direction:column;align-items:center;gap:20px;max-width:500px;display:flex}.success-icon-large{margin-bottom:10px;font-size:80px;animation:.5s cubic-bezier(.175,.885,.32,1.275) scaleUp}@keyframes scaleUp{0%{transform:scale(0)}to{transform:scale(1)}}.booking-details-card{text-align:left;border:1px solid var(--border-color);background:#f8fafc;border-radius:16px;width:100%;margin:10px 0;padding:24px}.booking-details-card p{margin-bottom:8px;font-size:.95rem}.success-note{color:var(--text-muted);margin-bottom:10px;font-size:.9rem}
