:root {
  --header-height: 56px;
  --footer-height: 64px;
}

/* iOS "rubber-band" overscroll: pulling past the top of the page used to drag
   the sticky header down and expose a white strip above it. Turning the
   bounce off at the page edges (iOS/Safari 16+) means the header stays put
   and nothing is exposed. Normal scrolling is unaffected. */
html, body {
  overscroll-behavior-y: none;
}

body {
    padding: 0 !important;
    padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom, 0)) !important;
}
main {
  padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom, 0));
} 

main.container {
  padding:0 !important;
}
.app-container {
  background: #ffffff;
  padding: 2rem 1rem;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(28,43,74,0.08);
  box-shadow:
    0 2px 6px rgba(28,43,74,0.08),
    0 12px 40px -12px rgba(28,43,74,0.18);
  box-sizing: border-box;
}
.full-height {
  min-height: calc(100vh - var(--header-height) - var(--footer-height) - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
  min-height: calc(100dvh - var(--header-height) - var(--footer-height) - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
  overflow-y: auto;    
}

.top-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--ast-global-color-1);
  color: #fff;
  padding: 0.25rem 1rem;
  padding-top: env(safe-area-inset-top, 0);  
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  height: calc(var(--header-height) + env(safe-area-inset-top, 0));
}

.top-header .logo img {
  height: 52px;
  width: auto;
}

.bottom-menu {
position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--ast-global-color-1);
  color: #fff;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
  z-index: 1000;
  height: calc(var(--footer-height) + env(safe-area-inset-bottom, 0));  
}

.bottom-menu .menu-buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.7em 0;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));  
}

.bottom-menu .menu-buttons a {
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Switched from Bootstrap Icons (font glyphs) to inline SVG for these
   five nav icons — font-glyph alignment turned out to vary by device
   (font hinting/rendering differs by OS and browser), so per-icon pixel
   nudges tuned on one device would look wrong on another, with no
   stable value to land on. SVG has an explicit, fixed coordinate
   system and renders identically everywhere, which is the actual
   property needed here — not just a preference for the format.
   1.6rem sizing kept to match the previous font-icon scale. */
.nav-icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}
/* Per-icon optical-alignment nudges — found by live-adjusting in
   DevTools against the real rendered nav. Unlike the earlier font-icon
   nudges, these are SVG-based and should hold consistently across
   devices, since SVG has an explicit coordinate system rather than
   depending on a device's own font-rendering engine. transform (not
   top/margin/padding) — a pure paint-time shift, doesn't affect the
   element's own box size or the nav's height. */
.bottom-menu .menu-buttons a[title="Weather"] .nav-icon {
  transform: translateY(-2px);
}
.bottom-menu .menu-buttons a[title="Photos"] .nav-icon {
  transform: translateY(1px);
}
.bottom-menu .menu-buttons a[title="Hunt"] .nav-icon {
  transform: translateY(1px);
}

.bottom-menu .menu-buttons a.active,
.bottom-menu .menu-buttons a:hover {
  color: #ffcc00; 
  background-color: var(--ast-global-color-1);  
}     
.menu-buttons {
  display: flex;
  gap: 0.5rem;
}
.menu-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  padding: 0 0.8rem;
  border-radius: 6px;
  transition: background 0.2s;
  font-size: 1.8rem;
}
.menu-buttons a .active {     
    color: var(--ast-global-color-9);
 }
.menu-buttons a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.menu-buttons .icon {
  height: 24px;
  width: 24px;
}

@media (max-width: 400px) {
  .top-menu {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem;
  }
  
  .menu-buttons {
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
    width: 100%;
  }
    
  .menu-buttons a {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.5rem 0;
  }
}

/* install */
#installPopup {
    position: fixed;
    background: var(--ast-global-color-9);
    color: white;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    font-size: 16px;
    width: 280px;
    z-index: 9999;
    display: none;
	opacity: .85;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
.iphone-popup #installPopup {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
.iphone-popup #popupArrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--ast-global-color-9);
	color: var(--ast-global-color-9);
}
.iphone-chrome-popup #installPopup {
    top: 20px;
    right: 0px;
}
.ipad-popup #installPopup {
    top: 30px;
    right: -55px;
    transform: translateX(-50%);
}
.ipad-popup #popupArrow, .iphone-chrome-popup #popupArrow {
    position: absolute;
    top: -10px;
    right: 5%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--ast-global-color-9);
}
.iphone-chrome-popup #popupArrow {
	    right: 5%;
}
#closePopup {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: white;
}

//* Sweet alert */

.swal2-modal {
  	background-color: rgba(0,0,0,0.69);
  	border: 3px solid #223672;
	max-width: 380px;
}

.swal2-confirm {
  	background-color: #E47A2E !important;
	border: 0;
}
.swal2-confirm:hover, .swal-confirm:not([disabled]):hover {
	background-color: #d1671b;
}
.swal2-confirm.btn-success {
	background-color: green;
	color: white;
}
.swal2-cancel {
	background-color: #EF2B4F;
	color: white;
	border:none;
}

/* -----------------------------------------------------------
   Reusable "settings card" pattern — icon + title + description
   + control. Shared across PWA pages (started on settings.html,
   intended for reuse elsewhere), not the main website — that's
   why this lives here rather than in custom.css. Colors pull
   from the site's existing --ast-global-color-* palette.
----------------------------------------------------------- */
.settings-card {
  background: #fbeee0;
  border-left: 4px solid #e07b39;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 2px 10px rgba(28,43,74,0.08);
  padding: 18px;
  margin-bottom: 16px;
}
.settings-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.settings-card-header i {
  color: var(--ast-global-color-9);
  font-size: 20px;
}
.settings-card-title {
  font-weight: 700;
  color: var(--ast-global-color-1);
  font-size: 20px;
  margin: 0;
}
.settings-card-desc {
  font-weight: 500;
  color: #5a5a5a;
  margin: 0 0 12px;
}
.settings-card .form-control {
  border: 1px solid var(--ast-global-color-11);
  font-size: 18px;
  color: #2a2a2a;
}
/* Bootstrap's .form-switch applies a negative left margin by default (to
   line the switch up with text baseline) — inside a padded .settings-card
   that pushes it out past the card's own left edge. General fix for any
   toggle switch inside a settings-card, not weather-specific.
   Also: label now comes before the input in the HTML (switch on the
   right of its text, not immediately beside it) — flexbox handles that
   positioning directly, so the old margin-left/padding-left hacks
   (which existed specifically to compensate for the switch sitting at
   the container's own left edge) are no longer needed. */
.settings-card .form-switch {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Bootstrap's base .form-check.form-switch sets padding-left:2.5em on
     the CONTAINER itself (reserving space for the switch's own
     absolute/negative-margin positioning in Bootstrap's normal, non-flex
     layout) — never explicitly reset before, so combined with the
     switch's own leftover negative margin this was likely the real
     source of the persistent overlap, not just the input's own margin.
     !important throughout this block since normal specificity guessing
     hasn't reliably won against Bootstrap's own defaults here. */
  padding-left: 0 !important;
}
/* Bootstrap's switch is sized via font-size-relative em units — scaling
   it up directly is simpler and more reliable than recalculating its
   internal background-image/border-radius math by hand. */
.settings-card .form-switch .form-check-input {
  /* THE actual root cause of two previous failed attempts to move this
     element via flexbox: settings.html loads BOTH Bootstrap 4.5.3
     (style.css, the main site's own theme — confirmed via its own
     file header) AND Bootstrap 5.3.2 (CDN) at once. Bootstrap 4's
     .form-check-input rule sets position:absolute — which takes this
     element OUT of normal document flow entirely, meaning it was never
     actually part of the flexbox layout no matter how that layout was
     rearranged. Restoring normal in-flow positioning (Bootstrap 5's own
     intended behavior for this component) is what actually lets flexbox
     govern its position at all. */
  position: static !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  transform: scale(1.4);
  transform-origin: right center;
  flex-shrink: 0;
}
/* Checked-state color is Bootstrap's default blue by default — use the
   site's orange accent instead. */
.settings-card .form-check-input:checked {
  background-color: #e07b39;
  border-color: #e07b39;
}


/* Page-title icon color, used on every PWA page's <h2> (Settings,
   Photos, Schedule, ...). */
h2 i {
  color: var(--ast-global-color-9);
}

/* Home screen's Photos entry point — a slim pill button rather than a
   full .settings-card, since the schedule list right below it already
   uses that card look for every event; giving Photos the same
   treatment made it read as just another (oversized) schedule entry
   instead of a distinct action. */
.home-photos-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto 28px;
  padding: 10px 20px;
  border: 1.5px solid #e07b39;
  border-radius: 999px;
  color: var(--ast-global-color-1);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.home-photos-link:hover {
  background: #fbeee0;
}
.home-photos-link i {
  color: #e07b39;
}
.home-photos-link i.bi-chevron-right {
  font-size: 12px;
}

/* -----------------------------------------------------------
   Schedule/Info toggle card — the whole Schedule/Info block on the
   home page lives inside this one bounded white card, with the toggle
   as its literal first element (matching how the weather popup's own
   Weather/Radar toggle sits at the top of ITS card). Without this
   wrapper, the toggle would float in open page flow below unrelated
   content (the photos link, intro text), reading as misplaced rather
   than anchored to anything.
----------------------------------------------------------- */
.home-tab-card {
  background: #fff;
  border: 1px solid rgba(28,43,74,0.12);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(28,43,74,0.08);
  overflow: hidden;
  margin: 0 8px;
}
.home-tab-toggle {
  display: flex;
}
/* Flat corners explicitly, not just an absent border-radius — browsers
   apply their own default rounding to <button> elements, and leaving
   this unset lets that default quietly reappear (learned the hard way
   on the weather card's own toggle earlier). */
.home-tab-toggle-btn {
  flex: 1;
  background-color: #f0dcc8;
  color: #6b6b6b;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding: 12px 0;
  font-size: 14px;
  cursor: pointer;
}
.home-tab-toggle-btn.active {
  background-color: #e07b39;
  color: #fff;
  font-weight: 500;
}
.home-tab-panel-body {
  padding: 16px 10px;
}

/* -----------------------------------------------------------
   Reusable "schedule" list pattern — a day heading followed by its
   events, each a time column beside a .settings-card body. Originally
   built for schedule.html, now shown on index.html; kept here (not
   page-specific CSS) so any future page can list events the same way.
----------------------------------------------------------- */
.schedule-day + .schedule-day {
  margin-top: 28px;
}
.schedule-day-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.schedule-day-label {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: #1c2b4a;
}
.schedule-day-date {
  font-size: 19px;
  font-weight: 500;
  color: #a5825a;
}
.schedule-event-wrapper {
  margin-bottom: 24px;
  text-align: left;
  /* Border, left accent, radius and shadow now live here — wrapping
     the collapsed row AND the detail panel as one visual unit — rather
     than being split between .schedule-event and .schedule-event-detail
     separately. That split was the actual cause of two things: the
     orange accent line stopping abruptly where the collapsed row ended
     instead of running the full height when expanded, and the lack of
     any single, continuous boundary around an expanded card. */
  border: 1px solid rgba(28,43,74,0.15);
  border-left: 4px solid #e07b39;
  border-radius: 8px;
  overflow: hidden;
}
/* A <button>, not a <div> — free keyboard/screen-reader accessibility
   for a tappable, non-link control, matching how the rest of the app
   already treats this kind of element. Reset to look like plain
   content rather than a native button. */
.schedule-event {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  border: none;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.schedule-event-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.schedule-event-info {
  flex: 1;
  min-width: 0;
}
.schedule-event-time {
  font-size: 14px;
  font-weight: 700;
  color: #e07b39;
  margin-bottom: 2px;
}
.schedule-event-title {
  font-size: 18px;
  font-weight: 700;
  color: #1c2b4a;
}
.schedule-event-chevron {
  flex-shrink: 0;
  color: #a5825a;
  font-size: 16px;
}
.schedule-event-detail {
  background: #fbeee0;
  padding: 16px;
}
/* Generic child-spacing rule, not a per-element-type one — covers
   photo/description/phone/badges/map-link in whatever combination and
   order a given item actually has, rather than enumerating every
   specific pairing (which is what silently missed the phone-link-to-
   badges-row gap: the old rule only matched two adjacent
   .info-item-detail-links, never a link followed by a different kind
   of element). */
.schedule-event-detail > * + * {
  margin-top: 8px;
}
.schedule-event-detail-photo {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}
.schedule-event-detail-desc {
  font-size: 16px;
  color: #1c2b4a;
  line-height: 1.5;
  margin: 0 0 12px;
}
.schedule-event-detail-about {
  margin: 0 0 12px;
  padding-top: 10px;
  border-top: 1px solid #ece1d6;
}
.schedule-event-detail-about p {
  font-size: 14px;
  color: #6b5c4e;
  line-height: 1.5;
  margin: 0 0 8px;
}
.schedule-event-detail-about p:last-child { margin-bottom: 0; }
/* .schedule-event-detail-map (a tappable Google Maps link) and
   .schedule-event-detail-location (plain text, when there's a location
   but no map link for it) share the same icon+text layout — the map
   version additionally gets a white pill background and an external-
   link icon to read as tappable, the plain-text version doesn't. */
.schedule-event-detail-map,
.schedule-event-detail-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}
.schedule-event-detail-map {
  background: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  color: #1c2b4a;
  text-decoration: none;
}
.schedule-event-detail-map i:last-child {
  margin-left: auto;
  color: #a5825a;
  font-size: 13px;
}
.schedule-event-detail-location {
  color: #a5825a;
}

/* -----------------------------------------------------------
   Useful Info list — reuses .schedule-event/.schedule-event-detail
   directly for the collapsed row and expand panel (visual consistency
   between the Schedule and Info tabs), just these two info-specific
   pieces: the subtitle line, and the phone/app-store/website link rows
   inside the expanded detail (same shape as .schedule-event-detail-map
   but reused across up to four different link types per item, not
   just one).
----------------------------------------------------------- */
.info-item-subtitle {
  font-size: 13px;
  color: #a5825a;
  margin-top: 2px;
}
/* Two separate row containers (see info.js) guarantee App Store and
   Google Play always stay paired together on their own row, regardless
   of whether phone/website are present. Every tile is a fixed
   140px x 40px, confirmed correct against a live isolated test page
   (button-test.html) checked directly in DevTools against the real
   badge files — not guessed. object-fit:cover (not stretch, not
   contain) is what makes the visible badge graphic reach the tile's
   edges: the SVG files have some built-in empty margin around the
   visible badge within their own canvas, so cover crops into that
   margin rather than leaving a gap or distorting the image. No
   background color on the badge tiles — the image's own black
   background fills the tile completely via cover, so a separate
   background here was a redundant second layer sitting right behind
   the image's own edge, which is what caused a visible seam/white-line
   artifact in earlier attempts. */
.info-item-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-item-action-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.info-item-action {
  width: 140px;
  height: 40px;
  min-width: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  color: #1c2b4a;
  flex-shrink: 0;
  overflow: hidden;
}
.info-item-action--light {
  background: #fff;
  font-size: 14px;
}
.info-item-action--light i {
  color: #e07b39;
  font-size: 18px;
}
.info-item-action--badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* WhatsApp's badge doesn't share App Store/Google Play's aspect ratio,
   so cover was cropping into its text. contain (no cropping) plus a
   background matching the badge's own green means any leftover space
   from the shape mismatch blends into that green rather than showing
   a visible gap against the page behind it. */
.info-item-action--badge-whatsapp {
  background: #25D366;
}
.info-item-action--badge-whatsapp img {
  object-fit: contain;
}
/* Wraps a badge tile when it has a custom label — the badge itself is
   fixed official artwork with no room for custom text inside it, so a
   caption underneath is the only place that label can actually show. */
.info-item-action-badge-wrapper {
  width: 140px;
  flex-shrink: 0;
}
.info-item-action-badge-wrapper .info-item-action {
  width: 100%;
}
.info-item-action-badge-caption {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #1c2b4a;
  margin-top: 4px;
}
/* -----------------------------------------------------------
   Weather Locations list (settings.html) — the draggable city
   list and the metric/imperial/hybrid unit buttons.
----------------------------------------------------------- */
.weather-cities-list {
  margin: 0 0 12px;
  padding: 0;
}
.weather-cities-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(28,43,74,0.12);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-weight: 500;
  color: #1c2b4a;
  cursor: grab;
}
.weather-cities-list li.alert-city {
  border-left: 4px solid #e07b39;
}
.weather-cities-list .delete-btn {
  background: none;
  border: none;
  color: #a5825a;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  flex: 0 0 auto;
}
.weather-cities-list .lock {
  font-size: 14px;
  flex: 0 0 auto;
}
/* These three buttons share one row (.btn-group, w-100), so each only
   gets ~1/3 of the screen width — Bootstrap's default .btn padding/
   font-size was sized for a single button with a short label, not three
   squeezed side by side with a two-line label each. At the default
   size, the parenthetical unit text wraps a second time, mid-word,
   which is what was inflating the whole row's height. Smaller padding
   and font-size (on both the label and the unit text) gives the units
   line enough room to fit on its own single line instead. */
.unit-btn {
  padding: 0.5rem 0.25rem;
  font-size: 0.85rem;
}
.unit-btn small {
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
}
.unit-btn.active {
  background-color: var(--ast-global-color-9, #0d6efd);
  border-color: var(--ast-global-color-9, #0d6efd);
  color: #fff;
}

/* -----------------------------------------------------------
   Settings page specifics (moved in from settings-style.css —
   no need for a separate file for a project this size)
----------------------------------------------------------- */
body {
  /* style.css already sets font-family: Montserrat as the site default —
     no need to redeclare it. font-size also left at the site's own 1rem
     default now that every visible piece of text here has its own
     explicit size anyway. */
  /* Prevents the browser's automatic scroll-anchoring from silently
     fighting our own scrollTo(0,0) calls whenever inserting the alert
     HTML changes the height of content above the current scroll
     position — a real, documented browser feature, not a guess. */
  overflow-anchor: none;
}
/* Reduces the wide default side padding on pages that use these
   card-style sections rather than the original spacious layout. */
.app-container {
  padding: 1.5rem 0.5rem;
}
#checkTokenBtn, #saveTeamBtn {
  font-size: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.fade-slide {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.fade-slide.show {
  opacity: 1;
  transform: translateY(0);
}
#message:empty {
  display: none;
}
#message {
  scroll-margin-top: calc(var(--header-height) + 16px);
}
.photo-picker-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
#teamPhotoCircle {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  flex-shrink: 0;
}
#teamPhotoPreview {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ast-global-color-9);
  display: none;
}
#teamPhotoPlaceholder {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px dashed var(--ast-global-color-11);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ast-global-color-9);
  font-size: 28px;
}
#teamPhotoBtn {
  background: transparent;
  border: 1px solid var(--ast-global-color-9);
  color: var(--ast-global-color-9);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
}
#teamPhotoBtn:hover {
  background: var(--ast-global-color-10);
}
#cropModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#cropModal.show {
  display: flex;
}
#cropModalCard {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 340px;
  width: 100%;
}
#cropStage {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: #222;
  touch-action: none;
}
#cropImage {
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
#cropGuide {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Spotlight trick: an oversized shadow on a circle darkens everything
     outside it, leaving the circle itself as a clear "this is what gets
     kept" preview, without needing an actual image mask. */
  box-shadow: 0 0 0 999px rgba(0,0,0,0.55);
  pointer-events: none;
}
#cropZoom {
  width: 100%;
  margin-top: 14px;
}
/* Kept technically present (not display:none) since iOS Safari can
   silently refuse to open the file/camera picker via a synthetic
   .click() on a fully display:none input. */
.visually-hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
/* ── Useful Info: collapsible categories, groups, search ─────────────
   Opening a category only adds content under its heading — no
   background/border change — and each category is closed off by the
   same orange rule whether open or closed. Item cards and link tiles
   are the existing ones, untouched. */
.info-search {
  position: relative;
  margin-bottom: 8px;
}
.info-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8a93a6;
  pointer-events: none;
}
.info-search input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(28, 43, 74, 0.2);
  border-radius: 21px;
  padding: 0 14px 0 40px;
  font-size: 14px;
  background: #fff;
}
.info-search input:focus {
  outline: none;
  border-color: #e07b39;
}
.info-cat {
  border-bottom: 2px solid rgba(224, 123, 57, 0.6);
}
.info-cat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Bottom padding is a constant 6px, open or closed, so the title row never
     changes size and the text never moves when a section opens or closes.
     The extra 10px that keeps the closed row's total spacing at 16px lives
     on .info-cat__body below and animates away with the open/close. */
  padding: 16px 2px 6px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
/* ---- Shared expand/collapse (accordion.js) ----------------------------
   One behaviour for the Info categories, Info item rows and Schedule event
   rows: the chevron points down and turns to point up, and the body animates
   open from zero height (grid-rows trick) at the same speed. Named "kk-acc"
   because Bootstrap already defines .accordion-body etc. (with padding). */
.kk-acc-chevron {
  transition: transform 0.25s ease;
}
.kk-acc--open > .kk-acc-trigger .kk-acc-chevron {
  transform: rotate(180deg);
}
.kk-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s;
}
.kk-acc--open > .kk-acc-body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.25s ease, visibility 0s;
}
.kk-acc-inner {
  overflow: hidden;
  min-height: 0;
}

/* Info category specifics (on top of the shared rules above). */
.info-cat__chevron {
  flex-shrink: 0;
  color: #a5825a;
  font-size: 18px;
}
.info-cat__body {
  padding-bottom: 10px;
  transition: grid-template-rows 0.25s ease, padding-bottom 0.25s ease, visibility 0s linear 0.25s;
}
.kk-acc--open > .info-cat__body {
  padding-bottom: 0;
  transition: grid-template-rows 0.25s ease, padding-bottom 0.25s ease, visibility 0s;
}
.info-cat__inner {
  padding: 0 2px;
}
.kk-acc--open > .info-cat__body > .info-cat__inner {
  padding-bottom: 16px;
}
.info-cat__text {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 8px;
}
.info-group__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a5825a;
  padding: 12px 2px 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(224, 123, 57, 0.35);
}
.info-group .schedule-event-wrapper {
  margin-bottom: 10px;
}