.dgbb-auth-root,
.dgbb-auth-root * { box-sizing: border-box; }

.dgbb-auth-root {
  --dgbb-green: var(--dgbb-color-brand, #79bf18);
  --dgbb-green-dark: var(--dgbb-color-brand-strong, #5da20b);
  --dgbb-green-soft: var(--dgbb-color-brand-soft, #edf8dc);
  --dgbb-cream: #f8f8ef;
  --dgbb-paper: #fff;
  --dgbb-text: #1f241b;
  --dgbb-muted: #777d70;
  --dgbb-line: #e4e7dc;
  --dgbb-danger: #b42318;
  --dgbb-danger-bg: #fff4f2;
  --dgbb-success: #167044;
  --dgbb-success-bg: #ecfdf3;
  --dgbb-info: #526e2d;
  --dgbb-info-bg: #f2f7e9;
  --dgbb-radius: 1.15rem;
  --dgbb-shadow: 0 18px 55px rgba(45, 55, 30, .12);
  --dgbb-focus: 0 0 0 3px rgba(121, 191, 24, .18);
  color: var(--dgbb-text);
  direction: rtl;
  font-family: var(--skin-font-sans, IRANSans, Vazirmatn, Tahoma, sans-serif);
  font-size: 16px;
  line-height: 1.5;
}
.dgbb-auth-root[dir="ltr"] { direction: ltr; }

.dgbb-auth-passkey-probe { display: none !important; }

.dgbb-auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--dgbb-cream);
}

.dgbb-auth-layout {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(20rem, 50%) minmax(24rem, 50%);
  grid-template-areas: "visual panel";
  direction: ltr;
}

.dgbb-auth-visual {
  grid-area: visual;
  min-height: 100%;
  position: relative;
  background-color: #bd8a41;
  background-image: url('../images/login.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image .2s ease;
}

.dgbb-auth-page.is-registration .dgbb-auth-visual {
  background-image: url('../images/register.jpg');
  background-position: center 42%;
}

.dgbb-auth-visual-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 35, 18, .06), transparent 35%);
  pointer-events: none;
}

.dgbb-auth-panel {
  grid-area: panel;
  min-width: 0;
  min-height: 100%;
  padding: clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  direction: rtl;
  background: var(--dgbb-cream);
}
.dgbb-auth-root[dir="ltr"] .dgbb-auth-panel { direction: ltr; }

.dgbb-auth-wordmark {
  position: absolute;
  inset-block-start: clamp(1.25rem, 3.2vw, 2.8rem);
  inset-inline-start: clamp(1.25rem, 3.2vw, 3rem);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--dgbb-green);
  user-select: none;
}

.dgbb-auth-wordmark span {
  font-family: Arial, sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.dgbb-auth-card {
  width: min(30rem, 100%);
  max-height: calc(100dvh - 9rem);
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  border: 1px solid rgba(220, 224, 210, .75);
  border-radius: var(--dgbb-radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--dgbb-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--dgbb-line) transparent;
}

.dgbb-auth-topbar {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.dgbb-auth-back {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--dgbb-line);
  border-radius: .75rem;
  background: var(--dgbb-paper);
  color: var(--dgbb-text);
  cursor: pointer;
  transform: rotate(180deg);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.dgbb-auth-back:hover { border-color: var(--dgbb-green); color: var(--dgbb-green-dark); }
.dgbb-auth-back.is-hidden { opacity: 0; pointer-events: none; }

.dgbb-auth-progress { display: flex; gap: .32rem; align-items: center; }
.dgbb-auth-progress span {
  width: .38rem;
  height: .38rem;
  border-radius: 999px;
  background: var(--dgbb-line);
  transition: width .18s ease, background .18s ease;
}
.dgbb-auth-progress span.is-active { width: 1.4rem; background: var(--dgbb-green); }

.dgbb-auth-head { margin-bottom: 1.45rem; text-align: center; }
.dgbb-auth-eyebrow {
  margin-bottom: .4rem;
  color: var(--dgbb-green-dark);
  font-size: .72rem;
  font-weight: 800;
}
.dgbb-auth-head h1 {
  margin: 0;
  color: var(--dgbb-text);
  font: inherit;
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  font-weight: 900;
  line-height: 1.55;
}
.dgbb-auth-head p {
  margin: .55rem auto 0;
  color: var(--dgbb-muted);
  font-size: .79rem;
  line-height: 1.9;
}

.dgbb-auth-alert {
  margin: 0 0 1rem;
  padding: .75rem .9rem;
  border: 1px solid;
  border-radius: .8rem;
  font-size: .78rem;
  line-height: 1.8;
}
.dgbb-auth-alert.is-error { color: var(--dgbb-danger); border-color: #fecdca; background: var(--dgbb-danger-bg); }
.dgbb-auth-alert.is-success { color: var(--dgbb-success); border-color: #abefc6; background: var(--dgbb-success-bg); }
.dgbb-auth-alert.is-info { color: var(--dgbb-info); border-color: #dce8c9; background: var(--dgbb-info-bg); }

.dgbb-auth-step { display: block; animation: dgbbAuthIn .2s ease; }
@keyframes dgbbAuthIn { from { opacity: 0; transform: translateY(.3rem); } to { opacity: 1; transform: none; } }

.dgbb-auth-field { margin-bottom: .95rem; }
.dgbb-auth-field label,
.dgbb-auth-section-title {
  display: block;
  margin-bottom: .42rem;
  color: var(--dgbb-text);
  font-size: .78rem;
  font-weight: 800;
}
.dgbb-auth-required { color: var(--dgbb-danger); }

.dgbb-auth-field input,
.dgbb-auth-field select,
.dgbb-auth-profile-grid input,
.dgbb-auth-profile-grid select,
.dgbb-auth-captcha input {
  width: 100%;
  min-height: 3rem;
  padding: 0 .9rem;
  border: 1px solid var(--dgbb-line);
  border-radius: .7rem;
  outline: 0;
  background: var(--dgbb-paper);
  color: var(--dgbb-text);
  font: inherit;
  font-size: .85rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.dgbb-auth-field input:focus,
.dgbb-auth-field select:focus,
.dgbb-auth-profile-grid input:focus,
.dgbb-auth-profile-grid select:focus,
.dgbb-auth-captcha input:focus { border-color: var(--dgbb-green); box-shadow: var(--dgbb-focus); }
.dgbb-auth-field input:disabled,
.dgbb-auth-field select:disabled { background: #f2f3ed; opacity: .75; }

.dgbb-auth-help {
  display: block;
  margin-top: .42rem;
  color: var(--dgbb-muted);
  font-size: .68rem;
  line-height: 1.75;
}

.dgbb-auth-input-wrap { position: relative; }
.dgbb-auth-identifier-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.dgbb-auth-identifier-row.has-country { grid-template-columns: minmax(7.4rem, .42fr) minmax(0, 1fr); }
.dgbb-auth-country {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0 .55rem;
  border: 1px solid var(--dgbb-line);
  border-radius: .7rem;
  outline: 0;
  background: var(--dgbb-paper);
  color: var(--dgbb-text);
  direction: ltr;
  font: inherit;
  font-size: .72rem;
}
.dgbb-auth-country:focus { border-color: var(--dgbb-green); box-shadow: var(--dgbb-focus); }
.dgbb-auth-input-wrap input { padding-inline-end: 4.4rem; }
.dgbb-auth-clear,
.dgbb-auth-password-toggle {
  position: absolute;
  inset-inline-end: .5rem;
  top: 50%;
  transform: translateY(-50%);
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 .5rem;
  border: 0;
  border-radius: .55rem;
  background: #f3f4ee;
  color: var(--dgbb-muted);
  font: inherit;
  font-size: .7rem;
  cursor: pointer;
}

.dgbb-auth-primary,
.dgbb-auth-passkey {
  width: 100%;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.dgbb-auth-primary {
  border: 1px solid var(--dgbb-green);
  background: var(--dgbb-green);
  color: #fff;
  box-shadow: 0 9px 22px rgba(121, 191, 24, .22);
}
.dgbb-auth-primary:hover:not(:disabled) { background: var(--dgbb-green-dark); border-color: var(--dgbb-green-dark); transform: translateY(-1px); }
.dgbb-auth-primary:disabled { opacity: .62; cursor: wait; }
.dgbb-auth-passkey {
  margin-top: .65rem;
  border: 1px solid var(--dgbb-green);
  background: transparent;
  color: var(--dgbb-green-dark);
  box-shadow: none;
}
.dgbb-auth-passkey:hover { background: var(--dgbb-green-soft); }

.dgbb-auth-link {
  border: 0;
  padding: .25rem;
  background: transparent;
  color: var(--dgbb-green-dark);
  font: inherit;
  font-size: .73rem;
  font-weight: 800;
  cursor: pointer;
}
.dgbb-auth-link:disabled { opacity: .45; cursor: default; }
.dgbb-auth-center-link { display: block; margin: .8rem auto 0; }
.dgbb-auth-secondary { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-top: .75rem; }

.dgbb-auth-choice-grid { display: grid; gap: .7rem; }
.dgbb-auth-choice {
  width: 100%;
  min-height: 4.25rem;
  padding: .9rem;
  border: 1px solid var(--dgbb-line);
  border-radius: .8rem;
  background: var(--dgbb-paper);
  color: var(--dgbb-text);
  text-align: right;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.dgbb-auth-root[dir="ltr"] .dgbb-auth-choice { text-align: left; }
.dgbb-auth-choice:hover { border-color: var(--dgbb-green); background: var(--dgbb-green-soft); }
.dgbb-auth-choice strong { display: block; margin-bottom: .2rem; font-size: .84rem; }
.dgbb-auth-choice span { color: var(--dgbb-muted); font-size: .72rem; line-height: 1.7; }

.dgbb-auth-otp {
  position: relative;
  direction: ltr;
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin: .2rem auto 1rem;
  cursor: text;
}
.dgbb-auth-otp-real {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  opacity: .01;
  background: transparent;
  color: transparent;
  font-size: 16px;
  caret-color: transparent;
}
.dgbb-auth-otp-box {
  width: min(3rem, 12vw);
  height: 3.2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--dgbb-line);
  border-radius: .72rem;
  background: var(--dgbb-paper);
  color: var(--dgbb-text);
  font-size: 1.15rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.dgbb-auth-otp-box.is-filled { border-color: #afd575; }
.dgbb-auth-otp-box.is-active { border-color: var(--dgbb-green); box-shadow: var(--dgbb-focus); }
.dgbb-auth-code-tools { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .75rem; color: var(--dgbb-muted); font-size: .7rem; }

.dgbb-auth-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: .9rem; }
.dgbb-auth-profile-grid .dgbb-auth-field { margin: 0; }
.dgbb-auth-roles { margin: .9rem 0; }
.dgbb-auth-role { display: flex; align-items: flex-start; gap: .6rem; margin-top: .45rem; padding: .7rem; border: 1px solid var(--dgbb-line); border-radius: .75rem; cursor: pointer; }
.dgbb-auth-role.is-selected { border-color: var(--dgbb-green); background: var(--dgbb-green-soft); }
.dgbb-auth-role input { margin-top: .25rem; accent-color: var(--dgbb-green); }
.dgbb-auth-role-content { min-width: 0; flex: 1; display: grid; gap: .2rem; }
.dgbb-auth-role-content strong { font-size: .78rem; line-height: 1.7; }
.dgbb-auth-role-description { color: var(--dgbb-muted); font-size: .68rem; line-height: 1.7; }
.dgbb-auth-role-meta { display: flex; flex-wrap: wrap; gap: .35rem .7rem; color: var(--dgbb-muted); font-size: .66rem; }
.dgbb-auth-role-meta em { font-style: normal; }

.dgbb-auth-captcha { margin: .85rem 0 .95rem; padding: .75rem; border: 1px solid var(--dgbb-line); border-radius: .75rem; background: #f7f8f2; }
.dgbb-auth-captcha-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .6rem; font-size: .76rem; }
.dgbb-auth-captcha-body { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .6rem; align-items: center; }
.dgbb-auth-captcha img { width: 7rem; height: 3rem; object-fit: contain; border: 1px solid var(--dgbb-line); border-radius: .55rem; background: #fff; }

.dgbb-auth-social { margin-top: 1.2rem; }
.dgbb-auth-social-title { position: relative; margin-bottom: .75rem; color: var(--dgbb-muted); text-align: center; font-size: .68rem; }
.dgbb-auth-social-title::before,
.dgbb-auth-social-title::after { content: ''; position: absolute; top: 50%; width: 27%; height: 1px; background: var(--dgbb-line); }
.dgbb-auth-social-title::before { right: 0; }
.dgbb-auth-social-title::after { left: 0; }
.dgbb-auth-social-controls { text-align: center; }

.dgbb-auth-privacy-note { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--dgbb-line); color: var(--dgbb-muted); text-align: center; font-size: .64rem; line-height: 1.8; }
.dgbb-auth-payment { margin: 1rem 0; text-align: center; }
.dgbb-auth-payment-icon { width: 3.75rem; height: 3.75rem; margin: 0 auto .9rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.6rem; font-weight: 900; }
.dgbb-auth-payment.is-success .dgbb-auth-payment-icon { background: var(--dgbb-success-bg); color: var(--dgbb-success); }
.dgbb-auth-payment.is-error .dgbb-auth-payment-icon { background: var(--dgbb-danger-bg); color: var(--dgbb-danger); }
.dgbb-auth-payment.is-pending .dgbb-auth-payment-icon { background: var(--dgbb-info-bg); color: var(--dgbb-info); }
.dgbb-auth-payment h2 { margin: 0 0 .55rem; font: inherit; font-size: 1.25rem; font-weight: 900; }
.dgbb-auth-payment p { margin: 0; color: var(--dgbb-muted); font-size: .8rem; line-height: 1.8; }
.dgbb-auth-reference { margin-top: .9rem; padding: .65rem; border-radius: .65rem; background: #f4f5ef; direction: ltr; font-size: .74rem; }

.dgbb-auth-spinner { width: 1rem; height: 1rem; display: inline-block; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: dgbbSpin .7s linear infinite; }
@keyframes dgbbSpin { to { transform: rotate(360deg); } }

@media (max-width: 64rem) {
  .dgbb-auth-layout { grid-template-columns: minmax(18rem, 44%) minmax(24rem, 56%); }
  .dgbb-auth-panel { padding-inline: clamp(1.2rem, 3vw, 2.2rem); }
}

@media (max-width: 48rem) {
  .dgbb-auth-page { overflow: visible; background: var(--dgbb-cream); }
  .dgbb-auth-layout {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .dgbb-auth-visual { width: 100%; min-height: clamp(19rem, 48vh, 30rem); background-position: center 38%; }
  .dgbb-auth-page.is-registration .dgbb-auth-visual { background-position: center 30%; }
  .dgbb-auth-visual-shade { background: linear-gradient(180deg, transparent 55%, rgba(26, 34, 12, .22)); }
  .dgbb-auth-panel { min-height: 0; padding: 0 .85rem 1.5rem; background: transparent; }
  .dgbb-auth-wordmark {
    position: relative;
    z-index: 2;
    inset: auto;
    width: min(31rem, calc(100% - 1.2rem));
    justify-content: flex-end;
    margin: -3rem auto .7rem;
    padding-inline: .7rem;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.28));
  }
  .dgbb-auth-card { width: min(31rem, 100%); max-height: none; overflow: visible; padding: 1.35rem; border-radius: 1rem; }
}

@media (max-width: 34rem) {
  .dgbb-auth-visual { min-height: clamp(16rem, 43vh, 23rem); }
  .dgbb-auth-panel { padding-inline: .6rem; }
  .dgbb-auth-card { padding: 1.05rem; }
  .dgbb-auth-head { margin-bottom: 1.1rem; }
  .dgbb-auth-head h1 { font-size: 1.25rem; }
  .dgbb-auth-profile-grid { grid-template-columns: 1fr; }
  .dgbb-auth-identifier-row.has-country { grid-template-columns: 6.6rem minmax(0, 1fr); }
  .dgbb-auth-captcha-body { grid-template-columns: 1fr; }
  .dgbb-auth-captcha img { width: 100%; height: 3.3rem; }
  .dgbb-auth-otp { gap: .27rem; }
  .dgbb-auth-otp-box { width: min(2.65rem, 13vw); height: 2.9rem; border-radius: .62rem; }
  .dgbb-auth-code-tools { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .dgbb-auth-root *, .dgbb-auth-root *::before, .dgbb-auth-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}