/**
 *
 * Apply Here your Custom CSS
 *
*/

/*SignUP CSS*/

/* PAGE BACKGROUND */
/* ====== BASE ====== */
:root{
  --bg-dark: #0A192F;
  --muted: #9ca3af;
  --card-bg: rgba(16,26,47,0.6);
  --card-border: rgba(25,59,97,0.5);
  --accent: #f4c025;
  --teal: rgba(19,84,122,0.5);
  --glass-blur: 20px;
  --radius-lg: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Space Grotesk", sans-serif;
  background: var(--bg-dark);
  color:#d1d5db;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Page wrapper with decorative grids & radial accents */
.page-wrapper{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:32px;
  gap:40px;
  background-image:
    radial-gradient(circle at top right, rgba(19,84,122,0.3), transparent 40%),
    radial-gradient(circle at bottom left, rgba(244,192,37,0.1), transparent 30%),
    linear-gradient(rgba(20,84,122,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,84,122,0.08) 1px, transparent 1px);
  background-size: 2rem 2rem;
  background-position: center center;
  /* allow whole page to grow vertically */
}

/* Layout: left = form, right = illustration (hidden on small) */
.left-section{
  width:100%;
  max-width:640px;
}

.right-section{
  display:none;
  width:45%;
  padding-left:24px;
}
@media (min-width:1024px){
  .page-wrapper{align-items:center; padding:48px}
  .right-section{display:block}
}

/* Title */
.title-box{ margin-bottom:18px; text-align:center }
.goldrush-title{
  font-size:38px;
  font-weight:700;
  letter-spacing:0.06em;
  margin:0;
  background: linear-gradient(45deg, var(--accent), #BF953F);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ====== CARD ====== */
/* Card does NOT create its own scroll — page scrolls instead */
.form-card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  padding:36px;
  box-shadow: 0 0 15px rgba(244,192,37,0.18);
  /* no max-height and no internal overflow */
  width:100%;
}

/* Header inside card */
.form-header h2{
  margin:0;
  color:#fff;
  font-size:26px;
  font-weight:700;
  letter-spacing: -0.01em;
}
.form-header p{
  margin:8px 0 20px 0;
  color:var(--muted);
  font-size:14px;
}

/* ====== FORM ====== */
.form-wrapper{ display:block }

/* Input group layout */
.input-group{ margin-bottom:22px }
.input-group label{
  display:block;
  font-size:13px;
  color:#d1d5db;
  margin-bottom:8px;
  font-weight:600;
}

/* input box (icon + input) */
.input-box{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:12px;
  border:1px solid #3e4c69;
  background: rgba(16,26,47,0.8);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 150ms ease;
  padding-right:6px;
  overflow:hidden;
}
.input-box:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(244,192,37,0.45);
  transform: translateY(-1px);
}

.input-box span.material-symbols-outlined{
  padding-left:12px;
  padding-right:6px;
  font-size:20px;
  color:#6b7280;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
}

/* input element styling */
.input-box input{
  flex:1 1 auto;
  border:0;
  outline:0;
  padding:12px 14px;
  font-size:15px;
  background:transparent;
  color:#fff;
}

/* Password strength bar (visual only) */
.strength-bar{
  display:flex;
  gap:6px;
  height:8px;
  margin-top:10px;
  background:#27241b;
  border-radius:20px;
  overflow:hidden;
}
.strength-bar div{
  border-radius:20px;
  transition: width 300ms ease-in-out;
}
.strength-bar div:nth-child(1){ width:25%; background:#ef4444 }
.strength-bar div:nth-child(2){ width:0; background:#f59e0b }
.strength-bar div:nth-child(3){ width:0; background:#10b981 }

/* ====== ACTIONS ====== */
.action-buttons{ margin-top:18px; display:block; gap:10px }
.btn-primary{
  display:inline-block;
  width:100%;
  padding:14px;
  border-radius:12px;
  border:0;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  background:var(--accent);
  color:var(--bg-dark);
  box-shadow: 0 0 20px rgba(244,192,37,0.4);
  transition: transform 160ms ease, box-shadow 200ms ease, background 150ms ease;
}
.btn-primary:hover{
  transform: translateY(-3px);
  background:#FFD650;
  box-shadow: 0 0 30px rgba(244,192,37,0.6);
}

.btn-wallet{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:12px 14px;
  margin-top:10px;
  border-radius:12px;
  background:transparent;
  color:#7dd3fc;
  border:1px solid rgba(19,84,122,0.5);
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 0 15px rgba(19,84,122,0.3);
  transition: background 160ms ease, color 120ms ease, transform 140ms ease;
}
.btn-wallet:hover{
  background: rgba(19,84,122,0.08);
  color:#bae6fd;
  transform: translateY(-2px);
}

/* LOGIN LINK */
.login-link{
  margin-top:22px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
}
.login-link a{ color: rgba(244,192,37,0.95); font-weight:700; text-decoration:none }

/* ====== ILLUSTRATION (right) ====== */
.illustration{
  width:100%;
  aspect-ratio:1/1;
  background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuATdAurBw4KuHv9IpqZMmP6hjJjgWssYNdxAr8qiw4rWSoK-WmxNieLymRNufeMfbqLmRmUqdmbVccd9VOdBmiSS51YD3FMHV-xKihG79vb3UvoKt69QU_zAZX_k9SCU4emsQahEI5IAhOflkfgjY8IwyCTf3Aeqk03K0UQ8ikB5G_ABU0FMWcBSypxKIVb95b6AKj2oHK0-i_TuiioOMs4brhmR0KaDlsiSVT1NPV9FVsruXzUCcVXYtf-1nkEcVYCsaYhLEzqZSFi");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  mask-image: radial-gradient(circle, white 60%, transparent 100%);
}

/* small adjustments for very narrow phones so card doesn't feel cramped */
@media (max-width:420px){
  .page-wrapper{ padding:18px }
  .form-card{ padding:22px; border-radius:12px }
  .goldrush-title{ font-size:28px }
  .form-header h2{ font-size:20px }
  .input-box input{ padding:10px }
  .btn-primary{ padding:12px; font-size:14px }
}