.dscal-wrap {
    --dscal-bg: var(--surface, #fff);
    --dscal-bg-elev: var(--surface-2, #f6f7fa);
    --dscal-border: var(--border, rgba(0,0,0,.08));
    --dscal-border-strong: var(--border-strong, rgba(0,0,0,.18));
    --dscal-text: var(--text, #1d1f2a);
    --dscal-text-muted: var(--text-muted, #65697a);
    --dscal-text-soft: var(--text-soft, #9aa0b0);
    --dscal-brand: var(--brand, #ff2e6c);
    --dscal-brand-strong: var(--brand-strong, #e6195f);
    --dscal-success: #27c08a;
    --dscal-warn: #ff8b3d;
    --dscal-danger: #e64646;

    max-width: 640px;
    width: 100%;
    margin: 16px auto 24px;
    padding: 60px 16px 22px;
    border-radius: 22px;
    background:
        radial-gradient(140% 90% at 0% 0%, rgba(255,46,108,.06), transparent 55%),
        radial-gradient(140% 90% at 100% 100%, rgba(30,144,255,.05), transparent 55%),
        var(--dscal-bg);
    border: 1px solid var(--dscal-border);
    box-shadow: 0 10px 40px rgba(15,17,30,.08);
    color: var(--dscal-text);
    text-align: left;
    box-sizing: border-box;
}
[data-theme="dark"] .dscal-wrap {
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
}

.dscal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dscal-header__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: capitalize;
    color: var(--dscal-text);
}
.dscal-nav {
    background: var(--dscal-bg-elev);
    border: 1px solid var(--dscal-border);
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--dscal-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    font-size: 13px;
}
.dscal-nav:hover {
    color: var(--dscal-brand);
    border-color: var(--dscal-brand);
    transform: translateY(-1px);
}
.dscal-nav:active { transform: translateY(0); }

.dscal-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
    font-size: 11px;
    color: var(--dscal-text-muted);
}
.dscal-legend > span { display: inline-flex; align-items: center; gap: 5px; }

.dscal-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dscal-text-soft);
}
.dscal-dot--free   { background: var(--dscal-success); box-shadow: 0 0 0 3px rgba(39,192,138,.18); }
.dscal-dot--closed { background: var(--dscal-text-soft); }
.dscal-dot--today  { background: var(--dscal-brand); box-shadow: 0 0 0 3px rgba(255,46,108,.18); }

.dscal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}
.dscal-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dscal-text-soft);
    padding: 6px 0 4px;
}
.dscal-cell {
    appearance: none;
    border: 1px solid var(--dscal-border);
    background: var(--dscal-bg-elev);
    border-radius: 12px;
    padding: 8px 4px 6px;
    min-height: 64px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: var(--dscal-text);
    font-family: inherit;
    transition: all .15s ease;
    position: relative;
}
.dscal-cell--blank {
    background: transparent;
    border: none;
    cursor: default;
    box-shadow: none;
}
.dscal-cell:hover:not(:disabled):not(.dscal-cell--blank) {
    border-color: var(--dscal-brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255,46,108,.14);
}
.dscal-cell__num {
    font-size: 16px;
    font-weight: 700;
    color: var(--dscal-text);
}
.dscal-cell__meta {
    font-size: 10px;
    color: var(--dscal-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.dscal-cell__meta em {
    font-style: normal;
    color: var(--dscal-text-soft);
}

.dscal-cell.is-today {
    border-color: var(--dscal-brand);
    background:
        linear-gradient(180deg, rgba(255,46,108,.08), transparent 70%),
        var(--dscal-bg-elev);
}
.dscal-cell.is-today .dscal-cell__num {
    color: var(--dscal-brand);
}
.dscal-cell.is-selected {
    background: linear-gradient(135deg, var(--dscal-brand), var(--dscal-brand-strong));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px rgba(255,46,108,.32);
    transform: translateY(-2px);
}
.dscal-cell.is-selected .dscal-cell__num,
.dscal-cell.is-selected .dscal-cell__meta,
.dscal-cell.is-selected .dscal-cell__meta em {
    color: #fff;
}
.dscal-cell.is-selected .dscal-dot--free {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.3);
}
.dscal-cell.is-disabled,
.dscal-cell:disabled {
    color: var(--dscal-text-soft);
    background: transparent;
    border-style: dashed;
    border-color: var(--dscal-border);
    cursor: not-allowed;
    opacity: 0.55;
}
.dscal-cell.is-closed {
    background:
        repeating-linear-gradient(45deg,
            transparent 0 6px,
            rgba(127,127,127,.06) 6px 12px),
        var(--dscal-bg-elev);
}
.dscal-cell.is-closed .dscal-cell__num { color: var(--dscal-text-muted); }


.dscal-slots-section {
    border-top: 1px dashed var(--dscal-border);
    padding-top: 14px;
    margin-top: 4px;
}
.dscal-slots__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dscal-text);
    margin-bottom: 10px;
    min-height: 18px;
}
.dscal-slots {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dscal-slots__empty {
    color: var(--dscal-text-soft);
    font-size: 13px;
    font-style: italic;
}


.dscal-bucket {
    background: var(--dscal-bg-elev);
    border: 1px solid var(--dscal-border);
    border-radius: 14px;
    padding: 12px 14px 14px;
}
.dscal-bucket__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--dscal-border);
}
.dscal-bucket__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--dscal-text);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.dscal-bucket__range {
    font-size: 11px;
    color: var(--dscal-text-soft);
    font-variant-numeric: tabular-nums;
}
.dscal-bucket__slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}

.dscal-bucket--ochtend { border-left: 3px solid #f6c071; }
.dscal-bucket--middag  { border-left: 3px solid #ffb347; }
.dscal-bucket--avond   { border-left: 3px solid #7a6cff; }
.dscal-bucket--nacht   { border-left: 3px solid #2dd3a8; }

.dscal-slot {
    appearance: none;
    border: 1px solid var(--dscal-border-strong);
    background: var(--dscal-bg);
    color: var(--dscal-text);
    border-radius: 10px;
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-align: center;
}
.dscal-slot.is-night::after {
    content: '+1';
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    font-weight: 700;
    color: #2dd3a8;
    vertical-align: super;
    opacity: 0.8;
}
.dscal-slot:hover:not(:disabled) {
    border-color: var(--dscal-brand);
    background: linear-gradient(135deg, var(--dscal-brand), var(--dscal-brand-strong));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(255,46,108,.28);
}
.dscal-slot.is-booked {
    text-decoration: line-through;
    color: var(--dscal-text-soft);
    background: transparent;
    border-style: dashed;
    cursor: not-allowed;
}
.dscal-slot.is-past {
    color: var(--dscal-text-soft);
    background: transparent;
    border-color: var(--dscal-border);
    cursor: not-allowed;
    opacity: 0.55;
}


@media (max-width: 520px) {
    
    .dscal-wrap { margin-top: 100px; padding: 14px 10px 18px; border-radius: 18px; }
    .dscal-cell { min-height: 56px; padding: 6px 2px; }
    .dscal-cell__num { font-size: 14px; }
    .dscal-cell__meta { font-size: 9px; }
    .dscal-header__title { font-size: 15px; }
    .dscal-nav { width: 32px; height: 32px; }
    
    .dscal-bucket { padding: 10px 10px 12px; border-radius: 12px; }
    .dscal-bucket__title { font-size: 12px; }
    .dscal-bucket__range { font-size: 10px; }
    .dscal-bucket__slots { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
    .dscal-slot { padding: 9px 4px; font-size: 13px; border-radius: 9px; }
}


#reserveringHead.testimonial-heading {
    width: auto !important;
    max-width: 560px;
    margin: 14px auto 8px !important;
}
#keuzes.testimonial-heading-small {
    width: auto !important;
    max-width: 560px;
    margin: 12px auto 14px !important;
    padding: 14px 16px !important;
    border: 1px solid var(--border, rgba(0,0,0,.08));
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08)) !important;
    border-radius: 16px;
    background: var(--surface, rgba(255,255,255,.04));
}

#keuzes > div:first-child {
    flex: 1 1 100% !important;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #65697a);
    margin: 0 0 4px !important;
    width: 100% !important;
}
#keuzes > div:first-child br { display: none; }


.ds-keuze-chip,
#keuzes #keuzeTypeDate,
#keuzes #keuzeDuur,
#keuzes #keuzeDatum,
#keuzes #keuzeTijd {
    display: inline-flex;
    align-items: left !important;
    margin: 5px !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--brand-soft), transparent);
    border: 1px solid var(--brand) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: 0 4px 12px rgba(255,46,108,.25);
    white-space: nowrap;
    max-width: 150px;
}


#keuzeTypeDateDate {
    display: none !important;
}

.reserverenBox {
    min-width: 100% !important;
    background: none !important;
    border: 0 !important;
    box-shadow: 0 !important;
}