/* =============================================
   Envirapack — konto.css
   Kontosidor utan sidhuvud: Glömt lösenord (/kund/glomt-losenord.php),
   Nytt lösenord (/kund/nytt-losenord.php), Välj lösenord (/kund/aktivera.php)
   och Välj ett eget lösenord (/kund/byt-losenord.php). Sidhuvud, fält och knapp
   använder .login-header, .login-body, .login-group och .login-submit
   ur css/components.css, samma som inloggningsrutan. Tillagd 2026-10-15.
   ============================================= */

.konto-sida {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 24px;
}

.konto-kort {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

.konto-kort .login-header h1 {
    color: var(--text-on-dark);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.konto-ingress {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.5;
}

.konto-ingress a {
    color: var(--primary);
    font-weight: 500;
    /* Understruken, länkfärgen skiljer sig för lite från texten (WCAG 1.4.1, steg 37) */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.konto-hjalp {
    font-size: 12px;
    color: var(--text-light); /* kontrast 5,35 mot vitt (steg 34) */
    margin-top: 4px;
}

/* Välkomstrutan på Välj lösenord (aktivera.php), samma ton som Klart-rutan (steg 34) */
.konto-valkommen {
    background: rgba(45, 107, 69, 0.08);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}

.konto-valkommen > strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}

.konto-valkommen > span {
    display: block;
    overflow-wrap: anywhere;
}

/* Telefonnumret bryts aldrig vid bindestrecket (steg 34) */
.konto-ingress a[href^="tel:"] {
    white-space: nowrap;
}

/* Felruta, samma färger som inloggningens (kontrast 5,84) */
.konto-fel {
    background: rgba(220, 53, 69, 0.08);
    color: #b02a37;
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.konto-fel strong {
    display: block;
    margin-bottom: 2px;
}

/* Klart-ruta, samma färger som aktiveringens (kontrast 6,53) */
.konto-klart {
    background: rgba(45, 107, 69, 0.08);
    color: var(--primary);
    font-size: 14px;
    line-height: 1.5;
    padding: 14px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.konto-klart strong {
    display: block;
    margin-bottom: 4px;
}

/* Länk som ser ut som knappen */
a.konto-knapplank {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

a.konto-knapplank:hover {
    color: #fff;
}

.konto-fot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 36px 28px;
    font-size: 14px;
}

.konto-fot a {
    color: var(--primary);
    font-weight: 500;
}

/* Honungsfälla mot robotar, osynlig för besökare och skärmläsare */
.konto-honung {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}