/* Mobile-First Responsive Fixes for Luxbyte - Enhanced */

/* قاعدة عامة للموبايل أولاً */
:root {
    --page-padding: 16px;
    --card-max-width: 100%;
    --sidebar-width: 100%;
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;
}

/* إصلاح viewport للهواتف المحمولة */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* إصلاح التخطيط العام */
.page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: var(--page-padding);
    min-height: 100vh;
    box-sizing: border-box;
}

/* إصلاح الكارت */
.card, .lx-card {
    width: 100%;
    max-width: var(--card-max-width);
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* تحسينات البطاقات العصري */
.lx-card {
    margin-bottom: 16px;
}

.lx-card__actions {
    flex-direction: column;
    gap: 8px;
}

.lx-btn {
    width: 100%;
    justify-content: center;
}

/* إصلاح السايدبار/الخطوات */
.sidebar,
.steps,
.progress-tabs {
    position: static;
    width: 100%;
    max-width: var(--card-max-width);
    margin: 0 auto;
    box-sizing: border-box;
}

/* إصلاح الخلفية */
.hero-bg {
    position: fixed;
    inset: 0;
    background: url("../assets/images/backgrounds/screen-1.png") center/cover no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* إزالة الخلفية من body */
body {
    background: none !important;
}

/* إصلاح اللوجو/الخاتم الذهبي */
.logo-ring,
#bg-corner-logo {
    max-width: clamp(180px, 40vw, 320px);
    height: auto;
    display: block;
    margin: 24px auto;
    position: relative;
    transform: none;
    opacity: 0.1;
    z-index: -1;
}

/* إصلاح الحقول */
.form-section {
    padding: 12px;
    border-radius: 12px;
    backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.95);
    margin-bottom: 16px;
}

/* إصلاح العناصر الثابتة */
.site-header {
    position: relative !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* إصلاح المحتوى الرئيسي */
main {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

.container {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* إصلاح الكروت */
.card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

/* إصلاح التابات */
.tab-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.tab {
    width: 100%;
    min-width: auto !important;
    padding: 12px 16px;
    text-align: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #333;
    transition: all 0.3s ease;
}

.tab.active {
    background: rgba(102, 126, 234, 0.2);
    border-color: #667eea;
    color: #667eea;
}

.tab:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: none;
}

/* إصلاح الأزرار */
.btn {
    width: 100%;
    max-width: 300px;
    margin: 8px auto;
    display: block;
    box-sizing: border-box;
}

/* إصلاح النماذج */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    font-size: 16px;
}

/* إصلاح العناوين */
h1, h2, h3, h4, h5, h6 {
    text-align: center;
    margin-bottom: 16px;
}

/* إصلاح النصوص */
p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* نقاط التحول للديسكتوب */
@media (min-width: 992px) {
    .page {
        grid-template-columns: 1fr 360px;
        align-items: start;
        gap: 24px;
    }

    .sidebar,
    .steps,
    .progress-tabs {
        position: sticky;
        top: 24px;
        max-height: calc(100dvh - 48px);
        overflow: auto;
        width: 360px;
    }

    .tab-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tab {
        width: auto;
        min-width: 110px;
        flex: 1;
    }

    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .btn {
        width: auto;
        display: inline-block;
        margin: 8px;
    }
}

/* إصلاحات إضافية للشاشات الصغيرة */
@media (max-width: 480px) {
    :root {
        --page-padding: 8px;
    }

    .card {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 15px;
    }

    .form-control {
        font-size: 16px; /* منع التكبير في iOS */
        padding: 14px 16px;
        border-radius: 8px;
    }

    .tab {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* إصلاح الأزرار للهواتف الصغيرة */
    .btn {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px; /* الحد الأدنى للمس */
    }

    /* إصلاح العناوين */
    h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    h2 {
        font-size: 20px;
        line-height: 1.3;
    }

    /* إصلاح النماذج */
    .form-group {
        margin-bottom: 20px;
    }

    /* إصلاح الكروت */
    .card-header {
        padding: 20px 16px;
    }

    .card-body {
        padding: 16px;
    }

    /* إصلاحات إضافية للبطاقات العصري */
    .lx-card {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 15px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .lx-card__actions {
        flex-direction: column;
        gap: 8px;
    }

    .lx-btn {
        width: 100%;
        margin: 4px 0;
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px;
    }

    /* إصلاح الحاويات */
    .container {
        padding: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* إصلاح الشبكات */
    .lx-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 8px;
    }

    /* إصلاح النماذج */
    .form-row {
        flex-direction: column;
        gap: 16px;
    }

    /* إصلاح الحقول */
    .form-group label {
        font-size: 14px;
        margin-bottom: 8px;
    }

    /* إصلاح الصور */
    .pharmacy-icon img,
    .restaurant-icon img,
    .supermarket-icon img,
    .clinic-icon img,
    .courier-icon img,
    .master-driver-icon img {
        width: 40px;
        height: 40px;
    }

    /* إصلاح الهيدر */
    .site-header {
        padding: 10px;
    }

    .site-header .brand {
        font-size: 18px;
    }

    /* إصلاح التنقل */
    .navbar-container {
        padding: 8px;
    }

    .navbar-content {
        flex-direction: column;
        gap: 8px;
    }

    /* إصلاح الأيقونات */
    .fa-2x {
        font-size: 1.5em !important;
    }

    .fa-3x {
        font-size: 2em !important;
    }
}

/* إصلاحات للشاشات المتوسطة */
@media (min-width: 481px) and (max-width: 767px) {
    .card, .lx-card {
        max-width: 90%;
        margin: 0 auto;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .btn, .lx-btn {
        max-width: 300px;
        margin: 10px auto;
    }

    .lx-card__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .lx-btn {
        flex: 1;
        min-width: 120px;
    }
}

/* إصلاحات للشاشات الكبيرة */
@media (min-width: 768px) {
    .lx-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .lx-card__actions {
        flex-direction: row;
        justify-content: center;
    }

    .lx-btn {
        flex: 0 1 auto;
        min-width: 140px;
    }
}

/* إصلاحات للشاشات الكبيرة جداً */
@media (min-width: 1100px) {
    .lx-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* إصلاح مشاكل RTL */
[dir="rtl"] .tab {
    text-align: right;
}

[dir="rtl"] .form-control {
    text-align: right;
}

/* إصلاح مشاكل z-index */
.hero-bg {
    z-index: -1;
}

.card,
.form-section,
.progress-tabs {
    z-index: 1;
}

.site-header {
    z-index: 10;
}

/* إصلاح مشاكل overflow */
body, html {
    overflow-x: hidden;
}

.container {
    overflow-x: hidden;
}

/* إصلاح مشاكل العرض */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}