/* ==========================================================================
   Polosys — Mobile responsive overrides
   Loaded last by _Theme2Layout.cshtml so it wins over theme2/style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Small phones (<= 575.98px): stack every form field full width
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* Stack half/third/quarter width form columns into a single column */
    form .row > .col-2,
    form .row > .col-3,
    form .row > .col-4,
    form .row > .col-5,
    form .row > .col-6,
    form .row > .col-7,
    form .row > .col-8,
    form .row > .col-9,
    form .row > [class*="col-sm-"]:not([class*="col-12"]),
    form .row > [class*="col-md-"]:not([class*="col-12"]):not([class*="col-sm-"]) {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* Fields must never sit flush against the screen edge */
    .contact-form,
    .contact-infobox,
    .contact-formbox {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* 16px keeps iOS Safari / Android WebView from auto-zooming on focus */
    form .form-control,
    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form input[type="tel"],
    form input[type="number"],
    form input[type="search"],
    form select,
    form textarea {
        font-size: 16px !important;
        padding: 11px 46px 11px 16px !important;
        min-height: 44px;
        border-radius: 10px;
    }

    /* Room for the trailing icon / eye toggle */
    form .form-group > img,
    form .form-group .pwd-toggle {
        right: 14px !important;
    }

    /* Verify-email button sits under the email field, full width */
    #sendOtpGrp,
    #otpInputGrp,
    #verifyOtpGrp {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-top: 2px;
    }

    #sendOtpGrp .th-btn,
    #verifyOtpGrp .th-btn {
        width: 100% !important;
        padding: 11px 12px !important;
        font-size: 15px !important;
        min-height: 44px;
    }

    /* Full-width primary buttons with a comfortable tap target */
    .form-btn .th-btn,
    .form-btn button[type="submit"] {
        width: 100%;
        max-width: 100%;
        padding: 13px 20px !important;
        font-size: 15px !important;
        min-height: 46px;
    }

    /* Validation messages must wrap instead of overflowing */
    .text-danger {
        display: block;
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
    }

    /* Checkbox row: no squeeze */
    .form-check {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .form-check-label {
        flex: 1;
        line-height: 1.45;
        font-size: 14px;
    }

    /* Google sign-in button is rendered at a fixed 340px — force it to fit */
    #googleSignupBtnContainer {
        max-width: 100%;
        overflow: hidden;
    }

    #googleSignupBtnContainer .g_id_signin,
    #googleSignupBtnContainer .g_id_signin > div,
    #googleSignupBtnContainer iframe {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* "or continue with" divider */
    .form-btn hr {
        min-width: 0;
    }

    /* Remember me / forgot password must stay on one line each */
    .th-form-group {
        flex-wrap: wrap;
        gap: 6px 10px;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .th-form-group .form-check,
    .th-form-group .form-check-label,
    .th-form-group .th-link {
        white-space: nowrap;
        font-size: 14px !important;
    }

    /* Titles must not run into each other */
    .title-area .sec-title {
        font-size: 1.35rem !important;
        line-height: 1.25;
    }

    .title-area .sec-text {
        font-size: 14px !important;
    }
}

/* --------------------------------------------------------------------------
   2. Very small phones (<= 380px): tighten spacing so nothing overflows
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {

    form .form-control,
    form input,
    form select,
    form textarea {
        padding: 10px 42px 10px 14px !important;
        font-size: 16px !important;
    }

    .title-area .sec-title {
        font-size: 1.2rem !important;
    }

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

/* --------------------------------------------------------------------------
   3. Header: keep the white logo fully inside the blue mask shape
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* The theme only gives the blue shape 60% width here, which leaves the
       tail of the white logo sitting on the white background (invisible). */
    .header-layout1 .logo-bg {
        width: 70%;
        height: 88px;
    }

    .th-header .header-logo {
        max-width: calc(100% - 130px);
    }

    .th-header .header-logo img {
        width: auto;
        max-width: 165px;
        max-height: 46px;
        height: auto;
    }

    .th-header .menu-area {
        min-height: 76px;
    }

    .th-header .menu-area > .container {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* --------------------------------------------------------------------------
   4. Safety net: any horizontally overflowing element gets clipped cleanly
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}