/* Domain Reseller Shop – schlichtes Grundlayout. Farben über CSS-Variablen anpassbar. */
.drs {
	--drs-accent: #1d4ed8;
	--drs-accent-ink: #fff;
	--drs-ok: #15803d;
	--drs-bad: #b91c1c;
	--drs-warn: #b45309;
	--drs-line: #e5e7eb;
	--drs-soft: #f8fafc;
	--drs-muted: #6b7280;
	--drs-radius: 8px;
	font-size: 16px;
	line-height: 1.5;
}
.drs *, .drs *::before, .drs *::after { box-sizing: border-box; }
.drs-muted { color: var(--drs-muted); font-size: .9em; }
.drs-small { font-size: .85em; }
.drs-r { text-align: right; }
.drs-break { word-break: break-all; }

.drs-btn {
	display: inline-block; padding: .55em 1.1em; border: 1px solid var(--drs-line); border-radius: var(--drs-radius);
	background: #fff; color: inherit; cursor: pointer; text-decoration: none; font: inherit; line-height: 1.3;
}
.drs-btn:hover { border-color: var(--drs-accent); }
.drs-btn--primary { background: var(--drs-accent); border-color: var(--drs-accent); color: var(--drs-accent-ink); }
.drs-btn--primary:hover { filter: brightness(1.08); color: var(--drs-accent-ink); }
.drs-btn--danger { color: var(--drs-bad); border-color: var(--drs-bad); }
.drs-btn--small { padding: .35em .8em; font-size: .9em; }
.drs-btn--big { padding: .8em 1.6em; font-size: 1.05em; font-weight: 600; }
.drs-btn[disabled] { opacity: .6; cursor: default; }
.drs-link { background: none; border: 0; padding: 0; color: var(--drs-bad); cursor: pointer; font: inherit; text-decoration: underline; }

.drs-notice { padding: .8em 1em; border-radius: var(--drs-radius); margin: 0 0 1em; border-left: 4px solid var(--drs-accent); background: var(--drs-soft); }
.drs-notice--error { border-color: var(--drs-bad); background: #fef2f2; }
.drs-notice--success { border-color: var(--drs-ok); background: #f0fdf4; }
.drs-notice--warning { border-color: var(--drs-warn); background: #fffbeb; }

/* Suche */
.drs-search__form { display: flex; gap: .5em; }
.drs-search__form input { flex: 1; padding: .8em 1em; font-size: 1.1em; border: 2px solid var(--drs-line); border-radius: var(--drs-radius); }
.drs-search__form input:focus { outline: none; border-color: var(--drs-accent); }
.drs-results { list-style: none; margin: 1em 0; padding: 0; border: 1px solid var(--drs-line); border-radius: var(--drs-radius); overflow: hidden; }
.drs-result { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .8em 1em; border-top: 1px solid var(--drs-line); flex-wrap: wrap; }
.drs-result:first-child { border-top: 0; }
.drs-result__name { font-weight: 600; }
.drs-result--free .drs-result__name::before { content: "✓ "; color: var(--drs-ok); }
.drs-result--taken .drs-result__name { color: var(--drs-muted); }
.drs-result__act { display: flex; align-items: center; gap: .8em; }
.drs-price { font-weight: 600; }
.drs-price small { font-weight: 400; color: var(--drs-muted); }
.drs-cartlink { display: inline-block; margin-top: .5em; font-weight: 600; }

/* Tabellen */
.drs-table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.drs-table th, .drs-table td { padding: .6em .5em; border-bottom: 1px solid var(--drs-line); text-align: left; vertical-align: top; }
.drs-table th.drs-r, .drs-table td.drs-r { text-align: right; }
.drs-table thead th { font-size: .85em; color: var(--drs-muted); font-weight: 600; }
.drs-table tfoot th { font-size: 1em; }
.drs-filter { width: 100%; max-width: 320px; padding: .5em .8em; border: 1px solid var(--drs-line); border-radius: var(--drs-radius); }

/* Formulare */
.drs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8em 1em; margin: 0 0 1em; }
.drs-field { display: flex; flex-direction: column; gap: .25em; }
.drs-field span { font-size: .9em; font-weight: 600; }
.drs-field input, .drs-field select, .drs-dnsform input, .drs-dnsform select, .drs-checkout input[type=text] {
	padding: .55em .7em; border: 1px solid var(--drs-line); border-radius: var(--drs-radius); font: inherit; width: 100%;
}
.drs-field small { color: var(--drs-muted); font-size: .8em; }
.drs-accept { display: flex; flex-direction: column; gap: .5em; margin: 1.2em 0; }
.drs-accept label { display: flex; gap: .5em; align-items: flex-start; }
.drs-accept input { margin-top: .3em; }
.drs-inline { display: inline; margin: 0; }
.drs-dnsform { display: grid; grid-template-columns: 1.2fr .8fr 2fr .6fr .7fr auto; gap: .4em; }
@media (max-width: 700px) { .drs-dnsform { grid-template-columns: 1fr 1fr; } }

/* Kundenbereich */
.drs-tabs { display: flex; gap: .3em; flex-wrap: wrap; border-bottom: 1px solid var(--drs-line); margin: 0 0 1.2em; }
.drs-tabs a { padding: .6em 1em; text-decoration: none; color: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.drs-tabs a.is-active { border-color: var(--drs-accent); font-weight: 600; }
.drs-tabs a:last-child { margin-left: auto; color: var(--drs-muted); }
.drs-box { border: 1px solid var(--drs-line); border-radius: var(--drs-radius); padding: 1em 1.2em; margin: 0 0 1.2em; }
.drs-box h4 { margin: 0 0 .6em; }
.drs-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0; white-space: nowrap; vertical-align: middle; font-family: inherit; color: var(--drs-muted); background: var(--drs-soft); border: 0; }
.drs-badge--active { color: var(--drs-ok); background: color-mix(in srgb, var(--drs-ok) 12%, transparent); }
.drs-badge--error { color: var(--drs-bad); background: color-mix(in srgb, var(--drs-bad) 12%, transparent); }
.drs-badge--pending, .drs-badge--cancel_pending { color: var(--drs-warn); background: color-mix(in srgb, var(--drs-warn) 14%, transparent); }
.drs-account h3:has(> .drs-badge) { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.drs-code { font-size: 1.1em; padding: .2em .5em; background: var(--drs-soft); user-select: all; }

/* Zahlarten & Guthaben (0.2.0) */
.drs-paymethods { display: grid; gap: .6em; margin: 0 0 1em; }
.drs-paymethod { display: block; position: relative; padding: .8em 1em .8em 2.6em; border: 1px solid var(--drs-line); border-radius: var(--drs-radius); cursor: pointer; background: #fff; }
.drs-paymethod input { position: absolute; left: 1em; top: 1.05em; margin: 0; }
.drs-paymethod small { display: block; color: var(--drs-muted); margin-top: .2em; }
.drs-paymethod:has(input:checked) { border-color: var(--drs-accent); box-shadow: 0 0 0 1px var(--drs-accent); }
.drs-balance__label { margin: 0; color: var(--drs-muted); }
.drs-balance__amount { margin: .1em 0 .4em; font-size: 2em; font-weight: 700; font-variant-numeric: tabular-nums; }
.drs-topup { display: flex; gap: .6em; align-items: flex-end; flex-wrap: wrap; }
.drs-topup .drs-field { max-width: 180px; }
.drs-payform { display: inline-flex; gap: .4em; align-items: center; }
.drs-payform select { padding: .3em .4em; }
.drs-auth__grid { display: grid; gap: 2em; grid-template-columns: minmax(0, 1fr); }
.drs-auth__grid > * { min-width: 0; }
.drs-auth .drs-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (min-width: 900px) { .drs-auth__grid:has(.drs-auth__register) { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); } }
.drs-auth .login-username input, .drs-auth .login-password input { width: 100%; }