/**
 * AIO Cine Productions - Mobile & Tablet Responsive Fixes
 * Fixes responsiveness issues across all pages for phones (<576px) and tablets (576-991px)
 */

/* ===== GLOBAL FIXES ===== */

/* Alert container - cap width on small screens */
@media (max-width: 575.98px) {
    #alert-container {
        left: 5px;
        right: 5px;
    }
    #alert-container .alert {
        max-width: 100% !important;
    }
}

/* Dropdown menus - prevent overflow on small screens */
@media (max-width: 575.98px) {
    .dropdown-menu.dropdown-menu-md {
        min-width: auto !important;
        width: calc(100vw - 20px);
    }
    .dropdown-menu.dropdown-menu-lg {
        min-width: auto !important;
        width: calc(100vw - 20px);
    }
}

/* ===== NAVBAR / TOP BAR ===== */

/* Top bar columns - stack on small phones */
@media (max-width: 575.98px) {
    .top-bar .col-md-7,
    .top-bar .col-md-5 {
        width: 100%;
        text-align: center !important;
    }
    .top-bar .col-md-5 .list-inline {
        justify-content: center;
    }
    .top-bar .fs-13 {
        font-size: 12px;
    }
}

/* Ensure tap targets are at least 44px */
@media (max-width: 767.98px) {
    .top-bar .list-inline-item a,
    .top-bar .list-inline-item .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===== SEARCH FORM (HERO) ===== */

/* Search form fields - stack on mobile */
@media (max-width: 991.98px) {
    .registration-form .row.g-0 > [class*="col-lg"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .registration-form .filter-search-form {
        margin-top: 8px !important;
    }
    .registration-form .submit-btn {
        border-radius: 8px !important;
        margin-top: 8px;
    }
    .registration-form .filter-border::before {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .registration-form .row.g-0 > [class*="col-lg"] {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ===== JOB LISTING PAGE ===== */

/* Results header - col-8/col-4 responsive fix */
@media (max-width: 575.98px) {
    .showing-of-results {
        font-size: 13px;
    }
    .jobs-listing-container .col-8,
    .jobs-listing-container .col-sm-8 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 8px;
    }
    .jobs-listing-container .col-4,
    .jobs-listing-container .col-sm-4 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .jobs-listing-container .toggle-views {
        justify-content: flex-start;
    }
    .jobs-listing-container .d-flex.justify-content-end {
        justify-content: flex-start !important;
    }
}

/* Job list item (list view) - better mobile card layout */
@media (max-width: 767.98px) {
    .job-box .row.align-items-center > [class*="col-md"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 4px;
    }
    .job-box .row.align-items-center > .col-md-2:first-child {
        width: auto;
        flex: 0 0 auto;
        max-width: none;
    }
    .job-box .row.align-items-center > .col-md-2:first-child + .col-md-3 {
        width: calc(100% - 75px);
        flex: 0 0 calc(100% - 75px);
        max-width: calc(100% - 75px);
    }
    .job-box .row.align-items-center {
        flex-wrap: wrap;
    }
    .job-box .row.align-items-center > .col-md-2:first-child {
        display: flex;
        align-items: center;
    }
    /* Footer row: tags + apply */
    .job-box .bg-light .col-md-10,
    .job-box .bg-light .col-lg-2,
    .job-box .bg-light .col-md-3 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .job-box .bg-light .col-lg-2 .text-start,
    .job-box .bg-light .col-md-3 .text-md-end {
        text-align: left !important;
        margin-top: 8px;
    }
    /* Tags wrapping */
    .job-box .badge {
        word-break: break-word;
    }
    .job-box .ms-4 {
        margin-left: 0 !important;
        margin-top: 6px;
    }
}

/* Job grid item - fix cramped layout */
@media (max-width: 575.98px) {
    .job-box .col-sm-2 {
        width: auto;
        flex: 0 0 auto;
    }
    .job-box .col-sm-10 {
        width: calc(100% - 75px);
        flex: 0 0 calc(100% - 75px);
    }
}

/* Map sidebar - fix 100vh issue */
@media (max-width: 991.98px) {
    .jobs-list-sidebar {
        display: none !important;
    }
}

.jobs-list-sidebar .bg-light[style*="height: 100vh"] {
    height: calc(100vh - 120px) !important;
    max-height: 600px;
}

/* Offcanvas map - better mobile width */
@media (max-width: 575.98px) {
    #offcanvas-jobs-map {
        --bs-offcanvas-width: 92vw !important;
    }
}

/* ===== JOB LIST HEADER (SEARCH/FILTER BAR) ===== */

@media (max-width: 575.98px) {
    .job-list-header .row.g-2 > [class*="col-md-6"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== JOB DETAIL PAGE ===== */

/* Sidebar on tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .section > .container > .row > .col-lg-8 {
        width: 58.333%;
        flex: 0 0 58.333%;
    }
    .section > .container > .row > .col-lg-4 {
        width: 41.667%;
        flex: 0 0 41.667%;
    }
}

/* Info boxes - 2 columns on tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
    .job-details-content .row.g-2 > .col-lg-6 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Sticky sidebar - adjust for mobile navbar */
@media (max-width: 767.98px) {
    .job-details-menu {
        position: relative !important;
        top: auto !important;
    }
}

/* ===== CANDIDATE PROFILE ===== */

/* Fix fullscreen overlay - reduce z-index, make dismissible on mobile */
@media (max-width: 767.98px) {
    .section > div[style*="position: fixed"][style*="z-index: 1050"] {
        z-index: 1040 !important;
    }
    /* Candidate sidebar - proper stacking */
    .candidate-details.ms-lg-4 {
        margin-left: 0 !important;
    }
}

/* ===== PRICING PAGE ===== */

/* Pricing cards on phones - single column */
@media (max-width: 575.98px) {
    .pricing-box {
        margin-bottom: 16px;
    }
    /* Monthly/yearly toggle - ensure it fits */
    .d-flex.gap-3 .form-switch {
        margin: 0 8px;
    }
}

/* ===== FAQ PAGE ===== */

/* FAQ tabs - horizontal scroll on mobile */
@media (max-width: 767.98px) {
    .faq-menu.nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .faq-menu.nav::-webkit-scrollbar {
        display: none;
    }
    .faq-menu.nav .nav-item {
        flex-shrink: 0;
    }
    .faq-menu.nav .nav-link {
        white-space: nowrap;
        padding: 8px 16px;
        font-size: 14px;
    }
    /* FAQ columns - single column on mobile */
    .tab-pane .row > .col-lg-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== BLOG PAGES ===== */

/* Blog listing sidebar - stack on tablets */
@media (max-width: 767.98px) {
    .blog-post + .col-lg-4,
    .section .col-md-7,
    .section .col-md-5 {
        /* Let Bootstrap handle full-width stacking */
    }
    /* Blog cards single column on phones */
    .blog-post .col-lg-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== FEATURED NEWS (HOME) ===== */

@media (max-width: 575.98px) {
    .blog-box .col-lg-4.col-md-6,
    .row > .col-lg-4.col-md-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== FEATURED COMPANIES ===== */

/* Larger logos on small phones */
@media (max-width: 400px) {
    .row > .col-4[class*="col-lg-2"] {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ===== HOW IT WORKS ===== */

@media (max-width: 991.98px) {
    .process-menu .nav-link {
        margin-bottom: 12px;
        padding: 8px 0;
    }
}

/* ===== CONTACT FORM ===== */

@media (max-width: 991.98px) {
    .section .col-lg-5.ms-auto {
        margin-left: 0 !important;
        margin-bottom: 24px;
    }
}

/* ===== ACCOUNT / DASHBOARD PAGES ===== */

/* Form date fields - full width on phones */
@media (max-width: 575.98px) {
    .form-group .col-6,
    form .row > .col-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Dashboard sidebar - better tablet layout */
@media (min-width: 768px) and (max-width: 991.98px) {
    .profile-sidebar.col-lg-4 {
        width: 33.333%;
        flex: 0 0 33.333%;
    }
    .col-lg-8:has(.candidate-details),
    .col-lg-8:has(.card) {
        width: 66.667%;
        flex: 0 0 66.667%;
    }
}

/* Profile tabs - scrollable on mobile */
@media (max-width: 575.98px) {
    .profile-content-nav.nav-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
    }
    .profile-content-nav.nav-pills::-webkit-scrollbar {
        display: none;
    }
    .profile-content-nav .nav-link {
        white-space: nowrap;
        padding: 10px 16px;
    }
}

/* Applied/Saved jobs - fix column widths */
@media (max-width: 991.98px) {
    .col-lg-1, .col-lg-9, .col-lg-2 {
        /* Stacks on mobile by default - OK */
    }
}

@media (max-width: 767.98px) {
    /* Make job listing cards in dashboard more compact */
    .card-body .row > .col-lg-1 {
        width: auto;
        flex: 0 0 auto;
        max-width: none;
    }
    .card-body .row > .col-lg-9 {
        width: calc(100% - 60px);
        flex: 0 0 calc(100% - 60px);
    }
    .card-body .row > .col-lg-2 {
        width: 100%;
        margin-top: 8px;
    }
}

/* Settings form - 2 columns on tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .col-lg-6:has(.form-group),
    .col-lg-6:has(.form-control) {
        width: 50%;
        flex: 0 0 50%;
    }
}

/* Avatar crop modal - stack on phones */
@media (max-width: 575.98px) {
    .modal-body .col-md-9,
    .modal-body .col-md-3 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== AUTH PAGES (Login/Register) ===== */

/* Hide decorative image on small phones to save space */
@media (max-width: 575.98px) {
    .auth-bg .d-none.d-lg-block {
        display: none !important;
    }
}

/* ===== HERO SECTION PADDING ===== */

@media (max-width: 480px) {
    .bg-home {
        padding: 120px 0 80px 0 !important;
    }
    .bg-home2 {
        padding: 80px 0 40px 0 !important;
    }
    .bg-home3 {
        padding: 80px 0 40px 0 !important;
    }
}

/* ===== TESTIMONIALS ===== */

@media (max-width: 767.98px) {
    .testimonial-box .card-body {
        padding: 16px !important;
    }
}

/* ===== BREADCRUMBS ===== */

@media (max-width: 575.98px) {
    .breadcrumb {
        flex-wrap: wrap;
        font-size: 13px;
    }
    .page-header-title h4 {
        font-size: 1.2rem;
    }
}

/* ===== GENERAL TYPOGRAPHY FOR MOBILE ===== */

@media (max-width: 575.98px) {
    /* Increase base font size for readability on phones */
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevents iOS zoom on input focus */
    }

    /* Ensure cards don't have excessive padding */
    .card-body.p-4 {
        padding: 16px !important;
    }

    /* Section padding reduction on extra small phones */
    .section {
        padding: 40px 0;
    }
}

/* ===== BACK TO TOP BUTTON ===== */

@media (max-width: 575.98px) {
    #back-to-top {
        bottom: 20px !important;
        right: 15px !important;
        width: 36px;
        height: 36px;
    }
}

/* ===== MAP POPUP TABLE ===== */

.infomarker table {
    width: 100%;
    table-layout: fixed;
}
.infomarker table td:first-child {
    width: 50px;
}
.infomarker table td {
    word-break: break-word;
}

/* ===== TRUST BAR ===== */

@media (max-width: 480px) {
    .trust-bar .col-6 {
        font-size: 12px;
    }
    .trust-bar .mdi {
        font-size: 1.1rem !important;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .top-bar,
    .navbar,
    #back-to-top,
    .offcanvas {
        display: none !important;
    }
}