/* Hide mobile hamburger on desktop */
.navToggle,
.navHamburger {
    display: none;
}

/* SweetAlert2 popup font sizes */
/* Desktop / default */
.swal2-title {
    font-size: 1rem;
}

.swal2-html-container{
    font-size: 0.8rem;
}
@media (max-width: 768px) {
    /* SweetAlert2 popup on mobile – slightly smaller text */
    .swal2-title {
        font-size: 0.9rem;
    }
    .swal2-html-container{
        font-size: 0.7rem;
    }

    /* Full viewport width: remove right-side gap on mobile */
    html {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        padding-top: 60px;
        padding-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
    }

    /* Ensure form and content wrapper use full width (both Landing and Submission pages) */
    body form {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body form > div {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }

    /* Override any .body-content padding on mobile so content can be full width */
    .body-content {
        padding-left: 0;
        padding-right: 0;
    }

    /* NavBar: full width edge-to-edge, logo left, hamburger right, collapsible menu (mobile only) */
    .navBar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        width: 100%;
        max-width: 100vw;
        min-height: 52px;
        box-sizing: border-box;
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .navBar > img {
        margin-left: 0;
        margin-right: 8px;
        max-width: 120px;
        max-height: 44px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    /* Hamburger visible on mobile */
    .navHamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        width: 44px;
        height: 44px;
        cursor: pointer;
        padding: 10px;
        box-sizing: border-box;
    }

    .navToggle {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
        pointer-events: none;
    }

    .navHamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #000;
        border-radius: 1px;
        margin: 3px 0;
        transition: opacity 0.2s, transform 0.2s;
    }

    .navBar:has(.navToggle:checked) .navHamburger span:nth-child(2) {
        opacity: 0;
    }

    .navBar:has(.navToggle:checked) .navHamburger span:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    .navBar:has(.navToggle:checked) .navHamburger span:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }

    /* Menu collapsed by default on mobile; overrides JSON .divNavBar { display: flex } (higher specificity) */
    .navBar .divNavBar {
        display: none !important;
        flex-basis: 100%;
        width: 100%;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 12px 12px 20px 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        background-color: #fff;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    }

    .navBar:has(.navToggle:checked) .divNavBar {
        display: flex !important;
    }

    .divNavBar > a {
        font-size: 0.95rem;
        padding: 12px 8px;
        min-height: 44px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    /* Landing Page layout – override JSON .instruction 70% width (higher specificity + !important) */
    .content {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    .content .instruction {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none;
        border-bottom: 3px solid #000000;
        padding: 15px;
        box-sizing: border-box;
    }

    .content .participate {
        width: 100% !important;
        max-width: 100% !important;
        flex: none;
        box-sizing: border-box;
    }

    /* Landing Page typography and spacing – mobile-friendly font sizes (override JSON pt values) */
    .instructionTitleEnglish {
        font-size: 1.1rem !important;
    }

    .instructionTitleMalay {
        font-size: 0.95rem !important;
    }

    .divInstruction {
        gap: 12px;
    }

    /* Instruction step sub-titles (e.g. "1. Buy (Beli)") */
    .divInstruction > div > span {
        font-size: 0.95rem !important;
    }

    /* Instruction detail text – English */
    .divInstruction > div > div > div > span:nth-of-type(1) {
        font-size: 0.8rem !important;
    }

    /* Instruction detail text – Malay */
    .divInstruction > div > div > div > span:nth-of-type(2) {
        font-size: 0.75rem !important;
    }

    /* Instruction notice (e.g. file size note) */
    .divInstruction > div > div > div > span:nth-of-type(3) {
        font-size: 0.7rem !important;
    }

    .participateTitleEnglish {
        font-size: 1rem !important;
    }

    .participateTitleMalay {
        font-size: 0.9rem !important;
    }

    .btnParticipateForm {
        min-height: 44px;
        padding: 12px 18px;
    }

    .btnParticipateFormEnglish,
    .btnParticipateFormMalay {
        font-size: 0.85rem !important;
    }

    .hyperlinkTAC {
        font-size: 0.75rem !important;
    }

    .logoTitle {
        font-size: 0.75rem !important;
    }

    .logo,
    .imgLogo {
        max-width: 100%;
        width: 80%;
    }

    /* Hero image on Landing (full width, no overflow) */
    .imgVisual {
        max-width: 100%;
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    /* Submission Page layout – full width, no fixed % from JSON */
    .divSection {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 24px;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    .divHeroSection {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        flex: 0 0 auto;
    }

    .divFormSection {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        flex: 0 0 auto;
    }

    /* Submission Page hero – mobile-friendly font sizes (override JSON 30pt / 12pt) */
    .divHeroSectionTitle {
        padding: 10px 0;
    }

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

    .heroSectionTitleMalay {
        font-size: 1rem !important;
    }

    .imgContestLogo,
    .imgPrize {
        max-width: 100%;
        height: auto;
        width: 80%;
    }

    /* Submission Page form – mobile-friendly font sizes (override JSON pt values) */
    .divRow {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .divTextboxLabel,
    .divFileUploadLabel {
        flex-wrap: wrap;
    }

    .formEnglish {
        font-size: 0.8rem !important;
    }

    .formMalay {
        font-size: 0.75rem !important;
    }

    .formErrorMessage {
        font-size: 0.7rem !important;
    }

    .formFileUploadText {
        font-size: 0.75rem !important;
    }

    .formCheckboxText {
        font-size: 0.7rem !important;
        word-wrap: break-word;
    }

    .formTextbox {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        font-size: 0.8rem !important;
    }

    .formFileUploadClone {
        min-height: 44px;
    }

    .formButton {
        width: 100%;
        min-height: 44px;
        padding: 12px 18px;
        font-size: 0.9rem !important;
    }
}