/* ==========================================================================
   infostock.bg - static information pages (v2)
   Loaded on screens/info/: contacts.jsp, copyright.jsp, info_source.jsp,
   reginfo.jsp, terms_of_use.jsp.
   Scoped under body.v2 so it cannot leak into legacy pages.
   ========================================================================== */

/* ---------- info card container ---------- */
body.v2 .info_card {
    background: #fff;
    border: 1px solid #dfe7f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(30, 66, 128, .06);
    padding: 32px 36px;
    margin-bottom: 24px;
}
/* reading measure: these pages run full width (no sidebar), which is up to
   1400px; 17px text across the whole card ran to ~125 characters a line even
   at the old 1120px. The heading and the text keep a ~78-character column
   centred in the card. */
body.v2 .info_card > .heading,
body.v2 .info_card > .info_content {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

body.v2 .info_card > .heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

body.v2 .info_card > .heading h1 {
    color: #1e4280;
    font-family: var(--font-text);
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    /* The heading used to be nowrap so the .rule below could sit on the same
       line and fill the rest of the row.  That only held while every info page
       had a short title; the terms-of-use heading is 565px wide and pushed the
       whole document to 618px at a 375px viewport.  The rule is flex: 1 1 auto
       and keeps working next to a wrapped heading, so let the heading wrap and
       cap it instead: min-width: 0 lets the flex item shrink below its
       content width, which the default min-width: auto would forbid. */
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
}

body.v2 .info_card > .heading .rule {
    flex: 1 1 auto;
    height: 2px;
    min-width: 12px;
    background: #1e4280;
    opacity: .85;
}

/* ---------- info content typography (CMS / properties text) ---------- */
body.v2 .info_content {
    font-size: 17px;
    line-height: 1.65;
    color: #1f2733;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

body.v2 .info_content p {
    font-size: 17px;
    line-height: 1.65;
    color: #1f2733;
    margin: 16px 0;
}

body.v2 .info_content p:first-child {
    margin-top: 0;
}

body.v2 .info_content p:last-child {
    margin-bottom: 0;
}

body.v2 .info_content strong,
body.v2 .info_content b {
    color: #1a2740;
    font-weight: 700;
}

body.v2 .info_content a {
    color: #1e4280;
    text-decoration: underline;
}

body.v2 .info_content a:hover {
    color: #153366;
}

body.v2 .info_content ul,
body.v2 .info_content ol {
    margin: 14px 0 20px 24px;
    padding-left: 8px;
}

body.v2 .info_content li {
    margin-bottom: 8px;
    line-height: 1.6;
}

body.v2 .info_content table {
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
}

body.v2 .info_content td,
body.v2 .info_content th {
    padding: 8px 10px;
    font-size: 15px;
    border-bottom: 1px solid #eef2f7;
}

/* ---------- long legal documents (terms of use, privacy policy) ---------- */
/* A 52-clause document is referred to, not read start to finish, so the
   section headings have to be findable while scrolling fast. */
body.v2 .legal_doc h2 {
    margin: 34px 0 14px;
    padding-top: 22px;
    border-top: 1px solid #e7edf4;
    font-family: var(--font-text);
    font-size: 20px;
    line-height: 1.35;
    color: #1e4280;
}
body.v2 .legal_doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* the clause number stays out of the running text */
body.v2 .legal_doc > p > b:first-child { color: #1e4280; }

body.v2 .legal_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0 0 26px;
    padding: 12px 14px;
    background: #f4f7fb;
    border: 1px solid #e2eaf3;
    border-radius: 8px;
    font-size: 15px;
    color: #5b6675;
}
body.v2 .legal_meta b { color: #1f2733; }

/* the two clauses that carry the real warning read as warnings */
body.v2 .info_content p.legal_warning {
    padding: 14px 16px;
    background: #fdf6ec;
    border: 1px solid #f0dcc0;
    border-left: 4px solid #d08a2c;
    border-radius: 6px;
}

/* a) b) c) sub-clauses: the letter is part of the text, so no marker */
body.v2 .info_content ul.legal_sub {
    list-style: none;
    margin-left: 0;
    padding-left: 18px;
    border-left: 2px solid #eef2f7;
}

/* label / value rows (company details, contacts) */
body.v2 .info_content ul.legal_data {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
body.v2 .info_content ul.legal_data > li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
}
body.v2 .info_content ul.legal_data > li > span {
    flex: 0 0 240px;
    color: #5b6675;
}

body.v2 .info_content p.legal_adopted {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e7edf4;
    color: #5b6675;
}

body.v2 .legal_doc h3 {
    margin: 24px 0 10px;
    font-family: var(--font-text);
    font-size: 17px;
    color: #1a2740;
}

/* The GDPR grounds table in privacy_policy_bg.jsp is wrapped in a
   .table_wrap, but the info pages load only base.css and this file - the rule
   that makes that class scroll lives in markets.css, which they never load, so
   the wrapper was an inert div and the table's min-width below widened the
   whole document to 649px on a phone.  Declared here rather than in base.css:
   markets.css and the other section sheets already define the same selector
   and are loaded after base.css on their pages, so a base.css copy would be
   the one that loses the cascade and would silently do nothing there.  These
   declarations are identical to the markets.css ones, so pages that load both
   are unaffected. */
body.v2 .table_wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cdd6e2 transparent;
}
body.v2 .table_wrap::-webkit-scrollbar { height: 8px; }
body.v2 .table_wrap::-webkit-scrollbar-track { background: transparent; }
body.v2 .table_wrap::-webkit-scrollbar-thumb {
    background: #cdd6e2;
    border-radius: 4px;
}

/* The GDPR grounds table is three columns of prose, not figures: it wraps,
   it reads left, and below 720px it scrolls inside its own box rather than
   pushing the page sideways. */
body.v2 .info_content table.legal_table {
    min-width: 620px;
    border: 1px solid #e7edf4;
    border-radius: 8px;
    border-collapse: collapse;
    overflow: hidden;
}
body.v2 .info_content table.legal_table th {
    padding: 10px 12px;
    background: #f4f7fb;
    font-size: 14px;
    font-weight: 700;
    color: #1e4280;
    text-align: left;
    vertical-align: bottom;
}
body.v2 .info_content table.legal_table td {
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #eef2f7;
}
body.v2 .info_content table.legal_table td.first { width: 38%; color: #1f2733; }

@media (max-width: 640px) {
    body.v2 .legal_doc h2 { font-size: 18px; }
    body.v2 .legal_doc h3 { font-size: 16px; }
    body.v2 .info_content ul.legal_data > li > span { flex: 1 1 100%; }
}

/* ---------- responsive breakpoints ---------- */
@media (max-width: 860px) {
    body.v2 .info_card {
        padding: 24px 22px;
    }
}

@media (max-width: 640px) {
    body.v2 .info_card {
        padding: 20px 16px;
        border-radius: 6px;
    }
    body.v2 .info_card > .heading h1 {
        font-size: 20px;
    }
    body.v2 .info_content,
    body.v2 .info_content p {
        font-size: 16px;
        line-height: 1.6;
    }
}