/* ==============================================
   Gewerbesteuer-Rechner – Stylesheet
   Typografie erbt vollständig vom Avada-Theme.
   Schriftgrößen + Farben via CSS Custom Properties
   aus den WordPress-Einstellungen.
   ============================================== */

#gst-container {
    --gst-primary:        #185FA5;
    --gst-primary-dark:   #0C447C;
    --gst-primary-light:  #EBF4FD;
    --gst-border:         #e4e4e0;
    --gst-border-light:   #f0f0ee;
    --gst-bg:             #ffffff;
    --gst-bg-muted:       #f7f7f5;
    --gst-text-muted:     #666;
    --gst-text-hint:      #aaa;
    --gst-radius:         10px;
    --gst-radius-sm:      7px;

    /* Schriftgrößen – Standardwerte, werden via PHP aus Einstellungen überschrieben */
    --gst-section-size:   13px;
    --gst-label-size:     14px;
    --gst-result-size:    18px;
    --gst-result-size-lg: 22px;

    max-width: 720px;
    margin: 0 auto;
    padding: 10px 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    box-sizing: border-box;
}

#gst-container *,
#gst-container *::before,
#gst-container *::after { box-sizing: border-box; }

/* --- Karten --- */
.gst-card {
    background: var(--gst-bg);
    border: 1px solid var(--gst-border);
    border-radius: var(--gst-radius);
    padding: 1.4rem 1.5rem;
    margin-bottom: 1rem;
}

/* --- Abschnitts-Überschriften --- */
.gst-section-title {
    display: block;
    font-size: var(--gst-section-size);
    font-family: inherit;
    font-weight: 700;
    color: var(--gst-text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 12px;
}

/* --- Feld-Labels --- */
.gst-label {
    display: block;
    font-size: var(--gst-label-size);
    font-family: inherit;
    font-weight: 500;
    color: var(--gst-text-muted);
    margin-bottom: 5px;
}

.gst-row        { margin-bottom: 1rem; }
.gst-row-last   { margin-bottom: 0; }

.gst-hint {
    font-size: .8em;
    font-family: inherit;
    color: var(--gst-text-hint);
    margin-top: 4px;
    line-height: 1.5;
}

/* --- Eingabe-Felder: sauber untereinander, Avada-sicher --- */
#gst-container .gst-grid {
    display: block !important;
}

#gst-container .gst-row {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1rem;
}

#gst-container .gst-row-last {
    margin-bottom: 0 !important;
}

#gst-container .gst-label {
    display: block !important;
    width: 100% !important;
}

#gst-container input[type="text"],
#gst-container input[type="number"] {
    display: block !important;
    width: 100% !important;
    padding: 10px 13px;
    border: 1px solid var(--gst-border);
    border-radius: var(--gst-radius-sm);
    font-size: var(--gst-label-size);
    font-family: inherit;
    color: inherit;
    background: var(--gst-bg-muted);
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
    -moz-appearance: textfield;
}

#gst-container input[type="number"]::-webkit-inner-spin-button,
#gst-container input[type="number"]::-webkit-outer-spin-button { opacity: 1; }

#gst-container input:focus {
    border-color: var(--gst-primary);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gst-primary) 15%, transparent);
}

#gst-container input::placeholder { color: #c0c0bb; }

/* --- Stadtsuche Badge --- */
.gst-search-wrap           { position: relative; }
.gst-search-wrap input     { padding-right: 95px; }

.gst-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8em;
    font-family: inherit;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
    white-space: nowrap;
    display: none;
    pointer-events: none;
}
.gst-badge.loading { display: inline-block; background: #f0f0ee; color: #888; }
.gst-badge.ok      { display: inline-block; background: #eaf3de; color: #3B6D11; }
.gst-badge.err     { display: inline-block; background: #FCEBEB; color: #A32D2D; }

/* --- Rechtsform-Karten --- */
.gst-rf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.gst-rf-card {
    border: 1px solid var(--gst-border);
    border-radius: var(--gst-radius-sm);
    padding: 12px 13px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: var(--gst-bg-muted);
    user-select: none;
}
.gst-rf-card:hover  { border-color: var(--gst-primary); background: var(--gst-primary-light); }
.gst-rf-card.active { border: 2px solid var(--gst-primary); background: var(--gst-primary-light); }

.gst-rf-title {
    font-size: var(--gst-label-size);
    font-family: inherit;
    font-weight: 600;
    color: inherit;
    margin-bottom: 2px;
}
.gst-rf-sub {
    font-size: .8em;
    font-family: inherit;
    color: var(--gst-text-hint);
    line-height: 1.4;
}

/* --- Button --- */
.gst-btn {
    width: 100%;
    padding: 13px 20px;
    margin-top: 6px;
    background: var(--gst-primary);
    color: #fff;
    border: none;
    border-radius: var(--gst-radius-sm);
    font-size: var(--gst-label-size);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
    letter-spacing: .01em;
}
.gst-btn:hover  { background: var(--gst-primary-dark); }
.gst-btn:active { transform: scale(.99); background: var(--gst-primary-dark); }

/* --- Ergebnis-Karte --- */
.gst-result      { display: none; }
.gst-result.show { display: block; animation: gstFadeIn .25s ease; }

@keyframes gstFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.gst-result-header {
    font-size: var(--gst-label-size);
    font-family: inherit;
    color: var(--gst-text-muted);
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--gst-border-light);
    line-height: 1.5;
}

/* --- Kennzahlen: direkt untereinander --- */
.gst-metrics {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1rem;
    border: 1px solid var(--gst-border);
    border-radius: var(--gst-radius-sm);
    overflow: hidden;
}

.gst-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.1rem;
    background: var(--gst-bg);
    border-bottom: 1px solid var(--gst-border-light);
}
.gst-metric:last-child  { border-bottom: none; }
.gst-metric:first-child { background: var(--gst-bg-muted); }

.gst-metric-lbl {
    font-size: var(--gst-label-size);
    font-family: inherit;
    font-weight: 500;
    color: var(--gst-text-muted);
}

.gst-metric-val {
    font-size: var(--gst-result-size);
    font-family: inherit;
    font-weight: 700;
    color: inherit;
    text-align: right;
}

.gst-metric-primary {
    color: var(--gst-primary);
    font-size: var(--gst-result-size-lg);
}

/* --- Berechnungs-Tabelle --- */
.gst-table {
    width: 100%;
    border: 1px solid var(--gst-border);
    border-radius: var(--gst-radius-sm);
    border-collapse: collapse;
    overflow: hidden;
}
.gst-table { border-radius: 0; }

.gst-table tr td {
    padding: 9px 14px;
    font-size: var(--gst-label-size);
    font-family: inherit;
    border-bottom: 1px solid var(--gst-border-light);
    vertical-align: middle;
}
.gst-table tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    background: var(--gst-bg-muted);
    color: inherit;
}

.gst-table td:first-child { color: var(--gst-text-muted); }
.gst-table td:last-child  { text-align: right; font-weight: 500; white-space: nowrap; color: inherit; }

.gst-table tr.indent td:first-child { padding-left: 26px; font-size: .9em; color: var(--gst-text-hint); }
.gst-table tr.indent td:last-child  { font-size: .9em; color: var(--gst-text-hint); font-weight: 400; }

.gst-table tr.subtotal td            { background: #fafaf8; font-weight: 600; }
.gst-table tr.subtotal td:last-child { font-weight: 600; }

.gst-disclaimer {
    font-size: .8em;
    font-family: inherit;
    color: var(--gst-text-hint);
    margin-top: .9rem;
    line-height: 1.65;
    padding-top: .75rem;
    border-top: 1px solid var(--gst-border-light);
}

/* --- Responsive --- */
@media (max-width: 560px) {
    .gst-rf-grid { grid-template-columns: 1fr; }
    .gst-card    { padding: 1.1rem 1rem; }
}