/* Dark auth page styles for registration (RTL) */
/* Font loaded from Google Fonts in Blade (Cairo) */
/* ---------- أجزاء ال overlay و loader (Spinner) ---------- */
.login-overlay {
    position: fixed;
    inset: 0;
    display: none; /* يظهر عند اضافة .visible */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
  }
  
  /* خلفية مموهة خفيفة لتعتيم الصفحة */
  .login-overlay .overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23,24,38,0.55); /* نفس لون الكارد لكن بتعتيم */
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
  }
  
  /* المركز الذي يحتوي الصندوق الدائري */
  .login-overlay .overlay-center {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  
  /* الصندوق المربع المستدير */
  .login-overlay .overlay-box {
    width: 120px;
    height: 120px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    box-shadow:
      0 2px 8px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }
  
  /* الدائرة المتحركة (حلقة ملونة بتدرج) */
  .loader-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    background: conic-gradient(#2ee7ff, #7a2bff, #b13bff, #2ee7ff);
    animation: spin 1.6s linear infinite;
    box-shadow: 0 8px 18px rgba(75,10,130,0.28), 0 0 28px rgba(120,20,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* حلقة داخلية داكنة لإعطاء تأثير الحافة */
  .loader-ring::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0,0,0,0.18), rgba(0,0,0,0.45));
    z-index: 1;
  }
  
  /* الدائرة الداخلية الصغيرة */
  .loader-inner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.05), rgba(0,0,0,0.6));
    box-shadow: inset 0 2px 8px rgba(255,255,255,0.02);
    z-index: 2;
  }
  
  /* ظهور overlay */
  .login-overlay.visible {
    display: flex;
    pointer-events: auto;
    animation: overlayFade .22s ease both;
  }
  
  /* منع تداخل التحديد أثناء العرض */
  .login-overlay.visible * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  /* keyframes */
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  @keyframes overlayFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* تحسين للصورة على شاشات صغيرة */
  @media (max-width: 600px) {
    .login-overlay .overlay-box { width: 96px; height: 96px; border-radius: 12px; }
    .loader-ring { width: 56px; height: 56px; }
    .loader-inner { width: 28px; height: 28px; }
  }
  
:root{
   
    --card: #313249 !important;
    --muted: rgba(255,255,255,0.06);
    --accent-1: #7a2bf0;
    --accent-2: #a23cf7;
    --lavender: #e6dbff;
    --success: #0fd49b;
    --warn: #ffb03b;
    --text: #d9dbe2;
    --radius-lg: 18px;
    --radius-pill: 30px;
  }
  
  html,body{
    height:100%;
    font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, rgba(12,12,15,0.6), rgba(0,0,0,0.6)), var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  /* card */
  .dark-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)), var(--card);
    border-radius: calc(var(--radius-lg) + 6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.02);
  }
  
  /* small title */
  .title-plain{
    color: var(--lavender);
    font-weight:600;
    font-size:18px;
  }
  
  /* form layout */
  .rtl-form .form-group{
    margin-bottom: 1rem;
  }
  
  /* inputs */
  .form-control{
    background: rgba(255,255,255,0.01);
    border: 1px solid var(--muted);
    color: var(--text);
    border-radius: var(--radius-pill);
    padding: 12px 18px;
    box-shadow: none;
    transition: all .18s ease-in-out;
    height: calc(2.25rem + 18px);
  }
  
  .form-control::placeholder{ color: rgba(217,219,226,0.45); }
  
  /* focus */
  .form-control:focus{
    outline: none;
    border-color: rgba(122,43,240,0.9);
    box-shadow: 0 6px 20px rgba(122,43,240,0.12);
    background: rgba(255,255,255,0.01);
  }
  
  /* select custom */
  .custom-select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%), linear-gradient(135deg, rgba(255,255,255,0.5) 50%, transparent 50%);
    background-position: calc(100% - 1.2rem) calc(1em + 2px), calc(100% - .8rem) calc(1em + 2px);
    background-size: .45em .45em, .45em .45em;
    background-repeat: no-repeat;
    padding-right: 3rem;
  }
  
  /* password toggle */
  .input-group{
    position: relative;
  }
  .input-group-append{
    margin-right: .5rem;
    background: transparent;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  .input-group-text{
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.02);
    color: var(--lavender);
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    min-width:48px;
    justify-content:center;
  }
  
  /* password-eye text */
  .password-eye{
    font-size: 13px;
    color: rgba(217,219,226,0.85);
    user-select: none;
  }
  
  /* main button gradient */
  .btn-gradient{
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    border: none;
    border-radius: var(--radius-pill);
    padding: 12px 24px;
    color: white;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(122,43,240,0.18);
  }
  
  /* links */
  .link-light{
    color: rgba(217,219,226,0.72);
    text-decoration:none;
  }
  .link-light:hover{ color: var(--lavender); text-decoration: underline; }
  
  /* responsive tweaks */
  @media (max-width:767px){
    .card-body{ padding: 1.25rem; }
    .logo-lg img{ height:80px; }
  }
  
  /* validation invalid */
  .is-invalid{ border-color: rgba(255,80,80,0.9) !important; box-shadow: 0 6px 20px rgba(255,80,80,0.06); }
  
  /* small helpers */
  .text-muted{ color: rgba(217,219,226,0.6); }
  
  /* center the form area a bit */
  .account-pages{ padding-top: 60px; padding-bottom: 60px; }
  
  /* preserve bootstrap btn-block behaviours if used */
  .btn-block{ display:block; width:100%; }
  
  /* improve select/dropdown look inside dark card */
  .dark-card .form-control, .dark-card .custom-select{ background: rgba(0,0,0,0.03); }
  
  /* optional subtle border on card */
  .dark-card { border-left: 4px solid rgba(162,60,247,0.06); }