/* =========================================================
   Login Page Styles
   ========================================================= */

/* ---------- Base Variables ---------- */
:root{
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#2847F6;
  --danger:#dc2626;
  --shadow: 0 10px 25px rgba(0,0,0,.12);
  --radius: 14px;

  /* Dropdown variables */
  --dd-bg: radial-gradient(120% 120% at 30% 0%,
    rgba(86,140,255,.18) 0%,
    rgba(10,14,30,.92) 55%,
    rgba(8,10,20,.95) 100%
  );
  --dd-border: rgba(120,190,255,.22);
  --dd-shadow: 0 18px 50px rgba(0,0,0,.55),
               0 0 0 1px rgba(40,71,246,.12) inset,
               0 0 28px rgba(64,160,255,.18);

  --dd-item-bg: linear-gradient(180deg, rgba(35,60,125,.35) 0%, rgba(10,14,30,.35) 100%);
  --dd-item-border: rgba(120,190,255,.18);
  --dd-text: #eaf2ff;

  --dd-hover-bg: linear-gradient(180deg, rgba(45,95,255,.26) 0%, rgba(12,18,40,.30) 100%);
  --dd-hover-border: rgba(120,210,255,.42);
  --dd-arrow: rgba(10,14,30,.92);
  
  
  
  --chech-radius: 14px;
  --chech-font: 800;
  --chech-padding: 13px 18px;

  --chech-primary:#2847F6;
  --chech-success:#16a34a;
  --chech-warning:#f59e0b;
  --chech-danger:#dc2626;
  --chech-danger-dark:#991b1b;

  --chech-text:#fff;
  
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust: 100%; }

/* ---------- Page Layout ---------- */
body{
  margin:0;
  min-height:100dvh;
  height:auto;
  overflow-y:auto;

  font-family: Arial, sans-serif;
  color:var(--text);

  background-color:#f7f7f7;
  background-image: url("../images/background1.png");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  display:flex;
  align-items:center;
  justify-content:center;

  padding: clamp(14px, 3vw, 28px);
}




/* ---- Base Button ---- */
.chech-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:var(--chech-padding);
  border-radius:var(--chech-radius);
  border:none;
  cursor:pointer;

  font-weight:var(--chech-font);
  letter-spacing:.2px;
  text-decoration:none !important;
  user-select:none;

  color:var(--chech-text);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Hover */
.chech-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* Click */
.chech-btn:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* Disabled */
.chech-btn:disabled,
.chech-btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  filter:none;
  box-shadow:none;
}

/* ---- Variants ---- */

/* Primary */
.chech-btn-primary{
  background: linear-gradient(135deg,#3b5bff,#2847F6);
  box-shadow: 0 10px 24px rgba(40,71,246,.30);
}

/* Success */
.chech-btn-success{
  background: linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow: 0 10px 24px rgba(34,197,94,.30);
}

/* Warning */
.chech-btn-warning{
  background: linear-gradient(135deg,#fbbf24,#f59e0b);
  box-shadow: 0 10px 24px rgba(245,158,11,.30);
}

/* Danger (Activation Payment) */
.chech-btn-danger{
  background: linear-gradient(135deg,var(--chech-danger),var(--chech-danger-dark));
  box-shadow: 0 10px 25px rgba(220,38,38,.35),
              0 0 0 1px rgba(220,38,38,.35) inset;
}

/* Ghost */
.chech-btn-ghost{
  background: transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
}

/* ---- Sizes ---- */
.chech-btn-sm{ padding:8px 12px; font-size:12px; border-radius:10px; }
.chech-btn-md{ padding:12px 18px; font-size:14px; }
.chech-btn-lg{ padding:16px 22px; font-size:16px; border-radius:18px; }

/* Full width */
.chech-btn-block{ width:100%; }

/* Icon only */
.chech-btn-icon{ padding:12px; width:44px; height:44px; }

/* Dark mode tweak */
@media (prefers-color-scheme: dark){
  .chech-btn-ghost{ border-color:rgba(255,255,255,.35); }
}


/* ---------- Card ---------- */
.card{
  width:100%;
  max-width: 420px;
  background:var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3.2vw, 28px);
  text-align:center;
  backdrop-filter: blur(2px);
}

/* ---------- Logo ---------- */
.logo{
  width:110px;
  height:110px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo img{
  width:110px;
  height:auto;
  display:block;
}

/* ---------- Headings ---------- */
h1{
  margin:0 0 18px;
  font-size: clamp(18px, 2.2vw, 20px);
  font-weight:700;
}

/* ---------- Fields ---------- */
.field{
  text-align:left;
  margin:0 0 14px;
}
.field label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px;
}
.input{
  width:100%;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(40,71,246,.15);
}

/* ---------- Error ---------- */
.error{
  color:var(--danger);
  font-size:12px;
  margin-top:6px;
  min-height:16px;
  word-break: break-word;
}

/* ---------- Button ---------- */
.btn{
  width:100%;
  border:0;
  border-radius:10px;
  padding:12px 14px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition: filter .2s ease;
}
.btn:hover{ filter:brightness(.95); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* ---------- Footer ---------- */
.footer{
  margin-top:14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}
.links a{
  color:var(--brand);
  text-decoration:none;
}
.links a:hover{ text-decoration:underline; }

/* ---------- Store Buttons ---------- */
.store{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:10px;
  flex-wrap: wrap;
}
.store a img{
  display:block;
  transition: transform .2s ease;
}
.store a:hover img{ transform: scale(1.06); }

/* =========================================================
   Dropdown (Download)
   ========================================================= */
.download-wrapper{
  position: relative;
  display: inline-block;
}

.download-btn{
  cursor: pointer;
  width: 140px;
  transition: transform .2s ease;
}

/* Menu */
.download-menu{
  display:none;

  position:absolute;
  bottom:55px;
  left:50%;
  transform: translateX(-50%) translateY(10px);

  width: min(92vw, 360px);
  padding:14px;
  border-radius:18px;

  background: var(--dd-bg);
  border: 1px solid var(--dd-border);
  box-shadow: var(--dd-shadow);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  z-index:999;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.download-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateX(-50%) translateY(0);
}

.download-menu a{
  display:flex;
  align-items:center;
  gap:10px;

  margin:10px 0;
  padding:14px 16px;
  border-radius:16px;

  text-align:left;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.2px;

  color: var(--dd-text);
  background: var(--dd-item-bg);
  border: 1px solid var(--dd-item-border);

  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.download-menu a:hover{
  transform: translateY(-1px);
  border-color: var(--dd-hover-border);
  background: var(--dd-hover-bg);
  box-shadow:
    0 14px 34px rgba(0,0,0,.45),
    0 0 0 1px rgba(120,210,255,.14) inset,
    0 0 22px rgba(64,160,255,.22);
}

.download-menu a img{
  width:18px;
  height:18px;
  flex-shrink:0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

.download-menu::after{
  content:"";
  position:absolute;
  bottom:-10px;
  left:50%;
  transform: translateX(-50%);
  border-width:10px 10px 0 10px;
  border-style:solid;
  border-color: var(--dd-arrow) transparent transparent transparent;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.35));
}

/* =========================================================
   Footer Actions (Download + Activate)
   ========================================================= */
.footer-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;

  padding:10px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(40,71,246,.10);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* Activate Button */
.activate-btn{
  border:0;
  cursor:pointer;
  padding:12px 18px;
  border-radius:14px;

  font-weight:900;
  letter-spacing:.2px;

  color:#fff;
  background: linear-gradient(135deg, rgba(248,113,113,.85), rgba(220,38,38,.95));

  box-shadow:
    0 10px 25px rgba(220,38,38,.28),
    0 0 0 1px rgba(248,113,113,.35) inset;

  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.activate-btn:hover{
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(220,38,38,.35),
    0 0 0 1px rgba(248,113,113,.45) inset;
}
.activate-btn:active{
  transform: translateY(0);
  filter: brightness(1.02);
}

/* =========================================================
   Modal
   ========================================================= */
.modal-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.55);
  z-index: 99999;
}
.modal-overlay.open{ display:flex; }

.modal-card{
  width: min(92vw, 520px);
  border-radius:18px;
  padding:14px;

  background: radial-gradient(120% 120% at 30% 0%,
    rgba(86,140,255,.18) 0%,
    rgba(10,14,30,.92) 55%,
    rgba(8,10,20,.95) 100%
  );
  border: 1px solid rgba(120,190,255,.22);

  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 0 1px rgba(40,71,246,.12) inset,
    0 0 28px rgba(64,160,255,.18);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:#eaf2ff;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 6px 10px;
}
.modal-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:.2px;
}

.modal-close{
  width:38px;
  height:38px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.modal-close:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.modal-close:active{ transform: translateY(0); }

.modal-body{ padding:6px; }

.modal-label{
  display:block;
  font-size:12px;
  opacity:.85;
  margin-bottom:8px;
  text-align:left;
}

.modal-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.modal-input{
  flex:1;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,14,30,.35);
  color:#fff;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.modal-input:focus{
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18);
}

.modal-check{
  padding:12px 16px;
  border-radius:14px;
  border:0;
  cursor:pointer;

  font-weight:900;
  letter-spacing:.2px;
  color:#fff;

  background: linear-gradient(135deg, rgba(40,71,246,.70), rgba(255,255,255,.10));
  box-shadow: 0 10px 25px rgba(40,71,246,.22);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.modal-check:hover{
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(40,71,246,.28);
}
.modal-check:active{ transform: translateY(0); }

.modal-msg{
  margin-top:12px;
  min-height:20px;
  font-size:14px;
  text-align:left;
}

/* ---------- Payment Section ---------- */

/* =========================================================
   Active Button
   ========================================================= */
.pay-section{ margin-top:14px; }
.pay-hint{
  font-size:13px;
  opacity:.92;
  margin-bottom:10px;
}

.pay-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.pay-option{
  padding:14px;
  border-radius:16px;
  text-align:left;
  cursor:pointer;

  color:#eaf2ff;
  background: linear-gradient(180deg, rgba(35,60,125,.35) 0%, rgba(10,14,30,.35) 100%);
  border: 1px solid rgba(120,190,255,.18);

  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset;

  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, filter .22s ease;
}
.pay-option:hover{
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.32);
  box-shadow:
    0 14px 32px rgba(0,0,0,.45),
    0 0 0 1px rgba(34,211,238,.10) inset;
}
.pay-option.selected{
  color:#fff;
  background: linear-gradient(135deg, rgba(34,211,238,.55), rgba(37,99,235,.75));
  border-color: rgba(34,211,238,.45);
  box-shadow:
    0 12px 28px rgba(34,211,238,.25),
    0 0 0 1px rgba(34,211,238,.30) inset;
  transform: translateY(-2px);
}

.pay-btn{
  width:100%;
  margin-top:12px;
  padding:14px 16px;

  border-radius:14px;
  border:1px solid rgba(220,38,38,.55);

  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  color:#fff;

  background: linear-gradient(135deg, #dc2626, #991b1b);
  box-shadow: 0 10px 25px rgba(220,38,38,.22);

  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.pay-btn:hover{
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(220,38,38,.30);
}
.pay-btn:active{ transform: translateY(0); }
.pay-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:none;
  transform:none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-height: 520px){
  body{ align-items:flex-start; }
  .card{ margin-top:12px; }
}

@media (max-width: 380px){
  .pay-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 360px){
  .logo{ width:92px; height:92px; }
  .logo img{ width:92px; }
}

/* =========================================================
   Light Theme (for dropdown variables + minor tweaks)
   ========================================================= */
@media (prefers-color-scheme: light){
  :root{
    --dd-bg: radial-gradient(120% 120% at 30% 0%,
      rgba(40,71,246,.14) 0%,
      rgba(255,255,255,.92) 55%,
      rgba(245,248,255,.96) 100%
    );
    --dd-border: rgba(40,71,246,.18);
    --dd-shadow: 0 18px 45px rgba(0,0,0,.18),
                 0 0 0 1px rgba(255,255,255,.75) inset,
                 0 0 24px rgba(40,71,246,.12);

    --dd-item-bg: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(240,246,255,.85) 100%);
    --dd-item-border: rgba(40,71,246,.14);
    --dd-text: #0b1220;

    --dd-hover-bg: linear-gradient(180deg, rgba(40,71,246,.14) 0%, rgba(240,246,255,.92) 100%);
    --dd-hover-border: rgba(40,71,246,.28);

    --dd-arrow: rgba(245,248,255,.96);
  }

  .footer-actions{
    background: rgba(255,255,255,.55);
    border-color: rgba(40,71,246,.12);
  }

  .download-menu a img{
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.25));
  }

  .modal-card{
    color:#0b1220;
    background: radial-gradient(120% 120% at 30% 0%,
      rgba(40,71,246,.10) 0%,
      rgba(255,255,255,.95) 55%,
      rgba(245,248,255,.98) 100%
    );
    box-shadow:
      0 18px 45px rgba(0,0,0,.18),
      0 0 0 1px rgba(255,255,255,.75) inset,
      0 0 24px rgba(40,71,246,.12);
  }

  .modal-input{
    background: rgba(255,255,255,.88);
    color:#0b1220;
    border-color: rgba(40,71,246,.14);
  }

  .modal-close{
    color:#0b1220;
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.08);
  }

  .pay-option{
    color:#0b1220;
    background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(240,246,255,.95) 100%);
    border-color: rgba(40,71,246,.14);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
  }

  .pay-option:hover{
    border-color: rgba(40,71,246,.22);
    box-shadow: 0 14px 30px rgba(0,0,0,.16);
  }
}

/* =========================================================
   Dark Mode (Page)
   ========================================================= */
@media (prefers-color-scheme: dark){
  :root{
    --card:#0b1220;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --shadow: 0 12px 30px rgba(0,0,0,.45);
  }

  body{ background-color:#0b1020; }

  .input{
    background:#0f172a;
    border-color:#334155;
    color:var(--text);
  }

  .input:focus{
    box-shadow: 0 0 0 3px rgba(40,71,246,.22);
  }
}

/* =========================================================
   Reduced Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{
    transition:none !important;
    scroll-behavior:auto !important;
  }
}



/* =========================================================
   Footer (inside card)
========================================================= */
/* Wrapper يجمع الكارد + الفوتر */
.auth-wrap{
  width:100%;
  max-width:420px;   /* نفس عرض الكارد */
  margin:0 auto;
}

/* Footer Card منفصل */
.footer-card{
  margin-top:14px;
  padding:16px;

  border-radius: 18px;
  background: rgba(11,18,32,.72);
  border: 1px solid rgba(120,190,255,.18);

  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 0 1px rgba(40,71,246,.10) inset;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  text-align:center;
  color:#cbd5e1;
}

/* النصوص الصغيرة */
.footer-meta{
  margin-top:12px;
  font-size:12px;
  line-height:1.6;
  opacity:.9;
}

.footer-card .links a{
  color:#60a5fa;
  text-decoration:none;
  font-weight:700;
}
.footer-card .links a:hover{
  text-decoration:underline;
}
/* =========================================================
   Light mode override (colors only)
========================================================= */
@media (prefers-color-scheme: light){

  .footer-card{
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(0,0,0,.08);

    box-shadow:
      0 12px 28px rgba(0,0,0,.12),
      0 0 0 1px rgba(0,0,0,.04) inset;

    color:#374151;
  }

  .footer-meta{
    color:#6b7280;
  }

  .footer-card .links a{
    color:#2563eb;
  }

}


/* =========================================================
  New word
========================================================= */


.new-badge {
    background: linear-gradient(45deg, #ff0000, #ff7300);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 20px;
    margin-left: 6px;
    animation: glow 1.2s infinite alternate;
    box-shadow: 0 0 8px rgba(255,0,0,0.8);
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px rgba(255,0,0,0.6);
        transform: scale(1);
    }
    to {
        box-shadow: 0 0 15px rgba(255,0,0,1);
        transform: scale(1.1);
    }
}