/*
 * ════════════════════════════════════════════════════════════════════════════
 * LAG 1 — DS-TOKENS (kopi — flyttes til digital2-childtheme/css/d2-tokens.css)
 * ════════════════════════════════════════════════════════════════════════════
 */

:root {
    --d2-orange:        #fc8902;
    --d2-orange-hover:  #e57a00;
    --d2-orange-tint:   rgba(252,137,2,.12);
    --d2-ink-strong:    #1a1a1a;
    --d2-ink:           #222222;
    --d2-ink-body:      #292929;
    --d2-ink-muted:     #444444;
    --d2-ink-faint:     #666666;
    --d2-surface:       #ffffff;
    --d2-surface-alt:   #f7f7f7;
    --d2-line:          #e8e8e8;
    --d2-line-strong:   #d8d8d8;
    --d2-font-display:  'Montserrat', Arial, Helvetica, sans-serif;
    --d2-font-body:     Arial, Helvetica, sans-serif;
    --d2-radius-sm:     4px;
    --d2-radius-md:     6px;
    --d2-radius-lg:     12px;
    --d2-radius-xl:     16px;
    --d2-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
}

/*
 * ════════════════════════════════════════════════════════════════════════════
 * LAG 2 — PLUGIN-SPECIFIKT  (.d2ci-*)
 * Komponent: d2-category-index  |  Plugin: d2-product-table  |  v3.0.0
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ============================================================
   D2 Category Index — Styles v3.1
   Afhænger af: D2 Design System (CSS custom properties)
   Komponent:   [d2_category_index]
   ============================================================ */

#d2-cat-index {
    font-family: inherit;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Search ─────────────────────────────────────────────────── */
.d2ci-search-wrap { margin-bottom: 24px; }

#d2ci-search {
    width: 100%;
    padding: 14px 20px;
    font-size: var(--d2-font-md, 16px);
    border: 2px solid var(--d2-line, #e5e5e5);
    border-radius: var(--d2-radius-md, 10px);
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s;
    background: var(--d2-surface-alt, #f8f8f8);
}

#d2ci-search:focus {
    border-color: var(--d2-line-strong, #111);
    background: #fff;
}

/* ── Tabs ───────────────────────────────────────────────────── */
.d2ci-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #ececec;
    margin-bottom: 36px;
}

.d2ci-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 24px;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    font-size: var(--d2-font-md, 16px);
    font-weight: 600;
    cursor: pointer;
    color: var(--d2-ink-muted, #555);
    margin-bottom: -2px;
    transition: all .2s;
}

.d2ci-tab-icon { font-size: 16px; }
.d2ci-tab:hover  { color: var(--d2-orange, #f28c00); }
.d2ci-tab.active {
    color: var(--d2-orange, #f28c00);
    border-bottom-color: var(--d2-orange, #f28c00);
}

/* ── Groups ─────────────────────────────────────────────────── */
.d2ci-group { margin-bottom: 48px; }

.d2ci-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--d2-orange, #f28c00);
}

.d2ci-group-icon  { font-size: 24px; line-height: 1; flex-shrink: 0; }
.d2ci-group-title {
    margin: 0;
    font-size: var(--d2-font-lg, 18px);
    font-weight: 700;
    color: var(--d2-ink, #111);
}

/* ── Cards ──────────────────────────────────────────────────── */
.d2ci-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.d2ci-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--d2-surface, #fff);
    border: 1px solid var(--d2-line, #e5e5e5);
    border-radius: var(--d2-radius-md, 10px);
    text-decoration: none;
    color: inherit;
    min-width: 120px;
    transition: all .18s;
    box-shadow: var(--d2-shadow-card, none);
}

.d2ci-card:hover {
    border-color: var(--d2-orange, #f28c00);
    box-shadow: var(--d2-shadow-hover, 0 4px 12px rgba(0,0,0,0.1));
    text-decoration: none;
    transform: translateY(-1px);
}

.d2ci-card-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.d2ci-card-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--d2-radius-sm, 6px);
}

.d2ci-card-initial {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--d2-orange, #f28c00), var(--d2-orange-hover, #d97700));
    border-radius: var(--d2-radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--d2-font-base, 15px);
    font-weight: 800;
    color: #fff;
}

.d2ci-card-name {
    font-size: var(--d2-font-base, 15px);
    font-weight: 600;
    color: var(--d2-ink, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d2ci-card:hover .d2ci-card-name { color: var(--d2-orange-hover, #d97700); }
.d2ci-card.d2ci-hidden { display: none !important; }

/* ── Empty / no-results ─────────────────────────────────────── */
.d2ci-no-results,
.d2ci-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--d2-ink-faint, #999);
    font-size: var(--d2-font-md, 16px);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .d2ci-tab  { padding: 9px 14px; font-size: var(--d2-font-sm, 13px); }
    .d2ci-card { min-width: calc(50% - 5px); }
}

@media (max-width: 380px) {
    .d2ci-card { min-width: 100%; }
}

/* ── CTA-sektion ─────────────────────────────────────────────── */
.d2ci-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 72px;
    margin-bottom: 72px;
    padding: 48px;
    background: var(--d2-ink-strong, #292929);
    border-radius: var(--d2-radius-lg, 16px);
    color: #fff;
}

.d2ci-cta__heading {
    margin: 0 0 20px;
    font-size: var(--d2-font-xl, 22px);
    font-weight: 700;
    color: var(--d2-orange, #fc8902);
}

.d2ci-cta__text {
    margin: 0;
    font-size: var(--d2-font-base, 15px);
    line-height: 1.7;
    color: #ccc;
}

.d2ci-cta__col-form {
    /* Form-kolonnen — d2-forms styler selve formen */
    min-width: 0;
}

@media (max-width: 768px) {
    .d2ci-cta {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 24px;
    }
}