/* ==========================================================================
   Phone & tablet guards.

   Linked from every page shell with media="(max-width: 991.98px)", so no
   rule in this file can ever reach a desktop browser , desktop layout is
   untouched by construction. Keep it that way: no media query in here
   should widen that range.
   ========================================================================== */

/* ── 1. Inputs: stop iOS Safari zooming the page on focus ──────────────────
   Every form field on the site renders at 14px; iOS zooms the whole page in
   whenever a focused field's text is under 16px and never zooms back out,
   so the layout jumps sideways on every tap and the "next field" arrows
   land on half-visible inputs. 16px is the threshold. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
select,
textarea,
.choices__input,
.choices__inner {
    font-size: max(16px, 1em) !important;
}

/* Keep a focused field clear of the sticky header when the browser scrolls
   it into view above the keyboard. */
input, select, textarea, [contenteditable="true"] {
    scroll-margin-top: 96px;
    scroll-margin-bottom: 24px;
}

/* ── 2. Long, unbroken user text ───────────────────────────────────────────
   Titles, labels, bios and names are typed by people , a 1000-letter
   label, a pasted URL, an Arabic phrase with no spaces must wrap inside
   its card, never push the card wider than the phone.
   break-word only breaks a line that would otherwise overflow; it never
   changes how wide anything is sized, so normal content looks identical. */
body {
    overflow-wrap: break-word;
}

/* Badges are nowrap in Bootstrap: one long mentor-typed label then takes
   the whole row and squeezes its neighbour (the session title) down to a
   letter per line. Let them wrap, capped to their row. */
.badge {
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: start;
}

/* Text a person typed, in containers that sit inside flex/grid rows: these
   may shrink and break anywhere instead of overflowing. */
.mentor-session-card h6,
.mentor-card h3, .mentor-card h4, .mentor-card h5, .mentor-card h6,
.session-card h3, .session-card h4, .session-card h5, .session-card h6,
.session-card__title,
.bb-review-card__name, .bb-review-card__body,
.bbs-prose, .bbs-chip, .bbs-criteria__tag,
.tp-card__name, .tp-tag,
.notif-item__title, .notif-item__body,
.dropdown-user-header, .dr-profile__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── 3. Menus that open from a header button ───────────────────────────────
   The notification panel hangs off the bell at a fixed 340px. On a phone
   the bell sits near one edge (left in Arabic), so the panel ran past the
   screen. Pin it to the viewport with even gutters instead; the trigger
   writes its own bottom edge to --nb-top when it opens. */
.notif-bell__panel {
    position: fixed;
    top: var(--nb-top, 72px);
    inset-inline: 12px;
    width: auto;
    max-width: none;
}
.notif-bell__list {
    max-height: min(380px, calc(100dvh - var(--nb-top, 72px) - 90px));
    overscroll-behavior: contain;
}

/* Bootstrap dropdowns never wider than the screen. */
.dropdown-menu {
    max-width: calc(100vw - 24px);
}

/* Global search on a phone: the full height above the keyboard, slimmer
   gutters, so results get the room instead of padding. */
#global-search-portal { padding: 10px !important; }
#global-search-portal .global-search-card { max-height: calc(100dvh - 20px) !important; border-radius: 14px !important; }
#global-search-portal .global-search-card__head { padding: 12px !important; }

/* ── 4. Slider arrows ──────────────────────────────────────────────────────
   Our own prev/next pairs sit in a centred flex row under the slider, but
   the theme's slick CSS pins every .slick-prev/.slick-next absolutely at
   -25px , on a phone that is past the clipped screen edge, so the arrows
   showed as half-circles. Back into the row they were written in. */
.flex > .slick-prev, .flex > .slick-next,
.d-flex > .slick-prev, .d-flex > .slick-next {
    position: static;
    inset: auto;
    transform: none;
    translate: none;
}

/* Homepage "about" image: the bulb badge hangs 40px outside the photo's
   start edge , past the screen edge on a phone (right edge in Arabic). */
.about-two__thumb > .ms--40 {
    margin-inline-start: 0;
}

/* ── 5. Media and wide content ─────────────────────────────────────────── */
img, video, iframe, embed, object {
    max-width: 100%;
}
pre, code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── 6. "How to pay" details ───────────────────────────────────────────────
   Wallet numbers, IBANs and PayPal emails the student has to copy into
   another app. Rows wrap instead of running off the screen, and one tap
   selects the whole value so the phone offers Copy straight away , no
   fiddly long-press-and-drag selection. */
.list-of-payment li {
    flex-wrap: wrap;
    row-gap: 4px;
}
.list-of-payment li > span:not(.copied-message):not(.badge),
.book-pay__list .v {
    min-width: 0;
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
}