/* ── DKT Public Styles v4 ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── RESET & BASE ─────────────────────────────────────────── */
.dkt-tool,
.dkt-tool * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.dkt-tool {
    --c-primary:   #0d6e6e;
    --c-primary-d: #0a5757;
    --c-primary-l: #e6f4f4;
    --c-bg:        #f7f8fa;
    --c-card:      #ffffff;
    --c-border:    #d1d5db;
    --c-text:      #111827;
    --c-muted:     #6b7280;
    --c-up:        #dc2626;
    --c-down:      #16a34a;
    --c-radius:    14px;
    --c-shadow:    0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);

    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 18px;          /* ← increased base */
    line-height: 1.55;
    color: var(--c-text);
    max-width: 900px;
    margin: 0 auto;
}

/* ── SEARCH PANEL ─────────────────────────────────────────── */
.dkt-search-panel {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: 36px;
    box-shadow: var(--c-shadow);
    margin-bottom: 24px;
}

.dkt-search-panel h2.dkt-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--c-text);
    margin-bottom: 6px;
    line-height: 1.2;
}
.dkt-search-panel p.dkt-subtitle {
    font-size: 1rem;
    color: var(--c-muted);
    margin-bottom: 32px;
}

/* ── FIELD GRID ───────────────────────────────────────────── */
.dkt-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 28px;
}
@media (max-width: 620px) { .dkt-search-grid { grid-template-columns: 1fr; } }

/* ── FIELD WRAPPER ────────────────────────────────────────── */
.dkt-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}
.dkt-field-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--c-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

/* ── SHARED CONTROL STYLE ─────────────────────────────────── */
/* All interactive controls share these exact dimensions */
.dkt-control {
    width: 100%;
    height: 56px;             /* ← fixed, same for all */
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    background: #fafafa;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-text);
    transition: border-color .15s, box-shadow .15s, background .15s;
    display: flex;
    align-items: center;
}
.dkt-control:focus-within,
.dkt-control.open {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(13,110,110,.14);
    background: #fff;
    outline: none;
}

/* Native <select> wrapped in .dkt-control */
.dkt-select-wrap {
    position: relative;
}
.dkt-select-wrap select {
    width: 100%;
    height: 56px;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    background: #fafafa;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-text);
    padding: 0 48px 0 16px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    line-height: 1;
}
.dkt-select-wrap select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(13,110,110,.14);
    background: #fff;
    outline: none;
}
/* Custom chevron overlay */
.dkt-select-wrap::after {
    content: '';
    pointer-events: none;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--c-muted);
}

/* ── CUSTOM DROPDOWN (behandeling) ────────────────────────── */
.dkt-dropdown {
    position: relative;
}
.dkt-dropdown-trigger {
    width: 100%;
    height: 56px;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    background: #fafafa;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-text);
    padding: 0 48px 0 16px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0;
    transition: border-color .15s, box-shadow .15s, background .15s;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dkt-dropdown-trigger::after {
    content: '';
    pointer-events: none;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--c-muted);
    transition: transform .2s;
}
.dkt-dropdown.open .dkt-dropdown-trigger {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(13,110,110,.14);
    background: #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.dkt-dropdown.open .dkt-dropdown-trigger::after {
    transform: translateY(-50%) rotate(180deg);
}
.dkt-dropdown-trigger span.placeholder { color: var(--c-muted); font-weight: 400; }

/* search input inside dropdown */
.dkt-dropdown-panel {
    position: absolute;
    top: calc(100% - 1px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid var(--c-primary);
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    z-index: 99999;
    max-height: 300px;
    overflow: hidden;
    flex-direction: column;
    display: none;           /* single declaration – JS toggles via .open */
}
.dkt-dropdown.open .dkt-dropdown-panel {
    display: flex;
}

.dkt-dropdown-search {
    border: none;
    border-bottom: 1px solid var(--c-border);
    padding: 12px 16px;
    font-size: .95rem;
    font-family: inherit;
    color: var(--c-text);
    background: #f9fafb;
    width: 100%;
    outline: none;
    flex-shrink: 0;
}
.dkt-dropdown-search::placeholder { color: var(--c-muted); }

.dkt-dropdown-list {
    list-style: none;
    overflow-y: auto;
    flex: 1;
}
.dkt-dropdown-item {
    padding: 13px 16px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-text);
    border-bottom: 1px solid #f3f4f6;
    transition: background .1s;
}
.dkt-dropdown-item:last-child { border-bottom: none; }
.dkt-dropdown-item:hover,
.dkt-dropdown-item.highlighted { background: var(--c-primary-l); color: var(--c-primary); }
.dkt-dropdown-item.selected { background: var(--c-primary-l); color: var(--c-primary); font-weight: 700; }
.dkt-dropdown-item.clear-item { color: var(--c-muted); font-weight: 400; font-style: italic; }
.dkt-dropdown-empty { padding: 16px; color: var(--c-muted); font-size:.95rem; text-align:center; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.dkt-search-actions { display: flex; align-items: center; gap: 14px; }

.dkt-btn-primary {
    height: 54px;
    padding: 0 32px;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(13,110,110,.28);
    transition: background .15s, transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.dkt-btn-primary:hover {
    background: var(--c-primary-d);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(13,110,110,.34);
}
.dkt-btn-secondary {
    height: 54px;
    padding: 0 24px;
    background: none;
    color: var(--c-muted);
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.dkt-btn-secondary:hover { background: var(--c-bg); color: var(--c-text); border-color: #9ca3af; }

/* ── RESULTS ──────────────────────────────────────────────── */
.dkt-results { animation: dktUp .28s ease; }
@keyframes dktUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* HERO */
.dkt-hero-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: 40px 36px;
    text-align: center;
    box-shadow: var(--c-shadow);
    margin-bottom: 16px;
}
.dkt-hero-label { font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--c-muted); display:block; margin-bottom:12px; }
.dkt-hero-price { font-size:4.2rem; font-weight:800; letter-spacing:-.04em; line-height:1; margin-bottom:10px; }
.dkt-hero-national { font-size:1rem; color:var(--c-muted); margin-bottom:18px; }
.dkt-badge-row { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.dkt-badge {
    display:inline-block; padding:5px 18px; border-radius:20px;
    font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.dkt-badge.laag     { background:#dcfce7; color:#15803d; }
.dkt-badge.gemiddeld{ background:#fef9c3; color:#854d0e; }
.dkt-badge.hoog     { background:#fee2e2; color:#991b1b; }
.dkt-hero-stat { font-size:.97rem; margin-bottom:5px; color:var(--c-muted); }
.dkt-hero-stat.pos { color:var(--c-down); font-weight:600; }
.dkt-hero-stat.neg { color:var(--c-up);   font-weight:600; }
.dkt-hero-yoy { font-size:.97rem; font-weight:600; }
.dkt-hero-yoy.up   { color:var(--c-up); }
.dkt-hero-yoy.down { color:var(--c-down); }
.dkt-hero-yoy.same { color:var(--c-muted); }

/* GENERIC CARD */
.dkt-card {
    background:var(--c-card); border:1px solid var(--c-border);
    border-radius:var(--c-radius); padding:28px 32px;
    box-shadow:var(--c-shadow); margin-bottom:16px;
}
.dkt-card-title { font-size:1.1rem; font-weight:700; color:var(--c-text); margin-bottom:12px; display:block; }
.dkt-card p { font-size:.97rem; color:var(--c-muted); line-height:1.65; margin-bottom:6px; }
.dkt-card p:last-child { margin-bottom:0; }

/* RANGE */
.dkt-range-price { font-size:2rem; font-weight:800; letter-spacing:-.02em; margin-bottom:10px; }
.dkt-range-bar { height:10px; background:var(--c-border); border-radius:8px; overflow:hidden; margin:14px 0 10px; }
.dkt-range-bar-fill { height:100%; background:linear-gradient(90deg,#16a34a,#f0a500,#dc2626); }

/* PROVINCIES */
.dkt-prov-list { list-style:none; margin-top:14px; }
.dkt-prov-item { display:grid; grid-template-columns:145px 1fr 78px; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid #f3f4f6; }
.dkt-prov-item:last-child { border-bottom:none; }
.dkt-prov-name { font-size:.97rem; font-weight:500; }
.dkt-prov-name.active { color:var(--c-primary); font-weight:700; }
.dkt-prov-track { height:11px; background:#f3f4f6; border-radius:8px; overflow:hidden; }
.dkt-prov-bar { height:100%; border-radius:8px; min-width:6px; display:block; transition:width .6s cubic-bezier(.4,0,.2,1); }
.dkt-prov-price { text-align:right; font-size:.95rem; font-weight:600; }
.dkt-prov-legend { display:flex; justify-content:space-between; font-size:.8rem; color:var(--c-muted); margin-top:12px; padding-top:10px; border-top:1px solid var(--c-border); }

/* COMPARE TABLE */
.dkt-table { width:100%; border-collapse:collapse; margin-top:14px; }
.dkt-table th { text-align:left; padding:10px 12px; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--c-muted); border-bottom:2px solid var(--c-border); }
.dkt-table td { padding:11px 12px; border-bottom:1px solid #f3f4f6; font-size:.97rem; }
.dkt-table tr:last-child td { border-bottom:none; }
.dkt-table tr.row-active td { background:#f0fdf4; font-weight:600; }
.dkt-diff { display:inline-block; padding:3px 9px; border-radius:12px; font-size:.8rem; font-weight:700; }
.dkt-diff.up   { background:#fee2e2; color:#991b1b; }
.dkt-diff.down { background:#dcfce7; color:#15803d; }
.dkt-diff.same { background:#f3f4f6; color:#6b7280; }

/* TIME-SERIES CHART */
.dkt-timeseries {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 140px;
    padding: 0 4px;
    margin-top: 8px;
}
.dkt-ts-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 4px;
}
.dkt-ts-val {
    font-size: .72rem;
    font-weight: 600;
    color: var(--c-muted);
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}
.dkt-ts-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.dkt-ts-bar {
    width: 70%;
    background: #d1e8e8;
    border-radius: 5px 5px 0 0;
    min-height: 6px;
    transition: height .5s ease;
}
.dkt-ts-bar.latest {
    background: var(--c-primary);
}
.dkt-ts-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--c-muted);
    text-align: center;
    flex-shrink: 0;
}

/* STATES */
.dkt-loading { text-align:center; padding:52px 20px; color:var(--c-muted); font-size:1rem; }
.dkt-spinner { width:40px; height:40px; border:3px solid var(--c-border); border-top-color:var(--c-primary); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 16px; }
@keyframes spin{to{transform:rotate(360deg)}}
.dkt-empty { text-align:center; padding:60px 20px; color:var(--c-muted); }
.dkt-empty-icon { font-size:3rem; margin-bottom:14px; }
.dkt-empty p { font-size:1rem; line-height:1.7; }
.dkt-hint { }
.dkt-hint-inner {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 10px;
    padding: 16px 22px;
    font-size: 1rem;
    color: #15803d;
    display: flex;
    align-items: center;
    gap: 10px;
}