/* ====================================== */
/* GG (GOZDNI GRADITELJI) TEMPLATE STYLES */
/* Seamless green color theme + Cutting/Chopping GIFs */
/* ====================================== */

/* Override ALL primary color variables at root */
:root {
    --primary-color: #16a34a;
    --primary-hover: #15803d;
    --primary-light: #dcfce7;
    --gg-accent: #84cc16;
}

/* 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);
}

/* Green accented info box */
.prijave-container .info-box {
    background: var(--primary-light);
}

.prijave-container .info-box svg {
    color: var(--primary-color);
}

/* 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;
}

/* Falling leaves - position controlled by JavaScript */
.leaf {
    position: absolute;
    width: 24px;
    height: 28px;
    opacity: 0.75;
    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;
}

/* Leaf blade - organic teardrop shape */
.leaf::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 22px;
    background: linear-gradient(
        160deg,
        #4ade80 0%,
        #22c55e 25%,
        #16a34a 60%,
        #15803d 100%
    );
    border-radius: 80% 5% 55% 50% / 55% 5% 80% 50%;
    top: 0;
    left: 5px;
    box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.1),
                inset 2px 2px 4px rgba(255, 255, 255, 0.15);
    /* Prevent color inversion */
    -webkit-filter: none !important;
    filter: none !important;
}

/* Leaf stem + center vein */
.leaf::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 9px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #15803d 15%,
        #166534 70%,
        #14532d 100%
    );
    top: 18px;
    left: 11px;
    border-radius: 1px;
    /* Prevent color inversion */
    -webkit-filter: none !important;
    filter: none !important;
}

/* Leaf color variants - different greens for variety */
.leaf.variant-1::before {
    background: linear-gradient(
        160deg,
        #bef264 0%,
        #84cc16 25%,
        #65a30d 60%,
        #4d7c0f 100%
    );
}
.leaf.variant-1::after {
    background: linear-gradient(to bottom, transparent 0%, #4d7c0f 15%, #3f6212 70%, #365314 100%);
}

.leaf.variant-2::before {
    background: linear-gradient(
        160deg,
        #86efac 0%,
        #4ade80 25%,
        #22c55e 60%,
        #16a34a 100%
    );
}
.leaf.variant-2::after {
    background: linear-gradient(to bottom, transparent 0%, #16a34a 15%, #15803d 70%, #166534 100%);
}

.leaf.variant-3::before {
    background: linear-gradient(
        160deg,
        #d9f99d 0%,
        #a3e635 25%,
        #84cc16 60%,
        #65a30d 100%
    );
}
.leaf.variant-3::after {
    background: linear-gradient(to bottom, transparent 0%, #65a30d 15%, #4d7c0f 70%, #3f6212 100%);
}

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

/* Reduced motion - hide leaves entirely */
@media (prefers-reduced-motion: reduce) {
    .leaf {
        display: none;
    }
}

/* Smaller and fewer on mobile for performance */
@media (max-width: 768px) {
    .leaf {
        opacity: 0.55;
        width: 18px;
        height: 22px;
    }
    .leaf::before {
        width: 11px;
        height: 17px;
        left: 4px;
    }
    .leaf::after {
        width: 1.5px;
        top: 14px;
        height: 8px;
        left: 8px;
    }
}

/* Subtle green glow effect on container */
.prijave-container {
    position: relative;
}

.prijave-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(ellipse at center, rgba(22, 163, 74, 0.05) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

/* Green success icon */
.prijave-container .success-icon svg {
    color: var(--primary-color);
}

/* Member avatar active state */
.prijave-container .member-avatar.active {
    background: var(--primary-color);
}

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