:root {
    /* --- EXACT BOOTSTRAP DANGER PALETTE --- */
    --theme-main: #dc3545; /* The exact Bootstrap Danger Red */
    --theme-dark: #bb2d3b; /* Darker red for hovers/gradients */
    --theme-light: #ea868f; /* Lighter red for gradients/accents */
    --theme-pale: #fff5f5; /* Very faint pink/white for page background */
    --theme-icon-bg: #f8d7da; /* Standard alert-danger background for icons */
}

/* --- 1. FULLSCREEN WATERMARK LOGIC --- */
body {
    position: relative;
    min-height: 100vh;
    background-color: var(--theme-pale);
}

    body::before {
        content: "";
        position: fixed; /* Fixed prevents it from scrolling, stays in bg */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Image Path */
        background-image: url('/imgs/Nig_Coat_of_arm 2.png');
        background-repeat: no-repeat;
        background-position: center center;
        /* KEY CHANGE: 80vmin scales it to 80% of the screen's smallest side.
               'contain' also works, but '80vmin' gives nice breathing room. */
        background-size: 80vmin;
        opacity: 0.08; /* Transparency level */
        z-index: -1; /* Puts it behind the card */
        pointer-events: none; /* Allows clicking through the image */
    }

/* --- 2. Card Styling (Danger Theme) --- */
.card {
    border: none;
    /* Glassmorphism: Slight transparency to let the watermark show through vaguely */
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(220, 53, 69, 0.15);
    border-radius: 15px;
    backdrop-filter: blur(2px); /* Optional: Blurs the watermark behind the text for readability */
}

.card-header {
    background: linear-gradient(135deg, var(--theme-main), var(--theme-dark));
    color: white;
    border-radius: 15px 15px 0 0 !important;
    padding: 20px;
}

/* --- 3. Input Styling --- */
.input-group-text {
    background-color: var(--theme-icon-bg);
    border-right: none;
    color: var(--theme-main);
    width: 45px;
    justify-content: center;
    border-color: #ced4da;
}

.form-control, .form-select {
    border-left: none;
    background-color: rgba(255, 255, 255, 0.8); /* Slight transparent inputs */
}

    .form-control:focus, .form-select:focus {
        box-shadow: none;
        border-color: var(--theme-light);
        border-bottom: 2px solid var(--theme-main);
        background-color: #fff;
    }

/* --- 4. Button & Text Overrides --- */
.btn-primary {
    background-color: var(--theme-main);
    border-color: var(--theme-main);
}

    .btn-primary:hover {
        background-color: var(--theme-dark) !important;
        border-color: var(--theme-dark) !important;
    }

.text-primary {
    color: var(--theme-main) !important;
}

.progress-bar {
    background-color: var(--theme-main) !important;
}

/* --- 5. Wizard Animations --- */
.form-step {
    display: none;
    animation: fadeIn 0.5s;
}

.form-step-active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 6. Validation --- */
.was-validated .form-control:valid, .form-control.is-valid {
    border-color: #198754;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.text-danger {
    color: var(--theme-main) !important;
}