/* GerzsonTipp – jogi oldalak */
.legal-page {
    position: relative;
    padding: 58px 0 88px;
    isolation: isolate;
}

.legal-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 18%, rgba(0, 255, 135, .08), transparent 26rem),
        radial-gradient(circle at 88% 24%, rgba(255, 44, 178, .10), transparent 30rem);
}

.legal-container {
    width: min(1040px, calc(100% - 34px));
    margin: 0 auto;
}

.legal-hero,
.legal-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    background: linear-gradient(145deg, rgba(48, 14, 57, .94), rgba(25, 7, 31, .96));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
    backdrop-filter: blur(16px);
}

.legal-hero {
    margin-bottom: 22px;
    padding: 38px 40px;
    border-radius: 28px;
}

.legal-hero::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(0, 255, 135, .11);
    filter: blur(8px);
    pointer-events: none;
}

.legal-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 7px 11px;
    border: 1px solid rgba(0, 255, 135, .25);
    border-radius: 999px;
    background: rgba(0, 255, 135, .08);
    color: #00ff87;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.legal-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff87;
    box-shadow: 0 0 14px rgba(0, 255, 135, .8);
}

.legal-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(2.15rem, 6vw, 3.7rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.legal-hero h1::after {
    content: "";
    display: block;
    width: 78px;
    height: 4px;
    margin-top: 17px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff2cb2, #00ff87);
}

.legal-hero p {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 1rem;
    line-height: 1.75;
}

.legal-card {
    margin-bottom: 16px;
    padding: 28px 30px;
    border-radius: 22px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.legal-card:hover {
    border-color: rgba(0, 255, 135, .17);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
}

.legal-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: #fff;
    font-size: 1.28rem;
    line-height: 1.3;
}

.legal-card h2::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 25px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff2cb2, #00ff87);
    box-shadow: 0 0 16px rgba(255, 44, 178, .22);
}

.legal-card h3 {
    margin: 23px 0 9px;
    color: #f5dcf7;
    font-size: 1rem;
}

.legal-card p,
.legal-card li {
    color: rgba(255, 255, 255, .70);
    line-height: 1.78;
}

.legal-card p { margin: 0 0 13px; }
.legal-card p:last-child { margin-bottom: 0; }

.legal-card strong { color: rgba(255, 255, 255, .94); }

.legal-card ul,
.legal-card ol {
    margin: 12px 0 4px;
    padding-left: 23px;
}

.legal-card li { margin: 7px 0; padding-left: 3px; }
.legal-card li::marker { color: #00ff87; }

.legal-card a {
    color: #00ff87;
    font-weight: 800;
    text-decoration-color: rgba(0, 255, 135, .35);
    text-underline-offset: 3px;
}
.legal-card a:hover { color: #fff; }

.legal-notice,
.legal-warning {
    position: relative;
    padding: 18px 20px 18px 22px;
    border-radius: 15px;
    line-height: 1.68;
}

.legal-notice {
    border: 1px solid rgba(0, 255, 135, .20);
    border-left: 4px solid #00ff87;
    background: rgba(0, 255, 135, .075);
    color: rgba(225, 255, 241, .86);
}

.legal-warning {
    border: 1px solid rgba(255, 190, 56, .20);
    border-left: 4px solid #ffbe38;
    background: rgba(255, 190, 56, .075);
    color: rgba(255, 240, 204, .88);
}

.legal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 21px;
}

.legal-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 11px 19px;
    border: 1px solid rgba(0, 255, 135, .25);
    border-radius: 13px;
    background: linear-gradient(135deg, #00d976, #00ff87);
    box-shadow: 0 10px 28px rgba(0, 255, 135, .13);
    color: #17051d !important;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease;
}
.legal-button:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 255, 135, .20); }

.legal-button-secondary {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    box-shadow: none;
    color: #fff !important;
}
.legal-button-danger {
    border-color: rgba(255, 85, 110, .28);
    background: linear-gradient(135deg, #c8274b, #ff4f70);
    color: #fff !important;
}

.legal-table-wrap {
    width: 100%;
    margin-top: 18px;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background: rgba(10, 3, 14, .30);
    scrollbar-color: #00ff87 rgba(255,255,255,.06);
}

.legal-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    color: rgba(255,255,255,.74);
}

.legal-table th {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(0, 255, 135, .09);
    color: #00ff87;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-align: left;
    vertical-align: top;
}

.legal-table td {
    padding: 15px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: rgba(255,255,255,.68);
    line-height: 1.6;
    vertical-align: top;
}
.legal-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); }
.legal-table tbody tr:hover td { background: rgba(255, 44, 178, .045); }
.legal-table td + td,
.legal-table th + th { border-left: 1px solid rgba(255,255,255,.06); }

@media (max-width: 650px) {
    .legal-page { padding: 32px 0 62px; }
    .legal-container { width: min(100% - 22px, 1040px); }
    .legal-hero { padding: 27px 22px; border-radius: 21px; }
    .legal-card { padding: 22px 19px; border-radius: 18px; }
    .legal-card h2 { font-size: 1.13rem; }
    .legal-actions { flex-direction: column; }
    .legal-button { width: 100%; }
}