/* Focused phone fixes for the map, registration and Tolik. Loaded last. */
@media (max-width:760px) {
  .service-site .registration-phone {display:grid;grid-template-columns:minmax(138px,44%) minmax(0,1fr);gap:8px}
  .service-site .registration-phone :is(select,input) {width:100%;min-height:48px}

  /* The header controls are individual circles, not one dark/grey tile. */
  body.service-site .header .header__actions {
    background:transparent!important;border:0!important;box-shadow:none!important;
    padding:0!important;border-radius:0!important;
  }

  /* Native iOS date/time controls and the four suggested slots stay in the card. */
  body.service-site.venue-page .bookpanel,
  body.service-site.venue-page .bookpanel form,
  body.service-site.venue-page .bookpanel .field {min-width:0;max-width:100%;box-sizing:border-box}
  body.service-site.venue-page .bookpanel :is(input[type=date],input[type=time],input[type=number]) {
    display:block;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
  }
  body.service-site.venue-page .bookpanel .slots {
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;min-width:0;
  }
  body.service-site.venue-page .bookpanel .slot {min-width:0!important;max-width:100%;width:100%;box-sizing:border-box}

  /* Map controls must remain legible over every map tile and in both themes. */
  body.service-site:has(.map-page) .map-filters,
  body.service-site:has(.map-page) .map-route-tip,
  body.service-site:has(.map-page) .map-notice:not(:empty) {
    background:#fffaf5!important;color:#211c18!important;
    border:1px solid #d8cec4!important;box-shadow:0 5px 20px #17110d26!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  body.service-site:has(.map-page) .map-filters :is(summary,label,select,input),
  body.service-site:has(.map-page) .map-route-tip {color:#211c18!important;opacity:1!important}
  body.service-site:has(.map-page) .map-filters .filters-toggle {font-size:15px;font-weight:700}
  body.service-site:has(.map-page) .map-route-tip {font-size:13px}
  body.service-site:has(.map-page) .map-filters input,
  body.service-site:has(.map-page) .map-filters select {background:#fff!important;border-color:#bdb2a7!important}
  body.service-site:has(.map-page) .map-page .leaflet-tile-pane {filter:grayscale(1) contrast(1.05)}
  body.service-site:has(.map-page) .map-locate {bottom:calc(82px + env(safe-area-inset-bottom))}

  :root[data-theme=dark] body.service-site:has(.map-page) .map-filters,
  :root[data-theme=dark] body.service-site:has(.map-page) .map-route-tip,
  :root[data-theme=dark] body.service-site:has(.map-page) .map-notice:not(:empty) {
    background:#29231f!important;color:#f9f5ef!important;border-color:#65584f!important;
  }
  :root[data-theme=dark] body.service-site:has(.map-page) .map-filters :is(summary,label,select,input),
  :root[data-theme=dark] body.service-site:has(.map-page) .map-route-tip {color:#f9f5ef!important}
  :root[data-theme=dark] body.service-site:has(.map-page) .map-filters input,
  :root[data-theme=dark] body.service-site:has(.map-page) .map-filters select {
    background:#211c19!important;border-color:#706359!important;
  }

  /* Voice preferences wrap below the composer instead of clipping offscreen. */
  .service-site #assistantPanel .assistant-voice {
    display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px 16px;
    min-width:0;font-size:12px;
  }
  .service-site #assistantPanel .assistant-voice .tolik-voice-options {max-width:100%}
  .service-site #assistantPanel .assistant-voice .tolik-voice-options summary {
    white-space:normal;font-size:12px;min-height:30px;
  }
}
@media (max-width:380px) {
  .service-site .registration-phone {grid-template-columns:minmax(0,1fr)}
}

@media (max-width:760px) {
  /* The repeat action needs a full row; the small details arrow owns column 3. */
  .service-site .guest-history__row > .btn:not(.btn--quiet) {
    grid-column:1/-1;grid-row:3;max-width:100%;white-space:normal;
  }
  .service-site .guest-history__row > .btn--quiet {
    grid-column:3;grid-row:1/3;min-width:0;width:30px;padding:6px;
  }
}

@media (max-width:760px) {
  /* A wide film cannot cover a portrait page without cropping most of the scene. */
  body.home-page .intro {display:flex;flex-direction:column}
  body.home-page .intro .intro-film {
    position:relative;inset:auto;transform:none;order:0;
    width:100%;height:auto;aspect-ratio:16/9;margin:0;overflow:hidden;border-radius:0;
    background:#111411;z-index:0;
  }
  body.home-page .intro .intro-header {order:-1}
  body.home-page .intro .intro-film video {
    display:block;width:100%;height:100%;object-fit:contain;object-position:center;
    border-radius:0;
  }
  body.home-page .intro .intro-shade {display:none}
  body.home-page .intro .intro-copy {position:relative;margin:22px 24px 36px;z-index:1}
}