@media (max-width: 767px) {
    body.mobile-complaint-page {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
        background: #f7f8fa;
        font-family: "Poppins", "Potro Sans Bangla", sans-serif;
    }

    body.mobile-complaint-page #navbar_top,
    body.mobile-complaint-page footer {
        display: none !important;
    }

    body.mobile-complaint-page #content {
        padding-top: 0 !important;
    }

    body.mobile-complaint-page .footer_nav ul li:first-child a { color: #aaa; font-weight: 400; }
    body.mobile-complaint-page .footer_nav ul li:first-child i { background: transparent; }
    body.mobile-complaint-page .footer_nav ul li:nth-child(3) a { color: #d9821b; font-weight: 700; }
    body.mobile-complaint-page .footer_nav ul li:nth-child(3) i { background: #fff2e3; border-radius: 12px; }

    .mobile-complaint-header {
        position: sticky;
        top: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        align-items: center;
        gap: 8px;
        min-height: 72px;
        padding: 8px 14px;
        border-bottom: 1px solid #eff0f2;
        background: #fff;
    }

    .mobile-complaint-header > a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 42px;
        height: 42px;
        color: #111;
        font-size: 20px;
    }

    .mobile-complaint-header h1 {
        margin: 0;
        color: #111;
        font-size: 19px;
        font-weight: 700;
        text-align: center;
    }

    .mobile-complaint-verify-header h1 {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        border-radius: 28px;
        background: #263f88;
        color: #fff;
        font-size: 16px;
    }

    .mobile-complaint-verify-header > a { font-size: 21px; }

    .mobile-complaint-page .auth-section {
        min-height: calc(100vh - 72px);
        margin: 0;
        padding: 24px 0 30px;
        background: #f7f8fa;
    }

    .mobile-complaint-page .auth-section > .container {
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
    }

    .mobile-complaint-page .auth-section .row { margin: 0; }
    .mobile-complaint-page .auth-section .col-sm-5 { width: 100%; padding: 0; }
    .mobile-complaint-page .form-content { margin: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .mobile-complaint-page .desktop-complaint-title,
    .mobile-complaint-page .desktop-complaint-intro { display: none; }
    .mobile-complaint-page .mobile-complaint-intro { display: block; padding: 0 0 4px; color: #30313a; font-family: "Potro Sans Bangla", sans-serif; font-size: 16px; line-height: 1.72; }
    .mobile-complaint-page .mobile-complaint-intro p { margin: 0 0 13px; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; }
    .mobile-complaint-page .mobile-complaint-intro .mobile-complaint-warning { margin-top: 17px; color: #d85d58; font-weight: 700; }
    .mobile-complaint-page .form-content form { padding: 0; }
    .mobile-complaint-page .form-content form .form-group { margin-bottom: 17px !important; }
    .mobile-complaint-page .form-content form label { display: block; margin: 0 0 9px; color: #232630; font-size: 15px; font-weight: 700; }
    .mobile-complaint-page .form-content form input:not([type="hidden"]),
    .mobile-complaint-page .form-content form textarea { display: block; width: 100%; min-height: 58px; padding: 14px 16px; border: 1px solid #eceef1 !important; border-radius: 13px; background: #fff; color: #252730; font-family: "Poppins", "Potro Sans Bangla", sans-serif; font-size: 16px; line-height: 1.5; box-shadow: none !important; }
    .mobile-complaint-page .form-content form textarea { min-height: 150px; resize: vertical; }
    .mobile-complaint-page .form-content form input[type="file"] { height: 62px; padding: 12px; color: #727681; font-size: 14px; }
    .mobile-complaint-page .form-content form input[type="file"]::file-selector-button { height: 38px; margin: 0 13px 0 0; padding: 0 12px; border: 0; border-radius: 7px; background: #f2f3f5; color: #252730; font: inherit; }
    .mobile-complaint-page .form-content form .is-invalid { border-color: #dc3545 !important; }
    .mobile-complaint-counter { margin: 4px 18px 0 0; color: #737782; font-size: 12px; text-align: right; }
    .mobile-complaint-file-help { display: block; margin-top: 5px; color: #777b84; font-size: 12px; }
    .mobile-complaint-page .form-content form .submit-btn { display: block; width: 100%; min-height: 58px; margin: 5px 0 0; border: 0; border-radius: 12px; background: #d92578; color: #fff; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase; box-shadow: 0 3px 7px rgba(32, 26, 43, .18); }
    .mobile-complaint-banner { display: block; margin: 0 0 20px; padding: 16px 10px; background: #263f88; color: #fff; font-size: 17px; font-weight: 700; text-align: center; }
    .mobile-complaint-form-page .auth-section { padding-top: 8px; }
    .mobile-complaint-form-page .form-content .form-group > .col-sm-12 { padding: 0; }

    .mobile-complaints-page { display: block; min-height: calc(100vh - 76px); background: #f7f8fa; }
    .mobile-complaints-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; align-items: center; min-height: 82px; padding: 0 22px; background: #fff; border-bottom: 1px solid #eff0f2; }
    .mobile-complaints-header h1 { margin: 0; color: #111; font-size: 20px; font-weight: 700; text-align: center; }
    .mobile-complaints-count { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #f49b08; color: #fff; font-size: 15px; font-weight: 700; }
    .mobile-complaints-add-icon { display: flex; align-items: center; justify-content: center; justify-self: end; width: 40px; height: 40px; border: 2px solid #111; border-radius: 50%; color: #111; font-size: 20px; }
    .mobile-complaint-filters { display: flex; padding: 20px 20px 0; }
    .mobile-complaint-filters button { min-width: 68px; min-height: 68px; padding: 0 16px; border: 0; border-radius: 28px; background: #f49b08; color: #fff; font-size: 15px; font-weight: 700; }
    .mobile-complaints-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 290px); padding: 30px 18px 52px; text-align: center; }
    .mobile-complaints-empty > i { margin-bottom: 49px; color: #c9cacc; font-size: 112px; }
    .mobile-complaints-empty > strong { margin-bottom: 51px; color: #999; font-size: 20px; font-weight: 700; }
    .mobile-complaints-empty > a { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 205px; min-height: 60px; padding: 0 20px; border-radius: 25px; background: #f49b08; color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 3px 6px rgba(95, 75, 28, .18); }
    .mobile-complaint-cards { display: grid; gap: 12px; padding: 18px 16px 24px; }
    .mobile-complaint-card { position: relative; display: grid; gap: 7px; padding: 16px; border: 1px solid #eceef1; border-radius: 17px; background: #fff; box-shadow: 0 4px 14px rgba(30, 38, 55, .04); }
    .mobile-complaint-card > strong { padding-right: 100px; color: #20232b; font-size: 15px; }
    .mobile-complaint-card time { color: #8b8f98; font-size: 12px; }
    .mobile-complaint-card p { color: #4e535e; font-size: 13px; line-height: 1.5; }
    .mobile-complaint-card-status { position: absolute; top: 14px; right: 14px; padding: 5px 9px; border-radius: 18px; background: #fff1d8; color: #c47b00; font-size: 11px; font-weight: 700; }
    .mobile-complaint-card-status.status-2 { background: #e9f3ff; color: #2872b8; }
    .mobile-complaint-card-status.status-3 { background: #e6f8ec; color: #26934c; }
    .mobile-complaint-card-link { justify-self: end; color: #e88f00; font-size: 12px; font-weight: 600; }
    .mobile-complaint-card-link i { margin-left: 5px; }

    .desktop-complaint-list { display: none !important; }
    .mobile-complaint-details-page .customer-section { margin: 0; padding: 14px 12px 25px; }
    .mobile-complaint-details-page .customer-section > .container { width: 100%; max-width: 100%; padding: 0; }
    .mobile-complaint-details-page .customer-section .row { margin: 0; }
    .mobile-complaint-details-page .customer-section .col-sm-3 { display: none; }
    .mobile-complaint-details-page .customer-section .col-sm-9 { width: 100%; padding: 0; }
    .mobile-complaint-details-page .customer-content { padding: 18px; border: 1px solid #eceef1; border-radius: 17px; background: #fff; box-shadow: 0 4px 15px rgba(30, 38, 55, .05); }
    .mobile-complaint-details-page .customer-content .card { border: 0; box-shadow: none !important; }
    .mobile-complaint-details-page .customer-content .card-header { padding: 14px 16px; border-radius: 10px; background: #263f88 !important; }
    .mobile-complaint-details-page .customer-content .card-header h4 { color: #fff; font-size: 17px; }
    .mobile-complaint-details-page .customer-content .card-body { padding: 18px 2px 5px; }
    .mobile-complaint-details-page .customer-content .card-body img { width: 100%; height: 110px; object-fit: contain; }
    .mobile-complaint-details-page .customer-content video { max-height: 300px; }
}

@media (min-width: 768px) {
    .mobile-complaint-header,
    .mobile-complaint-intro,
    .mobile-complaint-banner,
    .mobile-complaints-page { display: none; }
}

@media (max-width: 767px) {
    .mobile-complaint-page .form-content form select { display: block; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid #eceef1 !important; border-radius: 13px; background: #fff; color: #252730; font-family: "Poppins", "Potro Sans Bangla", sans-serif; font-size: 14px; box-shadow: none !important; }
}
@media (min-width: 768px) {
    body.mobile-complaint-form-page .auth-section { padding: 32px 0 48px; }
    body.mobile-complaint-form-page .auth-section .col-sm-5 { flex: 0 0 100%; max-width: 680px; }
    body.mobile-complaint-form-page .form-content { overflow: hidden; padding: 0; border: 1px solid #e7ebf1; border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(23,32,51,.06); }
    body.mobile-complaint-form-page .desktop-complaint-title { margin: 0; padding: 20px 26px; border-radius: 0; background: #00aef0; color: #fff; font-size: 18px; font-weight: 600; text-align: left; }
    body.mobile-complaint-form-page .form-content form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding: 26px; }
    body.mobile-complaint-form-page .form-content form > :not(.complaint-media-field) { grid-column: 1 / -1; }
    body.mobile-complaint-form-page .form-content form > .col-sm-12 { min-width: 0; width: auto; padding: 0; }
    body.mobile-complaint-form-page .form-content .form-group { margin-bottom: 0 !important; }
    body.mobile-complaint-form-page .form-content label { display: block; margin-bottom: 8px; color: #273345; font-size: 13px; font-weight: 600; }
    body.mobile-complaint-form-page .form-content .form-control { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #e0e5ed; border-radius: 10px; background: #f8f9fb; color: #273345; font-family: Poppins,sans-serif; font-size: 13px; box-shadow: none; }
    body.mobile-complaint-form-page .form-content .form-control:focus { border-color: #ed145b; background-color: #fff; box-shadow: 0 0 0 3px rgba(237,20,91,.08); }
    body.mobile-complaint-form-page .form-content select.form-control { height: 48px; padding-right: 42px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23818b9c' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; cursor: pointer; }
    body.mobile-complaint-form-page .form-content textarea.form-control { min-height: 135px; line-height: 1.65; resize: vertical; }
    body.mobile-complaint-form-page .form-content textarea::placeholder { color: #949dac; font-size: 13px; }
    body.mobile-complaint-form-page .mobile-complaint-counter { margin-top: 5px; color: #949dac; font-size: 11px; text-align: right; }
    body.mobile-complaint-form-page .complaint-media-field,body.mobile-complaint-form-page .complaint-video-field { padding: 14px !important; border: 1px solid #edf0f4; border-radius: 12px; background: #fbfcfd; }
    body.mobile-complaint-form-page .form-content input[type=file] { height: 44px; min-height: 44px; padding: 0; overflow: hidden; background: #fff; color: #818b9c; font-size: 12px; line-height: 42px; }
    body.mobile-complaint-form-page .form-content input[type=file]::file-selector-button { height: 42px; margin: 0 12px 0 0; padding: 0 16px; border: 0; border-right: 1px solid #e0e5ed; border-radius: 9px 0 0 9px; background: #f0f3f7; color: #536176; font-family: Poppins,sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .2s ease; }
    body.mobile-complaint-form-page .form-content input[type=file]::file-selector-button:hover { background: #e6ebf2; }
    body.mobile-complaint-form-page .mobile-complaint-file-help { display: block; margin-top: 7px; color: #949dac; font-size: 11px; }
    body.mobile-complaint-form-page .form-content .submit-btn { width: 100%; min-height: 48px; margin: 2px 0 0; border-radius: 10px; background: #ed145b; color: #fff; font-size: 14px; font-weight: 600; }
    body.mobile-complaint-form-page .form-content .submit-btn:hover { background: #d80f50; }
    body.mobile-complaint-form-page .form-content .is-invalid { border-color: #dc3545; }
}