/*
 * components.css — Reusable UI Components
 * =========================================
 *
 * Defines styles for all shared UI components used across multiple steps:
 *   - Progress Bar (.progress-bar)
 *   - Buttons (.btn, .btn--primary, .btn--accent, .btn--secondary, etc.)
 *   - Cards (.card)
 *   - Input Fields (.input-group)
 *   - Loading Overlay (.loading-overlay)
 *   - Alert Banners (.alert)
 *   - Checkboxes (.checkbox)
 *   - Info Box (.info-box)
 */


/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════════════════════
   Horizontal step indicator shown on all wizard pages (steps 1-6).
   Hidden on the landing page (step 0).
*/

.progress-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 24px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

/* "RG" logo text on the left */
.progress-bar__logo {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 15px;
    color: var(--gold);
    margin-right: 16px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Individual step wrapper (circle + label + connector) */
.progress-step {
    display: flex;
    align-items: center;
    flex: 1;
}

/* Numbered circle */
.progress-step__circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    color: var(--text-dim);
    border: 2px solid var(--text-dim);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Active or completed step circle: accent blue background */
.progress-step--active .progress-step__circle,
.progress-step--done .progress-step__circle {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Step label text */
.progress-step__label {
    font-size: 11px;
    margin-left: 6px;
    color: var(--text-dim);
    font-weight: 500;
    /* Hidden on mobile, shown on wider screens */
    display: none;
}

/* Show labels on wider screens */
@media (min-width: 640px) {
    .progress-step__label {
        display: block;
    }
}

/* Active step label gets brighter text and bold weight */
.progress-step--active .progress-step__label {
    color: var(--text);
    font-weight: 700;
}

.progress-step--done .progress-step__label {
    color: var(--text);
}

/* Connector line between steps */
.progress-connector {
    flex: 1;
    height: 2px;
    margin-left: 8px;
    background: var(--border);
    transition: background 0.3s ease;
}

/* Completed connector is accent blue */
.progress-connector--done {
    background: var(--accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════
   Variants: primary (gold), accent (blue), secondary (outline),
   danger (red), ghost (text-only).
   Sizes: md (default), lg (larger).
*/

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 24px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: scale(0.97);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ─── Size: Large ────────────────────────────────────────────────────── */
.btn--lg {
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 800;
    border-radius: var(--radius-xl);
}

/* ─── Variant: Primary (gold background, dark text) ──────────────────── */
.btn--primary {
    background: var(--gold);
    color: var(--bg);
}

.btn--primary:hover:not(:disabled) {
    background: var(--gold-light);
}

/* ─── Variant: Accent (blue background, white text) ──────────────────── */
.btn--accent {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.btn--accent:hover:not(:disabled) {
    background: #1d4ed8;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

/* ─── Variant: Secondary (transparent with border) ───────────────────── */
.btn--secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn--secondary:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

/* ─── Variant: Danger (red background, white text) ───────────────────── */
.btn--danger {
    background: var(--danger);
    color: #fff;
}

/* ─── Variant: Ghost (no background, muted text) ─────────────────────── */
.btn--ghost {
    background: transparent;
    color: var(--text-muted);
    padding: 8px 12px;
}

.btn--ghost:hover:not(:disabled) {
    color: var(--text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════
   Dark container panel with border and rounded corners.
*/

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 28px;
}

/* Compact card variant (less padding) */
.card--compact {
    padding: 16px;
}

/* Clickable card (e.g., einspruch type selection) */
.card--clickable {
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card--clickable:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

/* Selected card (accent border) */
.card--selected {
    border: 2px solid var(--accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   INPUT FIELDS
   ═══════════════════════════════════════════════════════════════════════════
   Label + input wrapper with optional icon and error message.
*/

.input-group {
    margin-bottom: 16px;
}

.input-group__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Required field asterisk */
.input-group__required {
    color: var(--danger);
}

/* Wrapper for input + icon */
.input-group__wrapper {
    position: relative;
}

/* Icon inside the input (positioned left) */
.input-group__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* The actual <input> element */
.input-group__input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s ease;
}

/* Input with icon: extra left padding for the icon */
.input-group__input--with-icon {
    padding-left: 40px;
}

.input-group__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Error state */
.input-group__input--error {
    border-color: var(--danger);
}

.input-group__error {
    font-size: 12px;
    color: var(--danger);
    margin-top: 4px;
}

/* Textarea variant (same styling as input but multi-line) */
.input-group__textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease;
}

.input-group__textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOADING OVERLAY
   ═══════════════════════════════════════════════════════════════════════════
   Full-screen overlay with spinner and message.
   Hidden by default, shown via JavaScript (main.js: showLoading/hideLoading).
*/

.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-overlay.hidden {
    display: none;
}

.loading-overlay__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-overlay__text {
    color: var(--accent);
    margin-top: 16px;
    font-size: 16px;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ALERT BANNERS
   ═══════════════════════════════════════════════════════════════════════════
   Horizontal banner with icon + text. Used for deadline warnings,
   detection status, and informational notes.
*/

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.alert__icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.alert__title {
    font-size: 14px;
    font-weight: 700;
}

.alert__text {
    font-size: 13px;
    color: var(--text);
    margin-top: 2px;
}

/* Danger variant (deadline warning) */
.alert--danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.alert--danger .alert__icon,
.alert--danger .alert__title {
    color: var(--danger);
}

/* Success variant */
.alert--success {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert--success .alert__icon,
.alert--success .alert__title {
    color: var(--success);
}

/* Warning variant */
.alert--warning {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.alert--warning .alert__icon,
.alert--warning .alert__title {
    color: var(--warning);
}

/* Info variant (gold) */
.alert--info {
    background: rgba(201, 168, 76, 0.05);
    border: 1px solid rgba(201, 168, 76, 0.15);
}

.alert--info .alert__icon,
.alert--info .alert__title {
    color: var(--gold);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHECKBOX (Custom styled)
   ═══════════════════════════════════════════════════════════════════════════
   Used for reason selection (Step 3) and confirmation (Step 5).
*/

.checkbox {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.checkbox--checked {
    border-color: var(--accent);
    background: var(--accent);
}

.checkbox--round {
    border-radius: 50%;
}

/* Larger confirmation checkbox (Step 5) */
.checkbox--lg {
    width: 22px;
    height: 22px;
}

.checkbox--success {
    border-color: var(--success);
    background: var(--success);
}


/* ═══════════════════════════════════════════════════════════════════════════
   INFO BOX
   ═══════════════════════════════════════════════════════════════════════════
   Small disclaimer/information box. Used at bottom of landing and download pages.
*/

.info-box {
    padding: 14px 18px;
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: var(--radius-lg);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.info-box__icon {
    display: inline;
    vertical-align: middle;
    margin-right: 6px;
    color: var(--accent);
}