/* Floating windows of the external (Altipal) orders module.
   "Detalle del Pedido" and "Detalle del envío" are Kendo dialogs here, while the very same two
   views of the own orders are Bootstrap modals — so the two order sections of My Account looked
   like two different products: green title bar against white header, small regular title against
   a large bold one, square corners against rounded ones.
   This sheet gives the dialog the modal's frame. Values mirror the .modal rules in
   wwwroot/scss/components/_modal.scss; keep them in step when that file changes.
   The hook class is added to the .k-window by external-order-handlers.js. */

.external-order-dialog {
    border: 0;
    border-radius: 12px;
    /* Clips the title bar and the actions row to the rounded frame. */
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
}

.external-order-dialog .k-window-titlebar {
    padding: 24px 24px 16px;
    background-color: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--light-grey, #f2f2f2);
}

/* !important because the My Account shell paints every Kendo dialog title white, for the brand
   coloured title bar this dialog no longer has. */
.external-order-dialog .k-window-title {
    padding: 0;
    color: var(--bs-body-color, #212529) !important;
    font-size: calc(1.275rem + .3vw);
    font-weight: 700;
    line-height: 1.5;
}

@media (min-width: 1200px) {
    .external-order-dialog .k-window-title {
        font-size: 1.5rem;
    }
}

/* Bootstrap's .btn-close is a dark glyph at half opacity, not a solid white one. */
.external-order-dialog .k-window-titlebar-action {
    color: var(--bs-body-color, #212529) !important;
    opacity: .5;
}

.external-order-dialog .k-window-titlebar-action:hover,
.external-order-dialog .k-window-titlebar-action:focus {
    opacity: .75;
}

.external-order-dialog .k-dialog-actions {
    padding: 1rem 24px 24px;
    border-top: 1px solid var(--light-grey, #f2f2f2);
}