/* Massarat — Unified Responsive CSS (desktop + mobile)  */
/* ------------------------------------------------------------------ */
/* Design tokens */
:root{
  --primary:#5b6cff;
  --primary-ink:#1f2a44;
  --muted:#63708a;
  --bg:#e9ecef;
  --card:#ffffff;
  --border:#d6dde7;
  --radius:20px;
  --shadow:0 18px 36px rgba(31,42,68,.08);
}

/* Base */
html[dir="rtl"] body, body{
  background:var(--bg);
  color:var(--primary-ink);
  font-family:"Almarai",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;
  padding-bottom: env(safe-area-inset-bottom, 0); /* safe area for mobile */
}

/* Wrapper (header/body/footer) */
.auth-wrap{
  min-height:calc(var(--vh, 1vh) * 100);
  display:grid;
  grid-template-rows:auto 1fr auto; /* header / body / footer */
  position:relative;
  max-width:1180px;
  margin-inline:auto;
  padding:24px 16px;
  overflow:hidden;
}

/* Decorative patterns */
.pattern{position:absolute; inset:0; pointer-events:none;}
.pattern-left{
  background:repeating-linear-gradient(135deg, rgba(91,108,255,.08) 0 14px, transparent 14px 46px);
  clip-path:polygon(0 0, 21% 0, 8% 50%, 21% 100%, 0 100%);
  opacity:.35;
}
.pattern-right{
  background:repeating-linear-gradient(-45deg, rgba(31,42,68,.06) 0 12px, transparent 12px 40px);
  clip-path:polygon(79% 0, 100% 0, 100% 100%, 79% 100%, 92% 50%);
  opacity:.25;
}

/* Header */
.auth-header{display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:2;}
.logo-stack{display:flex; align-items:center; gap:10px; flex-direction:row-reverse;}
.brand-logo{height:64px; width:auto; object-fit:contain; border-radius:12px; background:#fff; border:1px solid var(--border); padding:8px; box-shadow:0 6px 12px rgba(31,42,68,.08);}
.brand-logo.client{height:62px;}

/* Titles */
.titles{position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; z-index:2; text-align:center;}
.titles h1{margin:0; font-size:24px; font-weight:800; letter-spacing:.2px; color:var(--primary-ink);}
.titles h2{margin:4px 0 0; font-size:16px; color:var(--muted); letter-spacing:.8px;}

/* Footer */
.foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:13px; padding-top:22px; border-top:1px dashed var(--border);}
.date{opacity:.95}

/* Body */
.auth-body{display:grid; place-items:center; padding:20px 0; position:relative; z-index:2;}

/* CTA grid (home) */
.cta-grid{
  display:flex; flex-wrap:wrap; gap:16px 18px;
  justify-content:center; align-items:center; align-content:center;
  min-height:60vh; width:min(980px, 100%); margin-inline:auto; text-align:center;
}
.cta{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-width:260px; padding:14px 18px; border-radius:14px; background:var(--card);
  border:1px solid var(--border); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.cta .ico{width:42px; height:42px; border-radius:12px; border:1px solid var(--border); display:grid; place-items:center; color:var(--primary-ink); background:#f6f8fb;}
.cta .ico svg{width:22px; height:22px;}
.cta .text{white-space:normal; line-height:1.4;}
.cta .go{margin-inline-start:auto; font-size:24px; color:var(--primary); line-height:1;}
.cta:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(31,42,68,.12); background:#fbfcff;}
.cta-blue{border-color:rgba(91,108,255,.45);} .cta-green{border-color:rgba(16,185,129,.35);} .cta-orange{border-color:rgba(245,158,11,.40);} .cta-gray{border-color:rgba(31,42,68,.18);}

/* Login card */
.login-box{width:100%; max-width:560px; margin:18px auto 0;}
#LoginformDiv .input-group{border-radius:14px; overflow:hidden;}
#LoginformDiv .form-control, #LoginformDiv .input-group-text{height:44px;}
.login-box .btn{min-height:44px;}
.login-box .btn + .btn{margin-inline-start:8px;}

/* ===== Header Icons (modular, no duplicates) ===== */
/* Stop any auto-injected icons before header */
#LoginHeader::before,
#LoginHeader .h4#header1::before{
  content:none !important; background:none !important;
  -webkit-mask:none !important; mask:none !important;
}
/* Hide stray FA icons placed directly inside header1 (keep only .hdrIcon system) */
#LoginHeader .h4#header1 > i,
#LoginHeader .h4#header1 > .fa,
#LoginHeader .h4#header1 > .fas,
#LoginHeader .h4#header1 > .far{ display:none !important; }

/* Capsule base */
.hdrIcon{--size:28px; --radius:8px; width:var(--size); height:var(--size); display:inline-grid; place-items:center; color:var(--primary); background:#eef3ff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 3px 8px rgba(91,108,255,.12);}
.hdrIcon::before{content:""; display:block; width:60%; height:60%; background:currentColor; -webkit-mask:var(--icon) no-repeat center / contain; mask:var(--icon) no-repeat center / contain;}
.icon-warehouse{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10L12 5l9 5v9H3z'/%3E%3Crect x='10' y='13' width='4' height='6'/%3E%3C/svg%3E");}
.icon-hr{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0z'/%3E%3C/svg%3E");}
.icon-sadad{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='12' rx='3'/%3E%3Crect x='6' y='13' width='5' height='2'/%3E%3Crect x='14' y='13' width='5' height='2'/%3E%3C/svg%3E");}

/* Title row alignment */
#LoginHeader .h4#header1{margin:0; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:800; font-size:clamp(20px, 2.4vw, 24px); line-height:1.25;}
#header1 .headerIcons{display:flex !important; align-items:center; gap:6px;}
#header1 .hdrIcon{display:inline-grid !important;}
html[dir="rtl"] #LoginHeader .h4#header1{flex-direction:row-reverse;}

/* reCAPTCHA */
.col-12.just #dvCaptcha{display:inline-block;}

/* Auth inside (grid-2) */
.auth-card .bd .grid-2{display:grid; grid-template-columns:1fr; gap:12px;}
@media (min-width:560px){ .auth-card .bd .grid-2{grid-template-columns:1fr 1fr;}}

/* Loader */
#ddLoader{position:fixed; inset:0; background:rgba(0,0,0,.15); display:none; align-items:center; justify-content:center; z-index:9999;}
#ddLoader .spinner{width:54px; height:54px; border:4px solid #fff; border-top-color:var(--primary); border-radius:50%; animation:spin .9s linear infinite; box-shadow:0 6px 16px rgba(31,42,68,.2);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------------- Mobile tweaks ---------------- */
@media (max-width:600px){
  .titles{position:static; transform:none; margin-inline:auto; text-align:center;}
  #LoginHeader .h4#header1{font-size:clamp(18px, 5.5vw, 22px);}
  #header1 .hdrIcon{--size:24px;}
}
@media (max-width:480px){
  .pattern-left,.pattern-right{opacity:.12;}
}
@media (max-width:430px){
  .auth-header{ gap:8px; padding-bottom:6px; }
  .brand-logo{ height:48px; padding:6px; border-radius:10px; }
  .login-box{ width:100%; max-width:560px; margin:10px auto 0; }

  /* Buttons: full width on narrow screens */
  .login-box .btn{ width:100%; min-height:44px; }
  .login-box .btn + .btn{ margin-inline-start:0; margin-top:8px; }
}
@media (max-width:360px){
  /* Prevent overflow by recaptcha */
  #dvCaptcha{ transform: scale(.88); transform-origin:center; }
  #LoginHeader .h4#header1{ font-size: clamp(17px, 5.2vw, 20px); }
  #header1 .hdrIcon{ --size:22px; }
}

/* Accessibility: avoid iOS zoom on focus */
input, select, textarea{font-size:16px;}
/* ===== Mobile header layout + stacked CTAs ===== */

/* ترتيب الهيدر على الجوال: العنوان في المنتصف ثم الشعارات في سطر مستقل */
@media (max-width: 600px) {
    .auth-header {
        display: grid;
        grid-template-areas:
            "title"
            "logos";
        row-gap: 10px;
        justify-items: center;
        align-items: center;
        padding-bottom: 6px;
    }

    /* العنوان في الوسط بلا تموضع مطلق */
    .titles {
        grid-area: title;
        position: static !important;
        transform: none !important;
        margin: 0 auto;
        text-align: center;
    }

        .titles h1 {
            font-size: clamp(18px, 5.6vw, 21px);
        }

        .titles h2 {
            font-size: 12px;
            letter-spacing: .4px;
            margin-top: 2px;
        }

    /* صف الشعارات تحت العنوان وبالوسط */
    .logo-stack {
        grid-area: logos;
        justify-content: center;
        gap: 10px;
        flex-direction: row-reverse; /* في RTL يرتّب: شعار الشركة ثم العميل */
    }

    .brand-logo {
        height: 52px;
        padding: 6px;
        border-radius: 10px;
    }

    /* الأزرار تتكدّس تحت بعض وبعرض مناسب */
    .cta-grid {
        flex-direction: column;
        align-items: stretch; /* يجعل الزر بعرض الحاوية */
        align-content: center;
        min-height: auto;
        width: 100%;
        max-width: 520px; /* حد أقصى للعرض */
        margin-inline: auto;
        gap: 12px;
        padding-inline: 8px;
    }

    .cta {
        width: 100%;
        max-width: 520px;
        padding: 14px 16px;
        border-radius: 14px;
        justify-content: space-between;
    }

        .cta .ico {
            width: 40px;
            height: 40px;
            border-radius: 12px;
        }

            .cta .ico svg {
                width: 22px;
                height: 22px;
            }

        .cta .go {
            margin-inline-start: auto;
            font-size: 22px;
        }
}

/* هواتف أصغر جداً */
@media (max-width: 360px) {
    .titles h2 {
        display: none;
    }
    /* توفير مساحة رأسية */
    .brand-logo {
        height: 48px;
    }
}
/* ===== Desktop header: move logos to the right, keep title centered ===== */
/* ثبت الشعارات يمين الهيدر دائماً على الديسكتوب */
@media (min-width: 768px) {
    .auth-header {
        position: relative;
    }

        .auth-header .logo-stack {
            position: absolute;
            right: 24px; /* بدل inset-inline-end */
            top: 6px;
            display: flex;
            gap: 12px;
            flex-direction: row-reverse; /* يظهر شعار الشركة ثم العميل */
            z-index: 3;
        }

        /* أبقِ العنوان في منتصف الهيدر */
        .auth-header .titles {
            position: static !important;
            transform: none !important;
            margin-inline: auto;
            text-align: center;
        }

        /* (اختياري) حجم أخف للبطاقات */
        .auth-header .brand-logo {
            height: 56px;
            padding: 6px;
            border-radius: 10px;
        }
}
/* == تحسين أحجام الأزرار والأيقونات بشكل احترافي == */

/* قاعدة عامة (مقاسات لمسية كحد أدنى) */
.cta {
    min-height: 56px; /* لمس مريح */
    padding: 16px 20px;
    border-radius: 16px;
}

    .cta .ico {
        width: 44px;
        height: 44px; /* صندوق الأيقونة */
        border-radius: 14px;
    }

        .cta .ico svg { /* حجم الرمز داخل الصندوق */
            width: 24px;
            height: 24px;
        }

    .cta .text {
        font-size: 15.5px;
    }

    .cta .go {
        font-size: 24px;
    }

/* زِد الفراغ بين البطاقات قليلاً */
.cta-grid {
    gap: 18px 22px;
}

/* كبّر أيقونات الهيدر قليلاً */
#header1 .hdrIcon {
    --size: 30px;
}

/* تحسينات للديسكتوب (شاشات ≥ 992px) */
@media (min-width: 992px) {
    .cta {
        min-width: 340px; /* عرض أجمل للعنوان */
        min-height: 58px;
        padding: 18px 22px;
        border-radius: 18px;
    }

        .cta .ico {
            width: 48px;
            height: 48px;
            border-radius: 14px;
        }

            .cta .ico svg {
                width: 26px;
                height: 26px;
            }

        .cta .text {
            font-size: 16.5px;
        }

        .cta .go {
            font-size: 26px;
        }

    #header1 .hdrIcon {
        --size: 32px;
    }
}

/* شاشات كبيرة جدًا (≥ 1366px): لمسة فخامة خفيفة */
@media (min-width: 1366px) {
    .cta {
        min-width: 360px;
        min-height: 60px;
        padding: 20px 24px;
        border-radius: 20px;
    }

        .cta .ico {
            width: 52px;
            height: 52px;
        }

            .cta .ico svg {
                width: 28px;
                height: 28px;
            }

        .cta .text {
            font-size: 17px;
        }
}

/* الجوال يبقى مكدَّس وبعرض كامل – فقط نتأكد من الارتفاع */
@media (max-width: 600px) {
    .cta {
        width: 100%;
        min-height: 56px;
    }

        .cta .ico {
            width: 44px;
            height: 44px;
        }

            .cta .ico svg {
                width: 24px;
                height: 24px;
            }

        .cta .text {
            font-size: 15.5px;
        }
}
.cta:focus-visible {
    outline: 3px solid rgba(91,108,255,.35);
    outline-offset: 3px;
    border-radius: 18px;
}
.cta {
    transition: transform .18s ease, box-shadow .18s ease;
}

    .cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(31,42,68,.12);
    }

@media (prefers-reduced-motion: reduce) {
    .cta {
        transition: none;
    }

        .cta:hover {
            transform: none;
        }
}
/* اجعل كروت تسجيل الدخول حاويات مرجعية للتموضع */
.login-box .card,
#Auth_2 .card,
#Jawwal_Miss .card {
    position: relative;
    overflow: hidden; /* يمنع بروز أي عنصر خارج الكارت */
}

/* غطاء اللودر فوق الكارت فقط (لا يغطي الشاشة) */
#ddLoader,
#OTPLoader {
    position: absolute; /* داخل الكارت */
    inset: 0; /* top/right/bottom/left = 0 */
    background: rgba(233,236,239,.65); /* ضباب خفيف */
    backdrop-filter: blur(2px);
    border-radius: 18px; /* طابق زاوية الكارت */
    z-index: 20;
    pointer-events: all; /* يمنع النقر أثناء التحميل */
}

    /* تمركز أيقونة اللودر في قلب الكارت */
    #ddLoader i,
    #OTPLoader i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 36px; /* حجم واضح */
        color: var(--primary);
        text-shadow: 0 8px 20px rgba(31,42,68,.25);
    }

    /* في حال لديك Overlay عام سابق يغطي الشاشة كلها—عطّله */
    #ddLoader.overlay,
    #OTPLoader.overlay {
        position: absolute !important;
    }
/* سبينر دائري خفيف */
.msr-spin {
    width: 56px;
    height: 56px;
    border: 4px solid #fff;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: msr-rot .9s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 6px 16px rgba(31,42,68,.20);
}

@keyframes msr-rot {
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}
/* نفس عنصر overlay الحالي */
#ddLoader, #OTPLoader{
  opacity: 0;
  transition: opacity .18s ease;
}
#ddLoader.is-visible, #OTPLoader.is-visible{ opacity: 1; }

/* Loader Fix — تمركز اللودر داخل الكارت ومنع خروجه */

/* 1) اجعل الكارت مرجعًا للتموضع */
.login-box .card,
#Auth_2 .card,
#Jawwal_Miss .card {
    position: relative;
    overflow: hidden; /* يمنع بروز أي عنصر خارج الكارت */
}

/* 2) الغطاء يغطي الكارت فقط وليس الصفحة كلها */
#ddLoader,
#OTPLoader {
    position: absolute !important; /* يتغلب على أي .overlay قديمة */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; /* inset:0 */
    background: rgba(233,236,239,.65);
    backdrop-filter: blur(2px);
    border-radius: 18px; /* طابِق زاوية الكارت لديك */
    z-index: 50;
    pointer-events: all; /* يمنع النقر أثناء التحميل */
}

    /* 3) تمركز أيقونة FA حتى لو عليها faa-spin (بدون translate) */
    #ddLoader i,
    #OTPLoader i {
        position: absolute;
        width: 36px;
        height: 36px;
        top: calc(50% - 18px);
        left: calc(50% - 18px);
        line-height: 36px;
        font-size: 36px;
        color: var(--primary, #5b6cff);
        text-shadow: 0 8px 20px rgba(31,42,68,.25);
    }
/* === Massarat size uplift — logos + title (2025‑08‑14) === */
/* Desktop / default */
.brand-logo {
    height: 80px; /* كان 64px */
    padding: 10px; /* اتزان بصري مع الإطار */
}

    .brand-logo.client {
        height: 76px; /* كان 62px */
    }

/* تأكيد قياسات الديسكتوب إذا سبق ضبطها 56px داخل @media (min-width:768px) */
@media (min-width: 768px) {
    .auth-header .brand-logo {
        height: 80px;
    }

        .auth-header .brand-logo.client {
            height: 76px;
        }
}

/* عنوان الموقع */
.titles h1 {
    font-size: clamp(26px, 2.6vw, 32px); /* كان 24px */
    letter-spacing: .25px;
}

/* تحسين عنوان الموبايل المتوسط */
@media (max-width: 600px) {
    .titles h1 {
        font-size: clamp(22px, 6vw, 26px); /* كان ~18–22px */
    }
}

/* موبايل صغير جدًا — تكبير الشعار وتخفيف العنوان قليلًا */
@media (max-width: 430px) {
    .brand-logo {
        height: 60px !important;
    }
    /* كان 48/52px */
    .titles h1 {
        font-size: clamp(20px, 6.2vw, 24px) !important;
    }
}
/* === Center the auth card perfectly on mobile === */

/* اجعل منطقة المحتوى تفرض التوسيط أفقياً ورأسياً */
.auth-body {
    display: flex; /* كان grid مسموح – flex أدق مع البطاقات */
    justify-content: center; /* توسيط أفقي */
    align-items: flex-start; /* ارفع البطاقة للأعلى قليلاً */
    padding-top: 10px; /* مسافة لطيفة تحت الهيدر */
}

/* حاوية البطاقة */
.login-box {
    width: 100%;
    max-width: 560px;
    margin-inline: auto; /* توسيط منطقي في RTL/LTR */
    padding-inline: 12px; /* تنفيس من الحواف على الشاشات الضيقة */
    box-sizing: border-box;
}

    /* البطاقة نفسها: ألغِ أي انحراف يسار/يمين */
    .login-box .card {
        width: min(520px, 100%); /* قياس واقعي على الجوال */
        margin-inline: auto; /* أهم سطر للتوسيط */
        float: none !important; /* إن وُجد float من ثيمات قديمة */
    }

/* لو في أعمدة Bootstrap تؤثر على التموضع */
@media (max-width: 600px) {
    .login-box .row,
    .login-box .col-12,
    .login-box .col-md-12 {
        margin: 0 auto !important;
        float: none !important;
    }
}
/* === تحسينات الشعار والعنوان وتوسيط الكارت — 2025-08-14 === */

/* تكبير الشعارين */
.brand-logo {
    height: 80px; /* كان 64px */
    padding: 10px;
}

    .brand-logo.client {
        height: 76px; /* كان 62px */
    }

/* تكبير عنوان الموقع */
.titles h1 {
    font-size: clamp(26px, 2.6vw, 32px); /* كان 24px */
    letter-spacing: .25px;
}

/* تكبير عنوان على الجوال المتوسط */
@media (max-width: 600px) {
    .titles h1 {
        font-size: clamp(22px, 6vw, 26px);
    }
}

/* تكبير الشعار والعنوان على الشاشات الصغيرة جدًا */
@media (max-width: 430px) {
    .brand-logo {
        height: 60px !important; /* كان 48px */
    }

    .titles h1 {
        font-size: clamp(20px, 6.2vw, 24px) !important;
    }
}

/* معالجة مشكلة ميل الكارت على الجوال */
@media (max-width: 600px) {
    .login-box {
        padding-inline: 12px; /* مسافة من الجانبين */
        display: flex;
        justify-content: center; /* تمركز الكارت أفقيًا */
    }

        .login-box .card {
            margin-inline: auto; /* تمركز الكارت نفسه */
            width: 100%;
            max-width: 100%;
        }
}
/* === Fix card alignment on mobile (center it) === */
@media (max-width: 600px) {
    .auth-wrap .auth-body {
        display: flex;
        justify-content: center; /* توسيط أفقي */
        padding-inline: 16px; /* مسافة متساوية يمين ويسار */
        box-sizing: border-box;
    }

    .auth-wrap .login-box {
        width: 100%;
        max-width: 560px;
        margin-inline: auto;
        padding-inline: 0; /* نخلي المسافة للحاوية الأم */
        display: flex;
        justify-content: center;
    }

        .auth-wrap .login-box .card.card-outline.card-primary {
            width: 100%;
            max-width: 100%;
            margin-inline: auto; /* أهم سطر للتوسيط */
            float: none !important; /* إلغاء أي تعويم قديم */
        }
}
/* === Fix: perfect centering for card on mobile (Bootstrap rows + padding-inline) === */
@media (max-width: 600px){

  /* امنع تداخل padding الحاوية مع هوامش .row السالبة */
  .auth-wrap .auth-body{
    display:flex;
    justify-content:center;
    padding-inline:16px;         /* حدود واضحة داخل auth-wrap */
    box-sizing:border-box;
  }

  /* اجعل login-box بلا padding جانبي — نخلي الحدود للحاوية الأعلى */
  .auth-wrap .login-box{
    width:100%;
    max-width:560px;
    margin:16px auto 0;
    padding-inline:0 !important; /* يلغي padding-inline السابق */
    display:flex;
    justify-content:center;
  }

  /* صفوف بوتستراب داخل login-box: ألغِ الهوامش السالبة */
  .auth-wrap .login-box .row{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* أعمدة بوتستراب: ألغِ الحشوات الجانبية التي قد تميل الكارت */
  .auth-wrap .login-box [class*="col-"]{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* الحاويات الداخلية إن وُجدت */
  .auth-wrap .login-box .container,
  .auth-wrap .login-box .container-fluid{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* الكارت نفسه: توسيط صارم وإلغاء أي float قديم */
  .auth-wrap .login-box .card.card-outline.card-primary{
    width:100%;
    max-width:520px;             /* مقاس عملي على الجوال */
    margin-inline:auto !important;
    float:none !important;
    display:block;
  }
}

/* وقائي: منع أي تمرير أفقي قد يسبب انزياح بصري */
html, body{ overflow-x:hidden; }