:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --border:rgba(15,23,42,.10);
  --shadow:0 20px 55px rgba(15,23,42,.08);
  --text:#0f172a;
  --muted:#5b6476;
  --green:#0b8f44;
  --yellow:#f6c400;
  --wa:#0b8f44;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans Arabic","Noto Kufi Arabic",sans-serif;
}

/* Language pills */
.langbar{
  position:fixed;
  top:18px;
  left:18px;
  display:flex;
  gap:10px;
  padding:6px;
  border-radius:14px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  z-index:10;
}

.langbtn{
  border:1px solid var(--border);
  background:#fff;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  font-size:14px;
}

.langbtn.is-active{
  border-color:rgba(11,143,68,.35);
  box-shadow:0 0 0 4px rgba(11,143,68,.12);
}

/* Center layout */
.wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 16px;
  text-align:center;
}

.card{
  width:min(860px, 92vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:26px;
  box-shadow:var(--shadow);
  padding:46px 28px 30px;
}

/* Logo card */
.logoBox{
  width:150px;
  height:150px;
  margin:0 auto 18px;
  border-radius:22px;
  border:1px solid var(--border);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 16px 40px rgba(15,23,42,.06);
}

.logo{
  width:112px;
  height:auto;
  display:block;
  object-fit:contain;
}

/* Text */
.title{
  margin:6px 0 10px;
  font-size:44px;
  font-weight:800;
  color:var(--green);
  letter-spacing:.2px;
}

.sub{
  margin:0 auto 18px;
  max-width:720px;
  color:var(--muted);
  line-height:1.7;
  font-size:16px;
}

.kicker{
  margin:8px 0 14px;
  font-weight:800;
  letter-spacing:.08em;
  font-size:12px;
  color:rgba(15,23,42,.60);
}

/* Countdown never flips */
.countdown{
  direction:ltr !important;
  unicode-bidi: embed;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.tbox{
  width:120px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 10px;
  box-shadow:0 12px 26px rgba(15,23,42,.06);
}

.tval{
  font-size:34px;
  font-weight:800;
}

.tlabel{
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  color:rgba(15,23,42,.60);
}

/* Form row */
.formRow{
  width:min(720px, 92%);
  margin:0 auto;
  display:flex;
  gap:14px;
  align-items:stretch;
  justify-content:center;
  flex-direction:row; /* EN default */
}

/* ✅ Force Arabic layout: button LEFT, input RIGHT */
html[dir="rtl"] .formRow{
  flex-direction:row-reverse !important;
}

.input{
  flex:1;
  min-width:240px;
  padding:14px 18px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  font-size:15px;
  outline:none;
}

html[dir="rtl"] .input{
  text-align:right;
}

.input:focus{
  border-color:rgba(11,143,68,.40);
  box-shadow:0 0 0 5px rgba(11,143,68,.12);
}

/* Yellow button (no arrows) */
.btn{
  min-width:150px;
  border:0;
  border-radius:16px;
  background:var(--yellow);
  color:#111;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 18px 30px rgba(246,196,0,.20);
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn:active{ transform:translateY(1px); }
.btnText{ font-size:14px; }

/* Status & footer */
.note{
  min-height:22px;
  margin:10px 0 0;
  font-weight:700;
  color:rgba(15,23,42,.70);
}
.note.ok{ color:#0b8f44; }
.note.err{ color:#c2410c; }

.hint{
  margin:10px 0 0;
  color:rgba(15,23,42,.55);
  font-size:13px;
}

.footer{
  margin-top:22px;
  color:rgba(15,23,42,.55);
  font-size:12px;
}

/* WhatsApp floating bottom-left with icon */
.wa{
  position:fixed;
  left:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 18px 38px rgba(15,23,42,.12);
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  z-index:10;
}

.waIcon{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--wa);
}

.waLabel{
  font-size:14px;
}

@media (max-width:640px){
  .title{ font-size:34px; }
  .tbox{ width:105px; }
  .btn{ min-width:150px; }
  .waLabel{ display:none; } /* keep it clean on mobile */
}