/* Styles for login.php; loaded only at the original inclusion point. */
/* General HTML and Body Styling */
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Ensures full height for both elements */
  width: 100%; /* Ensures full width for both elements */
  overflow: hidden; /* Prevents scrollbars */
}

body {
  font-family: "Raleway", "Heebo", sans-serif;
  font-size: 18px;
  background: linear-gradient(to bottom, #000000 10%, #333333 30%, #007bff 100%);
  background-repeat: no-repeat;
  background-attachment: fixed; /* Keeps the gradient fixed */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8); /* Subtle inner shadow for depth */
}

/* Form Container Styling */
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ensures full viewport height */
  width: 100%; /* Full width */
  position: relative; /* Allows stacking properly */
  z-index: 1; /* Ensures the form is above the background */
}

/* Form Styling */
.form-container {
  display: flex;
  gap: 20px; /* Space between forms */
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  margin: auto;
  z-index: 2; /* Ensures it's above the background */
}

.form {
  background-color: var(--ess-color-surface, #fff);
  border-radius: var(--ess-radius-xl, 20px);
  box-sizing: border-box;
  min-height: 480px;
  padding: 20px;
  width: 340px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Form shadow for depth */
}

/* SweetAlert Integration */
.swal2-container {
  position: fixed !important; /* Ensures the modal stays fixed */
  height: 100%;
  width: 100%;
  z-index: 1000; /* Higher z-index to overlay other content */
}

.swal2-backdrop-show {
  background-color: rgba(0, 0, 0, 0.4) !important; /* Backdrop overlay */
  backdrop-filter: blur(4px); /* Subtle blur effect for focus */
}

/* Modal Open Styling */
.modal-open {
  overflow: hidden; /* Prevents scrolling of background when modal is active */
}
.input {
    background-color: var(--ess-color-surface, #fff);
    border-radius: var(--ess-radius-sm, 12px);
    border: 1px solid #ccc;
    font-size: 18px;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.submit {
    background-color: #43a047;
    color: white;
    font-size: 18px;
    border: none;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

.submit:hover {
    background-color: #36a435;
}

h2 {
    margin: 0 0 90px;
    font-size: 28px;
    text-align: center;
    color: #333333;
}

.right-align {
    text-align: right;
    font-size: 14px;
}

a {
    color: #4395F3;
    text-decoration: none;
}

a:hover {
    color: #43a047;
}

/* Alternative Login Section */
.alternative-login {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.alternative-login button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    transition: transform 0.2s ease;
}

.alternative-login button:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

.alternative-login .ministry {
    background-color: #3272C4;
}

.alternative-login .whatsapp {
    background-color: #4395F3;
}

.alternative-login hr {
    border: none;
    border-top: 2px solid #ccc;
    margin: 10px 0;
}
a:link {
  color: #4395F3;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #4395F3;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #43a047;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: #43a047;
  background-color: transparent;
  text-decoration: none;
}

#password:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
  top: 0x;
}

/* Add eye icon */
#eye {
  position: relative;
  display: block;
  cursor: pointer;
  color: #000;
  transition: color 0.3s ease-in-out;
  pointer-events: auto;
}

#eye:hover {
  color: #000;
  cursor: pointer;
}
.small-font {
font-size: 12px;
}

.right-align {
text-align: right;
margin-top: 10px;
}
.form button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #43a047;
    width: 100%;
    border: 0;
    padding: 10px;
    color: var(--ess-color-surface, #fff);
    font-size: 18px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}  
.spinner .path {
    stroke: #2b80f0;
    stroke-width: 10; /* Thicker line */
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: rotate 1.4s linear infinite;
}

.spinner circle.outer {
    fill: none;
    stroke: white; /* White border color */
    stroke-width: 2; /* Border thickness */
}
.or-sep{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0;
  font-size:14px;
  font-weight:600;
  color:#6b7280;
  user-select:none;
}

.or-sep span{
  background:#f7f9fc;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  z-index:1;
}

.or-sep::before{
  content:"";
  position:absolute;
  inset:50% 0 auto 0;
  height:1px;
  background:linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,.25),
    transparent
  );
}

.sr-title{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

@keyframes rotate {
    100% {
        stroke-dashoffset: -187;
    }
}

:root{
  --formW: 340px; /* שים כאן את רוחב .form בפועל אם שונה */
}

/* ===== App-like Floating Toast ===== */
.alert-float{
  position: fixed;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  width: min(92vw, var(--formW));
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;

  padding: 14px 14px 14px 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(15,23,42,.10);
  box-shadow:
    0 18px 45px rgba(2,6,23,.22),
    inset 0 1px 0 rgba(255,255,255,.55);

  overflow: hidden;
  text-align: right;

  animation:
    toastIn .55s cubic-bezier(.2,.9,.2,1) both,
    toastOut .35s ease-in 30s forwards;
}

.alert-float::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width: 6px;
  background: var(--accent, #3b82f6);
  opacity: .95;
}

@keyframes toastIn{
  from{ opacity:0; transform: translate(-50%,-14px) scale(.98); filter: blur(2px); }
  to  { opacity:1; transform: translate(-50%,0) scale(1);      filter: blur(0); }
}
@keyframes toastOut{
  to{ opacity:0; transform: translate(-50%,-10px) scale(.985); }
}

.alert__icon{
  width: 44px;
  height: 44px;
  border-radius: var(--ess-radius-md, 14px);
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(2,6,23,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.alert__icon i{ font-size: 18px; }

.alert__title{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
  color: rgba(2,6,23,.92);
}
.alert__text{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(2,6,23,.72);
}

.alert--error{ --accent:#ff3b7a; }
.alert--error .alert__icon{
  background: linear-gradient(180deg, rgba(255,59,122,.18), rgba(255,59,122,.08));
  color: #ff3b7a;
}

@media (max-width: 420px){
  :root{ --formW: calc(100vw - 26px); }
  .alert-float{ top: 88px; border-radius: var(--ess-radius-lg, 16px); }
}

.ess-login-hidden{display:none!important}.ess-access{width:min(92vw,460px);padding:28px;border-radius:28px;background:rgba(255,255,255,.94);box-shadow:0 28px 70px rgba(0,0,0,.35);text-align:center;direction:rtl}.ess-access img{width:86px}.ess-access h1{margin:12px 0 6px;font-size:30px}.ess-access p{margin:0 0 22px;color:var(--ess-color-muted, #64748b);font-size:15px}.ess-access-actions{display:grid;gap:13px}.ess-access-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;border:0;border-radius:18px;padding:10px 16px;font:inherit;font-weight:900;color:var(--ess-color-surface, #fff);cursor:pointer}.ess-access-parent{background:linear-gradient(135deg,#0f766e,#14b8a6)}.ess-access-teacher{background:linear-gradient(135deg,#1d4ed8,#4395f3)}.ess-access-btn i{font-size:23px}.ess-access-note{display:block;font-size:11px;font-weight:600;opacity:.88}.ess-back{position:fixed;top:18px;right:18px;z-index:20;border:1px solid rgba(255,255,255,.35);border-radius:var(--ess-radius-md, 14px);padding:10px 14px;background:rgba(15,23,42,.72);color:var(--ess-color-surface, #fff);font:inherit;font-size:13px;font-weight:800;cursor:pointer}.ess-access-swal{border-radius:var(--ess-radius-2xl, 24px)!important;direction:rtl}.ess-access-confirm,.ess-access-cancel{border:0;border-radius:13px;padding:11px 22px;font:inherit;font-weight:850;cursor:pointer}.ess-access-confirm{background:#0f766e;color:var(--ess-color-surface, #fff)}.ess-access-cancel{background:var(--ess-color-border, #e2e8f0);color:#334155}.ess-access-swal .swal2-input{text-align:center;direction:ltr;font-size:22px;letter-spacing:1px}