:root {
  --surface: #fff;
  --surface-soft: #f0f8f7;
  --ink-soft: #43556f;
  --field-border: #cbd8df;
  --field-focus: #74b8c7;
  --field-error: #b42318;
  --shadow-sm: 0 8px 20px rgba(20, 33, 61, .06);
  --shadow-lg: 0 24px 60px rgba(20, 33, 61, .10);
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; }
main { min-height: 52vh; }
::selection { color: #fff; background: var(--primary); }

/* Navigation and shared interaction states */
.skip-link { position: fixed; z-index: 1100; top: .75rem; left: 50%; padding: .65rem 1rem; color: #fff; background: var(--ink); border-radius: .6rem; transform: translate(-50%, -200%); transition: transform .16s ease; }
.skip-link:focus { color: #fff; transform: translate(-50%, 0); }
.app-nav { min-height: 4.75rem; box-shadow: 0 1px 0 rgba(20, 33, 61, .02); }
.app-nav .navbar-brand { display: inline-flex; gap: .55rem; align-items: center; }
.app-nav .nav-link { position: relative; padding: .7rem .8rem; }
.app-nav .nav-link.active, .app-nav .nav-link:hover { color: var(--primary); }
.offcanvas { max-width: 21rem; }
.offcanvas .nav-link { padding: .75rem .25rem; color: var(--ink); font-weight: 650; }

.btn { font-weight: 650; letter-spacing: -.01em; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { pointer-events: none; opacity: .68; box-shadow: none; transform: none; }
.btn-primary { box-shadow: 0 8px 18px rgba(23, 107, 135, .18); }
.btn-primary:hover { box-shadow: 0 12px 22px rgba(16, 82, 105, .22); }
.btn-outline-primary { --bs-btn-hover-bg: var(--primary); }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible, .slot-button:focus-visible, a:focus-visible { outline: 3px solid rgba(23, 107, 135, .26); outline-offset: 2px; }

/* Form system: classed Bootstrap widgets and Django's unclassed built-ins */
.form-label, form label { margin-bottom: .42rem; color: var(--ink-soft); font-size: .86rem; font-weight: 700; }
.form-label { display: inline-block; }
.form-control, .form-select,
form input[type="text"]:not(.form-control),
form input[type="email"]:not(.form-control),
form input[type="password"]:not(.form-control),
form input[type="tel"]:not(.form-control),
form input[type="url"]:not(.form-control),
form input[type="number"]:not(.form-control),
form input[type="date"]:not(.form-control),
form input[type="time"]:not(.form-control),
form select:not(.form-select):not(.form-control),
form textarea:not(.form-control) {
  display: block;
  width: 100%;
  min-height: 2.8rem;
  padding: .68rem .8rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: .72rem;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.form-select, form select:not(.form-select):not(.form-control) { padding-right: 2.5rem; }
textarea.form-control, form textarea:not(.form-control) { min-height: 7rem; resize: vertical; }
.form-control::placeholder, form input::placeholder, form textarea::placeholder { color: #8997a8; opacity: 1; }
.form-control:focus, .form-select:focus,
form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
form select:focus, form textarea:focus {
  border-color: var(--field-focus);
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(23, 107, 135, .12);
}
.form-control:disabled, .form-select:disabled,
form input:disabled, form select:disabled, form textarea:disabled { cursor: not-allowed; color: #78879a; background: #f2f6f7; opacity: 1; }
.form-control.form-control-sm { min-height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; border-radius: .45rem; }

input[type="file"], .form-control[type="file"] { width: 100%; min-height: 2.8rem; padding: .42rem .55rem; color: var(--ink-soft); background: var(--surface); border: 1px dashed #aac7cf; border-radius: .72rem; }
input[type="file"]::file-selector-button { margin: -.15rem .7rem -.15rem -.15rem; padding: .48rem .7rem; color: var(--primary); font-weight: 700; background: #e8f5f6; border: 0; border-radius: .48rem; }
input[type="checkbox"], input[type="radio"], .form-check-input { width: 1.15rem; min-width: 1.15rem; height: 1.15rem; min-height: 1.15rem; margin-top: .2rem; padding: 0; vertical-align: middle; accent-color: var(--primary); }
.form-check-input { border-color: #9fbdc6; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
form p:has(> input[type="checkbox"]), form p:has(> input[type="radio"]) { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
form p:has(> input[type="checkbox"]) label, form p:has(> input[type="radio"]) label { order: 2; margin: 0; }

.form-text { display: block; margin-top: .4rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
form .text-danger, form .invalid-feedback { display: block; margin-top: .35rem; color: var(--field-error) !important; font-size: .8rem; line-height: 1.4; }
form .errorlist { margin: .4rem 0 0; padding: .55rem .7rem .55rem 1.75rem; color: #8e1c13; font-size: .8rem; line-height: 1.4; background: #fff0ef; border-radius: .6rem; }
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"],
form input[aria-invalid="true"], form select[aria-invalid="true"], form textarea[aria-invalid="true"] { border-color: var(--field-error); }
.form-control[aria-invalid="true"]:focus, .form-select[aria-invalid="true"]:focus,
form input[aria-invalid="true"]:focus, form select[aria-invalid="true"]:focus, form textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 .25rem rgba(180, 35, 24, .12); }

.auth-card form > p { margin-bottom: 1rem; }
.auth-card form > p > label { display: block; }
.auth-card form ul { margin-bottom: 1rem; }
.booking-form-card form .row > [class*="col-"] { min-width: 0; }
.booking-form-card form .form-check-input { margin-right: .35rem; }
.checkout-address-empty { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; color: var(--ink-soft); background: #f6fafb; border: 1px dashed #aac7cf; border-radius: .8rem; }
.checkout-address-empty > div { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: center; }
.checkout-address-empty i { grid-row: 1 / span 2; color: var(--primary); font-size: 1.25rem; }
.checkout-address-empty strong { color: var(--ink); }
.checkout-address-empty p { grid-column: 2; margin: .15rem 0 0; font-size: .85rem; }
.address-card { display: grid; gap: .7rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.address-card:last-child { border-bottom: 0; padding-bottom: 0; }
.address-card p { margin: .35rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

/* Surface, cards, and page sections */
.alert { border: 0; border-radius: .9rem; box-shadow: var(--shadow-sm); }
.hero-section { position: relative; overflow: hidden; padding: 7rem 0 5.8rem; }
.hero-section::after { position: absolute; right: 6%; bottom: -10rem; width: 24rem; height: 24rem; content: ""; pointer-events: none; background: rgba(103, 210, 188, .13); border-radius: 50%; filter: blur(4px); }
.hero-section .container { position: relative; z-index: 1; }
.hero-section h1 { max-width: 12ch; }
.care-card { position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.care-card::before { position: absolute; top: 0; left: 0; width: 100%; height: .3rem; content: ""; background: linear-gradient(90deg, var(--primary), #56b69d); }
.feature-card, .doctor-card, .medicine-card, .booking-form-card, .booking-card, .filter-panel, .metric-card { box-shadow: var(--shadow-sm); }
.feature-card, .doctor-card, .medicine-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.feature-card:hover, .doctor-card:hover, .medicine-card:hover { border-color: #b8d9df; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.feature-card h4, .doctor-card :is(h2, h4), .medicine-card :is(h2, h5) { margin-top: 0; letter-spacing: -.02em; }
.doctor-card h2 { font-size: 1.18rem; }
.page-hero { position: relative; overflow: hidden; padding: 5.5rem 0 3.5rem; }
.page-hero::after { position: absolute; top: -9rem; right: -5rem; width: 24rem; height: 24rem; content: ""; background: rgba(86, 182, 157, .14); border-radius: 50%; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 16ch; }
.page-hero.text-center h1 { margin-right: auto; margin-left: auto; }
h1.profile-name { max-width: none; }

.filter-panel { position: relative; z-index: 2; margin-top: -1.25rem; margin-bottom: .5rem; border-color: rgba(190, 216, 222, .9); border-radius: 1.25rem; }
.filter-actions { display: flex; gap: .65rem; align-items: end; }
.filter-actions .btn { min-height: 2.8rem; }
.result-count { color: var(--muted); font-size: .9rem; }
.doctor-card { display: flex; flex-direction: column; }
.doctor-card > .btn { margin-top: auto !important; }
.doctor-avatar { border: 1px solid #c9e4e1; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .58); }
.verified-label { display: inline-flex; gap: .25rem; align-items: center; }
.status-pill { border: 1px solid #f1dfab; }
.appointment-summary, .booking-card { background: linear-gradient(145deg, #fff, #fbfdfd); }
.booking-card, .booking-form-card { overflow-wrap: anywhere; }
.record-row { transition: background-color .16s ease; }
.record-row:hover { background: #f7fbfc; }
.record-row:first-child { margin-top: .4rem; }
.cart-row form { margin: 0; }
.medicine-card .p-3 { display: flex; min-height: 11.5rem; flex-direction: column; gap: .15rem; }
.medicine-card .p-3 .d-flex:last-child { margin-top: auto !important; }
.pagination .page-link { color: var(--primary); border-color: var(--line); }
.pagination .page-item.disabled .page-link { color: var(--muted); background: #fff; }

.metric-card { position: relative; overflow: hidden; }
.metric-card::after { position: absolute; right: -1.5rem; bottom: -2rem; width: 6rem; height: 6rem; content: ""; background: rgba(23, 107, 135, .06); border-radius: 50%; }
.metric-card strong, .metric-card i, .metric-card span { position: relative; z-index: 1; }
.auth-card { box-shadow: var(--shadow-lg); }
.auth-shell { background: radial-gradient(circle at 20% 0%, #dff5f1, transparent 26rem), linear-gradient(135deg, #f8fbfc, #fff); }
.footer { margin-top: 3rem !important; }
.footer a:hover { color: #fff; }
.notification-menu { width: min(21rem, calc(100vw - 2rem)); }

@media (min-width: 992px) {
  .app-nav .nav-link.active::after { position: absolute; right: .8rem; bottom: .25rem; left: .8rem; height: 2px; content: ""; background: var(--primary); border-radius: 99px; }
}
@media (max-width: 991.98px) {
  .hero-section { padding: 4.7rem 0 4rem; }
  .filter-panel { margin-top: -1rem; }
}
@media (max-width: 575.98px) {
  .page-hero { padding: 4rem 0 2.75rem; }
  .page-hero h1, .hero-section h1 { max-width: 100%; }
  .page-hero::after { right: -11rem; }
  .filter-actions { width: 100%; }
  .filter-actions .btn { flex: 1; }
  .booking-form-card, .booking-card { padding: 1.15rem; }
  .record-row { padding: .85rem 0; }
  .record-row > :first-child { min-width: 0; }
  .record-row > :last-child { margin-left: auto; }
  .cart-row { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }
  .cart-row form:first-of-type { grid-column: 1 / -1; }
  .cart-row form:first-of-type .form-control { max-width: 5.25rem; }
  .checkout-address-empty { align-items: flex-start; flex-direction: column; }
  .checkout-address-empty .btn { width: 100%; }
  .appointment-summary div { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .doctor-card, .feature-card { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}