/* ==========================================================================
   Modal popups (content modals triggered by [data-toggle="modal"]).
   Self-contained — the test site has no Bootstrap, so this provides the
   overlay / dialog / backdrop styling the live (Bootstrap-3) markup expects.
   Markup shape (one per file in pages/modals/<lang>/):
     .modal.fade > .modal-dialog > .modal-content >
        .modal-header (.close, .modal-title) + .modal-body + .modal-footer
   Open/close behaviour: assets/js/modal.js (adds .in/.show + a .modal-backdrop).
   ========================================================================== */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    /* Above every fixed page control — the mobile contact button
       (.btn-fixed-wrap, z 99999) and #toTop (z 100000). */
    z-index: 100050;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.in,
.modal.show {
    display: block;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100040;   /* just under .modal, above all fixed page controls */
    background-color: #000;
    opacity: 0;
    transition: opacity .15s linear;
}
.modal-backdrop.in,
.modal-backdrop.show {
    opacity: .5;
}

.modal-dialog {
    position: relative;
    width: auto;
    max-width: 720px;
    margin: 40px auto;
    padding: 0 15px;
}

.modal-content {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.modal-header {
    position: relative;
    padding: 22px 26px;
    border-bottom: 1px solid #ececec;
}
.modal-title {
    margin: 0;
    padding-right: 36px;
    font-size: 22px;
    line-height: 1.3;
    color: #127749;
    font-weight: 700;
}
.modal-header .close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: #9aa0a0;
    line-height: 1;
    transition: color .15s;
}
.modal-header .close:hover {
    color: #127749;
}
/* Live markup ships an EMPTY <span> for the close glyph — render the × here. */
.modal-header .close span::before {
    content: "\00D7";
    font-size: 30px;
    font-weight: 400;
}

.modal-body {
    padding: 22px 26px;
    max-height: 70vh;
    overflow-y: auto;
    container-type: inline-size;
}
/* Content modals carry `.modal-body.section-block` so their content (tables,
   img-flex, lists, headings…) gets the SAME styling as page content sections.
   But the .section-block page-layout box-model must not leak in: keep the modal's
   own padding (not the section band's 30px 15px), drop the reserved CLA right-rail
   (`body.cla-rail .section-block { padding-right:380px }`) that otherwise leaves a
   huge gap, and remove the 875px page column so content fills the modal width. */
.modal-body.section-block { padding: 22px 26px; }
body.cla-rail .modal-body.section-block { padding-right: 26px; }
.modal-body.section-block .section-wrap { max-width: none; margin: 0; }
/* Scroll cue — when a modal's content overflows, a soft fade + green-tinted
   shadow at the bottom edge signals there's more to scroll (and a lighter one at
   the top once scrolled). Pure-CSS scroll-shadow: the white `local` cover layers
   scroll WITH the content and mask the fixed `scroll` shadow layers at the very
   top/bottom, so both fade away automatically at the respective ends. No JS. */
.modal-body {
    background:
        linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) center top,
        linear-gradient(rgba(255, 255, 255, 0), #fff 65%) center bottom,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)) center top,
        radial-gradient(farthest-side at 50% 100%, rgba(18, 119, 73, .28), rgba(0, 0, 0, 0)) center bottom;
    background-repeat: no-repeat;
    background-size: 100% 34px, 100% 48px, 100% 15px, 100% 22px;
    background-attachment: local, local, scroll, scroll;
}
.modal-body p {
    margin: 0 0 14px;
    line-height: 1.55;
    color: #394b4e;
}
.modal-body p:last-child {
    margin-bottom: 0;
}
/* Modal bodies carry .section-block for content styling but have no
   .section-wrap, so the section gap model never reaches their children —
   only <p> had a margin, leaving headings/lists cramped. Give the body itself
   the gap-model rhythm so h3 / p / ul are evenly spaced, and drop the per-p
   margin (the gap now owns spacing). */
.modal-body.section-block {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap, 20px);
}
.modal-body.section-block p { margin: 0; }
/* Links inside modals: brand green + bold, no underline (matches live). */
.modal-body p a,
.modal-body li a {
    font-weight: 600;
    color: #127749;
    text-decoration: none;
}
.modal-body p a:hover,
.modal-body li a:hover {
    color: #000;
}
.modal-body p a strong,
.modal-body p a b,
.modal-body li a strong,
.modal-body li a b {
    color: #127749 !important;
    font-weight: 600 !important;
}
.modal-body .price {
    white-space: nowrap;
}
.modal-body .price i {
    color: #127749;
}

.modal-footer {
    padding: 16px 26px;
    border-top: 1px solid #ececec;
    text-align: right;
}
.modal-footer .btn {
    display: inline-block;
    background-color: #127749;
    color: #fff;
    border: 0;
    padding: 11px 26px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .15s;
}
.modal-footer .btn:hover {
    background-color: var(--brand-green-dark, #0d5635);
}

/* Scroll-lock the page behind an open modal (both scroll containers). */
body.modal-open {
    overflow: hidden;
}
html:has(body.modal-open) {
    overflow: hidden;
}
/* Hide the fixed floating controls while a modal is open so they don't peek
   over the backdrop / dimmed page. */
body.modal-open .btn-fixed-wrap,
body.modal-open .btn-fixed-wrap-desctop,
body.modal-open #toTop {
    display: none !important;
}

@media (max-width: 600px) {
    .modal-dialog { margin: 20px auto; }
    .modal-title { font-size: 19px; }
    .modal-body { padding: 18px; }
}