:root { --ink: #14213d; --muted: #64748b; --primary: #176b87; --primary-dark: #105269; --mint: #dff4ee; --canvas: #f7fafc; --line: #e5edf2; }
* { box-sizing: border-box; } body { color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); } .app-nav { background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .navbar-brand { color: var(--ink)!important; letter-spacing: -.03em; } .brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: white; background: var(--primary); border-radius: .65rem; } .nav-link { color: #405168; font-weight: 500; } .btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); } .hero-section { padding: 6.5rem 0 5rem; background: radial-gradient(circle at 85% 20%, #d8f5ef 0, transparent 26rem), linear-gradient(135deg, #fff 0%, #f4fbfc 100%); } .eyebrow { display: inline-flex; gap: .45rem; color: var(--primary); background: #e2f4f8; border-radius: 99px; padding: .45rem .75rem; font-size: .73rem; letter-spacing: .08em; font-weight: 800; } h1 { font-size: clamp(2.65rem, 5vw, 4.6rem); line-height: 1.04; letter-spacing: -.055em; max-width: 14ch; margin: 1.25rem 0; } h2 { letter-spacing: -.035em; font-weight: 750; } .lead { color: var(--muted); max-width: 38rem; font-size: 1.15rem; line-height: 1.75; } .care-card { background: white; border: 1px solid #dcecf0; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 30px 60px rgba(20,33,61,.1); } .status-dot { color: #13795b; font-size: .78rem; font-weight: 700; } .status-dot:before { content: ''; display: inline-block; width: .5rem; height: .5rem; background: #31b77b; border-radius: 50%; margin-right: .35rem; } .appointment-preview { display: flex; gap: .8rem; align-items: center; margin-top: 1.5rem; padding: 1rem; background: #f5fafb; border-radius: 1rem; } .appointment-preview small { display: block; color: var(--muted); font-size: .76rem; margin-top: .2rem; } .appointment-preview > i { margin-left: auto; } .avatar-soft { display: grid; place-items: center; flex: 0 0 auto; width: 2.8rem; height: 2.8rem; border-radius: 50%; color: var(--primary); background: #dff4f2; } .hero-trust { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; color: #53657c; font-size: .84rem; font-weight: 600; } .hero-trust i { color: var(--primary); margin-right: .25rem; } .feature-card { padding: 1.75rem; border: 1px solid var(--line); border-radius: 1.25rem; background: white; } .feature-card h4 { margin: 1.25rem 0 .6rem; font-weight: 700; } .feature-card p { color: var(--muted); margin: 0; line-height: 1.65; } .feature-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; font-size: 1.35rem; color: var(--primary); } .bg-blue { background: #def2fb; } .bg-mint { background: var(--mint); color: #16755a; } .bg-peach { background: #ffebdc; color: #ad5c2c; } .page-hero { padding: 5rem 0 3rem; background: linear-gradient(135deg, #fff, #e9f8f7); } .page-hero.compact { padding: 4rem 0 2.5rem; } .page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); } .page-hero p { color: var(--muted); max-width: 42rem; font-size: 1.12rem; } .specialty-link { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; background: white; border: 1px solid var(--line); border-radius: 1rem; color: var(--ink); font-weight: 650; transition: transform .16s ease, box-shadow .16s ease; } .specialty-link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20,33,61,.08); color: var(--primary); } .specialty-link i:last-child { margin-left: auto; } .empty-state { padding: 2rem; background: white; border: 1px dashed #bfd1d9; border-radius: 1rem; color: var(--muted); } .auth-shell { min-height: calc(100vh - 260px); display: grid; place-items: center; padding: 4rem 1rem; background: radial-gradient(circle at 20% 0%, #dff5f1, transparent 26rem); } .auth-card { width: min(100%, 30rem); padding: 2rem; background: white; border: 1px solid var(--line); border-radius: 1.2rem; box-shadow: 0 18px 50px rgba(20,33,61,.09); } .auth-card h2 { font-size: 1.65rem; } .form-control, .form-select { border-color: #cbd8df; padding: .68rem .8rem; } .form-control:focus, .form-select:focus { border-color: #74b8c7; box-shadow: 0 0 0 .25rem rgba(23,107,135,.12); } .footer { background: #14213d; color: white; } .footer h6 { font-weight: 700; } .footer a { display: block; margin-top: .55rem; color: #d1dbe8; font-size: .9rem; } .error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 3rem; } .error-page h1 { max-width: none; color: var(--primary); font-size: 6rem; margin: 0; } .filter-panel, .doctor-card, .booking-form-card, .booking-card { background: white; border: 1px solid var(--line); border-radius: 1.2rem; padding: 1.4rem; } .doctor-card { padding: 1.45rem; } .doctor-card-top, .profile-header { display: flex; align-items: center; gap: 1rem; } .doctor-card-top { justify-content: space-between; margin-bottom: 1.1rem; } .doctor-avatar { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 1rem; overflow: hidden; color: var(--primary); background: #e2f5f3; font-size: 1.5rem; } .doctor-avatar.large { width: 6.5rem; height: 6.5rem; border-radius: 1.4rem; font-size: 3rem; } .doctor-avatar img { width: 100%; height: 100%; object-fit: cover; } .verified-label { color: #16765a; background: #e0f7ed; border-radius: 99px; padding: .3rem .55rem; font-size: .72rem; font-weight: 750; white-space: nowrap; } .doctor-card h4 { font-size: 1.18rem; margin: 0; } .specialty-name { color: var(--primary); margin: .25rem 0 .75rem; font-weight: 650; } .doctor-credentials { color: var(--muted); font-size: .87rem; min-height: 2.7rem; } .doctor-meta { display: grid; gap: .55rem; border-top: 1px solid var(--line); padding-top: .9rem; color: #526478; font-size: .82rem; } .doctor-meta span:last-child { color: var(--ink); } .profile-name { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: .6rem 0 .2rem; } .detail-list { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; font-size: .92rem; } .detail-list dt { color: var(--muted); font-weight: 500; } .detail-list dd { margin: 0; } .booking-progress { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .75rem; font-weight: 650; margin: 0 0 1rem; } .booking-progress span.active { color: var(--primary); } .slot-grid { display: flex; flex-wrap: wrap; gap: .55rem; min-height: 2rem; } .slot-button { color: var(--primary); background: #fff; border: 1px solid #bad9e1; border-radius: .6rem; padding: .45rem .65rem; font-size: .82rem; } .slot-button.selected, .slot-button:hover { color: white; background: var(--primary); border-color: var(--primary); } .status-pill { display: inline-block; color: #996100; background: #fff3cf; border-radius: 99px; padding: .4rem .7rem; font-size: .8rem; font-weight: 700; } .appointment-summary { display: grid; gap: .8rem; padding: 1rem; background: #f6fafb; border-radius: .8rem; } .appointment-summary div { display: flex; justify-content: space-between; gap: 1rem; } .appointment-summary span { color: var(--muted); } .medicine-card { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 1rem; } .medicine-card img, .medicine-detail-image { width: 100%; aspect-ratio: 1.3; object-fit: cover; } .medicine-detail-image { border-radius: 1rem; } .medicine-image-placeholder { display: grid; place-items: center; aspect-ratio: 1.3; background: linear-gradient(135deg,#dff4f2,#edf7fb); color: var(--primary); font-size: 3rem; } .medicine-image-placeholder.tall { aspect-ratio: 1; border-radius: 1rem; font-size: 5rem; } .rx-badge { display: inline-block; color: #9a5e00; background: #fff1ce; font-size: .68rem; font-weight: 700; border-radius: .4rem; padding: .25rem .4rem; } .cart-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); } .cart-row:last-child { border-bottom: 0; } .cart-row small, .timeline-event small { display:block; color: var(--muted); } .timeline-event { display: flex; gap: .7rem; margin: .9rem 0; } .timeline-event i { color: var(--primary); } .metric-card { display:grid; gap:.4rem; min-height:8rem; padding:1.2rem; border:1px solid var(--line); border-radius:1rem; background:white; } .metric-card i { color:var(--primary); font-size:1.25rem; } .metric-card span { color:var(--muted); font-size:.8rem; } .metric-card strong { font-size:1.5rem; } .record-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); } .record-row:last-child { border-bottom:0; } .record-row small { display:block; color:var(--muted); margin-top:.2rem; } .video-stage { position:relative; min-height:28rem; overflow:hidden; border-radius:1rem; background:#152033; } .video-stage video { width:100%; height:100%; object-fit:cover; } #remoteVideo { position:absolute; inset:0; } #localVideo { position:absolute; width:28%; height:auto; right:1rem; bottom:4.5rem; border-radius:.7rem; border:2px solid white; } .call-controls { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:.6rem; } .chat-panel { display:flex; flex-direction:column; height:28rem; padding:1rem; background:white; border:1px solid var(--line); border-radius:1rem; } .chat-messages { flex:1; overflow-y:auto; padding:.5rem 0; } .chat-message { max-width:85%; margin:.45rem 0; padding:.45rem .65rem; background:#eff6f7; border-radius:.6rem; } .chat-message.own { margin-left:auto; background:#d9f0ee; } .chat-message small { display:block; color:var(--muted); font-size:.68rem; } .chat-message p { margin:.2rem 0 0; font-size:.85rem; white-space:pre-wrap; } .payment-total { font-size:2.2rem; font-weight:750; color:var(--ink); } @media (max-width: 991.98px) { .hero-section { padding-top: 4rem; } } @media (max-width: 575.98px) { .hero-trust { display: grid; gap: .6rem; } .care-card { padding: 1.4rem; } .booking-progress { font-size: .65rem; } .profile-header { align-items: flex-start; } .doctor-avatar.large { width: 4.6rem; height: 4.6rem; font-size: 2rem; } .cart-row { grid-template-columns: minmax(0,1fr) auto; } .record-row { align-items:flex-start; flex-wrap:wrap; } .video-stage { min-height:20rem; } }