/* Site-wide mobile layout — loaded last so it wins over theme CSS */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

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

.container,
.container-fluid {
    width: 100%;
    max-width: 100%;
}

.row {
    flex-wrap: wrap !important;
    margin-left: -15px;
    margin-right: -15px;
}

.main-header {
    position: relative;
    z-index: 1000;
}

.mobile-only-header {
    position: relative;
    width: 100%;
}

.mobile-nav-menu {
    left: 0;
    right: 0;
}

/* Search form */
.status-verify {
    width: 100%;
    max-width: 720px;
    padding: 0 4px;
}

.status-search-row {
    width: 100%;
}

.status-search-row .form-control {
    min-width: 0;
}

@media (max-width: 767px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -8px;
        margin-right: -8px;
    }

    [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    .about-bg {
        padding: 36px 16px !important;
        margin-bottom: 24px !important;
    }

    .about-bg h1,
    .about-bg h1[style] {
        font-size: 26px !important;
        line-height: 1.3 !important;
        word-break: break-word;
    }

    .about-bg p,
    .about-bg p[style] {
        font-size: 14px !important;
        margin-top: 8px !important;
    }

    .feature-section,
    .about-us-data-1,
    .contact-section,
    .prize-list-data-1,
    .sponsors-section,
    .terms-condition-page-1 {
        padding: 28px 0 40px !important;
    }

    .section-title {
        margin-bottom: 20px !important;
    }

    .section-title h2,
    .section-title h2[style] {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .glass-card,
    .glass-card[style],
    .check-prize-data-1 {
        padding: 16px !important;
        margin-top: 0 !important;
        margin-bottom: 16px;
    }

    .status-search-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .status-search-row .form-control,
    .status-search-row .form-control[style],
    .status-search-row .btn-one,
    .status-search-row .btn-one[style] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        height: 52px !important;
        font-size: 16px !important;
        white-space: nowrap;
    }

    .btn-one {
        white-space: nowrap;
        padding: 12px 18px;
        font-size: 15px !important;
    }

    .ld-result {
        margin: 20px 0 0;
        padding: 28px 14px 20px;
        border-radius: 14px;
    }

    .ld-title {
        font-size: 26px !important;
    }

    .ld-sub {
        font-size: 16px;
    }

    .ld-banner {
        font-size: 14px;
        padding: 9px 14px;
    }

    .ld-price {
        font-size: 32px;
    }

    .ld-car-photo {
        max-height: 180px;
        margin-bottom: 14px;
    }

    .status-recent-winners {
        margin-top: 28px;
    }

    .status-recent-winners h3 {
        font-size: 22px;
    }

    .ld-winners-grid,
    .ld-winners-grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ld-winner-card img,
    .status-recent-winners .ld-winner-card img {
        height: 130px;
    }

    .ld-fee {
        font-size: 14px;
    }

    .ld-wa {
        font-size: 18px;
    }

    .winner-result {
        max-width: 100%;
        margin: 20px 0 0;
        border-radius: 12px;
    }

    .winner-body {
        padding: 16px 14px 20px;
    }

    .winner-prize-title {
        font-size: 22px !important;
    }

    .doc-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .doc-upload-card {
        min-height: 80px;
        padding: 10px 6px;
    }

    .main-footer,
    .main-footer[style] {
        padding: 36px 0 0 !important;
        overflow: visible !important;
    }

    .main-footer h3[style] {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    .main-footer p,
    .main-footer p[style] {
        font-size: 14px !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .main-footer .col-md-4,
    .main-footer .col-sm-6,
    .main-footer .col-sm-12 {
        margin-bottom: 28px;
    }

    .footer-bottom .row,
    .footer-bottom .row[style] {
        flex-direction: column;
        text-align: center !important;
        gap: 12px;
    }

    .footer-bottom [style*="text-align"] {
        text-align: center !important;
    }

    .footer-bottom img {
        height: 22px !important;
        margin: 4px !important;
    }

    .winner-card img {
        height: 180px;
    }

    .list-group li,
    .list-group li[style] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 0 !important;
    }

    .pay-amount {
        font-size: 28px;
    }

    .pay-qr {
        width: 150px;
        height: 150px;
    }

    .pay-row {
        align-items: flex-start;
    }

    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    iframe {
        width: 100% !important;
        max-width: 100%;
        height: 240px !important;
    }

    #scratchCardModal .modal-dialog {
        width: auto !important;
        max-width: calc(100% - 24px);
        margin: 24px 12px !important;
    }

    #scratch-card-container,
    #scratch-card {
        width: 100%;
        height: 150px;
    }

    .scratch-enter-btn {
        width: 100%;
        min-width: 0;
        font-size: 18px;
        padding: 12px 20px;
    }

    .mobile-top-bar {
        gap: 8px;
        font-size: 12px;
    }

    .mobile-top-bar a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 48%;
    }
}

@media (min-width: 768px) {
    .status-search-row {
        flex-direction: row;
        align-items: stretch;
    }

    .status-search-row .form-control {
        flex: 1 1 auto;
    }

    .status-search-row .btn-one {
        flex: 0 0 auto;
        min-width: 180px;
    }
}