/* ==========================================================================
   1. الإعدادات العامة والمتغيرات (Global Settings & Variables)
   ========================================================================== */

:root {
    /* لوحة الألوان */
    --primary-green: #1DB954;
    --primary-green-dark: #179443;
    --dark-blue: #0d1a2b;
    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --background-white: #FFFFFF;
    --background-light: #F9FAFB;

    /* الخطوط */
    --font-family: 'Cairo', sans-serif;

    /* قياسات وتأثيرات */
    --container-width: 1140px;
    --border-radius-smooth: 15px;
    --border-radius-round: 50px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.07);
    --shadow-medium: 0 15px 40px rgba(0, 0, 0, 0.1);
    --transition-fast: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* إعادة تعيين الأنماط الافتراضية */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* أساس الوحدات النسبية rem */
}

body {
    font-family: var(--font-family);
    color: var(--text-dark);
    background-color: var(--background-white);
    text-align: right;
    line-height: 1.8;
    overflow-x: hidden; /* لمنع التمرير الأفقي */
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

h1, h2, h3 {
    line-height: 1.4;
    font-weight: 700;
}

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: var(--primary-green);
}

/* ==========================================================================
   2. الأنماط العامة للمكونات (Global Components)
   ========================================================================== */

/* --- الأزرار --- */
.cta-button, .nav-button {
    background: linear-gradient(45deg, var(--primary-green), var(--primary-green-dark));
    color: white;
    padding: 0.9rem 2.2rem;
    border-radius: var(--border-radius-round);
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    transition: var(--transition-fast);
    box-shadow: 0 5px 15px rgba(29, 185, 84, 0.3);
    border: none;
}

.cta-button:hover, .nav-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(29, 185, 84, 0.4);
}

/* --- إطار الهاتف (Mockup) --- */
.mockup-frame {
    padding: 1rem;
    border: 1px solid #e0e4e8;
    border-radius: 45px;
    box-shadow: var(--shadow-medium);
    background: #f5f7f9;
}
.mockup-frame.small {
    border-radius: 35px;
    padding: 0.8rem;
}

.mockup-frame img {
    width: 100%;
    display: block;
    border-radius: 30px;
}
.mockup-frame.small img {
    border-radius: 25px;
}


/* --- فواصل الأقسام SVG --- */
.section-divider {
    position: absolute;
    bottom: -1px; /* لتجنب أي فراغات صغيرة */
    left: 0;
    width: 100%;
    height: 120px;
    background-repeat: no-repeat;
    background-size: cover;
}

#hero .section-divider {
    /* SVG Wave Shape 1 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23F9FAFB' fill-opacity='1' d='M0,192L60,170.7C120,149,240,107,360,112C480,117,600,171,720,181.3C840,192,960,160,1080,144C1200,128,1320,128,1380,128L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: center bottom;
}

#screenshots .section-divider.top {
    top: -1px;
    bottom: auto;
    transform: rotate(180deg);
     /* SVG Wave Shape 2 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23FFFFFF' fill-opacity='1' d='M0,224L48,208C96,192,192,160,288,165.3C384,171,480,213,576,240C672,267,768,277,864,256C960,235,1056,181,1152,176C1248,171,1344,213,1392,234.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: center bottom;
}

#screenshots .section-divider.bottom {
    /* SVG Wave Shape 2 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23FFFFFF' fill-opacity='1' d='M0,224L48,208C96,192,192,160,288,165.3C384,171,480,213,576,240C672,267,768,277,864,256C960,235,1056,181,1152,176C1248,171,1344,213,1392,234.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: center bottom;
}


/* --- أنماط العناوين العامة للأقسام --- */
.section-title {
    text-align: center;
    margin-bottom: 4rem;
}
.section-title h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
}
.section-title p {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}


/* ==========================================================================
   3. الرسوم المتحركة عند التمرير (Scroll Animations)
   ========================================================================== */
.scroll-animate {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-animation="fade-in-up"] { opacity: 0; transform: translateY(50px); }
[data-animation="fade-in-right"] { opacity: 0; transform: translateX(-50px); }
[data-animation="fade-in-left"] { opacity: 0; transform: translateX(50px); }
[data-animation="zoom-in"] { opacity: 0; transform: scale(0.9); }

.scroll-animate.visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* ==========================================================================
   4. تصميم الأقسام (Section Styling)
   ========================================================================== */

/* --- الهيدر --- */
header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    padding: 1.2rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: var(--transition-fast);
}

header.scrolled {
    box-shadow: var(--shadow-soft);
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary-green);
}

header nav ul { list-style: none; display: flex; align-items: center; }
header nav ul li { margin: 0 1.5rem; }
header nav ul li a { color: var(--text-dark); font-weight: 700; position: relative; padding-bottom: 5px; }
header nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--primary-green);
    transition: var(--transition-fast);
}
header nav ul li a:hover::after { width: 100%; }

/* --- قسم Hero --- */
#hero {
    padding: 5rem 0 120px 0; /* 120px مساحة لفاصل SVG */
    position: relative;
    overflow: hidden;
}

.hero-container { display: flex; align-items: center; gap: 3rem; }
.hero-text { flex: 1; }
.hero-image { flex: 1; text-align: center; }
#hero h1 { font-size: 3.2rem; font-weight: 900; margin-bottom: 1.5rem; }
#hero p { font-size: 1.2rem; color: var(--text-light); margin-bottom: 2.5rem; }
#hero .mockup-frame { max-width: 350px; margin: 0 auto; }

/* --- قسم الميزات --- */
#features {
    padding: 6rem 0;
    background: var(--background-white);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-bottom: 6rem;
}
.feature-item.reverse { flex-direction: row-reverse; }
.feature-item:last-child { margin-bottom: 0; }

.feature-item-text { flex: 1; }
.feature-item-image { flex: 1; }
.feature-item h3 { font-size: 2rem; margin-bottom: 1rem; }
.feature-item p { color: var(--text-light); font-size: 1.1rem; }
.feature-item .mockup-frame { max-width: 320px; }
.feature-item.reverse .mockup-frame { margin-left: auto; }

/* ==========================================================================
   قسم معرض الصور - (الفكرة الجديدة: إطار ثابت وحركة سلايد)
   ========================================================================== */
#screenshots {
    padding: 180px 0;
    background: var(--background-light);
    position: relative;
}

.slideshow-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 1. تصميم الإطار الخارجي (شكل الهاتف) */
.slideshow-frame {
    width: 300px;
    height: 650px;
    position: relative; /* مهم جداً لاحتواء الصور بالداخل */
    border-radius: 45px;
    padding: 14px;
    background: #181818;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 3px #333;
    overflow: hidden; /* لإخفاء أجزاء الصور أثناء حركتها */
}

/* 2. تصميم الصور وتجهيزها للحركة */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    
    /* الحالة الافتراضية (مخفية) */
    opacity: 0;
    transform: translateY(25px); /* تبدأ من الأسفل قليلاً */
    
    /* تأثير الانتقال عند التغيير */
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 3. حالة الصورة عندما تكون ظاهرة */
.slide.active {
    opacity: 1;
    transform: translateY(0); /* تعود لمكانها الأصلي */
    z-index: 1; /* للتأكد أنها فوق الصور الأخرى */
}


/* --- قسم السعر --- */
#pricing {
    padding: 6rem 0;
}
.pricing-content { max-width: 750px; text-align: center; margin: 0 auto; }
.pricing-icon {
    color: var(--primary-green);
    margin-bottom: 1.5rem;
}
.pricing-content p {
    font-size: 1.2rem;
    color: var(--text-light);
}

/* --- قسم CTA الأخير --- */
#cta {
    background: var(--dark-blue);
    color: white;
    padding: 6rem 0;
    text-align: center;
}
#cta h2 { font-size: 2.5rem; margin-bottom: 1rem; }
#cta p { max-width: 600px; margin: 0 auto 2.5rem auto; opacity: 0.8; }
.google-play-badge {
    height: 70px;
    transition: var(--transition-fast);
}
.google-play-badge:hover { transform: scale(1.05); }


/* ==========================================================================
   5. الفوتر (Footer)
   ========================================================================== */
footer {
    background: var(--background-white);
    padding: 4rem 0 2rem 0;
    border-top: 1px solid #e9ecef;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.social-links a {
    color: var(--text-light);
    margin-right: 1.5rem;
    font-weight: 700;
    transition: var(--transition-fast);
}
.social-links a:last-child { margin-right: 0; }
.social-links a:hover { color: var(--primary-green); }

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
    color: var(--text-light);
}


/* ==========================================================================
   6. التصميم المتجاوب (Responsive Design)
   ========================================================================== */

/* --- شاشات اللابتوب الصغيرة والتابلت (أقل من 1200px) --- */
@media (max-width: 1200px) {
    html { font-size: 15px; }
}

/* --- شاشات التابلت (أقل من 992px) --- */
@media (max-width: 992px) {
    html { font-size: 14px; }
    .container { padding: 0 1.5rem; }

    .hero-container { flex-direction: column; text-align: center; }
    .hero-text { order: 2; }
    .hero-image { order: 1; margin-bottom: 2rem; }
    #hero .mockup-frame { max-width: 300px; }

    .feature-item, .feature-item.reverse {
        flex-direction: column;
        text-align: center;
    }
    .feature-item .mockup-frame, .feature-item.reverse .mockup-frame { margin: 0 auto; }
    .feature-item-image { margin-top: 2rem; }
}

/* --- شاشات الموبايل (أقل من 768px) --- */
@media (max-width: 768px) {
    body { line-height: 1.7; }
    
    /* قائمة الموبايل */
    #mobile-menu-icon { display: block; cursor: pointer; z-index: 1001;}
    #mobile-menu-icon .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--text-dark); transition: var(--transition-fast); }
    #mobile-menu-icon.open .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    #mobile-menu-icon.open .bar:nth-child(2) { opacity: 0; }
    #mobile-menu-icon.open .bar:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

    header .nav-button { display: none; }
    header nav ul {
        display: flex; flex-direction: column; position: absolute;
        top: 75px; right: 0; width: 100%;
        background-color: white; box-shadow: var(--shadow-soft);
        transform: translateY(-150%); transition: transform var(--transition-fast); z-index: 999;
    }
    header nav ul.active { transform: translateY(0); }
    header nav ul li { width: 100%; text-align: center; }
    header nav ul li a { display: block; padding: 1.5rem; border-bottom: 1px solid #f0f0f0; }
    header nav ul li a::after { display: none; } /* إخفاء الخط تحت الرابط في الموبايل */

    .section-title h2, #hero h1 { font-size: 2.2rem; }
    
    .footer-content { flex-direction: column; }
    .social-links { margin-top: 1.5rem; }

    /* تصغير حجم إطار الصور للشاشات الصغيرة */
    .slideshow-frame {
        width: 260px;
        height: 562px; /* الحفاظ على نسبة العرض للارتفاع */
    }
}