/*
    A.Z. Business policy documents — תקנון / privacy / shipping & returns / payment /
    disclaimer / imprint, rendered from Topic.Body.

    WHY THIS FILE EXISTS AT ALL
    The documents are DB content the marketplace owner edits, so the obvious move is to ship the
    styling inside the body. Two things rule that out: the owner's editor sanitises on save and
    would eat a <style> block the first time he opens a document, and the same CSS would then sit
    duplicated across every document x language blob with no way to fix all of them at once.
    So the bodies are pure structure + classes, and every visual decision lives here.

    THE TARGET IS THE SOURCE PDF, not a re-interpretation of it. Layout, order, colours and the
    five designed cards (cover, feature strip, contact, important-notice, closing bars) follow
    "תקנון האתר ותנאי שימוש AZ.pdf" page for page. Colours are sampled from the PDF itself:
    navy #1B406C, teal #45B6C8, page #F8FDFF.

    The cards are rebuilt in CSS rather than embedded as the source JPEGs because the JPEGs bake
    Hebrew into pixels — which would kill the Arabic and English versions outright — and weigh
    1.3MB between them. Only the logo itself ships as an image.

    RTL: logical properties ONLY. Hebrew and Arabic are the primary audience; a physical `left`
    anywhere in here is a bug. The clause numbers hang in the inline-start margin and must mirror.

    Plain CSS loaded from the view, not SCSS: the Flex base theme excludes page-level stylesheets
    from its compile, so an @import here is silently dropped. Bump ?v= in TopicDetails.cshtml when
    editing — this file is not version-stamped automatically.
*/

/* The document carries its own cover, which is the title block in the source. The theme's page
   heading would repeat that title immediately above it. Set from the view as a body class, because
   #ph-title is a SIBLING of the body content and nothing inside .az-policy can reach it. */
body.daman-policy-page #ph-title {
    display: none;
}

.az-policy {
    --azp-navy: #1b406c;
    --azp-navy-d: #143152;
    --azp-teal: #45b6c8;
    --azp-teal-d: #2e93a5;
    --azp-page: #f8fdff;
    --azp-bg: #eef7fb;
    --azp-line: #d7e6ef;
    --azp-ink: #14181c;
    --azp-muted: #5c6b78;
    --azp-shadow: 0 1px 2px rgba(27, 64, 108, .05), 0 10px 28px rgba(27, 64, 108, .08);

    color: var(--azp-ink);
    line-height: 1.9;
    /* The source is a single A4 column; ~74ch reproduces that measure without letting a legal
       paragraph run the full width of a desktop monitor. */
    max-inline-size: 74ch;
    margin-inline: auto;
}

/* The theme's .prose rules add a first-line indent this document never uses. */
.az-policy p {
    text-indent: 0;
    margin-block: 0 .75em;
}

/* The source justifies BODY COPY only — the cards stay centred.
   Listed explicitly rather than set on `.az-policy p` and then overridden per card: `.az-policy p`
   (class + type) outspecifies a single card class like `.azp-close-badge`, so the blanket version
   silently won every one of those overrides and left the cards ragged. */
.azp-lead p,
.azp-def,
.azp-c-body p,
.azp-sub-t {
    text-align: justify;
}

.az-policy > * + * {
    margin-block-start: 2.25rem;
}

/* Anchor targets must clear the sticky storefront header. --daman-header-h is published live by
   daman-sticky-header.js; the fallback covers the first paint before that script runs. */
.az-policy [id] {
    scroll-margin-block-start: calc(var(--daman-header-h, 64px) + 1rem);
}

.az-policy img {
    max-inline-size: 100%;
    block-size: auto;
}

/* ============================================================ cover (page 1) */

.azp-cover {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 2.5rem 1.5rem 2.25rem;
    background: var(--azp-page);
    border: 1px solid var(--azp-line);
    border-radius: 16px;
}

/* The two soft corner shapes from the printed cover. Decorative only, and they never intercept
   a tap. */
.azp-cover::before,
.azp-cover::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.azp-cover::before {
    inline-size: 46%;
    block-size: 130px;
    inset-block-start: -60px;
    inset-inline-end: -40px;
    background: rgba(69, 182, 200, .12);
    transform: skewY(-12deg);
}

.azp-cover::after {
    inline-size: 40%;
    block-size: 120px;
    inset-block-end: -70px;
    inset-inline-start: -40px;
    background: rgba(27, 64, 108, .06);
    transform: skewY(10deg);
}

.azp-cover-logo {
    position: relative;
    inline-size: min(340px, 72%);
    margin-inline: auto;
    display: block;
}

/* The pale curved band that separates the mark from the title on page 1. */
.azp-cover-arc {
    position: relative;
    block-size: 46px;
    margin: 1.25rem -1.5rem 1.75rem;
    background: linear-gradient(180deg, rgba(69, 182, 200, .16), rgba(69, 182, 200, 0));
    border-start-start-radius: 50% 100%;
    border-start-end-radius: 50% 100%;
}

.azp-cover-title {
    position: relative;
    font-size: clamp(1.9rem, 6vw, 3rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--azp-navy);
    margin-block: 0 1.25rem;
    letter-spacing: -.01em;
}

.azp-cover-co {
    position: relative;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--azp-navy);
    margin-block-end: .3rem;
}

.azp-cover-no,
.azp-cover-sub {
    position: relative;
    text-align: center;
    font-size: .95rem;
    color: var(--azp-muted);
    margin-block-end: 0;
}

.azp-cover-sub {
    margin-block-start: .5rem;
}

/* ============================================================ preamble box (page 1) */

/* A thin bordered box holding the three opening paragraphs, exactly as page 1 sets it. */
.azp-lead {
    padding: 1.25rem 1.4rem .8rem;
    border: 1px solid var(--azp-navy);
    background: #fff;
}

.azp-lead p:last-child {
    margin-block-end: 0;
}

/* ---------- framing note (the six section documents only) ----------
   The one sentence added on a page that carries a SUBSET of the תקנון, saying so. Deliberately a
   different class from .azp-lead even though it looks similar: .azp-lead is the source's own
   preamble and this is chrome, and the verification scripts must be able to tell them apart. */

.azp-note {
    padding: 1rem 1.2rem;
    background: var(--azp-bg);
    border-inline-start: 4px solid var(--azp-teal);
    border-radius: 8px;
}

.azp-note p {
    margin-block-end: 0;
    color: var(--azp-muted);
    font-size: .95rem;
}

/* Back to the full document, from a section page. */
.azp-more {
    text-align: center;
    margin-block-start: 2.25rem !important;
}

.azp-more a {
    display: inline-block;
    padding: .7rem 1.6rem;
    background: var(--azp-navy);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

.azp-more a:hover,
.azp-more a:focus-visible {
    background: var(--azp-navy-d);
    color: #fff;
}

/* ============================================================ feature strip (page 1) */

.azp-feats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.azp-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .2rem;
    padding: 1.1rem .6rem .9rem;
    background: #fff;
    border: 1px solid var(--azp-line);
    border-radius: 12px;
    box-shadow: var(--azp-shadow);
}

.azp-feat-icon {
    inline-size: 32px;
    block-size: 32px;
    color: var(--azp-teal-d);
    margin-block-end: .5rem;
}

/* The rule under each card's title, as printed. */
.azp-feat-t {
    font-size: .92rem;
    font-weight: 800;
    color: var(--azp-navy);
    padding-block-end: .35rem;
    border-block-end: 2px solid var(--azp-navy);
    margin-block-end: .3rem;
    align-self: stretch;
}

.azp-feat-s {
    font-size: .8rem;
    color: var(--azp-muted);
    line-height: 1.45;
}

/* ---------- version bar: navy bar over a thin teal strip (page footer) ---------- */

.azp-stamp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem 1.1rem;
    margin-block-start: 1rem !important;
    margin-block-end: 0;
    padding: .75rem 1.25rem;
    background: var(--azp-navy);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    /* The teal strip beneath the navy bar, drawn as a border so the two always stay locked. */
    border-block-end: 7px solid var(--azp-teal);
}

.azp-stamp-sep {
    opacity: .5;
}

/* ============================================================ sections */

.azp-sec {
    margin-block-start: 2.5rem !important;
}

/* The navy rule the source prints at the END of every section. */
.azp-sec + .azp-sec,
.azp-contact {
    padding-block-start: 2.25rem;
    border-block-start: 2px solid var(--azp-navy);
}

.azp-sec-h {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--azp-ink);
    line-height: 1.5;
    margin-block: 0 1.25rem;
}

.azp-sec-n {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    /* The number reads "21." left-to-right even on an RTL line. */
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------- clauses ---------- */

.azp-clauses {
    /* The number is written into the markup (see render.py), so the browser must not add a second
       one. It is spelled out rather than generated because a clause reference has to survive a
       failed stylesheet, a printout, and a copy-paste into an email. */
    list-style: none;
    padding: 0;
    margin: 0;
}

.azp-clause {
    display: flex;
    gap: .5rem;
    margin-block-end: 1.15rem;
}

/* Plain, like the print — but still a self-link, so tapping it puts the citation in the address
   bar. That is how someone quotes "12.7" to support. */
.azp-n {
    flex: 0 0 3.2em;
    text-align: start;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: inherit;
    text-decoration: none;
    direction: ltr;
    unicode-bidi: isolate;
}

.azp-n:hover,
.azp-n:focus-visible {
    color: var(--azp-teal-d);
    text-decoration: underline;
}

.azp-c-body {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.azp-c-body > p:last-child {
    margin-block-end: 0;
}

/* Highlight a clause someone was deep-linked to, so they can see where they landed in a wall of
   near-identical paragraphs. */
.azp-clause:target .azp-c-body {
    background: rgba(69, 182, 200, .12);
    box-shadow: 0 0 0 .5rem rgba(69, 182, 200, .12);
    border-radius: 3px;
}

/* ---------- Hebrew-letter sub-lists (א. ב. ג. ...) ---------- */

.azp-sub {
    list-style: none;
    margin-block: .8rem 0;
    padding-inline-start: 1.5rem;
}

.azp-sub li {
    display: flex;
    gap: .6rem;
    margin-block-end: .5rem;
}

.azp-sub-n {
    flex: 0 0 1.3em;
    font-weight: 400;
}

.azp-sub-t {
    flex: 1 1 auto;
    min-inline-size: 0;
    text-align: justify;
}

/* ---------- definitions (section 2) ---------- */

.azp-def {
    margin-block-end: .55rem;
}

/* ============================================================ contact card (page 16) */

.azp-contact {
    text-align: center;
}

.azp-ct-logo {
    inline-size: min(420px, 86%);
    display: block;
    margin: 0 auto 1.75rem;
    padding: 1.1rem 1.4rem;
    background: #fff;
    border: 1px solid var(--azp-line);
    border-radius: 16px;
    box-shadow: var(--azp-shadow);
}

.azp-ct-h {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--azp-navy);
    margin-block: 0 .3rem;
}

.azp-ct-sub {
    text-align: center;
    color: var(--azp-muted);
    font-size: .95rem;
    margin-block-end: 1.5rem;
}

.azp-ct-row {
    text-align: center;
    margin-block-end: .7rem;
    /* An email, phone number or URL inside an RTL line must not have its punctuation reordered. */
    unicode-bidi: plaintext;
}

.azp-ct-co {
    font-size: 1.05rem;
    margin-block-end: .4rem;
}

/* ============================================================ important notice (page 16) */

.azp-notice {
    padding: 1.75rem 1.6rem;
    background: #fff;
    border: 1px solid var(--azp-line);
    border-radius: 16px;
    box-shadow: var(--azp-shadow);
    text-align: center;
}

.azp-notice-t {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--azp-navy);
    margin-block: 0 .75rem;
}

.azp-notice p {
    text-align: center;
    margin-block-end: 0;
}

/* ============================================================ closing bars (page 16) */

.azp-close {
    text-align: center;
}

.azp-close-badge {
    text-align: center;
    margin: 0 0 1.5rem;
    padding: .85rem 1rem;
    background: var(--azp-bg);
    border: 1px solid var(--azp-line);
    border-radius: 999px;
    color: var(--azp-teal-d);
    font-weight: 800;
    font-size: 1.05rem;
}

.azp-close-co {
    text-align: center;
    margin: 0;
    padding: .85rem 1rem;
    background: var(--azp-navy);
    color: #fff;
    font-weight: 700;
}

.azp-close-meta {
    text-align: center;
    margin: 0;
    padding: .55rem 1rem;
    background: var(--azp-teal);
    color: #fff;
    font-size: .85rem;
}

/* ============================================================ unfilled blanks */

/*
    The source document ships five [להשלים ...] blanks — address, service email, phone, contact-form
    link, opening hours — and highlights them in yellow on page 16. Reproduced, and deliberately
    kept loud: a policy page that goes live still saying "[to be completed]" is the kind of thing
    nobody notices for six months. This makes it impossible to miss on the page, and greppable in
    the DB.
*/
.azp-todo {
    background: #ffff00;
    color: #000;
    padding: 0 .15em;
    unicode-bidi: plaintext;
}

/* ============================================================ mobile */

@media (max-width: 767.98px) {

    .az-policy {
        line-height: 1.8;
    }

    .az-policy > * + * {
        margin-block-start: 1.75rem;
    }

    .azp-cover {
        padding: 1.75rem 1rem 1.5rem;
    }

    .azp-cover-logo {
        inline-size: min(240px, 78%);
    }

    .azp-cover-arc {
        margin-inline: -1rem;
        block-size: 32px;
    }

    /* 2x2 rather than four squeezed columns. */
    .azp-feats {
        grid-template-columns: repeat(2, 1fr);
    }

    .azp-sec {
        margin-block-start: 2rem !important;
    }

    .azp-sec + .azp-sec,
    .azp-contact {
        padding-block-start: 1.75rem;
    }

    .azp-clause {
        gap: .4rem;
    }

    .azp-n {
        flex-basis: 2.9em;
    }

    .azp-sub {
        padding-inline-start: .5rem;
    }

    /* Justified Hebrew in a ~340px column opens rivers of whitespace between words; the ragged
       edge is the more readable of the two on a phone. */
    .azp-lead p,
    .azp-def,
    .azp-c-body p,
    .azp-sub-t {
        text-align: start;
    }
}

/* ============================================================ print */

/*
    These get printed and attached to disputes. Keep the numbering and the structure; drop what
    only makes sense on screen.
*/
@media print {

    .az-policy {
        max-inline-size: none;
        font-size: 10.5pt;
        line-height: 1.6;
        color: #000;
    }

    .azp-cover,
    .azp-notice,
    .azp-feat,
    .azp-ct-logo {
        box-shadow: none;
    }

    .azp-cover {
        break-after: page;
    }

    /* A clause split across a page break is unquotable. */
    .azp-clause,
    .azp-notice,
    .azp-feat {
        break-inside: avoid;
    }

    .azp-sec-h {
        break-after: avoid;
    }

    /* Keep the reversed bars readable when the browser drops background graphics. */
    .azp-stamp,
    .azp-close-co,
    .azp-close-meta,
    .azp-close-badge {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000;
    }

    /* An unfilled blank must survive to paper, where someone is most likely to catch it. */
    .azp-todo {
        background: #fff !important;
        color: #000 !important;
        border: 1px dashed #000;
    }
}

/* ============================================================ cancellation form (נספח ג') */

.azp-form {
    margin-block-start: 1.75rem;
}

.azp-f {
    margin-block-end: 1.1rem;
}

.azp-f > label,
.azp-f-q {
    display: block;
    font-weight: 700;
    color: var(--azp-navy);
    margin-block-end: .35rem;
}

.azp-f .form-control {
    inline-size: 100%;
    padding: .6rem .8rem;
    border: 1px solid var(--azp-line);
    border-radius: 8px;
    background: #fff;
}

.azp-f .form-control:focus {
    border-color: var(--azp-teal);
    outline: 2px solid rgba(69, 182, 200, .25);
    outline-offset: 0;
}

/* The כן / לא pairs. Laid out inline so the question and its answers read as one line, and wrapped
   so a long question on a phone does not squeeze the radios off the edge. */
.azp-f-yn {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem 1rem;
}

.azp-f-yn .azp-f-q {
    margin-block-end: 0;
    flex: 1 1 auto;
}

.azp-yn {
    display: flex;
    gap: 1.25rem;
}

.azp-yn label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 400;
    /* 44px worth of tap target on a phone — this form is filled by someone already annoyed. */
    padding-block: .4rem;
    cursor: pointer;
}