/* Custom styles that extend Tailwind */

/* Logo placeholder styling */
.logo-placeholder {
    @apply w-[120px] h-20 rounded-xl flex items-center justify-center text-xs font-medium uppercase tracking-wide;
    background: linear-gradient(135deg, rgba(0, 163, 224, 0.1), rgba(46, 204, 113, 0.1));
    border: 2px dashed #00A896;
    color: #00A896;
}

.logo-placeholder img {
    @apply max-w-full max-h-full object-contain;
}

.logo-placeholder:has(img[src]:not([src=""])) {
    border: none;
    background: transparent;
}

/* Gradient text for heading */
.gradient-text {
    background: linear-gradient(135deg, #00A3E0 0%, #00A896 50%, #27AE60 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card top accent bar */
.card-accent::before {
    content: '';
    @apply absolute top-0 left-0 right-0 h-1;
    background: linear-gradient(90deg, #00A3E0, #00A896, #2ECC71);
}

/* Button gradient */
.btn-gradient {
    background: linear-gradient(135deg, #00A3E0 0%, #00A896 100%);
}

.btn-gradient:hover {
    background: linear-gradient(135deg, #00A896 0%, #2ECC71 100%);
}

/* Countdown number gradient background */
.countdown-gradient {
    background: linear-gradient(135deg, #00A3E0, #00A896);
}

/* Progress ring styles */
.progress-ring {
    @apply absolute -top-[3px] -left-[3px] w-[42px] h-[42px];
}

.progress-ring circle {
    fill: transparent;
    stroke: #2ECC71;
    stroke-width: 3;
    stroke-dasharray: 113;
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 1s linear;
}


/* Background image */
body {
    background: 
        /* linear-gradient(135deg, rgba(0, 163, 224, 0.3) 0%, rgba(0, 168, 150, 0.3) 100%), */
        url('/landing_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}