/* ===== Opencart Israel – auth.css (התחברות + הרשמה) ===== */

:root {
  --bg: #050810;
  --border: rgba(255,255,255,.1);
  --text: #f1f5fb;
  --muted: rgba(255,255,255,.6);
  --indigo: #6366f1;
  --sky: #38bdf8;
  --accent-grad: linear-gradient(90deg, #38bdf8, #6366f1, #a855f7);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Rubik', sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:3rem 1rem; overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }

/* ===== Video background ===== */
.video-bg { position:fixed; inset:0; overflow:hidden; z-index:0; }
.video-bg video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-bg::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,8,16,.55), rgba(5,8,16,.75));
}
.video-bg .fallback {
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(99,102,241,.35), transparent),
    radial-gradient(50% 40% at 80% 70%, rgba(56,189,248,.25), transparent),
    radial-gradient(40% 40% at 60% 10%, rgba(168,85,247,.25), transparent),
    var(--bg);
  animation:drift 14s ease-in-out infinite alternate;
}
@keyframes drift { from { transform:scale(1); } to { transform:scale(1.12); } }

/* ===== Card ===== */
.wrap { position:relative; z-index:20; width:100%; max-width:26rem; animation:fadeIn .7s ease both; }
@keyframes fadeIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.card {
  padding:2rem; border-radius:1.25rem;
  background:rgba(0,0,0,.5); border:1px solid var(--border);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.head { text-align:center; margin-bottom:1.75rem; }
.brand { position:relative; display:inline-block; font-size:1.9rem; font-weight:900; letter-spacing:-.02em; }
.brand .glow {
  position:absolute; inset:-.35rem;
  background:linear-gradient(90deg, rgba(56,189,248,.3), rgba(99,102,241,.3), rgba(168,85,247,.3));
  filter:blur(18px); opacity:.75; animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.45; } 50% { opacity:.9; } }
.brand .txt { position:relative; }
.brand .txt em { font-style:normal; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.head p.tag { margin-top:.5rem; color:rgba(255,255,255,.8); font-weight:300; animation:pulse 3s ease-in-out infinite; }
.head p.hint { margin-top:.3rem; font-size:.75rem; color:rgba(255,255,255,.45); }
.head .emojis { margin-top:.4rem; display:flex; justify-content:center; gap:.6rem; font-size:.85rem; }
.head .emojis span:nth-child(1) { animation:pulse 2s infinite; }
.head .emojis span:nth-child(2) { animation:bounce 1.6s infinite; display:inline-block; }
.head .emojis span:nth-child(3) { animation:pulse 2.6s infinite; }
@keyframes bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }

/* ===== Form ===== */
form { display:flex; flex-direction:column; gap:1.3rem; }
.field { position:relative; }
.field .icon {
  position:absolute; inset-inline-start:.8rem; top:50%; transform:translateY(-50%);
  display:flex; color:var(--muted); pointer-events:none;
}
.field .icon svg, .eye svg { width:1.1rem; height:1.1rem; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.field input {
  width:100%; padding:.65rem 2.5rem .65rem .8rem;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  border-radius:.6rem; color:#fff; font-family:inherit; font-size:.95rem;
  transition:border-color .2s;
}
.field input::placeholder { color:var(--muted); }
.field input:focus { outline:none; border-color:rgba(99,102,241,.6); }
.field input.err { border-color:rgba(239,68,68,.7); }
.eye {
  position:absolute; inset-inline-end:.8rem; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted); cursor:pointer; display:flex;
  transition:color .2s;
}
.eye:hover { color:#fff; }
.err-msg { display:none; font-size:.78rem; color:#f87171; margin-top:.35rem; }

/* תיקון autofill של הדפדפן — שומר על הרקע הכהה והטקסט הלבן */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
  -webkit-box-shadow:0 0 0 1000px #10141d inset;
  box-shadow:0 0 0 1000px #10141d inset;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  border:1px solid var(--border);
  transition:background-color 99999s ease-in-out 0s;
}
.field input:autofill {
  box-shadow:0 0 0 1000px #10141d inset;
  -webkit-text-fill-color:#fff;
}

/* password strength meter (הרשמה) */
.strength { display:flex; gap:.3rem; margin-top:.5rem; }
.strength i { height:.25rem; flex:1; border-radius:999px; background:rgba(255,255,255,.12); transition:background .25s; }
.strength.s1 i:nth-child(1) { background:#ef4444; }
.strength.s2 i:nth-child(-n+2) { background:#f59e0b; }
.strength.s3 i:nth-child(-n+3) { background:#38bdf8; }
.strength.s4 i { background:#22c55e; }
.strength-lbl { font-size:.75rem; color:var(--muted); margin-top:.3rem; }

/* toggle switch (זכור אותי / תנאים) */
.row { display:flex; align-items:center; justify-content:space-between; }
.remember { display:flex; align-items:center; gap:.55rem; cursor:pointer; }
.remember .label { font-size:.85rem; color:rgba(255,255,255,.8); transition:color .2s; }
.remember:hover .label { color:#fff; }
.terms { display:flex; align-items:center; gap:.55rem; cursor:pointer; }
.terms .label { font-size:.83rem; color:rgba(255,255,255,.8); line-height:1.5; }
.terms .label a { color:#fff; font-weight:500; }
.terms .label a:hover { text-decoration:underline; }
.switch { position:relative; width:2.5rem; height:1.25rem; flex-shrink:0; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.track {
  position:absolute; inset:0; border-radius:999px;
  background:rgba(255,255,255,.2); transition:background .2s ease-in-out;
}
.knob {
  position:absolute; top:.125rem; inset-inline-start:.125rem;
  width:1rem; height:1rem; border-radius:50%; background:#fff;
  transition:transform .2s ease-in-out;
}
.switch input:checked + .track { background:var(--indigo); }
.switch input:checked + .track .knob { transform:translateX(-1.25rem); }
.forgot { font-size:.85rem; color:rgba(255,255,255,.8); }
.forgot:hover { color:#fff; }

.submit {
  width:100%; padding:.85rem; border:none; border-radius:.6rem; cursor:pointer;
  background:var(--accent-grad); color:#fff;
  font-family:inherit; font-size:1rem; font-weight:500;
  transition:transform .2s, box-shadow .2s, opacity .2s;
  box-shadow:0 10px 30px rgba(99,102,241,.25);
}
.submit:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 14px 40px rgba(99,102,241,.45); }
.submit:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.submit.success { background:linear-gradient(90deg,#22c55e,#16a34a); box-shadow:0 10px 30px rgba(34,197,94,.35); }

/* ===== Divider + social ===== */
.divider { position:relative; display:flex; align-items:center; justify-content:center; margin-top:1.85rem; }
.divider::before { content:""; position:absolute; width:100%; border-top:1px solid var(--border); }
.divider span { position:relative; padding:0 1rem; color:var(--muted); font-size:.85rem; }
.socials { margin-top:1.3rem; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.75rem; }
.social {
  display:flex; align-items:center; justify-content:center; padding:.6rem;
  background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:.6rem;
  color:rgba(255,255,255,.8); cursor:pointer; transition:background .2s, color .2s;
}
.social:hover { background:rgba(255,255,255,.12); color:#fff; }
.social svg { width:1.15rem; height:1.15rem; }

/* link to the other auth page */
.signup, .signin { margin-top:1.85rem; text-align:center; font-size:.88rem; color:var(--muted); }
.signup a, .signin a { font-weight:500; color:#fff; }
.signup a:hover, .signin a:hover { color:#c4b5fd; }

.back {
  position:absolute; top:1.25rem; inset-inline-start:1.25rem; z-index:30;
  display:flex; align-items:center; gap:.4rem;
  color:rgba(255,255,255,.7); font-size:.88rem;
  padding:.45rem .8rem; border-radius:.6rem;
}
.back:hover { color:#fff; background:rgba(255,255,255,.08); }
.back svg { width:1rem; height:1rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

footer {
  position:fixed; bottom:1rem; inset-inline:0; z-index:20;
  text-align:center; color:var(--muted); font-size:.82rem; font-weight:300;
}