/**
 * Mobile Enhancements for PBRP Website
 * Additional mobile-specific improvements beyond base responsive styles
 */

/* ========================================
   Main Site Navigation Mobile Fix
   ======================================== */

@media (max-width: 991px) {
    /* Override hidden navbar - make it visible! */
    .zelda-nav {
        display: block !important;
    }

    /* Fix navbar toggle button visibility */
    .zelda-nav .navbar-toggler {
        display: block !important;
        padding: 10px 12px !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        z-index: 10001 !important;
        position: relative !important;
    }

    .zelda-nav .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        width: 24px !important;
        height: 24px !important;
    }

    .zelda-nav .navbar-toggler:focus,
    .zelda-nav .navbar-toggler:active {
        box-shadow: 0 0 0 0.25rem rgba(255, 82, 8, 0.25) !important;
        border-color: var(--accent-color) !important;
    }

    /* Ensure navbar brand and toggler are visible */
    .zelda-nav .navbar {
        padding: 15px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .zelda-nav .navbar-brand {
        font-size: 1.25rem !important;
        z-index: 1000;
        order: 1;
        max-width: calc(100% - 80px) !important;
    }

    .zelda-nav .navbar-brand h2 {
        font-size: 1.15rem !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Position toggler button to top right */
    .zelda-nav .navbar-toggler {
        order: 2;
        margin-left: auto !important;
        transition: opacity 0.3s ease !important;
    }

    /* Hide hamburger when menu is open */
    .zelda-nav .navbar-toggler[aria-expanded="true"] {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Mobile menu - slide in from right */
    .zelda-nav .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        right: -300px !important;
        width: 300px !important;
        height: 100vh !important;
        background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.8) !important;
        transition: right 0.3s ease !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .zelda-nav .navbar-collapse.show,
    .zelda-nav .navbar-collapse.collapsing {
        right: 0 !important;
    }
}

    /* Mobile menu overlay and navigation styles */
    @media (max-width: 991px) {
        .zelda-nav .navbar-collapse::before {
            content: '';
            position: fixed;
            top: 0;
            left: -100vw;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.7);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .zelda-nav .navbar-collapse.show::before {
            opacity: 1;
        }

        /* Mobile close button styling - only show when menu is open */
        .zelda-nav .mobile-close-btn {
            position: fixed !important;
            top: 20px !important;
            right: 20px !important;
            width: 40px !important;
            height: 40px !important;
            background: rgba(255, 255, 255, 0.1) !important;
            border: 2px solid rgba(255, 255, 255, 0.2) !important;
            border-radius: 50% !important;
            display: none !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.3s ease !important;
            z-index: 10002 !important;
            cursor: pointer !important;
        }

        /* Show close button only when navbar is open */
        .zelda-nav .navbar-collapse.show .mobile-close-btn {
            display: flex !important;
        }

        .zelda-nav .mobile-close-btn i {
            font-size: 28px !important;
            color: #fff !important;
            line-height: 1 !important;
        }

        .zelda-nav .mobile-close-btn:hover {
            background: var(--accent-color) !important;
            border-color: var(--accent-color) !important;
            transform: rotate(90deg) !important;
        }

        .zelda-nav .navbar-nav {
            gap: 8px;
            flex-direction: column !important;
            padding: 80px 20px 20px 20px !important;
            flex: 1;
        }

        .zelda-nav .navbar-nav .nav-item {
            width: 100%;
            margin: 0 !important;
        }

        .zelda-nav .navbar-nav .nav-link {
            padding: 14px 16px !important;
            border-radius: 8px !important;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            width: 100%;
            font-size: 15px !important;
        }

        .zelda-nav .navbar-nav .nav-link i {
            margin-right: 10px;
            font-size: 18px;
        }

        .zelda-nav .navbar-nav .nav-link:hover {
            background: rgba(255, 82, 8, 0.1) !important;
            padding-left: 20px !important;
        }

        .zelda-nav .navbar-nav .nav-link.active {
            background: var(--accent-color) !important;
        }

        /* Login button in mobile menu */
        .zelda-nav .navbar-nav .btn-primary {
            width: 100% !important;
            justify-content: center !important;
            margin-top: 10px !important;
        }

        /* Dropdown toggles in mobile menu */
        .zelda-nav .navbar-nav .dropdown-toggle {
            cursor: pointer !important;
        }

        .zelda-nav .navbar-nav .dropdown-toggle::after {
            margin-left: auto !important;
        }

        /* User dropdown styling */
        .zelda-nav .navbar-nav .dropdown-toggle[id="userDropdown"] {
            background: rgba(255, 82, 8, 0.15) !important;
            border: 1px solid rgba(255, 82, 8, 0.3) !important;
        }

        .zelda-nav .navbar-nav .dropdown-toggle img {
            border: 2px solid var(--accent-color);
        }

        /* Dropdown menus in mobile */
        .zelda-nav .navbar-nav .dropdown-menu {
            position: static !important;
            transform: none !important;
            box-shadow: none !important;
            border: none !important;
            background: rgba(255, 255, 255, 0.05) !important;
            margin: 8px 0 !important;
            padding: 8px !important;
            border-radius: 8px !important;
            display: none !important;
        }

        .zelda-nav .navbar-nav .dropdown-menu.show {
            display: block !important;
        }

        .zelda-nav .navbar-nav .dropdown-menu .dropdown-item {
            color: #fff !important;
            padding: 12px 16px !important;
            border-radius: 6px !important;
            display: flex !important;
            align-items: center !important;
            font-size: 14px !important;
        }

        .zelda-nav .navbar-nav .dropdown-menu .dropdown-item i {
            margin-right: 12px !important;
            font-size: 16px !important;
            width: 20px;
        }

        .zelda-nav .navbar-nav .dropdown-menu .dropdown-item:hover {
            background: rgba(255, 82, 8, 0.2) !important;
            padding-left: 20px !important;
        }

        .zelda-nav .navbar-nav .dropdown-menu .dropdown-divider {
            border-color: rgba(255, 255, 255, 0.1) !important;
            margin: 8px 0 !important;
        }

        /* Prevent body scroll when menu is open */
        body.menu-open {
            overflow: hidden;
        }
    }
}

/* Hide mobile close button on desktop - MUST come after mobile styles */
@media (min-width: 992px) {
    .mobile-close-btn-wrapper,
    .nav-item.mobile-close-btn-wrapper,
    li.mobile-close-btn-wrapper,
    .mobile-close-btn,
    .zelda-nav .mobile-close-btn,
    .navbar-collapse .mobile-close-btn,
    .navbar-nav .mobile-close-btn,
    button.mobile-close-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* ========================================
   Homepage Centering Fix
   ======================================== */

@media (max-width: 768px) {
    /* Center hero content */
    .main-banner .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .main-banner .banner-content {
        text-align: center !important;
        padding: 0 10px;
    }

    .main-banner .banner-content h1 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .main-banner .banner-content p {
        font-size: 0.95rem !important;
        margin-bottom: 25px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Hero stats - stack vertically on mobile */
    .hero-stats .row {
        gap: 15px !important;
        justify-content: center !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .hero-stats .col-6,
    .hero-stats .col-md-auto {
        flex: 0 0 100% !important;
        max-width: 280px !important;
        padding: 0 !important;
    }

    .stat-card {
        padding: 20px !important;
        min-height: auto !important;
        width: 100% !important;
    }

    .stat-icon {
        font-size: 2.5rem !important;
        margin-bottom: 12px !important;
    }

    .stat-value {
        font-size: 1.5rem !important;
    }

    .stat-label {
        font-size: 13px !important;
    }

    /* Features section */
    .single-features-box {
        margin-bottom: 20px;
        padding: 20px !important;
    }

    .single-features-box .icon {
        font-size: 2.5rem !important;
        margin-bottom: 15px !important;
    }

    .single-features-box h3 {
        font-size: 1.1rem !important;
    }

    .single-features-box p {
        font-size: 14px !important;
    }

    /* Section padding */
    .ptb-100 {
        padding: 50px 0 !important;
    }

    .pb-100 {
        padding-bottom: 50px !important;
    }

    /* Blog/Announcement cards */
    .single-blog-post {
        margin-bottom: 20px;
    }

    .post-content h3 {
        font-size: 1.1rem !important;
    }

    .post-content p {
        font-size: 14px !important;
    }
}

/* ========================================
   Admin Panel Mobile Enhancements
   ======================================== */

@media (max-width: 768px) {
    /* Admin header more compact */
    .admin-header {
        padding: 10px 15px !important;
        flex-wrap: wrap;
    }

    .admin-header h3 {
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

    .admin-header .header-left,
    .admin-header .header-right {
        flex: 1 1 auto;
    }

    .admin-header .user-info {
        flex-direction: column;
        align-items: flex-end !important;
        font-size: 12px;
    }

    .admin-header .user-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    /* Admin main content padding */
    .admin-main {
        padding: 15px !important;
    }

    /* Admin cards compact */
    .card {
        margin-bottom: 15px;
    }

    .card-header {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }

    .card-body {
        padding: 15px !important;
    }

    /* Page header compact */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px;
        margin-bottom: 20px !important;
    }

    .page-header h1 {
        font-size: 1.5rem !important;
    }

    .page-header .btn {
        width: 100%;
        margin-top: 10px;
    }

    /* Stats cards on mobile */
    .stats-card {
        padding: 20px 15px !important;
        margin-bottom: 15px !important;
    }

    .stats-card .icon {
        font-size: 2rem !important;
    }

    .stats-card h3 {
        font-size: 1.75rem !important;
    }

    .stats-card p {
        font-size: 12px !important;
        margin: 0 !important;
    }
}

/* ========================================
   Ticket System Mobile Enhancements
   ======================================== */

@media (max-width: 768px) {
    /* Ticket modal full screen on mobile */
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100vh !important;
    }

    .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .modal-header {
        position: sticky;
        top: 0;
        z-index: 1050;
        background: var(--bg-card, #18181f);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 15px !important;
    }

    .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 1050;
        background: var(--bg-card, #18181f);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Ticket messages */
    .messages-container {
        max-height: none !important;
        margin-bottom: 15px;
    }

    .message {
        padding: 12px !important;
        margin-bottom: 10px !important;
        max-width: 85% !important;
    }

    .message-text {
        font-size: 14px !important;
        word-break: break-word;
    }

    .message-time {
        font-size: 11px !important;
    }

    /* Ticket reply form */
    .reply-form textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        min-height: 100px !important;
    }

    .reply-form .btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* Ticket meta info stack vertically */
    .ticket-meta-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .ticket-meta-item {
        padding: 10px !important;
    }

    /* File attachments */
    .message-attachments {
        flex-wrap: wrap;
    }

    .attachment {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    .attachment-preview {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ========================================
   DataTables Mobile Enhancements
   ======================================== */

@media (max-width: 768px) {
    /* DataTables controls stack */
    .dataTables_wrapper .row {
        margin-bottom: 10px;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        margin: 8px 0 !important;
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-top: 5px;
        font-size: 14px;
    }

    /* Pagination buttons larger */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 8px 12px !important;
        margin: 2px !important;
        font-size: 14px !important;
    }

    /* Table actions */
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }

    .action-buttons .btn {
        width: 100% !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    /* Hide less important columns on mobile */
    .dtr-hidden {
        display: none !important;
    }
}

/* ========================================
   Forms Mobile Enhancements
   ======================================== */

@media (max-width: 768px) {
    /* Form groups stack better */
    .row.g-3 > div,
    .row.g-2 > div {
        margin-bottom: 15px !important;
    }

    /* Label improvements */
    .form-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
    }

    /* Help text */
    .form-text,
    small.text-muted {
        font-size: 12px !important;
        display: block;
        margin-top: 5px;
    }

    /* Color pickers on mobile */
    input[type="color"] {
        width: 100% !important;
        height: 50px !important;
        border-radius: 8px;
        border: 2px solid rgba(255, 255, 255, 0.1);
    }

    /* File inputs */
    input[type="file"] {
        font-size: 14px !important;
        padding: 10px !important;
    }

    /* Range sliders */
    input[type="range"] {
        width: 100% !important;
        height: 40px !important;
    }

    /* Switch toggles larger */
    .form-switch .form-check-input {
        width: 50px !important;
        height: 26px !important;
    }
}

/* ========================================
   Badge Display Mobile
   ======================================== */

@media (max-width: 768px) {
    /* User badges in profile */
    .user-badge-item {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }

    .user-badge-item i {
        font-size: 16px !important;
    }

    /* Badges list wrapping */
    .badges-list {
        gap: 8px !important;
        padding: 10px !important;
    }

    /* Badge grid in admin */
    .badge-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .badge-card {
        padding: 15px !important;
    }

    .badge-card-icon {
        font-size: 1.5rem !important;
    }

    .badge-card-actions {
        flex-direction: column;
    }

    .badge-card-actions .btn {
        width: 100% !important;
        margin-bottom: 5px;
    }
}

/* ========================================
   Profile Page Mobile
   ======================================== */

@media (max-width: 768px) {
    /* Profile header */
    .profile-header {
        padding: 15px !important;
    }

    .profile-banner {
        height: 120px !important;
        border-radius: 8px !important;
    }

    .profile-avatar {
        width: 70px !important;
        height: 70px !important;
        margin-top: -35px !important;
        border-width: 3px !important;
    }

    .profile-info {
        text-align: center;
        margin-top: 10px;
    }

    .profile-username {
        font-size: 1.25rem !important;
    }

    .profile-motto {
        font-size: 13px !important;
    }

    .profile-stats {
        flex-direction: column;
        gap: 10px !important;
    }

    .profile-stat {
        text-align: center;
        padding: 10px !important;
    }

    .profile-stat-value {
        font-size: 1.5rem !important;
    }

    .profile-stat-label {
        font-size: 12px !important;
    }

    /* Profile tabs */
    .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        padding: 10px 15px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   Application Form Mobile
   ======================================== */

@media (max-width: 768px) {
    /* Application steps */
    .application-steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .step-item {
        padding: 10px !important;
        font-size: 12px !important;
    }

    .step-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    /* Question containers */
    .application-question {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }

    .question-label {
        font-size: 14px !important;
    }

    /* Character counter */
    .char-counter {
        font-size: 11px !important;
    }

    /* Navigation buttons */
    .application-nav-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .application-nav-buttons .btn {
        width: 100% !important;
    }
}

/* ========================================
   Alerts & Notifications Mobile
   ======================================== */

@media (max-width: 768px) {
    .alert {
        padding: 12px !important;
        font-size: 14px !important;
        border-radius: 8px;
    }

    .alert i {
        font-size: 18px !important;
    }

    .alert-heading {
        font-size: 16px !important;
    }

    /* Toast notifications */
    .toast {
        max-width: calc(100% - 20px) !important;
        margin: 10px !important;
    }

    .toast-header {
        font-size: 14px !important;
    }

    .toast-body {
        font-size: 13px !important;
    }
}

/* ========================================
   SweetAlert Mobile
   ======================================== */

@media (max-width: 768px) {
    .swal2-popup {
        width: calc(100% - 30px) !important;
        padding: 20px !important;
        font-size: 14px !important;
    }

    .swal2-title {
        font-size: 1.25rem !important;
        padding: 10px 0 !important;
    }

    .swal2-html-container {
        font-size: 14px !important;
    }

    .swal2-actions button {
        font-size: 14px !important;
        padding: 10px 20px !important;
        margin: 5px !important;
    }
}

/* ========================================
   Dropdown Menus Mobile
   ======================================== */

@media (max-width: 768px) {
    .dropdown-menu {
        min-width: 250px !important;
        font-size: 14px !important;
    }

    .dropdown-item {
        padding: 12px 20px !important;
    }

    .dropdown-item i {
        margin-right: 10px;
        width: 20px;
    }

    .dropdown-divider {
        margin: 8px 0 !important;
    }
}

/* ========================================
   Search & Filters Mobile
   ======================================== */

@media (max-width: 768px) {
    /* Search bars */
    .search-bar {
        padding: 15px !important;
        border-radius: 12px;
    }

    .search-bar .form-control {
        font-size: 14px !important;
        padding: 10px 15px !important;
    }

    .search-bar .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* Filter groups */
    .filter-group {
        margin-bottom: 15px;
    }

    .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-buttons .btn {
        font-size: 13px !important;
        padding: 8px 16px !important;
    }
}

/* ========================================
   User List Mobile
   ======================================== */

@media (max-width: 768px) {
    /* User cards */
    .user-card {
        padding: 15px !important;
        margin-bottom: 12px !important;
    }

    .user-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }

    .user-card-avatar {
        width: 50px !important;
        height: 50px !important;
    }

    .user-card-info {
        flex: 1;
    }

    .user-card-username {
        font-size: 15px !important;
    }

    .user-card-role {
        font-size: 11px !important;
    }

    .user-card-actions {
        width: 100%;
        justify-content: space-between;
    }

    .user-card-actions .btn {
        flex: 1;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}

/* ========================================
   Members Grid Mobile
   ======================================== */

@media (max-width: 768px) {
    .members-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .member-card {
        padding: 15px !important;
    }

    .member-avatar {
        width: 60px !important;
        height: 60px !important;
    }

    .member-name {
        font-size: 15px !important;
    }

    .member-role {
        font-size: 12px !important;
    }
}

/* ========================================
   Accessibility Enhancements
   ======================================== */

@media (max-width: 768px) {
    /* Larger focus indicators for mobile */
    *:focus-visible {
        outline: 3px solid var(--accent, #ff5208) !important;
        outline-offset: 2px;
    }

    /* Better contrast for links */
    a {
        color: #60a5fa;
        text-decoration: underline;
    }

    a:hover,
    a:focus {
        color: #93c5fd;
    }
}

/* ========================================
   Performance Optimizations
   ======================================== */

@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Optimize images */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   Landscape Mobile (Max 768px height)
   ======================================== */

@media (max-height: 768px) and (orientation: landscape) {
    /* Reduce vertical padding in landscape */
    .modal-body {
        padding: 10px 15px !important;
    }

    .admin-main {
        padding: 10px !important;
    }

    .card-body {
        padding: 10px !important;
    }

    /* Compact header */
    .admin-header {
        padding: 8px 15px !important;
    }

    /* Reduce section spacing */
    .mb-4 {
        margin-bottom: 15px !important;
    }

    .mt-4 {
        margin-top: 15px !important;
    }
}

/* ========================================
   Pull-to-Refresh Prevention
   ======================================== */

@media (max-width: 768px) {
    /* Prevent overscroll on body */
    body {
        overscroll-behavior-y: contain;
    }

    /* Prevent pull-to-refresh on main scrollable areas */
    .admin-main,
    .modal-body,
    .messages-container {
        overscroll-behavior: contain;
    }
}

/* ========================================
   Safe Area Insets (for notched devices)
   ======================================== */

@media (max-width: 768px) {
    /* iOS safe areas */
    @supports (padding: max(0px)) {
        .admin-header {
            padding-left: max(15px, env(safe-area-inset-left));
            padding-right: max(15px, env(safe-area-inset-right));
        }

        .admin-main {
            padding-left: max(15px, env(safe-area-inset-left));
            padding-right: max(15px, env(safe-area-inset-right));
            padding-bottom: max(15px, env(safe-area-inset-bottom));
        }

        .modal-body {
            padding-left: max(15px, env(safe-area-inset-left));
            padding-right: max(15px, env(safe-area-inset-right));
        }
    }
}