.page-header {
    background-image: url("../../assets/images/background.png");
}

.btn-secondary, .btn.bg-gradient-secondary {
    box-shadow: 0 3px 3px 0 rgb(73 83 97 / 15%), 0 3px 1px -2px rgb(73 83 97 / 20%), 0 1px 5px 0 rgb(73 83 97 / 15%);
}

.btn-secondary:hover, .btn.bg-gradient-secondary:hover {
    box-shadow: 0 14px 26px -12px rgb(73 83 97 / 40%), 0 4px 23px 0 rgb(73 83 97 / 15%), 0 8px 10px -5px rgb(73 83 97 / 20%);
}

#dpay .input-group.input-group-dynamic .form-control {
    background-image: linear-gradient(0deg, #1a73e8 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0)
}

#dpay .input-group.input-group-dynamic.is-focused label {
    color: #1a73e8;
}

#dcb .input-group.input-group-dynamic .form-control {
    background-image: linear-gradient(0deg, #344767 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0)
}

#dcb .input-group.input-group-dynamic.is-focused label {
    color: #344767;
}

.work-sans-800 {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.work-sans-400 {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* --- Carousel Styles --- */
.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    width: fit-content;
    will-change: transform;
}

.carousel-container:hover .carousel-track {
    animation-play-state: paused;
}

.purchase-entry, .supporter-entry {
    flex-shrink: 0;
    width: 150px; /* Fixed width for each item */
}

/* Scroll from Right to Left */
@keyframes scroll-rtl {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Scroll from Left to Right */
@keyframes scroll-ltr {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

/* --- Best Offer Styles (Falling Particles Effect) --- */
@keyframes fall-particles {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 100%;
    }
}

.best-offer-container .info {
    position: relative;
    border-radius: .75rem;
    transform: scale(1.02);
    transition: all 0.3s ease-in-out;
    padding: 15px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Layer 1: Slower, larger, more distant particles */
.best-offer-container .info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.4) 1px, transparent 2px),
        radial-gradient(circle at 80% 10%, rgba(138, 43, 226, 0.5) 2px, transparent 3px),
        radial-gradient(circle at 50% 70%, rgba(138, 43, 226, 0.3) 1px, transparent 2px),
        radial-gradient(circle at 90% 90%, rgba(138, 43, 226, 0.6) 2px, transparent 3px);
    background-size: 100px 100px;
    animation: fall-particles 10s linear infinite;
}

/* Layer 2: Faster, smaller, closer particles */
.best-offer-container .info::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image:
        radial-gradient(circle at 10% 50%, rgba(224, 17, 255, 0.7) 1px, transparent 1px),
        radial-gradient(circle at 60% 80%, rgba(224, 17, 255, 0.8) 1px, transparent 2px),
        radial-gradient(circle at 35% 20%, rgba(224, 17, 255, 0.6) 1px, transparent 2px);
    background-size: 70px 70px;
    animation: fall-particles 5s linear infinite;
}

.best-offer-container .info > * {
    position: relative;
    z-index: 2;
}

.best-offer-container .info:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* --- Promotion Styles (Enhanced Visuals) --- */
.price-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.old-price {
    text-decoration: line-through;
    color: #9a9a9a; /* Lighter grey for less emphasis */
    font-size: 1rem;
    font-weight: 400;
}

.new-price {
    color: #4CAF50; /* A vibrant green for the sale price */
    font-weight: 700;
    font-size: 1.5rem;
}

.countdown-timer {
    background-color: #e8f5e9; /* Light green background to match the new price */
    color: #2e7d32; /* Darker green text */
    padding: 0.5rem 0.75rem;
    border-radius: 50px; /* Pill shape */
    font-size: 0.85rem;
    margin-top: 0;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.countdown-timer::before {
    content: '🕒'; /* Clock icon */
    font-size: 1rem;
}