body{min-height:100vh;margin:0;background:linear-gradient(135deg,#667eea,#764ba2);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.appointment-container{min-height:100vh;padding:2rem 1rem;justify-content:center;align-items:center;display:flex}.appointment-wrapper{animation:slideIn .6s cubic-bezier(.16,1,.3,1);overflow:hidden;max-width:72rem;flex-direction:column;background-color:#fff;margin:2rem auto;box-shadow:0 40px 80px -16px rgba(0,0,0,.25),0 0 0 1px hsla(0,0%,100%,.1);border-radius:2rem;width:100%;display:flex}@keyframes slideIn{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@media (min-width:1024px){.appointment-wrapper{flex-direction:row}}.appointment-sidebar{overflow:hidden;padding:1.5rem;color:#fff;position:relative;background:linear-gradient(180deg,#1e3a8a,#1e293b);width:100%}.appointment-sidebar:before{height:200%;pointer-events:none;right:-50%;content:"";position:absolute;top:-50%;background:radial-gradient(circle,hsla(0,0%,100%,.05) 0,transparent 70%);width:200%}@media (min-width:1024px){.appointment-sidebar{padding:2.5rem;width:33.333333%}}.sidebar-title{font-size:1.75rem;font-weight:700;margin-bottom:.5rem;position:relative;z-index:1}@media (min-width:1024px){.sidebar-title{font-size:2rem}}.sidebar-subtitle{font-size:.875rem;margin-bottom:1.5rem;color:#cbd5e1;position:relative;z-index:1}@media (min-width:1024px){.sidebar-subtitle{font-size:1rem;margin-bottom:2.5rem}}.steps-wrapper{position:relative;flex-direction:column;gap:.75rem;display:flex;z-index:1}@media (min-width:1024px){.steps-wrapper{gap:1.25rem}}.step-item{transform:translateX(-10px);transition:all .4s cubic-bezier(.16,1,.3,1);opacity:.4;align-items:center;display:flex}.step-item.active,.step-item.completed{transform:translateX(0);opacity:1}@media (max-width:1023px){.step-item{display:none}.step-item.active,.step-item.completed:last-of-type{display:flex}}.step-icon{height:2.25rem;flex-shrink:0;justify-content:center;font-size:.875rem;border:2px solid #475569;color:#94a3b8;transition:all .4s cubic-bezier(.16,1,.3,1);align-items:center;border-radius:50%;width:2.25rem;display:flex}@media (min-width:1024px){.step-icon{height:2.75rem;font-size:1rem;width:2.75rem}}.step-name{font-size:.875rem;font-weight:600;color:#94a3b8;transition:all .4s cubic-bezier(.16,1,.3,1);margin-left:1rem}@media (min-width:1024px){.step-name{font-size:1rem}}.step-item.active .step-icon{border-color:#8b5cf6;transform:scale(1.1);color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.4);background:linear-gradient(135deg,#6366f1,#8b5cf6)}.step-item.active .step-name{color:#fff}.step-item.completed .step-icon{border-color:#10b981;color:#fff;box-shadow:0 4px 12px rgba(16,185,129,.3);background:linear-gradient(135deg,#10b981,#059669)}.sidebar-footer{padding-top:2rem;font-size:.75rem;color:#cbd5e1;position:relative;border-top:1px solid hsla(0,0%,100%,.1);margin-top:2rem;z-index:1}@media (min-width:1024px){.sidebar-footer{font-size:.875rem;margin-top:3rem}}.appointment-content{padding:2rem;background:#fafafa;width:100%}@media (min-width:1024px){.appointment-content{padding:3rem;width:66.666667%}}.step-content{animation:fadeIn .6s cubic-bezier(.16,1,.3,1)}@keyframes fadeIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.step-title{font-size:2rem;font-weight:700;margin-bottom:1.5rem;color:#111827;background:linear-gradient(135deg,#1e3a8a,#6366f1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.employee-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem;display:grid}@media (min-width:640px){.employee-grid{grid-template-columns:repeat(3,1fr)}}.employee-card{overflow:hidden;padding:1.5rem 1rem;border:2px solid #e5e7eb;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;text-align:center;border-radius:1rem;background:#fff;cursor:pointer}.employee-card:before{right:0;transition:opacity .3s ease;content:"";position:absolute;opacity:0;bottom:0;top:0;background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.1));left:0}.employee-card:hover{border-color:#8b5cf6;transform:translateY(-4px);box-shadow:0 12px 24px -8px rgba(99,102,241,.2)}.employee-card:hover:before{opacity:1}.employee-card.active{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.1);background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(139,92,246,.05))}.employee-card img{height:5.5rem;border:3px solid #f3f4f6;transition:all .3s ease;object-fit:cover;margin:0 auto 1rem;border-radius:50%;width:5.5rem}.employee-card.active img,.employee-card:hover img{border-color:#6366f1;transform:scale(1.05)}.employee-card .placeholder-icon{height:5.5rem;justify-content:center;font-size:2.5rem;color:#6b7280;transition:all .3s ease;margin:0 auto 1rem;align-items:center;border-radius:50%;background:linear-gradient(135deg,#e5e7eb,#f3f4f6);width:5.5rem;display:flex}.employee-card.active .placeholder-icon,.employee-card:hover .placeholder-icon{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6)}.services-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem;margin-top:1.5rem;display:grid}.service-card{overflow:hidden;min-height:120px;padding:1.5rem;justify-content:center;border:2px solid #e5e7eb;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;flex-direction:column;border-radius:1rem;background:#fff;cursor:pointer;display:flex}.service-card:before{right:0;transition:opacity .3s ease;content:"";position:absolute;opacity:0;bottom:0;top:0;background:linear-gradient(135deg,rgba(16,185,129,.05),rgba(5,150,105,.05));left:0}.service-card:hover{border-color:#10b981;transform:translateY(-4px);box-shadow:0 12px 24px -8px rgba(16,185,129,.2)}.service-card:hover:before{opacity:1}.service-card-content{position:relative;text-align:center;z-index:1}.service-name{font-size:1.05rem;font-weight:600;color:#111827;margin:0 0 .5rem}.service-details{font-size:.875rem;color:#6b7280;margin:0}.service-selected-icon{transform:scale(.8);font-size:1.5rem;right:12px;color:#10b981;transition:all .3s cubic-bezier(.16,1,.3,1);position:absolute;opacity:0;top:12px;z-index:2}.service-card.active{border-color:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.1);background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(5,150,105,.08))}.service-card.active .service-selected-icon{transform:scale(1) rotate(10deg);opacity:1}#service-summary{padding:1.5rem;border:2px solid #e5e7eb;box-shadow:0 4px 12px -4px rgba(0,0,0,.05);border-radius:1rem;background:#fff;margin-top:2rem}.datetime-wrapper{flex-direction:column;gap:2rem;display:flex}@media (min-width:768px){.datetime-wrapper{flex-direction:row}}#calendar-container,#time-slots-container{flex:1;padding:1.5rem;border:2px solid #e5e7eb;border-radius:1rem;background:#fff}.calendar-header{justify-content:space-between;margin-bottom:1.5rem;align-items:center;display:flex}.calendar-header h4{font-size:1.25rem;font-weight:600;color:#111827}.calendar-nav button{padding:.75rem;border:none;color:#6b7280;transition:all .2s ease;border-radius:.75rem;background:#f3f4f6;cursor:pointer;line-height:1}.calendar-nav button:hover{color:#111827;background-color:#e5e7eb}.calendar-grid,.calendar-weekdays{grid-template-columns:repeat(7,1fr);gap:.5rem;text-align:center;display:grid}.calendar-weekdays div{padding:.5rem 0;font-size:.875rem;font-weight:600;color:#6b7280}.calendar-day{padding:.75rem;font-weight:500;transition:all .2s cubic-bezier(.16,1,.3,1);border-radius:.75rem;cursor:pointer}.calendar-day:not(.disabled):hover{transform:scale(1.05);background:linear-gradient(135deg,#e0e7ff,#ddd6fe)}.calendar-day.disabled{pointer-events:none;color:#d1d5db;opacity:.4}.calendar-day.selected{transform:scale(1.1);color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.3);background:linear-gradient(135deg,#6366f1,#8b5cf6)}#time-slots-container h4{font-size:1.125rem;font-weight:600;margin-bottom:1.5rem;color:#111827;text-align:center}.time-slots-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;display:grid}.time-slot{padding:1rem .75rem;font-size:.875rem;border:2px solid #e5e7eb;font-weight:500;color:#374151;transition:all .3s cubic-bezier(.16,1,.3,1);border-radius:.75rem;background:#fff;cursor:pointer}.time-slot:hover{border-color:#8b5cf6;transform:translateY(-2px);background:linear-gradient(135deg,#e0e7ff,#ddd6fe)}.time-slot.active{border-color:#8b5cf6;color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.3);background:linear-gradient(135deg,#6366f1,#8b5cf6)}.no-slots-message{padding:2rem 1rem;border:2px dashed #e5e7eb;color:#6b7280;text-align:center;border-radius:.75rem;background:#fafafa}.customer-form .form-group{margin-bottom:1.5rem}.customer-form label{font-size:.875rem;font-weight:600;margin-bottom:.5rem;color:#374151;display:block}.customer-form input,.customer-form textarea{padding:1rem;font-size:1rem;border:2px solid #e5e7eb;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);border-radius:.75rem;background:#fff;width:100%;font-family:Inter,sans-serif;display:block}.customer-form input::placeholder,.customer-form textarea::placeholder{color:#9ca3af}.customer-form input:focus,.customer-form textarea:focus{border-color:#6366f1;transform:translateY(-1px);outline:none;box-shadow:0 0 0 4px rgba(99,102,241,.1)}.summary-box-compact{padding:2rem;border:2px solid #e5e7eb;flex-direction:column;gap:2rem;box-shadow:0 4px 12px -4px rgba(0,0,0,.05);border-radius:1.25rem;background:#fff;display:flex}.summary-grid-compact{grid-template-columns:1fr;gap:2rem;display:grid}@media (min-width:640px){.summary-grid-compact{grid-template-columns:1fr 1fr}}.summary-item-compact h5{font-size:.75rem;font-weight:600;margin-bottom:.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:.1em;align-items:center;display:flex}.summary-item-compact h5 i{font-size:1rem;margin-right:.625rem;color:#6366f1}.summary-item-compact p{font-size:1.05rem;font-weight:500;color:#111827}.customer-email-summary{font-size:.875rem!important;font-weight:400!important;color:#6b7280!important;margin-top:.5rem}.service-summary-list{flex-direction:column;gap:.75rem;margin-top:.75rem;display:flex}.summary-service-item{padding:.75rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#f9fafb}.summary-service-item,.total-box{justify-content:space-between;display:flex}.total-box{padding:1.5rem 2rem;align-items:center;box-shadow:0 4px 12px rgba(99,102,241,.15);border-radius:1rem;background:linear-gradient(135deg,#e0e7ff,#ddd6fe);margin-top:2rem}.total-box .total-label{font-size:1.125rem;font-weight:700;color:#312e81}.total-box .total-price{font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.navigation-wrapper{padding-top:2rem;justify-content:space-between;border-top:2px solid #e5e7eb;margin-top:2.5rem;display:flex}.nav-btn{overflow:hidden;padding:1rem 2rem;font-size:1rem;border:none;font-weight:600;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;border-radius:.75rem;cursor:pointer}.nav-btn:before{height:0;transform:translate(-50%,-50%);transition:width .6s,height .6s;content:"";position:absolute;top:50%;border-radius:50%;background:hsla(0,0%,100%,.3);left:50%;width:0}.nav-btn:active:before{height:300px;width:300px}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.prev-btn{color:#374151;background:#f3f4f6}.prev-btn:hover:not(:disabled){transform:translateX(-4px);background:#e5e7eb}.next-btn{color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.3);background:linear-gradient(135deg,#6366f1,#8b5cf6)}.next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(99,102,241,.4)}.confirm-btn{box-shadow:0 4px 12px rgba(16,185,129,.3);background:linear-gradient(135deg,#10b981,#059669)}.confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,185,129,.4)}.form-error-message,.form-success-message{animation:fadeIn .6s ease;padding:4rem 2rem;text-align:center}.form-error-message i,.form-success-message i{font-size:5rem;margin-bottom:2rem;display:block}.form-success-message i{animation:successPulse 1s ease-in-out;color:#10b981}@keyframes successPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.form-error-message i{color:#ef4444}.form-error-message h3,.form-success-message h3{font-size:1.75rem;font-weight:700;margin-bottom:1rem}.new-appointment-btn{padding:1rem 2rem;text-decoration:none;font-weight:600;color:#fff;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 12px rgba(99,102,241,.3);border-radius:.75rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);margin-top:2rem;display:inline-block}.new-appointment-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(99,102,241,.4)}