/* ============================================================
   Doctors in Turkey — main.css
   Design system: CSS custom properties + utility classes
   Medical-travel vibe: deep teal + warm gold accents
   ============================================================ */

/* ─── 1. Custom Properties ──────────────────────────────────── */
:root {
    /* Brand */
    --c-teal-900: #0a2e33;
    --c-teal-800: #0d3d45;
    --c-teal-700: #115261;
    --c-teal-600: #1a6b7a;
    --c-teal-500: #2189a0;
    --c-teal-400: #3aa8bf;
    --c-teal-300: #6dc4d6;
    --c-teal-100: #d9f2f7;
    --c-teal-50 : #edfafc;

    --c-gold-600: #b8860b;
    --c-gold-500: #d4a017;
    --c-gold-400: #e8b835;
    --c-gold-200: #f5dd8a;
    --c-gold-50 : #fdf8e8;

    --c-green-500: #22c55e;
    --c-red-500  : #ef4444;
    --c-amber-500: #f59e0b;

    /* Neutral */
    --c-grey-950: #0c0f0f;
    --c-grey-900: #111827;
    --c-grey-800: #1f2937;
    --c-grey-700: #374151;
    --c-grey-600: #4b5563;
    --c-grey-500: #6b7280;
    --c-grey-400: #9ca3af;
    --c-grey-300: #d1d5db;
    --c-grey-200: #e5e7eb;
    --c-grey-100: #f3f4f6;
    --c-grey-50 : #f9fafb;
    --c-white   : #ffffff;

    /* Semantic */
    --c-primary      : var(--c-teal-600);
    --c-primary-dark : var(--c-teal-800);
    --c-primary-light: var(--c-teal-400);
    --c-accent       : var(--c-gold-500);
    --c-accent-dark  : var(--c-gold-600);
    --c-text-base    : var(--c-grey-900);
    --c-text-muted   : var(--c-grey-500);
    --c-text-inverse : var(--c-white);
    --c-bg           : var(--c-white);
    --c-bg-subtle    : var(--c-grey-50);
    --c-border       : var(--c-grey-200);

    /* Typography */
    --font-sans   : 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    --text-xs  : .75rem;
    --text-sm  : .875rem;
    --text-base: 1rem;
    --text-lg  : 1.125rem;
    --text-xl  : 1.25rem;
    --text-2xl : 1.5rem;
    --text-3xl : 1.875rem;
    --text-4xl : 2.25rem;
    --text-5xl : 3rem;
    --text-6xl : 3.75rem;

    /* Spacing */
    --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem;
    --sp-4: 1rem;   --sp-5: 1.25rem;--sp-6: 1.5rem;
    --sp-8: 2rem;   --sp-10: 2.5rem;--sp-12: 3rem;
    --sp-16: 4rem;  --sp-20: 5rem;  --sp-24: 6rem;

    /* Radii */
    --r-sm : .375rem;
    --r-md : .625rem;
    --r-lg : 1rem;
    --r-xl : 1.5rem;
    --r-2xl: 2rem;
    --r-full: 9999px;

    /* Shadows */
    --s-sm : 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
    --s-md : 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
    --s-lg : 0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.05);
    --s-xl : 0 20px 25px rgba(0,0,0,.10), 0 10px 10px rgba(0,0,0,.04);
    --s-card: 0 2px 8px rgba(10,46,51,.08), 0 1px 2px rgba(10,46,51,.04);
    --s-card-hover: 0 8px 30px rgba(10,46,51,.14), 0 2px 8px rgba(10,46,51,.08);

    /* Transitions */
    --t-fast  : 150ms ease;
    --t-base  : 250ms ease;
    --t-slow  : 400ms ease;
    --t-spring: 600ms cubic-bezier(.175,.885,.32,1.275);

    /* Layout */
    --container-max: 1200px;
    --container-pad: clamp(1rem, 4vw, 2rem);
    --header-h     : 4rem;
}

/* ─── 2. Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-sans);
    font-size  : var(--text-base);
    line-height: 1.6;
    color      : var(--c-text-base);
    background : var(--c-bg);
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic RTL */
[dir="rtl"] { font-family: 'Cairo', var(--font-sans); }

img, video { display: block; max-width: 100%; height: auto; }

a { color: var(--c-primary); text-decoration: none; transition: color var(--t-base); }
a:hover { color: var(--c-primary-dark); }

button { cursor: pointer; font-family: inherit; }

ul, ol { list-style: none; }

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    line-height: 1.25;
    color: var(--c-grey-900);
}
h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-family: var(--font-sans); font-weight: 600; }

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* ─── 3. Layout ─────────────────────────────────────────────── */
.container {
    width    : 100%;
    max-width: var(--container-max);
    margin   : 0 auto;
    padding  : 0 var(--container-pad);
}

.section { padding: var(--sp-20) 0; }
.section--sm { padding: var(--sp-12) 0; }
.section--lg { padding: clamp(3rem, 8vw, 6rem) 0; }

.section-header {
    text-align: center;
    margin-bottom: var(--sp-12);
}
.section-header h2 { margin-bottom: var(--sp-4); }
.section-header p {
    color    : var(--c-text-muted);
    max-width: 600px;
    margin   : 0 auto;
    font-size: var(--text-lg);
}

.grid {
    display: grid;
    gap    : var(--sp-6);
}
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* ─── 4. Header / Nav ───────────────────────────────────────── */
.site-header {
    position        : sticky;
    top             : 0;
    z-index         : 1000;
    height          : var(--header-h);
    background      : rgba(255,255,255,.92);
    backdrop-filter : blur(12px);
    border-bottom   : 1px solid var(--c-border);
    transition      : box-shadow var(--t-base);
}
.site-header.scrolled { box-shadow: var(--s-md); }

.site-header .container {
    height: 100%;
    display: flex;
    align-items: center;
}

.nav {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : var(--sp-4);
    height         : 100%;
    width          : 100%;
}

.nav-logo {
    display    : flex;
    align-items: center;
    gap        : var(--sp-2);
    font-family: var(--font-display);
    font-size  : var(--text-xl);
    font-weight: 700;
    color      : var(--c-teal-700);
    text-decoration: none;
    flex-shrink: 0;
}
.nav-logo:hover { color: var(--c-teal-600); }
.nav-logo__img {
    display: block;
    height: 38px;
    width: auto;
    max-width: 220px;
}

.nav-links {
    display : flex;
    align-items: center;
    justify-content: center;
    gap     : clamp(.55rem, 1vw, 1rem);
    flex    : 1 1 auto;
    min-width: 0;
}
.nav-links a {
    font-size  : .82rem;
    font-weight: 500;
    color      : var(--c-grey-700);
    padding    : var(--sp-1) 0;
    position   : relative;
    white-space: nowrap;
}
.nav-links a::after {
    content   : '';
    position  : absolute;
    bottom    : -2px; left: 0;
    width     : 0; height: 2px;
    background: var(--c-primary);
    transition: width var(--t-base);
}
.nav-links a:hover,
.nav-links a.active { color: var(--c-primary); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* Language switcher */
.lang-switcher {
    position: relative;
}
.lang-switcher summary {
    list-style : none;
    display    : flex;
    align-items: center;
    gap        : var(--sp-1);
    padding    : var(--sp-1) var(--sp-2);
    border     : 1px solid var(--c-border);
    border-radius: var(--r-full);
    font-size  : var(--text-sm);
    font-weight: 500;
    cursor     : pointer;
    color      : var(--c-grey-700);
    transition : background var(--t-fast);
}
.lang-switcher summary:hover { background: var(--c-grey-100); }
.lang-switcher[open] summary { background: var(--c-grey-100); }

.lang-dropdown {
    position  : absolute;
    top       : calc(100% + var(--sp-2));
    right     : 0;
    background: var(--c-white);
    border    : 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--s-lg);
    min-width : 180px;
    padding   : var(--sp-2);
    display   : flex;
    flex-direction: column;
    gap       : var(--sp-1);
    z-index   : 100;
}
.lang-dropdown a {
    display    : flex;
    align-items: center;
    gap        : var(--sp-2);
    padding    : var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size  : var(--text-sm);
    color      : var(--c-grey-700);
    transition : background var(--t-fast);
}
.lang-dropdown a:hover { background: var(--c-teal-50); color: var(--c-primary); }
.lang-dropdown a.active { background: var(--c-teal-50); color: var(--c-primary); font-weight: 600; }

/* Mobile nav toggle */
.nav-toggle {
    display   : none;
    background: none;
    border    : none;
    padding   : var(--sp-2);
    color     : var(--c-grey-700);
}
.nav-toggle svg { width: 24px; height: 24px; }

/* ─── 5. Buttons ─────────────────────────────────────────────── */
.btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : var(--sp-2);
    padding        : .625rem 1.5rem;
    border-radius  : var(--r-full);
    font-size      : var(--text-sm);
    font-weight    : 600;
    line-height    : 1;
    border         : 2px solid transparent;
    cursor         : pointer;
    transition     : all var(--t-base);
    white-space    : nowrap;
    text-decoration: none;
}
.btn:disabled { opacity: .55; pointer-events: none; }

/* ─── KVKK Consent ─────────────────────────────────────────── */
body.kvkk-lock { overflow: hidden; }

.kvkk-consent {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: grid;
    place-items: center;
    z-index: 3000;
    padding: var(--sp-4);
}

.kvkk-consent__box {
    width: min(560px, 100%);
    background: var(--c-white);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    box-shadow: var(--s-xl);
    border: 1px solid var(--c-border);
}

.kvkk-consent__box h3 {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    margin-bottom: var(--sp-3);
}

.kvkk-consent__box p {
    color: var(--c-grey-700);
    margin-bottom: var(--sp-4);
}

.kvkk-consent__links {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}

.kvkk-consent__links a {
    font-size: var(--text-sm);
    font-weight: 600;
}

.btn-primary {
    background: var(--c-primary);
    color     : var(--c-white);
    border-color: var(--c-primary);
}
.btn-primary:hover {
    background  : var(--c-primary-dark);
    border-color: var(--c-primary-dark);
    color       : var(--c-white);
    transform   : translateY(-1px);
    box-shadow  : 0 6px 20px rgba(26,107,122,.30);
}

.btn-secondary {
    background: transparent;
    color     : var(--c-primary);
    border-color: var(--c-primary);
}
.btn-secondary:hover {
    background: var(--c-primary);
    color     : var(--c-white);
    transform : translateY(-1px);
}

.btn-accent {
    background: var(--c-accent);
    color     : var(--c-white);
    border-color: var(--c-accent);
}
.btn-accent:hover {
    background  : var(--c-accent-dark);
    border-color: var(--c-accent-dark);
    color       : var(--c-white);
    transform   : translateY(-1px);
    box-shadow  : 0 6px 20px rgba(212,160,23,.35);
}

.btn-ghost {
    background: transparent;
    color     : var(--c-grey-700);
    border-color: var(--c-grey-300);
}
.btn-ghost:hover {
    background: var(--c-grey-100);
    color     : var(--c-grey-900);
}

.btn-whatsapp {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}

.btn-whatsapp:hover {
    background: #1faf53;
    border-color: #1faf53;
    color: #fff;
}

.btn-danger {
    background: var(--c-red-500);
    color     : var(--c-white);
    border-color: var(--c-red-500);
}
.btn-danger:hover { background: #dc2626; border-color: #dc2626; color: var(--c-white); }

.btn-sm { padding: .4rem 1rem; font-size: var(--text-xs); }
.btn-lg { padding: .875rem 2.25rem; font-size: var(--text-base); }
.btn-xl { padding: 1.125rem 2.75rem; font-size: var(--text-lg); border-radius: var(--r-xl); }

.btn-icon { padding: .6rem; border-radius: var(--r-md); }
.btn-icon svg { width: 18px; height: 18px; }

/* ─── 6. Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-5); }
.form-label {
    display     : block;
    font-size   : var(--text-sm);
    font-weight : 600;
    color       : var(--c-grey-700);
    margin-bottom: var(--sp-2);
}
.form-label .required { color: var(--c-red-500); margin-left: 2px; }

.form-control {
    width        : 100%;
    padding      : .65rem 1rem;
    border       : 1.5px solid var(--c-grey-300);
    border-radius: var(--r-md);
    font-size    : var(--text-base);
    font-family  : inherit;
    color        : var(--c-text-base);
    background   : var(--c-white);
    transition   : border-color var(--t-fast), box-shadow var(--t-fast);
    appearance   : none;
}
.form-control:focus {
    outline     : none;
    border-color: var(--c-primary);
    box-shadow  : 0 0 0 3px rgba(26,107,122,.15);
}
.form-control.is-invalid { border-color: var(--c-red-500); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }

.form-error {
    display  : block;
    font-size: var(--text-sm);
    color    : var(--c-red-500);
    margin-top: var(--sp-1);
}

textarea.form-control { resize: vertical; min-height: 120px; }
select.form-control {
    background-image: url("data:image/svg+xml,...");
    padding-right   : 2.5rem;
}

.form-check { display: flex; align-items: flex-start; gap: var(--sp-2); }
.form-check input[type=checkbox] {
    width : 18px; height: 18px;
    border: 1.5px solid var(--c-grey-400);
    border-radius: var(--r-sm);
    accent-color: var(--c-primary);
    flex-shrink: 0;
    margin-top: .2em;
    cursor: pointer;
}
.form-check-label { font-size: var(--text-sm); color: var(--c-grey-700); cursor: pointer; }

/* Floating label search */
.search-wrap {
    position: relative;
    display : flex;
    gap     : var(--sp-2);
}
.search-wrap .form-control { padding-left: 3rem; }
.search-wrap .search-icon {
    position : absolute;
    left     : 1rem;
    top      : 50%;
    transform: translateY(-50%);
    color    : var(--c-grey-400);
    pointer-events: none;
}
.search-wrap .search-icon svg { width: 18px; height: 18px; }

/* ─── 7. Cards ────────────────────────────────────────────────── */
.card {
    background   : var(--c-white);
    border-radius: var(--r-xl);
    border       : 1px solid var(--c-border);
    box-shadow   : var(--s-card);
    overflow     : hidden;
    transition   : box-shadow var(--t-base), transform var(--t-base);
}
.card:hover {
    box-shadow: var(--s-card-hover);
    transform : translateY(-3px);
}

/* Doctor Card */
.doctor-card {
    display       : flex;
    flex-direction: column;
}
.doctor-card__photo {
    aspect-ratio : 4/3;
    overflow     : hidden;
    background   : var(--c-teal-50);
    position     : relative;
}
.doctor-card__photo img {
    width : 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .5s ease;
}
.doctor-card:hover .doctor-card__photo img { transform: scale(1.06); }

.doctor-card__badge {
    position    : absolute;
    top         : var(--sp-3);
    right       : var(--sp-3);
    background  : var(--c-accent);
    color       : var(--c-white);
    font-size   : var(--text-xs);
    font-weight : 700;
    padding     : 2px 10px;
    border-radius: var(--r-full);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.doctor-card__badge--online {
    background: var(--c-green-500);
    top: auto; bottom: var(--sp-3); right: var(--sp-3);
}

.doctor-card__body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; }
.doctor-card__specialty {
    font-size   : var(--text-xs);
    font-weight : 700;
    color       : var(--c-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--sp-1);
}
.doctor-card__name {
    font-family: var(--font-display);
    font-size  : var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--sp-2);
    color      : var(--c-grey-900);
}
.doctor-card__meta {
    display : flex;
    flex-wrap: wrap;
    gap     : var(--sp-3);
    font-size: var(--text-sm);
    color   : var(--c-text-muted);
    margin-bottom: var(--sp-4);
}
.doctor-card__meta span { display: flex; align-items: center; gap: var(--sp-1); }
.doctor-card__meta svg  { width: 14px; height: 14px; flex-shrink: 0; }

.doctor-card__rating { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.stars { display: flex; gap: 1px; }
.stars svg { width: 14px; height: 14px; }
.star-filled { color: var(--c-accent); }
.star-empty  { color: var(--c-grey-300); }
.rating-value { font-size: var(--text-sm); font-weight: 700; color: var(--c-grey-900); }
.rating-count { font-size: var(--text-xs); color: var(--c-text-muted); }

.doctor-card__footer {
    margin-top: auto;
    display: flex;
    gap: var(--sp-2);
}

/* Clinic Card */
.clinic-card__logo {
    width : 64px; height: 64px;
    border-radius: var(--r-md);
    object-fit: cover;
    background: var(--c-teal-50);
    flex-shrink: 0;
}
.clinic-card__header { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5); }
.clinic-card__info { flex: 1; }
.clinic-card__name { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--sp-1); }

/* ─── 8. Hero Section ────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, var(--c-teal-900) 0%, var(--c-teal-700) 60%, var(--c-teal-600) 100%);
    color      : var(--c-white);
    padding    : clamp(4rem, 12vw, 8rem) 0 clamp(3rem, 8vw, 6rem);
    position   : relative;
    overflow   : hidden;
}
.hero::before {
    content : '';
    position: absolute;
    inset   : 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero__inner {
    position: relative;
    z-index : 1;
    text-align: center;
}
.hero__kicker {
    display     : inline-flex;
    align-items : center;
    gap         : var(--sp-2);
    background  : rgba(255,255,255,.1);
    border      : 1px solid rgba(255,255,255,.2);
    color       : var(--c-teal-100);
    font-size   : var(--text-sm);
    font-weight : 600;
    padding     : var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    margin-bottom: var(--sp-6);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.hero__kicker svg { width: 16px; height: 16px; }

.hero h1 {
    color       : var(--c-white);
    font-size   : clamp(var(--text-3xl), 6vw, var(--text-6xl));
    max-width   : 820px;
    margin-left : auto;
    margin-right: auto;
    margin-bottom: var(--sp-6);
    line-height : 1.15;
}
.hero h1 span { color: var(--c-gold-400); }

.hero__sub {
    font-size   : clamp(var(--text-base), 2vw, var(--text-xl));
    color       : var(--c-teal-100);
    max-width   : 640px;
    margin      : 0 auto var(--sp-10);
    line-height : 1.6;
}

.hero__search {
    background   : var(--c-white);
    border-radius: var(--r-2xl);
    padding      : var(--sp-5) var(--sp-6);
    box-shadow   : 0 20px 60px rgba(0,0,0,.28);
    max-width    : 1040px;
    margin       : 0 auto var(--sp-8);
}
.hero__search form {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--sp-3);
    align-items: center;
}
.hero__search .search-btn-row {
    display    : flex;
    justify-content: center;
}
.hero__search .form-control { background: var(--c-grey-50); }
.hero__search .form-control:focus { background: var(--c-white); }
.hero__search .form-control,
.hero__search .btn {
    min-height: 48px;
}
.hero__search .btn { min-width: 170px; }
@media (max-width: 900px) {
    .hero__search { padding: var(--sp-4); }
    .hero__search form { grid-template-columns: 1fr; }
    .hero__search .search-btn-row { justify-content: stretch; }
    .hero__search .search-btn-row .btn { width: 100%; }
}

.hero__stats {
    display        : flex;
    justify-content: center;
    flex-wrap      : wrap;
    gap            : var(--sp-8);
    margin-top     : var(--sp-8);
}
.stat-item { text-align: center; }
.stat-number {
    font-family: var(--font-display);
    font-size  : clamp(var(--text-3xl), 4vw, var(--text-4xl));
    font-weight: 700;
    color      : var(--c-white);
    display    : block;
}
.stat-label {
    font-size: var(--text-sm);
    color    : var(--c-teal-300);
    letter-spacing: .04em;
}

/* ─── 9. Specialty Pills / Tags ─────────────────────────────── */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
    display    : inline-flex;
    align-items: center;
    gap        : var(--sp-1);
    padding    : var(--sp-1) var(--sp-3);
    border-radius: var(--r-full);
    font-size  : var(--text-xs);
    font-weight: 600;
    background : var(--c-teal-50);
    color      : var(--c-primary);
    border     : 1px solid var(--c-teal-100);
    transition : all var(--t-fast);
}
.tag:hover { background: var(--c-primary); color: var(--c-white); }
.tag svg { width: 12px; height: 12px; }

/* Specialty feature cards */
.spec-card {
    text-align  : center;
    padding     : var(--sp-6);
    border-radius: var(--r-xl);
    border      : 1.5px solid var(--c-border);
    background  : var(--c-white);
    transition  : all var(--t-base);
    cursor      : pointer;
}
.spec-card:hover {
    border-color: var(--c-primary);
    background  : var(--c-teal-50);
    transform   : translateY(-4px);
    box-shadow  : var(--s-lg);
}
.spec-card__icon {
    width        : 56px; height: 56px;
    border-radius: var(--r-lg);
    background   : var(--c-teal-50);
    display      : flex;
    align-items  : center;
    justify-content: center;
    margin       : 0 auto var(--sp-4);
    transition   : background var(--t-base), box-shadow var(--t-base);
}
.spec-card:hover .spec-card__icon {
    background: var(--c-white);
    box-shadow: 0 8px 18px rgba(10, 25, 40, .12);
}
.spec-card__icon svg,
.spec-card__icon i { color: var(--c-primary); font-size: 24px; transition: color var(--t-base); }
.spec-card:hover .spec-card__icon svg,
.spec-card:hover .spec-card__icon i { color: var(--c-primary); }
.spec-card__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: transform var(--t-base), opacity var(--t-base);
}
.spec-card:hover .spec-card__icon img {
    transform: scale(1.04);
    opacity: 1;
}
.spec-card__name { font-size: var(--text-sm); font-weight: 600; color: var(--c-grey-800); }
.spec-card__count { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: 2px; }

/* ─── 10. Profile / Doctor Detail ─────────────────────────────── */
.profile-hero {
    background: linear-gradient(to bottom, var(--c-teal-900), var(--c-teal-700));
    padding   : var(--sp-12) 0 var(--sp-8);
    color     : var(--c-white);
}
.profile-hero__inner { display: flex; gap: var(--sp-8); align-items: center; flex-wrap: nowrap; }
.profile-hero-side {
    width: 240px;
    flex: 0 0 240px;
}
.profile-photo--hero {
    width: 140px;
    height: 140px;
    margin-bottom: var(--sp-3);
}
.profile-photo {
    width       : 140px; height: 140px;
    border-radius: var(--r-xl);
    border      : 4px solid rgba(255,255,255,.3);
    object-fit  : cover;
    object-position: center top;
    flex-shrink : 0;
    background  : var(--c-teal-800);
}
.profile-info { flex: 1; }
.profile-info h1 { color: var(--c-white); font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
.profile-specialty { color: var(--c-gold-400); font-weight: 600; font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.profile-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); }
.profile-meta-item { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); color: var(--c-teal-200); }
.profile-meta-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Profile body */
.profile-body { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-8); align-items: start; }
@media (max-width:900px) { .profile-body { grid-template-columns: 1fr; } }

.profile-body--v2 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
}

.profile-left-card {
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    background: var(--c-white);
    box-shadow: var(--s-md);
    padding: var(--sp-4);
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile-left-card--hero {
    position: static;
    top: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.profile-left-actions--hero {
    width: 220px;
    margin-bottom: var(--sp-2);
}

.profile-left-socials--hero {
    max-width: 220px;
}

.profile-left-socials--hero a {
    border-color: rgba(255,255,255,.35);
    color: var(--c-white);
    background: rgba(255,255,255,.12);
}

.profile-left-icons {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.profile-left-icons--hero {
    margin-top: var(--sp-1);
}

.profile-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid transparent;
    color: #fff;
}

.profile-icon-btn.is-phone { background: var(--c-primary); }
.profile-icon-btn.is-whatsapp { background: #25d366; }
.profile-icon-btn.is-instagram { background: #e1306c; }

.profile-icon-btn:hover {
    filter: brightness(1.05);
    color: #fff;
}

.profile-gallery-slider {
    position: relative;
}

.profile-gallery-track {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.profile-gallery-track::-webkit-scrollbar {
    display: none;
}

.profile-gallery-slide {
    min-width: min(100%, 360px);
    flex: 0 0 min(100%, 360px);
    scroll-snap-align: start;
    margin: 0;
}

.profile-gallery-slide img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
}

.profile-gallery-nav {
    position: absolute;
    top: calc(50% - 18px);
    width: 36px;
    height: 36px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: var(--c-grey-800);
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.profile-gallery-nav.prev { left: .35rem; }
.profile-gallery-nav.next { right: .35rem; }

.profile-photo--left {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-4);
}

.profile-left-actions {
    display: grid;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    width: 100%;
}

.profile-left-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.profile-left-socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-grey-700);
    background: var(--c-white);
}

.profile-main-col { min-width: 0; }

.profile-section-block {
    margin-bottom: var(--sp-6);
}

.profile-section-block h3 {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    margin-bottom: var(--sp-3);
}

.profile-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3);
}

.profile-service-card {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    background: var(--c-white);
}

.profile-service-card h4 {
    margin-bottom: var(--sp-2);
    font-size: var(--text-base);
}

.profile-service-desc {
    margin-bottom: var(--sp-2);
    color: var(--c-grey-600);
    font-size: var(--text-sm);
    line-height: 1.65;
}

.profile-service-desc.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.profile-contact-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .55rem .7rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-grey-700);
}

.profile-contact-address {
    margin-bottom: var(--sp-3);
    color: var(--c-grey-700);
    line-height: 1.75;
}

.service-read-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 3200;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

.service-read-modal.is-open {
    display: flex;
}

.service-read-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.service-read-modal__dialog {
    position: relative;
    max-width: 700px;
    margin: 0;
    width: min(700px, 100%);
    background: var(--c-white);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    box-shadow: var(--s-xl);
    padding: var(--sp-6);
}

.service-read-modal__close {
    position: absolute;
    top: .45rem;
    right: .7rem;
    border: 0;
    background: transparent;
    font-size: 1.6rem;
    color: var(--c-grey-500);
}

body.modal-open {
    overflow: hidden;
}

@media (max-width:1200px) {
    .profile-hero-side {
        width: 140px;
        flex: 0 0 140px;
        max-width: 140px;
    }

    .profile-hero__inner {
        align-items: flex-start;
        gap: var(--sp-4);
    }

    .profile-body--v2 {
        grid-template-columns: 1fr;
    }

    .profile-left-card,
    .profile-card-sticky {
        position: static;
        top: auto;
    }
}

.profile-card-sticky {
    position: sticky; top: calc(var(--header-h) + 1rem);
}
.inquiry-card {
    border-radius: var(--r-xl);
    border       : 1px solid var(--c-border);
    box-shadow   : var(--s-lg);
    overflow     : hidden;
}
.inquiry-card__head {
    background: var(--c-teal-700);
    padding   : var(--sp-5) var(--sp-6);
    color     : var(--c-white);
    text-align: center;
}
.inquiry-card__head h3 { color: var(--c-white); font-size: var(--text-xl); margin-bottom: var(--sp-1); }
.inquiry-card__body { padding: var(--sp-6); }

/* Tabs */
.tabs {
    border-bottom: 2px solid var(--c-border);
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
    padding    : var(--sp-3) var(--sp-5);
    font-size  : var(--text-sm);
    font-weight: 600;
    color      : var(--c-grey-600);
    border     : none;
    background : none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor     : pointer;
    white-space: nowrap;
    transition : color var(--t-fast), border-color var(--t-fast);
}
.tab-btn.active,
.tab-btn:hover { color: var(--c-primary); }
.tab-btn.active { border-bottom-color: var(--c-primary); }

.tab-panel { display: none; padding: var(--sp-6) 0; }
.tab-panel.active { display: block; }

/* ─── 11. Filter Sidebar ────────────────────────────────────── */
.listing-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
}
@media (max-width:1200px) {
    .listing-layout { grid-template-columns: 1fr; }
}

.listing-results {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.listing-results__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--sp-5);
}

.listing-results__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    border: 1px solid #d9e5ea;
    border-radius: var(--r-xl);
    padding: .8rem 1rem;
    box-shadow: 0 10px 22px rgba(10, 25, 40, .06);
}

.listing-results__count {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--c-grey-600);
}

.listing-results__count-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .55rem;
    border-radius: 999px;
    background: var(--c-primary);
    color: var(--c-white);
    font-size: var(--text-sm);
    font-weight: 700;
}

.listing-results__count-label {
    color: var(--c-grey-700);
}

.listing-results__sort {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--c-grey-500);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.listing-results__sort strong {
    color: var(--c-grey-800);
    font-size: var(--text-sm);
    margin-left: .3rem;
    text-transform: none;
    letter-spacing: 0;
}

.doctor-results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
}

@media (max-width: 980px) {
    .listing-results__toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .doctor-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4);
    }

    .doctor-results-grid .doctor-card__photo {
        aspect-ratio: 4 / 3.1;
    }

    .doctor-results-grid .doctor-card__body {
        padding: var(--sp-4);
    }

    .doctor-results-grid .doctor-card__name {
        font-size: var(--text-base) !important;
        line-height: 1.35;
    }
}

@media (max-width: 560px) {
    .doctor-results-grid {
        gap: var(--sp-3);
    }

    .doctor-results-grid .doctor-card__photo {
        aspect-ratio: 1 / 1;
    }

    .doctor-results-grid .doctor-card__specialty {
        font-size: .62rem;
    }

    .doctor-results-grid .doctor-card__meta {
        margin-bottom: var(--sp-2);
        font-size: .72rem;
    }

    .doctor-results-grid .doctor-card__rating {
        margin-bottom: var(--sp-2);
        gap: .3rem;
    }

    .doctor-results-grid .rating-count {
        display: none;
    }
}

.clinic-card__actions .btn,
.clinic-card__actions .btn:visited,
.clinic-card__actions .btn:hover,
.clinic-card__actions .btn:focus {
    color: var(--c-white);
}

.filter-sidebar {
    background   : var(--c-white);
    border       : 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding      : var(--sp-6);
    position     : sticky;
    top          : calc(var(--header-h) + 1rem);
    z-index      : 20;
}
.filter-sidebar h3 {
    font-size    : var(--text-base);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}
.filter-group { margin-bottom: var(--sp-5); }
.filter-group-label {
    font-size  : var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color      : var(--c-grey-500);
    margin-bottom: var(--sp-3);
}

@media (max-width:1200px) {
    .filter-sidebar {
        position: static;
        top: auto;
        z-index: auto;
    }
    .listing-results {
        position: static;
        z-index: auto;
    }
}

/* ─── 12. Alert / Flash ──────────────────────────────────────── */
.alert {
    padding      : var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    border       : 1px solid transparent;
    font-size    : var(--text-sm);
    display      : flex;
    align-items  : flex-start;
    gap          : var(--sp-3);
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.alert-success {
    background  : #f0fdf4;
    border-color: #bbf7d0;
    color       : #166534;
}
.alert-error {
    background  : #fef2f2;
    border-color: #fecaca;
    color       : #991b1b;
}
.alert-warning {
    background  : #fffbeb;
    border-color: #fde68a;
    color       : #92400e;
}
.alert-info {
    background  : var(--c-teal-50);
    border-color: var(--c-teal-100);
    color       : var(--c-teal-800);
}

/* ─── 13. Review Stars ──────────────────────────────────────── */
.review-card {
    padding      : var(--sp-5);
    border-radius: var(--r-lg);
    border       : 1px solid var(--c-border);
    margin-bottom: var(--sp-4);
}
.review-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.review-card__author { font-weight: 600; font-size: var(--text-sm); }
.review-card__date { font-size: var(--text-xs); color: var(--c-text-muted); }
.review-card__text { font-size: var(--text-sm); color: var(--c-grey-600); line-height: 1.7; }

/* Star Rating Input */
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--sp-1); }
.star-input input { display: none; }
.star-input label {
    font-size: 1.75rem;
    color    : var(--c-grey-300);
    cursor   : pointer;
    transition: color var(--t-fast), transform var(--t-fast);
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--c-accent); }
.star-input label:hover { transform: scale(1.15); }

/* ─── 14. Breadcrumb ────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: '›'; color: var(--c-grey-400); }
.breadcrumb a { font-size: var(--text-sm); color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb [aria-current] { font-size: var(--text-sm); color: var(--c-grey-900); font-weight: 500; }

/* ─── 15. Pagination ────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pagination a,
.pagination span {
    display    : flex;
    align-items: center;
    justify-content: center;
    width      : 36px; height: 36px;
    border-radius: var(--r-md);
    font-size  : var(--text-sm);
    font-weight: 500;
    border     : 1px solid var(--c-border);
    transition : all var(--t-fast);
    text-decoration: none;
    color      : var(--c-grey-700);
    background : var(--c-white);
}
.pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-teal-50); }
.pagination .current { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.pagination .disabled { opacity: .4; pointer-events: none; }

/* ─── 16. Badge ──────────────────────────────────────────────── */
.badge {
    display    : inline-flex;
    align-items: center;
    padding    : 2px var(--sp-2);
    border-radius: var(--r-full);
    font-size  : var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
}
.badge-teal    { background: var(--c-teal-100); color: var(--c-teal-800); }
.badge-gold    { background: var(--c-gold-200); color: #7a5500; }
.badge-green   { background: #dcfce7; color: #166534; }
.badge-red     { background: #fee2e2; color: #991b1b; }
.badge-grey    { background: var(--c-grey-200); color: var(--c-grey-700); }
.badge-amber   { background: #fef3c7; color: #92400e; }

/* ─── 17. Footer ─────────────────────────────────────────────── */
.site-footer {
    background: var(--c-teal-900);
    color     : var(--c-teal-300);
    padding   : var(--sp-20) 0 var(--sp-8);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--sp-10);
    margin-bottom: var(--sp-12);
}
@media (max-width:900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}
@media (max-width:540px) {
    .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand { }
.footer-logo {
    font-family: var(--font-display);

/* ─── Premium Public Layer v2 ─────────────────────────────── */
.page-hero {
    background: radial-gradient(120% 130% at 90% 0%, rgba(212, 160, 23, .16) 0%, rgba(212, 160, 23, 0) 45%),
                linear-gradient(140deg, #092a31 0%, #0f3f49 55%, #13505b 100%);
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.8rem, 3.5vw, 2.7rem);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.page-hero__inner {
    max-width: 860px;
}

.page-hero h1 {
    color: var(--c-white);
    margin: 0 0 var(--sp-2);
    letter-spacing: -.015em;
}

.page-hero p {
    color: var(--c-teal-200);
    margin: 0;
    font-size: var(--text-base);
    max-width: 720px;
}

.page-shell {
    padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(2.5rem, 5vw, 4.2rem);
}

.lux-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
    border: 1px solid #e5eaf0;
    border-radius: var(--r-xl);
    box-shadow: 0 16px 34px rgba(12, 24, 35, .07);
}

.lux-section-head {
    margin-bottom: var(--sp-8);
}

.lux-kicker {
    font-size: var(--text-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--c-teal-600);
    margin-bottom: var(--sp-2);
}

.lux-title {
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    margin-bottom: var(--sp-2);
}

.lux-subtitle {
    color: var(--c-grey-600);
    font-size: var(--text-base);
    line-height: 1.75;
    max-width: 760px;
}

.listing-layout {
    gap: clamp(1.25rem, 2vw, 2.1rem);
}

.filter-sidebar {
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    border: 1px solid #dfe7ee;
    box-shadow: 0 14px 26px rgba(13, 35, 51, .05);
    z-index: 20;
}

.listing-results__header {
    background: #fff;
    border: 1px solid #e5ebf1;
    border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: 0 8px 16px rgba(12, 24, 35, .04);
}

.doctor-card,
.city-listing-card,
.spec-card,
.review-card,
.inquiry-card,
.clinic-card__header {
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.doctor-card {
    border-color: #dfe6ee;
    box-shadow: 0 14px 28px rgba(10, 25, 40, .07);
}

.doctor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(10, 25, 40, .12);
}

.doctor-card__name {
    letter-spacing: -.01em;
}

.doctor-card__footer .btn {
    border-radius: var(--r-md);
}

.card-overlay-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.doctor-card { position: relative; }
.doctor-card .doctor-card__name a,
.doctor-card .btn {
    position: relative;
    z-index: 2;
}

.profile-hero {
    background: radial-gradient(130% 140% at 90% -5%, rgba(212, 160, 23, .2) 0%, rgba(212, 160, 23, 0) 43%),
                linear-gradient(140deg, #07252a 0%, #0e3a43 58%, #124953 100%);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.profile-photo {
    border-radius: 1.25rem;
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 18px 36px rgba(0,0,0,.24);
}

.tabs {
    margin-top: .35rem;
}

.tab-btn {
    border-top-left-radius: var(--r-md);
    border-top-right-radius: var(--r-md);
}

.tab-btn.active {
    background: #f8fafb;
}

.tab-panel {
    border-top: 1px solid #edf2f7;
    padding-top: var(--sp-5);
}

.inquiry-card {
    border: 1px solid #d9e1e8;
    box-shadow: 0 18px 36px rgba(9, 26, 37, .14);
}

.inquiry-card__head {
    background: linear-gradient(160deg, #0d3d45 0%, #1a6b7a 100%);
}

.trust-strip {
    background: #f6f8f9;
}

.site-footer {
    background: linear-gradient(180deg, #08272d 0%, #071f24 100%);
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}

.support-card {
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    border: 1px solid #e3e9ef;
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
    box-shadow: 0 14px 24px rgba(13, 30, 44, .06);
}

.support-card h3 {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    margin-bottom: .45rem;
}

.legal-prose {
    max-width: 860px;
    margin: 0 auto;
    background: linear-gradient(180deg, #fff 0%, #fcfdfd 100%);
    border: 1px solid #e2e8ef;
    border-radius: 1.15rem;
    padding: clamp(1.3rem, 3vw, 2.25rem);
    color: #334155;
    line-height: 1.9;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .06);
}

.legal-prose h2 {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    margin: 1.1rem 0 .45rem;
    color: var(--c-grey-900);
}

.legal-prose p + p { margin-top: .4rem; }

@media (max-width: 980px) {
    .support-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .support-grid { grid-template-columns: 1fr; }
    .page-hero { padding-top: 2.1rem; }
    .page-shell { padding-top: 1.6rem; }
}
    font-size  : var(--text-2xl);
    font-weight: 700;
    color      : var(--c-white);
    display    : block;
    margin-bottom: var(--sp-4);
}
.footer-desc { font-size: var(--text-sm); line-height: 1.7; margin-bottom: var(--sp-6); }
.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a {
    width : 38px; height: 38px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--c-teal-300);
    transition: all var(--t-fast);
}
.footer-social a:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.footer-social svg { width: 18px; height: 18px; }

.footer-col h4 { color: var(--c-white); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col li a { font-size: var(--text-sm); color: var(--c-teal-300); transition: color var(--t-fast); }
.footer-col li a:hover { color: var(--c-white); }

.footer-bottom {
    padding-top : var(--sp-6);
    border-top  : 1px solid rgba(255,255,255,.08);
    display     : flex;
    justify-content: space-between;
    align-items : center;
    flex-wrap   : wrap;
    gap         : var(--sp-4);
    font-size   : var(--text-sm);
}

/* ─── 18. Utility ────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--c-text-muted); }
.text-primary{ color: var(--c-primary); }
.text-accent { color: var(--c-accent); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.fw-bold     { font-weight: 700; }
.fw-600      { font-weight: 600; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ─── 19. Responsive Nav ────────────────────────────────────── */
@media (max-width:768px) {
    .nav-toggle { display: flex; }
    .nav-links {
        display       : none;
        position      : fixed;
        inset         : var(--header-h) 0 0 0;
        background    : var(--c-white);
        flex-direction: column;
        padding       : var(--sp-8) var(--sp-6);
        gap           : var(--sp-4);
        overflow-y    : auto;
        z-index       : 999;
    }
    .nav-links.open { display: flex; }
    .nav-links a { font-size: var(--text-lg); }
}

@media (max-width:1180px) {
    .nav-links a { font-size: .78rem; }
    .nav-actions .btn.btn-sm { padding: .38rem .8rem; }
}

/* ─── 20. Loading Spinner ───────────────────────────────────── */
.spinner {
    width : 24px; height: 24px;
    border: 3px solid rgba(255,255,255,.3);
    border-top-color: var(--c-white);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Trust Badges Strip */
.trust-strip {
    background: var(--c-grey-50);
    border-top   : 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-4) 0;
}
.trust-strip ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-8);
}
.trust-strip li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--c-grey-700);
}
.trust-strip svg { width: 20px; height: 20px; color: var(--c-primary); }
/* ─── Feature Cards (Hero) ──────────────────────────────────── */
.hero__features {
    display        : flex;
    justify-content: center;
    gap            : var(--sp-4);
    margin-bottom  : var(--sp-10);
    flex-wrap      : wrap;
}
.feature-card {
    background     : rgba(255,255,255,.12);
    border         : 1px solid rgba(255,255,255,.2);
    border-radius  : var(--r-xl);
    padding        : var(--sp-5) var(--sp-6);
    display        : flex;
    align-items    : center;
    gap            : var(--sp-3);
    color          : var(--c-white);
    text-decoration: none;
    transition     : background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    min-width      : 200px;
    backdrop-filter: blur(6px);
}
.feature-card:hover {
    background : rgba(255,255,255,.2);
    transform  : translateY(-3px);
    box-shadow : 0 12px 32px rgba(0,0,0,.2);
    color      : var(--c-white);
}
.feature-card__icon {
    width         : 44px; height: 44px;
    background    : var(--c-primary);
    border-radius : var(--r-lg);
    display       : flex;
    align-items   : center;
    justify-content: center;
    flex-shrink   : 0;
}
.feature-card__icon svg { width: 22px; height: 22px; color: var(--c-white); }
.feature-card__title { font-weight: 700; font-size: var(--text-base); margin-bottom: 2px; }
.feature-card__sub   { font-size: var(--text-xs); opacity: .78; }

/* ─── How It Works ──────────────────────────────────────────── */
.how-section { padding: var(--sp-20) 0; background: var(--c-grey-50); }
.how-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : var(--sp-8);
    margin-top           : var(--sp-10);
}
@media (max-width: 768px) { .how-grid { grid-template-columns: 1fr; } }
.how-step {
    text-align    : center;
    position      : relative;
    padding       : var(--sp-8) var(--sp-6);
    background    : var(--c-white);
    border-radius : var(--r-xl);
    border        : 1px solid var(--c-border);
    box-shadow    : var(--s-sm);
    transition    : box-shadow var(--t-fast), transform var(--t-fast);
}
.how-step:hover { box-shadow: var(--s-md); transform: translateY(-2px); }
.how-step__number {
    width         : 56px; height: 56px;
    border-radius : 50%;
    background    : var(--c-primary);
    color         : var(--c-white);
    font-family   : var(--font-display);
    font-size     : var(--text-2xl);
    font-weight   : 700;
    display       : flex;
    align-items   : center;
    justify-content: center;
    margin        : 0 auto var(--sp-5);
    box-shadow    : 0 4px 16px rgba(var(--c-primary-rgb),.35);
}
.how-step__title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--sp-3); color: var(--c-heading); }
.how-step__desc  { font-size: var(--text-base); color: var(--c-text); line-height: 1.65; }
/* Connector arrows between steps on desktop */
.how-grid .how-step:not(:last-child)::after {
    content    : '→';
    position   : absolute;
    right      : calc(-1 * var(--sp-4) - 10px);
    top        : 50%;
    transform  : translateY(-50%);
    font-size  : var(--text-2xl);
    color      : var(--c-primary);
    opacity    : .4;
    pointer-events: none;
}
@media (max-width: 768px) { .how-grid .how-step::after { display: none; } }

/* ─── Cities Section ────────────────────────────────────────── */
.cities-section { padding: var(--sp-20) 0; }
.cities-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap                  : var(--sp-4);
    margin-top           : var(--sp-10);
}
.city-card {
    position     : relative;
    border-radius: var(--r-xl);
    overflow     : hidden;
    background   : var(--c-teal-700);
    min-height   : 140px;
    display      : flex;
    align-items  : flex-end;
    text-decoration: none;
    transition   : transform var(--t-fast), box-shadow var(--t-fast);
    box-shadow   : var(--s-sm);
}
.city-card:hover { transform: translateY(-4px); box-shadow: var(--s-lg); }
.city-card__img {
    position  : absolute; inset: 0;
    width     : 100%; height: 100%;
    object-fit: cover;
    opacity   : .65;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.city-card:hover .city-card__img { opacity: .55; transform: scale(1.04); }
.city-card__label {
    position   : relative;
    z-index    : 1;
    padding    : var(--sp-4);
    color      : var(--c-white);
    font-weight: 700;
    font-size  : var(--text-base);
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    background : linear-gradient(transparent, rgba(0,0,0,.55));
    width      : 100%;
}
.city-card__count {
    display    : block;
    font-size  : var(--text-xs);
    font-weight: 400;
    opacity    : .85;
    margin-top : 2px;
}

/* City chip strip (filter/nav) */
.city-chips {
    display  : flex;
    flex-wrap: wrap;
    gap      : var(--sp-2);
    margin-top: var(--sp-6);
}
.city-chip {
    display       : inline-flex;
    align-items   : center;
    padding       : var(--sp-2) var(--sp-4);
    border-radius : var(--r-full);
    border        : 1px solid var(--c-border);
    font-size     : var(--text-sm);
    font-weight   : 500;
    color         : var(--c-grey-700);
    background    : var(--c-white);
    text-decoration: none;
    transition    : background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.city-chip:hover, .city-chip.active {
    background   : var(--c-primary);
    color        : var(--c-white);
    border-color : var(--c-primary);
}

/* ─── Specialty Icon from SVG file ─────────────────────────── */
.specialty-card__icon-img {
    width  : 48px; height: 48px;
    display: block;
    margin : 0 auto var(--sp-3);
    color  : var(--c-primary);
}
.specialty-card__icon-img img {
    width : 100%;
    height: 100%;
}

/* ─── Inquiry Card Sidebar (enhanced) ──────────────────────── */
.consult-type {
    display        : flex;
    gap            : var(--sp-2);
    margin-bottom  : var(--sp-4);
}
.consult-type__btn {
    flex           : 1;
    padding        : var(--sp-2) var(--sp-3);
    border-radius  : var(--r-md);
    border         : 2px solid var(--c-border);
    background     : var(--c-grey-50);
    font-size      : var(--text-sm);
    font-weight    : 600;
    color          : var(--c-grey-600);
    cursor         : pointer;
    text-align     : center;
    transition     : all var(--t-fast);
}
.consult-type__btn.active,
.consult-type__btn:hover {
    border-color: var(--c-primary);
    background  : rgba(var(--c-primary-rgb), .06);
    color       : var(--c-primary);
}
.consult-type input[type="radio"] { display: none; }
.inquiry-card .form-label {
    font-size  : var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color      : var(--c-grey-500);
    margin-bottom: var(--sp-1);
}
.inquiry-card__trust {
    display    : flex;
    align-items: center;
    gap        : var(--sp-2);
    font-size  : var(--text-xs);
    color      : var(--c-grey-500);
    margin-top : var(--sp-4);
    justify-content: center;
}
.inquiry-card__trust svg { width: 14px; height: 14px; color: var(--c-primary); }

/* ─── Doctor profile photo (SVG avatar support) ─────────────── */
.profile-photo[src$=".svg"],
.profile-photo.is-avatar {
    object-fit : contain;
    padding    : 4px;
    background : var(--c-teal-800);
}
.doctor-card__photo img[src$=".svg"] {
    object-fit : contain;
    transform  : none !important;
}

/* ─── Cities Listing Page ───────────────────────────────────── */
.cities-page-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap                  : var(--sp-6);
    margin-top           : var(--sp-10);
}
.city-listing-card {
    border-radius: var(--r-xl);
    border       : 1px solid var(--c-border);
    background   : var(--c-white);
    overflow     : hidden;
    box-shadow   : var(--s-sm);
    text-decoration: none;
    display      : flex;
    flex-direction: column;
    transition   : box-shadow var(--t-fast), transform var(--t-fast);
}
.city-listing-card:hover { box-shadow: var(--s-lg); transform: translateY(-3px); }
.city-listing-card__img {
    width     : 100%;
    height    : 180px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--c-teal-700), var(--c-teal-500));
}
.city-listing-card__body { padding: var(--sp-5); flex: 1; }
.city-listing-card__name { font-size: var(--text-xl); font-weight: 700; color: var(--c-heading); margin-bottom: var(--sp-1); }
.city-listing-card__country { font-size: var(--text-sm); color: var(--c-grey-500); margin-bottom: var(--sp-3); }
.city-listing-card__footer {
    padding     : var(--sp-4) var(--sp-5);
    border-top  : 1px solid var(--c-border);
    display     : flex;
    align-items : center;
    justify-content: space-between;
    font-size   : var(--text-sm);
    color       : var(--c-primary);
    font-weight : 600;
}

/* Hide CTA button on mobile — hamburger menu only */
@media (max-width: 767px) {
  .nav-cta-desktop { display: none !important; }
    .nav-account-btn { display: none !important; }
}