/* ─── Bernese Mountain Dog Theme ──────────────────────────────────────────── */
:root {
    --cream:        #f8f5f0;
    --parchment:    #ede8e0;
    --forest:       #2d5016;
    --forest-light: #4a7a28;
    --rust:         #c1440e;
    --rust-light:   #d96030;
    --brown:        #8b6f47;
    --warm-gray:    #6b5d54;
    --soft-white:   #fdfaf7;
    --shadow:       rgba(80, 50, 20, 0.13);
    --shadow-deep:  rgba(80, 50, 20, 0.22);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--cream);
    background-image:
        radial-gradient(ellipse at 15% 15%, rgba(193, 68, 14, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(45, 80, 22, 0.06) 0%, transparent 55%);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ─── Decorative paw print background ─────────────────────────────────────── */
.bg-paws {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.paw-decor {
    position: absolute;
    font-size: 5rem;
    opacity: 0.045;
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

/* ─── Section system (visibility + opacity — NO display:none on sections) ─── */
.section {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.55s ease, visibility 0.55s ease;
    z-index: 1;
}

.section.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* ─── Landing ──────────────────────────────────────────────────────────────── */
.landing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    max-width: 860px;
    width: 100%;
}

.eyebrow {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brown);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.question {
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
    font-weight: 800;
    color: var(--forest);
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(45, 80, 22, 0.08);
}

/* ─── Polaroids ────────────────────────────────────────────────────────────── */
.polaroids-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding: 1rem 0.5rem;
}

.polaroid {
    background: var(--soft-white);
    padding: 0.75rem 0.75rem 3rem 0.75rem;
    box-shadow:
        3px 3px 0 rgba(139, 111, 71, 0.1),
        6px 12px 28px var(--shadow),
        0 2px 6px var(--shadow);
    border-radius: 2px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

.polaroid:hover {
    transform: scale(1.06) rotate(0deg) !important;
    box-shadow: 6px 16px 40px var(--shadow-deep);
    z-index: 10;
}

.polaroid img {
    width: 180px;
    height: 220px;
    object-fit: cover;
    display: block;
}

.polaroid-caption {
    position: absolute;
    bottom: 0.7rem;
    left: 0.5rem;
    right: 0.5rem;
    font-size: 1.4rem;
    color: var(--warm-gray);
    font-weight: 600;
    text-align: center;
}

.polaroid-1 { transform: rotate(-7deg); }
.polaroid-2 { transform: rotate(2.5deg) translateY(-10px); }
.polaroid-3 { transform: rotate(6deg) translateY(6px); }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.buttons-area {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    min-height: 64px;
}

.btn {
    font-family: 'Nunito', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.9rem 2.4rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-yes {
    background: linear-gradient(135deg, var(--forest), var(--forest-light));
    color: #fff;
    box-shadow: 0 6px 18px rgba(45, 80, 22, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-yes:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 26px rgba(45, 80, 22, 0.45);
}

.btn-no {
    background: linear-gradient(135deg, var(--rust), var(--rust-light));
    color: #fff;
    box-shadow: 0 6px 18px rgba(193, 68, 14, 0.35);
    /* position switches to fixed via JS — transition handles the glide */
    transition: top 0.18s ease, left 0.18s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-no.is-fixed {
    position: fixed;
    z-index: 9999;
}

/* ─── Card (Form + Success) ────────────────────────────────────────────────── */
.card {
    background: var(--soft-white);
    border-radius: 24px;
    padding: 3rem 3.5rem;
    box-shadow: 0 14px 45px var(--shadow-deep), 0 2px 10px var(--shadow);
    max-width: 560px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(139, 111, 71, 0.1);
}

.card-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--forest);
    margin-bottom: 2rem;
}

/* ─── Form ─────────────────────────────────────────────────────────────────── */
.date-form {
    text-align: left;
}

.form-group {
    margin-bottom: 1.8rem;
}

.form-group > label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--warm-gray);
    margin-bottom: 0.75rem;
}

input[type="datetime-local"],
.other-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 2px solid var(--parchment);
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
    background: var(--cream);
    color: var(--warm-gray);
    outline: none;
    transition: border-color 0.2s ease;
}

input[type="datetime-local"]:focus,
.other-input:focus {
    border-color: var(--forest);
}

.other-input {
    margin-top: 0.75rem;
}

/* ─── Vibe chips ───────────────────────────────────────────────────────────── */
.vibe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.vibe-chip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: var(--cream);
    border: 2px solid var(--parchment);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--warm-gray);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, color 0.2s ease;
    position: relative;
}

.vibe-chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.vibe-chip:hover {
    border-color: var(--brown);
    transform: translateY(-2px);
}

.vibe-chip:has(input:checked) {
    background: linear-gradient(135deg, #eaf2df, #d5e9be);
    border-color: var(--forest);
    color: var(--forest);
}

.vibe-chip-full {
    grid-column: 1 / -1;
    justify-content: center;
}

/* ─── Submit button ────────────────────────────────────────────────────────── */
.btn-submit {
    width: 100%;
    padding: 1rem;
    font-size: 1.15rem;
    margin-top: 0.25rem;
    border-radius: 14px;
}

.btn-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
}

/* ─── Success ──────────────────────────────────────────────────────────────── */
.success-card {
    text-align: center;
}

.success-heart {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: block;
    animation: heartbeat 1.3s ease-in-out infinite;
}

.success-sub {
    font-size: 1.15rem;
    color: var(--warm-gray);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.countdown-wrap {
    background: var(--cream);
    border-radius: 16px;
    padding: 1.5rem;
    border: 2px solid var(--parchment);
}

.countdown-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brown);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.countdown-display {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--forest);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.18); }
}

/* ─── Bernese Mountain Dog mascot ─────────────────────────────────────────── */
.dog-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.bern-dog {
    width: 145px;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(80, 50, 20, 0.24));
    animation: dog-bob 2.4s ease-in-out infinite;
}

.bern-tail {
    transform-origin: 145px 148px;
    animation: wag-tail 0.65s ease-in-out infinite;
}

.bern-head-group {
    transform-origin: 100px 128px;
    animation: head-tilt 5.5s ease-in-out infinite;
}

.bern-pupil {
    transform-box: fill-box;
    transform-origin: center;
    animation: blink 4.5s ease-in-out infinite;
}

@keyframes dog-bob {
    0%, 100% { transform: translateY(0px);  }
    50%       { transform: translateY(-6px); }
}

@keyframes wag-tail {
    0%, 100% { transform: rotate(-14deg); }
    50%       { transform: rotate(22deg);  }
}

@keyframes head-tilt {
    0%, 30%, 70%, 100% { transform: rotate(0deg);   }
    45%, 58%           { transform: rotate(-14deg); }
}

@keyframes blink {
    0%, 80%, 100%  { transform: scaleY(1);    }
    86%            { transform: scaleY(0.06); }
    90%            { transform: scaleY(1);    }
    94%            { transform: scaleY(0.06); }
}