/* ============================================================
   EnjazBCMS — Auth Pages — Blossom Design
   Light pastel gradient + glassmorphism cards + rose accents
   ============================================================ */

:root {
  --rose:    #f43f5e;
  --rose-dk: #e11d48;
  --rose-dkr:#be123c;
  --pink:    #ec4899;
  --text:    #1e293b;
  --muted:   #64748b;
  --border:  #e2e8f0;
  --error:   #dc2626;
  --success: #10b981;
  --warning: #f59e0b;
  --t:       all .2s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing:border-box; }

html,body {
  margin:0; padding:0; min-height:100%;
  font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;
  direction:rtl;
  background:#fff;
}

/* ──────────────── SCENE ──────────────── */
.auth-scene {
  min-height:100svh;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
  position:relative; overflow:hidden;
}

/* ──────────────── DECORATIVE BLOBS ──────────────── */
.deco { display:none; }

/* ──────────────── FLOATING PARTICLES ──────────────── */
.bg-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }

.bp {
  position:absolute;
  border-radius:50%;
  animation:bp-rise linear infinite;
}
@keyframes bp-rise {
  0%   { transform:translateY(0)      scale(1);   opacity:0; }
  10%  { opacity:1; }
  80%  { opacity:1; }
  100% { transform:translateY(-105vh) scale(.5);  opacity:0; }
}

/* ──────────────── WRAP ──────────────── */
.auth-wrap {
  position:relative; z-index:1;
  width:min(100%, 460px);
  display:flex; flex-direction:column; align-items:stretch;
}
.auth-wrap--register { width:min(100%, 620px); }

/* ──────────────── CARD ──────────────── */
@keyframes card-in {
  from { opacity:0; transform:translateY(28px) scale(.97); }
  to   { opacity:1; transform:none; }
}

.auth-card {
  width:100%;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:28px; overflow:hidden;
  box-shadow:
    0 20px 60px rgba(15,23,42,.1),
    0 4px 16px rgba(15,23,42,.05),
    0 0 0 1px rgba(255,255,255,.6) inset;
  animation:card-in .45s cubic-bezier(.34,1.3,.64,1) both;
}

/* ──────────────── CARD HERO ──────────────── */
.card-hero {
  background:linear-gradient(135deg, #f43f5e 0%, #e11d48 55%, #be123c 100%);
  padding:36px 32px 30px;
  text-align:center; position:relative; overflow:hidden;
}
.card-hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.14) 0%,transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.10) 0%,transparent 35%);
  pointer-events:none;
}

@keyframes icon-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.35); }
  50%     { box-shadow:0 0 0 14px rgba(255,255,255,0); }
}

.card-hero-icon {
  width:68px; height:68px;
  background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.38);
  border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; color:#fff;
  margin:0 auto 18px;
  position:relative;
  backdrop-filter:blur(8px);
  animation:icon-pulse 3.5s ease-in-out infinite;
}

.card-hero h1 {
  color:#fff; font-size:22px; font-weight:900;
  margin:0 0 8px; letter-spacing:-.3px; position:relative;
}
.card-hero p {
  color:rgba(255,255,255,.83); font-size:13.5px;
  margin:0; line-height:1.5; position:relative;
}

/* Register hero logo */
.reg-hero-logo {
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px; justify-content:center; position:relative;
}
.reg-hero-logo img { height:26px; opacity:.95; }
.reg-hero-logo span { font-size:15px; font-weight:900; color:#fff; letter-spacing:.02em; }

/* Register feature pills */
.reg-feats {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:20px; justify-content:center; position:relative;
}
.reg-feat {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px; padding:7px 12px;
  font-size:12px; font-weight:700;
  color:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
}
.reg-feat i { font-size:12px; }

/* ──────────────── CARD BODY ──────────────── */
.card-body { padding:20px 28px 24px; }

/* ──────────────── ERROR ALERT ──────────────── */
.alert-error {
  display:flex; align-items:flex-start; gap:12px;
  background:#fff5f5; border:1.5px solid #fecaca;
  border-radius:14px; padding:14px 16px;
  margin-bottom:22px;
  color:var(--error); font-size:13px; font-weight:600;
}
.alert-error i { flex-shrink:0; font-size:15px; margin-top:1px; }

/* ──────────────── FIELD ──────────────── */
.field { margin-bottom:10px; }
.field label {
  display:block; font-size:12px; font-weight:700;
  color:var(--text); margin-bottom:5px; letter-spacing:.01em;
}
.opt { font-size:11px; font-weight:400; color:#94a3b8; margin-right:5px; }

/* ──────────────── INPUT WRAP ──────────────── */
.field-wrap { position:relative; }

.fi {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:#94a3b8; font-size:14px; pointer-events:none; transition:color .15s;
}
.field-wrap:focus-within .fi { color:var(--rose); }

.field-wrap input,
.field-wrap select {
  width:100%;
  padding:8px 38px 8px 12px;
  border:1.5px solid var(--border); border-radius:12px;
  font-size:13.5px; font-family:'Cairo',sans-serif;
  color:var(--text); background:#f8fafc;
  transition:var(--t); outline:none;
  direction:rtl; -webkit-appearance:none; appearance:none;
}
.field-wrap input::placeholder { color:#c8d3e0; }
.field-wrap input:hover:not(:focus) { border-color:#cbd5e1; }
.field-wrap input:focus,
.field-wrap select:focus {
  border-color:var(--rose); background:#fffbfc;
  box-shadow:0 0 0 4px rgba(244,63,94,.1);
}
.field-wrap input.is-invalid {
  border-color:var(--error);
  box-shadow:0 0 0 4px rgba(220,38,38,.08);
}

/* Select custom arrow */
.field-wrap select {
  padding-left:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:13px center; background-size:12px;
}

/* Password toggle */
.toggle-pass {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#94a3b8; font-size:14px;
  padding:5px 7px; cursor:pointer; display:flex; align-items:center;
  transition:color .15s;
}
.toggle-pass:hover { color:var(--rose); }

/* Field error text */
.field-err {
  font-size:12px; color:var(--error); font-weight:600;
  margin-top:6px; display:flex; align-items:center; gap:4px;
}
.field-err::before { content:'⚠ '; font-size:10px; }

/* ──────────────── REMEMBER ROW ──────────────── */
.remember-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.check-label {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--muted); cursor:pointer;
}
.check-label input[type="checkbox"] {
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; border:2px solid var(--border); border-radius:6px;
  cursor:pointer; background:#fff; transition:var(--t);
  position:relative; flex-shrink:0;
}
.check-label input[type="checkbox"]:checked {
  background:linear-gradient(135deg, var(--rose), var(--pink));
  border-color:var(--rose);
}
.check-label input[type="checkbox"]:checked::after {
  content:'✓'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:#fff; font-size:11px; font-weight:900; line-height:1;
}
.link-forgot {
  font-size:13px; font-weight:700; color:var(--rose); text-decoration:none;
}
.link-forgot:hover { color:var(--rose-dk); text-decoration:underline; }

/* ──────────────── SUBMIT BUTTON ──────────────── */
.btn-submit {
  width:100%; padding:11px 20px; border:none; border-radius:14px;
  background:linear-gradient(135deg, var(--rose) 0%, var(--pink) 100%);
  color:#fff; font-size:15.5px; font-weight:800; font-family:'Cairo',sans-serif;
  cursor:pointer; letter-spacing:.02em;
  box-shadow:0 4px 22px rgba(244,63,94,.38);
  transition:transform .18s, box-shadow .18s;
  display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:hidden; margin-top:6px;
}
.btn-submit::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-150%); transition:transform .55s ease;
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(244,63,94,.5); }
.btn-submit:hover::after { transform:translateX(150%); }
.btn-submit:active { transform:translateY(0); }
.btn-submit:disabled { opacity:.7; cursor:not-allowed; transform:none !important; }

/* ──────────────── CARD FOOTER ──────────────── */
.card-footer {
  border-top:1px solid #f1f5f9; margin-top:16px; padding-top:14px;
  text-align:center; font-size:13.5px; color:var(--muted);
}
.card-footer a {
  color:var(--rose); font-weight:800; text-decoration:none; margin-right:4px;
}
.card-footer a:hover { color:var(--rose-dk); text-decoration:underline; }

/* ──────────────── TWO-COLUMN GRID ──────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ──────────────── SECTION DIVIDER ──────────────── */
.section-label {
  display:flex; align-items:center; gap:10px;
  margin:24px 0 16px;
  font-size:11.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
}
.section-label::before,.section-label::after {
  content:''; flex:1; height:1px; background:var(--border);
}
.section-label i { color:var(--rose); font-size:10px; }

/* ──────────────── COUNTRY CHIPS ──────────────── */
.country-chips {
  display:none; gap:7px; flex-wrap:wrap; margin-top:8px;
}
.country-chips.visible { display:none; }
.chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; border:1px solid;
}
.chip--tz  { background:#fdf4ff; border-color:#e9d5ff; color:#7c3aed; }
.chip--cur { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.chip--tel { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }

/* ──────────────── PASSWORD STRENGTH ──────────────── */
.pw-strength { display:flex; gap:4px; margin-top:8px; }
.pw-bar {
  height:3px; flex:1; border-radius:99px;
  background:var(--border); transition:var(--t);
}
.pw-bar.weak   { background:var(--error); }
.pw-bar.fair   { background:var(--warning); }
.pw-bar.good   { background:#3b82f6; }
.pw-bar.strong { background:var(--success); }
.pw-text { font-size:11.5px; font-weight:700; color:var(--muted); margin-top:4px; }

/* ──────────────── RESPONSIVE ──────────────── */
@media (max-width:700px) {
  .auth-scene { padding:20px 14px; }
  .reg-feats { gap:6px; }
}

@media (max-width:600px) {
  .auth-scene { padding:16px 12px; align-items:flex-start; }
  .auth-wrap,.auth-wrap--register { width:100%; }
  .auth-card { border-radius:24px; }
  .card-hero { padding:26px 20px 22px; }
  .card-hero-icon { width:58px; height:58px; font-size:24px; border-radius:16px; margin-bottom:14px; }
  .card-hero h1 { font-size:20px; }
  .card-body { padding:22px 20px 24px; }
  .grid-2 { grid-template-columns:1fr; gap:12px; }
  .remember-row { flex-direction:column; align-items:flex-start; gap:12px; }
  .field-wrap input,.field-wrap select {
    padding:13px 40px 13px 14px; font-size:16px;
    border-radius:12px; min-height:48px;
  }
  .field-wrap select { padding-left:40px; }
  .btn-submit { padding:15px; font-size:16px; border-radius:14px; min-height:50px; }
  .reg-feats { display:none; }
  .deco { display:none !important; }
  .card-footer { font-size:14px; }
  .fi { right:12px; font-size:15px; }
  .toggle-pass { left:8px; }
  .section-label { margin:18px 0 12px; }
}

@media (max-width:380px) {
  .auth-scene { padding:10px 8px; }
  .card-hero { padding:22px 14px 18px; }
  .card-body { padding:18px 14px 20px; }
  .auth-card { border-radius:18px; }
}

@media (max-height:600px) {
  .card-hero { padding:20px 24px; }
  .card-hero-icon { width:52px; height:52px; font-size:22px; margin-bottom:12px; }
  .card-hero h1 { font-size:18px; }
  .deco { display:none !important; }
}