.kr-reserveren{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.kr-stepper{display:flex;gap:.5rem;margin:1rem 0}
.kr-step{padding:.5rem .75rem;background:#f3f4f6;border-radius:.375rem;font-weight:600}
.kr-step.active{background:#111827;color:#fff}
.kr-step.unactive{background:#d1d5db;color:#6b7280;opacity:.7}
.kr-calendar{border:1px solid #e5e7eb;border-radius:.375rem;padding:.75rem}
.kr-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.kr-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-bottom:.25rem}
.kr-weekday{padding:.25rem 0;text-align:center;font-weight:600;font-size:.875rem;color:#6b7280;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.kr-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.kr-day{padding:.25rem;text-align:center;border-radius:.375rem;cursor:pointer;min-height:85px;min-width:0;box-sizing:border-box;}
.kr-day.disabled{opacity:.4;cursor:not-allowed}
.kr-day.special{background:#fef9c3;color:#854d0e}
.kr-day.full{background:#fee2e2;color:#991b1b;cursor:not-allowed;}
.kr-day.past{background:#f3f4f6;color:#9ca3af;opacity:.6}
.kr-legend{display:flex;gap:1rem;margin-top:.5rem;font-size:.9rem}
.kr-times{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.kr-time{padding:.25rem .5rem;border:1px solid #e5e7eb;border-radius:.375rem;cursor:pointer}
.kr-time.disabled{opacity:.5;cursor:not-allowed}
.kr-time.active{background:#111827;color:#fff;border-color:#111827}
.kr-people{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.kr-people button{width:2rem;height:2rem}
.kr-form{display:grid;gap:.5rem;margin-top:.75rem}

/* Button disabled styling */
button:disabled,
.button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Special event notice styling */
.kr-reserveren .notice {
    background: #fef9c3;
    border: 1px solid #fbbf24;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 15px 0;
    color: #854d0e;
}

.kr-reserveren .notice h1,
.kr-reserveren .notice h2,
.kr-reserveren .notice h3,
.kr-reserveren .notice h4,
.kr-reserveren .notice h5,
.kr-reserveren .notice h6 {
    color: #854d0e;
    margin-top: 0;
}

.kr-reserveren .notice p {
    margin-bottom: 8px;
}

.kr-reserveren .notice p:last-child {
    margin-bottom: 0;
}

.kr-reserveren .notice ul,
.kr-reserveren .notice ol {
    margin: 8px 0;
    padding-left: 20px;
}

.kr-reserveren .notice a {
    color: #92400e;
    text-decoration: underline;
}

.kr-reserveren .notice strong {
    font-weight: 600;
}

.kr-reserveren .notice em {
    font-style: italic;
}

/* Workshop Filters & Dots */
.kr-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.kr-filter-btn {
    padding: 0.25rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    background: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.kr-filter-btn.active {
    border-color: #111827;
    background: #f3f4f6;
    font-weight: 600;
}
.kr-workshop-label {
    font-size: 10px;
    padding: 2px 3px 2px 4px;
    border-radius: 4px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: left;
    font-weight: 500;
}
.kr-workshop-label.label-full {
    background: transparent;
    color: #ef4444;
}
.kr-day-number {
    font-weight: 600;
}
.kr-day-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    min-width: 0;
}
.kr-labels-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    min-width: 0;
    overflow: hidden;
}

/* Dynamic colors */
.kr-color-1 { background-color: #4f46e5; } /* Indigo */
.kr-filter-btn.kr-color-1 { border-color: #4f46e5; color: #3730a3; }
.kr-filter-btn.kr-color-1.active { background: #e0e7ff; }

.kr-color-2 { background-color: #3b82f6; } /* Blue */
.kr-filter-btn.kr-color-2 { border-color: #3b82f6; color: #1d4ed8; }
.kr-filter-btn.kr-color-2.active { background: #eff6ff; }

.kr-color-3 { background-color: #10b981; } /* Green */
.kr-filter-btn.kr-color-3 { border-color: #10b981; color: #047857; }
.kr-filter-btn.kr-color-3.active { background: #ecfdf5; }

.kr-color-4 { background-color: #f59e0b; } /* Orange */
.kr-filter-btn.kr-color-4 { border-color: #f59e0b; color: #b45309; }
.kr-filter-btn.kr-color-4.active { background: #fffbeb; }

.kr-color-5 { background-color: #8b5cf6; } /* Purple */
.kr-filter-btn.kr-color-5 { border-color: #8b5cf6; color: #6d28d9; }
.kr-filter-btn.kr-color-5.active { background: #f5f3ff; }

.kr-color-6 { background-color: #ec4899; } /* Pink */
.kr-filter-btn.kr-color-6 { border-color: #ec4899; color: #be185d; }
.kr-filter-btn.kr-color-6.active { background: #fdf2f8; }

.kr-color-7 { background-color: #14b8a6; } /* Teal */
.kr-filter-btn.kr-color-7 { border-color: #14b8a6; color: #0f766e; }
.kr-filter-btn.kr-color-7.active { background: #f0fdfa; }

.kr-color-8 { background-color: #64748b; } /* Slate */
.kr-filter-btn.kr-color-8 { border-color: #64748b; color: #334155; }
.kr-filter-btn.kr-color-8.active { background: #f8fafc; }

/* Responsive / Mobile Optimalisaties */
@media (max-width: 640px) {
    .kr-txt-desk { display: none; }
    .kr-txt-mob { display: inline; }

    .kr-labels-container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        margin-top: auto;
    }
    .kr-day {
        min-height: 50px;
    }
    .kr-workshop-label {
        background: transparent !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        gap: 2px;
        font-weight: 700;
        margin-top: 2px;
    }
    .kr-workshop-label:not(.label-full)::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        flex-shrink: 0;
        border-radius: 50%;
        background-color: currentColor;
    }
    /* Volledige opvulling voor formulier velden op mobiel */
    .kr-reserveren .kr-row {
        grid-template-columns: 1fr !important;
    }
}