body {
    font-family: 'Manrope', sans-serif;
    background-color: #f3f4f6; /* Darker gray-100 instead of gray-50 */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23dbeafe' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Hero section with gradient background */
#hero {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 50%, #dcfce7 100%);
    border-radius: 1rem;
    margin-bottom: 2rem;
}

.offer-card {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06),
                0 0 0 1px rgba(16, 185, 129, 0.1); /* Subtle green border glow */
}

.offer-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.offer-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04),
                0 0 0 2px rgba(16, 185, 129, 0.2); /* Stronger green glow on hover */
    transform: translateY(-4px);
}

.feature {
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, border-color 0.3s;
    border-left: 4px solid #e5e7eb;
}

.feature:nth-child(1) {
    border-left-color: #10B981; /* emerald-500 */
}

.feature:nth-child(2) {
    border-left-color: #3B82F6; /* blue-500 */
}

.feature:nth-child(3) {
    border-left-color: #F59E0B; /* amber-500 */
}

.feature:nth-child(4) {
    border-left-color: #8B5CF6; /* violet-500 */
}

.feature:hover {
    transform: translateY(-5px);
}

.best-offer {
    border: 2px solid #f59e0b;
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.2), 0 4px 6px -2px rgba(245, 158, 11, 0.1);
}

.highlighted-date {
    color: #059669; /* emerald-600 */
    font-weight: 800; /* extrabold */
}

#approval-chance {
    transition: color 0.3s ease-in-out;
}

#submit-split {
    transition: background-color 0.3s ease-in-out, transform 0.1s ease-in-out;
}

/* Custom Range Slider Styles */
.custom-range {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    height: 12px; /* align visual track height */
}

.custom-range:focus {
    outline: none;
}

/* Thumb for WebKit browsers (Chrome, Safari) */
.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    background: #10B981; /* emerald-500 */
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    cursor: pointer;
    margin-top: -6px; /* (12px track - 24px thumb) / 2 */
}

/* Track for WebKit */
.custom-range::-webkit-slider-runnable-track {
    height: 12px;
    background: #e5e7eb; /* gray-200 */
    border-radius: 6px;
}

/* Thumb for Firefox */
.custom-range::-moz-range-thumb {
    height: 24px;
    width: 24px;
    background: #10B981;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* Track for Firefox */
.custom-range::-moz-range-track {
    height: 12px;
    background: #e5e7eb; /* gray-200 */
    border-radius: 6px;
}

/* Thumb for IE/Edge */
.custom-range::-ms-thumb {
    height: 24px;
    width: 24px;
    background: #10B981;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* Track for IE/Edge */
.custom-range::-ms-track {
    height: 12px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.custom-range::-ms-fill-lower,
.custom-range::-ms-fill-upper {
    background: #e5e7eb; /* gray-200 */
    border-radius: 6px;
}

/* Social Proof Notification Styles */
.social-proof-notification {
    background-color: white;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.social-proof-notification.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Social Proof Feed Styles */
.social-proof-feed-item {
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 1rem;
    border-left: 3px solid #10B981;
    border-top: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.social-proof-feed-item:hover {
    background-color: #f0fdf4;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1);
}