/*
Theme Name:  Dr. Nayef Diyab Alotaiby
Theme URI:   https://example.com
Description: Personal medical website for Dr. Nayef — ophthalmologist specializing in glaucoma & cataract surgery. Arabic RTL, Saudi audience.
Version:     1.0.0
Author:      Creative Code
Author URI:  https://creativecode.agency
Text Domain: dr-nayef
Domain Path: /languages
Tags:        rtl, medical, arabic, custom-logo, custom-menu, featured-images, theme-options
*/

/* ============================================================
   GOOGLE FONTS — Alexandria
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    --navy:       #1a1f6e;
    --deep-navy:  #0b0f35;
    --navy-mid:   #22297a;
    --navy-light: #2d357f;
    --cyan:       #00c8ff;
    --white:      #ffffff;
    --muted:      rgba(255,255,255,0.65);
    --muted-light:rgba(255,255,255,0.45);
    --border:     rgba(255,255,255,0.08);
    --border-cyan:rgba(0,200,255,0.2);

    --container:  1200px;
    --pad:        36px;

    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  18px;
    --radius-xl:  24px;

    --transition: 0.25s ease;
    --font:       'Alexandria', sans-serif;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--white);
    background: var(--deep-navy);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Arabic text always 1.5 line-height per spec */
h1, h2, h3, h4, h5, h6,
p, li, span, a, label, input, textarea, select, button {
    font-family: var(--font);
    line-height: 1.5;
}

/* Reset */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
}

.section { padding: 88px 0; }

.section-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 12px;
    line-height: 1.5;
}

.section-title {
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 800;
    color: var(--white);
    line-height: 1.5;
    margin-bottom: 16px;
}

.section-title span,
.section-title em {
    color: var(--cyan);
    font-style: normal;
}

.section-desc {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.5;
    max-width: 580px;
}

.section-header { margin-bottom: 52px; }
.section-header.center { text-align: center; }
.section-header.center .section-desc { margin: 0 auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cyan);
    color: var(--deep-navy);
    font-size: 14px;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: var(--radius-md);
    border: 2px solid var(--cyan);
    transition: opacity var(--transition);
    line-height: 1.5;
}
.btn-primary:hover { opacity: 0.85; }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    padding: 13px 28px;
    border-radius: var(--radius-md);
    border: 1.5px solid rgba(255,255,255,0.22);
    transition: border-color var(--transition), background var(--transition);
    line-height: 1.5;
}
.btn-outline:hover {
    border-color: rgba(255,255,255,0.42);
    background: rgba(255,255,255,0.04);
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25d366;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: var(--radius-md);
    border: none;
    transition: opacity var(--transition);
    line-height: 1.5;
}
.btn-whatsapp:hover { opacity: 0.85; }

/* ============================================================
   STICKY HEADER / NAV
   ============================================================ */
#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(11,15,53,0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0,200,255,0.1);
    transition: box-shadow var(--transition);
}
#site-header.scrolled {
    box-shadow: 0 4px 32px rgba(0,0,0,0.35);
}

.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: flex;
    align-items: center;
    height: 70px;
    gap: 24px;
}

/* Logo — right side */
.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
}
.site-logo img,
.site-logo .custom-logo {
    height: 48px;
    width: auto;
    max-width: 200px;
    display: block;
}
.logo-fallback {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-mark {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--cyan), #0077aa);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--white);
    flex-shrink: 0;
    line-height: 1;
}
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1.3; }
.logo-name  { font-size: 13px; font-weight: 700; color: var(--white); }
.logo-title { font-size: 10px; font-weight: 400; color: var(--muted); }

/* Main nav — center */
.main-nav {
    flex: 1;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 4px;
    /* Ensure mobile fixed positioning is reset on desktop */
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    padding: 0;
    width: auto;
}
.main-nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
}
.main-nav a {
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
    line-height: 1.5;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
    color: var(--white);
    background: rgba(255,255,255,0.06);
}
.main-nav .current-menu-item > a { color: var(--cyan); }

/* CTA — left side */
.nav-cta-wrap { flex-shrink: 0; }

/* Hide booking menu item — handled by nav-cta-wrap button */
.main-nav .nav-hide-cta { display: none !important; }

/* Mobile hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    position: relative;
    background: var(--deep-navy);
    overflow: hidden;
}

.hero-grid {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: 1fr 400px;
    align-items: center;
    min-height: 600px;
    gap: 0;
}

.hero-text {
    padding: 80px 0 80px 0;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,200,255,0.08);
    border: 1px solid rgba(0,200,255,0.22);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cyan);
    margin-bottom: 24px;
    line-height: 1.5;
}
.badge-dot {
    width: 6px; height: 6px;
    background: var(--cyan);
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse 2s ease infinite;
}
@keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.5; transform:scale(0.7); }
}

.hero-title {
    font-size: clamp(26px, 2.6vw, 42px);
    font-weight: 800;
    line-height: 1.5;
    color: var(--white);
    margin-bottom: 20px;
}
.hero-title em { color: var(--cyan); font-style: normal; }

.hero-sub {
    font-size: 15px;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 36px;
    max-width: 460px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    gap: 36px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.stat-val {
    font-size: 26px;
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
}
.stat-val em { color: var(--cyan); font-style: normal; }
.stat-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* Photo column
   - يكسر الـ container padding بـ negative margin لليسار
   - الـ diagonal بـ ::after على الحافة اليمنى (المقابلة للنص) */
.hero-photo-col {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
    /* كسر الـ padding يميناً ويساراً */
    margin-left: calc(-1 * var(--pad));
    /* خلفية بلون Navy الأغمق */
    background: var(--navy);
    /* ارتفاع كامل */
    align-self: stretch;
}

/* الـ diagonal على الحافة اليمنى — triangle يقطع الزاوية */
.hero-photo-col::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 60px;
    height: 100%;
    background: var(--deep-navy);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 4;
    pointer-events: none;
}

.hero-photo-bg { display: none; }
.hero-diagonal { display: none; }

.hero-photo-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}
.hero-doctor-img {
    max-width: 320px;
    width: 100%;
    object-fit: contain;
    object-position: bottom center;
    max-height: 560px;
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.hero-doctor-img.loaded { opacity: 1; }

.hero-photo-placeholder {
    width: 260px;
    height: 100%;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* Floating cards */
.hero-float-card {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(11,15,53,0.92);
    border: 1px solid var(--border-cyan);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    z-index: 10;
    backdrop-filter: blur(12px);
    min-width: 140px;
}
.fc-val { font-size: 22px; font-weight: 800; color: var(--white); line-height: 1.2; }
.fc-val em { color: var(--cyan); font-style: normal; }
.fc-lbl { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

.hero-avail-badge {
    position: absolute;
    bottom: 24px;
    left: 12px;
    background: rgba(11,15,53,0.88);
    border: 1px solid rgba(0,200,255,0.25);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 11px;
    color: var(--muted);
    z-index: 10;
    backdrop-filter: blur(8px);
    line-height: 1.5;
}
.avail-label { color: var(--cyan); font-size: 12px; font-weight: 600; display: block; margin-bottom: 2px; }

/* ============================================================
   ABOUT SECTION (home strip)
   ============================================================ */
.about-home-section { background: var(--navy); }

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-img-wrap { position: relative; }
.about-img-box {
    background: linear-gradient(135deg, var(--navy-mid), var(--deep-navy));
    border-radius: 20px;
    border: 1px solid var(--border-cyan);
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.about-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.about-badge-float {
    position: absolute;
    bottom: -18px;
    left: 24px;
    background: var(--deep-navy);
    border: 1px solid var(--border-cyan);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
}
.ab-icon {
    width: 38px; height: 38px;
    background: rgba(0,200,255,0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ab-text { line-height: 1.4; }
.ab-text strong { font-size: 13px; color: var(--white); display: block; }
.ab-text span { font-size: 11px; color: var(--muted); }

.about-credentials { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.cred-item { display: flex; align-items: flex-start; gap: 12px; }
.cred-dot {
    width: 8px; height: 8px;
    background: var(--cyan);
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.cred-text { font-size: 14px; color: var(--muted); line-height: 1.5; }
.cred-text strong { color: var(--white); }

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services-home-section { background: var(--deep-navy); }

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    background: rgba(26,31,110,0.35);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,200,255,0.5), transparent);
    opacity: 0;
    transition: opacity var(--transition);
}
.service-card:hover {
    border-color: rgba(0,200,255,0.28);
    background: rgba(26,31,110,0.65);
    transform: translateY(-4px);
}
.service-card:hover::before { opacity: 1; }

.sc-icon {
    width: 56px; height: 56px;
    background: rgba(0,200,255,0.08);
    border-radius: 14px;
    border: 1px solid rgba(0,200,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
    overflow: hidden;
    flex-shrink: 0;
}
/* Image icon */
.sc-icon .sc-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}
/* SVG fallback */
.sc-icon .sc-icon-svg {
    width: 26px; height: 26px;
    color: var(--cyan);
    display: block;
}
/* Legacy emoji */
.sc-icon .sc-icon-emoji { line-height: 1; }

/* Service hero icon — bigger on single page */
.service-hero-icon {
    width: 64px; height: 64px;
    background: rgba(0,200,255,0.08);
    border-radius: 16px;
    border: 1px solid rgba(0,200,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    overflow: hidden;
}
.service-hero-icon .sc-icon-img { width: 36px; height: 36px; object-fit: contain; filter: brightness(0) invert(1) opacity(0.9); }
.service-hero-icon .sc-icon-svg { width: 30px; height: 30px; color: var(--cyan); }

/* Sidebar service icon */
.sidebar-svc-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sidebar-svc-icon .sc-icon-img { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) invert(1) opacity(0.6); }
.sidebar-svc-icon .sc-icon-svg { width: 16px; height: 16px; color: var(--muted); }
.sc-question {
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.5;
    margin-bottom: 10px;
}
.sc-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 22px;
}
.sc-link {
    font-size: 13px;
    color: var(--cyan);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
    transition: gap var(--transition);
}
.service-card:hover .sc-link { gap: 10px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { background: var(--navy); }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.testi-card {
    background: var(--deep-navy);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    transition: border-color var(--transition);
}
.testi-card:hover { border-color: var(--border-cyan); }

.testi-stars { color: #f59e0b; font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
.testi-text {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 22px;
    font-style: italic;
}
.testi-author { display: flex; align-items: center; gap: 10px; }
.testi-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(0,200,255,0.1);
    border: 1px solid var(--border-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--cyan);
    flex-shrink: 0;
    overflow: hidden;
}
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-name { font-size: 13px; font-weight: 600; color: var(--white); line-height: 1.4; }
.testi-meta { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* ============================================================
   BOOKING CTA SECTION
   ============================================================ */
.booking-cta-section { background: var(--deep-navy); }

.booking-cta-inner {
    background: linear-gradient(135deg, rgba(26,31,110,0.55), rgba(0,200,255,0.04));
    border: 1px solid rgba(0,200,255,0.16);
    border-radius: var(--radius-xl);
    padding: 72px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.booking-cta-inner::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%;
    transform: translateX(-50%);
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(0,200,255,0.06), transparent 65%);
    pointer-events: none;
}

.booking-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 36px;
}

.booking-meta {
    display: flex;
    gap: 36px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.bm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}
.bm-icon { color: var(--cyan); font-size: 15px; flex-shrink: 0; }

/* ============================================================
   BLOG / ARCHIVE
   ============================================================ */
.blog-section { background: var(--deep-navy); }

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.post-card {
    background: rgba(26,31,110,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition);
}
.post-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-cyan);
}
.post-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: var(--navy);
}
.post-thumb-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--navy-mid), var(--navy));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    opacity: 0.3;
}
.post-body { padding: 22px 20px; }
.post-cat {
    font-size: 11px;
    font-weight: 600;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    line-height: 1.5;
}
.post-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.5;
    margin-bottom: 10px;
}
.post-title a { color: inherit; transition: color var(--transition); }
.post-title a:hover { color: var(--cyan); }
.post-excerpt { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }
.post-meta { font-size: 11px; color: var(--muted-light); display: flex; gap: 16px; line-height: 1.5; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 52px; }
.pagination a,
.pagination span {
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--muted);
    transition: all var(--transition);
    line-height: 1;
}
.pagination a:hover { border-color: var(--cyan); color: var(--cyan); }
.pagination .current { background: var(--cyan); color: var(--deep-navy); border-color: var(--cyan); font-weight: 700; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.single-post-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px var(--pad);
}

.post-header { margin-bottom: 48px; }
.post-header .post-cat { margin-bottom: 14px; }
.post-header h1 {
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 18px;
}
.post-header .post-meta { font-size: 13px; margin-bottom: 0; }
.post-featured-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: 48px;
    border: 1px solid var(--border);
}

.post-content {
    font-size: 16px;
    color: rgba(255,255,255,0.88);
    line-height: 1.5;
}
.post-content h2 { font-size: 22px; font-weight: 700; color: var(--white); margin: 36px 0 14px; }
.post-content h3 { font-size: 18px; font-weight: 600; color: var(--white); margin: 28px 0 10px; }
.post-content p { margin-bottom: 18px; }
.post-content ul,
.post-content ol { padding-right: 22px; margin-bottom: 18px; }
.post-content ul { list-style: none; }
.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: 8px; }
.post-content ul > li::before { content: '\2014'; color: var(--cyan); margin-left: 8px; }
.post-content blockquote {
    border-right: 3px solid var(--cyan);
    padding: 16px 20px;
    background: rgba(0,200,255,0.04);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 28px 0;
    font-style: italic;
    color: var(--muted);
}
.post-content a { color: var(--cyan); text-decoration: underline; }
.post-content img { border-radius: var(--radius-md); margin: 24px 0; }

/* ============================================================
   SERVICES ARCHIVE + SINGLE
   ============================================================ */
.page-hero {
    background: linear-gradient(150deg, var(--navy) 0%, var(--deep-navy) 100%);
    padding: 72px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.page-hero::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--deep-navy));
}

.page-hero-title { font-size: clamp(28px, 4vw, 46px); font-weight: 800; line-height: 1.5; }
.page-hero-desc { font-size: 16px; color: var(--muted); line-height: 1.5; margin-top: 14px; max-width: 520px; }

/* Single service */
.single-service-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 60px;
    padding: 72px 0;
    align-items: start;
}
.service-content h2 { font-size: 20px; font-weight: 700; margin: 28px 0 10px; color: var(--white); line-height: 1.5; }
.service-content p { font-size: 15px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }

.service-sidebar { position: sticky; top: 90px; }
.sidebar-service-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    transition: color var(--transition);
    line-height: 1.5;
}
.sidebar-service-link:hover { color: var(--cyan); }
.sidebar-card {
    background: rgba(26,31,110,0.4);
    border: 1px solid var(--border-cyan);
    border-radius: var(--radius-lg);
    padding: 26px 22px;
    margin-bottom: 20px;
}
.sidebar-card-title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 16px; line-height: 1.5; }

/* ============================================================
   CONTACT / BOOKING PAGES
   ============================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 64px;
    padding: 72px 0;
    align-items: start;
}

.contact-info { display: flex; flex-direction: column; gap: 20px; }
.ci-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(26,31,110,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-md);
    transition: border-color var(--transition);
}
.ci-item:hover { border-color: var(--border-cyan); }
.ci-icon {
    width: 42px; height: 42px;
    background: rgba(0,200,255,0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    color: var(--cyan);
}
.ci-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; line-height: 1.5; }
.ci-value { font-size: 14px; font-weight: 600; color: var(--white); line-height: 1.5; }
.ci-value a { color: var(--cyan); }

/* ============================================================
   FORMS (fallback + Fluent Forms override)
   ============================================================ */
.theme-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; color: var(--muted); line-height: 1.5; }
.form-input,
.form-textarea,
.form-select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 14px;
    color: var(--white);
    font-family: var(--font);
    line-height: 1.5;
    transition: border-color var(--transition);
    width: 100%;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--cyan);
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(255,255,255,0.3); }
.form-textarea { resize: vertical; min-height: 130px; }
.form-select option { background: var(--deep-navy); }

/* Fluent Forms override */
.fluentform .ff-el-group { margin-bottom: 16px; }
.fluentform .ff-el-form-control,
.fluentform .ff-el-form-control:not([type=checkbox]):not([type=radio]) {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: var(--radius-sm) !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: var(--white) !important;
    font-family: var(--font) !important;
    line-height: 1.5 !important;
}
.fluentform .ff-el-form-control:focus { border-color: var(--cyan) !important; }
.fluentform .ff-btn-submit {
    background: var(--cyan) !important;
    color: var(--deep-navy) !important;
    font-family: var(--font) !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    padding: 13px 28px !important;
    font-size: 14px !important;
    cursor: pointer !important;
}
.fluentform .ff-el-input--label label {
    color: var(--muted) !important;
    font-size: 13px !important;
    font-family: var(--font) !important;
    line-height: 1.5 !important;
}

/* ============================================================
   ABOUT PAGE (full)
   ============================================================ */
.about-full-section { background: var(--deep-navy); }

.about-lead {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
    margin-bottom: 48px;
    max-width: 720px;
}

.timeline { display: flex; flex-direction: column; gap: 0; position: relative; margin-top: 48px; }
.timeline::before {
    content: '';
    position: absolute;
    left: 29px;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--cyan), transparent);
}
.tl-item {
    display: grid;
    grid-template-columns: 1fr 40px;
    gap: 20px;
    padding-bottom: 40px;
    position: relative;
}
.tl-content {
    background: rgba(26,31,110,0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    transition: border-color var(--transition);
}
.tl-content:hover { border-color: var(--border-cyan); }
.tl-year { font-size: 11px; font-weight: 700; color: var(--cyan); margin-bottom: 6px; line-height: 1.5; }
.tl-title { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 4px; line-height: 1.5; }
.tl-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.tl-dot {
    width: 20px; height: 20px;
    background: var(--cyan);
    border-radius: 50%;
    margin-top: 22px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(0,200,255,0.15);
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
    background: #060913;
    padding: 60px 0 28px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 52px;
    margin-bottom: 52px;
}
.footer-brand-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: 14px 0 20px;
    max-width: 300px;
}
.footer-social { display: flex; gap: 10px; }
.social-btn {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    transition: all var(--transition);
}
.social-btn:hover { background: rgba(0,200,255,0.12); color: var(--cyan); border-color: var(--border-cyan); }

.footer-heading { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 18px; line-height: 1.5; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    transition: color var(--transition);
    line-height: 1.5;
}
.footer-links a:hover { color: var(--cyan); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.28); line-height: 1.5; }
.footer-tagline { font-size: 12px; color: rgba(0,200,255,0.45); line-height: 1.5; }

/* ============================================================
   ADMIN BAR OFFSET
   ============================================================ */
.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #site-header { top: 46px; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr 320px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .posts-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { gap: 48px; }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    :root { --pad: 20px; }

    /* ── NAV ── */
    .nav-toggle { display: flex; }
    .nav-cta-wrap { display: none; }
    .nav-inner {
        gap: 0;
        justify-content: space-between;
        padding: 0 var(--pad);
    }
    /* Logo flush to right edge */
    .site-logo { margin-right: 0; }

    /* main-nav: full-width dropdown, directly under header */
    .main-nav {
        position: fixed;
        top: 70px;
        right: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        background: rgba(11,15,53,0.98);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-top: 1px solid rgba(0,200,255,0.15);
        border-bottom: 1px solid rgba(0,200,255,0.15);
        padding: 8px 0 16px;
        transform: translateY(-110%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
        z-index: 999;
        flex: none;
        width: 100%;
    }
    .main-nav.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .main-nav ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .main-nav a {
        padding: 13px 20px;
        display: block;
        font-size: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .main-nav::after { display: none; }

    /* Logo */
    .site-logo img,
    .site-logo .custom-logo { height: 36px; }
    .logo-name { font-size: 12px; }
    .logo-title { display: none; }

    /* ── HERO ── */
    .hero-section { overflow: hidden; }

    /* Stack: photo on top, text below */
    .hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 320px auto;
        min-height: unset;
    }

    /* Photo — full width on mobile, shows at top */
    .hero-photo-col {
        display: flex;
        grid-row: 1;
        min-height: 320px;
        height: 320px;
        position: relative;
    }
    /* Dark gradient overlay so text is readable if we ever put text on it */
    .hero-photo-col::before {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 60%;
        background: linear-gradient(to top, var(--deep-navy), transparent);
        z-index: 3;
        pointer-events: none;
    }
    .hero-photo-col::after {
        display: none;
    }
    .hero-doctor-img {
        opacity: 1;
        object-position: top center;
        max-height: 320px;
    }

    /* Text below photo */
    .hero-text {
        grid-row: 2;
        padding: 36px var(--pad) 52px;
        text-align: center;
    }
    .hero-badge { margin: 0 auto 20px; }
    .hero-sub { margin: 0 auto 28px; }
    .hero-actions { justify-content: center; }
    .hero-stats {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
        border-top: 1px solid var(--border);
        padding-top: 24px;
        margin-top: 32px;
    }
    .stat-val { font-size: 22px; }
    .hero-title { font-size: clamp(22px, 7vw, 32px); }

    /* Hide float cards on mobile */
    .hero-float-card,
    .hero-avail-badge { display: none; }

    /* ── SECTIONS ── */
    .section { padding: 52px 0; }

    .about-grid,
    .single-service-layout,
    .contact-grid { grid-template-columns: 1fr; }

    /* About image — visible on mobile, full width above text */
    .about-img-wrap { display: block; }
    .about-img-box {
        height: 260px;
        border-radius: 14px;
    }
    .about-img-box img { border-radius: 14px; }
    .about-badge-float {
        bottom: -14px;
        left: 16px;
        padding: 10px 13px;
    }
    /* Extra bottom padding so badge doesn't overlap text */
    .about-img-wrap { padding-bottom: 28px; }

    .services-grid,
    .posts-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }

    /* ── BOOKING CTA ── */
    .booking-cta-inner { padding: 40px 20px; }
    .booking-actions { flex-direction: column; align-items: stretch; }
    .booking-actions .btn-primary,
    .booking-actions .btn-whatsapp { justify-content: center; text-align: center; }
    .booking-meta { flex-direction: column; gap: 12px; }

    /* ── FOOTER ── */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }

    /* ── PAGE HERO ── */
    .page-hero { padding: 48px 0; }
    .page-hero-title { font-size: clamp(22px, 6vw, 32px); }

    /* ── SINGLE POST ── */
    .single-post-wrap { padding: 48px var(--pad); }

    /* ── POST NAV ── */
    .single-post-wrap nav[style] { flex-direction: column; gap: 20px; }

    /* ── PAGINATION ── */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 6px; }

    /* ── HERO photo shorter on very small screens ── */
    .hero-grid { grid-template-rows: 260px auto; }
    .hero-photo-col { min-height: 260px; height: 260px; }
    .hero-doctor-img { max-height: 260px; }

    /* ── BEFORE/AFTER ── */
    .ba-grid { grid-template-columns: 1fr; }

    /* ── WHATSAPP FLOAT ── */
    .wa-float { padding: 14px; border-radius: 50%; }
    .wa-float-label { display: none; }

    /* ── TIMELINE ── */
    .timeline::before { right: 11px; }
    .tl-item { grid-template-columns: 1fr 24px; gap: 12px; }
    .tl-dot { width: 14px; height: 14px; margin-top: 20px; }
}

/* ============================================================
   BEFORE / AFTER SECTION
   ============================================================ */
.ba-section { background: var(--navy); }

.ba-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.ba-card {
    background: var(--deep-navy);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition);
}
.ba-card:hover { border-color: var(--border-cyan); }

.ba-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.ba-img-wrap {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}
.ba-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.ba-card:hover .ba-img-wrap img { transform: scale(1.04); }

.ba-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(11,15,53,0.85);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(6px);
    line-height: 1.5;
    z-index: 2;
}
.ba-label-after {
    background: rgba(0,200,255,0.15);
    color: var(--cyan);
}

.ba-meta {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ba-service {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.5;
}
.ba-result {
    font-size: 12px;
    color: var(--cyan);
    line-height: 1.5;
}

/* ba-grid mobile handled in main 768px block */

/* ============================================================
   BOOKING POPUP
   ============================================================ */
.bp-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.bp-overlay[hidden] { display: none; }
.bp-overlay.bp-open { opacity: 1; }

.bp-modal {
    background: var(--deep-navy);
    border: 1px solid rgba(0,200,255,0.2);
    border-radius: var(--radius-lg);
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(16px);
    transition: transform 0.25s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,200,255,0.2) transparent;
}
.bp-overlay.bp-open .bp-modal { transform: translateY(0); }

.bp-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    line-height: 1;
}
.bp-close:hover { background: rgba(255,255,255,0.12); color: var(--white); }

.bp-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 24px;
    line-height: 1.4;
}
.bp-note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin-top: 16px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .bp-overlay { align-items: flex-end; padding: 0; }
    .bp-modal {
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 92vh;
        padding: 28px 20px 32px;
    }
    .bp-overlay.bp-open .bp-modal { transform: translateY(0); }
    .bp-overlay .bp-modal { transform: translateY(40px); }
}

/* ============================================================
   WHATSAPP FLOAT BUTTON
   ============================================================ */
.wa-float {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25d366;
    color: #fff;
    padding: 14px 20px 14px 16px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font);
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
    overflow: hidden;
    max-width: 200px;
    line-height: 1.5;
}
.wa-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(37,211,102,0.5);
}
.wa-float-label {
    white-space: nowrap;
    line-height: 1.5;
}
/* Pulse animation on the button */
.wa-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: #25d366;
    animation: wa-pulse 2.5s ease infinite;
    z-index: -1;
}
@keyframes wa-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1.15); opacity: 0; }
}
/* wa-float mobile handled in main 768px block */

/* ============================================================
   WHY CHOOSE SECTION
   ============================================================ */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.why-card {
    background: rgba(26,31,110,0.35);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    transition: border-color var(--transition), transform var(--transition);
}
.why-card:hover {
    border-color: var(--border-cyan);
    transform: translateY(-3px);
}
.why-icon {
    font-size: 32px;
    margin-bottom: 14px;
    display: block;
}
.why-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
    line-height: 1.5;
}
.why-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1024px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .why-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   480px — Small Mobile
   ============================================================ */
@media (max-width: 480px) {
    /* Hero stats — stack vertically */
    .hero-stats { flex-direction: column; gap: 16px; border-top: none; padding-top: 0; margin-top: 32px; }
    .stat-item { display: flex; align-items: center; gap: 12px; }
    .stat-val { font-size: 24px; }

    /* Nav inner spacing */
    .admin-bar #site-header { top: 0; }

    /* Section padding tighter */
    .section { padding: 44px 0; }

    /* Buttons full width in hero */
    .hero-actions { flex-direction: column; }
    .hero-actions .btn-primary,
    .hero-actions .btn-outline { justify-content: center; text-align: center; }

    /* Cards */
    .service-card { padding: 22px 18px; }
    .testi-card { padding: 22px 18px; }
    .post-card .post-body { padding: 18px 16px; }

    /* Footer */
    .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

    /* Before/after images */
    .ba-images { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   WORDPRESS CORE CLASSES
   ============================================================ */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; }
.aligncenter { display: block; margin: 0 auto; }
.alignright { float: left; margin-right: 0; margin-left: 20px; }
.alignleft  { float: right; margin-left: 0; margin-right: 20px; }
.sticky { /* pinned posts */ }
.screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    position: absolute;
    white-space: nowrap;
    height: 1px; width: 1px;
    overflow: hidden;
}