@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";.navbar{z-index:9999;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#020257d9;border:1px solid #2a5caa26;width:100%;padding:.8rem 0;transition:all .3s;position:fixed;top:0;left:0;box-shadow:0 4px 20px #2a5caa14}.navbar-spacer{height:70px}.navbar.scrolled{background:#171616;border-bottom:1px solid #2a5caa;padding:.5rem 0;box-shadow:0 6px 25px #00000026}.nav-container{justify-content:space-between;align-items:center;width:100%;max-width:1400px;margin:0 auto;padding:0 2rem;display:flex}.logo{align-items:center;text-decoration:none;display:flex}.logo-wrapper{border-radius:16px;align-items:center;gap:12px;padding:4px 8px;transition:all .3s;display:flex}.logo-wrapper:hover{background:#ffffff0d}.logo-icon-wrapper{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1f;border-radius:14px;justify-content:center;align-items:center;width:48px;min-width:48px;height:48px;transition:all .3s;display:flex;overflow:hidden;box-shadow:0 4px 20px #00000026,inset 0 1px 2px #ffffff26}.logo-wrapper:hover .logo-icon-wrapper{transform:translateY(-2px);box-shadow:0 8px 24px #0003,inset 0 1px 2px #fff3}.logo-icon-img{object-fit:contain;width:36px;height:36px;display:block}.logo-text-wrapper{flex-direction:column;line-height:1.1;display:flex}.logo-text-main{color:#ffffffbf;letter-spacing:.5px;font-size:11px;font-weight:500}.logo-text-name{-webkit-text-fill-color:transparent;letter-spacing:.3px;background:linear-gradient(90deg,#fff,#9ec5ff);-webkit-background-clip:text;background-clip:text;font-size:24px;font-style:italic;font-weight:700}.nav-menu{align-items:center;gap:1rem;margin:0 1rem;display:flex}.nav-link{color:#faf6f6;letter-spacing:.3px;white-space:nowrap;padding:.5rem 0;font-size:.85rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block;position:relative}.nav-link:hover{color:#2a5caa;transform:translateY(-2px)}.nav-link.active{color:#2a5caa;font-weight:700}.active-indicator{background:linear-gradient(90deg,#2a5caa,#667eea);border-radius:3px;height:2px;position:absolute;bottom:-2px;left:0;right:0;box-shadow:0 0 8px #2a5caa66}.nav-actions{flex-shrink:0;align-items:center;gap:.75rem;display:flex}.btn-appointment,.btn-login,.btn-logout{letter-spacing:.3px;cursor:pointer;white-space:nowrap;border:none;border-radius:50px;padding:.5rem 1.2rem;font-size:.8rem;font-weight:600;transition:all .3s}.btn-appointment{color:#fff;background:linear-gradient(135deg,#2a5caa 0%,#3d6cb5 100%);box-shadow:0 4px 12px #2a5caa40}.btn-appointment:hover{background:linear-gradient(135deg,#1e4a8a 0%,#2a5caa 100%);transform:translateY(-2px);box-shadow:0 6px 20px #2a5caa59}.btn-login{color:#fff;background:0 0;border:1px solid #ffffff4d}.btn-login:hover{background:#ffffff1a;transform:translateY(-2px)}.btn-logout{color:#fff;background:#f44336cc}.btn-logout:hover{background:#f44336;transform:translateY(-2px)}.btn-dashboard-icon{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;color:#fff;background:#ffffff14;border:1.5px solid #ffffff59;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;font-size:18px;transition:all .3s;display:flex}.btn-dashboard-icon:hover{background:linear-gradient(135deg,#2f80ed,#56ccf2);border-color:#0000;box-shadow:0 8px 24px #2f80ed59}.btn-dashboard-icon i{pointer-events:none}.mobile-menu-btn{cursor:pointer;background:0 0;border:none;padding:.5rem;display:none}.hamburger{flex-direction:column;justify-content:space-between;width:22px;height:18px;display:flex;position:relative}.hamburger span{background:#fff;border-radius:2px;width:100%;height:2px;transition:all .3s}.hamburger.open span{background:#2a5caa}.hamburger.open span:first-child{transform:rotate(45deg)translate(4px,4px)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:rotate(-45deg)translate(6px,-6px)}.mobile-menu{background:#fff;border-top:1px solid #e2e8f0;max-height:calc(100vh - 80px);padding:1rem 0;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 10px 30px #00000026}.mobile-nav-link{color:#1a202c;letter-spacing:.3px;border-left:3px solid #0000;padding:.8rem 2rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .3s;display:block}.mobile-nav-link:hover{color:#2a5caa;background:linear-gradient(90deg,#2a5caa14,#0000);border-left-color:#2a5caa;padding-left:2rem}.mobile-nav-link.active{color:#2a5caa;background:linear-gradient(90deg,#2a5caa1f,#0000);border-left-color:#2a5caa;font-weight:700}.mobile-appointment-btn,.mobile-login-btn,.mobile-logout-btn,.mobile-dashboard-btn{letter-spacing:.3px;cursor:pointer;border:none;border-radius:50px;width:calc(100% - 3rem);margin:.5rem 1.5rem;padding:.8rem;font-size:.85rem;font-weight:700;transition:all .3s}.mobile-appointment-btn{color:#fff;background:linear-gradient(135deg,#2a5caa 0%,#3d6cb5 100%)}.mobile-appointment-btn:hover{background:linear-gradient(135deg,#1e4a8a 0%,#2a5caa 100%);transform:translateY(-2px)}.mobile-login-btn{color:#2a5caa;background:0 0;border:2px solid #2a5caa}.mobile-logout-btn{color:#fff;background:#f44336}.mobile-dashboard-btn{color:#fff;background:#4caf50}@media (width<=968px){.desktop-menu{display:none}.mobile-menu-btn{display:block}.nav-container{max-width:100%;padding:0 1.5rem}.btn-appointment,.btn-login,.btn-logout,.btn-dashboard-icon{display:none}.navbar-spacer{height:70px}.logo-text-name{font-size:20px}.logo-icon-wrapper{width:44px;min-width:44px;height:44px}.logo-icon-img{width:32px;height:32px}}@media (width<=768px){.logo-text-wrapper{display:none}.logo-wrapper{gap:0;padding:0}.logo-icon-wrapper{width:46px;min-width:46px;height:46px}.nav-container{padding:0 1rem}}@media (width<=576px){.navbar-spacer{height:60px}.mobile-nav-link{padding:.7rem 1.5rem;font-size:.85rem}.mobile-appointment-btn,.mobile-login-btn,.mobile-logout-btn,.mobile-dashboard-btn{width:calc(100% - 3rem);margin:.4rem 1.5rem;padding:.7rem;font-size:.8rem}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-x:hidden}html{scroll-behavior:smooth}button{font-family:inherit}.footer{color:#fff;background:#1a1a2e;margin-top:auto;padding:60px 0 20px}.footer-container{max-width:1200px;margin:0 auto;padding:0 20px}.footer-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:40px;display:grid}.footer-col h3{margin-bottom:20px;padding-bottom:10px;font-size:1.2rem;position:relative}.footer-col h3:after{content:"";background:linear-gradient(90deg,#667eea,#764ba2);width:40px;height:2px;position:absolute;bottom:0;left:0}.footer-col p{color:#aaa;margin-bottom:20px;line-height:1.6}.footer-col ul{padding:0;list-style:none}.footer-col ul li{margin-bottom:10px}.footer-col ul li a{color:#aaa;text-decoration:none;transition:color .3s}.footer-col ul li a:hover{color:#667eea}.contact-info li{color:#aaa;align-items:center;gap:10px;margin-bottom:10px;display:flex}.social-links{gap:15px;margin-top:20px;display:flex}.social-icon{color:#fff;background:#ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.2rem;text-decoration:none;transition:all .3s;display:flex}.social-icon:hover{background:#667eea;transform:translateY(-3px)}.footer-bottom{text-align:center;border-top:1px solid #ffffff1a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;padding-top:20px;display:flex}.footer-bottom p{color:#888;font-size:.9rem}.footer-bottom-links{gap:20px;display:flex}.footer-bottom-links a{color:#888;font-size:.9rem;text-decoration:none;transition:color .3s}.footer-bottom-links a:hover{color:#667eea}@media (width<=768px){.footer-bottom{text-align:center;flex-direction:column}.footer-bottom-links{justify-content:center}.footer-grid{gap:30px}}.admin-layout-container{background:#f5f7fa;min-height:100vh;display:flex;position:relative}.admin-sidebar{color:#fff;z-index:1000;background:linear-gradient(#2a5caa 0%,#1e3a6b 100%);flex-direction:column;width:280px;height:100vh;transition:width .3s;display:flex;position:fixed;top:0;left:0;overflow:hidden auto;box-shadow:2px 0 10px #0000001a}.admin-sidebar.collapsed{width:80px}.admin-sidebar-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:20px;display:flex}.admin-sidebar-brand h2{white-space:nowrap;margin:0;font-size:1.2rem}.admin-sidebar-user{margin-top:8px}.admin-sidebar-name{font-size:13px}.admin-sidebar-role{opacity:.7;font-size:11px}.sidebar-collapse-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;width:30px;height:30px;font-size:14px;transition:all .3s}.sidebar-collapse-btn:hover{background:#fff3;transform:scale(1.1)}.admin-sidebar-nav{flex:1;padding:20px 10px;overflow-y:auto}.admin-nav-link{color:#fff;white-space:nowrap;cursor:pointer;border-radius:8px;align-items:center;gap:15px;margin-bottom:5px;padding:12px 15px;text-decoration:none;transition:all .3s;display:flex}.admin-nav-link:hover{background:#ffffff1a;transform:translate(5px)}.admin-nav-icon{text-align:center;min-width:30px;font-size:20px}.admin-nav-icon-small{text-align:center;min-width:25px;font-size:16px}.admin-nav-label{flex:1}.dropdown-arrow{margin-left:auto;font-size:12px}.admin-dropdown-menu{margin-bottom:5px;padding-left:20px}.dropdown-item{opacity:.9;padding:10px 15px;font-size:13px}.admin-sidebar-footer{border-top:1px solid #ffffff1a;padding:15px}.admin-logout-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:8px;align-items:center;gap:10px;width:100%;padding:12px;font-weight:700;transition:all .3s;display:flex}.admin-logout-btn:hover{background:#fff3;transform:translateY(-2px)}.admin-main-content{flex:1;min-height:100vh;margin-left:280px;transition:margin-left .3s}.admin-main-content.content-collapsed{margin-left:80px}.admin-top-bar{z-index:100;background:#fff;padding:15px 30px;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.admin-welcome{font-size:1rem}.admin-page-content{padding:25px}@media (width<=768px){.mobile-menu-toggle-btn{display:flex!important}.mobile-menu-overlay{display:block}.admin-sidebar{transition:transform .3s;transform:translate(-100%);width:280px!important}.admin-sidebar.mobile-open{transform:translate(0)}.admin-main-content{margin-left:0!important}.admin-page-content{padding:15px!important}.admin-top-bar{padding:12px 15px!important}.admin-welcome{font-size:.9rem}}@media (width<=576px){.mobile-menu-toggle-btn{width:45px;height:45px;font-size:20px;bottom:15px;right:15px}.admin-page-content{padding:12px!important}.admin-sidebar.mobile-open{max-width:280px;width:85%!important}.admin-sidebar-header{padding:15px}.admin-nav-link{padding:10px 12px}.admin-nav-icon{min-width:25px;font-size:18px}}@media (width>=769px){.admin-sidebar{transform:translate(0)!important}}.user-layout-container{background:#f5f7fa;min-height:100vh;display:flex;position:relative}.user-sidebar-new{color:#fff;z-index:1000;background:linear-gradient(#2a5caa 0%,#1e3a6b 100%);flex-direction:column;width:280px;height:100vh;transition:width .3s;display:flex;position:fixed;top:0;left:0;overflow:hidden auto;box-shadow:2px 0 10px #0000001a}.user-sidebar-new.collapsed{width:80px}.sidebar-header-new{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:20px;display:flex}.sidebar-header-new h2{white-space:nowrap;margin:0;font-size:1.2rem}.collapse-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;width:30px;height:30px;font-size:14px;transition:all .3s}.collapse-btn:hover{background:#fff3;transform:scale(1.1)}.user-info-new{text-align:center;border-bottom:1px solid #ffffff1a;padding:20px}.user-avatar-new{background:linear-gradient(135deg,#ff9800 0%,#f57c00 100%);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 15px;font-size:32px;font-weight:700;display:flex}.user-details-new h4{margin:0 0 5px;font-size:16px}.user-details-new p{opacity:.8;margin:0;font-size:12px}.user-nav-new{flex:1;padding:20px 10px}.nav-link-new{color:#fff;white-space:nowrap;border-radius:8px;align-items:center;gap:15px;margin-bottom:5px;padding:12px 15px;text-decoration:none;transition:all .3s;display:flex}.nav-link-new:hover{background:#ffffff1a;transform:translate(5px)}.nav-icon-new{text-align:center;min-width:30px;font-size:20px}.logout-btn-new{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:8px;align-items:center;gap:10px;margin:15px;padding:12px;font-weight:700;transition:all .3s;display:flex}.logout-btn-new:hover{background:#fff3;transform:translateY(-2px)}.user-main-new{flex:1;min-height:100vh;margin-left:280px;transition:margin-left .3s}.user-main-new.content-collapsed{margin-left:80px}.top-bar-new{z-index:100;background:#fff;padding:15px 30px;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.top-bar-new h2{color:#333;margin:0;font-size:1.2rem}.user-content-new{padding:25px}.mobile-menu-toggle-btn{z-index:1001;color:#fff;cursor:pointer;background:#2a5caa;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:24px;display:none;position:fixed;bottom:20px;right:20px;box-shadow:0 4px 15px #0003}.mobile-menu-overlay{z-index:999;background:#00000080;display:none;position:fixed;inset:0}@media (width<=768px){.mobile-menu-toggle-btn{display:flex!important}.mobile-menu-overlay{display:block}.user-sidebar-new{transition:transform .3s;transform:translate(-100%);width:280px!important}.user-sidebar-new.mobile-open{transform:translate(0)}.user-main-new{margin-left:0!important}.user-content-new{padding:15px!important}.top-bar-new{padding:12px 15px!important}.top-bar-new h2{font-size:1rem}}@media (width<=576px){.mobile-menu-toggle-btn{width:45px;height:45px;font-size:20px;bottom:15px;right:15px}.user-content-new{padding:12px!important}.user-sidebar-new.mobile-open{max-width:280px;width:85%!important}}@media (width>=769px){.user-sidebar-new{transform:translate(0)!important}}*{box-sizing:border-box;margin:0;padding:0}body{background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:0 20px}@media (width<=768px){.container{padding:0 15px}}@media (width<=576px){.container{padding:0 12px}}.hero-section{background-image:url(/facial.avif);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:0 0 40px 40px;justify-content:center;align-items:center;min-height:90vh;margin-top:0;display:flex;position:relative;overflow:hidden}.hero-overlay{z-index:1;background:linear-gradient(135deg,#000000b3 0%,#00000080 100%);position:absolute;inset:0}.hero-bg-animation{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.circle{pointer-events:none;background:#ffffff1a;border-radius:50%;position:absolute}.circle-1{width:300px;height:300px;top:-100px;left:-100px}.circle-2{width:500px;height:500px;bottom:-200px;right:-200px}.hero-content{z-index:2;text-align:center;color:#fff;max-width:800px;padding:0 20px;position:relative}.hero-content h1{margin-bottom:1rem;font-size:clamp(2.5rem,5vw,4rem);font-weight:700}.hero-content .highlight{color:#ffd966}.hero-content p{opacity:.9;max-width:600px;margin:0 auto 2rem;font-size:clamp(1rem,2vw,1.2rem)}.hero-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.btn-primary{color:#667eea;cursor:pointer;background:#fff;border:none;border-radius:50px;padding:12px 32px;font-size:1rem;font-weight:700;transition:all .3s;box-shadow:0 10px 20px #0000001a}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px #00000026}.btn-secondary{color:#fff;cursor:pointer;background:0 0;border:2px solid #fff;border-radius:50px;padding:12px 32px;font-size:1rem;font-weight:700;transition:all .3s}.btn-secondary:hover{color:#667eea;background:#fff;transform:translateY(-3px)}.hero-stats{flex-wrap:wrap;justify-content:center;gap:3rem;margin-top:4rem;display:flex}.stat-item{text-align:center}.stat-item h3{color:#ffd966;margin:0;font-size:2rem}.stat-item p{opacity:.8;margin:0;font-size:.9rem}@media (width<=768px){.hero-section{border-radius:0 0 20px 20px;min-height:80vh}.hero-stats{gap:1.5rem;margin-top:2rem}.stat-item h3{font-size:1.5rem}.hero-buttons{gap:.8rem}.btn-primary,.btn-secondary{padding:10px 20px;font-size:.9rem}}@media (width<=576px){.hero-section{min-height:70vh}.hero-stats{gap:1rem}.stat-item h3{font-size:1.2rem}.stat-item p{font-size:.75rem}.hero-buttons{flex-direction:column;align-items:center}.btn-primary,.btn-secondary{text-align:center;width:80%}}.doctor-section{max-width:1200px;margin:0 auto;padding:80px 20px}.doctor-section h2{text-align:center;color:#333;margin-bottom:2rem;font-size:clamp(2rem,4vw,2.5rem)}.doctor-section .highlight{color:#667eea}.doctor-profile{background:#fff;border-radius:20px;flex-wrap:wrap;justify-content:center;align-items:center;gap:3rem;padding:40px;display:flex;box-shadow:0 10px 30px #0000001a}.doctor-image-large{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:250px;height:250px;transition:all .3s;display:flex;overflow:hidden;box-shadow:0 20px 30px #0003}.doctor-image-large img{object-fit:cover;width:100%;height:100%}.doctor-details{flex:1;min-width:250px}.doctor-details h3{color:#2a5caa;margin-bottom:.5rem;font-size:1.8rem}.doctor-details .specialization{color:#667eea;margin-bottom:.5rem;font-weight:700}.doctor-details .qualification{color:#666;margin-bottom:1rem;font-size:.9rem}.doctor-details .experience{color:#666;margin-bottom:1rem}.doctor-details .doctor-bio{color:#666;margin-bottom:1.5rem;line-height:1.6}@media (width<=768px){.doctor-section{padding:50px 15px}.doctor-profile{gap:1.5rem;padding:25px}.doctor-image-large{width:180px;height:180px}.doctor-details h3{font-size:1.5rem}.doctor-details .doctor-bio{font-size:.9rem}}@media (width<=576px){.doctor-section{padding:40px 15px}.doctor-profile{text-align:center;flex-direction:column;padding:20px}.doctor-image-large{width:150px;height:150px}.doctor-details{text-align:center}.doctor-details h3{font-size:1.3rem}}.services-section{background:#f8f9fa;border-radius:40px;padding:80px 20px}.services-section h2{text-align:center;color:#333;margin-bottom:1rem;font-size:clamp(2rem,4vw,2.5rem)}.services-section .highlight{color:#667eea}.section-subtitle{text-align:center;color:#666;margin-bottom:3rem}.services-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:1200px;margin:0 auto;display:grid}.service-card{text-align:center;cursor:pointer;z-index:1;background:#fff;border:2px solid #e0e0e0;border-radius:15px;padding:30px;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 5px 20px #0000000d}.service-card:before{content:"";transform-origin:0;z-index:-1;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);transition:transform .4s cubic-bezier(.4,0,.2,1);position:absolute;inset:0;transform:scaleX(0)}.service-card:hover:before{transform:scaleX(1)}.service-card:hover{border-color:#0000;transform:translateY(-10px);box-shadow:0 20px 40px #667eea4d}.service-icon{margin-bottom:15px;font-size:48px;transition:all .3s}.service-card:hover .service-icon{filter:brightness(0)invert();transform:scale(1.1)}.service-card h3{color:#333;z-index:2;margin-bottom:10px;font-weight:600;transition:color .3s;position:relative}.service-card:hover h3{color:#fff}.service-card p{color:#666;z-index:2;margin-bottom:20px;line-height:1.6;transition:color .3s;position:relative}.service-card:hover p{color:#ffffffe6}.service-footer{z-index:2;border-top:1px solid #eee;justify-content:space-between;align-items:center;padding-top:15px;transition:all .3s;display:flex;position:relative}.service-card:hover .service-footer{border-top-color:#ffffff4d}.price{color:#4caf50;font-size:1.2rem;font-weight:700;transition:color .3s}.service-card:hover .price{color:#ffd966}.duration{color:#666;transition:color .3s}.service-card:hover .duration{color:#fffc}.view-all{text-align:center;margin-top:40px}.btn-outline{color:#667eea;border:2px solid #667eea;border-radius:50px;padding:12px 35px;font-weight:700;text-decoration:none;transition:all .3s;display:inline-block}.btn-outline:hover{color:#fff;background:#667eea;transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}@media (width<=768px){.services-section{padding:50px 15px}.services-grid{gap:20px}.service-card{padding:20px}.service-icon{font-size:36px}.service-card h3{font-size:1.2rem}}@media (width<=576px){.services-section{padding:40px 15px}.services-grid{grid-template-columns:1fr;gap:15px}.service-card{padding:18px}.price{font-size:1rem}.duration{font-size:.8rem}}.testimonials-section{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:80px 20px}.testimonials-section h2{text-align:center;margin-bottom:2rem;font-size:clamp(2rem,4vw,2.5rem)}.testimonials-section .highlight{color:#ffd966}.testimonials-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;margin:0 auto;display:grid}.testimonial-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:15px;padding:30px;transition:all .3s;position:relative}.testimonial-card:hover{background:#fff3;transform:translateY(-5px)}.quote{color:#ffd966;opacity:.3;font-size:60px;position:absolute;top:10px;left:20px}.testimonial-text{margin-bottom:20px;font-size:1rem;font-style:italic;line-height:1.6}.rating{color:#ffd966;margin-bottom:10px}.patient-name{font-weight:700}@media (width<=768px){.testimonials-section{padding:50px 15px}.testimonials-grid{gap:20px}.testimonial-card{padding:20px}.testimonial-text{font-size:.9rem}}@media (width<=576px){.testimonials-section{padding:40px 15px}.testimonials-grid{grid-template-columns:1fr}.quote{font-size:40px}}.cta-section{text-align:center;color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:80px 20px}.cta-content{max-width:800px;margin:0 auto}.cta-content h2{margin-bottom:1rem;font-size:clamp(1.8rem,4vw,2.5rem)}.cta-content p{opacity:.9;margin-bottom:2rem;font-size:1.1rem}.btn-large{color:#667eea;cursor:pointer;background:#fff;border:none;border-radius:50px;padding:14px 40px;font-size:1.1rem;font-weight:700;transition:all .3s;box-shadow:0 10px 20px #0003}.btn-large:hover{transform:translateY(-3px);box-shadow:0 15px 30px #0000004d}@media (width<=768px){.cta-section{padding:50px 20px}.btn-large{padding:12px 30px;font-size:1rem}}@media (width<=576px){.cta-section{padding:40px 15px}.cta-content p{font-size:.9rem}.btn-large{width:80%;padding:10px 25px;font-size:.9rem}}.page-hero{color:#fff;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:0 0 30px 30px;padding:80px 20px}.page-hero h1{margin-bottom:20px;font-size:clamp(2rem,5vw,3rem)}.page-hero .highlight{color:#ffd966}.page-hero p{opacity:.95;max-width:600px;margin:0 auto;font-size:1.2rem}.story-section{background:#fff;padding:80px 20px}.story-grid{grid-template-columns:1fr 1fr;align-items:center;gap:50px;max-width:1200px;margin:0 auto;display:grid}.story-content h2{color:#333;margin-bottom:20px;font-size:2rem}.story-content .highlight{color:#667eea}.story-content p{color:#666;margin-bottom:20px;line-height:1.8}.story-image .image-placeholder{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;justify-content:center;align-items:center;width:100%;height:400px;font-size:100px;display:flex}@media (width<=768px){.page-hero{padding:50px 20px}.story-section{padding:50px 15px}.story-grid{grid-template-columns:1fr;gap:30px}.story-content h2{font-size:1.5rem}.story-image .image-placeholder{height:300px;font-size:70px}}@media (width<=576px){.page-hero{padding:40px 15px}.page-hero h1{font-size:1.8rem}.page-hero p{font-size:.9rem}.story-section{padding:40px 15px}.story-content h2{font-size:1.3rem}.story-content p{font-size:.9rem}.story-image .image-placeholder{height:250px;font-size:50px}}:root{--bg1:#0b1020;--bg2:#0f1a33;--gold:#d4af37;--gold-soft:#d4af3726;--gold-light:#d4af3714;--text:#1a1a2e;--text-light:#2d2d4a;--muted:#0000008c;--muted-light:#0006;--white-soft:#ffffffeb;--shadow-sm:0 10px 30px #0000001a;--shadow-md:0 20px 50px #0003;--shadow-lg:0 30px 80px #00000059}*{box-sizing:border-box;font-family:Inter,sans-serif}.auth-page-wrapper{background:linear-gradient(135deg, var(--bg1), var(--bg2));justify-content:center;align-items:center;min-height:100vh;padding:40px 24px;display:flex;position:relative;overflow:hidden}.auth-page-wrapper:before,.auth-page-wrapper:after{content:"";filter:blur(100px);opacity:.3;pointer-events:none;border-radius:50%;position:absolute}.auth-page-wrapper:before{background:radial-gradient(circle, var(--gold), transparent);width:500px;height:500px;animation:20s ease-in-out infinite floatGlow;top:-150px;right:-150px}.auth-page-wrapper:after{background:radial-gradient(circle,#3aa8a0,#0000);width:600px;height:600px;animation:25s ease-in-out infinite reverse floatGlow;bottom:-200px;left:-200px}@keyframes floatGlow{0%,to{transform:translate(0)}50%{transform:translate(30px,-30px)}}.auth-card-single{-webkit-backdrop-filter:blur(20px);width:1100px;max-width:100%;height:80vh;min-height:480px;max-height:90vh;box-shadow:var(--shadow-lg);background:#ffffffe0;border:1px solid #ffffff80;border-radius:32px;grid-template-columns:1fr 1fr;transition:all .3s;display:grid;overflow:hidden}.auth-form-content{background:#fffffff0;flex-direction:column;justify-content:flex-start;gap:20px;max-height:90vh;padding:40px 44px;display:flex;overflow-y:auto}.auth-form-content::-webkit-scrollbar{width:4px}.auth-form-content::-webkit-scrollbar-track{background:#0000000d;border-radius:10px}.auth-form-content::-webkit-scrollbar-thumb{background:var(--gold);border-radius:10px}.auth-header{text-align:left;margin-bottom:0}.auth-header h1,.auth-header h2{letter-spacing:-.02em;background:linear-gradient(135deg,#1a1a2e,#2d2d5e);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:34px;font-weight:800;line-height:1.2}.auth-header h2{font-size:30px}.auth-header p{color:var(--muted);letter-spacing:-.2px;margin-top:6px;font-size:14px;font-weight:500;line-height:1.4}.auth-form{flex-direction:column;gap:18px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{letter-spacing:.8px;text-transform:uppercase;color:var(--muted-light);font-size:11px;font-weight:700}.form-hint{color:#0000008c;margin-top:6px;font-size:12px;line-height:1.5}.back-link{color:var(--text);font-weight:700;text-decoration:none}.back-link:hover{color:var(--gold)}.input-with-icon{width:100%;position:relative}.input-with-icon input{width:100%;color:var(--text);box-sizing:border-box;background:#fffffff2;border:1.5px solid #00000014;border-radius:14px;font-size:14px;font-weight:500;transition:all .25s;padding:14px 14px 14px 48px!important}.input-with-icon input::placeholder{color:#00000059;font-weight:400}.input-with-icon input:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft);background:#fff;outline:none}.input-with-icon input.error{border-color:#f44336}.input-icon{opacity:.5;pointer-events:none;z-index:2;font-size:16px;transition:opacity .25s;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.input-with-icon input:focus+.input-icon{opacity:.8;color:var(--gold)}.password-toggle{cursor:pointer;color:#0006;z-index:2;background:0 0;border:none;padding:0;font-size:16px;transition:color .25s;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.password-toggle:hover{color:var(--gold)}.error-text{color:#f44336;margin-top:4px;padding-left:4px;font-size:11px}.form-options{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 4px;font-size:12px;display:flex}.checkbox{cursor:pointer;color:var(--muted);align-items:center;gap:8px;font-weight:500;display:flex}.checkbox input{cursor:pointer;width:15px;height:15px;accent-color:var(--gold)}.forgot-link{color:var(--gold);font-size:12px;font-weight:600;text-decoration:none;transition:color .25s}.forgot-link:hover{color:#b8941f;text-decoration:underline}.auth-btn{cursor:pointer;color:#1a1a2e;letter-spacing:.8px;background:linear-gradient(135deg,#d4af37,#f5e6a3,#c9a227);border:none;border-radius:16px;margin-top:12px;padding:14px 24px;font-size:14px;font-weight:800;transition:all .3s cubic-bezier(.2,.9,.4,1.1);position:relative;overflow:hidden}.auth-btn:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.auth-btn:hover:before{left:100%}.auth-btn:hover{transform:translateY(-2px);box-shadow:0 15px 35px #d4af374d}.auth-btn:active{transform:translateY(1px)}.auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.auth-image-layer{background:linear-gradient(135deg,#1a1a3a,#0d1b2a);height:100%;min-height:0;position:relative;overflow:hidden}.auth-bg-image{object-fit:cover;width:100%;height:100%;transition:transform 8s;display:block;transform:scale(1.05)}.auth-card-single:hover .auth-bg-image{transform:scale(1.12)}.image-gradient-overlay{background:linear-gradient(270deg,#000000b3 0%,#00000059 35%,#ffffff0d 100%);position:absolute;inset:0}.image-text-overlay{color:#fff;z-index:2;position:absolute;bottom:40px;left:35px;right:35px}.overlay-badge{letter-spacing:2px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#d4af3733;border:1px solid #d4af3780;border-radius:40px;margin-bottom:14px;padding:6px 16px;font-size:10px;font-weight:600;display:inline-block}.image-text-overlay h3{text-shadow:0 2px 10px #0000004d;letter-spacing:-.02em;margin-bottom:8px;font-size:28px;font-weight:800;line-height:1.2}.image-text-overlay p{opacity:.9;text-shadow:0 1px 5px #0003;margin-top:6px;font-size:13px;font-weight:500;line-height:1.4}.role-grid{gap:12px;margin-top:16px;display:grid}.role-card{cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffd9;border:1px solid #0000000f;border-radius:18px;align-items:center;padding:14px 18px;transition:all .3s cubic-bezier(.2,.9,.4,1.1);display:flex}.role-card:hover{box-shadow:var(--shadow-sm);border-color:var(--gold-soft);background:#fff;transform:translateY(-2px)}.role-icon{text-align:center;width:48px;font-size:32px}.role-info{flex:1;padding:0 12px}.role-info h3{color:var(--text);margin:0 0 4px;font-size:15px;font-weight:800}.role-info p{color:var(--muted);margin:0;font-size:11px;font-weight:500;line-height:1.3}.role-arrow{color:var(--gold);opacity:0;font-size:22px;transition:all .3s;transform:translate(-10px)}.role-card:hover .role-arrow{opacity:1;transform:translate(0)}.selected-role-badge{color:#fff;letter-spacing:.5px;border-radius:50px;margin-bottom:16px;padding:6px 18px;font-size:12px;font-weight:700;display:inline-block;box-shadow:0 4px 15px #00000026}.auth-footer{text-align:center;color:var(--muted);margin-top:24px;font-size:12px;font-weight:500}.auth-footer a{color:var(--gold);font-weight:700;text-decoration:none;transition:color .25s}.auth-footer a:hover{color:#b8941f;text-decoration:underline}.footer-note{color:#00000073;margin-top:10px;font-size:10px;font-weight:400;line-height:1.4}.checkbox-group{margin:2px 0}.checkbox-group .checkbox{flex-wrap:wrap;align-items:flex-start;gap:10px;display:flex}.checkbox-group .checkbox input{flex-shrink:0;margin-top:2px}.checkbox-group .checkbox span{color:var(--muted);font-size:11px;font-weight:500;line-height:1.4}.checkbox-group .checkbox a{color:var(--gold);font-weight:700;text-decoration:none;transition:color .25s}.checkbox-group .checkbox a:hover{color:#b8941f;text-decoration:underline}.loading-spinner{animation:.8s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.global-back-btn{z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--gold);cursor:pointer;background:#ffffff1f;border:1px solid #d4af374d;border-radius:50px;padding:8px 20px;font-size:13px;font-weight:700;transition:all .3s;position:fixed;top:30px;right:30px}.global-back-btn:hover{border-color:var(--gold);background:#d4af3733;transform:translate(-5px)}@media (width<=1024px){.auth-page-wrapper{padding:30px 20px}.auth-form-content{gap:18px;padding:32px 36px}.auth-header h1{font-size:30px}.auth-header h2{font-size:26px}.image-text-overlay h3{font-size:24px}.image-text-overlay{bottom:30px;left:30px;right:30px}.input-with-icon input{padding:13px 13px 13px 46px!important}}@media (width<=900px){.auth-card-single{grid-template-columns:1fr;height:auto;max-height:none}.auth-image-layer{order:-1;height:260px}.auth-form-content{max-height:none;padding:30px 32px;overflow-y:visible}.image-gradient-overlay{background:linear-gradient(#0000001a 0%,#0000004d 50%,#000000b3 100%)}.global-back-btn{top:20px;right:20px}}@media (width<=768px){.auth-page-wrapper{align-items:center;padding:20px 16px}.auth-form-content{gap:16px;padding:28px 24px}.auth-header h1{font-size:26px}.auth-header h2{font-size:22px}.auth-header p{font-size:13px}.input-with-icon input{font-size:13px;padding:12px 12px 12px 44px!important}.input-icon{font-size:15px;left:14px}.password-toggle{font-size:15px;right:12px}.auth-image-layer{height:220px}.image-text-overlay h3{font-size:20px}.image-text-overlay p{font-size:11px}.overlay-badge{margin-bottom:10px;padding:5px 14px;font-size:9px}.global-back-btn{padding:6px 16px;font-size:12px}}@media (width<=480px){.auth-page-wrapper{padding:16px 12px}.auth-form-content{gap:14px;padding:24px 18px}.auth-header h1{font-size:24px}.auth-header h2{font-size:20px}.auth-header p{font-size:12px}.input-with-icon input{font-size:12px;padding:11px 11px 11px 40px!important}.input-icon{font-size:14px;left:12px}.password-toggle{font-size:14px;right:11px}.form-group label{font-size:10px}.form-options{font-size:11px}.auth-btn{padding:12px 20px;font-size:13px}.auth-image-layer{height:180px}.image-text-overlay{bottom:20px;left:20px;right:20px}.image-text-overlay h3{margin-bottom:4px;font-size:16px}.image-text-overlay p{font-size:10px}.overlay-badge{margin-bottom:8px;padding:4px 12px;font-size:8px}.global-back-btn{padding:5px 14px;font-size:11px;top:15px;right:15px}.checkbox-group .checkbox span{font-size:10px}.auth-footer{margin-top:18px;font-size:11px}.footer-note{font-size:9px}}@media (width<=360px){.auth-form-content{padding:20px 14px}.auth-header h1{font-size:22px}.input-with-icon input{padding:10px 10px 10px 38px!important}.checkbox-group .checkbox span{font-size:9px;line-height:1.3}.image-text-overlay h3{font-size:14px}}.no-scrollbar{overflow:hidden}.no-scrollbar .auth-form-content{scrollbar-width:none;-ms-overflow-style:none;overflow-y:auto}.no-scrollbar .auth-form-content::-webkit-scrollbar{display:none}.auth-center-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.success-box{animation:.4s ease-out slideDown}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.dashboard-container{max-width:1400px;margin:0 auto;padding:20px}.stat-card{transition:all .3s}.stat-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #00000026!important}.btn{cursor:pointer;border:none;border-radius:5px;padding:10px 20px;font-weight:700;transition:all .3s}.btn-primary{color:#fff;background:#2196f3}.btn-primary:hover{background:#1976d2;transform:translateY(-2px);box-shadow:0 5px 15px #2196f34d}.btn-secondary{color:#fff;background:#ff9800}.btn-secondary:hover{background:#f57c00;transform:translateY(-2px);box-shadow:0 5px 15px #ff98004d}.btn-success{color:#fff;background:#4caf50}.btn-success:hover{background:#388e3c;transform:translateY(-2px);box-shadow:0 5px 15px #4caf504d}.loading{justify-content:center;align-items:center;height:400px;display:flex}@media (width<=768px){.dashboard-container{padding:10px}.stats-grid{grid-template-columns:1fr}}.user-dashboard{max-width:1200px;margin:0 auto}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px;display:grid}.stat-card{background:#fff;border-radius:15px;align-items:center;gap:20px;padding:25px;transition:all .3s;display:flex;box-shadow:0 4px 15px #0000001a}.stat-icon{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;justify-content:center;align-items:center;width:60px;height:60px;font-size:40px;display:flex}.stat-content h3{color:#666;text-transform:uppercase;margin:0 0 5px;font-size:14px}.stat-value{color:#333;margin:0;font-size:28px;font-weight:700}.next-appointment-card{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:15px;margin-bottom:30px;padding:30px;box-shadow:0 10px 30px #667eea4d}.next-appointment-card h3{margin:0 0 20px;font-size:20px}.appointment-details{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px;display:grid}.detail-item{flex-direction:column;gap:5px;display:flex}.detail-item .label{opacity:.8;font-size:12px}.detail-item .value{font-size:16px;font-weight:700}.view-link{color:#fff;opacity:.9;font-weight:700;text-decoration:none;transition:opacity .3s}.view-link:hover{opacity:1;text-decoration:underline}.no-appointment-card{text-align:center;background:#fff;border-radius:15px;margin-bottom:30px;padding:40px;box-shadow:0 4px 15px #0000001a}.no-appointment-card p{color:#666;margin:0 0 20px;font-size:16px}.book-btn{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:8px;padding:12px 30px;font-weight:700;text-decoration:none;transition:all .3s;display:inline-block}.book-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.recent-activity{background:#fff;border-radius:15px;padding:25px;box-shadow:0 4px 15px #0000001a}.recent-activity h3{color:#333;margin:0 0 20px}.activity-list{flex-direction:column;gap:15px;display:flex}.activity-item{background:#f8f9fa;border-radius:10px;align-items:center;gap:15px;padding:15px;transition:all .3s;display:flex}.activity-item:hover{background:#f0f0f0}.activity-icon{background:#fff;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex;box-shadow:0 2px 5px #0000001a}.activity-details{flex:1}.activity-title{color:#333;margin:0 0 5px;font-weight:500}.activity-date{color:#999;font-size:12px}.activity-status{border-radius:20px;padding:5px 10px;font-size:12px;font-weight:700}.activity-status.pending{color:#ff9800;background:#fff3e0}.activity-status.completed,.activity-status.success{color:#4caf50;background:#e8f5e8}.book-appointment{max-width:900px;margin:0 auto}.booking-steps{justify-content:space-between;margin:30px 0;display:flex;position:relative}.step-wrapper{flex:1;align-items:center;display:flex}.step{z-index:1;flex-direction:column;align-items:center;display:flex;position:relative}.step-number{color:#666;background:#e0e0e0;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:5px;font-weight:700;transition:all .3s;display:flex}.step.active .step-number{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.step-title{color:#999;font-size:12px;transition:color .3s}.step.active .step-title{color:#667eea;font-weight:700}.step-line{background:#e0e0e0;flex:1;height:2px;margin:0 10px;transition:background .3s}.step-line.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.booking-content{background:#fff;border-radius:15px;min-height:400px;padding:30px;box-shadow:0 4px 20px #0000001a}.doctors-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px;display:grid}.doctor-card{text-align:center;cursor:pointer;background:#f8f9fa;border-radius:10px;padding:20px;transition:all .3s}.doctor-card:hover{background:#f0f0f0;box-shadow:0 5px 15px #0000001a}.doctor-avatar{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 15px;font-size:40px;display:flex;overflow:hidden}.doctor-avatar img{object-fit:cover;width:100%;height:100%}.doctor-card h3{color:#333;margin:0 0 5px;font-size:16px}.doctor-card p{color:#666;margin:0;font-size:14px}.datetime-selector{margin-top:20px}.date-picker{border:2px solid #e0e0e0;border-radius:8px;width:100%;margin-bottom:20px;padding:12px;font-size:16px}.time-slots{margin-top:20px}.time-slots h3{color:#333;margin:0 0 15px}.slots-grid{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;display:grid}.slot-btn{cursor:pointer;background:#f8f9fa;border:2px solid #e0e0e0;border-radius:8px;padding:10px;font-size:14px;transition:all .3s}.slot-btn:hover{background:#e0e0e0}.slot-btn.selected{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#0000}.details-form{max-width:500px;margin:20px auto 0}.next-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;width:100%;margin-top:20px;padding:12px;font-size:16px;font-weight:700}.confirmation-card{max-width:500px;margin:20px auto 0}.confirm-details{background:#f8f9fa;border-radius:10px;margin-bottom:20px;padding:20px}.detail-row{border-bottom:1px solid #e0e0e0;justify-content:space-between;padding:10px 0;display:flex}.my-appointments{max-width:1000px;margin:0 auto}.page-header{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.page-header h1{color:#333;margin:0;font-size:28px}.book-new-btn{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:8px;padding:12px 24px;font-weight:700;text-decoration:none;transition:all .3s;display:inline-block}.book-new-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea4d}.filter-tabs{flex-wrap:wrap;gap:10px;margin-bottom:25px;display:flex}.filter-tab{color:#666;cursor:pointer;background:#f0f0f0;border:2px solid #0000;border-radius:20px;align-items:center;gap:8px;padding:10px 20px;font-weight:600;transition:all .3s;display:flex}.filter-tab .count{background:#667eea1a;border-radius:10px;padding:2px 8px;font-size:12px}.filter-tab.active{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#667eea}.filter-tab.active .count{background:#fff3}.appointments-list{flex-direction:column;gap:15px;display:flex}.appointment-card{cursor:pointer;background:#fff;border-left:4px solid #667eea;border-radius:12px;padding:20px;transition:all .3s;box-shadow:0 2px 8px #0000001a}.appointment-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.appointment-header{justify-content:space-between;align-items:center;display:flex}.appointment-info h3{color:#333;margin:0 0 5px;font-size:18px}.appointment-time{color:#666;margin:0;font-size:14px}.appointment-status{gap:10px;display:flex}.status-badge{color:#fff;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700}.appointment-details-expanded{border-top:1px solid #e0e0e0;margin-top:20px;padding-top:20px}.details-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px;display:grid}.detail-item label{color:#999;text-transform:uppercase;margin-bottom:5px;font-size:12px;display:block}.detail-item p{color:#333;margin:0;font-weight:500}.notes-section{background:#f9f9f9;border-radius:8px;margin-bottom:15px;padding:15px}.notes-section label{color:#999;text-transform:uppercase;margin-bottom:5px;font-size:12px;display:block}.notes-section p{color:#333;margin:0}.appointment-actions{gap:10px;display:flex}.cancel-btn{color:#fff;cursor:pointer;background:#f44336;border:none;border-radius:6px;padding:8px 16px;font-weight:700;transition:all .3s}.cancel-btn:hover{background:#da190b;transform:translateY(-2px)}.pay-btn{color:#fff;background:#4caf50;border-radius:6px;padding:8px 16px;font-weight:700;text-decoration:none;transition:all .3s;display:inline-block}.pay-btn:hover{background:#45a049;transform:translateY(-2px)}.empty-state{text-align:center;background:#fff;border-radius:12px;padding:60px 40px;box-shadow:0 2px 8px #0000001a}.empty-icon{margin-bottom:20px;font-size:64px}.empty-state h2{color:#333;margin:0 0 10px;font-size:22px}.empty-state p{color:#666;margin:0 0 25px;font-size:14px}.payments-page{max-width:1000px;margin:0 auto}.payment-summary{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px;display:grid}.summary-card{background:#fff;border-top:4px solid #667eea;border-radius:12px;align-items:center;gap:20px;padding:25px;transition:all .3s;display:flex;box-shadow:0 2px 8px #0000001a}.summary-card.warning{border-top-color:#ff9800}.summary-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000026}.summary-icon{background:#f0f0f0;border-radius:10px;justify-content:center;align-items:center;width:60px;height:60px;font-size:40px;display:flex}.summary-content label{color:#999;text-transform:uppercase;margin:0 0 5px;font-size:12px;display:block}.summary-content h3{color:#333;margin:0;font-size:24px;font-weight:700}.new-payment-section{background:#fff;border-radius:12px;margin-bottom:30px;padding:25px;box-shadow:0 2px 8px #0000001a}.new-payment-section h3{color:#333;margin:0 0 20px;font-size:18px}.unpaid-list{flex-direction:column;gap:12px;display:flex}.unpaid-item{background:#f8f9fa;border-left:3px solid #ff9800;border-radius:8px;justify-content:space-between;align-items:center;padding:15px;display:flex}.unpaid-info p{color:#333;margin:0}.unpaid-info p.doctor-name{color:#999;margin-top:5px;font-size:12px}.pay-now-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4caf50 0%,#45a049 100%);border:none;border-radius:6px;padding:8px 16px;font-weight:700;transition:all .3s}.pay-now-btn:hover{transform:scale(1.05)}.payment-form-section{background:#fff;border-radius:12px;margin-bottom:30px;padding:25px;box-shadow:0 2px 8px #0000001a}.payment-form-section h3{color:#333;margin:0 0 20px}.appointment-summary-form{background:#f8f9fa;border-radius:8px;margin-bottom:20px;padding:15px}.appointment-summary-form p{color:#333;margin:8px 0}.payment-form{flex-direction:column;gap:20px;display:flex}.form-section h3{color:#333;margin:0 0 15px;font-size:16px}.form-group{flex-direction:column;display:flex}.form-group.full-width{grid-column:1/-1}.form-group label{color:#333;margin-bottom:8px;font-size:14px;font-weight:600}.form-group input,.form-group select,.form-group textarea{border:1px solid #ddd;border-radius:8px;padding:12px;font-family:inherit;font-size:14px;transition:all .3s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.form-actions{gap:10px;margin-top:20px;display:flex}.submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4caf50 0%,#45a049 100%);border:none;border-radius:8px;flex:1;padding:12px 24px;font-weight:700;transition:all .3s}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #4caf504d}.form-actions .cancel-btn{color:#666;background:#e0e0e0;flex:.5}.form-actions .cancel-btn:hover{background:#d0d0d0}.payment-history-section{background:#fff;border-radius:12px;padding:25px;box-shadow:0 2px 8px #0000001a}.payment-history-section h3{color:#333;margin:0 0 20px}.payments-list{flex-direction:column;gap:12px;display:flex}.payment-item{background:#f8f9fa;border-left:3px solid #667eea;border-radius:8px;justify-content:space-between;align-items:center;padding:15px;transition:all .3s;display:flex}.payment-item:hover{box-shadow:0 4px 12px #0000001a}.payment-left{flex:1;align-items:center;gap:15px;display:flex}.payment-date{color:#667eea;min-width:100px;font-size:14px;font-weight:700}.payment-details{flex-direction:column;gap:3px;display:flex}.payment-details .method{color:#333;margin:0;font-weight:500}.payment-details .transaction{color:#999;margin:0;font-size:12px}.payment-right{justify-content:flex-end;align-items:center;gap:15px;display:flex}.payment-amount{color:#333;font-size:16px;font-weight:700}.payment-status{color:#fff;border-radius:12px;padding:4px 12px;font-size:11px;font-weight:700}.user-profile{max-width:800px;margin:0 auto}.profile-container{flex-direction:column;gap:30px;display:flex}.profile-avatar-section{text-align:center}.avatar-container{display:inline-block;position:relative}.avatar-container .profile-img{object-fit:cover;border:4px solid #667eea;border-radius:50%;width:150px;height:150px;box-shadow:0 8px 20px #00000026}.avatar-placeholder{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:150px;height:150px;font-size:50px;display:flex;box-shadow:0 8px 20px #00000026}.avatar-upload{color:#fff;cursor:pointer;background:#667eea;border:2px solid #fff;border-radius:20px;padding:10px 15px;font-size:12px;transition:all .3s;position:absolute;bottom:0;right:0}.avatar-upload:hover{background:#764ba2;transform:scale(1.05)}.profile-info-section{background:#fff;border-radius:12px;padding:30px;box-shadow:0 2px 8px #0000001a}.profile-display{flex-direction:column;gap:20px;display:flex}.info-card{background:#f8f9fa;border-radius:10px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;padding:20px;display:grid}.info-item{flex-direction:column;display:flex}.info-item.full-width{grid-column:1/-1}.info-item label{color:#999;text-transform:uppercase;margin-bottom:8px;font-size:12px;font-weight:600}.info-item p{color:#333;margin:0;font-size:16px;font-weight:500}.edit-btn{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:6px;padding:10px 20px;font-weight:700;transition:all .3s}.edit-btn:hover{background:#764ba2;transform:translateY(-2px)}.profile-form{flex-direction:column;gap:25px;display:flex}.form-section{flex-direction:column;gap:15px;display:flex}.form-section h3{color:#333;border-bottom:2px solid #667eea;margin:0;padding-bottom:10px;font-size:16px}.form-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;display:grid}.save-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4caf50 0%,#45a049 100%);border:none;border-radius:8px;padding:12px 24px;font-weight:700;transition:all .3s}.save-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #4caf504d}.save-btn:disabled{opacity:.7;cursor:not-allowed}.detail-row:last-child{border-bottom:none}.detail-row span{color:#666}.detail-row strong{color:#333}.confirmation-actions{gap:15px;display:flex}.back-btn,.confirm-btn{cursor:pointer;border:none;border-radius:8px;flex:1;padding:12px;font-size:16px;font-weight:700;transition:all .3s}.back-btn{color:#666;background:#e0e0e0}.confirm-btn{color:#fff;background:linear-gradient(135deg,#4caf50 0%,#45a049 100%)}.back-btn:hover{background:#d0d0d0}.confirm-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #4caf504d}.confirm-btn:disabled{opacity:.7;cursor:not-allowed}.loading-container{justify-content:center;align-items:center;min-height:400px;display:flex}.loader{border:4px solid #f3f3f3;border-top-color:#764ba2;border-radius:50%;width:40px;height:40px;margin:0 auto 15px;animation:1s linear infinite spin}