Mobile/Desktop Visibility Classes

/* Responsive visibility utilities.
   Usage: add .show-mobile, .hide-mobile, .show-desktop, .hide-desktop, etc.
   to any element. !important ensures they override component-level rules. */

/* ── Mobile-only (< 768 px) ── */
.show-mobile { display: block !important; }
.hide-mobile { display: none  !important; }

/* ── Tablet and above (>= 768 px) ── */
@media ( min-width: 768px ) {
    .show-mobile { display: none  !important; }
    .hide-mobile { display: block !important; }
}

/* ── Tablet-only (768 px – 1023 px) ── */
.show-tablet { display: none  !important; }
@media ( min-width: 768px ) and ( max-width: 1023px ) {
    .show-tablet { display: block !important; }
    .hide-tablet { display: none  !important; }
}

/* ── Desktop-only (>= 1024 px) ── */
.show-desktop { display: none  !important; }
.hide-desktop { display: block !important; }
@media ( min-width: 1024px ) {
    .show-desktop { display: block !important; }
    .hide-desktop { display: none  !important; }
}

/* ── Flex variants (same breakpoints) ── */
.show-mobile-flex { display: none !important; }
@media ( max-width: 767px ) {
    .show-mobile-flex { display: flex !important; }
}

.show-desktop-flex { display: none !important; }
@media ( min-width: 1024px ) {
    .show-desktop-flex { display: flex !important; }
}