/* ------------------------------------------------------------------
 * Quick-Space Domain Check – schmales, modernes Layout
 * 2026-07-10
 * ------------------------------------------------------------------ */

:root {
    --dc-accent: #198754;
    --dc-accent-dark: #146c43;
    --dc-bg: #f4f6f8;
    --dc-card: #ffffff;
    --dc-border: #e3e7eb;
    --dc-text: #1f2a33;
    --dc-muted: #6c757d;
}

body {
    background: var(--dc-bg);
    color: var(--dc-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    margin: 0;
}

/* Zentrierung – schmales Design bleibt erhalten */
.dc-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 14px 48px;
}

.dc-card {
    width: 100%;
    max-width: 480px;               /* das "schmale" Design */
    background: var(--dc-card);
    border: 1px solid var(--dc-border);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(31, 42, 51, 0.06);
    padding: 26px 24px 20px;
}

/* Kopf */
.dc-head { text-align: center; margin-bottom: 20px; }
.dc-head h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--dc-text);
}
.dc-head h1 .fas { color: var(--dc-accent); }
.dc-sub { color: var(--dc-muted); font-size: .95rem; margin: 0; }

/* Formular */
.dc-form { display: flex; flex-direction: column; }
.dc-label {
    font-weight: 600;
    font-size: .9rem;
    margin: 12px 0 6px;
    display: block;
}
.dc-input {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--dc-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.dc-input:focus-within {
    border-color: var(--dc-accent);
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15);
}
.dc-prefix {
    background: #f1f3f5;
    color: var(--dc-muted);
    padding: 11px 12px;
    font-size: .95rem;
    border-right: 1px solid var(--dc-border);
    user-select: none;
}
.dc-input input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 11px 12px;
    font-size: 1rem;
    background: transparent;
}
.dc-hint { font-size: .8rem; color: var(--dc-muted); margin: 6px 0 4px; }
.dc-hint code {
    background: #f1f3f5; padding: 1px 5px; border-radius: 4px; color: var(--dc-text);
}

/* Endungen als kompakte Chips */
.dc-tlds {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}
.dc-tld {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--dc-border);
    border-radius: 10px;
    padding: 9px 11px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    margin: 0;
}
.dc-tld:hover { border-color: var(--dc-accent); }
.dc-tld:has(input:checked) {
    border-color: var(--dc-accent);
    background: rgba(25, 135, 84, 0.06);
}
.dc-tld input { margin: 0; flex: none; }
.dc-tld-name { font-weight: 600; }
.dc-tld-price { margin-left: auto; font-size: .78rem; color: var(--dc-muted); }

.dc-submit {
    padding: 11px;
    font-weight: 600;
    border-radius: 10px;
    font-size: 1rem;
}

/* Ergebnisse */
.dc-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}
.dc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--dc-border);
    border-radius: 10px;
    background: #fbfcfd;
}
.dc-domain {
    font-weight: 600;
    word-break: break-all;
    color: var(--dc-text);
    text-decoration: none;
}
a.dc-domain:hover { text-decoration: underline; }
.dc-badge { flex: none; margin-left: auto; }
.dc-order { flex: none; }
.dc-order:empty { display: none; }

.dc-error {
    background: #fdecea;
    border: 1px solid #f5c2c7;
    color: #842029;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .92rem;
    margin-bottom: 18px;
}

/* Fuß */
.dc-foot {
    text-align: center;
    font-size: .8rem;
    color: var(--dc-muted);
    border-top: 1px solid var(--dc-border);
    padding-top: 14px;
    margin-top: 6px;
}
.dc-foot a { color: var(--dc-accent); text-decoration: none; }
.dc-foot a:hover { text-decoration: underline; }
.dc-foot-sep { color: var(--dc-border); margin: 0 6px; }

/* Changelog-Legende im Modal */
.dc-legend { flex-wrap: wrap; gap: 6px; align-items: center; }
.dc-legend-title { font-size: .82rem; color: var(--dc-muted); margin-right: 2px; }
#changelog .modal-body iframe { border: 0; width: 100%; height: 100%; }

@media (max-width: 380px) {
    .dc-tlds { grid-template-columns: 1fr; }
    .dc-card { padding: 20px 16px 16px; }
}