/* هوية تيرا الموحّدة للبوابة: الألوان والخط والمقاس وقوالب الحقول.
   الصفحة الرئيسية هي المرجع. الشاشات اللاحقة تستعمل هذا الملف ولا تخترع شكلًا آخر. */
/* ‏رموزُ --id-* انتقلت إلى كتلةِ الرموزِ الموحَّدةِ أعلى theme.css (v13). */

.t2-auth,
.t2-dlg-skin {
  font-family: var(--t2-ff-text);
  color: var(--id-ink);
}

.t2-auth .t2-auth-panel,
.t2-auth .t2-au-card {
  position: relative;
}

.t2-auth .t2-id-cancel {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--id-line);
  border-radius: 12px;
  background: #fff;
  color: var(--id-navy);
  cursor: pointer;
}

.t2-auth .t2-id-cancel:hover,
.t2-auth .t2-id-cancel:focus {
  border-color: var(--id-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 165, 173, .22);
}

.t2-auth .t2-id-tools,
.t2-auth .t2-id-stage-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.t2-auth .t2-id-tools { margin-bottom: 12px; }
.t2-auth .t2-id-stage-nav { margin-top: 12px; }
.t2-auth .t2-id-tools .t2-au-btn,
.t2-auth .t2-id-stage-nav .t2-au-btn { width: auto; }

.t2-auth #reg-wa-link:not([hidden]),
.t2-auth #reg-nip:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--id-gap);
  align-content: start;
}

.t2-auth #reg-wa-ask[hidden],
.t2-auth #reg-wa-ask.hidden,
.t2-auth #reg-stage-1[hidden],
.t2-auth #reg-stage-2[hidden],
.t2-auth #reg-stage-3[hidden],
.t2-auth #reg-stage-4[hidden],
.t2-auth #forgot-stage-1[hidden],
.t2-auth #forgot-stage-2[hidden],
.t2-auth #forgot-card-wa[hidden],
.t2-auth #forgot-card-email[hidden],
.t2-auth #forgot-card-wa.hidden,
.t2-auth #forgot-card-email.hidden,
.t2-auth #forgot-hold[hidden],
.t2-auth #form-forgot.hidden { display: none; }

.t2-auth .t2-auth-body { gap: 22px; }
.t2-auth .t2-auth-form,
.t2-auth .t2-reg-stage,
.t2-auth #forgot-stage-1,
.t2-auth #forgot-stage-2 {
  display: grid;
  gap: 20px;
  align-content: start;
}
:is(.t2-auth, .t2-dlg-skin) .t2-reg-chan {
  gap: 16px;
  margin: 0 0 20px;
  padding: 16px;
}
.t2-auth #forgot-stage-1 .t2-reg-chan,
.t2-auth #forgot-stage-2 .t2-reg-chan,
.t2-auth .t2-reg-stage .t2-reg-chan { margin: 0; }
:is(.t2-auth, .t2-dlg-skin) .t2-reg-chan-top { gap: 16px; }
:is(.t2-auth, .t2-dlg-skin) .t2-reg-sheet,
.t2-auth .t2-auth-timer.t2-reg-sheet { gap: 12px; }
.t2-auth .t2-phone-row { gap: 12px; }
:is(.t2-auth, .t2-dlg-skin) .t2-otp.t2-seg,
:is(.t2-auth, .t2-dlg-skin) .t2-reg-digits { gap: 8px; }

.t2-auth #reg-nip > .field,
.t2-auth #reg-nip > .t2-reg-line,
.t2-auth #reg-nip > .t2-au-btn,
.t2-auth #reg-nip-match,
.t2-auth #reg-nip-save,
.t2-auth .t2-auth-form > .field,
.t2-auth .t2-auth-form > .t2-reg-line,
.t2-auth .t2-reg-stage > .field {
  position: static;
  width: 100%;
  max-width: 100%;
  margin: 0;
  inset: auto;
}

.t2-auth .t2-reg-path {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.t2-auth .t2-reg-path li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--id-line);
  border-radius: var(--id-card);
  background: #fff;
  color: var(--id-muted);
  font-family: var(--t2-ff-display);
}

.t2-auth .t2-reg-path li .t2-reg-path-mark {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 0;
  background: var(--id-navy);
  color: #fff;
  font-family: var(--t2-ff-display);
  font-weight: 700;
}

.t2-auth .t2-reg-path li.is-done {
  color: #067A82;
  border-color: #8fd4d8;
}

.t2-auth .t2-reg-path li.is-done .t2-reg-path-mark {
  color: transparent;
  background-color: var(--id-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.t2-auth .t2-reg-path li.is-now {
  color: var(--id-navy);
  border-color: var(--id-gold);
  background: #FFF8E8;
}

.t2-auth .t2-reg-path li.is-now .t2-reg-path-mark {
  background: var(--id-gold);
  color: var(--id-navy);
}

html[dir="rtl"] .t2 select.t2-input:not([multiple]),
html[dir="rtl"] .t2 select.t2-country-code,
html[dir="rtl"] select.t2-country-code {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: light;
  accent-color: var(--id-navy);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%230A1F44' d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: left 12px center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-inline-start: 14px;
  padding-inline-end: 42px;
  color: var(--id-navy);
}

html[dir="rtl"] .t2 select.t2-input:not([multiple]):is(:hover, :focus, :active, :focus-visible),
html[dir="rtl"] .t2 select.t2-country-code:is(:hover, :focus, :active, :focus-visible),
html[dir="rtl"] select.t2-country-code:is(:hover, :focus, :active, :focus-visible) {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%230A1F44' d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: left 12px center;
  outline: none;
}

html[dir="rtl"] .t2 select.t2-input:not([multiple]) option,
html[dir="rtl"] select.t2-country-code option {
  background-color: #fff;
  color: var(--id-navy);
  font-family: var(--t2-ff-text);
}

@media (max-width: 34rem) {
  .t2-auth #reg-wa-link:not([hidden]),
  .t2-auth #reg-nip:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--id-gap);
  }
  .t2-auth #reg-nip > .field,
  .t2-auth #reg-nip > .t2-reg-line,
  .t2-auth #reg-nip-match,
  .t2-auth #reg-nip-save {
    position: static;
    width: 100%;
    margin: 0;
  }
  .t2-auth .t2-id-cancel { top: 8px; left: 8px; }
  .t2-auth .t2-reg-path li .t2-reg-path-mark { width: 32px; height: 32px; }
  :is(.t2-auth, .t2-dlg-skin) .t2-reg-chan { padding: 16px; gap: 16px; }
  .t2-auth .t2-auth-body { gap: 22px; }
  .t2-auth #forgot-stage-1:not([hidden]),
  .t2-auth #forgot-stage-2:not([hidden]) { gap: 20px; }
}

.t2-reg-heart {
  color: #d0122d;
  font-size: 1.45rem;
  line-height: 1;
  display: inline-block;
  animation: reg-heart-beat 1s ease-in-out infinite;
}

@keyframes reg-heart-beat {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.28); }
  70% { transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .t2-reg-heart { animation: none; }
}

.t2-box-error.is-code-bad.hidden,
.t2-reg-expired[hidden],
.t2-auth #form-register[hidden],
.t2-auth #form-reg-profile[hidden] { display: none; }

.t2-box-error.is-code-bad,
.t2-reg-line.is-code-bad,
#toast-root .t2-toast.is-code-bad {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8d1020;
  background: #fff1f3;
  border: 1px solid #f3b4bc;
}

#toast-root .t2-toast.is-code-bad {
  --tone: #d0122d;
  --wash: #ffe4e8;
}

.t2-reg-line.is-code-bad {
  border-radius: 16px;
  padding: 12px 14px;
}

.t2-reg-draft-card {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--id-line, #D4DEEA);
  border-radius: 24px;
  background: #fff;
}

.t2-reg-draft-title {
  margin: 0;
  color: var(--id-navy, #0A1F44);
  font-family: var(--t2-ff-display);
  font-weight: 700;
}

.t2-reg-request-no {
  margin: 0;
  padding: 14px 12px;
  border-radius: 16px;
  background: var(--id-navy, #0A1F44);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
}

.t2-reg-draft-meta {
  display: grid;
  gap: 8px;
  margin: 0;
}

.t2-reg-draft-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--id-paper, #F4F7FA);
}

.t2-reg-draft-meta dt {
  margin: 0;
  color: var(--id-muted, #566A88);
}

.t2-reg-draft-meta dd {
  margin: 0;
  color: var(--id-navy, #0A1F44);
  font-weight: 700;
  text-align: left;
}

.t2-reg-draft-meta div:last-child {
  background: #fff6df;
  border: 1px solid var(--id-gold, #FFC861);
}

.t2-reg-clock {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--id-gold, #FFC861);
  border-radius: 20px;
  background: #fffaf0;
}

.t2-reg-clock-k,
.t2-reg-clock-n { margin: 0; color: var(--id-muted, #566A88); }

.t2-reg-clock-t {
  margin: 0;
  color: var(--id-navy, #0A1F44);
  font-family: var(--t2-ff-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.t2-reg-expired {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #f3b4bc;
  border-radius: 20px;
  background: #fff1f3;
  color: #8d1020;
}

.t2-reg-expired[hidden] { display: none; }

#reg-pf-mail[readonly],
#reg-pf-phone-show[readonly] {
  background: var(--id-paper, #F4F7FA);
  color: var(--id-navy, #0A1F44);
}