/* One shared modal appearance for Bootstrap dialogs and the native offices dialog.
   Loaded before country custom.css. Keep legacy markup and selector hooks intact. */
:root {
    --modal-radius: var(--radius-medium, 12px);
    --modal-shadow: 0 16px 48px rgba(var(--gray-1000-rgb), .2);
    --modal-overlay-color: rgb(var(--gray-1000-rgb));
    --modal-overlay-opacity: .45;
    --modal-z-index: 10001;
    --modal-fade-duration: 150ms;
    --modal-header-background: var(--gray-0);
    --modal-title-color: var(--gray-900);
    --modal-header-padding-block: 8px;
    --modal-header-padding-inline: 24px;
    --modal-title-size: 22px;
    --modal-title-weight: 600;
    --modal-title-line-height: 1.4;
    --modal-divider: 1px solid var(--gray-200);
    --modal-close-size: 40px;
    --modal-content-padding: 24px;
}
/* Bootstrap already fades the modal itself. Remove its separate dialog slide. */
.modal.fade .modal-dialog {
    transform: none;
    transition: none;
}
.modal.fade,
.modal-backdrop.fade {
    transition: opacity var(--modal-fade-duration) ease-out;
}
.modal.in:where(:not(.fade)),
.alternatives-modal[open],
.alternatives-modal[open]::backdrop {
    animation: modal-fade-in var(--modal-fade-duration) ease-out;
}
@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    :root { --modal-fade-duration: 0ms; }
}
.modal-content,
.alternatives-modal.alternatives-modal.alternatives-modal,
#feedbackModal .modal-content {
    border: 0;
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
}
/* Native Angular component selectors include generated attributes; repeated classes
   match that existing specificity without changing Bootstrap country hooks. */
/* Clip only the header corners, so country content and popovers are not clipped. */
.modal-header,
.alternatives-modal.alternatives-modal .alternatives-modal-header,
#disclaimermodal .modal-header,
#feedbackModal .modal-content .modal-header {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    padding: var(--modal-header-padding-block) var(--modal-header-padding-inline);
    padding-inline: var(--modal-header-padding-inline);
    border-bottom: var(--modal-divider);
    border-radius: var(--modal-radius) var(--modal-radius) 0 0;
    background: var(--modal-header-background);
    color: var(--modal-title-color);
    text-align: start;
}
.modal-header :where(h1, h2, h3, h4, .modal-title),
.alternatives-modal.alternatives-modal .alternatives-modal-header.alternatives-modal-header h2,
#feedbackModal .modal-content .modal-header h1 {
    margin: 0;
    padding: 0;
    color: var(--modal-title-color);
    font-size: var(--modal-title-size);
    font-weight: var(--modal-title-weight);
    line-height: var(--modal-title-line-height);
    overflow-wrap: anywhere;
}
.modal-header > :where(.pull-left, .modal-title, h1, h2, h3, h4),
.alternatives-modal-header > :where(h2) {
    flex: 1;
    min-width: 0;
    padding-inline-end: 16px;
}
.modal-header .close,
.alternatives-modal.alternatives-modal .alternatives-close,
#feedbackModal .modal-content .modal-header button { position: static; }

/* One close-button appearance, including headerless media dialogs. */
.modal-header .close,
.alternatives-modal.alternatives-modal .alternatives-close,
#feedbackModal .modal-content .modal-header button,
.modal-video .close,
.modal:where(#modalPush1, #modalPush2) .close,
#gmaps-modal .modal-content .modal-body button.close {
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--modal-close-size);
    width: var(--modal-close-size);
    height: var(--modal-close-size);
    margin: 0;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-circle, 50%);
    background: var(--modal-header-background);
    color: var(--gray-700);
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
}
#feedbackModal .modal-content .modal-header button span { color: inherit; }
.modal-header .close:hover,
.alternatives-modal.alternatives-modal .alternatives-close:hover,
.modal-video .close:hover,
.modal:where(#modalPush1, #modalPush2) .close:hover,
#gmaps-modal .modal-content .modal-body button.close:hover { color: var(--gray-700); background: var(--gray-100); }
.modal-header .close:focus-visible,
.alternatives-modal.alternatives-modal .alternatives-close:focus-visible,
.modal-video .close:focus-visible,
.modal:where(#modalPush1, #modalPush2) .close:focus-visible,
#gmaps-modal .modal-content .modal-body button.close:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}
.modal,
.modal-video,
#docViewer.modal { z-index: var(--modal-z-index); }
.modal-backdrop { position: fixed; inset: 0; z-index: calc(var(--modal-z-index) - 1); background: var(--modal-overlay-color); }
.modal-backdrop.in { opacity: var(--modal-overlay-opacity); }
.alternatives-modal.alternatives-modal.alternatives-modal::backdrop,
#feedbackModal { background: color-mix(in srgb, var(--modal-overlay-color) calc(var(--modal-overlay-opacity) * 100%), transparent); }
.modal-body { overflow-wrap: anywhere; }
/* Bootstrap's fixed-width page container must fit inside the print dialog. */
.modal-body > .container { width: 100%; max-width: 100%; }
/* Existing map buttons stay children of .modal-body for country selector compatibility. */
#gmaps-modal .modal-content { display: flex; flex-direction: column; width: min(800px, calc(100% - 32px)); }
#gmaps-modal .modal-content .modal-body { min-height: 0; flex: 1; }
#gmaps-modal .modal-content .modal-body button.close,
#gmaps-modal .modal-content .modal-body button.expand {
    top: 8px;
    width: var(--modal-close-size);
    height: var(--modal-close-size);
    border-radius: var(--radius-circle, 50%);
}
#gmaps-modal .modal-content .modal-body button.close { inset-inline-end: 24px; }
#gmaps-modal .modal-content .modal-body button.expand { inset-inline-end: 68px; }

@media (max-width: 767px) {
    :root { --modal-header-padding-inline: 16px; --modal-title-size: 20px; }
    .modal-header,
    .alternatives-modal.alternatives-modal .alternatives-modal-header,
    #disclaimermodal .modal-header,
    #feedbackModal .modal-content .modal-header { padding-inline: var(--modal-header-padding-inline); }

    #gmaps-modal .modal-content .modal-body button.close { inset-inline-end: 16px; }
    #gmaps-modal .modal-content .modal-body button.expand { inset-inline-end: 60px; }
}

/* Center short dialogs; tall dialogs grow naturally and retain Bootstrap scrolling. */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
    margin-block: 24px;
    margin-inline: auto;
    pointer-events: none;
}
.modal-dialog > .modal-content { width: 100%; pointer-events: auto; }
.modal-body,
#feedbackModal .modal-content .modal-body { padding: var(--modal-content-padding); }
#disclaimermodal .modal-body p { padding: 0; }
.modal-body > :where(:last-child) { margin-block-end: 0; }
.modal-body > .container { padding: 0; }
.alternatives-modal.alternatives-modal .alternatives-modal-body { padding: var(--modal-content-padding); }
.alternatives-modal .alternatives-modal-body > .alternatives-group:first-child { margin-block-start: 0; }
.alternatives-modal .alternatives-modal-body .alternatives-district:first-child { margin-block-start: 0; }
.alternatives-modal .alternatives-modal-body .alternative-card:last-child { margin-block-end: 0; }
#shareModal .modal-body .col-md-12 { padding-inline: 0; }
#shareModal .modal-body code {
    display: block;
    padding: 16px;
    padding-inline-end: 64px;
    border: none;
    border-radius: var(--radius-small, 8px);
    background: var(--red-50);
    color: var(--red-700);
    white-space: pre-wrap;
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}
#shareModal :where(#embeded-url-section, #embeded-searchbar-section) {
    position: relative;
    display: grid;
}
#shareModal :where(#embeded-url-section, #embeded-searchbar-section) > :where(code) { grid-row: 1; }
.modal-copy {
    position: absolute;
    grid-row: 1 / 2;
    inset-inline-end: 8px;
    top: 50%;
    translate: 0 -50%;
}
.modal-copy-status { display: block; margin-block-start: 8px; color: var(--gray-700); }
.modal-copy-status:empty { margin: 0; }
.modal-dialog:where(:has(.modal-print-options)) { width: min(640px, calc(100% - 32px)); }
.modal-print-options .checkbox { margin: 0 0 16px; }
.modal-print-options .checkbox label { display: block; padding-inline-start: 26px; }
.modal-print-options .form-control { margin-block-start: 12px; width: 100%; }
.modal-print-options .form-group { margin: 24px 0; padding-block-start: 24px; border-top: var(--modal-divider); }
.modal-print-options .form-group > .col-sm-6 { float: none; width: 100%; padding: 0; }
.modal-print-options .form-group .checkbox:last-child { margin-block-end: 12px; }
.modal-print-options .form-control:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 767px) {
    :root { --modal-content-padding: 16px; }
    .modal-dialog { width: calc(100% - 32px); min-height: calc(100dvh - 32px); margin-block: 16px; }
}

/* Align the native choice controls with the shared title/content edge. */
.modal-print-options .checkbox input[type="radio"],
.modal-print-options .checkbox input[type="checkbox"] {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: .25em;
    margin: 0;
}

:where([dir="rtl"]) #shareModal .modal-body code { padding-inline-start: 64px; padding-inline-end: 16px; }

/* Legacy media popups share the same frame, heading and dimmer. */
.highslide-wrapper,
.modal:where(#modalPush1, #modalPush2) {
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    background: var(--modal-header-background);
}
.highslide-heading { display: block; margin: 0; }
.highslide-dimming { background: var(--modal-overlay-color); }
.highslide-image {
    border-width: var(--modal-content-padding);
    border-color: var(--modal-header-background);
    border-radius: 0 0 var(--modal-radius) var(--modal-radius);
}
.highslide-heading .modal-header { min-height: calc(var(--modal-close-size) + 2 * var(--modal-header-padding-block) + 1px); }
.modal:where(#modalPush1, #modalPush2) {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(640px, calc(100% - 32px));
    height: auto;
    margin: 0;
}
.modal:where(#modalPush1, #modalPush2) iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Highslide also uses this element to measure the available viewport. */
.highslide-viewport-size { position: fixed; inset: 0; width: 100%; height: 100%; }

.highslide-container div { font-family: inherit; }

/* Current homepage videos retain their modal/body hooks, with the shared shell. */
.modal-video {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(640px, calc(100% - 32px));
    height: auto;
    max-height: calc(100dvh - 32px);
    margin: 0;
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    background: var(--modal-header-background);
}
.modal-body-video { display: block; margin: 0; width: auto; }
.modal-body-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
#preferentialRates .modal-dialog .modal-body { padding: var(--modal-content-padding); }

/* Keep tariff text readable; wide country tables scroll inside the modal. */
#preferentialRates .modal-dialog table:where(.modal-body > table) { width: max(100%, 640px); }

#gmaps-modal .modal-content { height: min(600px, calc(100dvh - 32px)); }
#gmaps-modal.expanded .modal-content {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    height: calc(100dvh - 32px);
    max-height: calc(100dvh - 32px);
    margin-top: 0;
}

/* Maps and videos are headerless; controls sit at the outer media corner. */
.modal-video .close,
.modal:where(#modalPush1, #modalPush2) .close {
    position: absolute;
    z-index: 1;
}
#gmaps-modal .modal-content .modal-body button.close { z-index: 1; }
#gmaps-modal .modal-content .modal-body button.expand {
    z-index: 1;
    justify-content: center;
    background: var(--modal-header-background);
    color: var(--gray-700);
}

/* Media controls straddle the outer corner, without a header or extra top space. */
.modal-video,
.modal:where(#modalPush1, #modalPush2) {
    overflow: visible;
    width: min(640px, calc(100% - 48px));
    max-height: calc(100dvh - 48px);
}
.modal-video .close,
.modal:where(#modalPush1, #modalPush2) .close,
#gmaps-modal .modal-content .modal-body button.close,
#gmaps-modal .modal-content .modal-body button.expand {
    top: calc(var(--modal-close-size) / -2);
    inset-inline-end: calc(var(--modal-close-size) / -2);
}
#gmaps-modal .modal-content .modal-body button.expand {
    inset-inline-end: calc(var(--modal-close-size) / 2 + 8px);
}
#gmaps-modal .modal-content .modal-body button.expand:hover {
    color: var(--gray-700);
    background: var(--gray-100);
}
#gmaps-modal .modal-content {
    width: min(800px, calc(100% - 48px));
    height: min(600px, calc(100dvh - 48px));
}
#gmaps-modal.expanded .modal-content {
    width: calc(100% - 48px);
    max-width: calc(100% - 48px);
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
}

.modal-open .modal:where(.modal-video, #modalPush1, #modalPush2) { overflow: visible; }

/* Keep the legacy video header and its close-button child available to countries. */
:where(#modalPush1, #modalPush2) .modal-header {
    padding: 0;
    border: 0;
    min-height: 0;
}