@import url("_variables.css");

.nagradni-natjecaj h1 {
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    font-weight: 800;
}

.nagradni-natjecaj-potvrda h1{
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;    
}
.nagradni-natjecaj p {
    line-height: 1.2;
    font-size: 1.2rem;
}

.nagradni-natjecaj .img-givaway-wrap {
    position: relative;    
}

.nagradni-natjecaj .img-givaway-wrap img {
  width: 100%;
  height: 100%; 
  object-fit: contain;
  object-position: center;
}

.nagradni-natjecaj .badge-discount {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(8.25rem, 15vw, 12rem);
    height: clamp(8.25rem, 15vw, 12rem);
    padding: 1rem !important;
    color: #fff;
    border-radius: 50%;
    line-height: 1.05;
    text-shadow: 0 0.12rem 0.3rem rgba(35, 9, 55, 0.22);
    box-shadow:
        0 1.25rem 3.25rem rgba(0, 0, 0, 0.38),
        0 0 2.25rem rgba(255, 166, 41, 0.28),
        inset 0 0.2rem 0.65rem rgba(255, 255, 255, 0.25),
        inset 0 -1.1rem 1.7rem rgba(28, 0, 48, 0.22);
    transform: rotate(7deg);
    isolation: isolate;
}

.nagradni-natjecaj .badge-discount::before {
    content: "";
    position: absolute;
    inset: 0.55rem 0.9rem auto;
    height: 25%;
    width: 50%;
    left: 50%;
    margin-left: -25%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
    opacity: 0.65;
    pointer-events: none;
    z-index: -1;
}

.nagradni-natjecaj .badge-putovanja-popust {
    bottom: 8%;
    right: 10%;
    background: linear-gradient(145deg, #ff9f21 6%, #ff6d21 42%, #ef245b 78%, #9a34dd 100%) !important;
}

.nagradni-natjecaj .badge-ostalo-popust {
    bottom: 3%;
    right: 35%;    
    background: radial-gradient(circle at 30% 15%, #b963d8 0, #7d31b2 42%, #4a167d 100%) !important;
    transform: rotate(-8deg);
    box-shadow:
        0 1.25rem 3.25rem rgba(0, 0, 0, 0.42),
        0 0 2rem rgba(178, 83, 255, 0.32),
        inset 0 0.2rem 0.65rem rgba(255, 255, 255, 0.2),
        inset 0 -1.1rem 1.7rem rgba(26, 0, 51, 0.28);
}

.nagradni-natjecaj .badge-discount strong {
    font-size: clamp(2.45rem, 4.5vw, 4rem) !important;
    line-height: 0.9;
}

.nagradni-natjecaj .badge-discount span {
    max-width: 9rem;
}

@media (max-width: 991.98px) {    

    .nagradni-natjecaj .badge-putovanja-popust {
        top: 12%;
        right: 5%;
    }

    .nagradni-natjecaj .badge-ostalo-popust {
        right: 22%;
        bottom: 10%;
    }
}

@media (max-width: 768px) {    
    .nagradni-natjecaj .badge-discount {
        width: 8rem;
        height: 8rem;
        font-size: 0.78rem;
    }

    .nagradni-natjecaj .badge-putovanja-popust {
        top: 14%;
        right: 3%;
    }

    .nagradni-natjecaj .badge-ostalo-popust {
        right: 18%;
        bottom: 13%;
    }
    .nagradni-natjecaj p {
        line-height: 1.5;
        font-size: 0.8rem;
    }
}