/* ==========================================
   رفع مشکلات نسخه موبایل
   Mobile Responsive Fixes
   ========================================== */

/* 1. فیکس دکمه‌های ورود و ثبت‌نام - Login/Register Buttons Fix */
@media (max-width: 640px) {
    header .flex.items-center.space-x-4,
    header .flex.items-center.space-x-4.space-x-reverse {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    header .flex.items-center.space-x-4 a,
    header .flex.items-center.space-x-4.space-x-reverse a {
        font-size: 14px !important;
        padding: 8px 16px !important;
        white-space: nowrap !important;
        min-width: auto !important;
        flex: 0 1 auto !important;
    }
    
    /* دکمه داشبورد */
    header .flex.items-center.space-x-4 a.bg-gradient-to-r,
    header .flex.items-center.space-x-4.space-x-reverse a.bg-gradient-to-r {
        padding: 8px 20px !important;
    }
}

/* 2. فیکس متن اصلی - Hero Title Fix */
@media (max-width: 768px) {
    #hero h2 {
        font-size: 1.75rem !important; /* 28px */
        line-height: 1.3 !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
    
    #hero h2 span.bg-gradient-to-r {
        display: inline !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    #hero h2 {
        font-size: 1.5rem !important; /* 24px */
        line-height: 1.4 !important;
    }
}

/* ==========================================
   3. فیکس دکمه‌های Hero (شروع رایگان و امکانات)
   Hero Buttons Fix - Stack Vertically
   ========================================== */
@media (max-width: 640px) {
    #hero .flex.justify-center.space-x-4,
    #hero .flex.justify-center.space-x-4.space-x-reverse,
    #hero .flex.justify-center.space-x-4.mb-8,
    #hero .flex.justify-center.space-x-4.space-x-reverse.mb-8 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    #hero .flex.justify-center a,
    #hero .flex.justify-center.space-x-4 a,
    #hero .flex.justify-center.space-x-4.space-x-reverse a {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
    }
    
    /* حذف space-x که باعث shift می‌شه */
    #hero .flex.justify-center.space-x-4 > *,
    #hero .flex.justify-center.space-x-4.space-x-reverse > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================
   4. فیکس آیکون‌های امکانات - Features Layout Fix
   Icon + Title in one line, Description below
   ========================================== */
@media (max-width: 768px) {
    #features .glass-effect.rounded-xl {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    /* Container for Icon + Title */
    #features .glass-effect.rounded-xl > div:first-child {
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
        padding: 8px !important;
        width: auto !important;
        height: auto !important;
    }
    
    #features .glass-effect.rounded-xl > div:first-child i {
        font-size: 1.25rem !important;
    }
    
    /* Move title next to icon */
    #features .glass-effect.rounded-xl h3 {
        display: inline-block !important;
        font-size: 1rem !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        position: relative !important;
        top: -8px !important;
    }
    
    /* Description on new line */
    #features .glass-effect.rounded-xl p {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        width: 100% !important;
        margin-top: -8px !important;
    }
    
    /* Alternative layout structure */
    #features .glass-effect.rounded-xl {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 8px 12px !important;
        align-items: start !important;
    }
    
    #features .glass-effect.rounded-xl > div:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding: 10px !important;
        width: 48px !important;
        height: 48px !important;
        flex-shrink: 0 !important;
    }
    
    #features .glass-effect.rounded-xl h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin-bottom: 0 !important;
        top: 0 !important;
    }
    
    #features .glass-effect.rounded-xl p {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin-top: 0 !important;
    }
}

/* 5. فیکس رنگ فوتر - Footer Text Color Fix */
@media (max-width: 640px) {
    footer .glass-effect a,
    footer .glass-effect span {
        color: #ffffff !important;
    }
    
    footer .glass-effect .grid a {
        color: #ffffff !important;
    }
    
    footer .glass-effect i {
        opacity: 0.9 !important;
    }
}

/* فیکس‌های اضافی برای بهبود تجربه موبایل */
@media (max-width: 640px) {
    /* فاصله بهتر برای هدر */
    header.glass-effect {
        padding: 12px 16px !important;
    }
    
    /* فاصله بهتر برای لوگو و عنوان */
    header .flex.items-center.space-x-4:first-child,
    header .flex.items-center.space-x-4.space-x-reverse:first-child {
        gap: 8px !important;
    }
    
    header .flex.items-center.space-x-4:first-child .bg-gradient-to-r,
    header .flex.items-center.space-x-4.space-x-reverse:first-child .bg-gradient-to-r {
        width: 48px !important;
        height: 48px !important;
    }
    
    header h1 {
        font-size: 1.25rem !important;
    }
    
    header p.text-indigo-200 {
        font-size: 0.75rem !important;
    }
}

/* فیکس برای تبلت */
@media (min-width: 641px) and (max-width: 1024px) {
    #features .glass-effect.rounded-xl {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 12px !important;
        align-items: start !important;
    }
    
    #features .glass-effect.rounded-xl > div:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }
    
    #features .glass-effect.rounded-xl h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
    }
    
    #features .glass-effect.rounded-xl p {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }
}