/* ---------------------------------------------------------------------------
   Styling for CMS copy rendered out of the `content_pages` database table
   (terms-conditions.php and privacy-policy.php).

   Why this file exists: the stored HTML was authored for the old Zenz site, so
   it leans on Bootstrap utilities (container / row / col-12 / d-flex / ps-0 /
   fw-medium / mb-lg-3) plus a few Zenz theme classes (termsCondition_sec /
   smallHeading / mainPoints / title / number). None of those exist in Paybozz's
   compiled Tailwind bundle, and Tailwind's Preflight additionally strips the
   browser's default paragraph and list formatting — so without this the copy
   renders as one undifferentiated wall of text.

   Everything is scoped under .cms-content so it can only ever affect the
   DB-rendered block, never the page chrome around it.
   --------------------------------------------------------------------------- */

.cms-content {
    font-family: var(--font-poppins);
    color: var(--color-black);
    font-size: 16px;
    line-height: 26px;
}

/* --- Bootstrap layout helpers ------------------------------------------------
   The page supplies its own max-width container and padding, so flatten these
   instead of letting the stored markup nest a second grid inside ours. */
.cms-content .container,
.cms-content .row,
.cms-content [class*="col-"] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.cms-content .d-flex { display: flex; }
.cms-content .ps-0 { padding-left: 0; }
.cms-content .fw-medium { font-weight: 500; }

/* --- Spacing utilities the stored markup relies on -------------------------- */
.cms-content .mt-2 { margin-top: 8px; }
.cms-content .mt-3 { margin-top: 16px; }
.cms-content .mb-2 { margin-bottom: 8px; }
.cms-content .mb-3 { margin-bottom: 16px; }
.cms-content .mb-lg-3 { margin-bottom: 16px; }
.cms-content .mb-lg-4 { margin-bottom: 24px; }

/* --- Base typography (restoring what Preflight removed) --------------------- */
.cms-content p {
    margin: 0 0 16px;
}

.cms-content p:last-child {
    margin-bottom: 0;
}

/* The CKEditor copy uses bare <span> for emphasis rather than <strong>. */
.cms-content p span,
.cms-content strong,
.cms-content b {
    font-weight: 600;
    color: var(--color-black-secondary);
}

.cms-content a {
    color: var(--color-White-Label-Primary);
    text-decoration: underline;
}

/* --- Section heading, e.g. "Introduction" ----------------------------------- */
.cms-content .smallHeading {
    font-weight: 600;
    font-size: 18px;
    line-height: 33px;
    color: var(--color-black-secondary);
}

/* --- The numbered points list ------------------------------------------------
   The digits are NOT present in the stored HTML: the markup carries an empty
   <div class="number"></div> and the number is generated by a CSS counter,
   exactly as it was on the old site. Changing this selector breaks the
   numbering, so keep the counter name and ::before together. */
.cms-content .mainPoints {
    margin: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: cmsPointCount;
}

.cms-content .mainPoints > li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 50px;
    list-style: none;
}

.cms-content .mainPoints > li:last-child {
    margin-bottom: 0;
}

.cms-content .mainPoints .number {
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgb(6 18 68 / 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    text-align: center;
    color: var(--color-black-secondary);
}

.cms-content .mainPoints .number::before {
    counter-increment: cmsPointCount;
    content: counter(cmsPointCount);
}

.cms-content .mainPoints .title {
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    text-transform: capitalize;
    color: var(--color-black-secondary);
}

/* --- Nested lists ------------------------------------------------------------ */
.cms-content ol,
.cms-content ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.cms-content ol { list-style: decimal; }
.cms-content ul { list-style: disc; }

.cms-content li {
    margin-bottom: 8px;
}

.cms-content .mainPoints ol {
    padding-left: 20px;
}

.cms-content .mainPoints ol > li {
    list-style: decimal;
    padding-left: 6px;
}

/* --- Small screens ----------------------------------------------------------- */
@media (max-width: 47.99rem) {
    .cms-content .mainPoints > li {
        padding-left: 34px;
        margin-bottom: 36px;
    }
}

/* ---------------------------------------------------------------------------
   FAQ accordion (faqs.php)

   Built on native <details>/<summary> so it needs no JavaScript and stays
   keyboard accessible. The shared name="paybozz-faqs" makes it exclusive (one
   panel open at a time); browsers without that support simply allow several
   open, which is a harmless fallback.

   The question numbers are generated by a CSS counter, and the +/- marker is
   drawn with gradients — the Paybozz asset set has no icon for it.
   --------------------------------------------------------------------------- */
.faq-accordion {
    counter-reset: faqCount;
}

.faq-item {
    border: 1px solid rgb(6 18 68 / 0.10);
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: #fff;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-question {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 60px 20px 20px;
    cursor: pointer;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: var(--color-black-secondary);
    list-style: none;
}

/* Hide the default disclosure triangle in every engine. */
.faq-question::-webkit-details-marker {
    display: none;
}

/* Numbered badge, matching the circles on the Terms and Privacy pages. */
.faq-question::before {
    counter-increment: faqCount;
    content: counter(faqCount);
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1px solid rgb(6 18 68 / 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-black-secondary);
}

/* "+" when closed — two crossed bars drawn with gradients. */
.faq-question::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background:
        linear-gradient(var(--color-black-secondary), var(--color-black-secondary)) center / 16px 2px no-repeat,
        linear-gradient(var(--color-black-secondary), var(--color-black-secondary)) center / 2px 16px no-repeat;
}

/* "−" when open: drop the vertical bar. While a panel is animating shut the
   item is still [open], so .is-collapsing flips the marker back immediately
   instead of waiting for the animation to finish. */
.faq-item[open]:not(.is-collapsing) .faq-question::after {
    background:
        linear-gradient(var(--color-black-secondary), var(--color-black-secondary)) center / 16px 2px no-repeat;
}

/* The box the height animation runs on: no padding of its own, and clipped so
   the answer slides out of view rather than spilling. */
.faq-panel {
    overflow: hidden;
}

.faq-answer {
    /* 20px padding + 28px badge + 14px gap keeps the answer aligned with the question text. */
    padding: 0 60px 24px 62px;
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-black);
}

@media (max-width: 47.99rem) {
    .faq-question {
        gap: 10px;
        padding: 16px 48px 16px 16px;
        font-size: 16px;
        line-height: 24px;
    }

    .faq-answer {
        padding: 0 20px 20px 54px;
    }
}

/* ---------------------------------------------------------------------------
   Page chrome (not CMS copy)

   The footer's 4-column layout cannot be expressed with a Tailwind class here:
   style.css is prebuilt, so grid-cols-[2fr_1fr_1fr_1fr] has no rule behind it.
   index.html carries an identical rule in its own inline <style>; this copy is
   what serves terms-conditions.php and privacy-policy.php. Keep the two in step
   if the column count ever changes.
   --------------------------------------------------------------------------- */
@media (min-width: 64rem) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}