/* ===============================================
// ||
// ||  Enhanced Stylesheet for Dr. Israa Hamdy's Clinic
// ||  Version: 2.1 - Complete
// ||  Author: Gemini AI
// ||
// =============================================== */

/* ===============================================
   1. ROOT & THEME VARIABLES
   =============================================== */
:root {
    /* Color Palette (Light Mode) */
    --primary-brand: hsl(222, 76%, 52%);
    --primary-brand-light: hsl(219, 83%, 63%);
    --accent-gold: hsl(38, 92%, 50%);
    --accent-sky: hsl(199, 94%, 60%);
    --success: hsl(145, 63%, 42%);
    --error: hsl(0, 79%, 63%);

    --bg-primary: hsl(210, 40%, 98%);
    --bg-secondary: hsl(0, 0%, 100%);
    --bg-tertiary: hsl(210, 36%, 96%);

    --text-primary: hsl(215, 28%, 17%);
    --text-secondary: hsl(217, 19%, 35%);
    --text-muted: hsl(215, 14%, 55%);
    --text-on-primary: hsl(0, 0%, 100%);

    --border-primary: hsl(214, 32%, 91%);
    --shadow-color: 220, 40%, 20%;
    --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.1),
                            0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.1),
                            1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.1);
    --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.1),
                               0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.1),
                               2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.1),
                               5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.1);

    /* Typography */
    --font-primary: 'Cairo', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.7;

    /* Spacing & Radius */
    --spacing-unit: 8px;
    --border-radius-small: 8px;
    --border-radius-medium: 16px;
    --border-radius-large: 24px;

    /* Transitions */
    --transition-fast: 200ms ease;
    --transition-medium: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* Dark Mode Color Palette */
body.dark-mode {
    --primary-brand: hsl(219, 83%, 63%);
    --primary-brand-light: hsl(222, 76%, 52%);

    --bg-primary: hsl(220, 26%, 12%);
    --bg-secondary: hsl(220, 23%, 18%);
    --bg-tertiary: hsl(220, 20%, 24%);

    --text-primary: hsl(210, 40%, 98%);
    --text-secondary: hsl(210, 30%, 80%);
    --text-muted: hsl(215, 15%, 50%);

    --border-primary: hsl(217, 19%, 27%);
    --shadow-color: 220, 40%, 5%;
}


/* ===============================================
   2. GLOBAL & ACCESSIBILITY
   =============================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
}

body {
    font-family: var(--font-primary);
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

/* Accessibility: Focus Visible */
:focus-visible {
    outline: 3px solid var(--primary-brand);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--bg-secondary);
    border-radius: var(--border-radius-small);
}
.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 6px var(--primary-brand-light);
}

/* ===============================================
   3. LANGUAGE-SPECIFIC STYLES
   =============================================== */
body.lang-en {
    font-family: var(--font-secondary);
    direction: ltr;
}

/* Invert directions for LTR */
.lang-en [dir="rtl"] { direction: ltr; }
.lang-en [dir="ltr"] { direction: ltr; }
.lang-en .text-right { text-align: left; }
.lang-en .text-left { text-align: right; }
.lang-en .lg\:text-right { text-align: left; }
.lang-en .lg\:text-left { text-align: right; }
.lang-en .form-input { padding: 14px 16px 14px 48px; }
.lang-en .form-input-container i { left: 18px; right: auto; }
.lang-en .next-btn i, .lang-en .prev-btn i { transform: rotate(180deg); }
.lang-en #progress { left: 0; right: auto; }
.lang-en .nav-link:not(.active)::after { transform-origin: left; }
.lang-en .nav-link:hover::after { transform-origin: right; }

/* ===============================================
   4. LAYOUT & UTILITIES
   =============================================== */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 calc(var(--spacing-unit) * 3);
}

.page-content {
    animation: page-enter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes page-enter {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===============================================
   5. TYPOGRAPHY
   =============================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.2;
    text-wrap: balance;
}

.section-title {
    font-size: clamp(2rem, 5vw, 2.75rem);
    position: relative;
    padding-bottom: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 3);
    text-shadow: 1px 1px 2px hsl(var(--shadow-color) / 0.05);
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-brand), var(--accent-sky));
    border-radius: 3px;
    animation: underline-grow 1s ease-out;
}
@keyframes underline-grow {
    from { width: 0; }
    to { width: 100px; }
}

/* ===============================================
   6. HEADER & NAVIGATION
   =============================================== */
#main-header {
    transition: background-color var(--transition-medium), box-shadow var(--transition-medium), backdrop-filter var(--transition-medium);
}
.header-scrolled {
    background-color: hsla(0, 0%, 100%, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 20px hsl(var(--shadow-color) / 0.08);
    border-bottom: 1px solid var(--border-primary);
}
body.dark-mode .header-scrolled {
    background-color: hsla(220, 26%, 12%, 0.75);
}

.nav-link {
    position: relative;
    padding-bottom: var(--spacing-unit);
    font-weight: 700;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}
.nav-link.active, .nav-link:hover {
    color: var(--primary-brand);
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-brand);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-medium);
}
.nav-link:hover::after, .nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Mobile Menu */
#mobile-menu {
    background-color: var(--bg-secondary);
    box-shadow: 0 10px 20px hsl(var(--shadow-color) / 0.1);
}

/* ===============================================
   7. BUTTONS
   =============================================== */
.btn {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 4);
    border-radius: var(--border-radius-small);
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    transform: translateY(0);
}
.btn-primary {
    background: linear-gradient(45deg, var(--primary-brand), var(--primary-brand-light));
    color: var(--text-on-primary);
    box-shadow: var(--shadow-elevation-low);
}
.btn-primary:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--shadow-elevation-medium);
}
.btn-primary:active {
    transform: translateY(-1px) scale(0.99);
}
.btn-primary:disabled {
    background: var(--text-muted);
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}
.btn-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--primary-brand);
    color: var(--primary-brand);
    box-shadow: 0 4px 10px hsl(var(--shadow-color) / 0.05);
}

/* ===============================================
   8. FORMS & INPUTS
   =============================================== */
.form-input-container {
    position: relative;
}
.form-input, select.form-input, textarea.form-input {
    appearance: none;
    width: 100%;
    padding: 14px 48px 14px 16px;
    border: 2px solid var(--border-primary);
    border-radius: var(--border-radius-small);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    font-weight: 600;
}
.form-input-container i {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    color: var(--text-muted);
    transition: color var(--transition-fast);
    pointer-events: none;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary-brand);
    background-color: var(--bg-secondary);
    box-shadow: 0 0 0 4px hsl(222, 76%, 52%, 0.1);
}
.form-input:focus + i {
    color: var(--primary-brand);
}
.form-input.is-invalid {
    border-color: var(--error);
}
.form-input.is-invalid:focus {
    box-shadow: 0 0 0 4px hsl(0, 79%, 63%, 0.15);
}
.error-message {
    color: var(--error);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: none;
    font-weight: 600;
}
select.form-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: left 1rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-left: 2.5rem;
}
body.lang-en select.form-input {
    background-position: right 1rem center;
    padding-right: 2.5rem;
    padding-left: 1rem;
}

/* ===============================================
   9. CARDS & COMPONENTS
   =============================================== */
.service-card, .testimonial-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-medium);
    padding: calc(var(--spacing-unit) * 4);
    box-shadow: var(--shadow-elevation-low);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    will-change: transform;
}
.service-card:hover, .testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-elevation-medium);
}
.service-card .card-icon {
    transition: transform var(--transition-medium);
}
.service-card:hover .card-icon {
    transform: scale(1.15) rotate(-6deg);
}

/* Hero Image */
.hero-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-image-bg {
    position: absolute;
    width: 95%;
    height: 95%;
    background: linear-gradient(45deg, var(--primary-brand), var(--accent-sky));
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morph-bg 15s ease-in-out infinite alternate;
    opacity: 0.2;
    z-index: 1;
}
.hero-image {
    position: relative;
    z-index: 2;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    border: 8px solid var(--bg-secondary);
    box-shadow: 0 10px 40px hsl(var(--shadow-color) / 0.2);
}
@keyframes morph-bg {
    to { border-radius: 67% 33% 45% 55% / 58% 63% 37% 42%; transform: rotate(15deg); }
}

/* Multi-step Form Progress Bar */
#progress-bar {
    position: relative;
}
#progress-bar::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: var(--border-primary);
    z-index: 1;
}
#progress {
    position: absolute;
    top: 20px;
    right: 0;
    transform: translateY(-50%);
    height: 4px;
    background: linear-gradient(90deg, var(--primary-brand), var(--accent-sky));
    z-index: 2;
    width: 0%;
    transition: width var(--transition-slow);
}
.progress-step-container.active .progress-step {
    border-color: var(--primary-brand);
    background-color: var(--primary-brand);
    color: var(--text-on-primary);
    transform: scale(1.1);
}
.progress-step-container.active .progress-step-title {
    color: var(--primary-brand);
    font-weight: 700;
}

/* ===============================================
   10. CHAT WIDGET
   =============================================== */
#chat-icon {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, var(--primary-brand), var(--primary-brand-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px hsl(222, 76%, 52%, 0.3);
    z-index: 999;
    transition: transform var(--transition-medium);
}
#chat-icon:hover {
    transform: scale(1.15) rotate(20deg);
}
#chat-widget {
    position: fixed;
    bottom: 100px;
    left: 25px;
    width: 360px;
    max-width: 90vw;
    height: 520px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-elevation-medium);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    transform-origin: bottom left;
    transition: transform var(--transition-slow), opacity var(--transition-slow);
    border: 1px solid var(--border-primary);
}
#chat-widget.hidden {
    transform: scale(0.5);
    opacity: 0;
    pointer-events: none;
}
#chat-header {
    background-color: var(--primary-brand);
    color: var(--text-on-primary);
    padding: var(--spacing-unit) * 2;
}
#chat-log {
    flex-grow: 1;
    padding: var(--spacing-unit) * 2;
    overflow-y: auto;
    background-color: var(--bg-primary);
}
.chat-message .bubble {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius-medium);
}
.chat-message.user .bubble {
    background-color: var(--primary-brand);
    color: var(--text-on-primary);
    border-bottom-right-radius: var(--border-radius-small);
}
.chat-message.bot .bubble {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-bottom-left-radius: var(--border-radius-small);
}

/* ===============================================
   11. FOOTER
   =============================================== */
footer {
    background: var(--primary-brand);
    color: hsl(210, 30%, 80%);
}
footer h3, footer .developer-credit span {
    color: var(--text-on-primary);
}
footer a {
    transition: color var(--transition-fast);
}
footer a:hover {
    color: var(--accent-sky);
}

/* ===============================================
   12. PRELOADER & MISC
   =============================================== */
#preloader {
    position: fixed;
    inset: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s;
}
#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}
.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid var(--border-primary);
    border-top-color: var(--primary-brand);
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

#back-to-top {
    position: fixed;
    bottom: -60px;
    right: 25px;
    width: 50px;
    height: 50px;
    background-color: var(--accent-gold);
    color: var(--text-on-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px hsl(38, 92%, 50%, 0.3);
    z-index: 998;
    transition: bottom var(--transition-medium), transform var(--transition-fast);
}
#back-to-top:hover {
    transform: scale(1.1);
    background-color: hsl(38, 92%, 60%);
}
#back-to-top.visible {
    bottom: 25px;
}