.tol-wrap { width: 100%; }

.tol-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.tol-left { background: #0b0b0b; }
.tol-side-image { width: 100%; height: 100%; object-fit: cover; display:block; }

.tol-right{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}

.tol-card{
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 22px;
  background: #fff;
}

.tol-header { text-align: right; margin-bottom: 14px; }
.tol-logo { max-height: 46px; display:block; margin-bottom: 10px; }
.tol-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.tol-subtitle { font-size: 14px; opacity: 0.8; line-height: 1.6; }

/* =========================
   2) +98 to LEFT + remove box
========================= */

/* Keep group as flex and force LTR ordering so prefix stays left visually */
.tol-phone-group{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  direction: ltr !important; /* critical: makes left-to-right layout predictable */
}

/* prefix box: remove border/background/padding so it's not a "box" */
.tol-flag{
  display:flex !important;
  align-items:center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  order: 0 !important; /* keep it left */
}

/* input should consume remaining width on the right */
.tol-phone-group .tol-input.tol-phone{
  flex: 1 1 auto !important;
  margin-top: 0 !important; /* prevent vertical misalignment with prefix */
  order: 1 !important;
}

/* Optional: make +98 a little clearer without box */
.tol-prefix{ font-weight: 700; opacity: .9; }
.tol-flag-emoji{ font-size: 18px; }

/* inputs */
.tol-input{
  width:100%;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  outline: none;
  margin-top: 10px;
}

/* =========================
   3) Remove red borders/outline on buttons
========================= */
.tol-btn,
.tol-linkbtn,
.tol-btn:focus,
.tol-btn:active,
.tol-btn:focus-visible,
.tol-linkbtn:focus,
.tol-linkbtn:active,
.tol-linkbtn:focus-visible,
.tol-wrap button:focus,
.tol-wrap button:active,
.tol-wrap button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* main button */
.tol-btn{
  width:100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  cursor:pointer;
}

/* OTP texts */
.tol-otp-title { font-size: 18px; font-weight: 700; margin-top: 10px; }
.tol-otp-hint { margin-top: 6px; font-size: 14px; opacity:0.85; line-height:1.6; }

/* timer row */
.tol-timer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
}

/* =========================
   4) Resend/Edit -> link style + move edit below login + login full width
========================= */

/* make "buttons" look like links */
.tol-linkbtn{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  opacity: 0.9 !important;
  font-weight: 500 !important;
  color:#0a7a2f
}

/* disabled resend */
.tol-linkbtn[disabled]{
  cursor: not-allowed !important;
  opacity: 0.45 !important;
  text-decoration: none !important;
}

/* Actions: stack vertically */
.tol-actions{
  display:flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 12px !important;
  align-items: stretch !important;
}

/* login button full width */
.tol-actions .tol-btn.tol-login{
  width: 100% !important;
}

/* edit phone under login + centered */
.tol-actions .tol-linkbtn.tol-edit-phone{
  width: auto !important;
  align-self: center !important;
  order: 2 !important;
}

/* ensure login first */
.tol-actions .tol-btn.tol-login{ order: 1 !important; }

.tol-msg { margin-top: 10px; font-size: 14px; }
.tol-msg.ok { color:#0a7a2f; }
.tol-msg.err { color:#b00020; }

.tol-link { display:inline-block; margin-top: 10px; }

@media (max-width: 768px) {
  .tol-layout { grid-template-columns: 1fr; }
  .tol-left { display:none !important; }
}
/* =====================================
   FINAL FIXES – Link color + red borders
===================================== */

/* 1) Force link-style buttons to be blue */
.tol-wrap .tol-linkbtn{
  color: #1a73e8 !important;       /* آبی استاندارد لینک */
}

.tol-wrap .tol-linkbtn:hover{
  color: #0c5bd6 !important;
  text-decoration: underline !important;
}

/* Disabled resend: خاکستری */
.tol-wrap .tol-linkbtn[disabled]{
  color: #999 !important;
}

/* 2) Kill ALL red borders / outlines / shadows on buttons */
.tol-wrap button,
.tol-wrap .tol-btn,
.tol-wrap .tol-linkbtn{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.tol-wrap button:focus,
.tol-wrap button:active,
.tol-wrap button:focus-visible,
.tol-wrap .tol-btn:focus,
.tol-wrap .tol-btn:active,
.tol-wrap .tol-btn:focus-visible,
.tol-wrap .tol-linkbtn:focus,
.tol-wrap .tol-linkbtn:active,
.tol-wrap .tol-linkbtn:focus-visible{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* مخصوص مرورگرهایی که focus ring قرمز می‌دهند */
.tol-wrap *:focus{
  outline: none !important;
  box-shadow: none !important;
}