:root {
          --bg-color: #F8F7F4; /* لون الكريمة الناعم للخلفية */
          --card-bg: #FFFFFF; /* لون الحليب النقي لبطاقة النموذج */
          --accent-gold: #C8A47E; /* الذهبي المصقول الهادئ */
          --accent-gold-dark: #b08d68;
          --text-main: #4A4742; /* الفحمي الدافئ للنص الرئيسي */
          --text-sub: #7D7A77; /* الرمادي الداكن للنص الثانوي */
          --border-color: #EBE7E0; /* رملي شاحب للإطارات */
          --focus-glow: rgba(200, 164, 126, 0.25);
          --shadow-premium: 0 30px 60px -15px rgba(74, 71, 66, 0.15);
      }

      * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      body {
          font-family: 'IBM Plex Sans Arabic', sans-serif;
          background-color: var(--bg-color);
          color: var(--text-main);
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px;
      }

      .main-wrapper {
          display: flex;
          width: 100%;
          max-width: 1000px;
          background: var(--card-bg);
          border-radius: 24px;
          overflow: hidden;
          box-shadow: var(--shadow-premium);
          min-height: 600px;
          /* توجيه الترتيب الأفقي ليناسب RTL */
          flex-direction: row-reverse;
      }

      .form-side {
          flex: 1;
          padding: 3rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
      }

      .form-content-box {
          width: 100%;
          max-width: 360px;
          text-align: center;
      }

      .image-side {
          flex: 1;
          position: relative;
          /* يمكن تغيير رابط الصورة */
          /*background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=1000&auto=format&fit=crop');*/
          background-image: url("/assets/login-splash-ec845b39.jpeg");
          background-size: cover;
          background-position: center;
      }

      .image-side::before {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          /* تظليل دافئ يتجه من أسفل اليمين (الذهبي) إلى أعلى اليسار (الداكن) */
          background: linear-gradient(to bottom left, rgba(200, 164, 126, 0.3), rgba(74, 71, 66, 0.5));
      }

      .image-text-overlay {
          position: absolute;
          bottom: 40px;
          /* عكس الاتجاه: التثبيت على اليمين بدلاً من اليسار */
          right: 40px;
          left: 40px; /* لضمان الالتفاف */
          color: white;
          z-index: 2;
          text-align: right;
      }

      .image-text-overlay h2 {
          font-weight: 500;
          font-size: 1.5rem;
          margin-bottom: 10px;
      }

      .image-text-overlay p {
          font-weight: 300;
          opacity: 0.9;
          font-size: 0.95rem;
      }


      .logo-area {
          margin-bottom: 2rem;
          display: flex;
          flex-direction: column;
          align-items: center;
      }

      .logo-icon {
          width: 48px;
          height: 48px;
          background-color: var(--bg-color);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 1rem;
          color: var(--accent-gold);
      }

      .logo-text {
          font-size: 1.25rem;
          font-weight: 600;
          letter-spacing: -0.02em;
      }

      .welcome-text h1 {
          font-size: 1.5rem;
          font-weight: 500;
          margin-bottom: 0.5rem;
      }

      .welcome-text p {
          color: var(--text-sub);
          font-size: 0.95rem;
          margin-bottom: 2.5rem;
      }
      .login-alert {
          color: #8b1c1c;
          background: #fff1f0;
          border: 1px solid #e8b4b0;
          border-radius: 12px;
          margin-bottom: 1.5rem;
          padding: 12px 16px;
          text-align: start;
      }


      .form-group {
          margin-bottom: 1.5rem;
          text-align: right;
      }

      /* محاذاة النص داخل النموذج لليمين */
      .input-wrapper {
          position: relative;
      }

      .input-icon {
          position: absolute;
          right: 16px;
          top: 50%;
          transform: translateY(-50%);
          color: var(--text-sub);
          opacity: 0.6;
      }

      input {
          width: 100%;
          padding: 14px 44px 14px 16px; /* بادئة يمين 44px (لأجل الأيقونة) ويسار 16px */
          border: 1px solid var(--border-color);
          border-radius: 12px;
          font-family: inherit;
          font-size: 1rem;
          color: var(--text-main);
          background-color: #FAFAF9;
          transition: all 0.3s ease;
          outline: none;
      }

      input::placeholder {
          color: #B0B0B0;
      }

      input:focus {
          background-color: #FFFFFF;
          border-color: var(--accent-gold);
          box-shadow: 0 0 0 4px var(--focus-glow);
      }

      .btn-primary {
          width: 100%;
          padding: 16px;
          background-color: var(--accent-gold);
          color: white;
          border: none;
          border-radius: 50px;
          font-size: 1rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-top: 1rem;
          box-shadow: 0 4px 12px rgba(200, 164, 126, 0.3);
      }

      .btn-primary:hover {
          background-color: var(--accent-gold-dark);
          transform: translateY(-1px);
          box-shadow: 0 6px 16px rgba(200, 164, 126, 0.4);
      }

      .secondary-actions {
          margin-top: 1.5rem;
          display: flex;
          justify-content: center;
      }

      .link {
          color: var(--text-sub);
          font-size: 0.9rem;
          text-decoration: none;
          transition: color 0.2s;
      }

      .link:hover {
          color: var(--accent-gold);
      }

      .form-footer {
          margin-top: 2rem;
          color: #A09D9A;
          font-size: 0.75rem;
      }


      @media (max-width: 768px) {
          .main-wrapper {
              /* عكس الترتيب العمودي: النموذج في الأسفل (Form-side) والصورة في الأعلى (Image-side) */
              flex-direction: column;
              height: auto;
              min-height: auto;
              max-width: 500px;
          }

          .image-side {
              height: 200px;
              flex: none;
          }

          .image-text-overlay {
              display: none;
          }

          .form-side {
              padding: 2rem;
          }
      }