/*
 * ===== responsive.css =====
 * Global responsive overrides for VPSTTT project
 * Mobile-first approach — supplements Tailwind utility classes
 *
 * Custom breakpoints (match user spec):
 *   - Mobile:  ≤ 576px
 *   - Tablet:  577px – 1024px  (iPad mini/Air/regular)
 *   - Desktop: > 1024px
 *
 * Tailwind breakpoints for reference:
 *   sm = 640px, md = 768px, lg = 1024px, xl = 1280px
 *
 * NOTE: The project loads Tailwind via CDN JS. This file adds CSS
 *       that Tailwind utility classes cannot express (e.g. custom
 *       breakpoints at 576px/1024px, complex descendant selectors).
 */

/* ===================================================================
   0. GLOBAL RESETS — prevent overflow, ensure box-sizing
   =================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-y: auto;
    scrollbar-gutter: auto;
}

body {
    min-width: 0;
    overflow-x: hidden;
    word-break: break-word;
}

img, video, svg {
    max-width: 100%;
    height: auto;
}

input, select, textarea, button {
    max-width: 100%;
}

:root {
    --vpsttt-scrollbar-track: rgba(248, 250, 252, 0.95);
    --vpsttt-scrollbar-thumb: rgba(118, 67, 201, 0.62);
    --vpsttt-scrollbar-thumb-hover: rgba(76, 29, 149, 0.78);
    --vpsttt-scrollbar-border: rgba(248, 250, 252, 0.95);
}

html,
body,
.vpsttt-scrollbar,
.overflow-auto,
.overflow-y-auto,
.overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--vpsttt-scrollbar-thumb) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.vpsttt-scrollbar::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.vpsttt-scrollbar::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track {
    background: var(--vpsttt-scrollbar-track);
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.vpsttt-scrollbar::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(129, 92, 246, 0.72), rgba(118, 67, 201, 0.86));
    border: 2px solid var(--vpsttt-scrollbar-border);
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.vpsttt-scrollbar::-webkit-scrollbar-thumb:hover,
.overflow-auto::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(109, 40, 217, 0.84), rgba(76, 29, 149, 0.9));
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
.vpsttt-scrollbar::-webkit-scrollbar-button,
.overflow-auto::-webkit-scrollbar-button,
.overflow-y-auto::-webkit-scrollbar-button,
.overflow-x-auto::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
.vpsttt-scrollbar::-webkit-scrollbar-corner,
.overflow-auto::-webkit-scrollbar-corner,
.overflow-y-auto::-webkit-scrollbar-corner,
.overflow-x-auto::-webkit-scrollbar-corner {
    background: transparent;
}

/* Admin product pages live inside the product iframe shell. Keep dense
   data readable at 100% browser zoom without letting narrow columns wrap. */
.admin-product-page {
    font-size: 13px;
    line-height: 1.35;
    background: #f8fafc;
}

.admin-product-page .admin-product-panel {
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.admin-product-table-wrap {
    max-width: 100%;
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 10px;
    overflow-x: scroll;
    overflow-y: auto;
    scrollbar-gutter: auto;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.admin-product-table {
    width: max-content;
    min-width: 1520px;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-product-table th,
.admin-product-table td,
.admin-product-table th *,
.admin-product-table td * {
    white-space: nowrap;
    word-break: normal !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
}

.admin-product-table th,
.admin-product-table td {
    padding: 10px 12px !important;
    line-height: 1.35;
    vertical-align: middle;
}

.admin-product-table thead tr {
    background: #3b82f6;
}

.admin-product-table tbody tr {
    background: #fff;
}

.admin-product-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.admin-product-table tbody tr:hover {
    background: #eef6ff;
}

.admin-product-table .admin-col-check {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    text-align: center;
}

.admin-product-table .admin-col-id {
    width: 84px;
    min-width: 84px;
    max-width: 84px;
    text-align: center;
    white-space: nowrap !important;
    word-break: keep-all !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
}

.admin-product-table .admin-col-iphost {
    min-width: 260px;
    max-width: 360px;
}

.admin-product-table .admin-col-user {
    min-width: 300px;
    max-width: 420px;
}

.admin-product-table .admin-col-date {
    min-width: 190px;
}

.admin-product-table .admin-col-status,
.admin-product-table .admin-col-login {
    min-width: 120px;
}

.admin-product-table .admin-truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* User section submenus: keep the white secondary sidebar compact across
   account, product, domain and security shells. */
#account-sidebar,
#domain-sidebar,
#waf-sidebar,
#hosting-sidebar,
#proxy-sidebar,
#vps-sidebar,
#separate-sidebar {
    scrollbar-gutter: stable;
}

@media (min-width: 768px) {
    #account-sidebar,
    #domain-sidebar,
    #waf-sidebar,
    #hosting-sidebar,
    #proxy-sidebar,
    #vps-sidebar,
    #separate-sidebar {
        width: 15rem !important;
        flex: 0 0 15rem !important;
    }

    #account-sidebar nav,
    #domain-sidebar nav,
    #waf-sidebar nav,
    #hosting-sidebar nav,
    #proxy-sidebar nav,
    #vps-sidebar nav,
    #separate-sidebar nav {
        padding: 0.75rem 0.65rem !important;
    }

    #account-sidebar .nav-item,
    #domain-sidebar .nav-item,
    #waf-sidebar .nav-item,
    #hosting-sidebar .nav-item,
    #proxy-sidebar .nav-item,
    #vps-sidebar .nav-item,
    #separate-sidebar .nav-item {
        gap: 0.65rem !important;
        padding: 0.55rem 0.7rem !important;
        font-size: 0.92rem !important;
        line-height: 1.25rem !important;
    }

    #account-sidebar .nav-item > span:last-child,
    #domain-sidebar .nav-item > span:last-child,
    #waf-sidebar .nav-item > span:last-child,
    #hosting-sidebar .nav-item > span:last-child,
    #vps-sidebar .nav-item > span:last-child,
    #separate-sidebar .nav-item > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #account-sidebar,
    #domain-sidebar,
    #waf-sidebar,
    #hosting-sidebar,
    #proxy-sidebar,
    #vps-sidebar,
    #separate-sidebar {
        width: 14rem !important;
        flex-basis: 14rem !important;
    }
}

@media (max-width: 767px) {
    #account-sidebar,
    #domain-sidebar,
    #waf-sidebar,
    #hosting-sidebar,
    #proxy-sidebar,
    #vps-sidebar,
    #separate-sidebar {
        width: min(17rem, 86vw) !important;
    }
}

@media (min-width: 768px) {
    #proxy-sidebar {
        width: 20rem !important;
        flex: 0 0 20rem !important;
        scrollbar-gutter: auto;
    }

    #proxy-sidebar nav {
        overflow-x: hidden;
        scrollbar-gutter: auto;
    }

    #proxy-sidebar .nav-item {
        align-items: flex-start;
        min-height: 42px;
        white-space: normal;
    }

    #proxy-sidebar .nav-item > span:last-child {
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
        line-height: 1.25;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #proxy-sidebar {
        width: min(17rem, 86vw) !important;
        flex: 0 0 min(17rem, 86vw) !important;
    }
}

/* Prevent long text from breaking layout */
h2, h3, span, p, td, th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* iOS safe area */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===================================================================
   1. VPS PAGE — CRITICAL FIX: body overflow:hidden prevents scrolling
      vps.php sets html,body { overflow:hidden } for iframe docking.
      On small screens where scrolling IS needed, we must allow it.
   =================================================================== */
@media (max-width: 1180px), (hover: none) and (max-width: 1366px), (pointer: coarse) and (max-width: 1366px) {
    /* VPS page locks body scroll — unlock on tablet/mobile so
       content is reachable */
    #vpsPage {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===================================================================
   2. TABLE RESPONSIVE — horizontal scroll for all data tables
   =================================================================== */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* --- Mobile (≤576px) --- */
@media (max-width: 576px) {
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .vpsttt-scrollbar::-webkit-scrollbar,
    .overflow-auto::-webkit-scrollbar,
    .overflow-y-auto::-webkit-scrollbar,
    .overflow-x-auto::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /* Reduce base table font-size */
    table {
        font-size: 0.8rem;
    }

    /* Tighter cell padding */
    table th,
    table td {
        padding: 6px 8px !important;
    }

    /* Note inputs inside proxy tables */
    .note-input {
        width: 100px !important;
        min-width: 80px;
    }
}

/* --- Tablet (577–1024px) — ensure horizontal scroll is available --- */
@media (min-width: 577px) and (max-width: 1024px) {
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.85rem;
    }
}

/* ===================================================================
   3. HEADER / MANAGEMENT BAR
      Classes: .p-4.border-t.rounded-lg (proxy/hosting/s3/separate)
   =================================================================== */

/* --- Mobile (≤576px) --- */
@media (max-width: 576px) {
    /* Outer page wrapper */
    .min-h-screen.p-4 {
        padding: 8px !important;
    }

    /* Header row */
    .p-4.border-t.rounded-lg,
    .p-4.border-b {
        padding: 12px !important;
        gap: 8px;
    }

    /* Wrap buttons inside header when title is long */
    .p-4.border-t.rounded-lg .flex.items-center.gap-2,
    .p-4.border-b .flex.items-center.gap-2 {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Header title */
    .p-4.border-t.rounded-lg h2,
    .p-4.border-b h2 {
        font-size: 1rem;
        line-height: 1.4;
    }

    /* Action buttons shrink */
    .p-4.border-t.rounded-lg a,
    .p-4.border-b a {
        font-size: 0.75rem;
        padding: 6px 10px;
        margin-left: 0 !important;
    }
}

/* --- Tablet (577–1024px) --- */
@media (min-width: 577px) and (max-width: 1024px) {
    .p-4.border-t.rounded-lg,
    .p-4.border-b {
        padding: 14px;
    }

    .p-4.border-t.rounded-lg .flex.items-center.gap-2,
    .p-4.border-b .flex.items-center.gap-2 {
        flex-wrap: wrap;
        gap: 8px;
    }

    .p-4.border-t.rounded-lg a,
    .p-4.border-b a {
        margin-left: 4px !important;
    }
}

/* ===================================================================
   4. FILTER / ACTION BUTTON GRIDS
      (Proxy pages: filter form + action buttons)
   =================================================================== */

/* --- Mobile (≤576px) --- */
@media (max-width: 576px) {
    /* Action buttons */
    .action-btn {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }

    /* Filter/action section */
    .p-4.flex.flex-col.gap-4 {
        padding: 10px !important;
        gap: 10px !important;
    }
}

/* --- Tablet --- */
@media (min-width: 577px) and (max-width: 1024px) {
    .action-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* ===================================================================
   5. TABLE ROWS AS CARDS ON MOBILE
      Used by VPS, Hosting, Separate, S3 pages
      Pattern: tr.flex.flex-col.sm\:table-row
   =================================================================== */
@media (max-width: 576px) {
    /* Each row becomes a card */
    tr.flex.flex-col {
        display: flex !important;
        flex-direction: column;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        margin-bottom: 8px;
        padding: 10px !important;
        background: #fff;
    }

    /* Cell inside card */
    tr.flex.flex-col > td {
        display: flex !important;
        padding: 4px 0 !important;
        border: none;
    }

    /* Static position for popover container in card mode */
    tr.flex.flex-col > td.relative {
        position: static;
    }

    /* Popover menu — center on mobile */
    tr.flex.flex-col .absolute.z-20 {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        right: auto !important;
        width: 280px !important;
        max-width: 90vw;
        z-index: 9999 !important;
    }
}

/* ===================================================================
   6. SEARCH INPUT — full width on mobile
   =================================================================== */
@media (max-width: 576px) {
    .relative.w-full input[type="text"],
    input#searchInput {
        width: 100% !important;
    }
}

/* ===================================================================
   7. VPS PAGE SPECIFICS
   =================================================================== */
@media (max-width: 576px) {
    #vpsPage {
        padding: 8px !important;
    }

    /* Mobile card list bottom space */
    #mobileVpsList {
        padding-bottom: 60px !important;
    }

    #mobileVpsList > div {
        border-radius: 8px;
    }
}

/* ===================================================================
   8. PROXY PAGES — force horizontal scroll for data tables
   =================================================================== */
@media (max-width: 576px) {
    form#proxyActionForm {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    form#proxyActionForm table {
        min-width: 700px;
    }

    /* Copy buttons */
    .copy-btn {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    /* Group header row: checkbox + date + copy buttons */
    .inline-flex.items-center.gap-2.text-blue-600 {
        flex-wrap: wrap;
        gap: 4px;
    }
}

@media (min-width: 577px) and (max-width: 1024px) {
    form#proxyActionForm {
        overflow-x: auto;
    }
}

/* ===================================================================
   9. PROXY RESIDENT ROTATE (dcx-* classes)
      Already has its own responsive at @media(max-width:768px).
      Add iPad-specific fixes here.
   =================================================================== */
@media (min-width: 577px) and (max-width: 1024px) {
    .dcx-actions {
        grid-template-columns: repeat(4, 1fr);
    }

    .dcx-filter form {
        flex-wrap: wrap;
    }

    .dcx-filter input[type="text"],
    .dcx-filter select {
        min-width: 160px;
    }
}

/* ===================================================================
   10. PAGINATION — wrap on small screens
   =================================================================== */
@media (max-width: 576px) {
    .flex.justify-center.py-4 ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .flex.justify-center.py-4 ul li a,
    .flex.justify-center.py-4 ul li span {
        min-width: 32px;
        text-align: center;
    }
}

/* ===================================================================
   11. OVERLAY & TOAST — viewport-safe
   =================================================================== */
#pageOverlay,
.fixed.inset-0 {
    width: 100vw;
    height: 100vh;
}

#toast-note {
    max-width: 90vw;
}

@media (max-width: 576px) {
    #toast-note {
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
        width: auto;
    }
}

/* ===================================================================
   12. HOSTING/S3 — excessive bottom padding (pb-52 = 208px)
   =================================================================== */
@media (max-width: 576px) {
    .pb-52 {
        padding-bottom: 80px !important;
    }
}

@media (min-width: 577px) and (max-width: 1024px) {
    .pb-52 {
        padding-bottom: 120px !important;
    }
}

/* ===================================================================
   13. EMPTY STATE — responsive sizing
   =================================================================== */
@media (max-width: 576px) {
    td[colspan] .text-xl {
        font-size: 1.1rem;
    }

    td[colspan] .text-gray-500 {
        font-size: 0.85rem;
    }

    td[colspan] a {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* ===================================================================
   14. SEPARATE PAGE — uses bg-gray-100 as outer wrapper instead of
       min-h-screen p-4 pattern. Standardise for consistency.
   =================================================================== */
@media (max-width: 576px) {
    .bg-gray-100 > .bg-white.rounded-lg.shadow-lg {
        border-radius: 8px;
        margin: 0;
    }

    .bg-gray-100 {
        padding: 8px;
    }
}

/* ===================================================================
   15. HOSTING TABLE — rows visible on iPad
       The hosting table uses flex.flex-col.sm:table-row.
       Tailwind sm = 640px → iPad mini (768px) shows table-row, which
       is correct. But the td cells use sm:px-6 sm:py-4 — ensure
       readable on tablet widths.
   =================================================================== */
@media (min-width: 577px) and (max-width: 1024px) {
    /* Tighter horizontal padding on tablet */
    .sm\:px-6 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ===================================================================
   16. POPOVER MENUS — prevent off-screen on tablet/iPad
   =================================================================== */
@media (min-width: 577px) and (max-width: 1024px) {
    .absolute.z-20.w-52 {
        max-width: calc(100vw - 32px);
    }
}

/* ===================================================================
   17. GENERAL MOBILE FIXES — ensure nothing overflows the viewport
   =================================================================== */
@media (max-width: 576px) {
    /* Prevent horizontal scrollbar on body */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }

    /* All card wrappers */
    .bg-white.rounded-lg.shadow-xl,
    .bg-white.rounded-lg.shadow-lg {
        border-radius: 8px;
        overflow: hidden;
    }

    /* Form elements full width */
    form .grid {
        width: 100%;
    }
}

/* ===================================================================
   18. SYSTEM-SHELL RESPONSIVE HARDENING
      Loaded by user/admin shells. Keep the rules conservative:
      - preserve horizontal scroll for dense tables
      - keep content reachable above sticky/fixed bottom bars
      - prevent grid children from forcing viewport overflow
   =================================================================== */
@media (max-width: 1180px), (hover: none) and (max-width: 1366px), (pointer: coarse) and (max-width: 1366px) {
    html,
    body {
        min-width: 0;
        max-width: 100vw;
        overscroll-behavior-y: contain;
    }

    body {
        overflow-x: hidden;
    }

    .grid,
    [class*="grid-cols-"],
    .flex,
    main,
    section,
    article,
    aside {
        min-width: 0;
    }

    .overflow-x-auto,
    .overflow-auto {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .overflow-x-auto > table,
    .overflow-auto > table {
        width: max-content;
        min-width: 100%;
    }

    main,
    .min-h-screen,
    .min-h-\[100dvh\],
    .domain-page,
    .proxy-page-body,
    .proxy-shell {
        scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom));
    }

    .fixed.bottom-0,
    .sticky.bottom-0 {
        max-width: 100vw;
    }

    html.vpsttt-shell-auto-height,
    html.vpsttt-shell-auto-height body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
    }

    html.vpsttt-shell-auto-height #app {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    html.vpsttt-shell-auto-height .vpsttt-frame-shell {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    html.vpsttt-shell-auto-height main,
    html.vpsttt-shell-auto-height #app > main,
    html.vpsttt-shell-auto-height main > .relative.flex-1,
    html.vpsttt-shell-auto-height .vpsttt-frame-main,
    html.vpsttt-shell-auto-height .vpsttt-frame-viewer-wrap {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    html.vpsttt-shell-auto-height main > .relative.flex-1,
    html.vpsttt-shell-auto-height .vpsttt-frame-viewer-wrap {
        flex: 0 0 auto !important;
    }

    html.vpsttt-shell-auto-height #viewer {
        display: block;
        min-height: 320px;
        width: 100%;
        overflow: hidden !important;
    }

    html.vpsttt-shell-frame-scroll,
    html.vpsttt-shell-frame-scroll body {
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html.vpsttt-shell-frame-scroll .vpsttt-frame-shell {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html.vpsttt-shell-frame-scroll .vpsttt-frame-main {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html.vpsttt-shell-frame-scroll .vpsttt-frame-viewer-wrap {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html.vpsttt-shell-frame-scroll #viewer {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        border: 0;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 577px) and (max-width: 1024px) {
    table th,
    table td {
        vertical-align: top;
    }

    .p-6 {
        padding: 1rem !important;
    }

    .gap-6 {
        gap: 1rem !important;
    }
}

@media (max-width: 576px) {
    .p-6,
    .p-5,
    .p-4 {
        padding: .85rem !important;
    }

    .gap-6,
    .gap-5,
    .gap-4 {
        gap: .75rem !important;
    }

    .fixed.bottom-0,
    .sticky.bottom-0 {
        padding-bottom: max(.75rem, env(safe-area-inset-bottom));
    }
}