/* ═══════════════════════════════════════════════════════════════
   FORMS — Digital Rust
   Input fields, checkboxes, radios, selects
   ═══════════════════════════════════════════════════════════════ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--dr-space-xs);
    margin-bottom: var(--dr-space-md);
}

.form-group label {
    color: var(--dr-text-primary);
    font-size: var(--dr-text-sm);
    display: block;
    margin-bottom: var(--dr-space-sm);
    font-weight: var(--dr-font-weight);
    font-family: var(--dr-font-heading);
    font-variation-settings: "slnt" 0;
}

.form-group input,
.form-group textarea {
    padding: var(--dr-space-sm) var(--dr-space-md);
    border: 2px solid var(--dr-surface-highlight);
    border-radius: var(--dr-radius);
    background: var(--dr-surface-base);
    color: var(--dr-text-primary);
    font-size: var(--dr-text-sm);
    font-family: var(--dr-font-body);
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--dr-transition-fast),
                box-shadow var(--dr-transition-fast);
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] { width: auto; }

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--dr-accent);
    box-shadow: 0 0 0 1px rgba(var(--dr-accent-rgb), 0.3),
                inset 0 1px 2px rgba(var(--dr-bg-rgb), 0.2);
}

.form-group textarea { resize: vertical; min-height: 80px; }

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--dr-text-tertiary);
    font-style: italic;
}

.form-help {
    display: block;
    margin-top: var(--dr-space-xs);
    font-size: var(--dr-text-xs);
    color: var(--dr-text-tertiary);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--dr-space-md);
    margin-top: var(--dr-space-lg);
}

/* Checkbox styling */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--dr-space-sm);
    margin-bottom: var(--dr-space-md);
    position: relative;
}

.checkbox-group input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.checkbox-group label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    display: block;
    margin-bottom: 0;
    user-select: none;
    font-weight: var(--dr-font-weight-light);
}

.checkbox-group label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--dr-dark-packet);
    border-radius: var(--dr-radius-sm);
    background-color: var(--dr-surface-base);
    transition: all var(--dr-transition-fast);
}

.checkbox-group label:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 10px;
    border-right: 2px solid var(--dr-text-on-accent);
    border-bottom: 2px solid var(--dr-text-on-accent);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
}

.checkbox-group input[type="checkbox"]:checked + label:before {
    background-color: var(--dr-accent);
    border-color: var(--dr-accent);
}

.checkbox-group input[type="checkbox"]:checked + label:after {
    transform: translateY(-75%) rotate(45deg) scale(1);
    opacity: 1;
}

.checkbox-group input[type="checkbox"]:focus-visible + label:before {
    box-shadow: 0 0 0 3px rgba(var(--dr-accent-rgb), 0.3);
}

.checkbox-group input[type="checkbox"]:focus:not(:focus-visible) + label:before {
    box-shadow: none;
}

.checkbox-group label:hover:before { border-color: var(--dr-accent); }

/* Language selector */
.language-selector {
    width: 100%;
    padding: var(--dr-space-sm) var(--dr-space-md);
    border-radius: var(--dr-radius-lg);
    background-color: var(--dr-surface-base);
    color: var(--dr-text-primary);
    font-size: var(--dr-text-sm);
    font-family: var(--dr-font-body);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    cursor: pointer;
    transition: border-color var(--dr-transition-fast), box-shadow var(--dr-transition-fast);
    padding-right: 30px;
}

.language-selector-wrapper {
    position: relative;
    width: 100%;
}

.language-selector-wrapper:after {
    content: "\f107";
    font-family: FontAwesome;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--dr-text-tertiary);
}

/* Timezone */
.timezone-selector-wrapper {
    display: flex;
    gap: 10px;
    width: 100%;
}

.timezone-selector-wrapper select {
    flex: 1;
    padding: var(--dr-space-sm) 35px var(--dr-space-sm) var(--dr-space-md);
    font-size: var(--dr-text-sm);
    font-family: var(--dr-font-body);
    border: 2px solid var(--dr-surface-highlight);
    border-radius: var(--dr-radius-lg);
    background-color: var(--dr-surface-base);
    color: var(--dr-text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.timezone-selector-wrapper select:focus {
    outline: none;
    border-color: var(--dr-accent);
    box-shadow: 0 0 0 2px rgba(var(--dr-accent-rgb), 0.25);
}

.timezone-region-selector { flex: 0.4 !important; min-width: 140px; }
.timezone-selector { flex: 0.6 !important; }

.language-selector:hover,
.timezone-selector-wrapper select:hover { border-color: var(--dr-accent); }

.language-selector:focus {
    outline: none;
    border-color: var(--dr-accent);
    box-shadow: 0 0 0 2px rgba(var(--dr-accent-rgb), 0.25);
}

.language-selector option {
    padding: 10px;
    background-color: var(--dr-surface-base);
    color: var(--dr-text-primary);
}

/* Radio buttons */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--dr-space-sm);
    margin-bottom: var(--dr-space-md);
}

.radio-option {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 24px;
}

.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.radio-option label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    user-select: none;
    font-weight: var(--dr-font-weight-light);
    color: var(--dr-text-primary);
}

.radio-option label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--dr-dark-packet);
    border-radius: 50%;
    background-color: var(--dr-surface-base);
    transition: all var(--dr-transition-fast);
    box-sizing: border-box;
}

.radio-option label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--dr-accent);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
}

.radio-option input[type="radio"]:checked + label:before { border-color: var(--dr-accent); }

.radio-option input[type="radio"]:checked + label:after {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

.radio-option input[type="radio"]:focus-visible + label:before {
    box-shadow: 0 0 0 3px rgba(var(--dr-accent-rgb), 0.3);
}

.radio-option label:hover:before { border-color: var(--dr-accent); }

.radio-option input[type="radio"]:disabled + label {
    cursor: not-allowed;
    opacity: 0.6;
    color: var(--dr-text-tertiary);
}

.radio-option input[type="radio"]:disabled + label:before {
    background-color: var(--dr-surface-elevated);
    border-color: var(--dr-dark-packet);
}

.radio-option input[type="radio"]:disabled:checked + label:after { background-color: var(--dr-text-tertiary); }

/* Dark mode selector fix */
:root[data-theme="dark"] .language-selector {
    background-color: var(--code-bg);
    border-color: var(--border-color);
}
:root[data-theme="dark"] .language-selector-wrapper:after { color: var(--dr-text-primary); }
:root[data-theme="dark"] .language-selector:hover { border-color: var(--primary-hover); }

/* Turnstile CAPTCHA widget */
.turnstile-container {
    display: flex;
    justify-content: flex-start;
    margin: var(--dr-space-sm) 0;
}
.turnstile-container iframe {
    border-radius: var(--dr-radius-sm, 4px);
}