/**
 * newapp/css/newapp.css
 * Small supplementary tweaks on top of Bootstrap 5 — Bootstrap covers layout,
 * forms, buttons, cards, tables, badges, the navbar, and the accordion. This
 * file only holds the handful of things Bootstrap doesn't do out of the box.
 * Loaded after Bootstrap on every page, so it can override where needed.
 */

/* Type/On-type chips (variant_row.php) use admin-chosen arbitrary hex
   background colours via inline style — Bootstrap's plain .badge doesn't set
   a text colour for that case (only its .text-bg-* combo classes do), so
   force white text here for contrast against any colour. */
.na-type-chip,
.na-ontype-chip {
  color: #fff;
}

/* VariantQtyChooser's lockToSingleProduct mode (variant_qty_chooser.php/.js) —
   dims a row belonging to a different head product once a qty is set
   elsewhere in the chooser, without removing it from the layout. Only the +
   button is actually disabled (in markup/JS) — a locked-out row can still be
   decremented back to 0 if it already had a stray qty from before locking. */
.na-vqc-locked-out {
  opacity: .4;
}

/* BasketSidebar / TypeGroupSummary panel headers. Deliberately its own class,
   not Bootstrap's .bg-dark utility — Bootstrap's background utilities are
   compiled with !important (confirmed in the real bootstrap.min.css), which
   would make it impossible for a theme skin (theme-schools.css etc.) to ever
   recolour these headers with a plain, non-!important override. Default here
   matches .bg-dark's look so admin/demo pages are unchanged; a theme skin
   only needs one normal-specificity rule to repaint it. */
.na-panel-header {
  background-color: #212529;
  color: #fff;
}

/* activity_picker.php's collapsible category-section toggle (Water/Animals/
   Education) — added 2026-08-21, real gap: the toggle button had no visual
   cue at all that it expanded/collapsed anything, just plain text + a count
   badge. A chevron that rotates on open/close is the standard affordance.
   Bootstrap's own Collapse component already toggles .collapsed on every
   trigger referencing a target as it shows/hides (regardless of which
   trigger was clicked), so this needs no extra JS — pure CSS reacting to
   the class Bootstrap already manages. Theme-neutral (plain grey/dark, like
   .na-panel-header above) — no theme skin needs to touch this. */
.na-act-group-chevron {
  transition: transform .2s ease;
}
.na-act-group-toggle.collapsed .na-act-group-chevron {
  transform: rotate(-90deg);
}

/* step_nav.php — theme-neutral pill shape/sizing; a theme skin (e.g.
   theme-schools.css) supplies the actual colors for the three states below.
   Default colors here (plain greys) are what an untheme'd/admin page gets. */
.na-step-pill {
  display: inline-flex;
  align-items: center;
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.na-step-pill-active {
  background: #212529;
  color: #fff;
}
.na-step-pill-link {
  color: #555;
  background: transparent;
}
.na-step-pill-link:hover {
  background: rgba(0, 0, 0, .05);
  color: #1a1a1a;
}
.na-step-pill-locked {
  color: #adb5bd;
}
.na-step-sep {
  color: #ccc;
  font-weight: 700;
  padding: 0 .1rem;
}

/* ── Page wrap — customer-facing journey pages (Schools/Parties/Xmas), NOT
   admin pages (those stay .container-fluid for full-width management UI).
   Same responsive PERCENTAGE-width convention as the live site's
   .party-wrap (schools_wizard_breadcrumb.php etc.) — not a fixed pixel
   max-width like Bootstrap's .container, so the content genuinely fills a
   consistent proportion of the viewport at every size rather than going
   full-bleed edge-to-edge on ultra-wide monitors or staying needlessly
   narrow on a small tablet. Journey-neutral (no na- component depends on
   this specific width), just the page-level wrapper each journey's own
   entry page applies. */
.na-page-wrap {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .na-page-wrap { width: 94%; }
}
@media (max-width: 480px) {
  .na-page-wrap { width: 98%; }
}

/* basket_sidebar.php — line-item wording shrunk down (2026-08-09, was
   wrapping badly at the sidebar's narrow width, e.g. "Food - Adult Cold
   Platter — Cold — £7.95 ×1"); the price stays at its previous "small"
   size (.875rem via Bootstrap's own .small, applied directly to that span)
   — only the descriptive text needed to shrink. */
.na-basket-line-text {
  font-size: .74rem;
  line-height: 1.35;
}
/* Group headings (FOOD, ACTIVITIES, ROOM). Strengthened 2026-09-03: they were
   .68rem muted grey, which read as a caption rather than a heading, so the
   basket looked like one undifferentiated list. Now they carry the section. */
.na-basket-group-label {
  font-size: .78rem;
  letter-spacing: .08em;
  margin-top: .85rem;
  /* inherit, NOT a fixed colour: the sidebar renders on the dark Christmas
     theme as well as the light ones, and a pinned dark value vanished against
     it. Weight, tracking and the rule carry the emphasis instead. */
  color: inherit;
  padding-bottom: .2rem;
  border-bottom: 2px solid currentColor;
}
.na-basket-lines > .na-basket-group-label:first-child {
  margin-top: 0;
}

/* What a line costs the customer, in words rather than a mechanic (2026-09-03).
   "Included" is deliberately not styled as a price — it is the ABSENCE of one,
   and setting it in the same weight/colour as £26.00 made people read it as a
   figure they had missed. "Upgrade" is a quiet label in front of a real price,
   so the price stays the thing the eye lands on. */
.na-basket-included {
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #198754;
}
.na-basket-upgrade {
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6c757d;
}
.na-basket-gift-legend {
  line-height: 1.35;
  border-top: 1px dashed rgba(0, 0, 0, .12);
  padding-top: .5rem;
}
/* Per-line remove (2026-08-30). Deliberately quiet until the line is hovered:
   the sidebar is a running total the customer reads far more often than they
   edit, and a column of red bins reads as a warning. Always fully visible on
   touch, where there is no hover to reveal it. */
.na-basket-line-remove {
  color: #adb5bd;
  line-height: 1;
  font-size: .8rem;
  opacity: .55;
  transition: opacity .12s, color .12s;
}
.na-basket-line:hover .na-basket-line-remove,
.na-basket-line-remove:focus-visible {
  opacity: 1;
}
.na-basket-line-remove:hover {
  color: #dc3545;
  opacity: 1;
}
.na-basket-line-locked {
  font-size: .75rem;
  opacity: .5;
}
@media (hover: none) {
  .na-basket-line-remove { opacity: 1; }
}

/* Itinerary print (added 2026-08-09) — the on-screen card look (icons,
   Dining/Activities/Food/Bag Storage per group — see
   na_schools_render_itinerary_html() in schools_schedule_sync.php) was
   already right and is unchanged; this is only the PRINT mechanics: a
   button (schools_itinerary.php) plus isolating just the itinerary content
   when printing, same trick the live v3 site's own "Print all group
   itineraries" button uses (src/sections/schools_summary.php there, read
   directly). `.na-itin-page` marks each group's card as its own printed
   page — "1 page per group", the actual ask — via `break-after: page`. */
@media print {
  /* Forces a clean white page regardless of the current theme's body colour
     (e.g. theme-schools.css's mint-green) — otherwise it only prints white
     if the browser's own "background graphics" print option happens to be
     off, which isn't something this stylesheet can rely on. */
  body { background: #fff !important; }
  body * { visibility: hidden; }
  #naItinPrint, #naItinPrint * { visibility: visible; }
  #naItinPrint { position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
  .no-print { display: none !important; }
  .na-itin-page {
    box-shadow: none;
    break-inside: avoid;
    page-break-after: always; /* legacy property name, real browser support */
    break-after: page;
  }
  .na-itin-page:last-child {
    page-break-after: auto;
    break-after: auto; /* no trailing blank page after the last group */
  }
}

/* ── "Included with your tickets" nudge (2026-09-03) ───────────────────────
   Deliberately NOT alert-info. This is the one genuinely good news on the
   page, and the blue info style reads as a system notice — the same weight as
   "choose a date first". Green + a gift icon says benefit, and matches the
   Included badge in the basket the banner points at, so the two read as one
   idea rather than two unrelated messages. */
.na-included-banner {
  border: 1px solid rgba(25, 135, 84, .35);
  border-left: 4px solid #198754;
  background: rgba(25, 135, 84, .07);
  color: inherit;
}
.na-included-banner .bi-gift-fill { color: #198754; }
.na-included-banner-done {
  border-color: rgba(108, 117, 125, .3);
  border-left-color: #6c757d;
  background: rgba(108, 117, 125, .07);
}
.na-included-banner-done .bi-check-circle-fill { color: #198754; }

.na-included-modal-icon {
  font-size: 2.25rem;
  line-height: 1;
  color: #198754;
}

/* The markers the modal just told them to look for. A brief scale pulse rather
   than a colour change: the gift icon's green is already doing the "this one is
   included" job, and recolouring it would say something different for 2 seconds.
   Honoured prefers-reduced-motion — a decorative attention pulse is exactly what
   that setting is for. */
.na-included-pulse {
  display: inline-block;
  animation: na-included-pulse 600ms ease-in-out 4;
  transform-origin: center;
}
@keyframes na-included-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) {
  .na-included-pulse { animation: none; }
}
/* ── activity_picker.php FLAT mode (2026-09-11) + the shared "More…" modal
   (product_more.php). Both live in newapp.css rather than a theme file: they
   are layout, not skin, and Schools/Xmas would want the same shapes if they
   ever switch a list to this treatment. Colours come from whichever theme is
   active, as everywhere else. */
.na-act-panel-img {
  width: 140px;
  height: 105px;
  object-fit: cover;
  border-radius: 10px;
  background: #f0f0f0;
}
.na-act-panel-noimg {
  color: #adb5bd;
  font-size: 2rem;
}
@media (max-width: 575.98px) {
  /* Full width above the text on a phone rather than a thumbnail beside it —
     a 140px image next to wrapped text leaves neither enough room. */
  .na-act-panel-img { width: 100%; height: 160px; }
}

.na-more-image {
  width: 180px;
  height: 135px;
  object-fit: cover;
  border-radius: 10px;
}

/* The Roller description. Its length and markup are not ours to control, so it
   is contained rather than trusted to lay itself out: headings pulled back to
   a sane size, tables made to scroll instead of forcing the modal wider, and
   images kept inside their box. */
.na-more-rich { overflow-wrap: break-word; }
.na-more-rich h3, .na-more-rich h4, .na-more-rich h5, .na-more-rich h6 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1rem 0 .35rem;
}
.na-more-rich p { margin-bottom: .6rem; }
.na-more-rich ul, .na-more-rich ol { padding-left: 1.25rem; margin-bottom: .6rem; }
.na-more-rich img { max-width: 100%; height: auto; }
.na-more-rich table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}
.na-more-rich th, .na-more-rich td {
  border: 1px solid rgba(0, 0, 0, .12);
  padding: .35rem .5rem;
  font-size: .9rem;
}