/* Mobile: remove the black FancyBox slide padding left/right/bottom around iframe
   popups (offer/mail composers, roomplan dialogs). On a phone a tap on that black
   area closes the dialog and loses the typed text — with the padding gone there is
   nothing accidental to hit, and the form gets the full width. The 44px on top stay
   as room for the close button.
   Loaded directly after jquery.fancybox.min.css in every head that loads FancyBox
   (management top_short.php, layouts/app.latte). */
@media (max-width: 767px) {
    .fancybox-slide--iframe {
        padding: 44px 0 0 0 !important;
    }

    .fancybox-slide--iframe .fancybox-content {
        width: 100% !important;
        height: calc(100% - 44px) !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* The dialog title (roomplan.js openPhoneDialog passes it as the caption) sits in
       the 44px top strip, in the green of the jQuery UI titlebar it replaces, with the
       close button's 44px kept free on the right. The caption is a sibling of the
       stage, not inside the slide, hence the container scope; FancyBox hides it when
       the caption is empty (the mails page popups). */
    .fancybox-container .fancybox-caption {
        top: 0;
        bottom: auto;
        margin: 0 !important; /* .fancybox-caption--separate pulls it up by 50px otherwise */
        height: 44px;
        padding: 0 48px 0 12px;
        background: #8ab22b;
        background: linear-gradient(135deg, #8ab22b 1%, #607b28 38%, #607b28 55%, #607b28 60%, #99c338 84%, #8ab22b 100%);
        color: #ffffff;
        font-weight: bold;
        font-size: 15px;
        line-height: 44px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .fancybox-container .fancybox-caption__body {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}