.booking-page{min-height:100vh;background:linear-gradient(135deg,#f0f4f8,#d9e2ec);display:flex;align-items:center;justify-content:center}html.dark .booking-page{background:linear-gradient(135deg,#0f141e,#19202d)}.booking-container{display:grid;grid-template-columns:320px 1fr;max-width:1280px;width:100%;background:#fff;border-radius:20px;box-shadow:0 25px 50px -12px #0000001a,0 0 0 1px #0000000d;overflow:hidden;animation:fadeInUp .5s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}html.dark .booking-container{background:#19202d;box-shadow:0 25px 50px -12px #0006,0 0 0 1px #ffffff0d}.booking-sidebar{padding:2rem 1.75rem;border-right:1px solid #e5e7eb;background:linear-gradient(180deg,#fafbfc,#f3f4f6)}html.dark .booking-sidebar{background:linear-gradient(180deg,#141a24,#121720);border-right-color:#ffffff14}.profile-section{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.avatar-wrapper{position:relative}.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid white;box-shadow:0 4px 12px #0000001a;transition:transform .3s ease,box-shadow .3s ease}.avatar:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026}.status-dot{position:absolute;bottom:2px;right:2px;width:14px;height:14px;background:#22c55e;border:3px solid white;border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}html.dark .status-dot{border-color:#141a24}.profile-name{font-size:.8rem;color:#6b7280;display:block;text-transform:uppercase;letter-spacing:.5px;font-weight:500}html.dark .profile-name{color:#9ca3af}.profile-info h1{font-size:1.35rem;font-weight:700;margin:.25rem 0 0;color:#111827;letter-spacing:-.02em}html.dark .profile-info h1{color:#f9fafb}.call-details{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #e5e7eb}html.dark .call-details{border-bottom-color:#ffffff14}.detail-row{display:flex;align-items:center;gap:.75rem;color:#4b5563;font-size:.9rem;font-weight:500;transition:color .2s ease}.detail-row:hover{color:#111827}html.dark .detail-row{color:#9ca3af}html.dark .detail-row:hover{color:#e5e7eb}.detail-row svg{color:#3b82f6;flex-shrink:0}.sidebar-desc{font-size:.875rem;line-height:1.7;color:#6b7280;margin:0 0 1.25rem}html.dark .sidebar-desc{color:#9ca3af}.sidebar-tags{display:flex;flex-wrap:wrap;gap:.5rem}.tag{display:inline-flex;align-items:center;padding:.35rem .75rem;background:linear-gradient(135deg,#dbeafe,#ede9fe);color:#3b82f6;font-size:.75rem;font-weight:600;border-radius:20px;transition:transform .2s ease,box-shadow .2s ease}.tag:hover{transform:translateY(-1px);box-shadow:0 2px 8px #3b82f633}html.dark .tag{background:linear-gradient(135deg,#3b82f633,#8b5cf633);color:#93c5fd}.booking-main{padding:2.5rem 3rem;min-height:500px;position:relative}.calendar-section h2{font-size:1.35rem;font-weight:700;margin:0 0 1.5rem;color:#111827;letter-spacing:-.02em}html.dark .calendar-section h2{color:#f9fafb}.duration-picker{display:flex;flex-direction:column;gap:.5rem;margin:1.5rem 0}.duration-picker[hidden]{display:none!important}.duration-option{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all .2s ease;background:#fff;position:relative}.duration-option:hover{border-color:#d1d5db;background:#f9fafb}.duration-option.selected{border-color:#3b82f6;background:#eff6ff}html.dark .duration-option{background:#141a24;border-color:#ffffff1a}html.dark .duration-option:hover{border-color:#fff3;background:#19202d}html.dark .duration-option.selected{border-color:#3b82f6;background:#3b82f626}.duration-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#dbeafe;color:#3b82f6;flex-shrink:0}.duration-option:hover .duration-icon{transform:scale(1.05)}.duration-icon.urgent{background:#fef3c7;color:#d97706}html.dark .duration-icon{background:#3b82f633}html.dark .duration-icon.urgent{background:#fbbf2433;color:#fbbf24}.duration-content{flex:1;min-width:0}.duration-title{display:block;font-weight:700;font-size:.9rem;color:#111827;line-height:1.2}html.dark .duration-title{color:#f9fafb}.duration-desc{display:block;font-size:.75rem;color:#6b7280;line-height:1.2}html.dark .duration-desc{color:#9ca3af}.duration-check{width:22px;height:22px;border-radius:50%;border:2px solid #e5e7eb;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.duration-check svg{opacity:0;transform:scale(.5);transition:all .2s ease;color:#fff}.duration-option.selected .duration-check{background:#3b82f6;border-color:transparent}.duration-option.selected .duration-check svg{opacity:1;transform:scale(1)}html.dark .duration-check{border-color:#ffffff26}.calendar-wrapper{display:flex;gap:3rem}.calendar-container{flex:1;min-width:0}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;padding:0 .25rem}.cal-month{font-weight:700;font-size:1.35rem;color:#111827}html.dark .cal-month{color:#f9fafb}.cal-nav{width:42px;height:42px;background:transparent;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;color:#6b7280;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.cal-nav:hover{background:#f3f4f6;border-color:#d1d5db;color:#374151}html.dark .cal-nav{background:transparent;border-color:#ffffff1a;color:#9ca3af}html.dark .cal-nav:hover{background:#ffffff0d;color:#e5e7eb}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.cal-day-name{text-align:center;font-size:.8rem;font-weight:600;color:#64748b;padding:1rem 0 .75rem;text-transform:uppercase;letter-spacing:.5px}html.dark .cal-day-name{color:#94a3b8}#calDays{display:contents}.cal-day{aspect-ratio:1;width:100%;max-width:60px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;border-radius:50%;cursor:pointer;transition:all .15s ease;color:#374151;font-weight:500;position:relative;background:transparent;border:none;margin:4px auto}html.dark .cal-day{color:#e5e7eb}.cal-day:hover:not(.disabled):not(.selected):not(.empty){background:#f3f4f6}html.dark .cal-day:hover:not(.disabled):not(.selected):not(.empty){background:#ffffff1a}.cal-day.disabled{color:#d1d5db;cursor:not-allowed}html.dark .cal-day.disabled{color:#4b5563}.cal-day.today:not(.selected){font-weight:700;color:#1d4ed8}.cal-day.today:not(.selected):before{content:"";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;background:#1d4ed8;border-radius:50%}html.dark .cal-day.today:not(.selected){color:#60a5fa}html.dark .cal-day.today:not(.selected):before{background:#60a5fa}.cal-day.selected{background:#1d4ed8;color:#fff;font-weight:600}.cal-day.has-slots:not(.disabled):not(.selected){font-weight:600;color:#1d4ed8;background:#dbeafe}html.dark .cal-day.has-slots:not(.disabled):not(.selected){color:#93c5fd;background:#3b82f633}.cal-day.empty{visibility:hidden}.times-container{flex:0 0 240px;border-left:1px solid #e5e7eb;padding-left:2rem;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUpSlot{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scalePopSlot{0%{opacity:0;transform:scale(.96)}60%{opacity:1;transform:scale(1.01)}to{transform:scale(1)}}html.dark .times-container{border-left-color:#ffffff1a}.times-header{margin-bottom:1.25rem}.times-header-text{font-weight:700;font-size:1.15rem;color:#111827}.times-header-sub{margin-top:.35rem;font-weight:500;font-size:.9rem;color:#6b7280}html.dark .times-header-text{color:#f9fafb}.times-list{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow-y:auto;overflow-x:visible;padding:0 12px}.times-list::-webkit-scrollbar{width:4px}.times-list::-webkit-scrollbar-track{background:transparent}.times-list::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:4px}html.dark .times-list::-webkit-scrollbar-thumb{background:#ffffff26}.times-placeholder{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 1rem;color:#9ca3af;text-align:center;font-size:.875rem}.times-placeholder svg{opacity:.4}.time-btn{width:100%;margin:0;padding:1rem 1.5rem;border:1px solid #1d4ed8;background:#fff;color:#1d4ed8;font-weight:600;font-size:1rem;border-radius:8px;cursor:pointer;transition:all .15s ease;text-align:center;transform-origin:center}.time-btn span{position:relative;z-index:1}.time-btn:hover{background:#1d4ed8;color:#fff}.time-btn.booked{background:#f3f4f6;border-color:#e5e7eb;color:#9ca3af;cursor:not-allowed}.time-btn.booked:hover{background:#f3f4f6;color:#9ca3af}html.dark .time-btn{background:transparent;border-color:#60a5fa;color:#60a5fa}html.dark .time-btn:hover{background:#3b82f6;color:#fff;border-color:#3b82f6}html.dark .time-btn.booked{background:#ffffff0d;border-color:#ffffff1f;color:#ffffff80}html.dark .time-btn.booked:hover{background:#ffffff0d;color:#ffffff80}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;opacity:0;visibility:hidden;transition:all .3s ease;border-radius:20px;z-index:10}.loading-overlay.active{opacity:1;visibility:visible}html.dark .loading-overlay{background:#19202df2}.loading-overlay span{color:#6b7280;font-weight:500}.loader{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.form-section{animation:slideIn .4s cubic-bezier(.4,0,.2,1)}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.back-btn{display:inline-flex;align-items:center;gap:.5rem;background:none;border:none;color:#6b7280;font-weight:600;cursor:pointer;padding:.5rem 0;margin-bottom:1rem;font-size:.9rem;transition:color .2s ease}.back-btn:hover{color:#3b82f6}.back-btn svg{transition:transform .2s ease}.back-btn:hover svg{transform:translate(-3px)}.selected-time-display{display:flex;align-items:center;gap:.75rem;background:linear-gradient(135deg,#eff6ff,#f5f3ff);border:1px solid #bfdbfe;border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.5rem;font-weight:600;color:#1e40af}.selected-time-display svg{color:#3b82f6;flex-shrink:0}html.dark .selected-time-display{background:linear-gradient(135deg,#3b82f626,#8b5cf626);border-color:#3b82f64d;color:#93c5fd}#bookingForm{display:flex;flex-direction:column;gap:1.25rem}.form-field{display:flex;flex-direction:column;gap:.5rem}.form-field label{font-weight:600;font-size:.875rem;color:#374151}html.dark .form-field label{color:#d1d5db}.form-field input,.form-field textarea{padding:.875rem 1rem;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;font-family:inherit;transition:all .2s ease;background:#fff}.form-field input:focus,.form-field textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f61a}.form-field input::placeholder,.form-field textarea::placeholder{color:#9ca3af}html.dark .form-field input,html.dark .form-field textarea{background:#141a24;border-color:#ffffff1a;color:#f9fafb}html.dark .form-field input:focus,html.dark .form-field textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f633}.form-field textarea{min-height:100px;resize:vertical}.submit-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;padding:1rem 1.5rem;font-size:1rem;font-weight:700;border-radius:12px;cursor:pointer;transition:all .2s ease;margin-top:.5rem;position:relative;overflow:hidden}.submit-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.submit-btn:hover:before{left:100%}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}.submit-btn:active{transform:translateY(0)}.submit-btn:disabled{background:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.btn-loader{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}.btn-loader[hidden]{display:none!important}.alert{padding:1rem 1.25rem;border-radius:12px;font-weight:500;margin-top:1rem;animation:fadeIn .3s ease}.alert.success{background:linear-gradient(135deg,#dcfce7,#d1fae5);color:#166534;border:1px solid #86efac}.alert.error{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b;border:1px solid #fca5a5}.success-section{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 2rem;animation:successPop .5s cubic-bezier(.4,0,.2,1)}.success-section[hidden]{display:none!important}@keyframes successPop{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.success-icon{width:80px;height:80px;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;color:#16a34a;animation:checkPop .6s ease .2s both}@keyframes checkPop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.success-section h2{font-size:1.5rem;font-weight:700;color:#111827;margin:0 0 .75rem}html.dark .success-section h2{color:#f9fafb}.success-message{color:#6b7280;margin:0 0 1.5rem}.success-details{background:#f3f4f6;border-radius:12px;padding:1rem 1.5rem;margin-bottom:1.5rem;font-weight:600;color:#374151}html.dark .success-details{background:#ffffff0d;color:#d1d5db}.book-another-btn{background:#fff;border:2px solid #e5e7eb;color:#374151;padding:.75rem 1.5rem;font-weight:600;font-size:.9rem;border-radius:10px;cursor:pointer;transition:all .2s ease}.book-another-btn:hover{border-color:#3b82f6;color:#3b82f6}html.dark .book-another-btn{background:transparent;border-color:#ffffff1a;color:#d1d5db}html.dark .book-another-btn:hover{border-color:#3b82f6;color:#60a5fa}@media (max-width: 900px){.booking-container{grid-template-columns:1fr}.booking-sidebar{border-right:none;border-bottom:1px solid #e5e7eb}html.dark .booking-sidebar{border-bottom-color:#ffffff14}.calendar-wrapper{flex-direction:column}.times-container{flex:none;border-left:none;border-top:1px solid #e5e7eb;padding-left:0;padding-top:1.5rem;margin-top:1rem}html.dark .times-container{border-top-color:#ffffff14}.times-list{flex-direction:row;flex-wrap:wrap;max-height:none}.time-btn{flex:0 0 auto}}@media (max-width: 480px){.booking-page{padding:0;align-items:flex-start}.booking-container{border-radius:0;min-height:100vh}.booking-sidebar,.booking-main{padding:1.25rem}.calendar-container{max-width:100%}.cal-day{font-size:.8rem}}
