:root {
   --primary-color: #007bff;
   --primary-color-hover: #0056b3;
   --secondary-color: #330033;
   --background-color: #f0f2f5;
   --card-background: transparent;
   --text-color: #333;
   --input-border-color: #ddd;
   --input-focus-border: #80bdff;
   --danger-color: #dc3545;
   --font-family-arabic: 'Noto Naskh Arabic', sans-serif;
   --font-family-roboto: 'Roboto', sans-serif;
   --vh: 1vh;
   /* متغيرات جديدة لزر التبديل */
   --hue: 223;
   --trans-dur: 0.3s;
   --trans-timing: cubic-bezier(0.65,0,0.35,1);
}

html, body {
   margin: 0;
   padding: 0;
   width: 100%;
   min-height: 100vh;
   min-height: calc(var(--vh, 1vh) * 100);
}

body {
   font-family: var(--font-family-arabic), var(--font-family-roboto);
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--background-color);
   position: relative;
   overflow: hidden;
}

/* Background Animation */
.background-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   overflow: hidden;
}

.background-blob {
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   opacity: 0.6;
   filter: blur(150px);
   animation: float-effect 12s infinite ease-in-out;
}

.background-blob.top-left {
   background: linear-gradient(135deg, #FAD0C4, #FF9A8B);
   top: -100px;
   left: -100px;
}

.background-blob.bottom-right {
   background: linear-gradient(45deg, #B5B2FF, #68BBE3);
   bottom: -100px;
   right: -100px;
   animation-delay: 3s;
}

@keyframes float-effect {
   0%, 100% { transform: translate(0, 0); }
   50% { transform: translate(30px, 30px); }
}

/* Login Card */
.login-card {
   background-color: var(--card-background);
   padding: clamp(1.5rem, 5vw, 2.5rem);
   border-radius: 12px;
   box-shadow: none;
   backdrop-filter: blur(15px);
   border: none;
   text-align: center;
   width: clamp(280px, 80%, 340px);
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

/* New H1 Styling */
.login-card h1 {
   margin: 0 0 0.5rem 0;
   color: var(--text-color);
   font-size: clamp(1.7rem, 4.5vw, 2.2rem);
}

.login-card h2 {
   margin: 0 0 1.5rem 0;
   color: var(--text-color);
   font-size: clamp(0.85rem, 2.25vw, 1.1rem);
}

/* Form Elements */
.login-form {
   width: 100%;
   direction: rtl;
}

.input-group {
   margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
   text-align: right;
}

.input-group input {
   width: 100%;
   padding: 0.8rem 1rem;
   border: 1px solid var(--input-border-color);
   border-radius: 8px;
   font-size: 16px;
   box-sizing: border-box;
   background-color: rgba(255, 255, 255, 0.2);
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
   min-height: 48px;
}

.input-group input:focus {
   outline: none;
   border: 1px solid var(--input-focus-border);
   box-shadow: none;
}

.input-group input.is-invalid {
   border-color: var(--danger-color);
}

.input-group .help-block {
   color: var(--danger-color);
   font-size: clamp(0.75rem, 2.5vw, 0.9rem);
   margin-top: 0.25rem;
   display: block;
}

.alert-danger {
   color: #721c24;
   background-color: #f8d7da;
   border: 1px solid #f5c6cb;
   padding: clamp(0.5rem, 2vw, 0.75rem);
   margin-bottom: 1.5rem;
   border-radius: 8px;
   text-align: right;
   font-size: clamp(0.9rem, 3vw, 1rem);
}

.options-group {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   margin-bottom: 1.5rem;
   color: var(--text-color);
}

.options-group label {
   font-size: clamp(0.9rem, 3vw, 1rem);
   cursor: pointer;
   margin: 0 0.5rem 0 0;
}

.btn {
   width: 100%;
   padding: 0.8rem;
   border-radius: 8px;
   font-size: clamp(1rem, 3.5vw, 1.2rem);
   font-weight: 500;
   cursor: pointer;
   background-color: var(--primary-color);
   color: #fff;
   border: none;
   transition: background-color 0.3s ease, box-shadow 0.3s ease;
   text-align: center;
   min-height: 48px;
   box-sizing: border-box;
}

.btn:hover {
   background-color: var(--primary-color-hover);
   box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.back-link {
   display: block;
   width: 100%;
   padding: 0.6rem;
   margin-top: 1rem;
   font-size: clamp(0.9rem, 3.5vw, 1rem);
   color: var(--secondary-color);
   text-decoration: none;
   border: 1px solid rgba(51, 0, 51, 0.2);
   border-radius: 8px;
   background-color: transparent;
   transition: background-color 0.3s ease;
   min-height: 48px;
   box-sizing: border-box;
}

.back-link:hover {
   background-color: rgba(51, 0, 51, 0.1);
}

/*
* ========================================
* Toggle Switch
* ========================================
*/
.switch {
   position: relative;
   width: 3em;
   height: 1.5em;
   direction: ltr;
   -webkit-tap-highlight-color: transparent;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.switch__input {
   background-color: hsla(var(--hue),90%,50%,0);
   border-radius: 1.5em;
   box-shadow:
       0 0 0 0.0625em rgba(51, 0, 51, 0.5) inset,
       0 0.25em 1em hsla(var(--hue),90%,10%,0);
   cursor: pointer;
   display: block;
   outline: transparent;
   width: 100%;
   height: 100%;
   transition:
       background-color var(--trans-dur) var(--trans-timing),
       box-shadow var(--trans-dur) var(--trans-timing);
   -webkit-appearance: none;
   appearance: none;
}

.switch__input:before,
.switch__input:after {
   content: "";
   display: block;
}

.switch__input:before {
   background-color: hsl(0,0%,100%);
   border-radius: 50%;
   box-shadow: 0 0.125em 0.25em hsla(var(--hue),90%,10%,0);
   transition:
       box-shadow var(--trans-dur) var(--trans-timing),
       transform var(--trans-dur) var(--trans-timing);
   position: absolute;
   top: 50%;
   left: 9px; /* تحريك الدائرة عند البدء 5 بكسل من اليسار */
   width: 1em;
   height: 1em;
   transform: translateY(-50%);
   border: 1px solid #ddd; /* إضافة إطار رمادي فاتح */
}

.switch__input:after {
   border-radius: 0.75em;
   box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,70%,0);
   width: 100%;
   height: 100%;
   transition: box-shadow 0.15s linear;
}

.switch__input:focus-visible:after {
   box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,70%,1);
}

.switch__check {
   display: none;
}

.switch__check-line {
   display: none;
}

.switch__input:checked {
   background-color: var(--primary-color);
   box-shadow:
       0 0 0 0.0625em var(--primary-color) inset,
       0 0.25em 1em hsla(var(--hue),90%,10%,0);
}

.switch__input:checked:before {
   box-shadow: none; /* إزالة الظل عند التفعيل */
   transform: translate(1.4em, -50%);
   border: none; /* إزالة الإطار عند التفعيل */
}

.switch__input:checked + .switch__check {
   animation: switch-check var(--trans-dur) var(--trans-timing);
   transform: translateX(1.5em) rotate(-225deg);
}

.switch__input:checked + .switch__check .switch__check-line {
   stroke: var(--primary-color-hover);
   stroke-dashoffset: 0;
   transform: translate(-1px,-1px);
   transition-delay: 0s, calc(var(--trans-dur) / 2), 0s;
}

.switch__sr {
   overflow: hidden;
   position: absolute;
   width: 1px;
   height: 1px;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
   :root {
       --bg: hsl(var(--hue),90%,10%);
       --fg: hsl(var(--hue),90%,90%);
   }
}

/* Animations */
@keyframes switch-check {
   from {
       transform: translateX(0) rotate(0);
   }
   to {
       transform: translateX(1.5em) rotate(135deg);
   }
}