/* Legal pages only (privacy policy, terms of use, cookie notice). Loaded only on those pages.
   Uses logical properties so the same file works for English (LTR) and Arabic (RTL). */

.legal-prose h2 { scroll-margin-top: 6.5rem; }
.legal-prose strong { color: var(--plat-000); font-weight: 600; }
.legal-prose a { color: var(--cyan-400); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose li { margin-bottom: .25rem; }
.legal-prose .legal-date { margin-top: 2rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--plat-400); }

.legal-btn {
    min-height: 44px;
    padding: .65rem 1.3rem;
    border: 1px solid var(--cyan-500);
    border-radius: 4px;
    background: #fff;
    color: var(--cyan-500);
    font: 600 .95rem/1.2 var(--font-body);
    cursor: pointer;
}
.legal-btn:hover { background: var(--surface-2); }

.legal-prose a:focus-visible,
.legal-btn:focus-visible,
.legal-related a:focus-visible,
.table-wrap:focus-visible {
    outline: 3px solid var(--cyan-400);
    outline-offset: 2px;
}

.table-wrap {
    overflow-x: auto;
    margin: 1.4rem 0 1.9rem;
    border: 1px solid var(--line-1);
    border-radius: 6px;
    -webkit-overflow-scrolling: touch;
}
.legal-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.legal-table th,
.legal-table td {
    padding: .75rem .9rem;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--line-1);
    color: var(--plat-200);
}
.legal-table th {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--plat-000);
    background: var(--surface-2);
}
.legal-table tbody tr:last-child td { border-bottom: 0; }

mark.ph {
    background: #ffe57a;
    color: #3d2e00;
    padding: 0 .25em;
    border-radius: 3px;
    font-weight: 600;
}

.draft-note {
    margin: 0;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line-amber);
    border-radius: 6px;
    background: rgba(226, 46, 43, .06);
    color: var(--plat-200);
    font-size: var(--fs-sm);
}
.draft-note strong { color: var(--amber-300); }

.legal-related {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line-1);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}
.legal-related a { color: var(--cyan-400); }

/* Phones: each cookie row becomes a short card with its column names shown above the values,
   so nothing needs sideways scrolling. */
@media (max-width: 640px) {
    .table-wrap { border: 0; border-radius: 0; margin: 1.2rem 0 1.6rem; }
    .legal-table { min-width: 0; }
    .legal-table thead { display: none; }
    .legal-table,
    .legal-table tbody,
    .legal-table tr,
    .legal-table td { display: block; width: 100%; }
    .legal-table tr {
        padding: .9rem 1rem;
        margin-bottom: .8rem;
        border: 1px solid var(--line-1);
        border-radius: 6px;
        background: var(--surface-1);
    }
    .legal-table tbody tr:last-child td { border-bottom: 0; }
    .legal-table td { border: 0; padding: .25rem 0; }
    .legal-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .1rem;
        font-family: var(--font-mono);
        font-size: var(--fs-2xs);
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--plat-400);
    }
}