/*
 * The consent bar (owner handoff 2026-10-27, docs/IP-Analytics-GA4.md section 4): the strip across the bottom of the screen that asks
 * before Google Analytics may load. Markup: web/partials/consent-banner.blade.php; behaviour: public/js/ip-analytics.js. The shape is the
 * one the owner chose on 2026-10-27 - no heading, one short paragraph with a "Learn more" link on the left, the two buttons on the right,
 * under the text on a phone - and the look is his "Option B, brand blue" of 2026-10-28 (handoff IP-Handoff-Cookie-Banner-Style,
 * docs/IP-Analytics-GA4.md 13.2 item 19: the dark strip blended with the footer and the page; "it is information, not a warning, so no
 * warning colors"): a brand-blue bar with a 1px light edge and a shadow thrown upward over the page, white text and a white Phosphor
 * "info" icon, and two buttons of ONE size, weight and shape (the handoff's equal choice) that differ only in fill - Accept white with
 * brand-blue text, Decline transparent with a white border. The design system has no button on a blue surface, so the two are the bar's
 * own (.ip-consent__btn) at the Button component's medium size (40px high, 14px). Tokens only; every rule starts from a class that exists
 * only here (.ip-consent-live, .ip-consent, .ip-consent__*, .ip-consent-open), so nothing else on the site can be touched. Linked by
 * web.layouts.header only on a page that carries analytics (App\Support\Analytics::enabled()).
 *
 * Sizes from the handoff that are not on the spacing scale (--space-* has 12 and 16, not 10, 14 or 20) are written as the owner approved
 * them in the mock: the bar's padding 14px 20px, the buttons' 0 20px, 10px between the buttons, the 22px icon.
 */

/* The strip at the bottom of the screen. It is as high as the bar (nothing when the bar is hidden) and lets every click through except the
   ones that land on the bar itself. Above the header (9999), the phone search sheets and the map controls; a native <dialog> opened with
   showModal() (the login modal) is in the top layer and still covers it. */
.ip-consent-live {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  pointer-events: none;
}

.ip-consent {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  /* the notch and the home bar of a phone included */
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--brand-blue, #3270a2);
  color: var(--ink-inverse, #ffffff);
  /* the light edge and the upward shadow keep the bar apart from the page and from the dark footer, which is close to the blue in brightness */
  border-top: 1px solid var(--info-border, #d3e2ec);
  box-shadow: var(--elevation-up-on-dark, 0 -2px 8px rgba(0, 0, 0, 0.25));
  font-family: var(--font-sans, "Lato", system-ui, sans-serif);
  /* never taller than the screen: the text scrolls inside the bar on a very small one */
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
}

/* One row from 700px up: the icon and the message on the left, the two buttons on the right. */
.ip-consent__inner {
  box-sizing: border-box;
  max-width: var(--container-max, 1184px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
}

.ip-consent__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
/* Phosphor Regular "info", the public site's icon font; decorative (aria-hidden in the markup) */
.ip-consent__icon {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  margin-right: var(--space-3, 12px);
  color: var(--ink-inverse, #ffffff);
}
.ip-consent__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.ip-consent__text,
.ip-consent__gpc {
  margin: 0;
  font-size: var(--button-md-size, 14px);
  font-weight: 400;
  line-height: 20px;
  color: var(--ink-inverse, #ffffff);
}
/* the programmatic focus target when the bar is opened from the footer link */
.ip-consent__text[tabindex="-1"]:focus {
  outline: none;
}
.ip-consent__gpc {
  margin-top: var(--space-1, 4px);
  font-weight: 600;
}
.ip-consent__gpc[hidden] {
  display: none;
}

.ip-consent__link {
  color: var(--ink-inverse, #ffffff);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
/* the link stays white in every state (the site's own a:hover / a:focus colours are for light pages); hover thickens the underline */
.ip-consent__link:hover,
.ip-consent__link:focus,
.ip-consent__link:active {
  color: var(--ink-inverse, #ffffff);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.ip-consent__link:focus-visible {
  outline: 2px solid var(--ink-inverse, #ffffff);
  outline-offset: 2px;
}

/* Two buttons of the same size, weight and shape - the handoff's equal choice; only the fill differs, and a hover only changes the fill. */
.ip-consent__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}
.ip-consent__btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 112px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--ink-inverse, #ffffff);
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-sans, "Lato", system-ui, sans-serif);
  font-size: var(--button-md-size, 14px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease;
}
.ip-consent__btn--accept {
  background: var(--ink-inverse, #ffffff);
  color: var(--brand-blue, #3270a2);
}
.ip-consent__btn--accept:hover {
  background: var(--button-outline-hover, #eef3f7);
}
.ip-consent__btn--decline {
  background: transparent;
  color: var(--ink-inverse, #ffffff);
}
.ip-consent__btn--decline:hover {
  background: var(--chip-inverse-hover, rgba(255, 255, 255, 0.12));
}
/* the keyboard focus ring: 2px white, 2px out; a mouse click shows none (the browser's own ring would) */
.ip-consent__btn:focus:not(:focus-visible) {
  outline: none;
}
.ip-consent__btn:focus-visible {
  outline: 2px solid var(--ink-inverse, #ffffff);
  outline-offset: 2px;
}

/* While the bar is open (ip-analytics.js puts .ip-consent-open on <html> and writes the bar's measured height to --ip-consent-height) the
   footer keeps that height free under its last line, so the bar covers no footer text when the page is scrolled to its end. */
.ip-consent-open #footer {
  padding-bottom: var(--ip-consent-height, 200px);
}
/* The two controls fixed to the bottom of a results page - the Mapa / Lista bar (.footer-nav, web.css) and the back-to-top button - sit
   above the open bar instead of behind it (handoff section 2 item 5: the bar covers no map control). Only their distance from the bottom
   edge moves, by the bar's height; their own rules are untouched and apply again the moment the bar closes. The back-to-top keeps its
   12px (its own rule adds the phone's home-indicator area; the bar's height already includes it). */
.ip-consent-open .footer-nav {
  bottom: var(--ip-consent-height, 200px);
}
.ip-consent-open #back-to-top {
  bottom: calc(12px + var(--ip-consent-height, 200px));
}

/* Under 700px (the design system's tablet breakpoint): the message on top, the two buttons under it sharing the row. */
@media (max-width: 699.98px) {
  .ip-consent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3, 12px);
  }
  .ip-consent__actions {
    flex-wrap: wrap;
  }
  /* each button keeps its words on one line; the two share the row as equals while both fit (the long Polish "Odrzuć niekonieczne" takes its
     own width on the narrowest screens), and a very narrow screen puts the second under the first */
  .ip-consent__btn {
    flex: 1 1 0;
  }
}