/* Shared look for login / signup-style pages: dark brand panel left, cream form right (from signup.html). */
/* Every rule is scoped to .auth so pages that also hold a dashboard (affiliate, admin) are unaffected. */
.auth{
  --cream:#F5F1E8;
  --beige:#E8DCC8;
  --gold:#B8936D;
  --gold-deep:#9A7754;
  --brown:#8B7355;
  --dark-brown:#3E2F22;
  --espresso:#241A12;
  --ink:#1A130D;
}
.auth, .auth *{margin:0;padding:0;box-sizing:border-box}
.auth{background:var(--espresso);color:var(--cream);font-family:'Montserrat',sans-serif;min-height:100vh}
.auth a{color:inherit;text-decoration:none}

/* page frame */
.auth .page{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 980px){ .auth .page{grid-template-columns:1fr} .auth .panel-left{display:none} }

/* LEFT PANEL — brand / quote */
.auth .panel-left{
  position:relative;
  background:
    radial-gradient(1200px 600px at -10% 110%, rgba(184,147,109,0.18), transparent 60%),
    radial-gradient(900px 500px at 110% -10%, rgba(184,147,109,0.10), transparent 55%),
    linear-gradient(160deg, #2b1f15 0%, #1a130d 100%);
  padding: 3rem 3.5rem;
  display:flex; flex-direction:column; justify-content:space-between;
  border-right:1px solid rgba(245,241,232,0.06);
  overflow:hidden;
}
.auth .panel-left::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('assets/logo-vault-transparent.png');
  background-repeat:no-repeat;
  background-position: center 60%;
  background-size: min(70%, 720px);
  opacity:0.04;
  filter: brightness(2);
  pointer-events:none;
}
.auth .brand{
  display:flex; align-items:center; gap:.75rem;
  position:relative; z-index:1;
}
.auth .brand img{ height:36px; width:auto; }
.auth .brand-text{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;
  letter-spacing:.18em;
  color:var(--cream);
}
.auth .quote{
  position:relative; z-index:1;
  max-width: 32rem;
}
.auth .quote .eyebrow{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.25rem;
}
.auth .quote h1{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height:1.15;
  color:var(--cream);
  margin-bottom:1.25rem;
}
.auth .quote h1 em{ color:var(--gold); font-style:italic; }
.auth .quote p{
  color: rgba(245,241,232,0.7);
  font-size:1rem; line-height:1.7;
  max-width: 28rem;
}
.auth .legal{
  position:relative; z-index:1;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(245,241,232,0.4);
}
.auth .legal a:hover{ color:var(--gold); }

/* RIGHT PANEL — form */
.auth .panel-right{
  background: var(--cream);
  color: var(--dark-brown);
  padding: 3rem 3.5rem;
  display:flex; flex-direction:column; justify-content:center;
  overflow-y:auto;
}
.auth .form-wrap{
  max-width: 28rem;
  width:100%;
  margin: 0 auto;
}
.auth .back-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--brown); margin-bottom: 2.25rem;
  transition: color .2s;
}
.auth .back-link:hover{ color: var(--gold); }
.auth .form-eyebrow{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.85rem;
}
.auth .form-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height:1.15;
  color: var(--ink);
  margin-bottom:.75rem;
}
.auth .form-sub{
  font-size:.95rem; line-height:1.6;
  color: var(--brown);
  margin-bottom: 2rem;
}
.auth .form-sub strong{ color: var(--ink); font-weight:600; }

.auth .form-group{ margin-bottom:1.1rem; }
.auth .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (max-width:520px){ .auth .form-row{ grid-template-columns:1fr; } }

.auth label{
  display:block;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--brown);
  margin-bottom:.5rem;
  font-weight:500;
}
.auth input[type=text], .auth input[type=email], .auth input[type=password], .auth select{
  width:100%;
  background: white;
  border: 1px solid rgba(139,115,85,0.25);
  border-radius: 4px;
  padding: .8rem .95rem;
  font-family:'Montserrat',sans-serif;
  font-size:.95rem;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
/* Native select restyle (Experience dropdown) */
.auth select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23B8936D' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position: right .95rem center;
  padding-right: 2.4rem;
  cursor:pointer;
}
.auth input:focus, .auth select:focus{
  outline:none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,147,109,0.15);
}

.auth .hint{
  font-size:.78rem; color: var(--brown); margin-top:.4rem;
  font-style: italic;
}
.auth .checkbox-row{
  display:flex; align-items:flex-start; gap:.7rem;
  margin: 1.25rem 0 1.5rem;
  cursor:pointer;
}
.auth .checkbox-row input{
  margin-top: .2rem;
  width:16px; height:16px;
  accent-color: var(--gold);
  cursor:pointer;
}
.auth .checkbox-row span{
  font-size:.85rem; line-height:1.55; color: var(--brown);
}
.auth .checkbox-row span strong{ color: var(--ink); font-weight:600; }
.auth .checkbox-row a{ color: var(--gold-deep); text-decoration:underline; }
.auth .checkbox-row a:hover{ color: var(--ink); }
.auth .field-hint{
  font-size:.76rem; line-height:1.5; color: var(--brown);
  margin-top:.4rem; font-style:italic;
}

.auth .submit-btn{
  width:100%;
  background: var(--ink);
  color: var(--cream);
  border:none;
  padding: 1rem 1.5rem;
  font-family:'Montserrat',sans-serif;
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  border-radius: 2px;
  transition: background .2s, transform .1s;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.auth .submit-btn:hover{ background: var(--gold); }
.auth .submit-btn:active{ transform: translateY(1px); }
.auth .submit-btn[disabled]{ opacity:.6; cursor:wait; }
.auth .submit-btn .arrow{ font-family:'Cormorant Garamond',serif; font-size:1.1rem; letter-spacing:0; transition: transform .2s; }
.auth .submit-btn:hover .arrow{ transform: translateX(4px); }

.auth .alt{
  text-align:center; margin-top:1.5rem;
  font-size:.9rem; color: var(--brown);
}
.auth .alt a{ color: var(--gold); font-weight:600; border-bottom:1px solid currentColor; }

/* status */
.auth .success-message, .auth .error-message{
  display:none;
  padding: 1rem 1.1rem;
  border-radius: 3px;
  font-size:.92rem;
  line-height:1.5;
  margin-top: 1.25rem;
}
.auth .success-message{
  background: rgba(76,175,80,0.1);
  color: #2d5a31;
  border: 1px solid rgba(76,175,80,0.3);
}
.auth .error-message{
  background: rgba(244,67,54,0.08);
  color: #8a2a20;
  border: 1px solid rgba(244,67,54,0.25);
}
.auth .success-message.show, .auth .error-message.show{ display:block; }
  

.auth textarea{
  width:100%; background:white; border:1px solid rgba(139,115,85,0.25); border-radius:4px;
  padding:.8rem .95rem; font-family:'Montserrat',sans-serif; font-size:.95rem; color:var(--ink);
  min-height:6rem; resize:vertical; transition:border-color .2s, box-shadow .2s;
}
.auth textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,147,109,0.15); }
.auth input[type=number], .auth input[type=url], .auth input[type=tel]{
  width:100%; background:white; border:1px solid rgba(139,115,85,0.25); border-radius:4px;
  padding:.8rem .95rem; font-family:'Montserrat',sans-serif; font-size:.95rem; color:var(--ink);
}
.auth .optional{ text-transform:none; letter-spacing:0; font-style:italic; color:var(--brown); opacity:.8; }

/* small logo above the form — the only brand mark on phones, where the left panel hides */
.auth .form-logo{ display:none; align-items:center; gap:.6rem; margin-bottom:1.75rem; }
.auth .form-logo img{ height:34px; width:auto; }
.auth .form-logo span{ font-family:'Cormorant Garamond',serif; font-size:1.2rem; letter-spacing:.18em; color:var(--ink); }
@media (max-width: 980px){ .auth .form-logo{ display:flex; } .auth .panel-right{ padding:2.5rem 1.5rem; } }

.auth .forgot{ text-align:right; margin:-.25rem 0 1.4rem; font-size:.82rem; }
.auth .forgot a{ color:var(--gold-deep); }
.auth .forgot a:hover{ color:var(--ink); }

.auth .spinner{ display:none; width:16px; height:16px; border:2px solid rgba(245,241,232,.35); border-top-color:var(--cream); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* password eye */
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:2.8rem !important; }
.pw-toggle{ position:absolute; right:.55rem; top:50%; transform:translateY(-50%); background:none; border:0; padding:.3rem; cursor:pointer; color:var(--brown,#8B7355); opacity:.6; line-height:0; }
.pw-toggle:hover, .pw-toggle.on{ opacity:1; color:#9A7754; }
.pw-toggle svg{ width:18px; height:18px; }

/* error modal */
.auth .modal-overlay{ display:none; position:fixed; inset:0; background:rgba(26,19,13,.6); z-index:100; align-items:center; justify-content:center; padding:1.5rem; }
.auth .modal-overlay.active{ display:flex; }
.auth .modal{ background:var(--cream); color:var(--dark-brown); max-width:24rem; width:100%; padding:2rem; border-radius:4px; border-top:3px solid var(--gold); text-align:center; }
.auth .modal-title{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.7rem; color:var(--ink); margin-bottom:.6rem; }
.auth .modal-text{ color:var(--brown); font-size:.92rem; line-height:1.6; margin-bottom:1.5rem; }
.auth .modal-btn{ background:var(--ink); color:var(--cream); border:0; padding:.85rem 1.6rem; font-family:'Montserrat',sans-serif; font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; font-weight:600; cursor:pointer; border-radius:2px; }
.auth .modal-btn:hover{ background:var(--gold); }

/* legal links under the left-panel quote */
.auth .legal a{ margin-right:1.1rem; }

/* inline login error (affiliate / admin) */
.auth .login-error{ display:none; margin-top:1rem; padding:.8rem 1rem; font-size:.88rem; color:#8a2a20; background:rgba(244,67,54,0.08); border:1px solid rgba(244,67,54,0.25); border-radius:3px; }

/* phones: hide the brand panel (the .form-logo above the form takes its place). Must come after .panel-left{display:flex}. */
@media (max-width: 980px){ .auth .panel-left{ display:none; } }