/* ==========================================================================
   Kampidoe Reservatie — gedeelde basisstijlen
   Vormt de visuele basis voor stap 1 (kalender), stap 2 (gegevens),
   stap 3 (overzicht) en stap 4 (bedankt). Alle regels zijn geschoold onder
   .kampidoe-app zodat het thema van de site niet wordt overschreven.
   ========================================================================== */

.kampidoe-app {
    --kd-pine: #1e4438;
    --kd-pine-dark: #123026;
    --kd-moss: #4c7a63;
    --kd-sage: #e7efe6;
    --kd-sand: #f7f3e9;
    --kd-amber: #c8862a;
    --kd-amber-dark: #a86c1c;
    --kd-berry: #b23b3b;
    --kd-berry-bg: #f6dede;
    --kd-gold-bg: #f8ecc4;
    --kd-ink: #23281f;
    --kd-muted: #6c7568;
    --kd-line: #d9d2bf;
    --kd-white: #ffffff;

    --kd-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --kd-font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --kd-radius-s: 6px;
    --kd-radius-m: 10px;
    --kd-radius-l: 18px;
    --kd-space-1: 6px;
    --kd-space-2: 12px;
    --kd-space-3: 20px;
    --kd-space-4: 32px;
    --kd-shadow: 0 2px 10px rgba(30, 68, 56, 0.08);

    font-family: var(--kd-font-body);
    color: var(--kd-ink);
    background: var(--kd-sand);
    padding: var(--kd-space-4) var(--kd-space-3);
    border-radius: var(--kd-radius-l);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.5;
    box-sizing: border-box;
}

.kampidoe-app *,
.kampidoe-app *::before,
.kampidoe-app *::after {
    box-sizing: inherit;
}

.kampidoe-app h1,
.kampidoe-app h2,
.kampidoe-app h3 {
    font-family: var(--kd-font-display);
    color: var(--kd-pine-dark);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--kd-space-2) 0;
}

.kampidoe-app h3 {
    font-size: 1.35rem;
    padding-bottom: var(--kd-space-1);
    border-bottom: 2px solid var(--kd-sage);
    margin-top: var(--kd-space-4);
}

.kampidoe-app h3:first-of-type {
    margin-top: 0;
}

.kampidoe-app p {
    margin: 0 0 var(--kd-space-2) 0;
    color: var(--kd-ink);
}

.kampidoe-app a {
    color: var(--kd-pine);
}

.kampidoe-app .kd-intro {
    font-size: 1.05rem;
    color: var(--kd-muted);
    max-width: 60ch;
}

.kampidoe-app .kd-warning {
    background: var(--kd-gold-bg, #f8ecc4);
    border: 1px solid var(--kd-amber);
    color: var(--kd-amber-dark);
    border-radius: var(--kd-radius-s);
    padding: 10px 14px;
    font-weight: 500;
    font-size: 0.9rem;
}

/* ---- Formuliervelden (gedeeld door stap 1 & 2) ------------------------- */

.kampidoe-app input[type="text"],
.kampidoe-app input[type="number"],
.kampidoe-app select,
.kampidoe-app textarea {
    font-family: var(--kd-font-body);
    font-size: 0.95rem;
    color: var(--kd-ink);
    background: var(--kd-white);
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-s);
    padding: 10px 12px;
    width: 100%;
    max-width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kampidoe-app input[type="text"]:focus,
.kampidoe-app input[type="number"]:focus,
.kampidoe-app select:focus,
.kampidoe-app textarea:focus {
    outline: none;
    border-color: var(--kd-moss);
    box-shadow: 0 0 0 3px rgba(76, 122, 99, 0.2);
}

.kampidoe-app textarea {
    resize: vertical;
    min-height: 90px;
}

.kampidoe-app label.error {
    display: block;
    color: var(--kd-berry);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* ---- Knoppen ------------------------------------------------------------ */

.kampidoe-app .btn,
.kampidoe-app input[type="submit"].btn,
.kampidoe-app input[type="button"].btn {
    font-family: var(--kd-font-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: none;
    border-radius: var(--kd-radius-m);
    padding: 12px 22px;
    background: var(--kd-pine);
    color: var(--kd-white);
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.kampidoe-app .btn:hover {
    background: var(--kd-pine-dark);
}

.kampidoe-app .btn:active {
    transform: translateY(1px);
}

.kampidoe-app .btn:focus-visible {
    outline: 3px solid var(--kd-amber);
    outline-offset: 2px;
}

.kampidoe-app .btn.cancel {
    background: transparent;
    color: var(--kd-muted);
    border: 1px solid var(--kd-line);
}

.kampidoe-app .btn.cancel:hover {
    background: var(--kd-sage);
    color: var(--kd-pine-dark);
}

.kampidoe-app .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--kd-space-2);
    margin-top: var(--kd-space-4);
    padding-top: var(--kd-space-3);
    border-top: 1px solid var(--kd-line);
}

@media (max-width: 560px) {
    .kampidoe-app .controls {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .kampidoe-app .controls .btn {
        width: 100%;
    }
}

/* ---- Kleine schermen: minder padding rond de hele app ------------------ */

@media (max-width: 560px) {
    .kampidoe-app {
        padding: var(--kd-space-3) var(--kd-space-2);
        border-radius: var(--kd-radius-m);
    }
}