/* =====================================================
   SAVAGE SAINTS REGISTRATION PAGE
===================================================== */

:root{
  --register-forest:#163f2b;
  --register-forest-mid:#1f5f40;
  --register-forest-dark:#0d2d1e;
  --register-gold:#c89b3c;
  --register-gold-light:#e8c978;
  --register-cream:#fffaf0;
  --register-parchment:#f5ecd9;
  --register-white:#ffffff;
  --register-ink:#211a10;
  --register-muted:#6f634f;
  --register-border:rgba(200,155,60,.24);
  --register-danger:#a53b32;
  --register-success:#2f7d4c;
}


/* =====================================================
   PAGE
===================================================== */

.account-register-page{
  min-height:100vh;
  margin:0;
  color:var(--register-ink);

  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(200,155,60,.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 16%,
      rgba(22,63,43,.18),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #f7efdf 0%,
      #fffaf0 48%,
      #efe1c8 100%
    );
}

.account-register-main{
  position:relative;

  min-height:calc(100vh - 120px);

  padding:56px 22px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  box-sizing:border-box;
}


/* =====================================================
   PAGE DECORATION
===================================================== */

.account-register-main::before,
.account-register-main::after{
  content:"";

  position:absolute;

  border-radius:50%;

  pointer-events:none;
}

.account-register-main::before{
  width:360px;
  height:360px;

  top:3%;
  left:-150px;

  background:
    radial-gradient(
      circle,
      rgba(22,63,43,.16),
      rgba(22,63,43,0)
    );
}

.account-register-main::after{
  width:420px;
  height:420px;

  right:-180px;
  bottom:2%;

  background:
    radial-gradient(
      circle,
      rgba(200,155,60,.2),
      rgba(200,155,60,0)
    );
}


/* =====================================================
   MAIN REGISTRATION BOX
===================================================== */

.account-register-shell{
  position:relative;
  z-index:2;

  width:min(1240px, 100%);

  display:grid;
  grid-template-columns:
    minmax(0, .95fr)
    minmax(480px, 1.05fr);

  align-items:stretch;

  overflow:hidden;

  border:1px solid rgba(200,155,60,.42);
  border-radius:34px;

  background:rgba(255,250,240,.92);

  box-shadow:
    0 42px 90px rgba(41,27,9,.2),
    0 12px 30px rgba(41,27,9,.12),
    inset 0 1px 0 rgba(255,255,255,.8);

  backdrop-filter:blur(18px);
}

.account-register-shell::before{
  content:"";

  position:absolute;
  inset:10px;
  z-index:3;

  border:1px solid rgba(200,155,60,.18);
  border-radius:26px;

  pointer-events:none;
}


/* =====================================================
   LEFT STORY PANEL
===================================================== */

.account-register-story{
  position:relative;

  min-width:0;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 20% 12%,
      rgba(232,201,120,.11),
      transparent 28%
    ),
    linear-gradient(
      150deg,
      #173d29 0%,
      #10301f 48%,
      #0a2618 100%
    );
}

.account-register-story::before{
  content:"";

  position:absolute;
  inset:0;

  opacity:.14;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:38px 38px;
}

.account-register-story::after{
  content:"";

  position:absolute;

  width:460px;
  height:460px;

  right:-190px;
  bottom:-210px;

  border:1px solid rgba(232,201,120,.15);
  border-radius:50%;

  box-shadow:
    0 0 0 48px rgba(232,201,120,.026),
    0 0 0 94px rgba(232,201,120,.018);
}

.account-register-story-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      rgba(0,0,0,.14)
    );
}

.account-register-story-content{
  position:relative;
  z-index:2;

  width:100%;
  min-height:100%;

  padding:52px 48px 44px;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;

  box-sizing:border-box;

  color:#f5eddb;
}


/* =====================================================
   BRAND
===================================================== */

.account-register-brand{
  display:inline-flex;
  align-items:center;
  gap:14px;

  width:fit-content;

  margin-bottom:34px;

  color:#f5eddb;
  text-decoration:none;
}

.account-register-brand img{
  width:52px;
  height:52px;

  object-fit:contain;

  border-radius:14px;

  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    0 0 0 1px rgba(218,184,103,.22);
}

.account-register-brand span{
  font-family:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  font-size:1.22rem;
  font-weight:700;
  letter-spacing:.02em;
}


/* =====================================================
   STORY TYPOGRAPHY
===================================================== */

.account-register-kicker{
  margin:0 0 10px;

  color:#d9b86c;

  font-size:.7rem;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.account-register-story h1{
  max-width:520px;

  margin:0;

  color:#fbf6ea;

  font-family:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(3.2rem, 5vw, 4.9rem);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.025em;
}

.account-register-story-lead{
  max-width:560px;

  margin:20px 0 0;

  color:rgba(245,237,219,.76);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.92rem;
  font-weight:450;
  line-height:1.68;
}


/* =====================================================
   SCRIPTURE
===================================================== */

.account-register-scripture{
  position:relative;

  margin:24px 0 22px;
  padding:18px 22px 18px 24px;

  border-left:3px solid #c99d45;
  border-radius:0 18px 18px 0;

  background:rgba(255,255,255,.05);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

.account-register-scripture::before{
  content:"“";

  position:absolute;

  top:-10px;
  left:12px;

  color:rgba(218,184,103,.16);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:4.4rem;
  line-height:1;
}

.account-register-scripture p{
  position:relative;
  z-index:1;

  margin:0;

  color:#f2ead7;

  font-family:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  font-size:1.12rem;
  font-weight:600;
  line-height:1.46;
}

.account-register-scripture cite{
  display:block;

  margin-top:10px;

  color:#d9b86c;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.7rem;
  font-style:normal;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}


/* =====================================================
   BENEFITS
===================================================== */

.account-register-benefits{
  display:grid;
  gap:13px;
}

.account-register-benefit{
  display:grid;
  grid-template-columns:30px minmax(0, 1fr);
  gap:12px;

  align-items:start;
}

.account-register-benefit-icon{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border:1px solid rgba(218,184,103,.3);
  border-radius:50%;

  color:#d9b86c;
  background:rgba(255,255,255,.035);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);

  font-size:.7rem;
}

.account-register-benefit strong{
  display:block;

  color:#f4ecd9;

  font-family:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  font-size:.98rem;
  font-weight:700;
  letter-spacing:.01em;
}

.account-register-benefit p{
  max-width:500px;

  margin:3px 0 0;

  color:rgba(245,237,219,.64);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.74rem;
  font-weight:450;
  line-height:1.45;
}


/* =====================================================
   FREE ACCOUNT NOTE
===================================================== */

.account-register-free-note{
  margin-top:22px;

  padding:14px 16px;

  display:flex;
  align-items:center;
  gap:10px;

  border:1px solid rgba(218,184,103,.2);
  border-radius:14px;

  background:rgba(255,255,255,.045);
}

.account-register-free-note span{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  flex:0 0 28px;

  border-radius:50%;

  color:#0d2d1e;
  background:#d9b86c;

  font-size:.76rem;
  font-weight:900;
}

.account-register-free-note p{
  margin:0;

  color:#f4ecd9;

  font-size:.78rem;
  font-weight:700;
  line-height:1.4;
}


/* =====================================================
   RIGHT PANEL
===================================================== */

.account-register-panel{
  position:relative;

  min-width:0;

  padding:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(
      circle at top right,
      rgba(200,155,60,.1),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(255,250,240,.96)
    );
}

.account-register-panel::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(200,155,60,.16),
      transparent 12%
    );
}


/* =====================================================
   REGISTRATION CARD
===================================================== */

.account-register-card{
  position:relative;
  z-index:2;

  width:min(100%, 520px);

  padding:30px;

  box-sizing:border-box;

  border:1px solid rgba(200,155,60,.24);
  border-radius:26px;

  background:rgba(255,255,255,.82);

  box-shadow:
    0 24px 52px rgba(52,36,13,.12),
    inset 0 1px 0 rgba(255,255,255,.94);

  backdrop-filter:blur(12px);
}

.account-register-card::before{
  content:"";

  position:absolute;
  inset:8px;

  border:1px solid rgba(200,155,60,.12);
  border-radius:20px;

  pointer-events:none;
}


/* =====================================================
   CARD HEADER
===================================================== */

.account-register-card-header{
  position:relative;
  z-index:1;

  margin-bottom:20px;

  text-align:center;
}

.account-register-card-kicker{
  margin:0 0 7px;

  color:var(--register-gold);

  font-size:.68rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.account-register-card-header h2{
  margin:0;

  color:var(--register-forest);

  font-family:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  font-size:2.35rem;
  font-weight:700;
  line-height:1;
}

.account-register-card-header p{
  margin:9px 0 0;

  color:var(--register-muted);

  font-size:.84rem;
  line-height:1.45;
}


/* =====================================================
   STATUS MESSAGE
===================================================== */

.account-register-message{
  position:relative;
  z-index:1;

  margin-bottom:14px;
  padding:12px 14px;

  border-radius:13px;

  font-size:.8rem;
  font-weight:800;
  line-height:1.45;
}

.account-register-message.is-error{
  color:#7b241d;

  border:1px solid rgba(165,59,50,.25);
  background:rgba(165,59,50,.1);
}

.account-register-message.is-success{
  color:#1e5d37;

  border:1px solid rgba(47,125,76,.25);
  background:rgba(47,125,76,.1);
}


/* =====================================================
   GOOGLE BUTTON
===================================================== */

.account-register-google-button{
  position:relative;
  z-index:1;

  width:100%;
  min-height:50px;

  padding:11px 16px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  border:1px solid rgba(22,63,43,.18);
  border-radius:15px;

  color:var(--register-forest);
  background:#fff;

  box-shadow:
    0 8px 18px rgba(32,25,15,.07),
    inset 0 1px 0 rgba(255,255,255,.9);

  font:inherit;
  font-size:.86rem;
  font-weight:900;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.account-register-google-button:hover{
  transform:translateY(-2px);

  border-color:rgba(200,155,60,.48);

  box-shadow:
    0 12px 24px rgba(32,25,15,.11),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.account-register-google-icon{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:8px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #4285f4,
      #34a853
    );

  font-weight:900;
}


/* =====================================================
   DIVIDER
===================================================== */

.account-register-divider{
  position:relative;
  z-index:1;

  margin:18px 0;

  display:flex;
  align-items:center;
  gap:12px;

  color:#9b8e78;

  font-size:.66rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.account-register-divider::before,
.account-register-divider::after{
  content:"";

  height:1px;
  flex:1;

  background:rgba(155,116,43,.18);
}


/* =====================================================
   FORM
===================================================== */

.account-register-form{
  position:relative;
  z-index:1;

  display:grid;
  gap:15px;
}

.account-register-name-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.account-register-field{
  display:grid;
  gap:7px;
}

.account-register-field label{
  color:var(--register-forest);

  font-size:.76rem;
  font-weight:900;
  letter-spacing:.02em;
}

.account-register-input-wrap{
  position:relative;

  display:flex;
  align-items:center;

  border:1px solid rgba(22,63,43,.16);
  border-radius:15px;

  background:rgba(255,255,255,.94);

  box-shadow:
    0 8px 18px rgba(32,25,15,.055),
    inset 0 1px 0 rgba(255,255,255,.9);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.account-register-input-wrap:focus-within{
  transform:translateY(-1px);

  border-color:rgba(200,155,60,.72);

  box-shadow:
    0 0 0 4px rgba(200,155,60,.11),
    0 10px 22px rgba(32,25,15,.08);
}

.account-register-input-icon{
  width:44px;
  flex:0 0 44px;

  display:grid;
  place-items:center;

  color:var(--register-gold);

  font-size:.84rem;
  font-weight:900;
}

.account-register-input-wrap input{
  width:100%;
  min-height:50px;

  padding:0 14px 0 0;

  border:0;
  outline:0;

  color:var(--register-ink);
  background:transparent;

  font:inherit;
  font-size:.86rem;
}

.account-register-input-wrap input::placeholder{
  color:#aa9d87;
}

.account-register-password-toggle{
  min-height:36px;

  margin-right:7px;
  padding:0 10px;

  border:0;
  border-radius:10px;

  color:var(--register-forest);
  background:rgba(22,63,43,.07);

  font:inherit;
  font-size:.68rem;
  font-weight:900;

  cursor:pointer;
}

.account-register-password-toggle:hover{
  background:rgba(22,63,43,.12);
}

.account-register-field-help{
  color:#8d816e;

  font-size:.68rem;
  line-height:1.45;
}

.account-register-field-error{
  min-height:14px;

  color:var(--register-danger);

  font-size:.68rem;
  font-weight:800;
}

.account-register-agreement-error{
  margin-top:-8px;
}


/* =====================================================
   PASSWORD STRENGTH
===================================================== */

.account-register-password-strength{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;

  margin-top:2px;
}

.account-register-strength-bar{
  height:4px;

  border-radius:999px;

  background:rgba(22,63,43,.1);

  transition:
    background .18s ease,
    transform .18s ease;
}

.account-register-password-strength.is-weak
.account-register-strength-bar:nth-child(1){
  background:#b84a3d;
}

.account-register-password-strength.is-fair
.account-register-strength-bar:nth-child(-n+2){
  background:#d68d2c;
}

.account-register-password-strength.is-good
.account-register-strength-bar:nth-child(-n+3){
  background:#c2a132;
}

.account-register-password-strength.is-strong
.account-register-strength-bar{
  background:#2f7d4c;
}


/* =====================================================
   CHECKBOXES
===================================================== */

.account-register-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;

  color:var(--register-muted);

  font-size:.74rem;
  font-weight:700;
  line-height:1.5;

  cursor:pointer;
}

.account-register-checkbox input{
  position:absolute;

  opacity:0;
  pointer-events:none;
}

.account-register-checkbox-mark{
  position:relative;

  width:19px;
  height:19px;
  flex:0 0 19px;

  margin-top:1px;

  border:1px solid rgba(22,63,43,.25);
  border-radius:6px;

  background:#fff;

  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.05);
}

.account-register-checkbox input:checked +
.account-register-checkbox-mark{
  border-color:var(--register-forest);
  background:var(--register-forest);
}

.account-register-checkbox input:checked +
.account-register-checkbox-mark::after{
  content:"";

  position:absolute;

  left:6px;
  top:3px;

  width:5px;
  height:9px;

  border:solid var(--register-cream);
  border-width:0 2px 2px 0;

  transform:rotate(45deg);
}

.account-register-checkbox a{
  color:var(--register-gold);

  font-weight:900;
  text-decoration:none;
}

.account-register-checkbox a:hover{
  text-decoration:underline;
}


/* =====================================================
   SUBMIT BUTTON
===================================================== */

.account-register-submit{
  position:relative;

  width:100%;
  min-height:58px;

  overflow:hidden;

  border:2px solid rgba(235,214,132,.78);
  border-radius:17px;

  color:#fff;

  background:
    linear-gradient(
      180deg,
      #39b86f 0%,
      #2a8d57 40%,
      #1f6c45 70%,
      #184f33 100%
    );

  box-shadow:
    0 18px 36px rgba(22,63,43,.35),
    inset 0 3px rgba(255,255,255,.32),
    inset 0 -5px rgba(0,0,0,.18);

  font:inherit;
  font-size:.92rem;
  font-weight:900;
  letter-spacing:.03em;

  cursor:pointer;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

.account-register-submit::before{
  content:"";

  position:absolute;

  left:8px;
  right:8px;
  top:6px;

  height:44%;

  border-radius:13px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.4),
      rgba(255,255,255,0)
    );
}

.account-register-submit::after{
  content:"";

  position:absolute;

  top:0;
  bottom:0;
  left:-35%;

  width:18%;

  transform:skewX(-20deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.62),
      transparent
    );

  transition:left .55s ease;
}

.account-register-submit:hover{
  transform:
    translateY(-3px)
    scale(1.015);

  filter:brightness(1.08);

  box-shadow:
    0 26px 46px rgba(22,63,43,.42),
    inset 0 3px rgba(255,255,255,.34),
    inset 0 -5px rgba(0,0,0,.18);
}

.account-register-submit:hover::after{
  left:120%;
}

.account-register-submit:active{
  transform:
    translateY(1px)
    scale(.99);
}

.account-register-submit-label{
  position:relative;
  z-index:2;
}

.account-register-submit-loader{
  position:relative;
  z-index:2;

  display:none;

  width:20px;
  height:20px;

  margin:auto;

  border:3px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;

  animation:accountRegisterSpin .75s linear infinite;
}

.account-register-submit.is-loading
.account-register-submit-label{
  display:none;
}

.account-register-submit.is-loading
.account-register-submit-loader{
  display:block;
}

@keyframes accountRegisterSpin{
  to{
    transform:rotate(360deg);
  }
}


/* =====================================================
   EXISTING ACCOUNT LINK
===================================================== */

.account-register-login-link{
  position:relative;
  z-index:1;

  margin-top:20px;
  padding-top:18px;

  border-top:1px solid rgba(155,116,43,.16);

  text-align:center;
}

.account-register-login-link p{
  margin:0 0 6px;

  color:var(--register-muted);

  font-size:.76rem;
}

.account-register-login-link a{
  color:var(--register-forest);

  font-size:.82rem;
  font-weight:900;

  text-decoration:none;
}

.account-register-login-link a:hover{
  color:var(--register-gold);
}


/* =====================================================
   MINISTER NOTE
===================================================== */

.account-register-minister-note{
  position:relative;
  z-index:1;

  margin-top:16px;
  padding:14px 15px;

  display:grid;
  grid-template-columns:30px minmax(0, 1fr);
  gap:10px;

  border:1px solid rgba(200,155,60,.18);
  border-radius:14px;

  background:rgba(244,234,213,.48);
}

.account-register-minister-icon{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#fff;
  background:var(--register-forest);

  font-size:.68rem;
}

.account-register-minister-note strong{
  display:block;

  color:var(--register-forest);

  font-size:.74rem;
}

.account-register-minister-note p{
  margin:4px 0 0;

  color:var(--register-muted);

  font-size:.7rem;
  line-height:1.45;
}


/* =====================================================
   INVALID STATES
===================================================== */

.account-register-input-wrap.is-invalid{
  border-color:rgba(165,59,50,.6);

  box-shadow:
    0 0 0 4px rgba(165,59,50,.08);
}

.account-register-checkbox.is-invalid
.account-register-checkbox-mark{
  border-color:rgba(165,59,50,.7);

  box-shadow:
    0 0 0 4px rgba(165,59,50,.08);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1060px){

  .account-register-shell{
    max-width:760px;
    grid-template-columns:1fr;
  }

  .account-register-story-content{
    padding:46px 40px 42px;
  }

  .account-register-panel{
    padding:36px;
  }

}

@media(max-width:700px){

  .account-register-main{
    padding:26px 12px;
  }

  .account-register-shell{
    border-radius:24px;
  }

  .account-register-shell::before{
    inset:7px;

    border-radius:18px;
  }

  .account-register-story-content{
    padding:38px 26px;
  }

  .account-register-brand{
    margin-bottom:24px;
  }

  .account-register-story h1{
    font-size:3rem;
  }

  .account-register-panel{
    padding:28px 20px 34px;
  }

  .account-register-card{
    padding:25px 20px;

    border-radius:22px;
  }

  .account-register-name-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:460px){

  .account-register-main{
    padding:18px 10px;
  }

  .account-register-story-content{
    padding:32px 20px;
  }

  .account-register-story-lead{
    font-size:.88rem;
  }

  .account-register-scripture{
    padding:18px 18px 18px 22px;
  }

  .account-register-panel{
    padding:22px 14px 28px;
  }

  .account-register-card{
    padding:22px 16px;
  }

  .account-register-card-header h2{
    font-size:2.05rem;
  }

  .account-register-submit{
    min-height:56px;
  }

}

@media(prefers-reduced-motion:reduce){

  .account-register-google-button,
  .account-register-submit,
  .account-register-input-wrap{
    transition:none;
  }

  .account-register-submit-loader{
    animation:none;
  }

}