/*
 * Sidor utanför inloggningen: registrera, verifiera, avregistrera.
 *
 * Följer login.html:s formspråk (vitt kort på ljus botten, grå rubrikplatta, kraftiga
 * radier) men ligger i en egen fil eftersom tre sidor delar den. login.html har kvar sin
 * inline-stil — att bryta ut den också är en egen städning med egen regressionsrisk, och
 * inloggningen är den sida som absolut inte får gå sönder.
 */

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

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #f8fafc;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(74, 85, 104, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(113, 128, 150, 0.03) 0%, transparent 50%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #2d3748;
}

.kort {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    max-width: 480px;
    width: 100%;
    overflow: hidden;
}

.kort-topp {
    background: linear-gradient(to bottom, #f7fafc 0%, #edf2f7 100%);
    padding: 40px 40px 50px;
    text-align: center;
    position: relative;
    border-bottom: 3px solid #e2e8f0;
}
.kort-topp::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 20px; background: #fff;
    border-radius: 20px 20px 0 0;
}
.kort-topp img { height: 68px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.1)); }
.kort-topp h1 { font-size: 24px; font-weight: 700; margin-top: 16px; }
.kort-topp p { color: #4a5568; font-size: 15px; font-weight: 500; margin-top: 6px; }

.kort-kropp { padding: 36px 40px 40px; }

.falt { margin-bottom: 22px; }
.falt label { display: block; margin-bottom: 8px; color: #4a5568; font-weight: 600; font-size: 14px; }
.falt input[type="email"],
.falt input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    background: #f7fafc;
    transition: all .2s;
}
.falt input:focus {
    outline: none; border-color: #4a5568; background: #fff;
    box-shadow: 0 0 0 3px rgba(74, 85, 104, .1);
}
.falt input::placeholder { color: #a0aec0; }
.falt .hjalp { margin-top: 7px; font-size: 13px; color: #718096; line-height: 1.5; }

/* Samtycket är villkoret för den fria tillgången och måste därför vara läsbart, inte
   nedtonat finstilt. Rutan är avsiktligt inte förkryssad i HTML:en. */
.samtycke {
    display: flex; gap: 12px; align-items: flex-start;
    background: #f7fafc; border: 2px solid #e2e8f0; border-radius: 10px;
    padding: 16px; margin-bottom: 24px;
}
.samtycke input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.samtycke label { font-size: 14px; line-height: 1.6; color: #4a5568; cursor: pointer; }
.samtycke a { color: #2f6fb0; }

.knapp {
    width: 100%; padding: 16px;
    background: linear-gradient(to bottom, #4a5568 0%, #2d3748 100%);
    color: #fff; border: none; border-radius: 10px;
    font-size: 16px; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: all .3s;
    box-shadow: 0 4px 14px rgba(45, 55, 72, .2);
}
.knapp:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 55, 72, .3);
    background: linear-gradient(to bottom, #2d3748 0%, #1a202c 100%);
}
.knapp:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.meddelande {
    padding: 14px 16px; border-radius: 10px; margin-bottom: 22px;
    font-size: 14px; font-weight: 500; line-height: 1.6; display: none;
}
.meddelande.visa { display: block; }
.meddelande.fel  { background: #fff5f5; border: 2px solid #feb2b2; color: #c53030; }
.meddelande.ok   { background: #f0fff4; border: 2px solid #9ae6b4; color: #22683b; }
.meddelande.info { background: #f7fafc; border: 2px solid #cbd5e0; color: #4a5568; }
.meddelande button {
    background: none; border: none; padding: 0; margin-top: 8px;
    color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer;
}

.fotnot { margin-top: 26px; text-align: center; font-size: 13.5px; color: #718096; }
.fotnot a { color: #2f6fb0; font-weight: 600; text-decoration: none; }
.fotnot a:hover { text-decoration: underline; }

.snurra {
    display: none; width: 20px; height: 20px; margin: 0 auto;
    border: 3px solid rgba(255,255,255,.3); border-top-color: #fff;
    border-radius: 50%; animation: snurr .8s linear infinite;
}
@keyframes snurr { to { transform: rotate(360deg); } }

.stor-ikon { font-size: 46px; text-align: center; margin-bottom: 18px; }
.mitten { text-align: center; }
.mitten p { color: #4a5568; line-height: 1.7; margin-bottom: 14px; font-size: 15px; }

@media (max-width: 520px) {
    .kort-topp { padding: 30px 24px 40px; }
    .kort-kropp { padding: 28px 24px 32px; }
}