/**
 * Phone layer of the public site and the patient pages.
 *
 * The Android app is a WebView of the site, so these pages are what a patient
 * sees in it. These rules make them work on a phone: nothing cut off or out of
 * reach, room for the content, and links and buttons big enough to tap.
 *
 * Linked last from includes/guest-head.php, which every public and patient
 * page includes. Every rule sits inside a phone or tablet media query: the
 * desktop look does not change. Rules start with body.guest-theme, as the
 * theme's own rules do, so they also beat a page's own <style> that comes
 * later in the page.
 */

/* ---------------------------------------------------------------------------
   Phones and small tablets
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Footer links were 16px tall: each one a row that is easy to tap. */
    body.guest-theme .footer-links ul:not(.contact-info) li {
        margin-bottom: 0;
    }

    body.guest-theme .footer-links ul:not(.contact-info) a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }

    body.guest-theme .footer-social a {
        width: 40px;
        height: 40px;
    }

    /* Small links (a breadcrumb's "Home", "Back to Clinic", "Forgot
       password?", a clinic's phone number): a taller tap area. */
    body.guest-theme .page-hero .breadcrumbs a,
    body.guest-theme .notification-dropdown .notification-header a,
    body.guest-theme .notification-dropdown .notification-footer a,
    body.guest-theme .back-link {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }

    body.guest-theme .page-hero .breadcrumbs {
        align-items: center;
    }

    body.guest-theme .auth-form a[href*="forgot-password"],
    body.guest-theme .contact-item a {
        display: inline-block;
        padding: 8px 0;
    }

    /* The eye that shows a password: 40px instead of 28px, its centre where
       it was. */
    body.guest-theme .toggle-password {
        right: 6px;
        width: 40px;
        height: 40px;
    }

    /* Find clinics: the whole field box answers a tap, not only the 20px
       line of text inside it. */
    body.guest-theme .search-filters-box .filter-item .gt-select-trigger::before {
        content: "";
        position: absolute;
        inset: 0;
    }

    body.guest-theme .search-filters-box .search-bar input {
        padding-top: 12px;
        padding-bottom: 12px;
        margin-top: -12px;
        margin-bottom: -12px;
    }

    /* The search box above the patient's lists (appointments, records). */
    body.guest-theme .search-box-sm {
        padding-top: 0;
        padding-bottom: 0;
    }

    body.guest-theme .search-box-sm input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        min-height: 42px;
        font-size: 16px;
    }

    /* Small badges and captions: no smaller than 12px. */
    body.guest-theme .notif-badge-new,
    body.guest-theme .featured-badge,
    body.guest-theme .gt-team-role,
    body.guest-theme .calendar-weekdays span,
    body.guest-theme .time-slot .slot-status {
        font-size: 12px;
    }
}

/* ---------------------------------------------------------------------------
   Phones
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
    /* Page gutters: 16px, as the footer has, instead of 26px. Most pages are
       a card inside a card, and every pixel of width counts. */
    body.guest-theme .container {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* The About page's team cards swipe from screen edge to screen edge:
       they reach out past the gutter, now 16px. */
    body.guest-theme .gt-team-grid {
        margin-inline: -16px;
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-inline: 16px;
    }

    /* Patient home: the four shortcuts in two rows of two. In one row that
       does not wrap, the first and the last were cut off at the screen's
       edges, out of reach. */
    body.guest-theme .user-hero .hero-quick-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body.guest-theme .user-hero .quick-action-btn {
        min-width: 0;
        padding: 16px 10px;
        text-align: center;
    }

    /* Book an appointment: the five steps in one row. They wrapped into two
       rows of 60px circles, 228px tall, before the first question. */
    body.guest-theme .booking-progress {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 20px;
    }

    body.guest-theme .booking-progress .progress-line {
        display: none;
    }

    body.guest-theme .booking-progress .progress-step {
        flex: 1 1 0;
        min-width: 0;
        gap: 6px;
    }

    body.guest-theme .booking-progress .step-number {
        width: 34px;
        height: 34px;
        margin: 0;
        border-width: 2px;
        font-size: 15px;
    }

    body.guest-theme .booking-progress .progress-step span {
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
    }

    /* A service to pick: the price under its name instead of a column of
       its own, which left the name about 110px ("Braces – / Metal /
       Brackets"). */
    body.guest-theme .service-option-card {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas:
            "icon info check"
            ".    price check";
        column-gap: 12px;
        row-gap: 6px;
        align-items: center;
    }

    body.guest-theme .service-option-card > i,
    body.guest-theme .service-option-card > .service-option-image {
        grid-area: icon;
        align-self: start;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    body.guest-theme .service-option-card > .service-info {
        grid-area: info;
        min-width: 0;
    }

    body.guest-theme .service-option-card > .service-price {
        grid-area: price;
        justify-self: start;
    }

    body.guest-theme .service-option-card > .service-check {
        grid-area: check;
    }

    /* Each step's card, and the date picker in it: less padding, so the
       days of the month are big enough to tap. */
    body.guest-theme .booking-step {
        padding: 20px 16px;
    }

    body.guest-theme .mini-calendar {
        max-width: none;
        padding: 12px;
    }

    body.guest-theme .calendar-days {
        gap: 4px;
    }

    /* Time slots two to a row: one to a row made a list about 650px long
       under the calendar. A "no slots" message keeps the full width. */
    body.guest-theme #timeSlotsContainer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.guest-theme #timeSlotsContainer > p {
        grid-column: 1 / -1;
    }

    body.guest-theme .medical-info-form .btn-na,
    body.guest-theme .medical-info-upload .btn-na {
        padding: 9px 14px;
    }

    /* Symptom checker: three paddings (page, box, card) left the answers
       216px, and the Back and Next buttons ran past the card. */
    body.guest-theme .dss-container {
        padding-left: 0;
        padding-right: 0;
    }

    body.guest-theme .dss-card {
        padding: 20px 16px;
    }

    body.guest-theme .dss-card h2 {
        align-items: flex-start;
        gap: 10px;
        font-size: 20px;
    }

    body.guest-theme .dss-card h2 i {
        margin-top: 2px;
        font-size: 22px;
    }

    body.guest-theme .dss-actions {
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
        padding-top: 20px;
    }

    body.guest-theme .dss-actions .btn {
        flex: 1 1 140px;
        justify-content: center;
        min-height: 48px;
        padding: 12px 16px;
    }

    /* The patient's notifications: the three counts in one row (in two
       columns the third sat alone), and the buttons under the message
       instead of a third column, which pushed each one 55px past the
       screen. */
    body.guest-theme .notifications-page .summary-chips {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.guest-theme .notifications-page .summary-chip {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        padding: 10px 12px;
    }

    body.guest-theme .notifications-page .notification-list {
        grid-template-columns: minmax(0, 1fr);
    }

    body.guest-theme .notifications-page .notification-list > .notification-item {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px;
    }

    body.guest-theme .notifications-page .notification-item .notification-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    body.guest-theme .notifications-page .notification-item .notification-body {
        flex: 1 1 0;
        overflow-wrap: anywhere;
    }

    body.guest-theme .notifications-page .notification-item .notification-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    body.guest-theme .notifications-page .notification-actions button,
    body.guest-theme .notifications-page .notification-actions a {
        width: 40px;
        height: 40px;
    }
}