/* ==========================================================================
   public-mobile.css
   Mobile-responsive styles for public (unauthenticated) pages:
   /parking, /receipt, /refund, /lostfound
   ==========================================================================

   Strategy:
   - Mobile-first touch targets (>= 44px)
   - Stack form fields vertically on small screens
   - Fluid widths for buttons/images/containers
   - Readable navbar title on small screens
*/

/* --- Container wrapping content on public pages --- */
.public-page-container {
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    width: 95%;
    max-width: 960px;
    padding: 0 8px;
}

/* --- Public navbar: zero horizontal padding so brand can align edge-to-edge
       with body content. Scoped to .public-navbar to avoid affecting admin
       navbars elsewhere in the app. --- */
.public-navbar {
    padding-left: 0;
    padding-right: 0;
}

/* --- Navbar brand: align left edge with .public-page-container's content
       start by mirroring its width/max-width/auto-margins/padding. --- */
.public-navbar-brand {
    font-size: 1.5rem;
    display: block;
    width: 95%;
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 8px;
    padding-right: 8px;
    text-align: left;
}

@media (min-width: 576px) {
    .public-navbar-brand {
        font-size: 1.875rem; /* ~30px, matches prior desktop style */
    }
}

/* --- Buttons: fluid on mobile, fixed on >= sm --- */
.public-action-btn {
    width: 100%;
    margin-bottom: 8px;
}

@media (min-width: 576px) {
    .public-action-btn {
        width: 250px;
        margin-bottom: 0;
    }
}

/* Container for pairs of action buttons (e.g., SamsungPay + ApplePay) */
.public-action-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

.public-action-btn-row .public-action-btn {
    margin-bottom: 0;
}

/* --- Start/agree button (previously width:350px) --- */
.public-start-btn {
    width: 100%;
}

@media (min-width: 576px) {
    .public-start-btn {
        width: 350px;
    }
}

/* --- Responsive images (guide images, preview, etc.)
       !important is required so this wins over inline `style="max-width:450px"`
       (Samsung Pay) and `style="max-width:720px"` (Apple Pay) hints in the
       templates. Without it, inline styles override the class on narrow
       viewports and the image overflows its modal. --- */
.public-responsive-img {
    max-width: 100% !important;
    height: auto;
    display: block;
}

/* --- Form row: stack on mobile, inline on >= sm --- */
.public-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

@media (min-width: 576px) {
    .public-form-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

.public-form-cell {
    flex: 1 1 auto;
    min-width: 0;
    margin: 4px 0;
}

@media (min-width: 576px) {
    .public-form-cell {
        margin: 4px 8px 4px 0;
        flex: 0 0 auto;
    }
}

/* Form controls: larger, touch-friendly inputs on mobile */
.public-form-cell .form-control,
.public-form-cell .custom-select {
    width: 100%;
    min-height: 42px;
    font-size: 1rem;
}

@media (min-width: 576px) {
    .public-form-cell .form-control,
    .public-form-cell .custom-select {
        width: auto;
        min-width: 180px;
    }
}

/* Labels: always on their own line above input on mobile */
.public-form-cell label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

/* Primary action buttons (Search, Request, Issue...): full width on mobile */
.public-submit-btn {
    width: 100%;
    min-height: 44px;
}

@media (min-width: 576px) {
    .public-submit-btn {
        width: auto;
        min-width: 120px;
    }
}

/* --- Time selects (hour : minute) --- */
.public-time-picker {
    display: flex;
    align-items: center;
    width: 100%;
}

.public-time-picker select {
    flex: 1 1 0;
    min-width: 0;
    height: 42px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 1rem;
}

@media (min-width: 576px) {
    .public-time-picker select {
        flex: 0 0 auto;
        width: 85px;
    }
}

.public-time-picker .separator {
    margin: 0 6px;
    font-weight: bold;
}

/* --- Modals on small screens: better use of viewport
       Constrain dialog to viewport height and let modal-body scroll so the
       footer (with the Close button) is always reachable even when the
       guide image is taller than the screen. --- */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
        max-height: calc(100vh - 16px);
    }

    .modal-content {
        max-height: calc(100vh - 16px);
        display: flex;
        flex-direction: column;
    }

    .modal-header,
    .modal-footer {
        flex: 0 0 auto;
    }

    .modal-body {
        padding: 12px;
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-body img {
        max-width: 100% !important;
        height: auto;
    }
}

/* --- Bootstrap-table responsive scrolling --- */
.public-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Guidance text: slightly smaller on mobile for readability --- */
.public-guide-text {
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (min-width: 576px) {
    .public-guide-text {
        font-size: 1rem;
    }
}