/* login-styles.css */

:root {
  --pearlygates-font: "Inter", sans-serif;
}

body {
  margin: 0;
  padding: 2rem 1rem;
  font-family: var(--pearlygates-font) !important;
  color: #808080;
  font-size: 1rem;
  background-color: #fff7f0;
}

.container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #e67e22;
}

.container p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  text-align: center;
}

.auth-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}


.info-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.info-list li {
  background: #fff;
  border: 1px solid #eee;
  border-left: 4px solid #e67e22;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #555;
}

.info-list li span {
  font-size: 1.2rem;
}

.bible-verse {
  margin-top: 2rem;
  font-style: italic;
  font-size: 0.95rem;
  color: #666;
  border-left: 3px solid #e67e22;
  padding-left: 1rem;
}


/* ========================
   Labels över border-top
======================== */

.form-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-group input {
  width: 100%;
  padding: 0.8rem 0.75rem 0.7rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.form-group input:focus {
  border-color: #e67e22;
  outline: none;
}

.form-group label {
  position: absolute;
  top: -0.6rem;
  left: 0.85rem;
  background: #FFF7F0;
  background: linear-gradient(180deg,rgba(255, 247, 240, 1) 40%, rgba(255, 255, 255, 1) 100%);
  padding: 0 0.3rem;
  font-size: 0.9rem;
  color: #808080;
  pointer-events: none;
}

/* ========================
   Knapp & Övrigt
======================== */

.button-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.button-equal {
  flex: 1;
  display: block;
  text-align: center;
  background-color: #e67e22;
  color: white;
  padding: 0.75rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-family: inherit;
  font-weight: inherit;
  line-height: normal;
}

.button-equal span {
  display: inline-block;
}

button {
  padding: 0.75rem;
  font-size: 1rem;
  background-color: #e67e22;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  font-weight: inherit;
  line-height: normal;
}

.error-message {
  color: red;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.5rem;
}

a {
  color: #e67e22;
  text-decoration: none;
}

@media (max-width: 480px) {
  body {
    padding: 1.5rem 1rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .container p {
    font-size: 0.95rem;
  }
}

/* ========================
   Inloggning – mobilförst
======================== */
.login-page {
  min-height: 100dvh;
  padding: 0;
  color: #302d2a;
  background:
    radial-gradient(circle at 15% 5%, rgba(255,255,255,.88), transparent 26%),
    radial-gradient(circle at 90% 24%, rgba(255,255,255,.56), transparent 28%),
    radial-gradient(circle at 52% 70%, rgba(255,248,230,.75), transparent 38%),
    linear-gradient(145deg, #ecd2a6 0%, #fff0d0 46%, #f5d8aa 100%);
}
.login-page::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.3; background:repeating-radial-gradient(ellipse at 30% 8%,rgba(255,255,255,.7) 0 5px,transparent 6px 28px); }
.login-shell { position:relative; z-index:1; width:min(100%,480px); min-height:100dvh; margin:0 auto; padding:36px 39px 20px; box-sizing:border-box; display:flex; flex-direction:column; }
.login-card { width:100%; }
.login-hero { text-align:center; }
.login-hero h1 { margin:0; color:#dc6a00; font-size:clamp(2.55rem,11vw,3.35rem); line-height:1; font-weight:700; letter-spacing:-.045em; text-shadow:0 1px 0 rgba(255,255,255,.45); }
.login-hero p { margin:13px 0 22px; color:#363331; font-size:1.08rem; line-height:1.45; }
.login-page .login-form { gap:0; }
.login-field { height:55px; margin:0 0 22px; display:flex; align-items:center; border:1px solid #b8b4af; border-radius:9px; background:rgba(255,255,255,.82); overflow:hidden; }
.login-field svg { width:25px; height:25px; margin:0 17px 0 14px; fill:none; stroke:#989793; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.login-field input { min-width:0; flex:1; height:100%; padding:0 12px 0 0; border:0; outline:0; background:transparent; color:#35322f; font:400 1.08rem var(--pearlygates-font); }
.login-field input::placeholder { color:#92908e; opacity:1; }
.login-field:focus-within { border-color:#df6b00; box-shadow:0 0 0 2px rgba(223,107,0,.12); }
.login-page .login-submit { width:100%; height:54px; margin-top:-1px; border-radius:9px; background:linear-gradient(0deg, #e05600 0%, #ff9e54 100%); color:#fff; font:700 1.18rem var(--pearlygates-font); box-shadow:none; }
.login-page .error-message { margin:-10px 0 12px; color:#b93434; }
.login-divider { display:flex; align-items:center; gap:13px; margin:23px 0; color:#423d38; }
.login-divider::before,.login-divider::after { content:''; height:1px; flex:1; background:#a9a196; }
.login-divider span { font-size:1rem; }
.register-link { display:block; padding:14px 10px; border:1px solid #ee7900; border-radius:9px; color:#e66d00; font-size:1.12rem; font-weight:600; text-align:center; text-decoration:none; background:rgba(255,255,255,.23); }
.login-more { margin:23px 0 0; color:#3f3b37; text-align:center; font-size:.96rem; }
.login-more a { color:#e56c00; font-weight:500; }
.login-values { margin-top:auto; padding-top:26px; border-top:1px solid rgba(137,119,94,.27); }
.values-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; text-align:center; }
.values-grid span { display:block; color:#e87500; font:2.45rem/1 Georgia,serif; }
.values-grid p { margin:8px -5px 0; color:#302d2a; font-size:.72rem; line-height:1.32; }
.free-membership { margin:24px 0 0; color:#e87500; text-align:center; font:1.9rem/1 Georgia,serif; }
.free-membership span { margin-left:5px; color:#302d2a; font:400 1rem var(--pearlygates-font); vertical-align:3px; }
@media (min-width:481px) { .login-shell { padding-top:48px; } }

/* Håll introduktionen lugn och enkel på inloggningssidan. */
.login-values { padding-top:0; border-top:0; }
.values-grid { display:none; }
.free-membership { font-size:0; }
.free-membership span { margin-left:0; font-size:1rem; vertical-align:baseline; }
.login-page .login-card .login-more { display:none; }
.login-page .login-values { display:none; }
.login-bottom-more { margin:23px 0 0; color:#3f3b37; text-align:center; font-size:.96rem; }
.login-bottom-more a { color:#e56c00; font-weight:500; }

@media (max-width:699px) {
  /* Inloggningen är en färdig skärm: centrera kortet och håll hjälpraden
     ovanför telefonens säkra nederkant i stället för att trycka ned den. */
  .login-page:not(.auth-page) {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: max(24px, env(safe-area-inset-top, 0px)) 0 max(24px, env(safe-area-inset-bottom, 0px));
  }
  .login-page:not(.auth-page) .login-shell {
    min-height: 0;
    padding: 0 39px;
  }
  .login-page:not(.auth-page) .login-card {
    display: block;
    flex: 0 0 auto;
  }
  .login-page:not(.auth-page) .login-bottom-more { margin-top: 23px; }

  /* Registrering och infosidan centreras när innehållet ryms. På kortare
     skärmar gör safe center att formuläret i stället börjar upptill och kan scrollas normalt. */
  .auth-shell {
    min-height: 100dvh;
    padding: max(24px, env(safe-area-inset-top, 0px)) 39px max(24px, env(safe-area-inset-bottom, 0px));
    justify-content: center;
    justify-content: safe center;
  }
  .auth-page-card { flex: 0 0 auto; }
}

/* Registrering och informationssida – samma visuella familj som inloggningen. */
.auth-shell { padding-top:25px; }
.auth-page-card { width:100%; }
.auth-back { display:inline-block; margin-bottom:20px; color:#6f6358; font-size:.9rem; text-decoration:none; }
.auth-hero h1 { font-size:2.05rem; letter-spacing:-.025em; }
.auth-hero p { margin-bottom:23px; font-size:1rem; }
.auth-brand { margin-bottom:12px; color:#dc6a00; font-size:1.45rem; font-weight:700; letter-spacing:-.035em; }
.auth-brand { display:none; }
.auth-form { display:flex; flex-direction:column; gap:13px; }
.auth-field { display:block; }
.auth-inline-row { display:flex; gap:8px; }
.auth-inline-row .auth-field { flex:1 1 0; min-width:0; }
.auth-field span { display:block; margin:0 0 5px 3px; color:#544c45; font-size:.88rem; font-weight:500; }
.auth-field input, .auth-field select { width:100%; height:49px; padding:0 12px; box-sizing:border-box; border:1px solid #b8b4af; border-radius:9px; outline:0; background:rgba(255,255,255,.82); color:#35322f; font:400 1rem var(--pearlygates-font); }
.auth-field input:focus, .auth-field select:focus { border-color:#df6b00; box-shadow:0 0 0 2px rgba(223,107,0,.12); }
.auth-form .login-submit { margin-top:7px; }
.register-actions { display:flex; gap:10px; margin-top:7px; }
.register-actions .info-back-button,
.register-actions .login-submit {
  flex:1;
  min-height:54px;
  margin-top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:0;
  border-radius:9px;
  background:linear-gradient(0deg, #e05600 0%, #ff9e54 100%);
  color:#fff;
  text-decoration:none;
  font:700 1rem var(--pearlygates-font);
}
.auth-switch { margin:22px 0 0; text-align:center; color:#3f3b37; font-size:.95rem; }
.auth-switch a { color:#e56c00; font-weight:500; }
.auth-membership { margin:22px 0 0; color:#403a35; text-align:center; font-size:.94rem; }
.auth-hero + .auth-membership { margin: -10px 0 22px; }
.info-intro { margin:0; color:#423d38; font-size:1rem; line-height:1.55; text-align:center; }
.info-points { display:flex; flex-direction:column; gap:9px; margin:23px 0; }
.info-points p { margin:0; padding:12px 13px; border-radius:9px; background:rgba(255,255,255,.54); color:#49423c; font-size:.94rem; line-height:1.4; }
.info-points strong { display:block; margin-bottom:3px; color:#d96700; }
.info-free { margin:0 0 20px; text-align:center; color:#403a35; font-size:1rem; }
.info-free { display:none; }
.info-page-card .auth-back { display:none; }
.info-actions { display:flex; gap:10px; }
.info-actions a { flex:1; box-sizing:border-box; }
.info-actions .register-link,
.info-actions .info-back-button { border-color:#ee7900; background:linear-gradient(0deg, #e05600 0%, #ff9e54 100%); color:#fff; }

.info-back-button { display:block; padding:14px 10px; border:1px solid #ee7900; border-radius:9px; color:#e66d00; font-size:1.02rem; font-weight:600; text-align:center; text-decoration:none; background:rgba(255,255,255,.23); }

/* Surfplatta och större: formulären vilar ovanpå community-bilden. */
@media (min-width:700px) {
  .login-page {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100dvh;
    padding:32px 24px;
    box-sizing:border-box;
    background: url('../images/bodybg.png') center center / cover no-repeat fixed;
  }
  .login-page::before {
    opacity:1;
    background:linear-gradient(90deg, rgba(31,20,8,.2), rgba(255,194,95,.06), rgba(31,20,8,.2));
  }
  .login-shell {
    width:min(100%, 540px);
    min-height:auto;
    margin:0;
    padding:0;
  }
  .login-card,
  .auth-page-card {
    box-sizing:border-box;
    padding:42px 48px;
    border:1px solid rgba(255,255,255,.7);
    border-radius:28px;
    background:rgba(255,248,235,.75);
    box-shadow:0 20px 52px rgba(29,18,7,.34);
    backdrop-filter:blur(8px);
  }
  .auth-page-card {
    max-height:calc(100dvh - 64px);
    overflow-y:auto;
  }
  .login-bottom-more { margin-top:23px; font-size:1rem; }
  .login-bottom-more a { color:#e56c00; text-decoration:none; }
}

.auth-feedback {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: .9rem;
  line-height: 1.4;
  text-align: center;
}

.auth-feedback--success {
  background: rgba(255, 255, 255, .54);
  color: #403a35;
}

.auth-feedback--error {
  background: rgba(255, 255, 255, .54);
  color: #b93434;
}

.login-page .auth-page-card .login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}

/* Verifieringslänken ska ligga tydligt under övrig inloggningshjälp. */
.login-page .login-card .login-verification-link { margin-top:36px; }