/* ========================================
   تحسينات خاصة لصفحات التسجيل والتفعيل والدفع
   Auth & Onboarding Mobile Optimization
   ======================================== */

/* ========================================
   صفحة إنشاء الحساب (ClientRegister)
   ======================================== */

@media (max-width: 767px) {
    
    /* Auth Container */
    .auth-container {
        max-width: 100% !important;
        padding: 12px !important;
    }
    
    /* Auth Card */
    .auth-card {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }
    
    /* Auth Header */
    .auth-header {
        padding: 24px 16px !important;
        grid-column: 1 !important;
    }
    
    .auth-header h1 {
        font-size: 20px !important;
    }
    
    .auth-header p {
        font-size: 14px !important;
    }
    
    /* Auth Steps */
    .auth-steps {
        margin-top: 16px !important;
        gap: 8px !important;
    }
    
    .auth-steps .step {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    
    .auth-steps .step .material-icons {
        font-size: 16px !important;
    }
    
    /* Auth Grid - تحويل إلى عمود واحد */
    .auth-grid,
    .row.auth-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* Auth Columns */
    .auth-card > .col,
    .auth-card > div[style*="padding:24px"] {
        padding: 20px 16px !important;
        border-right: none !important;
        border-left: none !important;
    }
    
    /* Content wrapper في auth */
    .content[style*="display:flex"] {
        padding: 12px !important;
        min-height: auto !important;
    }
    
    /* Form Inputs في صفحات Auth */
    .auth-card input[type="text"],
    .auth-card input[type="email"],
    .auth-card input[type="tel"],
    .auth-card input[type="password"],
    .auth-card select {
        min-height: 50px !important;
        font-size: 16px !important;
        padding: 14px !important;
        border-radius: 10px !important;
    }
    
    /* Phone Input Group */
    .auth-card div[style*="display:flex;gap:8px"] {
        flex-direction: row !important;
    }
    
    .auth-card span[style*="min-width:80px"] {
        min-width: 70px !important;
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    /* Checkboxes */
    .auth-card input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Submit Buttons */
    .auth-card .btn[type="submit"],
    .auth-card button[type="submit"] {
        min-height: 52px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        width: 100% !important;
    }
    
    /* Auth Links */
    .auth-card a.btn {
        min-height: 50px !important;
    }
    
    /* Terms & Conditions */
    .auth-card label[style*="cursor:pointer"] {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* ========================================
   صفحة إعداد المؤسسة (OrganizationSetup)
   ======================================== */

@media (max-width: 767px) {
    
    /* Organization Card */
    section.auth-card[style*="max-width:900px"] {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }
    
    /* Header Logo */
    .auth-header img {
        width: 100px !important;
        max-height: 100px !important;
    }
    
    /* Logout Button في الـ Header */
    .auth-header button[style*="position:absolute"] {
        top: 12px !important;
        left: 12px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    .auth-header button span:last-child {
        display: none !important;
    }
    
    /* Organization Form Sections */
    .auth-card h6 {
        font-size: 15px !important;
        margin-bottom: 14px !important;
    }
    
    /* Bootstrap Grid في Organization */
    .auth-card .row {
        margin: 0 !important;
    }
    
    .auth-card .col,
    .auth-card .col-md-6,
    .auth-card .col-md-4,
    .auth-card .col-md-12 {
        padding: 0 !important;
        margin-bottom: 16px !important;
    }
    
    /* Existing Organizations List */
    .auth-card div[style*="display:grid;gap:12px"] {
        grid-template-columns: 1fr !important;
    }
    
    .auth-card button[style*="display:flex;justify-content:space-between"] {
        padding: 14px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .auth-card button[style*="display:flex;justify-content:space-between"] > div:last-child {
        align-self: flex-end !important;
    }
}

/* ========================================
   صفحة اختيار الباقة (PlanSelection)
   ======================================== */

@media (max-width: 767px) {
    
    /* Plan Selection Container */
    div.content[style*="min-height:100vh"] {
        padding: 12px !important;
        min-height: auto !important;
    }
    
    div.content[style*="min-height:100vh"] > div {
        max-width: 100% !important;
    }
    
    /* Plans Grid - Bootstrap */
    .row.g-4 {
        gap: 16px !important;
        margin: 0 !important;
    }
    
    .col-md-6,
    .col-lg-4 {
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Plan Card */
    .card.h-100 {
        height: auto !important;
        margin-bottom: 16px;
    }
    
    .card[style*="border:2px solid"] {
        border-radius: 14px !important;
    }
    
    .card-body[style*="padding:28px"] {
        padding: 20px 16px !important;
    }
    
    /* Plan Icon */
    div[style*="width:64px;height:64px"] {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 10px !important;
    }
    
    div[style*="width:64px;height:64px"] .material-icons {
        font-size: 32px !important;
    }
    
    /* Plan Title */
    .card-title[style*="font-size:22px"] {
        font-size: 19px !important;
    }
    
    /* Plan Price */
    div[style*="background:#f9fafb;padding:16px"] {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }
    
    strong[style*="font-size:28px"] {
        font-size: 24px !important;
    }
    
    strong[style*="font-size:24px"] {
        font-size: 20px !important;
    }
    
    /* Plan Buttons */
    .card .btn[style*="height:48px"] {
        height: 50px !important;
        font-size: 15px !important;
    }
    
    .d-grid.gap-2 {
        gap: 10px !important;
    }
    
    /* Billing Cycle Toggle */
    div[style*="display:flex;gap:8px;justify-content:center"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    div[style*="display:flex;gap:8px;justify-content:center"] button {
        width: 100% !important;
    }
    
    /* Free/Trial Badges */
    div[style*="position:absolute;top:16px;right:16px"] {
        top: 12px !important;
        right: 12px !important;
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
}

/* ========================================
   صفحة الدفع (Payment)
   ======================================== */

@media (max-width: 767px) {
    
    /* Payment Container */
    div.content[style*="min-height:85vh"] {
        padding: 12px !important;
        min-height: auto !important;
    }
    
    /* Payment Card */
    section.auth-card[style*="max-width:700px"] {
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Payment Header */
    .auth-header[style*="padding:32px"] {
        padding: 24px 16px !important;
    }
    
    .auth-header .logo {
        gap: 8px !important;
    }
    
    .auth-header .logo img {
        width: 90px !important;
        max-height: 90px !important;
    }
    
    /* Payment Summary Box */
    div[style*="background:linear-gradient"][style*="border:2px solid #86efac"] {
        padding: 18px 16px !important;
        margin-bottom: 20px !important;
    }
    
    div[style*="background:linear-gradient"][style*="border:2px solid #86efac"] h5 {
        font-size: 16px !important;
        margin-bottom: 14px !important;
    }
    
    /* Summary Items */
    div[style*="display:flex;justify-content:space-between"][style*="padding:12px 0"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    div[style*="display:flex;justify-content:space-between"][style*="padding:12px 0"] span {
        font-size: 14px !important;
    }
    
    /* Total Amount */
    div[style*="font-size:28px"] {
        font-size: 24px !important;
    }
    
    /* Payment Methods */
    div[style*="background:linear-gradient(145deg"] {
        padding: 18px 16px !important;
        margin-bottom: 16px !important;
    }
    
    /* Payment Method Title */
    h6[style*="font-size:17px"] {
        font-size: 15px !important;
    }
    
    /* Payment Buttons */
    div[style*="display:flex;justify-content:center;gap:16px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    div[style*="display:flex;justify-content:center;gap:16px"] .btn {
        width: 100% !important;
    }
    
    /* Bank Transfer Info */
    div[style*="background:#fff"][style*="padding:16px"] {
        padding: 14px !important;
    }
    
    /* Icons in Lists */
    .material-icons[style*="font-size:18px"] {
        font-size: 16px !important;
    }
}

/* ========================================
   صفحة حالة التفعيل (ActivationStatus)
   ======================================== */

@media (max-width: 767px) {
    
    /* Status Card */
    div[style*="max-width:800px"] {
        max-width: 100% !important;
        margin: 12px !important;
    }
    
    /* Status Icons */
    .material-icons[style*="font-size:80px"],
    .material-icons[style*="font-size:72px"] {
        font-size: 64px !important;
    }
    
    /* Status Title */
    h3[style*="font-size:28px"],
    h3[style*="font-size:24px"] {
        font-size: 20px !important;
    }
    
    /* Status Actions */
    div[style*="display:flex;gap:12px;justify-content:center"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    div[style*="display:flex;gap:12px;justify-content:center"] .btn,
    div[style*="display:flex;gap:12px;justify-content:center"] a {
        width: 100% !important;
    }
}

/* ========================================
   صفحة التحقق OTP
   ======================================== */

@media (max-width: 767px) {
    
    /* OTP Container */
    .otp-container {
        padding: 12px !important;
    }
    
    /* OTP Inputs */
    .otp-inputs {
        gap: 8px !important;
    }
    
    input.otp-input,
    input[style*="width:50px"] {
        width: 45px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
    
    /* Resend Button */
    .resend-button {
        margin-top: 16px !important;
    }
}

/* ========================================
   GENERAL AUTH/ONBOARDING IMPROVEMENTS
   ======================================== */

@media (max-width: 767px) {
    
    /* All Alerts in Auth Pages */
    .auth-card .alert {
        padding: 14px !important;
        font-size: 14px !important;
        margin: 12px !important;
        border-radius: 10px !important;
    }
    
    /* All Buttons in Auth Pages */
    .auth-card .btn,
    .auth-card button {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
    }
    
    /* All Labels */
    .auth-card .form-label,
    .auth-card label {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
    }
    
    /* All Hints */
    .auth-card .form-hint,
    .auth-card small {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    /* Remove grid-column spans on mobile */
    .auth-card [style*="grid-column:1 / -1"] {
        grid-column: 1 !important;
    }
    
    /* Flexbox containers */
    .auth-card div[style*="display:flex"] {
        flex-wrap: wrap !important;
    }
    
    /* Gap adjustments */
    .auth-card div[style*="gap:12px"],
    .auth-card div[style*="gap:16px"],
    .auth-card div[style*="gap:20px"] {
        gap: 12px !important;
    }
    
    /* Padding adjustments */
    .auth-card div[style*="padding:24px"],
    .auth-card div[style*="padding:32px"] {
        padding: 18px 16px !important;
    }
    
    /* Margin adjustments */
    .auth-card div[style*="margin-bottom:24px"],
    .auth-card div[style*="margin-bottom:28px"] {
        margin-bottom: 18px !important;
    }
    
    /* Logo */
    .auth-header .logo,
    .logo {
        gap: 8px !important;
    }
    
    .auth-header img,
    .logo img {
        width: 90px !important;
        max-height: 90px !important;
    }
    
    /* Material Icons Size */
    .auth-card .material-icons[style*="font-size:48px"],
    .auth-card .material-icons[style*="font-size:64px"] {
        font-size: 48px !important;
    }
    
    .auth-card .material-icons[style*="font-size:24px"] {
        font-size: 20px !important;
    }
    
    /* Font Sizes */
    .auth-card h3 {
        font-size: 17px !important;
    }
    
    .auth-card h5 {
        font-size: 16px !important;
    }
    
    .auth-card h6 {
        font-size: 15px !important;
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */

@media (max-height: 600px) and (orientation: landscape) {
    
    .auth-header {
        padding: 16px 12px !important;
    }
    
    .auth-header h1 {
        font-size: 18px !important;
    }
    
    .auth-header .logo img {
        width: 70px !important;
        max-height: 70px !important;
    }
    
    .auth-card {
        max-height: 95vh !important;
        overflow-y: auto !important;
    }
}

/* ========================================
   صفحة نتيجة الدفع (PaymentResult)
   ======================================== */

@media (max-width: 767px) {
    
    /* Success/Error Icon Circle */
    div[style*="width:120px;height:120px"][style*="border-radius:50%"] {
        width: 100px !important;
        height: 100px !important;
        margin-bottom: 20px !important;
    }
    
    div[style*="width:120px;height:120px"] .material-icons {
        font-size: 60px !important;
    }
    
    /* Result Title */
    h3[style*="font-size:28px"] {
        font-size: 22px !important;
    }
    
    /* Result Description */
    div[style*="padding:48px 24px"] {
        padding: 24px 16px !important;
    }
    
    /* Payment Details Box */
    div[style*="background:linear-gradient(135deg, #f0fdf4"] {
        padding: 18px 14px !important;
    }
    
    /* Detail Rows */
    div[style*="display:flex;justify-content:space-between;padding:10px 0"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px 0 !important;
    }
    
    /* Action Buttons در Payment Result */
    div[style*="display:flex;gap:12px;justify-content:center"] {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }
    
    div[style*="display:flex;gap:12px;justify-content:center"] .btn,
    div[style*="display:flex;gap:12px;justify-content:center"] button {
        width: 100% !important;
    }
    
    /* Main Dashboard Button */
    button[style*="height:58px"] {
        height: 52px !important;
        font-size: 16px !important;
        width: 100% !important;
        padding: 0 20px !important;
    }
    
    /* Progress Indicator */
    div[style*="padding:12px;background:#fef3c7"] {
        padding: 10px !important;
        margin-top: 12px !important;
    }
    
    /* Spinner */
    .spinner-border[style*="width:64px"] {
        width: 56px !important;
        height: 56px !important;
    }
}

/* ========================================
   FIX INLINE STYLES على الجوال
   ======================================== */

@media (max-width: 767px) {
    
    /* Override any inline 2-column grids */
    [style*="grid-template-columns:1.1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="display:grid"][style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Override flex space-between to column */
    [style*="display:flex;justify-content:space-between"][style*="padding:12px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    /* تأكيد أن الأزرار في نهاية الصفحة واضحة */
    .auth-card > div:last-child {
        padding: 16px !important;
        background: #f9fafb;
        border-top: 2px solid #e5e7eb;
        margin-top: 20px;
    }
}