/* Pravne stranice (12.10.2026.): /cookies, /dpa, /subprocessors (+ /ar/…).
   Isti izgled kao /terms i /privacy (njihov <style> blok), na tokenima iz design.css.
   Samo logicka svojstva (inline-start/end) — arapska verzija se zrcali sama.
   Tabele su na telefonu (<=640 px) kartice: svaki red je blok, oznaka kolone iz data-label. */

.legal-page {
    padding: 96px 0;
    background: #fff;
}
.legal-content {
    max-width: 820px;
    margin: 0 auto;
}
.legal-content h1 {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin-bottom: 12px;
}
.legal-content .last-updated {
    color: var(--gray-500);
    font-size: 14px;
    margin-bottom: 2rem;
}
.legal-content h2 {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 48px 0 16px;
    scroll-margin-top: 88px;
}
.legal-content h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--gray-700);
    letter-spacing: -0.015em;
    margin: 24px 0 10px;
}
.legal-content p {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 14px;
    font-size: 15.5px;
}
.legal-content ul,
.legal-content ol {
    color: var(--gray-600);
    margin: 12px 0 18px;
    padding-inline-start: 20px;
}
.legal-content li {
    margin-bottom: 8px;
    line-height: 1.65;
    font-size: 15px;
}
.legal-content li strong { color: var(--navy); font-weight: 600; }
.legal-content a {
    color: var(--teal-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.legal-content a:hover { color: var(--teal); }
.legal-content code {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font-size: 0.88em;
    color: var(--navy);
    font-family: 'Geist Mono', 'JetBrains Mono', monospace;
}
.legal-content strong { color: var(--navy); }

.toc {
    background: var(--cream);
    border: 1px solid var(--gray-100);
    border-radius: var(--r-lg);
    padding: 28px;
    margin-bottom: 48px;
}
.toc h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}
.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 24px;
}
.toc li { padding: 4px 0; margin: 0; }
.toc a {
    color: var(--gray-700);
    text-decoration: none;
    font-size: 14px;
    transition: color 150ms;
}
.toc a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

/* Tabele (kolacici, podobradjivaci) */
.legal-table-wrap { margin: 16px 0 20px; }
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}
.legal-table th {
    text-align: start;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    padding-block: 10px;
    padding-inline: 0 12px;
}
.legal-table td {
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    padding-block: 12px;
    padding-inline: 0 12px;
    vertical-align: top;
    /* break-word, ne anywhere: "anywhere" smanjuje najmanju sirinu kolone pa tabela lomi
       rijeci usred ("HttpOnl|y", "Marketin|g"); break-word lomi samo rijec duzu od reda. */
    overflow-wrap: break-word;
}
.legal-table td:first-child { color: var(--navy); font-weight: 600; }
/* Prva kolona su tehnicki latinicni nazivi (kolacici, pruzaoci). Na arapskom bi ih bidi
   ispreturao ("__stripe_mid" -> "stripe_mid__"), pa idu LTR, ali poravnati udesno kao ostatak. */
[dir="rtl"] .legal-table td:first-child { direction: ltr; text-align: right; }

/* Dugme „Cookie settings" (cookie-consent.js ga otvara preko klase .open-cookie-settings) */
.legal-content .open-cookie-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 20px;
    background: var(--navy);
    color: #fff;
    border: 0;
    border-radius: var(--r-sm);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.legal-content .open-cookie-settings:hover { background: var(--navy-soft); }
.legal-content .open-cookie-settings:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 1024px) {
    .legal-content .open-cookie-settings { min-height: 44px; }
    /* dodir >= 44 px na telefonu i tabletu (standard platforme) */
    .toc li { padding: 0; }
    .toc a { display: flex; align-items: center; min-height: 44px; }
}

@media (max-width: 640px) {
    .legal-page { padding: 56px 0; }
    .toc { padding: 20px; }
    .toc ul { grid-template-columns: 1fr; }

    /* tabela -> kartice */
    .legal-table thead { display: none; }
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
    .legal-table tr {
        border: 1px solid var(--gray-100);
        border-radius: var(--r-md, 10px);
        padding: 12px 14px;
        margin-bottom: 12px;
        background: #fff;
    }
    .legal-table td {
        border: 0;
        padding: 4px 0;
    }
    .legal-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--gray-500);
    }
}