/* ============================================
   unsaved-changes.mobile.css
   Mobile overrides only (max-width: 767.98px)
   Companion to unsaved-changes.css
   ============================================ */

@media (max-width: 767.98px) {

    /* ----------------------------------------
       Stack the banner content vertically so
       text and buttons each get the full width.
       ---------------------------------------- */
    #unsaved-changes-banner .unsaved-banner__content {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 16px;
        text-align: center;
    }

    /* Hide the icon — wastes space on mobile */
    #unsaved-changes-banner .unsaved-banner__icon {
        display: none;
    }

    /* Text: smaller, single line if possible */
    #unsaved-changes-banner .unsaved-banner__text {
        font-size: 0.85rem;
    }

    /* Buttons: full-width row, evenly spaced */
    #unsaved-changes-banner .unsaved-banner__content > .ms-auto {
        margin-left: 0 !important;
        display: flex;
        gap: 8px;
    }

    #unsaved-changes-banner .unsaved-banner__content > .ms-auto .btn {
        flex: 1;
    }

    /* ----------------------------------------
       Bottom padding so page content isn't
       hidden behind the fixed banner.
       Approx banner height: ~90px stacked.
       ---------------------------------------- */
    .content-page > .content {
        padding-bottom: 100px;
    }

}