/* The client contract on FOUNDER's paper — white with the faint dot grid,
   forest green and terracotta — shared by booking-form.html, client-view.html
   and business.html so it looks like one document everywhere, on screen and
   when printed (A4). */

.contract-doc {
    background-color: #fff;
    background-image: radial-gradient(#E6E3DC 1px, transparent 1.3px);
    background-size: 16px 16px;
    border: 1px solid #E8E6E1;
    border-radius: 18px;
    padding: 24px 18px 18px;
    font-family: 'Cairo', 'Inter', sans-serif;
    color: #1a1a1a;
}

.contract-doc[dir="rtl"] { font-family: 'Cairo', 'Inter', sans-serif; }

.contract-doc-header {
    text-align: center;
    margin-bottom: 16px;
}

.contract-doc-title {
    font-family: 'Cairo', 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #1a1a1a;
    text-wrap: balance;
}
.contract-doc-brush { display: block; margin: 2px auto 0; }

.contract-doc-title-rule {
    margin-top: 10px;
    color: #C9A468;
    font-size: 11px;
}

.contract-doc-intro {
    text-align: center;
    font-size: 12.5px;
    color: #6b7b6b;
    margin-bottom: 14px;
}

.contract-doc-parties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.contract-doc-party { text-align: start; background: #fff; border: 1px solid #E8E6E1; border-radius: 12px; padding: 8px 12px; min-width: 0; }
.contract-doc-party-role {
    font-size: 11px;
    color: #9A9A92;
    margin-bottom: 1px;
}
.contract-doc-party-name {
    font-family: 'Cairo', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    overflow-wrap: anywhere;
}
.contract-doc-party-line {
    font-size: 11.5px;
    color: #6b7b6b;
    line-height: 1.6;
}

.contract-doc-date-line {
    text-align: center;
    font-size: 12px;
    color: #6B7B6B;
    margin-bottom: 14px;
}

.contract-doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 13px;
}

.contract-doc-table th,
.contract-doc-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #efeee9;
    text-align: start;
}

.contract-doc-table th {
    color: #8a8578;
    font-weight: 600;
    width: 40%;
}

.contract-doc-table td {
    color: #1a1a1a;
    font-weight: 700;
}

.contract-doc-body {
    white-space: pre-wrap;
    line-height: 1.9;
    font-size: 13.5px;
    color: #2c2c2c;
}

.contract-doc-section {
    border: 1px solid #E8E6E1;
    border-radius: 14px;
    background: #fff;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.contract-doc-section:last-child { margin-bottom: 0; }

.contract-doc-section-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.contract-doc-section-title {
    font-family: 'Cairo', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}
.contract-doc-section-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #F5E6D3;
    color: #9F553E;
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contract-doc-p {
    font-size: 13.5px;
    line-height: 1.9;
    color: #2c2c2c;
    margin: 0 0 10px;
}
.contract-doc-p:last-child { margin-bottom: 0; }

/* Tailwind's preflight resets ul/ol to list-style:none — restore real markers here. */
/* Contract clauses almost always carry their own numbering/lettering typed
   right into the text (1.1 —, أ)...) — a bullet dot in front of that reads as
   a mismatched double-marker, so bullet_list renders with no marker at all
   and just enough indent for wrapped lines to line up under the text.
   numbered_list is the one that still gets a real (browser auto-) number,
   for content that doesn't carry its own. */
ul.contract-doc-list { list-style: none; padding-inline-start: 0; }
ol.contract-doc-list { list-style-type: decimal; }
/* Only items with no numbering/lettering of their own get a real dot —
   set per-<li>, since a single list can mix "1.1 —" clauses with plain
   unmarked lines. */
ul.contract-doc-list li.contract-doc-li-dot { list-style: disc; margin-inline-start: 1.3em; }
.contract-doc-list {
    font-size: 13.5px;
    line-height: 1.9;
    color: #2c2c2c;
    margin: 0 0 10px;
    padding-inline-start: 22px;
}
.contract-doc-list li { margin-bottom: 4px; }
.contract-doc-list:last-child { margin-bottom: 0; }

.contract-doc-content-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 14px;
    font-size: 12.5px;
}
.contract-doc-content-table th,
.contract-doc-content-table td {
    border: 1px solid #e8e6e1;
    padding: 7px 10px;
    text-align: start;
}
.contract-doc-content-table th {
    background: #faf8f4;
    font-weight: 700;
    color: #6b7b6b;
}

.contract-doc-divider {
    border: none;
    border-top: 1px solid #e8e6e1;
    margin: 16px 0;
}

.contract-doc-note {
    background: #FBF6EC;
    border-inline-start: 3px solid #C9A468;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.75;
    color: #5b4a30;
    margin: 0 0 10px;
}
.contract-doc-note:last-child { margin-bottom: 0; }

/* Printing straight out of #contract-modal fights its own fixed positioning +
   flex layout + max-height/overflow-y (all needed for the on-screen scrollable
   dialog) — browsers can't paginate that across physical pages, they just
   repeat or collapse it. contractPrint() (contract-view.js) copies the
   rendered contract into this plain, un-nested container right before
   printing instead, so print only ever has to deal with normal block flow. */
#contract-print-root { display: none; }

@media print {
    @page { size: A4; margin: 15mm; }
    /* Belt-and-suspenders backstop for contractPrint()'s own JS reset, in
       case print is triggered any other way (Ctrl/Cmd+P) while the modal's
       scroll-lock is still pinning <body>. */
    body { overflow: visible !important; position: static !important; top: auto !important; left: auto !important; width: auto !important; }

    /* display:none (not visibility:hidden) on every OTHER direct child of
       <body> — visibility:hidden still reserves layout space, so the whole
       (now-invisible) rest of the page above #contract-print-root in the DOM
       would keep pushing it down by however many pages that content is tall,
       printing blank pages first. Removing it from layout entirely instead
       lets #contract-print-root sit in plain, ordinary block flow starting
       at the real top of page 1 — no visibility tricks, no fixed/absolute
       positioning (both of which print engines paginate unreliably for
       content taller than one page), just normal flow that breaks across
       pages exactly like any other tall printed document. */
    body > *:not(#contract-print-root) { display: none !important; }
    #contract-print-root {
        display: block !important;
        position: static;
        margin: 0;
    }
    #contract-print-root .contract-doc {
        border: none;
        border-radius: 0;
        padding: 0;
    }
}

/* A value filled in from the booking, marked only in the editor's
   "as your client sees it" view. */
.contract-doc-filled { background:#F5E6D3; color:inherit; border-radius:4px; padding:0 3px; font-weight:600; }

/* A folded contract (booking form, client page): clause titles first, each
   opens on a tap. */
.contract-doc-fold-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:4px 0 12px; font-size:12px; color:#6B7B6B; }
.contract-doc-fold-all { border:0; background:transparent; color:#9F553E; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:8px 0; min-height:36px; }
details.contract-doc-fold { padding:0; }
details.contract-doc-fold > summary { list-style:none; cursor:pointer; margin:0; padding:14px 16px; min-height:24px; }
details.contract-doc-fold > summary::-webkit-details-marker { display:none; }
details.contract-doc-fold .contract-doc-section-title { flex:1; }
.contract-doc-fold-chev { width:14px; height:14px; flex-shrink:0; transition:transform .15s; }
details.contract-doc-fold[open] .contract-doc-fold-chev { transform:rotate(180deg); }
.contract-doc-fold-body { padding:0 18px 16px; }
@media print {
    .contract-doc-fold-bar { display:none !important; }
    .contract-doc-fold-chev { display:none; }
}

/* FOUNDER paper: a folded clause is a quiet row until it opens; the open one
   takes the clay border and its number turns terracotta. */
details.contract-doc-fold .contract-doc-section-num { background: #F2F1EE; color: #6B7B6B; }
details.contract-doc-fold[open] { border: 1.5px solid #B8795D; }
details.contract-doc-fold[open] .contract-doc-section-num { background: #F5E6D3; color: #9F553E; }
details.contract-doc-fold > summary { min-height: 50px; padding: 0 14px; box-sizing: border-box; }
.contract-doc-list li.contract-doc-li-num { display: flex; gap: 8px; }
.contract-doc-mark { color: #B8795D; font-size: .85em; font-variant-numeric: tabular-nums; padding-top: .2em; flex-shrink: 0; }
.contract-doc-list { line-height: 1.85; color: #2B2B2B; }
.contract-doc-filled { background: #F5E6D3; }