:root {
    --primary-color: #38bdf8;
    --primary-soft: #e0f7ff;
    --medical-blue: #00a0c4;
    --accent-pink: #ec4899;
    --dark-pink: #0f6f86;
    --text-main: #102033;
    --text-soft: #64748b;
    --silk-bg: #ffffff;
    --page-bg: #f4fbff;
    --card-bg: rgba(255,255,255,0.92);
    --border-soft: rgba(56,189,248,0.28);
    --success-green: #22c55e;
    --error-red: #ef4444;
    --shadow-soft: 0 22px 55px rgba(15,111,134,0.12);
    --radius-lg: 24px;
    --transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-mode="dark"] {
    --silk-bg: #111827;
    --page-bg: #07131d;
    --card-bg: rgba(17,24,39,0.92);
    --text-main: #f8fafc;
    --text-soft: #cbd5e1;
    --dark-pink: #9be8ff;
    --primary-soft: rgba(56,189,248,0.12);
    --border-soft: rgba(56,189,248,0.36);
    --shadow-soft: 0 24px 60px rgba(0,0,0,0.4);
}

[data-theme="pink"] { --primary-color:#ec4899; --medical-blue:#ec4899; --dark-pink:#f9a8d4; --primary-soft:rgba(236,72,153,0.12); --border-soft:rgba(236,72,153,0.32); }
[data-theme="purple"] { --primary-color:#8b5cf6; --medical-blue:#8b5cf6; --dark-pink:#c4b5fd; --primary-soft:rgba(139,92,246,0.12); --border-soft:rgba(139,92,246,0.32); }
[data-theme="mint"] { --primary-color:#10b981; --medical-blue:#10b981; --dark-pink:#86efac; --primary-soft:rgba(16,185,129,0.12); --border-soft:rgba(16,185,129,0.32); }
[data-theme="rose"] { --primary-color:#fb7185; --medical-blue:#fb7185; --dark-pink:#fecdd3; --primary-soft:rgba(251,113,133,0.12); --border-soft:rgba(251,113,133,0.32); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    color: var(--text-main);
    background: var(--page-bg);
    transition: var(--transition);
    overflow-x: hidden;
}
button, input, select, textarea { font-family: 'Cairo', sans-serif; }

#splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background:
        linear-gradient(135deg, rgba(248,187,208,0.62), rgba(255,255,255,0.22)),
        url("../assets/images/splash.png") center / cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 1s ease, transform 1s ease;
    cursor: pointer;
}
#splash.hide { opacity: 0; transform: scale(0.98); pointer-events: none; }
.splash-content { text-align: center; padding: 34px; animation: splashRise 1.4s ease both; }
.splash-title {
    color: white;
    font-weight: 900;
    font-size: clamp(2.2rem, 7vw, 5rem);
    line-height: 1.15;
    text-shadow: 0 10px 35px rgba(190,24,93,0.55);
}
.splash-sub {
    margin-top: 12px;
    color: #fff;
    font-size: clamp(1.1rem, 3.2vw, 2rem);
    font-weight: 800;
    text-shadow: 0 8px 28px rgba(190,24,93,0.45);
}
.splash-line {
    width: 180px;
    height: 3px;
    margin: 24px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, white, transparent);
    box-shadow: 0 0 24px rgba(255,255,255,0.7);
    animation: lineGlow 1.6s infinite alternate;
}
.click-to-start {
    margin-top: 30px;
    color: white;
    font-weight: 700;
    background: rgba(0,0,0,0.3);
    padding: 8px 20px;
    border-radius: 999px;
    animation: pulse 1.5s infinite;
}
@keyframes splashRise {
    from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(6px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes lineGlow {
    from { opacity: 0.45; transform: scaleX(0.65); }
    to { opacity: 1; transform: scaleX(1); }
}
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.topbar {
    position: sticky;
    top: 12px;
    z-index: 1000;
    width: min(1120px, calc(100% - 24px));
    margin: 12px auto 0;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(15,23,42,0.86);
    backdrop-filter: blur(18px);
    box-shadow: 0 14px 40px rgba(15,111,134,0.12);
}
[data-mode="light"] .topbar {
    background: rgba(255,255,255,0.88);
    border-color: rgba(255,255,255,0.55);
}

@keyframes shineText {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.brand strong {
    display: block;
    font-size: clamp(1rem, 2.3vw, 1.55rem);
    font-weight: 900;
    background: linear-gradient(120deg, var(--dark-pink) 30%, var(--primary-color) 50%, var(--dark-pink) 70%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineText 3s linear infinite;
}
.brand span {
    display: block;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: -2px;
}
.nav { display: flex; align-items: center; gap: 15px; }
.nav a {
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 900;
    white-space: nowrap;
}
.nav a:hover { color: var(--primary-color); }
.smart-nav-hint { color: var(--accent-pink) !important; }
.admin-nav-link { display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border-radius:999px; color:#fff !important; background:linear-gradient(135deg,#b31372,#ff4fa3); box-shadow:0 7px 16px rgba(179,19,114,.24); }
.admin-nav-link:hover { transform:translateY(-1px); color:#fff !important; filter:brightness(1.07); }
.mobile-admin-link { margin-top:7px; display:flex !important; align-items:center; justify-content:center; gap:8px; color:#fff !important; background:linear-gradient(135deg,#b31372,#ff4fa3); border-radius:12px; }

/* Control Group (Left side items) */
.control-group { display: flex; align-items: center; gap: 6px; position: relative; }
.icon-btn, .text-btn {
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,0.08);
    color: #e0f7ff;
    border-radius: 999px;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    cursor: pointer;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 8px 22px rgba(15,111,134,0.08);
    font-size: 0.85rem;
}
[data-mode="light"] .icon-btn,
[data-mode="light"] .text-btn {
    background: rgba(255,255,255,0.72);
    color: var(--dark-pink);
}

/* Theme Options Dropdown */
.theme-menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    padding: 16px;
    width: 220px;
    z-index: 1001;
    backdrop-filter: blur(14px);
}
.theme-menu.open { display: block; animation: fadeUp 0.3s ease; }
.theme-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border-soft);
    margin-bottom: 14px;
    font-weight: 800;
    color: var(--text-main);
    transition: var(--transition);
}
.theme-mode-toggle:hover { color: var(--primary-color); }
.theme-colors { display: flex; justify-content: space-around; }
.color-dot {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    border: 2px solid rgba(255,255,255,0.2); transition: var(--transition);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.color-dot:hover { transform: scale(1.15); border-color: var(--text-main); }

.mobile-menu-btn { display: none; }
.mobile-menu {
    display: none;
    position: absolute;
    top: 62px;
    left: 14px;
    right: 14px;
    background: var(--silk-bg);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
    padding: 10px;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
    display: block;
    padding: 12px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 800;
    border-radius: 14px;
}

.hero {
    width: 100%;
    min-height: 760px;
    margin: 0;
    border-radius: 0 0 42px 42px;
    position: relative;
    overflow: hidden;
    display: grid;
    align-items: center;
    padding: 120px max(28px, calc((100vw - 1120px) / 2)) 70px;
    background:
        linear-gradient(90deg, rgba(7,19,29,0.68), rgba(7,19,29,0.30)),
        url("../assets/images/banner.png") center top / cover no-repeat;
    box-shadow: 0 24px 70px rgba(15,111,134,0.16);
}
[data-mode="light"] .hero {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.54), rgba(255,255,255,0.18)),
        url("../assets/images/banner.png") center top / cover no-repeat;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 68% 40%, rgba(56,189,248,0.18), transparent 34%),
        linear-gradient(to bottom, transparent 70%, var(--page-bg) 100%);
    pointer-events: none;
}
.hero-content {
    max-width: 620px;
    position: relative;
    z-index: 2;
    animation: fadeUp 0.9s ease both;
}
.hero h1 {
    margin: 18px 0 14px;
    color: var(--dark-pink);
    font-size: clamp(1.7rem, 3.4vw, 3.1rem);
    line-height: 1.22;
    font-weight: 900;
    max-width: 580px;
}
.hero p {
    max-width: 560px;
    color: #f8fafc;
    font-size: clamp(0.86rem, 1.35vw, 1rem);
    line-height: 1.9;
    font-weight: 800;
}
[data-mode="light"] .hero p { color: #102033; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-note {
    margin-top: 18px;
    color: var(--dark-pink);
    font-weight: 900;
    font-size: clamp(1rem, 2.2vw, 1.45rem);
    line-height: 1.7;
    max-width: 620px;
}
.btn {
    border: none;
    cursor: pointer;
    border-radius: 999px;
    padding: 14px 24px;
    min-height: 52px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: var(--transition);
}
.btn-primary {
    color: white;
    background: linear-gradient(135deg, var(--primary-color), var(--dark-pink));
    box-shadow: 0 16px 32px rgba(56,189,248,0.28);
    animation: ctaPulse 2.4s infinite;
}
.btn-ghost {
    color: #e0f7ff;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid var(--border-soft);
}
[data-mode="light"] .btn-ghost {
    color: var(--dark-pink);
    background: rgba(255,255,255,0.76);
}
.btn:hover { transform: translateY(-3px); }
@keyframes ctaPulse {
    0%,100% { box-shadow: 0 12px 28px rgba(56,189,248,0.22); }
    50% { box-shadow: 0 20px 42px rgba(56,189,248,0.38); }
}

.section { width: min(1120px, calc(100% - 24px)); margin: 36px auto; }
.clock-section { display: flex; justify-content: center; }
.clock-card-wide {
    width: min(560px, 100%);
    padding: 20px;
    border-radius: 28px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    text-align: center;
    backdrop-filter: blur(14px);
}
.clock-ring {
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-size: 1.55rem;
    background: conic-gradient(from 90deg, var(--primary-color), var(--accent-pink), var(--primary-color));
    box-shadow: 0 0 26px rgba(56,189,248,0.42);
    animation: clockGlow 2s infinite alternate;
}
@keyframes clockGlow {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.05); filter: brightness(1.15); }
}
#clockNow { color: var(--dark-pink); font-size: 1.65rem; font-weight: 900; line-height: 1.1; }
#todayText { color: var(--text-soft); font-size: 0.9rem; font-weight: 800; margin-top: 5px; }

.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card, .info-card, .service-card, .review-card, .booking-panel, .contact-card, .assistant-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}
.stat-card {
    min-height: 126px;
    padding: 18px;
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
}
.stat-number { color: var(--dark-pink); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; line-height: 1; }
.stat-label { margin-top: 8px; color: var(--text-soft); font-weight: 800; font-size: 0.92rem; }

.about-wrap { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 28px; align-items: center; }
.doctor-photo {
    position: relative;
    min-height: 420px;
    border-radius: 34px;
    overflow: hidden;
    background: #dff7ff;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-soft);
}
.doctor-photo img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;
    animation: floatDoctor 7s ease-in-out infinite;
}
.doctor-photo::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 3px solid var(--accent-pink);
    border-radius: 28px;
    opacity: 0.75;
    pointer-events: none;
}
@keyframes floatDoctor {
    0%,100% { transform: scale(1.03) translate(0,0); }
    33% { transform: scale(1.06) translate(-8px,4px); }
    66% { transform: scale(1.04) translate(7px,-5px); }
}
.info-card { padding: clamp(24px, 4vw, 44px); }
.section-title {
    margin: 0 0 12px;
    color: var(--dark-pink);
    font-size: clamp(1.9rem, 4vw, 3.6rem);
    line-height: 1.15;
    font-weight: 900;
}
.about-title span { display: block; }
.section-lead { color: var(--text-main); font-size: 1.02rem; line-height: 2; font-weight: 700; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card {
    padding: 26px 20px;
    min-height: 210px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-pink), var(--primary-color));
}
.service-card:hover { transform: translateY(-8px); }
.service-card i { color: var(--primary-color); font-size: 2rem; margin-bottom: 18px; }
.service-card h3 { margin: 0 0 8px; color: var(--text-main); font-size: 1.18rem; font-weight: 900; }
.service-card p { margin: 0; color: var(--text-soft); line-height: 1.8; font-weight: 700; font-size: 0.9rem; }

.booking-section {
    scroll-margin-top: 120px;
    border-radius: 40px;
    padding: clamp(20px, 4vw, 42px);
    background: linear-gradient(135deg, rgba(224,247,255,0.14), rgba(255,255,255,0.06));
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
}
[data-mode="light"] .booking-section {
    background: linear-gradient(135deg, rgba(224,247,255,0.88), rgba(255,255,255,0.62));
}
.booking-panel { padding: clamp(20px, 4vw, 34px); }
.booking-head { text-align: center; margin-bottom: 30px; }

/* تصميم مميز لعنوان الحجز */
.booking-head h2 { 
    margin: 0 auto 12px; 
    color: var(--primary-color); 
    font-size: clamp(2.2rem, 5vw, 3.8rem); 
    font-weight: 900; 
    text-shadow: 0 4px 20px rgba(56,189,248,0.3);
    display: inline-block;
    padding: 10px 30px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-soft);
}
[data-mode="light"] .booking-head h2 { background: rgba(255,255,255,0.6); }
.booking-head p { margin: 0; color: var(--text-soft); font-weight: 800; font-size: 1.1rem;}

/* العدادات المتحركة الجديدة كبديل للأرقام الصفرية */
.booking-meta { 
    display: flex; 
    justify-content: space-around; 
    flex-wrap: wrap; 
    gap: 15px; 
    margin: 30px 0 40px; 
}
.meta-stat { 
    text-align: center; 
    animation: floatStat 3.5s ease-in-out infinite; 
    padding: 15px;
}
.meta-stat:nth-child(2) { animation-delay: 0.5s; }
.meta-stat:nth-child(3) { animation-delay: 1s; }
.meta-stat i { 
    display: block; 
    color: var(--primary-color); 
    font-size: 2.8rem; 
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 15px rgba(56,189,248,0.4));
}
.meta-stat span { 
    color: var(--text-main); 
    font-size: 1.05rem; 
    font-weight: 900; 
    display: block; 
}
@keyframes floatStat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* تقسيم الكروت والبطاقات القلابة */
.group-title {
    width: 100%;
    text-align: right;
    margin: 30px 0 15px;
    color: var(--dark-pink);
    font-weight: 900;
    font-size: 1.3rem;
    border-bottom: 2px dashed var(--border-soft);
    padding-bottom: 8px;
}
.en-mode .group-title { text-align: left; }

.visit-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
    gap: 16px; 
    perspective: 1000px; 
}
.flip-card { 
    background: transparent; 
    height: 140px; 
    cursor: pointer; 
    perspective: 1000px; 
}
.flip-card-inner { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
    transform-style: preserve-3d; 
}
.flip-card:hover .flip-card-inner, .flip-card-inner.force-flip { 
    transform: rotateY(180deg); 
}
.flip-card-front, .flip-card-back { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    border-radius: 22px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 12px; 
    border: 1.5px solid var(--border-soft); 
    box-shadow: 0 10px 30px rgba(15,111,134,0.08); 
}
.flip-card-front { 
    background: rgba(255,255,255,0.05); 
    color: var(--text-main); 
    backdrop-filter: blur(8px); 
}
[data-mode="light"] .flip-card-front { 
    background: rgba(255,255,255,0.8); 
}
.flip-card-front i { 
    font-size: 2.2rem; 
    margin-bottom: 12px; 
    color: transparent; 
    background: linear-gradient(135deg, var(--primary-color), var(--dark-pink)); 
    -webkit-background-clip: text; 
}
.flip-card-front span { 
    font-weight: 900; 
    font-size: 0.95rem; 
}
.flip-card-back { 
    background: linear-gradient(135deg, var(--primary-color), var(--dark-pink)); 
    color: white; 
    transform: rotateY(180deg); 
    border: none; 
    box-shadow: 0 15px 35px rgba(56,189,248,0.3); 
}
.flip-card-back p { 
    margin: 0; 
    font-size: 0.85rem; 
    font-weight: 800; 
    line-height: 1.6; 
}

/* تأثير موجات التجميل النسائي */
@keyframes cardWave {
    0% { box-shadow: 0 0 0 0 rgba(236,72,153, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(236,72,153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(236,72,153, 0); }
}

/* تصميم خاص للتجميل */
.flip-card.special .flip-card-front { border-color: rgba(236,72,153,0.45); animation: cardWave 2s infinite; }
.flip-card.special .flip-card-front i { 
    background: linear-gradient(135deg, #ec4899, #8b5cf6); 
    -webkit-background-clip: text; 
}
.flip-card.special .flip-card-back { 
    background: linear-gradient(135deg, #ec4899, #8b5cf6); 
    box-shadow: 0 15px 35px rgba(236,72,153,0.3); 
}

/* تصميم خاص للعائلة */
.flip-card.family-card .flip-card-front {
    background: linear-gradient(135deg, #ec4899, #be185d);
    border: none;
    color: white;
}
.flip-card.family-card .flip-card-front i { 
    color: white; 
    background: none; 
    -webkit-text-fill-color: white;
}
.flip-card.family-card .flip-card-back { 
    background: #111827; 
    border: 2px solid #ec4899;
}
[data-mode="light"] .flip-card.family-card .flip-card-back { background: #fff; color: #be185d; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; }
.form-field { text-align: right; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
    display: block;
    margin: 0 4px 7px;
    color: var(--text-main);
    font-weight: 900;
    font-size: 0.88rem;
}
input, select, textarea {
    width: 100%;
    border: 1.5px solid rgba(148,163,184,0.35);
    border-radius: 18px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.09);
    color: white;
    font-size: 0.94rem;
    transition: var(--transition);
}
[data-mode="light"] input,
[data-mode="light"] select,
[data-mode="light"] textarea {
    background: rgba(255,255,255,0.92);
    color: var(--text-main);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(56,189,248,0.14);
}
.error-hint { display: none; color: var(--error-red); font-size: 0.78rem; font-weight: 800; margin: 6px 6px 0; }
.upload-box {
    display: none;
    margin-top: 10px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(236,72,153,0.08);
    border: 1px dashed rgba(236,72,153,0.35);
}
.checkbox-line {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-main);
    font-weight: 800;
    margin-top: 12px;
}
.checkbox-line input { width: 18px; height: 18px; }
.submit-area { margin-top: 18px; }
.smart-submit {
    width: 100%;
    border: none;
    min-height: 58px;
    border-radius: 999px;
    color: white;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary-color), var(--dark-pink));
    box-shadow: 0 18px 38px rgba(56,189,248,0.28);
    animation: pressHere 1.8s infinite;
}
.pregnancy-submit {
    background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
    box-shadow: 0 18px 38px rgba(236,72,153,0.28);
}
@keyframes pressHere {
    0%,100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.015); filter: brightness(1.08); }
}
.inline-back-btn {
    width: 100%;
    margin-top: 12px;
    padding: 13px;
    border-radius: 18px;
    border: 1.5px solid var(--border-soft);
    background: rgba(255,255,255,0.08);
    color: var(--dark-pink);
    font-weight: 900;
    cursor: pointer;
}
[data-mode="light"] .inline-back-btn { background: rgba(255,255,255,0.75); }
.form-signature {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--border-soft);
    color: var(--dark-pink);
    font-size: 0.74rem;
    font-weight: 900;
    text-align: center;
    opacity: 0.86;
}
.feedback-box { margin-top: 10px; font-weight: 900; font-size: 0.86rem; text-align: center; }

.processing-card, .result-card {
    text-align: center;
    padding: 28px;
    border-radius: 28px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: 0 0 0 3px rgba(56,189,248,0.08), var(--shadow-soft);
}
.processing-card { border-width: 2px; animation: processingGlow 1.4s infinite alternate; }
@keyframes processingGlow {
    from { box-shadow: 0 0 0 3px rgba(56,189,248,0.08), var(--shadow-soft); }
    to { box-shadow: 0 0 0 6px rgba(56,189,248,0.16), 0 24px 70px rgba(56,189,248,0.2); }
}
.result-card { animation: successPop 0.55s ease both; }
@keyframes successPop {
    from { transform: scale(0.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.result-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 12px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(135deg, var(--success-green), var(--primary-color));
    font-size: 1.9rem;
    box-shadow: 0 14px 34px rgba(34,197,94,0.25);
}

/* شكل حاسبة الحمل المعدل والمختصر */
.pregnancy-result-card {
    margin-top: 18px;
    padding: 24px 16px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,0.85), transparent 30%),
        linear-gradient(135deg, #fff1f2, #fdf2f8, #eef2ff);
    border: 2px solid rgba(236,72,153,0.28);
    color: #831843;
    box-shadow: 0 20px 50px rgba(236,72,153,0.18);
    text-align: center;
    animation: pregnancyGlow 1.5s infinite alternate;
}
@keyframes pregnancyGlow {
    from { transform: scale(1); box-shadow: 0 10px 30px rgba(236,72,153,0.3); filter: brightness(1); }
    to { transform: scale(1.02); box-shadow: 0 25px 50px rgba(236,72,153,0.5); filter: brightness(1.05); }
}
.pregnancy-result-card .baby-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    font-size: 1.6rem;
}
.pregnancy-result-card h3 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 900; color: #be185d; }

.neon-text {
    color: #ec4899;
    text-shadow: 0 0 10px rgba(236,72,153,0.6), 0 0 20px rgba(236,72,153,0.4), 0 0 30px rgba(236,72,153,0.2);
    font-size: 2.2rem;
    font-weight: 900;
    margin: 10px 0;
    line-height: 1.2;
}

.pregnancy-prayer {
    margin-top: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,0.75);
    color: #7e22ce;
    font-weight: 900;
    line-height: 1.8;
    font-size: 1.05rem;
}

.details-box {
    margin: 16px 0;
    padding: 14px;
    border-radius: 20px;
    background: var(--primary-soft);
    border: 1px dashed var(--primary-color);
    text-align: right;
}
.detail-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(148,163,184,0.18);
}
.detail-item:last-child { border-bottom: none; }
.detail-label { color: var(--text-soft); font-weight: 800; }
.detail-value { color: var(--dark-pink); font-weight: 900; text-align: left; }
.highlight-value {
    color: #dc2626;
    background: rgba(220,38,38,0.08);
    padding: 2px 8px;
    border-radius: 999px;
}
.notice-board {
    margin: 14px 0;
    padding: 14px;
    border-radius: 18px;
    color: #7f1d1d;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    font-weight: 900;
    line-height: 1.8;
}
.premium-wa-link {
    width: 100%;
    min-height: 54px;
    border-radius: 999px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: white;
    background: #25d366;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(37,211,102,0.28);
    animation: waFlash 1.4s infinite;
}
@keyframes waFlash {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

.assistant-card {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 24px;
    align-items: center;
    padding: clamp(24px, 4vw, 42px);
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(135deg, rgba(15,111,134,0.94), rgba(56,189,248,0.68)),
        url("https://i.ibb.co/r2gY7y29/smart-assistant.png") center / cover no-repeat;
    color: white;
}
.assistant-card > * { position: relative; z-index: 2; }
.assistant-icon {
    width: 96px;
    height: 96px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    font-size: 3rem;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.34);
    box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}
.assistant-card h2 { margin: 0 0 10px; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; }
.assistant-card p { margin: 0 0 18px; line-height: 2; font-weight: 800; color: rgba(255,255,255,0.92); }
.assistant-card .btn { background: white; color: var(--dark-pink); }

.reviews-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 10px 2px 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.review-card {
    min-width: 340px;
    max-width: 380px;
    padding: 22px;
    position: relative;
    scroll-snap-align: start;
}
.review-card::before {
    content: "“";
    position: absolute;
    top: 10px;
    left: 18px;
    font-size: 4rem;
    color: rgba(56,189,248,0.22);
    font-weight: 900;
}
.review-card p { color: var(--text-main); line-height: 1.9; font-weight: 800; margin: 18px 0 16px; }
.review-person { display: flex; align-items: center; gap: 10px; }
.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--dark-pink);
    font-weight: 900;
}
.review-person strong { display: block; color: var(--dark-pink); }
.review-person span { display: block; color: var(--text-soft); font-size: 0.78rem; font-weight: 800; }

.neon-divider {
    width: min(1120px, calc(100% - 24px));
    height: 5px;
    margin: 18px auto 36px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--primary-color), var(--accent-pink), var(--primary-color), transparent);
    box-shadow: 0 0 18px var(--primary-color), 0 0 42px rgba(236,72,153,0.34);
}
.contact-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; }
.contact-card { padding: 24px; text-align: center;}
.contact-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 14px 0;
    color: var(--text-main);
    font-weight: 800;
    line-height: 1.8;
    text-align: right;
}
.en-mode .contact-line { text-align: left; }
.contact-line i { color: var(--primary-color); margin-top: 6px; }

/* أيقونات السوشيال ميديا */
.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 25px 0;
}
.social-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.social-icon.fb { background: #1877f2; }
.social-icon.ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-icon.tt { background: #000000; color: #fff; text-shadow: 2px 2px 0px #ff0050, -2px -2px 0px #00f2fe; }
.social-icon:hover { transform: translateY(-5px); }

.map-frame { width: 100%; min-height: 330px; border: 0; border-radius: 24px; box-shadow: var(--shadow-soft); }
.footer { margin-top: 36px; padding: 28px 14px 40px; text-align: center; color: var(--text-soft); font-weight: 800; }
.whatsapp-float {
    position: fixed;
    left: 22px;
    bottom: 22px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    background: #25d366;
    font-size: 1.9rem;
    z-index: 900;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(37,211,102,0.4);
    animation: floatWa 2s infinite;
}
@keyframes floatWa {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.05); }
}

.friday-modal, .soft-alert-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(2,6,23,0.68);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 18px;
}
.fri-card, .soft-alert-card {
    width: min(380px, 100%);
    background: var(--silk-bg);
    border: 1px solid var(--border-soft);
    border-radius: 28px;
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    animation: modalPop 0.35s ease both;
}
@keyframes modalPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.fri-card i, .soft-alert-card i { color: var(--medical-blue); font-size: 3.4rem; margin-bottom: 12px; }
.soft-alert-card i { color: var(--error-red); }
.fri-card h3, .soft-alert-card h3 { margin: 0 0 8px; color: var(--dark-pink); font-weight: 900; }
.fri-card p, .soft-alert-card p { color: var(--text-soft); font-weight: 800; line-height: 1.8; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.en-mode { direction: ltr; }
.en-mode .form-field, .en-mode .details-box, .en-mode .group-title { text-align: left; }

@media (max-width: 900px) {
    .topbar { border-radius: 26px; top: 8px; }
    .nav { display: none; }
    .mobile-menu-btn { display: inline-flex; }
    .hero { min-height: 620px; padding: 92px 22px 42px; border-radius: 0 0 32px 32px; }
    .stats-bar, .about-wrap, .contact-wrap, .assistant-card { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .booking-meta { flex-direction: column; gap: 20px; }
    .visit-grid { grid-template-columns: repeat(2, 1fr); }
    .doctor-photo, .doctor-photo img { min-height: 360px; }
}
@media (max-width: 520px) {
    .topbar { width: calc(100% - 10px); padding: 8px 12px; gap: 5px; flex-wrap: nowrap; border-radius: 20px;}
    .brand strong { font-size: 0.95rem; }
    .brand span { display: block; font-size: 0.6rem; margin-top: -3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .icon-btn, .text-btn { min-width: 32px; height: 32px; padding: 0 6px; font-size: 0.8rem; }
    .control-group { gap: 4px; }
    
    .hero { min-height: 590px; padding: 86px 18px 34px; }
    .hero-actions .btn { width: 100%; }
    .section { width: calc(100% - 14px); margin: 24px auto; }
    .booking-head h2 { font-size: 1.8rem; padding: 8px 15px;}
    .visit-grid { grid-template-columns: repeat(2, 1fr); gap: 10px;}
    .review-card { min-width: 86%; }
}

/* Premium clinic restyle: soft rose-gold, ivory, and calm medical mint. */
:root {
    --primary-color: #b76e79;
    --primary-soft: rgba(183,110,121,0.13);
    --medical-blue: #3aa8a0;
    --accent-pink: #d96c9f;
    --dark-pink: #6f2f4f;
    --text-main: #2f2730;
    --text-soft: #7c6f79;
    --silk-bg: #fffaf5;
    --page-bg: #fff7f0;
    --card-bg: rgba(255,252,248,0.9);
    --border-soft: rgba(183,110,121,0.22);
    --shadow-soft: 0 24px 65px rgba(111,47,79,0.12);
}

[data-mode="dark"] {
    --silk-bg: #1e1720;
    --page-bg: #130f15;
    --card-bg: rgba(31,23,32,0.88);
    --text-main: #fff7f2;
    --text-soft: #decbd3;
    --dark-pink: #ffd2df;
    --primary-soft: rgba(217,108,159,0.13);
    --border-soft: rgba(255,210,223,0.18);
    --shadow-soft: 0 26px 70px rgba(0,0,0,0.44);
}

body {
    background:
        radial-gradient(circle at 10% 4%, rgba(217,108,159,0.16), transparent 30%),
        radial-gradient(circle at 92% 18%, rgba(58,168,160,0.13), transparent 28%),
        linear-gradient(180deg, #fffaf5 0%, var(--page-bg) 42%, #fff3ed 100%);
}

[data-mode="dark"] body {
    background:
        radial-gradient(circle at 10% 4%, rgba(217,108,159,0.16), transparent 30%),
        radial-gradient(circle at 92% 18%, rgba(58,168,160,0.12), transparent 28%),
        linear-gradient(180deg, #171119 0%, var(--page-bg) 58%, #1b121b 100%);
}

#splash {
    background:
        linear-gradient(135deg, rgba(111,47,79,0.58), rgba(255,246,241,0.2)),
        radial-gradient(circle at 50% 36%, rgba(255,255,255,0.18), transparent 34%),
        url("../assets/images/splash.png") center / cover no-repeat;
}

.splash-title,
.splash-sub {
    text-shadow: 0 14px 40px rgba(79,29,53,0.58);
}

.topbar {
    border: 1px solid rgba(255,236,225,0.28);
    background: rgba(50,35,48,0.72);
    box-shadow: 0 18px 48px rgba(111,47,79,0.16);
}

[data-mode="light"] .topbar {
    background: rgba(255,250,245,0.82);
    border-color: rgba(183,110,121,0.22);
}

.brand strong {
    background: linear-gradient(120deg, #ffd7c9 12%, #d96c9f 46%, #8f516d 78%);
    background-size: 220% auto;
    -webkit-background-clip: text;
}

[data-mode="light"] .brand strong {
    background: linear-gradient(120deg, #6f2f4f 12%, #b76e79 46%, #3aa8a0 78%);
    background-size: 220% auto;
    -webkit-background-clip: text;
}

.nav a { color: rgba(255,247,242,0.9); }
[data-mode="light"] .nav a { color: #4b3a45; }
.nav a:hover,
.smart-nav-hint { color: #ffd2df !important; }
[data-mode="light"] .nav a:hover,
[data-mode="light"] .smart-nav-hint { color: var(--accent-pink) !important; }

.hero {
    background:
        linear-gradient(90deg, rgba(54,34,48,0.68), rgba(111,47,79,0.32), rgba(255,247,242,0.08)),
        url("../assets/images/banner.png") center top / cover no-repeat;
    box-shadow: 0 30px 90px rgba(111,47,79,0.2);
}

[data-mode="light"] .hero {
    background:
        linear-gradient(90deg, rgba(255,248,243,0.66), rgba(255,241,246,0.36), rgba(111,47,79,0.08)),
        url("../assets/images/banner.png") center top / cover no-repeat;
}

.hero::after {
    background:
        radial-gradient(circle at 70% 35%, rgba(217,108,159,0.22), transparent 34%),
        radial-gradient(circle at 28% 76%, rgba(58,168,160,0.12), transparent 30%),
        linear-gradient(to bottom, transparent 68%, var(--page-bg) 100%);
}

.hero p,
[data-mode="light"] .hero p {
    color: #fff7f2;
    text-shadow: 0 10px 26px rgba(54,34,48,0.35);
}

[data-mode="light"] .hero p {
    color: #3d3039;
    text-shadow: 0 8px 22px rgba(255,255,255,0.5);
}

.hero-note,
.section-title,
#clockNow,
.stat-number,
.detail-value {
    color: var(--dark-pink);
}

.btn-primary,
.smart-submit,
.premium-wa-link,
.result-icon {
    background: linear-gradient(135deg, #b76e79, #d96c9f 52%, #6f2f4f);
    box-shadow: 0 18px 42px rgba(183,110,121,0.28);
}

.btn-ghost {
    background: rgba(255,250,245,0.13);
    border-color: rgba(255,210,223,0.34);
}

[data-mode="light"] .btn-ghost {
    color: #6f2f4f;
    background: rgba(255,250,245,0.78);
}

.clock-card-wide,
.stat-card,
.info-card,
.service-card,
.review-card,
.booking-panel,
.contact-card,
.assistant-card,
.fri-card,
.soft-alert-card {
    border-color: var(--border-soft);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,246,241,0.84)),
        var(--card-bg);
    box-shadow: var(--shadow-soft);
}

[data-mode="dark"] .clock-card-wide,
[data-mode="dark"] .stat-card,
[data-mode="dark"] .info-card,
[data-mode="dark"] .service-card,
[data-mode="dark"] .review-card,
[data-mode="dark"] .booking-panel,
[data-mode="dark"] .contact-card,
[data-mode="dark"] .fri-card,
[data-mode="dark"] .soft-alert-card {
    background:
        linear-gradient(145deg, rgba(45,33,46,0.9), rgba(31,23,32,0.88)),
        var(--card-bg);
}

.clock-ring {
    background: conic-gradient(from 90deg, #b76e79, #d96c9f, #3aa8a0, #b76e79);
    box-shadow: 0 0 30px rgba(217,108,159,0.35);
}

.doctor-photo {
    background: linear-gradient(145deg, #fff0e9, #f7dbe6);
    border-color: rgba(217,108,159,0.24);
}

.doctor-photo::after {
    border-color: rgba(183,110,121,0.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42);
}

.service-card::before,
.neon-divider {
    background: linear-gradient(90deg, transparent, #b76e79, #d96c9f, #3aa8a0, transparent);
}

.service-card i,
.contact-line i,
.fri-card i {
    color: var(--medical-blue);
}

.booking-section {
    background:
        radial-gradient(circle at 14% 20%, rgba(217,108,159,0.11), transparent 34%),
        linear-gradient(135deg, rgba(255,250,245,0.62), rgba(255,235,242,0.45));
    border-color: rgba(183,110,121,0.22);
}

[data-mode="light"] .booking-section {
    background:
        radial-gradient(circle at 14% 20%, rgba(217,108,159,0.13), transparent 34%),
        linear-gradient(135deg, rgba(255,250,245,0.9), rgba(255,235,242,0.66));
}

.booking-head h2 {
    color: var(--dark-pink);
    border-color: rgba(183,110,121,0.22);
    background: rgba(255,250,245,0.24);
    text-shadow: 0 6px 24px rgba(183,110,121,0.2);
}

.flip-card-front {
    background: rgba(255,250,245,0.14);
}

[data-mode="light"] .flip-card-front {
    background: rgba(255,250,245,0.84);
}

.flip-card-front i,
.flip-card-back,
.submit-btn {
    background: linear-gradient(135deg, #b76e79, #d96c9f, #6f2f4f);
}

.form-field input,
.form-field select,
.form-field textarea {
    border-color: rgba(183,110,121,0.24);
    background: rgba(255,250,245,0.72);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #d96c9f;
    box-shadow: 0 0 0 4px rgba(217,108,159,0.13);
}

.assistant-card {
    background:
        linear-gradient(135deg, rgba(111,47,79,0.94), rgba(183,110,121,0.78)),
        url("https://i.ibb.co/r2gY7y29/smart-assistant.png") center / cover no-repeat;
    border-color: rgba(255,210,223,0.2);
}

.review-person .avatar,
.details-box {
    background: var(--primary-soft);
}

.memory-flyer {
    background: linear-gradient(135deg, #6f2f4f, #d96c9f 48%, #b76e79);
    box-shadow: 0 18px 45px rgba(111,47,79,0.28);
}

/* Premium visual redesign v2: stronger visible transformation, same layout and logic. */
:root,
[data-theme="pink"],
[data-theme="purple"],
[data-theme="mint"],
[data-theme="rose"] {
    --primary-color: #9c5266;
    --primary-soft: rgba(156,82,102,0.12);
    --medical-blue: #2f9f98;
    --accent-pink: #c65f89;
    --dark-pink: #5a2942;
    --text-main: #2d2430;
    --text-soft: #756878;
    --silk-bg: #fffaf6;
    --page-bg: #fff2ec;
    --card-bg: rgba(255,251,247,0.92);
    --border-soft: rgba(156,82,102,0.2);
    --shadow-soft: 0 26px 70px rgba(90,41,66,0.14);
    --radius-lg: 30px;
}

[data-mode="dark"] {
    --primary-color: #d69aaa;
    --primary-soft: rgba(214,154,170,0.13);
    --medical-blue: #72d5cc;
    --accent-pink: #f0a9c4;
    --dark-pink: #ffe1e8;
    --text-main: #fff7f2;
    --text-soft: #e1ccd4;
    --silk-bg: #1c141c;
    --page-bg: #120d13;
    --card-bg: rgba(34,24,34,0.9);
    --border-soft: rgba(240,169,196,0.2);
    --shadow-soft: 0 28px 80px rgba(0,0,0,0.46);
}

body {
    background:
        radial-gradient(circle at 8% 10%, rgba(198,95,137,0.18), transparent 28%),
        radial-gradient(circle at 88% 5%, rgba(47,159,152,0.14), transparent 25%),
        radial-gradient(circle at 48% 58%, rgba(255,214,199,0.38), transparent 42%),
        linear-gradient(180deg, #fffaf6 0%, #fff2ec 46%, #fae8e4 100%);
}

[data-mode="dark"] body {
    background:
        radial-gradient(circle at 8% 10%, rgba(198,95,137,0.18), transparent 28%),
        radial-gradient(circle at 88% 5%, rgba(47,159,152,0.12), transparent 25%),
        linear-gradient(180deg, #171018 0%, #120d13 54%, #1b1119 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(156,82,102,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(156,82,102,0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 78%);
}

.topbar {
    width: min(1160px, calc(100% - 24px));
    padding: 12px 18px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(90,41,66,0.88), rgba(45,36,48,0.76));
    border: 1px solid rgba(255,225,232,0.22);
    box-shadow: 0 22px 55px rgba(90,41,66,0.22);
}

[data-mode="light"] .topbar {
    background: rgba(255,250,246,0.86);
    border-color: rgba(156,82,102,0.2);
}

.brand {
    padding-inline-start: 4px;
}

.brand strong {
    letter-spacing: .2px;
    background: linear-gradient(120deg, #ffe4dc, #f0a9c4 44%, #d7f5ef);
    -webkit-background-clip: text;
}

[data-mode="light"] .brand strong {
    background: linear-gradient(120deg, #5a2942, #9c5266 46%, #2f9f98);
    -webkit-background-clip: text;
}

.nav {
    gap: 9px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
}

[data-mode="light"] .nav {
    background: rgba(156,82,102,0.06);
}

.nav a {
    padding: 8px 12px;
    border-radius: 999px;
    transition: var(--transition);
}

.nav a:hover {
    background: rgba(255,225,232,0.14);
    transform: translateY(-1px);
}

[data-mode="light"] .nav a:hover {
    background: rgba(156,82,102,0.1);
}

.icon-btn,
.text-btn {
    border-color: rgba(255,225,232,0.24);
    background: rgba(255,255,255,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.hero {
    min-height: 720px;
    border-radius: 0 0 56px 56px;
    background:
        linear-gradient(90deg, rgba(45,36,48,0.76) 0%, rgba(90,41,66,0.54) 45%, rgba(255,242,236,0.05) 100%),
        url("../assets/images/banner.png") center top / cover no-repeat;
}

[data-mode="light"] .hero {
    background:
        linear-gradient(90deg, rgba(255,250,246,0.72) 0%, rgba(255,226,237,0.42) 48%, rgba(90,41,66,0.1) 100%),
        url("../assets/images/banner.png") center top / cover no-repeat;
}

.hero-content {
    padding: clamp(24px, 4vw, 42px);
    border-radius: 34px;
    background: rgba(45,36,48,0.34);
    border: 1px solid rgba(255,225,232,0.2);
    box-shadow: 0 28px 70px rgba(45,36,48,0.26);
    backdrop-filter: blur(12px);
}

[data-mode="light"] .hero-content {
    background: rgba(255,250,246,0.62);
    border-color: rgba(156,82,102,0.16);
}

.hero-note {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 18px;
    background: rgba(255,225,232,0.14);
    border: 1px solid rgba(255,225,232,0.2);
}

[data-mode="light"] .hero-note {
    background: rgba(156,82,102,0.09);
    border-color: rgba(156,82,102,0.16);
}

.btn {
    min-height: 54px;
    padding-inline: 26px;
    letter-spacing: .1px;
}

.btn-primary,
.smart-submit,
.premium-wa-link,
.submit-btn,
.pregnancy-submit {
    background: linear-gradient(135deg, #5a2942 0%, #9c5266 42%, #c65f89 74%, #2f9f98 130%) !important;
    box-shadow: 0 20px 46px rgba(156,82,102,0.32) !important;
}

.btn-ghost {
    background: rgba(255,250,246,0.16);
    border: 1px solid rgba(255,225,232,0.28);
}

.section {
    margin: 46px auto;
}

.clock-card-wide,
.stat-card,
.info-card,
.service-card,
.review-card,
.booking-panel,
.contact-card,
.fri-card,
.soft-alert-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.86), rgba(255,245,241,0.76)),
        var(--card-bg);
    border: 1px solid rgba(156,82,102,0.18);
    box-shadow:
        0 18px 55px rgba(90,41,66,0.1),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

.clock-card-wide::before,
.stat-card::before,
.info-card::before,
.service-card::after,
.review-card::after,
.booking-panel::before,
.contact-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 10%, rgba(198,95,137,0.16), transparent 28%),
        radial-gradient(circle at 90% 90%, rgba(47,159,152,0.1), transparent 30%);
}

[data-mode="dark"] .clock-card-wide,
[data-mode="dark"] .stat-card,
[data-mode="dark"] .info-card,
[data-mode="dark"] .service-card,
[data-mode="dark"] .review-card,
[data-mode="dark"] .booking-panel,
[data-mode="dark"] .contact-card,
[data-mode="dark"] .fri-card,
[data-mode="dark"] .soft-alert-card {
    background:
        linear-gradient(145deg, rgba(40,29,40,0.92), rgba(28,20,28,0.9)),
        var(--card-bg);
    border-color: rgba(240,169,196,0.16);
}

.stats-bar {
    gap: 18px;
}

.stat-card {
    min-height: 144px;
}

.stat-card > div,
.info-card > *,
.service-card > *,
.booking-panel > *,
.contact-card > * {
    position: relative;
    z-index: 1;
}

.stat-number {
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    background: linear-gradient(135deg, #5a2942, #c65f89);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-mode="dark"] .stat-number {
    background: linear-gradient(135deg, #ffe1e8, #72d5cc);
    -webkit-background-clip: text;
}

.doctor-photo {
    border-radius: 42px;
    padding: 10px;
    background: linear-gradient(145deg, #fff6ef, #efd0d9);
}

.doctor-photo img {
    border-radius: 32px;
}

.doctor-photo::after {
    inset: 18px;
    border: 2px solid rgba(255,255,255,0.72);
}

.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    background: linear-gradient(135deg, #5a2942, #9c5266 55%, #2f9f98);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 74px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c65f89, #2f9f98);
}

.services-grid {
    gap: 22px;
}

.service-card {
    min-height: 238px;
    padding: 30px 22px;
    border-radius: 34px;
}

.service-card::before {
    height: 100%;
    width: 7px;
    left: auto;
    background: linear-gradient(180deg, #5a2942, #c65f89, #2f9f98);
}

.service-card:hover {
    transform: translateY(-10px) scale(1.015);
    box-shadow: 0 28px 70px rgba(90,41,66,0.18);
}

.service-card i,
.meta-stat i,
.contact-line i {
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    border-radius: 20px;
    display: inline-grid;
    place-items: center;
    color: #fff !important;
    background: linear-gradient(135deg, #5a2942, #c65f89 68%, #2f9f98);
    box-shadow: 0 14px 30px rgba(156,82,102,0.24);
}

.contact-line i {
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin-bottom: 0;
    font-size: 1rem;
}

.booking-section {
    border-radius: 46px;
    background:
        radial-gradient(circle at 20% 0%, rgba(198,95,137,0.18), transparent 32%),
        radial-gradient(circle at 82% 90%, rgba(47,159,152,0.14), transparent 34%),
        linear-gradient(135deg, rgba(255,250,246,0.78), rgba(255,226,237,0.58));
    border: 1px solid rgba(156,82,102,0.18);
}

.booking-panel {
    border-radius: 38px;
}

.booking-head h2 {
    border-radius: 28px;
    padding: 14px 34px;
    background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,226,237,0.52));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 14px 36px rgba(90,41,66,.1);
}

.group-title {
    padding: 14px 18px;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(156,82,102,0.12), rgba(47,159,152,0.08), transparent);
}

.flip-card {
    height: 154px;
}

.flip-card-front,
.flip-card-back {
    border-radius: 28px;
    box-shadow: 0 16px 38px rgba(90,41,66,0.12);
}

.flip-card-front {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.86), rgba(255,239,246,0.72));
    border-color: rgba(156,82,102,0.18);
}

[data-mode="dark"] .flip-card-front {
    background: linear-gradient(145deg, rgba(40,29,40,0.92), rgba(28,20,28,0.9));
}

.flip-card-front i {
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: white !important;
    -webkit-text-fill-color: white !important;
    background: linear-gradient(135deg, #5a2942, #c65f89, #2f9f98) !important;
    -webkit-background-clip: border-box !important;
    box-shadow: 0 12px 26px rgba(156,82,102,0.22);
}

.flip-card-back {
    background: linear-gradient(135deg, #5a2942, #9c5266 54%, #2f9f98) !important;
    box-shadow: 0 18px 44px rgba(90,41,66,0.22);
}

.flip-card.special .flip-card-front {
    border-color: rgba(198,95,137,0.34);
}

.flip-card.special .flip-card-front i,
.flip-card.family-card .flip-card-front i {
    background: linear-gradient(135deg, #c65f89, #9c5266, #5a2942) !important;
}

.flip-card.family-card .flip-card-front {
    background: linear-gradient(135deg, #5a2942, #c65f89) !important;
}

input,
select,
textarea {
    border-radius: 22px;
    border: 1.5px solid rgba(156,82,102,0.18);
    background: rgba(255,250,246,0.86);
    color: #2d2430;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

[data-mode="dark"] input,
[data-mode="dark"] select,
[data-mode="dark"] textarea {
    background: rgba(255,255,255,0.08);
    color: #fff7f2;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #c65f89;
    box-shadow: 0 0 0 4px rgba(198,95,137,0.14), inset 0 1px 0 rgba(255,255,255,.8);
}

.upload-box {
    background: rgba(198,95,137,0.08);
    border-color: rgba(198,95,137,0.28);
}

.processing-card,
.result-card,
.pregnancy-result-card {
    border-radius: 34px;
    background:
        radial-gradient(circle at 14% 10%, rgba(198,95,137,0.12), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,242,236,0.78));
    border-color: rgba(156,82,102,0.18);
}

.result-icon,
.pregnancy-result-card .baby-icon {
    border-radius: 24px;
    background: linear-gradient(135deg, #2f9f98, #9c5266, #c65f89) !important;
}

.assistant-card {
    border-radius: 40px;
    background:
        linear-gradient(135deg, rgba(45,36,48,0.94), rgba(90,41,66,0.78)),
        url("https://i.ibb.co/r2gY7y29/smart-assistant.png") center / cover no-repeat !important;
    box-shadow: 0 28px 80px rgba(90,41,66,0.24);
}

.assistant-icon {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.34);
}

.reviews-scroll {
    gap: 20px;
}

.review-card {
    min-width: 360px;
    border-radius: 34px;
}

.review-card::before {
    color: rgba(198,95,137,0.2);
}

.avatar {
    background: linear-gradient(135deg, rgba(198,95,137,0.18), rgba(47,159,152,0.13));
    color: #5a2942;
}

.contact-wrap {
    gap: 24px;
}

.contact-card {
    border-radius: 36px;
}

.map-frame {
    border-radius: 36px;
    filter: saturate(.9) contrast(.96);
}

.neon-divider {
    height: 3px;
    background: linear-gradient(90deg, transparent, #5a2942, #c65f89, #2f9f98, transparent);
    box-shadow: 0 0 24px rgba(198,95,137,0.28);
}

.whatsapp-float {
    background: linear-gradient(135deg, #25d366, #128c7e);
    box-shadow: 0 18px 42px rgba(18,140,126,0.36);
}

.memory-flyer {
    border-radius: 24px;
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,0.34), transparent 28%),
        linear-gradient(135deg, #5a2942, #c65f89 58%, #2f9f98);
}

@media (max-width: 900px) {
    .hero-content {
        padding: 22px;
        border-radius: 28px;
    }

    .topbar {
        border-radius: 22px;
    }
}

/* Bright feminine clinic theme: airy pink, fuchsia, sky blue, and gold. */
:root,
[data-theme="pink"],
[data-theme="purple"],
[data-theme="mint"],
[data-theme="rose"],
[data-mode="dark"] {
    --primary-color: #ff4fa3;
    --primary-soft: rgba(255,79,163,0.12);
    --medical-blue: #28b8f6;
    --accent-pink: #ff79c8;
    --dark-pink: #b31372;
    --text-main: #34263a;
    --text-soft: #7a6b86;
    --silk-bg: #ffffff;
    --page-bg: #fff7fd;
    --card-bg: rgba(255,255,255,0.92);
    --border-soft: rgba(255,79,163,0.18);
    --shadow-soft: 0 24px 70px rgba(255,79,163,0.14);
}

body,
[data-mode="dark"] body {
    color: var(--text-main);
    background:
        radial-gradient(circle at 12% 8%, rgba(255,121,200,0.22), transparent 30%),
        radial-gradient(circle at 84% 10%, rgba(40,184,246,0.2), transparent 28%),
        radial-gradient(circle at 58% 42%, rgba(255,215,128,0.18), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fff7fd 42%, #eefaff 100%);
}

body::before {
    background-image:
        radial-gradient(circle, rgba(255,79,163,0.12) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(40,184,246,0.1) 1px, transparent 1.5px);
    background-position: 0 0, 22px 22px;
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 72%);
}

.topbar,
[data-mode="light"] .topbar {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,79,163,0.18);
    box-shadow: 0 18px 50px rgba(40,184,246,0.13), 0 10px 34px rgba(255,79,163,0.12);
}

.brand strong,
[data-mode="light"] .brand strong {
    background: linear-gradient(120deg, #b31372, #ff4fa3 45%, #28b8f6 86%);
    background-size: 220% auto;
    -webkit-background-clip: text;
}

.brand span,
.nav a,
[data-mode="light"] .nav a,
.icon-btn,
.text-btn {
    color: #4b3a55;
}

.nav,
[data-mode="light"] .nav {
    background: linear-gradient(135deg, rgba(255,79,163,0.08), rgba(40,184,246,0.08));
}

.nav a:hover,
.smart-nav-hint,
[data-mode="light"] .smart-nav-hint {
    color: #ff2f98 !important;
    background: rgba(255,79,163,0.12);
}

.icon-btn,
.text-btn {
    background: rgba(255,255,255,0.86);
    border-color: rgba(255,79,163,0.2);
}

.hero,
[data-mode="light"] .hero {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,121,200,0.18), rgba(40,184,246,0.08)),
        url("../assets/images/banner.png") center top / cover no-repeat;
    box-shadow: 0 26px 80px rgba(255,79,163,0.16);
}

.hero::after {
    background:
        radial-gradient(circle at 74% 30%, rgba(255,121,200,0.24), transparent 34%),
        radial-gradient(circle at 22% 74%, rgba(40,184,246,0.18), transparent 30%),
        linear-gradient(to bottom, transparent 70%, var(--page-bg) 100%);
}

.hero-content,
[data-mode="light"] .hero-content {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.hero p,
[data-mode="light"] .hero p {
    width: fit-content;
    max-width: 620px;
    padding: 16px 20px;
    border-radius: 22px;
    color: #3b2d42;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.58);
    text-shadow: none;
    box-shadow: 0 16px 45px rgba(255,79,163,0.11);
    backdrop-filter: blur(8px);
}

.hero-note {
    color: #ffffff;
    background: linear-gradient(135deg, #ff4fa3, #ff79c8 55%, #28b8f6);
    border: 0;
    box-shadow: 0 18px 45px rgba(255,79,163,0.24);
}

.btn-primary,
.smart-submit,
.premium-wa-link,
.submit-btn,
.pregnancy-submit {
    background: linear-gradient(135deg, #ff2f98 0%, #ff79c8 48%, #28b8f6 115%) !important;
    box-shadow: 0 18px 42px rgba(255,79,163,0.28) !important;
}

.btn-ghost,
[data-mode="light"] .btn-ghost {
    color: #b31372;
    background: rgba(255,255,255,0.72);
    border-color: rgba(255,79,163,0.22);
}

.clock-card-wide,
.stat-card,
.info-card,
.service-card,
.review-card,
.booking-panel,
.contact-card,
.fri-card,
.soft-alert-card,
[data-mode="dark"] .clock-card-wide,
[data-mode="dark"] .stat-card,
[data-mode="dark"] .info-card,
[data-mode="dark"] .service-card,
[data-mode="dark"] .review-card,
[data-mode="dark"] .booking-panel,
[data-mode="dark"] .contact-card,
[data-mode="dark"] .fri-card,
[data-mode="dark"] .soft-alert-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,241,249,0.86));
    border-color: rgba(255,79,163,0.16);
    box-shadow: 0 18px 52px rgba(255,79,163,0.12), 0 10px 35px rgba(40,184,246,0.08);
}

.clock-card-wide::before,
.stat-card::before,
.info-card::before,
.service-card::after,
.review-card::after,
.booking-panel::before,
.contact-card::before {
    background:
        radial-gradient(circle at 14% 10%, rgba(255,121,200,0.18), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(40,184,246,0.14), transparent 32%);
}

.clock-ring {
    background: conic-gradient(from 90deg, #ff4fa3, #ffd166, #28b8f6, #ff4fa3);
}

.stat-number,
.section-title {
    background: linear-gradient(135deg, #b31372, #ff4fa3 58%, #28b8f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title::after,
.service-card::before,
.neon-divider {
    background: linear-gradient(90deg, #ff4fa3, #ffd166, #28b8f6);
}

.doctor-photo {
    background: linear-gradient(145deg, #ffffff, #ffe8f6 54%, #e8f8ff);
    border: 1px solid rgba(255,79,163,0.14);
}

.doctor-photo::after {
    display: none;
}

.service-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,235,247,0.82));
}

.service-card i,
.meta-stat i,
.contact-line i,
.flip-card-front i {
    background: linear-gradient(135deg, #ff4fa3, #ff79c8 56%, #28b8f6) !important;
    box-shadow: 0 14px 30px rgba(255,79,163,0.24);
}

.booking-section,
[data-mode="light"] .booking-section {
    background:
        radial-gradient(circle at 16% 14%, rgba(255,121,200,0.22), transparent 32%),
        radial-gradient(circle at 84% 90%, rgba(40,184,246,0.2), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,236,247,0.78));
}

.booking-head h2 {
    color: #b31372;
    background: linear-gradient(135deg, #ffffff, #ffe5f5);
    border: 1px solid rgba(255,79,163,0.16);
}

.group-title {
    color: #b31372;
    background: linear-gradient(90deg, rgba(255,79,163,0.13), rgba(40,184,246,0.1), transparent);
}

.flip-card-front,
[data-mode="dark"] .flip-card-front,
[data-mode="light"] .flip-card-front {
    background: linear-gradient(145deg, #ffffff, #fff0fa);
    border-color: rgba(255,79,163,0.16);
    color: #34263a;
}

.flip-card-back,
.flip-card.special .flip-card-back,
.flip-card.family-card .flip-card-front {
    background: linear-gradient(135deg, #ff2f98, #ff79c8 58%, #28b8f6) !important;
}

input,
select,
textarea,
[data-mode="dark"] input,
[data-mode="dark"] select,
[data-mode="dark"] textarea {
    background: rgba(255,255,255,0.92);
    border-color: rgba(255,79,163,0.18);
    color: #34263a;
}

.assistant-card {
    isolation: isolate;
    overflow: hidden;
    min-height: 330px;
    border: 0;
    background:
        radial-gradient(circle at 15% 18%, rgba(255,255,255,0.46), transparent 24%),
        linear-gradient(135deg, rgba(255,47,152,0.92), rgba(255,121,200,0.86) 45%, rgba(40,184,246,0.9)),
        url("https://i.ibb.co/r2gY7y29/smart-assistant.png") center / cover no-repeat !important;
    box-shadow: 0 28px 85px rgba(255,79,163,0.26), 0 12px 40px rgba(40,184,246,0.18);
    animation: assistantPulseGlow 2.4s ease-in-out infinite;
}

.assistant-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 0;
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.42), transparent 28%);
    animation: assistantShineSpin 4.2s linear infinite;
}

.assistant-card::after {
    content: "ابدئي من هنا";
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    padding: 9px 15px;
    border-radius: 999px;
    color: #b31372;
    background: #ffffff;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
    animation: assistantBadgePop 1.4s ease-in-out infinite;
}

.assistant-card h2 {
    color: #fff;
    text-shadow: 0 8px 26px rgba(113,0,68,0.35);
}

.assistant-card p {
    color: rgba(255,255,255,0.96);
}

.assistant-card .btn {
    color: #fff;
    background: linear-gradient(135deg, #b31372, #ff2f98, #28b8f6) !important;
    box-shadow: 0 18px 42px rgba(179,19,114,0.34);
    animation: assistantButtonPulse 1.55s ease-in-out infinite;
}

.assistant-icon {
    animation: assistantIconFloat 2s ease-in-out infinite;
}

@keyframes assistantPulseGlow {
    0%, 100% { transform: translateY(0); box-shadow: 0 28px 85px rgba(255,79,163,0.24), 0 12px 40px rgba(40,184,246,0.18); }
    50% { transform: translateY(-5px); box-shadow: 0 36px 105px rgba(255,79,163,0.34), 0 16px 52px rgba(40,184,246,0.26); }
}

@keyframes assistantShineSpin {
    to { transform: rotate(1turn); }
}

@keyframes assistantBadgePop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes assistantButtonPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes assistantIconFloat {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-8px) rotate(-4deg); }
}

.review-card {
    background: linear-gradient(145deg, #ffffff, #fff1fa);
}

.avatar {
    color: #fff;
    background: linear-gradient(135deg, #ff4fa3, #28b8f6);
}

.memory-flyer {
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,0.46), transparent 30%),
        linear-gradient(135deg, #ff2f98, #ff79c8 52%, #28b8f6);
}

.footer {
    color: #28b8f6;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92), transparent);
    text-shadow:
        0 1px 0 #ffffff,
        0 0 10px rgba(40,184,246,0.28);
}

.footer-clinic-name {
    display: inline-block;
    color: #d4a017;
    font-weight: 900;
    background: linear-gradient(110deg, #8a5b00 0%, #ffd45a 28%, #ffffff 44%, #d4a017 58%, #8a5b00 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.75),
        0 0 14px rgba(255,212,90,0.55),
        0 0 28px rgba(40,184,246,0.2);
    animation: goldNameShine 2.8s linear infinite;
}

@keyframes goldNameShine {
    to { background-position: -220% center; }
}

/* Booking gets its own visual identity, distinct from the content sections. */
.booking-section {
    position: relative;
    width: min(1200px, calc(100% - 18px));
    margin: 62px auto;
    padding: clamp(20px, 4vw, 44px);
    border: 1px solid rgba(255, 79, 163, 0.26);
    border-radius: 38px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 28px 75px rgba(179,19,114,0.16), 0 12px 35px rgba(40,184,246,0.15);
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,0.88), transparent 24%),
        radial-gradient(circle at 92% 82%, rgba(40,184,246,0.32), transparent 34%),
        linear-gradient(135deg, #fff0f8, #fff 43%, #e8f8ff);
}
.booking-section::before {
    content: "حجز إلكتروني آمن";
    position: absolute;
    top: 18px;
    left: 22px;
    z-index: -1;
    color: rgba(179,19,114,0.12);
    font-size: clamp(1.7rem, 5vw, 4.5rem);
    font-weight: 900;
    white-space: nowrap;
}
.booking-section .booking-panel {
    position: relative;
    border-color: rgba(255,79,163,0.22);
    box-shadow: 0 18px 46px rgba(179,19,114,0.10);
}
.booking-section .booking-head::before {
    content: "✦";
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg,#b31372,#ff4fa3,#28b8f6);
    box-shadow: 0 12px 24px rgba(255,79,163,.28);
}
.submission-error { text-align:center; padding:36px; border-color:rgba(229,72,94,.4)!important; }
.submission-error .result-icon { background:linear-gradient(135deg,#e5485e,#a80f35)!important; }
.submission-error h2 { color:#c22142; }
.designer-signature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-inline-start: 8px;
    color: #b31372;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .25s ease, filter .25s ease;
}
.designer-signature b {
    color: #d4a017;
    background: linear-gradient(110deg,#8a5b00,#ffd45a 42%,#b31372 70%,#8a5b00);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldNameShine 3.2s linear infinite;
}
.designer-signature:hover { transform: translateY(-2px); filter:brightness(1.08); }
.footer-separator { color:#a3b7c7; margin-inline:8px; }
.footer .designer-signature { color:#28b8f6; }
.form-signature.designer-signature { margin:16px auto 0; width:max-content; max-width:100%; }
@media (max-width:650px){.booking-section{border-radius:28px;padding:15px}.booking-section::before{top:10px;left:12px;font-size:1.65rem}.footer{line-height:2}.footer-separator{display:none}.footer .designer-signature{display:flex;margin:5px auto 0;width:max-content;max-width:100%}}

.footer .designer-signature{color:#174d68!important;background:#ffffffd9;border:1px solid #83d9ff;border-radius:999px;padding:8px 14px;box-shadow:0 5px 16px rgba(14,94,133,.16);text-shadow:none}.footer .designer-signature i{color:#c68b00}.footer .designer-signature b{color:#8d1854!important;background:none!important;-webkit-text-fill-color:currentColor!important;text-shadow:none;font-weight:900}.footer .designer-signature:hover{color:#0b668f!important;background:#fff;filter:none}

/* لمسة ورد رقيقة بعد اكتمال الاسم، بعيدة عن حقول الإدخال. */
.name-bloom{position:fixed;z-index:2500;left:var(--bloom-x);top:var(--bloom-y);pointer-events:none;display:grid;place-items:center;width:52px;height:52px;color:#fff;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 7%,#ffd0e5 8% 23%,#d96c9f 24% 53%,#6f2f4f 54%);box-shadow:0 13px 28px rgba(156,82,102,.3);animation:nameBloom 3.45s cubic-bezier(.2,.8,.2,1) forwards}.name-bloom span{font-size:2.7rem;line-height:1;transform:rotate(-14deg);text-shadow:0 2px 9px rgba(90,41,66,.34)}.name-bloom i{position:absolute;right:-9px;bottom:-7px;color:#d7f5ef;font-size:.78rem;animation:heartBlink .85s ease-in-out infinite alternate}@keyframes nameBloom{0%{opacity:0;transform:translate(0,14px) scale(.35) rotate(-14deg)}18%{opacity:1;transform:translate(-10px,-14px) scale(1) rotate(7deg)}72%{opacity:1;transform:translate(26px,-42px) scale(.92) rotate(-5deg)}100%{opacity:0;transform:translate(56px,-62px) scale(.55) rotate(16deg)}}@keyframes heartBlink{to{transform:scale(1.35);opacity:.55}}
.family-welcome-card{border-color:rgba(47,159,152,.42)!important;background:radial-gradient(circle at 50% 0,#e7fbf7,transparent 42%),var(--silk-bg)}.family-welcome-card h2{color:#2f9f98!important}.family-welcome-card p{font-weight:800;line-height:2;color:var(--text-main)}.family-welcome-icon{background:linear-gradient(135deg,#2f9f98,#d96c9f)!important}.family-welcome-note{margin:18px 0;padding:13px;border-radius:15px;color:#246d68;background:#e7fbf7;font-weight:900}.family-welcome-note i{margin-left:6px;color:#c65f89}

/* فصل قسم الحجز بصريًا عن بقية الصفحة */
.booking-section{border:2px solid #e45b9d!important;background:linear-gradient(135deg,#fff3f9 0%,#ffffff 46%,#e8f8ff 100%)!important;box-shadow:0 28px 72px rgba(179,19,114,.22),0 0 0 8px rgba(255,255,255,.46)!important}.booking-section .booking-panel{background:rgba(255,255,255,.96)!important;border:2px solid rgba(179,19,114,.26)!important;box-shadow:0 18px 46px rgba(96,32,80,.15)!important}.booking-section .booking-head{padding:14px 12px 18px;margin:0 -4px 24px;border-radius:22px;background:linear-gradient(135deg,#b31372,#ed63a3 55%,#32b4eb);box-shadow:0 10px 23px rgba(179,19,114,.22)}.booking-section .booking-head h2,.booking-section .booking-head p{color:#fff!important;text-shadow:none}.booking-section .booking-head h2{background:transparent!important;-webkit-text-fill-color:#fff!important}.booking-section::before{color:rgba(179,19,114,.08)!important}[data-mode="dark"] .booking-section{background:linear-gradient(135deg,#3d2638,#202d3b)!important;border-color:#f38abc!important;box-shadow:0 28px 72px rgba(0,0,0,.38),0 0 0 6px rgba(255,255,255,.05)!important}[data-mode="dark"] .booking-section .booking-panel{background:rgba(30,23,32,.96)!important;border-color:rgba(243,138,188,.42)!important}@media(max-width:650px){.booking-section{margin:34px auto!important;border-radius:28px!important;box-shadow:0 18px 45px rgba(179,19,114,.18)!important}.booking-section .booking-head{border-radius:18px;padding:12px 8px 16px}}