/* GreenLoop — Pickup modal & custom alert styles */

#glPickupModalWrap.gl-modal-hidden {
    visibility: hidden;
    pointer-events: none;
}

#glPickupOverlay {
    transition: opacity .25s ease;
}

#glPickupModal {
    transition: opacity .25s ease, transform .25s ease;
}

.gl-modal-hidden #glPickupOverlay {
    opacity: 0;
    pointer-events: none;
}

.gl-modal-hidden #glPickupModal {
    opacity: 0;
    transform: translateY(16px) scale(.97);
    pointer-events: none;
}

#glAlertStack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: 22rem;
    width: calc(100% - 2rem);
}

@media (max-width: 480px) {
    #glAlertStack {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

.gl-alert {
    animation: gl-alert-in .28s ease forwards;
}

.gl-alert.gl-alert-out {
    animation: gl-alert-out .22s ease forwards;
}

@keyframes gl-alert-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

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

@keyframes gl-alert-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(24px);
    }
}

.gl-field-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px #dc2626;
}

/* "Become a Partner" modal (mirrors the pickup modal above) */
#glPartnerModalWrap.gl-modal-hidden {
    visibility: hidden;
    pointer-events: none;
}

#glPartnerOverlay {
    transition: opacity .25s ease;
}

#glPartnerModal {
    transition: opacity .25s ease, transform .25s ease;
}

.gl-modal-hidden #glPartnerOverlay {
    opacity: 0;
    pointer-events: none;
}

.gl-modal-hidden #glPartnerModal {
    opacity: 0;
    transform: translateY(16px) scale(.97);
    pointer-events: none;
}

/* Preloader */
#preloader{
    position:fixed;
    inset:0;
    z-index:999999;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;

    opacity:1;
    visibility:visible;

    transition:
        opacity .8s ease,
        visibility .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
}

#preloader.hide{
    opacity:0;
    visibility:hidden;
    transform:scale(1.03);
    pointer-events:none;
}

.background-circle {
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle, #9be15d20, #1ca54d10, transparent);
    animation: pulse 3s infinite;
}

.loader {
    position: relative;
    text-align: center;
    z-index: 5;
}

.circle {
    position: relative;
    width: 220px;
    height: 220px;
    margin: auto;
    animation: rotate 6s linear infinite;
}

.circle svg {
    width: 220px;
    height: 220px;
    transform: rotate(-90deg);
}

.circle circle {
    fill: none;
    stroke: #12a150;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 360;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 12px #1fae5a);
}

.loader .loader-title {
    margin-top: 25px;
    font-size: 48px;
    font-weight: 700;
    color: #0c803d;
}

.loader .loader-title span {
    color: #25b457;
}

.loader p {
    margin-top: 10px;
    font-size: 18px;
    color: #555;
}



.leaf {
    position: absolute;
    font-size: 28px;
    animation: float 7s linear infinite;
    opacity: .8;
}

.leaf1 {
    left: 12%;
    top: 18%;
    animation-delay: 0s;
}

.leaf2 {
    right: 18%;
    top: 22%;
    animation-delay: 2s;
}

.leaf3 {
    left: 72%;
    bottom: 20%;
    animation-delay: 4s;
}

@keyframes rotate {

    100% {
        transform: rotate(360deg);
    }

}

@keyframes float {

    0% {
        transform: translateY(40px) rotate(0deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-450px) rotate(360deg);
        opacity: 0;
    }

}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .5;
    }

    50% {
        transform: scale(1.1);
        opacity: .8;
    }

}