/* d2-forms-claude.css — v1.2.2
   Design-system: fungerer på både mørke og lyse baggrunde
   Orange accent: #f5a623 (Digital2 brand)
   -------------------------------------------------- */

/* === Wrapper === */
.d2-form-wrap {
    width: 100%;
    max-width: 640px;
}

.d2-form-title {
    font-size: 1.1em;
    font-weight: 700;
    margin: 0 0 1.2em;
    color: #fff;
}

.d2-form-wrap.d2-light .d2-form-title {
    color: #1a1a1a;
}

/* === Grid: 2 kolonner (default) === */
.d2-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.d2-form.d2-cols-1 {
    grid-template-columns: 1fr;
}

.d2-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.d2-field.d2-full,
.d2-form .d2-form-feedback,
.d2-form .d2-form-footer {
    grid-column: 1 / -1;
}

/* === Labels === */
.d2-field label {
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    opacity: 1;
}

.d2-required {
    color: #f5a623;
}

.d2-form-wrap.d2-light .d2-field label {
    color: #444;
}

/* === Inputs === */
.d2-field input {
    width: 100%;
    height: 50px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 1em;
    font-family: inherit;
    color: #1a1a1a;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

/* === Select — samlet regel for at undgå background-konflikt === */
.d2-field select {
    width: 100%;
    height: 50px;
    padding: 0 28px 0 6px;
    background-color: rgba(255, 255, 255, 0.92);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23555' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 1em;
    font-family: inherit;
    color: #1a1a1a;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.d2-field textarea {
    width: 100%;
    padding: 6px;
    min-height: 120px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 1em;
    font-family: inherit;
    color: #1a1a1a;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
    line-height: 1.5;
}
.d2-field input::placeholder,
.d2-field textarea::placeholder {
    color: #888;
    opacity: 1;
}

/* === Focus === */
.d2-field input:focus,
.d2-field textarea:focus,
.d2-field select:focus {
    outline: none;
    border-color: #f5a623;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.25);
}

/* === Light mode === */
.d2-form-wrap.d2-light .d2-field input,
.d2-form-wrap.d2-light .d2-field textarea {
    background: #fff;
    border-color: #ddd;
    color: #333;
}

.d2-form-wrap.d2-light .d2-field select {
    background-color: #fff;
    border-color: #ddd;
    color: #333;
}

.d2-form-wrap.d2-light .d2-field input:focus,
.d2-form-wrap.d2-light .d2-field textarea:focus,
.d2-form-wrap.d2-light .d2-field select:focus {
    border-color: #f5a623;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12);
}

/* === Checkbox — separat fra input-reglen === */
.d2-field.d2-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.d2-field.d2-checkbox input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0;
    margin-top: 2px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    cursor: pointer;
    accent-color: #f5a623;
    line-height: normal;
}

.d2-form-wrap.d2-light .d2-field.d2-checkbox input[type="checkbox"] {
    border-color: #ccc;
    background: #fff;
}

.d2-field.d2-checkbox label {
    font-size: 0.88em;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.85;
    cursor: pointer;
    line-height: 1.5;
}

.d2-checkbox-group-label {
    grid-column: 1 / -1;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: -4px;
}

/* === Footer === */
.d2-form-footer {
    display: flex;
    justify-content: flex-end;
}

/* === Send-knap === */
.d2-submit {
    display: inline-block;
    height: 50px;
    padding: 0 32px;
    background: #f5a623;
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
}

.d2-submit:hover   { background: #e09510; }
.d2-submit:active  { transform: scale(0.98); }
.d2-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* === Feedback === */
.d2-form-feedback {
    padding: 11px 16px;
    border-radius: 6px;
    font-size: 0.9em;
    border-left: 3px solid transparent;
}

.d2-form-feedback.d2-success {
    background: rgba(39, 174, 96, 0.15);
    border-color: #27ae60;
    color: #27ae60;
}

.d2-form-feedback.d2-error {
    background: rgba(231, 76, 60, 0.15);
    border-color: #e74c3c;
    color: #e74c3c;
}

.d2-form-wrap.d2-light .d2-form-feedback.d2-success {
    background: #d4edda;
    color: #155724;
}

.d2-form-wrap.d2-light .d2-form-feedback.d2-error {
    background: #f8d7da;
    color: #721c24;
}

/* === Mobil === */
@media (max-width: 580px) {
    .d2-form { grid-template-columns: 1fr; }
}

/* === reCAPTCHA badge skjult === */
.grecaptcha-badge { visibility: hidden !important; }