/* =========================================================================
   ParPhonix — Login / Sign Up modals
   Liquid-glass container (heavy blur, refractive edge highlight) with
   neomorphic soft-UI controls (embossed/debossed shadows) inside. Text
   sits on frosted ".frost" chips so it stays legible over the shifting
   glass tint.
   ========================================================================= */

.auth-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 5, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.auth-backdrop.is-visible {
  opacity: 1;
}

.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.96);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  z-index: 2001;
  padding: 34px 30px 28px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);

  /* liquid glass: heavy blur + translucent dark base + refractive edge light */
  background: rgba(9, 11, 15, 0.55);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.08), background-color 0.6s ease;
}

.auth-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* colour-tint layer, separated so it can transition smoothly on its own
   (animating gradients directly is unreliable across browsers) */
.auth-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(197, 161, 91, 0.14);
  transition: background-color 0.6s ease;
  pointer-events: none;
  z-index: 0;
}

/* gender = female → shift the glass tint to a soft Persian rose pink */
.auth-modal.auth-modal--pink::before {
  background: rgba(216, 90, 145, 0.22);
}

.auth-modal__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.auth-modal__close:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* frosted matte chip so text stays legible over the moving glass tint */
.frost {
  display: inline-block;
  background: rgba(4, 6, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 3px 10px;
}

.auth-modal__title {
  font-family: 'Orbitron', 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.auth-modal__sub {
  font-size: 13px;
  color: #d7dae0;
  line-height: 1.6;
  margin: 6px 0 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-form[hidden] {
  display: none;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.auth-field label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #c5a15b);
  align-self: flex-start;
}

.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .auth-row { grid-template-columns: 1fr; }
}

/* neomorphic (soft-UI) debossed input */
.auth-input,
.auth-select {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: none;
  background: rgba(14, 17, 22, 0.6);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
  box-shadow:
    inset 3px 3px 7px rgba(0, 0, 0, 0.45),
    inset -2px -2px 5px rgba(255, 255, 255, 0.03);
  transition: box-shadow 0.25s ease;
}

.auth-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23c5a15b' d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

html[dir="rtl"] .auth-select {
  background-position: left 14px center;
  padding-right: 16px;
  padding-left: 38px;
}

.auth-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.auth-input:focus,
.auth-select:focus {
  outline: none;
  box-shadow:
    inset 3px 3px 7px rgba(0, 0, 0, 0.45),
    inset -2px -2px 5px rgba(255, 255, 255, 0.03),
    0 0 0 2px rgba(197, 161, 91, 0.45);
}

.auth-modal--pink .auth-input:focus,
.auth-modal--pink .auth-select:focus {
  box-shadow:
    inset 3px 3px 7px rgba(0, 0, 0, 0.45),
    inset -2px -2px 5px rgba(255, 255, 255, 0.03),
    0 0 0 2px rgba(216, 90, 145, 0.5);
}

/* gender segmented control — also neomorphic, raised when active */
.gender-group {
  display: flex;
  gap: 8px;
}

.gender-pill {
  flex: 1;
  padding: 10px 6px;
  border-radius: 12px;
  border: none;
  background: rgba(14, 17, 22, 0.55);
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4), inset -1px -1px 3px rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
}

.gender-pill.is-active {
  color: #06080a;
  background: linear-gradient(145deg, rgba(226, 193, 120, 0.95), rgba(179, 140, 64, 0.9));
  box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.35), -1px -1px 4px rgba(255, 255, 255, 0.05);
}

.auth-modal--pink .gender-pill.is-active {
  background: linear-gradient(145deg, rgba(232, 150, 190, 0.95), rgba(198, 90, 150, 0.9));
  color: #2b0a1a;
}

/* neomorphic raised submit button */
.auth-submit {
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(145deg, rgba(226, 193, 120, 0.95), rgba(179, 140, 64, 0.95));
  color: #1a1206;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.4), -3px -3px 10px rgba(255, 255, 255, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.6s ease;
}

.auth-submit:hover {
  transform: translateY(-1px);
}

.auth-submit:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4), -1px -1px 4px rgba(255, 255, 255, 0.04);
}

.auth-modal--pink .auth-submit {
  background: linear-gradient(145deg, rgba(232, 150, 190, 0.95), rgba(198, 90, 150, 0.95));
  color: #2b0a1a;
}

.auth-status {
  min-height: 18px;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.auth-status--ok { color: #f0c896; }
.auth-status--error { color: #f87171; }
/* پیام راهنما — نه خطا و نه موفقیت. مثلاً وقتی کاربر از کارت خدمات آمده. */
.auth-status--info { color: #9db4d0; }

.auth-switch {
  text-align: center;
  font-size: 13px;
  color: #d7dae0;
  margin: 4px 0 0;
}

.auth-switch__link {
  background: none;
  border: none;
  padding: 0 4px;
  color: var(--accent, #c5a15b);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-modal--pink .auth-switch__link {
  color: #e896be;
}

button.social {
  font: inherit;
  cursor: pointer;
}

@media (max-width: 480px) {
  .auth-modal { padding: 28px 20px 22px; border-radius: 22px; }
}

/* ── ورود با گوگل / گیت‌هاب ─────────────────────────────────────────── */

.oauth-block { margin-top: 18px; }

.oauth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #b9bec7;
}
.oauth-sep::before,
.oauth-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.oauth-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

.oauth-btn {
  flex: 1 1 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #f2f4f7;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.oauth-btn:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.3); }
.oauth-btn svg { width: 17px; height: 17px; flex: none; }
.oauth-btn[hidden] { display: none; }

/* راهنمای قوانین رمز عبور */
.auth-hint {
  display: block;
  font-size: 11.5px;
  line-height: 1.6;
  color: #a9b0ba;
  margin-top: 5px;
}