/* Modal — i2t3 component styles
 * Bootstrap modal handles the heavy lifting. The blocks below port the
 * behaviour of the reference theme (ns-modal) faithfully:
 *   - top/bottom positions render a full-width panel anchored to the edge
 *   - the trigger button is centered (.modal-btn)
 *   - coloured headers get readable (white) text
 */

.i2t3-modal-section { position: relative; }

/* Centered, vertically spaced trigger button (reference: .modal-btn). */
.modal-btn {
    display: block;
    margin: 10px auto;
}

/* Fullscreen panel for the "slide from top / bottom" positions. The dialog is
 * absolutely positioned so it can hug the chosen edge while keeping its own
 * (auto) height instead of filling the whole viewport. */
.modal-dialog.modal-fullscreen {
    height: auto;
    position: absolute;
}

.modal-fullscreen.top-modal {
    top: 0;
}

.modal-fullscreen.bottom-modal {
    bottom: 0;
}

/* Readable text on coloured headers + matching close icon on dark headers. */
.modal-header.bg-dark,
.modal-header.bg-primary,
.modal-header.bg-secondary {
    color: #fff;
}

.modal-header.bg-dark .btn-close {
    background-color: #fff;
}