

.modal {
    display: none;
    position: fixed;
    inset: 0;
    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;   
    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: 0;
    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: 700 23px/1.1 Calibri, 'Segoe UI', Arial, sans-serif;
    color: var(--brand-primary, #486b85);
    text-align: left;
}
.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: var(--brand-primary, #486b85);
}

.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.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; }

.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(72, 107, 133, .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 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #000;
}
.modal-body p,
.modal-body li,
.modal-body td,
.modal-body th {
    margin: 0;
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #000;
    text-align: justify;
}
.modal-body h3,
.modal-body h4 { margin: 0; font: 700 18px/1.3 Calibri, 'Segoe UI', Arial, sans-serif; color: #3c454d; text-align: left; }
.modal-body ul,
.modal-body ol { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; }
.modal-body ul > li { position: relative; padding-left: 20px; }
.modal-body ul > li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary, #486b85); }
.modal-body strong,
.modal-body b { font-weight: 700; color: #000; }

.modal-body.section-block { gap: 15px; }

.modal-body a:not(.btn):not(.wa-btn) {
    font-weight: 600;
    color: #337ab7;
    text-decoration: none;
}
.modal-body a:not(.btn):not(.wa-btn):hover { text-decoration: none; color: var(--brand-primary-dark, #253a4b); } 
.modal-body a:not(.btn) strong,
.modal-body a:not(.btn) b { color: inherit; }
.modal-body .price {
    white-space: nowrap;
}
.modal-body .price i {
    color: var(--brand-primary, #486b85);
}

.modal-footer {
    padding: 16px 26px;
    border-top: 1px solid #ececec;
    text-align: center;   
}

.modal-footer .btn,
.modal-footer .wa-btn {
    display: inline-block; box-sizing: border-box;
    margin: 0; padding: 12px 20px;
    background: linear-gradient(#4d697f 0%, #253a4b 100%);
    color: #fff;
    font: 600 16px/1.2 Calibri, 'Segoe UI', Arial, sans-serif;
    text-align: center; text-decoration: none; text-shadow: none;
    border: 0; border-radius: 0; box-shadow: none;
    cursor: pointer;
}
.modal-footer .btn:hover,
.modal-footer .wa-btn:hover {
    background: linear-gradient(#5a7a92 0%, #2f4a5e 100%);
    color: #fff; text-decoration: none;
}

body.modal-open {
    overflow: hidden;
}
html:has(body.modal-open) {
    overflow: hidden;
}

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 p, .modal-body li { text-align: left; }
    .modal-body { padding: 18px; }
}

.modal .modal-title.text-gold-gradient { color: var(--brand-primary, #486b85); font-weight: 700; }
.modal .text-uppercase { text-transform: uppercase; }
.modal .font-18 { font-size: 18px; }
.modal .font-19 { font-size: 19px; }
.modal .font-20 { font-size: 20px; }
.modal .margin-top-0 { margin-top: 0; }
.modal .margin-bottom-0 { margin-bottom: 0; }
.modal .text-right { text-align: right; }

.modal-body-inner {
    border: 1px solid #063852;
    padding: 20px;
    border-radius: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    margin: 0;
}
.modal-body-inner p { margin: 0; }
.modal-body-inner p:last-child { margin-bottom: 0; }
.modal-body-inner h3 {
    margin: 20px 0 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.modal-body-inner h3:first-child { margin-top: 0; }
.modal-body-inner .color-blue-light { color: #337ab7; }
.modal-body .modal-body-inner a,
.modal-body .modal-body-inner p a {
    font-weight: 600;
    color: #337ab7;
    text-decoration: none;
}
.modal-body .modal-body-inner a:hover,
.modal-body .modal-body-inner p a:hover { color: var(--brand-primary-dark, #253a4b); text-decoration: none; }
.modal-body-inner hr {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid #e2e2e2;
}

.modal .btn-gold {
    display: inline-block;
    background: linear-gradient(#dbac51 0%, #e4bb6a 42%, #e4bb6a 100%);
    color: #fff;
    border: 2px solid #a3864f;
    padding: 6px 20px;
    border-radius: 0;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}
.modal .btn-gold:hover { filter: brightness(1.05); color: #fff; }
.modal-footer p { margin: 0; }

.modal-body .flag-img { width: 75%; box-shadow: 2px 3px 7px rgba(0, 0, 0, .3); }
.modal-body .video-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.modal-body .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.modal-body ol { list-style: decimal; padding-left: 22px; }
.modal-body ol > li { padding-left: 4px; }
.modal-body ol > li::marker { font-weight: 700; color: var(--brand-primary, #486b85); }

:is(#content .content-inner) :is(ul.list-law, ul.list-check, ul.list-plain) > li { position: relative; }
:is(#content .content-inner) :is(ul.list-law, ul.list-check) > li::before {
    content: ""; position: absolute; left: 0;
}

:is(#content .content-inner, .modal-body) ul.list-plain > li { padding-left: 0; }
:is(#content .content-inner, .modal-body) ul.list-plain > li::before { content: none; }

:is(#content .content-inner, .modal-body) ul.list-law > li { padding-left: 26px; }
:is(#content .content-inner, .modal-body) ul.list-law > li::before {
    top: 9px; width: 15px; height: 15px; border-radius: 0;   
    background: url(/assets/img/icons/law-icon-small.webp) center / contain no-repeat;
}

:is(#content .content-inner, .modal-body) ul.list-check > li { padding-left: 26px; }
:is(#content .content-inner, .modal-body) ul.list-check > li::before {
    content: ""; top: 5px; width: 15px; height: 15px; border-radius: 0; color: transparent;
    font: 0/0 a; background: url(/assets/img/icons/check-icon-small.svg) center / contain no-repeat;
}

.modal-body h3 { font-size: 18px; line-height: 1.3; color: var(--brand-primary-dark, #253a4b); }
.modal-body h3.text-center { text-align: center; }

.modal-body .text-center { text-align: center !important; }
.modal-body .text-right { text-align: right !important; }
.modal-body .nowrap { white-space: nowrap; }
.modal-body .bold, .modal-body a.bold { font-weight: 700; }
.modal-body small { font-size: 13px; line-height: 20px; }
.modal-body hr { width: 100%; margin: 0; border: 0; border-top: 1px solid #d9d9d9; }

.modal-body .table-responsive th,
.modal-body .table-responsive td { font-size: 14px; line-height: 20px; text-align: left; }
.modal-body .table-responsive td p { font-size: 14px; line-height: 20px; text-align: inherit; }
.modal-body .table-responsive td p + p { margin-top: 8px; }
.modal-body .table-responsive th p { margin: 0; font-weight: 600; text-align: inherit; }
.modal-body .table-responsive thead.dark th { background: var(--brand-primary, #486b85) !important; color: #fff; }
.modal-body .opt-yes { color: #427200; font-size: 18px; }
.modal-body .opt-req { color: var(--brand-primary, #486b85); font-size: 8px; vertical-align: middle; }

.modal-body .lock-text { text-align: center; font: 700 18px/1.3 Calibri, 'Segoe UI', Arial, sans-serif; color: var(--brand-primary, #486b85); }
.modal-body .lock-text::before { content: "\f023"; font: 900 16px/1 "Font Awesome 6 Pro"; margin-right: 8px; }

.modal-body a.btn {
    display: inline-block; margin: 0; padding: 12px 20px;
    background: linear-gradient(#4d697f 0%, #253a4b 100%); color: #fff !important;
    font: 600 16px/1.2 Calibri, 'Segoe UI', Arial, sans-serif; text-decoration: none !important; border-radius: 0;
}
.modal-body a.btn:hover { background: linear-gradient(#5a7a92 0%, #2f4a5e 100%); }

.modal-body .clearfix { display: flex; flex-wrap: wrap; gap: 15px; }
.modal-body .clearfix > a { flex: 1 1 200px; text-decoration: none; }
.modal-body .clearfix .col-md-6 { display: flex; flex-direction: column; gap: 15px; }

.modal-body .clearfix > .col-md-6 { flex: 1 1 260px; }

.modal.modal-wide > .modal-dialog { max-width: 900px; }

.modal-body .modal-img-row { display: flex; gap: 15px; align-items: flex-start; }
.modal-body .modal-img-row img {
    flex: 1 1 0; min-width: 0;
    width: 100%; height: auto; display: block; border-radius: 0;
    border: 1px solid #d9d9d9; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
@media (max-width: 600px) { .modal-body .modal-img-row { flex-direction: column; } }

.modal-body .org-pyramid {
    background: #e4e4e4; box-shadow: 4px 4px 10px #b5b5b5; border-radius: 0;
    padding: 15px; display: flex; flex-direction: column; gap: 20px;
}
.modal-body .org-pyramid__top { display: flex; align-items: flex-start; gap: 15px; }
.modal-body .org-pyramid__side { flex: 1 1 0; min-width: 0; }
.modal-body .org-pyramid__side:first-child { padding-top: 120px; }   
.modal-body .org-pyramid__side:last-child  { padding-top: 96px; }    
.modal-body .org-pyramid__mid { flex: 2 1 0; min-width: 0; display: flex; flex-direction: column; gap: 15px; }
.modal-body .org-pyramid__bottom { display: flex; gap: 15px; padding: 0 30px; }
.modal-body .org-pyramid__bottom > .org-tile { flex: 1 1 0; min-width: 0; }

.modal-body .org-tile {
    background: #eee; border-radius: 0; padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.modal-body .org-tile > img { max-width: 300px; width: 100%; height: auto; margin: 0 auto; display: block; }
.modal-body .org-tile > .org-arrow { max-width: 240px; margin: -10px auto 0; }   

.modal-body .org-pyramid p,
.modal-body .org-pyramid summary { font-size: 12px; line-height: 1.35; color: #686868; margin: 0; text-align: left; }
.modal-body .org-tile details > p { margin-top: 8px; }
.modal-body .org-tile summary { cursor: pointer; list-style: none; }
.modal-body .org-tile summary::-webkit-details-marker { display: none; }
.modal-body .org-tile summary::after { content: ""; display: block; clear: both; }
.modal-body .org-more {
    float: right; margin: 2px 0 0 8px; padding: 1px 10px;
    background: #45494a; color: #fff; font-size: 11px; line-height: 1.5;
    text-transform: uppercase; white-space: nowrap;
}
.modal-body .org-tile summary:hover .org-more,
.modal-body .org-tile summary:focus-visible .org-more { background: #6a7071; }

.modal-body .org-arrow {
    background: #b4b4b4; color: #3f4448; text-align: center;
    font-size: 12px !important; line-height: 1.3;
}
.modal-body .org-arrow--up   { clip-path: polygon(50% 0, 100% 32%, 100% 100%, 0 100%, 0 32%); padding: 30px 12px 12px; }
.modal-body .org-arrow--down { clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%); padding: 12px 12px 30px; }

@media (max-width: 700px) {
    .modal-body .org-pyramid__top { flex-direction: column; }
    .modal-body .org-pyramid__side:first-child,
    .modal-body .org-pyramid__side:last-child { padding-top: 0; }
    .modal-body .org-pyramid__bottom { flex-direction: column; padding: 0; }
    .modal-body .org-arrow--up,
    .modal-body .org-arrow--down { clip-path: none; padding: 10px 12px; }
}
