/* ====================================== */
/* MC (MEDVEDKI ČEBELICE) TEMPLATE STYLES */
/* Seamless red color theme + Dynamic particle-like bees */
/* ====================================== */

/* Override ALL primary color variables at root */
:root {
    --primary-color: #dc2626;
    --primary-hover: #b91c1c;
    --primary-light: #fee2e2;
    --mc-accent: #fbbf24;
}

/* Additional targeted overrides for full coverage */
.prijave-container .member-avatar {
    background: var(--primary-color);
}

.prijave-container .progress-step.completed .progress-step-circle {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.prijave-container .progress-step.active .progress-step-label {
    color: var(--primary-color);
}

.prijave-container .google-btn:hover {
    border-color: var(--primary-color);
}

.prijave-container .payment-method-icon svg {
    color: var(--primary-color);
}

.prijave-container .payment-amount strong {
    color: var(--primary-color);
}

.prijave-container .group {
    border-left-color: var(--primary-color);
}

.prijave-container .extra-fields-container input[type="radio"],
.prijave-container .extra-fields-container input[type="checkbox"],
.prijave-container .consent-checkbox,
.prijave-container .consent-option input,
.prijave-container .payment-method input,
.prijave-container input[type="range"] {
    accent-color: var(--primary-color);
}

.prijave-container .extra-fields-container div:has(> input[type="radio"]) label:hover,
.prijave-container .extra-fields-container div:has(> input[type="checkbox"]) label:hover,
.prijave-container .extra-fields-container .flik-radio-group label:hover,
.prijave-container .extra-fields-container .flik-radio-group label:has(input:checked),
.prijave-container .extra-fields-container input[type="file"]:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

/* Decorative container - behind the form */
.decorative-elements {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Small cute bees - position controlled by JavaScript */
.bee {
    position: absolute;
    width: 24px;
    height: 24px;
    opacity: 0.6;
    will-change: transform;
    transition: none;
    /* Prevent dark mode color inversion (Samsung browser, etc.) */
    color-scheme: only light;
    -webkit-filter: none;
    filter: none;
    forced-color-adjust: none;
}

/* Bee body */
.bee::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 12px;
    background: linear-gradient(90deg, 
        #fbbf24 0%, #fbbf24 20%, 
        #1a1a1a 20%, #1a1a1a 40%,
        #fbbf24 40%, #fbbf24 60%,
        #1a1a1a 60%, #1a1a1a 80%,
        #fbbf24 80%, #fbbf24 100%);
    border-radius: 50%;
    top: 6px;
    left: 4px;
    /* Prevent color inversion */
    -webkit-filter: none !important;
    filter: none !important;
}

/* Bee wings */
.bee::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 8px;
    /* Use solid color instead of transparency for better dark mode compat */
    background: #f0f0f0;
    border-radius: 50%;
    top: 2px;
    left: 6px;
    animation: flapWings 0.08s ease-in-out infinite alternate;
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
    /* Prevent color inversion */
    -webkit-filter: none !important;
    filter: none !important;
}

/* Dark mode fixes for Samsung browser and others */
@media (prefers-color-scheme: dark) {
    .bee {
        opacity: 0.7;
        isolation: isolate;
        mix-blend-mode: normal;
    }
    .bee::before,
    .bee::after {
        mix-blend-mode: normal;
    }
}

@keyframes flapWings {
    0% { transform: scaleY(1) rotate(-10deg); }
    100% { transform: scaleY(0.6) rotate(10deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bee {
        display: none;
    }
    .bee::after {
        animation: none;
    }
}

/* Smaller on mobile for performance */
@media (max-width: 768px) {
    .bee {
        /*opacity: 0.3;*/
        width: 18px;
        height: 18px;
    }
    .bee::before {
        width: 12px;
        height: 9px;
        top: 5px;
        left: 3px;
    }
    .bee::after {
        width: 9px;
        height: 6px;
        top: 1px;
        left: 4px;
    }
}