/* ============================
   Base
   ============================ */
html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    margin-bottom: 60px;
    background-color: #f4f6fb;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.giveaway-body {
    background: linear-gradient(160deg, #eef2ff 0%, #f4f6fb 60%);
    min-height: 100vh;
}

/* ============================
   Hero / Logo / Feature Image
   ============================ */
.giveaway-hero {
    padding-top: 2rem;
}

.logo {
    max-height: 80px;
    width: auto;
}

.feature-image-wrapper {
    padding: 0 1rem;
}

.feature-image {
    width: 280px;
    height: 280px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(37,99,235,0.18);
}

@media (min-width: 576px) {
    .feature-image {
        width: 340px;
        height: 340px;
    }
}

.convention-name {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.9rem !important;
}

/* ============================
   Date / Countdown
   ============================ */
.date-block {
    padding: 0.5rem;
}

.date-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    font-weight: 600;
}

.date-value {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

#countdown-block .date-value {
    font-size: 1.1rem;
    color: #2563eb;
    font-variant-numeric: tabular-nums;
}

/* ============================
   Option Cards (survey questions)
   ============================ */
.option-card {
    display: block;
    cursor: pointer;
    border: 2px solid #dee2e6;
    border-radius: 0.6rem;
    padding: 0.65rem 1rem;
    background: #fff;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    user-select: none;
    text-align: center;
}

.option-card:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.option-card.selected {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

.option-card.selected .option-label::before {
    content: "✓  ";
    color: #2563eb;
}

.option-label {
    display: block;
    pointer-events: none;
}

/* ============================
   Submit Button
   ============================ */
.submit-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    border-radius: 0.75rem;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    transition: transform 0.12s, box-shadow 0.12s;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37,99,235,0.45);
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

/* ============================
   Thank You Page
   ============================ */
.winner-info p {
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

/* ============================
   Footer
   ============================ */
.footer {
    border-top: 1px solid #dee2e6;
    background: #fff;
}

/* ============================
   Cards
   ============================ */
.card {
    border: none;
    border-radius: 0.75rem;
}

.card-header {
    border-radius: 0.75rem 0.75rem 0 0 !important;
}

/* ============================
   Focus states
   ============================ */
.btn:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #93c5fd;
}