/* Szolgáltatások — letisztult, kontrasztos, reszponzív
   - Fehér panel a tartalom mögött (svc-wrap)
   - Erősebb határvonalak, jobb olvashatóság
   - „Részletek” gomb kiemelve (btn-accent)
   - Mobilon kártyásra törjük a sorokat
*/

:root {
    --divider: #dfe3ea;
    --muted: #6b7280;
    --text: #111827;
    --surface: #ffffff;
    --shadow: 0 14px 30px rgba(0, 0, 0, .06), 0 4px 10px rgba(0, 0, 0, .04);
    --accent: #1f1f1f;
    /* sötét, elegáns gomb */
    --accent-ink: #ffffff;
    --accent-hover: #000000;
}

/* Fehér tartalompanel a hátteret leválasztja */
.svc-wrap {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px 18px 8px;
}

/* Tipók és elválasztók */
.table thead th {
    border-top: 0;
    color: var(--text);
    font-weight: 600;
}

.table td,
.table th {
    border-color: var(--divider);
    color: var(--text);
}

.text-muted {
    color: var(--muted);
}

.w-150 {
    width: 150px;
}

.w-140 {
    width: 140px;
}

.text-end {
    text-align: right;
}

/* Szolgáltatás cím erősebb */
.svc-title {
    font-weight: 600;
    line-height: 1.35;
}

/* Részletek gomb – hangsúlyos, nagyobb tappable felület */
.btn-accent {
    appearance: none;
    border: none;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

.btn-accent:hover {
    background: var(--accent-hover);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.btn-accent:active {
    transform: translateY(1px);
}

/* Leírás doboz */
.desc-box {
    background: #fafbfc;
    border: 1px solid var(--divider);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--text);
}

/* Táblázat: kissé nagyobb sor-magasság képernyőn */
.svc-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Mobil – kártyás megjelenítés, erős kontraszttal */
@media (max-width: 768px) {
    .responsive-table thead {
        display: none;
    }

    .responsive-table table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
    }

    .responsive-table tr {
        border: 1px solid var(--divider);
        border-radius: 14px;
        padding: 12px 14px;
        margin-bottom: 12px;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    }

    .responsive-table td {
        border: 0;
        padding: 6px 0;
    }

    .responsive-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 2px;
    }

    .w-150,
    .w-140,
    .text-end {
        width: auto;
        text-align: left;
    }

    .btn-accent {
        padding: 10px 14px;
        font-size: 15px;
    }

    .svc-wrap {
        padding: 14px 14px 6px;
    }
}