/* =====================================================================
   responsive.Chirayu.css
   Shared responsive fixes for every page. Loaded last in <head> so it
   overrides the older page CSS where needed.
   ===================================================================== */

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

body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* space so the fixed footer never covers the last content */
    padding-bottom: 40px;
}

img,
video,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

/* jQuery Mobile pages: keep the last content above the fixed footer */
.ui-page {
    padding-bottom: 100px !important;
}

/* Long words / numbers / URLs wrap instead of pushing the page wider */
.ui-content,
.page-heading h1,
.center-message {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- Bottom footer menu ---------- */
/* One row of equal items + full-width bars (marquee / copyright), never clipped */
footer.footer {
    bottom: 0 !important;
    height: auto !important;
    line-height: normal !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

footer.footer > .col-xs-3 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    width: auto !important;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    padding: 4px 2px 3px !important;
    text-align: center;
    vertical-align: top;
}

footer.footer > .col-xs-3 > a {
    display: block;
    min-height: 44px; /* comfortable touch target */
}

footer.footer > .col-xs-3 button {
    padding: 2px 0 0;
    line-height: 1;
}

/* jQuery Mobile wraps footer <button>s in .ui-btn with extra margin/padding */
footer.footer .ui-btn {
    margin: 0 !important;
    padding: 2px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

footer.footer span.d-block.font_footer {
    font-size: 10px !important;
    line-height: 1.2 !important;
    min-height: 2.4em; /* same height for 1-line and 2-line labels */
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

footer.footer > .col-xs-12,
footer.footer > .col-md-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100% !important;
    max-width: 100%;
}

/* Index page footer also carries the marquee bar, so give its content more room */
#myDivv main.main-container {
    padding-bottom: 50px !important;
}

/* ---------- Action buttons (e.g. Cancel / Modify, Sell / Buy) ---------- */
/* Pages give these width:25%, which truncates the label on narrow phones */
.New_button {
    min-width: 96px;
    padding-left: .6em !important;
    padding-right: .6em !important;
}

/* ---------- Side menu ---------- */
#mobile-nav {
    max-height: 100vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Delete Account: red in side menu and footer ---------- */
#mobile-nav .mobile-list-nav li.DeleteAccount > a,
#mobile-nav .mobile-list-nav li.DeleteAccount > a i,
#mobile-nav .mobile-list-nav li.DeleteAccount > a:visited {
    color: #ff3b3b !important;
}

footer.footer a.DeleteAccount .fa,
footer.footer a.DeleteAccount span.d-block.font_footer {
    color: #ff3b3b !important;
}

/* ---------- Small phones (<= 360px) ---------- */
@media (max-width: 360px) {
    footer.footer .fa {
        font-size: 20px !important;
    }

    footer.footer span.d-block.font_footer {
        font-size: 9.5px !important;
    }

    .page-heading {
        margin: 10px 8px 8px;
    }

    .page-heading h1 {
        font-size: 16px;
    }
}

/* ---------- Tablets and larger (>= 600px) ---------- */
@media (min-width: 600px) {
    footer.footer span.d-block.font_footer {
        font-size: 12px !important;
        min-height: 0;
    }

    footer.footer > .col-xs-3 > a {
        min-height: 0;
    }
}

/* ---------- Large tablets / desktop (>= 992px): keep content readable ---------- */
@media (min-width: 992px) {
    #myDivv main.main-container,
    .page-heading {
        max-width: 960px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}