:root {
    --primary     : #2c3e50;
    --secondary   : #3498db;
    --accent      : #f39c12;
    --orange      : #e67e22;
    --dark        : #1a252f;
    --light       : #ecf0f1;
    --success     : #2ecc71;
    --danger      : #e74c3c;
    --gray        : #7f8c8d;
    --white       : #fff   ;
    --shadow      : 0 5px 15px rgba(0,0,0,0.1);
    --transition  : all 0.3s ease;
}

* { 
    margin      : 0; 
    padding     : 0; 
    box-sizing  : border-box; 
    font-family : 'Segoe UI', Tahoma, sans-serif; 
}

body { 
    background  : #f8f9fa; 
    color       : #333; 
    line-height : 1.6; 
    direction   : ltr; }

.container { 
    width     : 90%; 
    max-width : 1200px; 
    margin    : 0 auto; 
    padding   : 0 15px; 
}

.text-center { text-align: center; }
.py-5 { padding  : 4rem 0; }
.py-4 { padding  : 3rem 0; }
.my-4 { margin   : 3rem 0; }
.mb-3 { margin-bottom  : 1.5rem; }
.mb-4 { margin-bottom  : 2rem  ; }
.bg-light { background: var(--light) ;  }
.bg-white { background: var(--white) ;  }
.shadow   { box-shadow: var(--shadow);  }
.rounded  { border-radius: 12px; }

.btn {
    display         : inline-block; 
    padding         : 0.8rem 2rem      ; 
    border-radius   : 6px              ;
    text-decoration : none             ; 
    font-weight     : bold             ; 
    border          : none             ; 
    cursor          : pointer          ;
    transition      : var(--transition);
}

.btn-primary { 
    background : var(--accent); 
    color      : var(--dark)  ;
}

.btn-primary:hover { 
    background : var(--orange)                ; 
    transform  : translateY(-3px)             ; 
    box-shadow : 0 5px 15px rgba(0,0,0,0.2) ; 
}

.btn-secondary { 
    background : var(--primary); 
    color      : white       ; 
}

.btn-secondary:hover { 
    background   : var(--dark)      ; 
    transform    : translateY(-3px) ; 
}

.btn-blue   { 
    background : var(--secondary);
     color     : white         ; 
}

.btn-purple { 
    background : #8e44ad; 
    color      : white  ; 
}

.btn-orange { 
    background : var(--orange); 
    color      : white      ; 
}

/* ===== الرأس ===== */
header { 
    background : var(--white)                 ; 
    box-shadow : 0 2px 10px rgba(0,0,0,0.1) ; 
    position   : sticky                       ; 
    top        : 0                            ; 
    z-index    : 1000                         ; 
}

.top-nav { 
    display         : flex           ; 
    justify-content : space-between  ; 
    align-items     : center         ; 
    padding         : 1rem 0         ; 
    flex-wrap       : wrap           ; 
    gap             : 1rem           ; 
    position        : relative       ; 
}

.logo { 
    display     : flex           ; 
    align-items : center         ; 
    gap         : 10px           ; 
    color       : var(--primary) ; 
}

.logo-img {
    width      : 70px                     ;
    height     : 40px                     ;
    background : rgba(255, 255, 255, 0) ;
}

/* ===== زر الهامبرغر للجوال ===== */
.menu-toggle {
    display     : none           ;
    background  : none           ;
    border      : none           ;
    font-size   : 2rem           ;
    cursor      : pointer        ;
    color       : var(--primary) ;
    padding     : 0.5rem         ;
    line-height : 1              ;
    z-index     : 1001           ;
}
.menu-toggle:hover { 
    color: var(--secondary)      ; 
}

.nav-controls { 
    display     : flex   ; 
    gap         : 1.5rem ; 
    align-items : center ; 
    flex-wrap   : wrap   ; 
}

.nav-link { 
    display         : flex              ; 
    align-items     : center            ; 
    gap             : 5px               ; 
    color           : var(--primary)    ; 
    text-decoration : none              ; 
    font-weight     : 500               ; 
    padding         : 0.5rem 0.8rem     ; 
    border-radius   : 6px               ; 
    transition      : var(--transition) ; 
}

.nav-link:hover { 
    background : var(--light)     ; 
    color      : var(--secondary) ; 
}

.dropdown { position: relative; }
.dropdown-content {
    display       : none          ; 
    position      : absolute      ; 
    background    : var(--white)  ; 
    min-width     : 220px         ;
    box-shadow    : var(--shadow) ; 
    border-radius : 8px           ; 
    top           : 100%          ; 
    right         : 0             ; 
    padding       : 1rem 0        ;
}

.dropdown:hover 
.dropdown-content { display : block       ; }
.dropdown-section { padding : 0.5rem 1rem ; }

.dropdown-section h4 { 
    color          : var(--primary)         ; 
    margin-bottom  : 0.5rem                 ; 
    font-size      : 0.9rem                 ; 
    border-bottom  : 1px solid var(--light) ; 
    padding-bottom : 0.5rem                 ; 
}

.dropdown-content a  { 
    color       : var(--dark)       ; 
    padding     : 0.5rem 1rem       ; 
    display     : flex              ; 
    align-items : center            ; 
    gap         : 10px              ; 
    transition  : var(--transition) ;
}

.dropdown-content a:hover { 
    background : var(--light)      ; 
    color      : var(--secondary)  ; 
}

/* ===== أيقونة المستخدم والقائمة المنسدلة ===== */
.user-menu { position: relative; }
.user-area {
    display       : flex                                          ; 
    align-items   : center                                        ;
    gap           : 10px                                          ;
    padding       : 0.5rem 1rem                                   ;
    background    : linear-gradient(135deg, #f8f9fa, #e9ecef) ;
    border-radius : 30px                                          ;
    cursor        : pointer                                       ; 
    transition    : var(--transition)                             ;
    border        : 1px solid #dee2e6                           ;
}

.user-area:hover { 
    background : linear-gradient(135deg, #e9ecef, #dee2e6)  ; 
    box-shadow : 0 4px 12px rgba(0,0,0,0.1)                   ; 
}

.user-greeting { 
    font-weight  : 600            ; 
    color        : var(--primary) ; 
    font-size    : 0.95rem        ; 
}

.user-avatar {
    width           : 38px                                                        ; 
    height          : 38px                                                        ;
    background      : linear-gradient(135deg, var(--secondary), var(--primary))   ;
    border-radius   : 50%                                                         ; 
    display         : flex                                                        ; 
    align-items     : center                                                      ; 
    justify-content : center                                                      ;
    color           : white                                                     ; 
    font-size       : 1rem                                                        ; 
    box-shadow      : 0 4px 8px rgba(0,0,0,0.1)                                 ;
}
.user-dropdown {
    position          : absolute                       ; 
    top               : 55px                           ; 
    left              : 0                              ; 
    background        : white                        ;
    border-radius     : 12px                           ; 
    box-shadow        : 0 10px 30px rgba(0,0,0,0.15) ;
    min-width         : 220px                          ; 
    display           : none                           ; 
    flex-direction    : column                         ;
    padding           : 0.5rem 0                       ; 
    z-index           : 200                            ; 
    border            : 1px solid #eee               ;
    overflow          : hidden                         ;
}

.user-dropdown.active { display: flex; }
.dropdown-item {
    padding          : 0.8rem 1.5rem     ;
    text-decoration  : none              ; 
    color            : var(--dark)       ;
    font-weight      : 500               ; 
    transition       : var(--transition) ; 
    display          : flex              ;
    align-items      : center            ; 
    gap              : 10px              ; 
    font-size        : 0.95rem           ;
}

.dropdown-item:hover { 
    background     : #f8f9fa        ;
    color          : var(--secondary) ; 
    padding-right  : 1.8rem           ; 
}

.dropdown-divider  { 
    border      : none             ; 
    border-top  : 1px solid #eee ; 
    margin      : 0.3rem 0         ; 
}

.logout-item { color: var(--danger); }

.logout-item:hover { 
    background : #fff5f5; 
    color      : #c0392b; 
}

.auth-buttons { 
    display : flex   ; 
    gap     : 0.5rem ; 
}

.btn-outline {
    background: transparent; 
    border: 2px solid var(--secondary);
    color: var(--secondary); 
    padding: 0.5rem 1.5rem;
    border-radius: 30px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: var(--transition);
}

.btn-outline:hover { 
    background : var(--secondary) ; 
    color      : white          ; 
}

/* ===== نافذة تسجيل الدخول (مودال) ===== */
.modal {
    display         : none               ; 
    position        : fixed              ; 
    inset           : 0                  ;
    background      : rgba(0,0,0,0.5)  ; 
    backdrop-filter : blur(5px)          ;
    justify-content : center             ; 
    align-items     : center             ; 
    z-index         : 3000               ;
}

.modal.active { display: flex; }

.modal-content {
    background    : white                       ; 
    padding       : 2rem 1.8rem                   ; 
    border-radius : 16px                          ;
    width         : 90%                           ; 
    max-width     : 420px                         ; 
    box-shadow    : 0 20px 40px rgba(0,0,0,0.2) ;
    position      : relative                      ; 
    animation     : slideDown 0.3s ease           ;
}

@keyframes slideDown {
    from { transform: translateY(-30px); opacity: 0; }
    to   { transform: translateY(0)    ; opacity: 1; }
}

.modal-close { 
    position   : absolute          ; 
    top        : 12px              ; 
    left       : 15px              ; 
    font-size  : 1.8rem            ; 
    cursor     : pointer           ; 
    color      : #888            ; 
    transition : var(--transition) ; 
}

.modal-close:hover { 
    color      : var(--danger) ; 
    transform  : rotate(90deg) ; 
}

.modal-tabs { 
    display       : flex   ; 
    gap           : 0.5rem ; 
    margin-bottom : 1.8rem ; 
}

.modal-tab {
    flex          : 1                ; 
    padding       : 0.7rem           ; 
    border        : none             ; 
    background    : #f1f3f5        ;
    border-radius : 30px             ; 
    font-weight   : bold             ; 
    cursor        : pointer          ;
    transition    : var(--transition); 
    color         : #555           ;
}

.modal-tab.active { 
    background : var(--secondary)  ; 
    color      : white           ; 
}

.input-group { 
    margin-bottom : 1.2rem ; 
    text-align    : right  ; 
}

.input-group label { 
    display       : block          ; 
    margin-bottom : 0.4rem         ; 
    font-weight   : 600            ; 
    color         : var(--primary) ; 
    font-size     : 0.9rem         ; 
}

.input-group input {
    width         : 100%             ; 
    padding       : 0.9rem 1rem      ; 
    border-radius : 8px              ;
    border        : 1px solid #ddd ; 
    font-size     : 0.95rem          ; 
    outline       : none             ; 
    transition    : border 0.2s      ;
}

.input-group input:focus { 
    border-color  : var(--secondary)                 ; 
    box-shadow    : 0 0 0 3px rgba(52,152,219,0.1) ; 
}

.btn-full { 
    width      : 100%; 
    padding    : 0.9rem; 
    margin-top : 0.5rem; 
}

.form-error {
    color         : #e74c3c ; 
    margin-top    : 0.5rem    ; 
    font-size     : 0.9rem    ;
    display       : none      ; 
    background    : #ffeaea ; 
    padding       : 0.5rem    ;
    border-radius : 8px       ; 
    text-align    : center    ;
}

/* ===== hero ===== */
.hero {
    background-image    : url('/pictures/hero-bg.png') ;
    background-position : center                       ; 
    background-repeat   : no-repeat                    ; 
    height              : 67vh                         ; 
    width               : 100%                         ;
    color               : white                      ; 
    display             : flex                         ; 
    align-items         : center                       ; 
    text-align          : center                       ;
}

.hero-content { 
    max-width  : 800px  ; 
    margin     : 0 auto ; 
}

.hero h2 { 
    font-size     : 2.5rem ; 
    margin-bottom : 1.5rem ; 
}

.welcome-header h1 { 
    font-size     : 3rem ; 
    margin-bottom : 1rem ; 
}

.welcome-quote {
    background    : rgba(92,92,92,0.4)    ; 
    padding       : 1rem                    ; 
    border-radius : 12px                    ;
    max-width     : 900px                   ; 
    margin        : 2rem auto               ; 
    border-right  : 4px solid var(--accent) ;
}

/* ===== البطاقات والشبكات ===== */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem  ; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.card {
    background    : white                        ; 
    border-radius : 16px                           ; 
    overflow      : hidden                         ; 
    box-shadow    : 0 10px 30px rgba(0,0,0,0.1)  ;
    transition    : var(--transition)              ; 
    border        : 3px solid transparent          ;
    transition    : transform 0.3s ease            ;
}

.card:hover  { 
    transform  : translateY(-15px)              ; 
    box-shadow : 0 20px 40px rgba(0,0,0,0.15) ; 
}

.card-header { 
    padding    : 2rem    ; 
    text-align : center  ; 
    color      : white ; 
}

.card-header i { 
    font-size     : 4rem; 
    margin-bottom : 1rem; 
}

.card-content { padding: 2rem; }
.path-features div { 
    display       : flex   ; 
    align-items   : center ; 
    gap           : 10px   ; 
    margin-bottom : 1rem   ; 
}

/* ===== تذييل ===== */
footer { 
    background  : var(--dark) ; 
    color       : white     ; 
    padding     : 4rem 0 2rem ; 
}

.footer-content { 
    display               : grid          ; 
    gap                   : 3rem          ; 
    margin-bottom         : 3rem          ; 
    grid-template-columns : repeat(auto-fit, minmax(250px, 1fr)); 
}

.footer-section h3 { 
    margin-bottom  : 1.5rem; 
    font-size      : 1.3rem; 
}

.footer-section ul    { list-style    : none  ; }
.footer-section ul li { margin-bottom : 0.8rem; }

.footer-section ul li a { 
    color           : #ddd            ; 
    text-decoration : none              ; 
    transition      : var(--transition) ; 
}

.footer-section ul li a:hover { 
    color         : var(--accent); 
    padding-right : 5px          ;
}
.footer-section ul li i { 
    margin-left : 8px           ; 
    color       : var(--accent) ; 
}

.footer-logo { 
    display       : flex   ; 
    align-items   : center ; 
    gap           : 10px   ; 
    margin-bottom : 1.5rem ; 
}

.footer-logo i { 
    font-size: 2rem          ; 
    color    : var(--accent) ; 
}

.copyright { 
    text-align  : center                            ; 
    padding-top : 2rem                              ; 
    border-top  : 1px solid rgba(255,255,255,0.1) ; 
    color       : #aaa                            ; 
    font-size   : 0.9rem                            ; 
}

/* ===== تجاوب ===== */
@media (max-width: 992px) {
    .hero h2           { font-size: 2rem   ; }
    .welcome-header h1 { font-size: 2.5rem ; }
}


@media (max-width: 768px) {
    .hero                { height               : 50vh;  }
    .grid-3              { grid-template-columns: 1fr;   }
    .menu-toggle         { display              : block; }
    .nav-controls.active { display              : flex;  }
    .user-menu           { width                : 100%;  }
    .nav-controls {
        display        : none         ;
        flex-direction : column       ;
        width          : 100%         ;
        background     : var(--white) ;
        padding        : 1.5rem       ;
        border-radius  : 16px         ;
        position       : absolute     ;
        top            : 100%         ;
        right          : 0            ;
        z-index        : 999          ;
        gap            : 1rem         ;
        box-shadow     : 0 15px 35px rgba(0,0,0,0.15) ;
    }

    .nav-link         { width: 100%; justify-content: flex-start; }
    .auth-buttons     { width: 100%; flex-direction : column    ; }
    .btn-outline, 
    .btn-primary      { width: 100%; text-align     : center    ; }
    .dropdown-content { position: static; box-shadow: none  ; margin-top: 0.5rem; }
    .user-dropdown    { position: static; margin-top: 0.5rem;                     }
}