/*
* Filename: forms.css
* Directory: /www/css/
* Filepath: /www/css/forms.css
* Description: Stiler for input-felter og knapper. Layout styres nå av cards.css.
* Language: Norwegian
* Copyright: Webmasterinfo.no
*/

/* --- Login Button (Header) --- */
.login-button {
    background-color: #df7902;
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}
.login-button:hover { background-color: #f68a0a; }

/* --- Login Dropdown (Header) --- */
.login-form-container {
    position: absolute; top: calc(100% + 15px); right: 0; 
    background-color: white; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); width: 320px; padding: 2rem;
    z-index: 1000; opacity: 0; transform: translateY(-10px);
    pointer-events: none; transition: all 0.2s ease-out; text-align: left;
}
.login-form-container.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.login-form-container input { width: 100%; padding: 10px; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.login-submit-btn { width: 100%; padding: 12px; background-color: #df7902; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; }

/* --- STANDARD SKJEMA STILER (Inni Cards) --- */

.form-group { margin-bottom: 1.5rem; }

.form-group label {
    display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--color-primary);
}

.form-group input, 
.form-group select,
.form-group textarea {
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #fff;
    color: #333;
    display: block;
}

/* --- SMALERE FELTER (60% REGELEN) --- */
/* Vi bruker en klasse .narrow-form på <form> elementet for å aktivere dette */

.narrow-form .form-group input:not([type="checkbox"]):not([type="radio"]),
.narrow-form .form-group select {
    width: 60%;
    min-width: 280px; /* Sikkerhet for mobil */
}

.narrow-form .btn-action {
    width: 60%;
    min-width: 280px;
    padding: 12px;
    font-size: 1rem;
    background-color: var(--color-accent);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

/* Grid-system for skjema (2 kolonner) */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* I grid vil vi at feltene fyller kolonnen sin (ellers blir de 60% av en halv kolonne = for smått) */
.form-grid-2 .form-group input { width: 100% !important; }

/* Mobiljustering */
@media (max-width: 600px) {
    .narrow-form .form-group input,
    .narrow-form .form-group select,
    .narrow-form .btn-action {
        width: 100% !important;
    }
    .form-grid-2 { grid-template-columns: 1fr; }
}