/* ═══════════════════════════════════════════════════════════
   PORTAL PAGE — TAROTOPIA
   portal.css
═══════════════════════════════════════════════════════════ */

:root {
  --bg-dark:       #030214;
  --main-purple:   #3C0753;
  --gold:          #C9A84C;
  --gold-hover:    #dbbe6a;
  --pink:          #C37F9F;
  --soft:          #B8AFD4;
  --deep-blue:     #030637;
  --gold-glow:     rgba(219,190,106,0.42);
  --shadow-violet: rgba(60,7,83,0.42);
  --error:         #fca5a5; /* Tailwind red-300 */
  --success:       #86efac; /* Tailwind green-300 */
  --info:          #93c5fd; /* Tailwind blue-300 */
  --transition:    cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Prata", serif;
  overflow-x: hidden;
  min-height: 100vh;
  color: white;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(60,7,83,0.52), transparent 70%),
    radial-gradient(circle at bottom, rgba(201,168,76,0.07),  transparent 32%),
    linear-gradient(180deg, #030214 0%, #07041A 50%, #030214 100%);
  background-attachment: fixed;
}

/* ── BACKGROUND & LAYOUT ─────────────────────────────────── */

.background-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  filter: blur(120px);
  background: radial-gradient(ellipse at 50% 40%, rgba(110,40,160,0.26), transparent 55%);
}

#starCanvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}

.portal-main {
  position: relative; z-index: 10;
  min-height: 100vh;
  padding: 40px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-container {
  width: 100%;
  max-width: 480px;
  background: rgba(8, 8, 18, 0.65);
  border: 1px solid rgba(184, 175, 212, 0.15);
  border-radius: 12px;
  padding: 24px;
}

.logo-wrap {
  display: block;
  width: 200px;
  margin: 0 auto 24px;
}
.logo-wrap img {
  width: 100%; height: auto;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.22)) drop-shadow(0 0 18px rgba(195,127,159,0.14));
  transition: filter 0.35s ease, transform 0.35s var(--transition);
}
.logo-wrap:hover img {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(219,190,106,0.68)) drop-shadow(0 0 26px rgba(219,190,106,0.32));
}

/* ── TABS ────────────────────────────────────────────────── */

.portal-tabs {
  display: flex;
  border-bottom: 1px solid rgba(184, 175, 212, 0.15);
  margin-bottom: 24px;
}
.tab-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--soft);
  padding: 12px;
  font-family: 'Grenze', serif;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-btn:hover {
  color: white;
}
.tab-btn.active {
  color: var(--gold-hover);
  border-bottom-color: var(--gold-hover);
}

/* ── FORM WRAPPER & TRANSITIONS ──────────────────────────── */

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-wrapper {
  display: none;
}
.form-wrapper.active {
  display: block;
  animation: tabFadeIn 0.32s ease both;
}

/* ── GENERAL FORM STYLES ─────────────────────────────────── */

form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label {
  font-size: 15px;
  color: var(--soft);
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  background: rgba(3, 2, 20, 0.7);
  border: 1px solid rgba(184, 175, 212, 0.2);
  border-radius: 6px;
  padding: 12px;
  color: white;
  font-family: 'Prata', serif;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
}

.password-wrapper {
  position: relative;
}
.password-toggle {
  position: absolute;
  right: 0; top: 0;
  height: 100%;
  width: 44px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23B8AFD4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>') center no-repeat;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.password-toggle:hover { opacity: 1; }
.password-toggle.toggled {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23B8AFD4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>');
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--gold);
}

.label-optional {
  font-size: 0.78em; opacity: 0.55; font-weight: 400;
}

.form-link {
  color: var(--soft);
  text-decoration: none;
  transition: color 0.2s;
}
.form-link:hover {
  color: var(--gold-hover);
  text-decoration: underline;
}

.form-submit-btn {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--bg-dark);
  padding: 12px 24px;
  border-radius: 6px;
  font-family: 'Prata', serif;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 8px;
}
.form-submit-btn:hover:not(:disabled) {
  background: var(--gold-hover);
  box-shadow: 0 0 15px var(--gold-glow);
}
.form-submit-btn:disabled {
  background: rgba(184, 175, 212, 0.1);
  border-color: rgba(184, 175, 212, 0.2);
  color: rgba(184, 175, 212, 0.4);
  cursor: not-allowed;
}

@keyframes btnSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.form-submit-btn.loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}
.form-submit-btn.loading::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(3, 2, 20, 0.25);
  border-top-color: var(--bg-dark);
  animation: btnSpin 0.65s linear infinite;
}

/* ── SIGNUP SPECIFIC STYLES ──────────────────────────────── */

.contact-method-selector {
  margin-bottom: 4px;
}
.contact-input-wrapper {
  display: none; /* Controlled by JS */
  margin-left: 24px;
  margin-bottom: 8px;
}

/* ── FEEDBACK & ERRORS ───────────────────────────────────── */

.form-feedback {
  display: none;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 15px;
}
.form-feedback.info { background-color: rgba(147, 197, 253, 0.1); color: var(--info); }
.form-feedback.success { background-color: rgba(134, 239, 172, 0.1); color: var(--success); }
.form-feedback.error { background-color: rgba(252, 165, 165, 0.1); color: var(--error); }

@keyframes errFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.error-message {
  display: none;
  color: var(--error);
  font-size: 14px;
}
.error-message.visible {
  display: block;
  animation: errFadeIn 0.2s ease both;
}

.form-feedback.info,
.form-feedback.success,
.form-feedback.error {
  animation: errFadeIn 0.25s ease both;
}

input.has-error {
  border-color: var(--error) !important;
}
input.has-error:focus {
  box-shadow: 0 0 10px rgba(252, 165, 165, 0.4);
}

/* ── MEDIA QUERIES ───────────────────────────────────────── */

@media (min-width: 400px) {
  .portal-container {
    padding: 32px 40px;
  }
}

@media (min-width: 768px) {
  .portal-main {
    padding: 60px 24px;
  }
  .tab-btn {
    font-size: 20px;
  }
}

@media (max-width: 399px) {
  .portal-container { padding: 20px 16px; }
  .tab-btn { font-size: 15px; padding: 10px 8px; }
  input[type="text"],
  input[type="email"],
  input[type="password"] { padding: 10px; min-height: 44px; }
  .form-submit-btn { font-size: 16px; min-height: 44px; }
}