/* Modern Animated Background for Login Pages */
    @keyframes gradientShift {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-20px);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body {
        background: linear-gradient(-45deg, var(--bs-primary), var(--brand-purple-light), #f093fb, #4facfe);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    /* Network Pattern Overlay */
    body::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
            radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
        background-size: 100% 100%;
        animation: float 20s ease-in-out infinite;
        pointer-events: none;
    }

    /* Network dots pattern */
    body::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.15), transparent),
            radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,0.15), transparent),
            radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.1), transparent),
            radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.1), transparent),
            radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,0.15), transparent),
            radial-gradient(1px 1px at 33% 80%, rgba(255,255,255,0.1), transparent);
        background-size: 200px 200px, 150px 150px, 180px 180px, 220px 220px, 160px 160px, 190px 190px;
        background-repeat: repeat;
        pointer-events: none;
        opacity: 0.5;
    }

    .container {
        position: relative;
        z-index: 1;
        animation: fadeInUp 0.8s ease-out;
    }

    /* Glassmorphism Card */
    .card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 8px !important; /* 8px - matches portal input/button rounding */
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow:
            0 8px 32px 0 rgba(31, 38, 135, 0.37),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        transition: all 0.3s ease;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow:
            0 15px 45px 0 rgba(31, 38, 135, 0.45),
            0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    }

    .card-body {
        padding: 2rem !important;
    }

    /* Logo/Title Area */
    h3 {
        font-weight: 700;
        font-size: 1.5rem;
        background: var(--brand-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1.25rem !important;
    }

    /* Form Styling */
    .form-label {
        font-weight: 600;
        color: #4a5568;
        font-size: 0.875rem;
    }

    .form-control {
        border-radius: 8px !important; /* 8px - fully consistent */
        border: 2px solid #e2e8f0;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    .form-control:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 4px rgba(101, 37, 131, 0.1);
        transform: translateY(-2px);
    }

    /* Button Styling */
    .btn-primary {
        background: var(--brand-gradient);
        border: none;
        border-radius: 8px !important; /* 8px - fully consistent */
        padding: 0.75rem 2rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s ease;
    }

    .btn-primary:hover::before {
        left: 100%;
    }

    .btn-primary:hover {
        background: var(--brand-gradient-hover);
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(101, 37, 131, 0.4);
    }

    .btn-primary:active {
        transform: translateY(0);
    }

    /* Checkbox Styling */
    .form-check-input {
        border-radius: 5px;
        border: 2px solid #e2e8f0;
        width: 1.2em;
        height: 1.2em;
    }

    .form-check-input:checked {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    .form-check-label {
        color: #4a5568;
        font-size: 0.9rem;
    }

    /* Link Styling */
    a.text-muted {
        color: var(--bs-primary) !important;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
    }

    a.text-muted::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--brand-gradient);
        transition: width 0.3s ease;
    }

    a.text-muted:hover::after {
        width: 100%;
    }

    a.text-muted:hover {
        color: var(--brand-purple-light) !important;
    }

    /* Alert Styling */
    .alert {
        border-radius: 8px !important; /* 8px - consistent with card */
        border: none;
        animation: fadeInUp 0.5s ease-out;
    }

    .alert-danger {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
        color: white;
    }

    .alert-success {
        background: rgba(209, 250, 229, 0.95);
        color: #065f46;
        border: 1px solid rgba(52, 211, 153, 0.3);
    }

    .alert-success .alert-heading {
        color: #047857;
    }

    .alert-success hr {
        border-color: rgba(52, 211, 153, 0.2);
    }

    .alert-success .alert-link {
        color: #059669;
        font-weight: 600;
        text-decoration: underline;
    }

    .alert-info {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
    }

    /* Tighter form spacing */
    .mb-3 {
        margin-bottom: 1rem !important;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .card-body {
            padding: 1.5rem !important;
        }

        h3 {
            font-size: 1.25rem;
            margin-bottom: 1rem !important;
        }

        body::after {
            opacity: 0.3;
        }
    }

    /* Add subtle pulsing effect to the login button */
    @keyframes pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(101, 37, 131, 0.7);
        }
        50% {
            box-shadow: 0 0 0 10px rgba(101, 37, 131, 0);
        }
    }

    .btn-primary:not(:hover) {
        animation: pulse 2s infinite;
    }

    /* ========================================
       🎉 GRAND OPENING CELEBRATION ANIMATIONS
       ======================================== */

    /* Celebration container - sits behind login form */
    .celebration-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
    }

    /* Canvas for fireworks */
    #celebration-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Confetti particles */
    .confetti {
        position: absolute;
        width: 10px;
        height: 10px;
        background: #f0f;
        opacity: 0;
    }

    @keyframes confetti-fall {
        0% {
            opacity: 1;
            transform: translateY(0) rotateZ(0deg);
        }
        100% {
            opacity: 0;
            transform: translateY(100vh) rotateZ(720deg);
        }
    }

    /* Sparkle effects */
    @keyframes sparkle {
        0%, 100% {
            opacity: 0;
            transform: scale(0);
        }
        50% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .sparkle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
        animation: sparkle 2s ease-in-out infinite;
        pointer-events: none;
    }

    /* Firework burst particles */
    @keyframes firework-burst {
        0% {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }
        100% {
            opacity: 0;
            transform: var(--burst-offset) scale(0.5);
        }
    }

    .firework-particle {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        animation: firework-burst 1s ease-out forwards;
    }

    /* ========================================
       🌟 FESTIVE PERIOD THEME (South African Summer)
       Warm, inclusive celebration for all cultures
       ======================================== */

    /* Festive gradient - warm summer sunset colors */
    body.festive-theme {
        background: linear-gradient(-45deg,
            #FF6B35,  /* Warm orange */
            #F7C948,  /* Golden yellow */
            #E8505B,  /* Festive red */
            #9B5DE5,  /* Purple (rainbow) */
            #00BBF9   /* Sky blue (rainbow) */
        );
        background-size: 500% 500%;
        animation: festiveGradient 20s ease infinite;
    }

    @keyframes festiveGradient {
        0% { background-position: 0% 50%; }
        25% { background-position: 50% 100%; }
        50% { background-position: 100% 50%; }
        75% { background-position: 50% 0%; }
        100% { background-position: 0% 50%; }
    }

    /* Festive overlay - subtle warm glow pattern */
    body.festive-theme::before {
        background-image:
            radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 75% 75%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 50% 10%, rgba(247, 201, 72, 0.1) 0%, transparent 40%);
        animation: festiveFloat 25s ease-in-out infinite;
    }

    @keyframes festiveFloat {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-15px) scale(1.02); }
    }

    /* Festive star pattern instead of network dots */
    body.festive-theme::after {
        background-image:
            radial-gradient(2px 2px at 15% 20%, rgba(255, 255, 255, 0.8), transparent),
            radial-gradient(3px 3px at 45% 15%, rgba(255, 215, 0, 0.9), transparent),
            radial-gradient(2px 2px at 70% 35%, rgba(255, 255, 255, 0.7), transparent),
            radial-gradient(1px 1px at 25% 60%, rgba(255, 255, 255, 0.6), transparent),
            radial-gradient(3px 3px at 85% 55%, rgba(255, 215, 0, 0.8), transparent),
            radial-gradient(2px 2px at 55% 80%, rgba(255, 255, 255, 0.7), transparent),
            radial-gradient(2px 2px at 10% 85%, rgba(255, 215, 0, 0.6), transparent),
            radial-gradient(1px 1px at 90% 90%, rgba(255, 255, 255, 0.8), transparent);
        background-size: 250px 250px, 300px 300px, 200px 200px, 180px 180px, 220px 220px, 260px 260px, 190px 190px, 240px 240px;
        opacity: 0.7;
        animation: twinkle 4s ease-in-out infinite alternate;
    }

    @keyframes twinkle {
        0% { opacity: 0.5; }
        100% { opacity: 0.8; }
    }

    /* Festive container for light particles */
    .festive-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
    }

    #festive-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Floating light orbs - CSS fallback */
    .festive-light {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        animation: floatUp linear infinite;
    }

    @keyframes floatUp {
        0% {
            transform: translateY(100vh) translateX(0) scale(0);
            opacity: 0;
        }
        10% {
            opacity: 1;
            transform: translateY(90vh) translateX(10px) scale(1);
        }
        90% {
            opacity: 0.8;
            transform: translateY(10vh) translateX(-10px) scale(1);
        }
        100% {
            opacity: 0;
            transform: translateY(-10vh) translateX(0) scale(0.5);
        }
    }

    /* Festive card enhancement - warm glow */
    body.festive-theme .card {
        box-shadow:
            0 8px 32px 0 rgba(255, 107, 53, 0.25),
            0 0 60px rgba(247, 201, 72, 0.1),
            0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    }

    body.festive-theme .card:hover {
        box-shadow:
            0 15px 45px 0 rgba(255, 107, 53, 0.35),
            0 0 80px rgba(247, 201, 72, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    }

    /* Festive button - warm golden pulse */
    body.festive-theme .btn-primary:not(:hover) {
        animation: festivePulse 2.5s infinite;
    }

    @keyframes festivePulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(247, 201, 72, 0.6);
        }
        50% {
            box-shadow: 0 0 0 12px rgba(247, 201, 72, 0);
        }
    }

    /* Mobile adjustments for festive theme */
    @media (max-width: 768px) {
        body.festive-theme::after {
            opacity: 0.4;
        }
    }


/* ==========================================================================
   Short screens — folded foldables, landscape phones
   A Motorola Razr cover screen is ~373x402. The login card is 662px tall, of which
   the logo block is ~222px, so the Login button landed 108px below the fold. The page
   scrolls, but a submit button you have to go looking for is a broken login.
   Height-keyed, not width-keyed: these screens are normal-width and short.
   ========================================================================== */
@media (max-height: 600px) {
    .card-body.p-3 {
        padding: 0.75rem !important;
    }

    /* The logo carries an inline max-width:180px, hence !important. */
    .card-body img.img-fluid {
        max-width: 88px !important;
        margin-bottom: 0.25rem !important;
    }

    .card-body .col-md-5 {
        margin-bottom: 0.5rem !important;
    }

    .card-body h3 {
        margin-bottom: 0.5rem !important;
    }

    .card-body .mb-3 { margin-bottom: 0.5rem !important; }
    .card-body .mb-2 { margin-bottom: 0.35rem !important; }
}

/* Cover screens proper. The brand is already on the page behind the card; the form is
   the job. Dropping the logo block is what actually buys the fold back. */
@media (max-height: 460px) {
    .card-body .col-md-5 {
        display: none !important;
    }

    .card-body .col-md-7 {
        border-left: 0 !important;
        padding-left: 0 !important;
    }
}