/* MatchApp TV Ai — label and content containment (2026-09-21).

   One rule everywhere: a control's label belongs inside that control's box,
   and a card's content belongs inside that card. This file only sizes, wraps
   and constrains — it never hides a control, changes a colour, or moves
   anything. Loaded last so it settles the boxes the other stylesheets draw.

   Every fix here answers a measured overflow at 360 / 390 / 768 / 1440 px. */

/* ---------- every button-shaped control ---------- */

button,
[role="button"],
.gold-btn,
.button,
.secondary-btn,
.ma-plan-cta,
.tg-btn,
.tg-send-btn,
.dc-action,
.mh-home-btn,
.id-cta,
input[type="submit"],
input[type="button"]{
  box-sizing:border-box;
  max-width:100%;
  overflow-wrap:break-word;
}

/* A control that still has to hold one line keeps the line readable rather
   than clipping it: it grows, and the bar it sits in wraps instead. */
.ma-global-header #nav-reg-btn,
.mh-topbox #nav-reg-btn{
  max-width:none!important;
  width:auto!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* ---------- criteria chips ---------- */

/* The mood chips sit in a fixed four-column grid, so a long label such as
   "Something short" was wider than its own column and spilled past the chip
   border. Those chips wrap; the horizontally scrolling rows keep one line
   because they can simply scroll. */
.ma-chip-row.ma-moods .ma-chip,
.ma-mood-block .ma-chip{
  white-space:normal!important;
  line-height:1.15!important;
  overflow-wrap:break-word;
  hyphens:auto;
  padding-inline:6px!important;
  min-width:0;
}
.ma-chip{box-sizing:border-box;max-width:100%}
.ma-scroll .ma-chip{white-space:nowrap}

/* ---------- cards, panels and rails ---------- */

.premium-card,
.spotlight-card,
.tg-card,
.tg-how-step,
.global-event,
.ma-plan,
.ma-concierge,
.marquee-item,
.ma-news-card,
.dc,
.daily-reward-card{
  box-sizing:border-box;
  min-width:0;
  overflow-wrap:break-word;
}

/* Long unbroken strings (share links, provider names, e-mail addresses) are
   the usual way text escapes a card. */
.tg-share-box,
.tg-link-row input,
.weekly-pick-source,
.discover-event-copy,
.id-summary,
.spotlight-desc{overflow-wrap:anywhere}

/* Chips that carry a fact ("Director: …", "Age rating 16") wrap rather than
   push their own pill open. */
.spotlight-chip,
.facts span,
.event-badge{
  box-sizing:border-box;max-width:100%;
  line-height:1.2;overflow-wrap:break-word;
}

/* ---------- language switcher ---------- */

/* At handset widths the language <select> was 104px wide with 20px reserved
   for its arrow, which cut "English" to "Engli". A native select cannot
   ellipsis, so the control gets the room its own label needs. The deck wraps,
   so nothing else is pushed out. */
@media (max-width:700px){
  html body.page-home #mh-topbox.ma-home-header nav #lang-switcher-host{
    width:124px!important;flex:0 0 124px!important;
  }
  html body.page-home #mh-topbox.ma-home-header nav #lang-switcher-host select{
    font-size:11.5px!important;padding-left:7px!important;padding-right:18px!important;
    text-overflow:ellipsis;
  }
}

/* ---------- media ---------- */

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

/* ---------- ask box ---------- */

/* The concierge composer was cutting its own placeholder off mid-word, because
   the box was shorter than the three lines the placeholder needs. Only the
   multi-line composer grows; the single-line search input is left alone. */
textarea#discover-new-input,
textarea#specific-search-input{
  box-sizing:border-box;max-width:100%;
  min-height:104px;
  line-height:1.45;
}
input#specific-search-input,
input#discover-new-input{box-sizing:border-box;max-width:100%;text-overflow:ellipsis}