/* ==========================================================================
   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;
    z-index: 1050;
    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: 1040;
    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;
}
.modal-body p {
    margin: 0 0 14px;
    line-height: 1.55;
    color: #394b4e;
}
.modal-body p:last-child {
    margin-bottom: 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);
}

body.modal-open {
    overflow: hidden;
}

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