/*
Theme Name: aretaxi
Theme URI: https://www.are.taxi/
Description: Modular theme for ÅreTaxi Group
Author: Åre Taxi & Transport AB
Version: 2.0
Text Domain: aretaxi
*/

/* ============================================================
   GLOBAL DESIGN TOKENS
   - Brand colors, shadows, layout widths
   ============================================================ */
:root {

  /* ============================================================
     ÅreTaxi Brand Color Palette
     ============================================================ */

  /* ÅreTaxi Red - Core brand color */
  --are-red: #E52713;

  /* ÅreTaxi Green — CMYK 78,0,92,0 — RGB 27,179,86 */
  --are-green: #1BB356;

  /* ÅreTaxi Blue — Pantone Process Blue C — RGB 0,136,206 */
  --are-blue: #0088CE;

  /* ÅreTaxi Gray — Pantone 877 C — RGB 128,128,128 */
  --are-gray: #808080;

  /* ÅreTaxi Dark Gray — Pantone Black 6 C — RGB 13,19,25 */
  --are-dark-gray: #0D1319;

  /* ÅreTaxi Light Gray — soft 92% UI-friendly gray */
  --are-light-gray: #E9EBEE;

  /* NEW: ÅreTaxi Black — pure black for footers, etc. */
  --are-black: #000000;
  --are-white: #ffffff;

  /* ÅreTaxi White — Panel Colors */
  --are-panel-color-1: #ffffff;
  --are-panel-color-2: #f9f9f9;
  --are-panel-color-3: #123456;
  
  /* Main Theme Color */    
  --are-color: var(--are-red); /* main accent color (easily swappable) */

  /* Semantic "info" accent — used by informational modals, notices,
     etc. Swappable independently of --are-color so a re-brand of the
     primary accent doesn't accidentally repaint info surfaces. */
  --are-info: var(--are-blue);

  --page-bg: #ffffff;
  --text-main: #000000; /* was #111111 */

  --border-light: rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 10px 28px rgba(0, 0, 0, 0.12);

  --wrap-max-width: 1200px;
  --wrap-pad-x: clamp(1rem, 3vw, 2rem);

  /* ============================================================
     GLOBAL TEXT LINK TOKENS
     ============================================================ */
  --link-color: var(--are-dark-gray);
  --link-hover-color: var(--are-color);
  --link-weight-normal: 400;
  --link-weight-hover: 500;

  /* ============================================================
     RESPONSIVE BREAKPOINT TOKENS (REFERENCE ONLY)
     ============================================================ */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  
  --bp-tablet-max: 1160px;
  --bp-mobile-max: 768px;
  --bp-desktop-min: 1161px;


  /* ============================================================
     TYPOGRAPHY TOKENS – BODY & HEADINGS
     ============================================================ */

  /* Body typography */
  --font-body-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-body-line-height: 1.5;
  --font-body-color: var(--text-main);

  /* Global heading typography */
  --font-heading-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading-weight: 700;
  --font-heading-color: #000000;
  --font-heading-line-height: 1.2;
  --font-heading-margin: 0 0 0 0;
  --font-heading-text-transform: uppercase;

  /* Small/caption text (e.g. tooltips, fine print) */
  --font-caption-size: 0.8rem;

  /* H1 clamp scale */
  --h1-size-min: 1.6rem;
  --h1-size-fluid: 2.5vw;
  --h1-size-max: 2.0rem;

  /* H2 clamp scale */
  --h2-size-min: 1.1rem;
  --h2-size-fluid: 2.0vw;
  --h2-size-max: 1.5rem;

  /* H3 clamp scale */
  --h3-size-min: 0.9rem;
  --h3-size-fluid: 1.8vw;
  --h3-size-max: 1.2rem;

  /* Section heading utility */
  --section-heading-font-weight: 700;
  --section-heading-text-transform: uppercase;
  --section-heading-letter-spacing: 0.1em;
  --section-heading-line-height: 1.2;
  --section-heading-text-align: center;
  --section-heading-margin: 0 0 2rem 0;

  --section-heading-size-min: 1.6rem;
  --section-heading-size-fluid: 3.0vw;
  --section-heading-size-max: 2.0rem;

  --section-heading-size-min-desktop: 1.6rem;
  --section-heading-size-fluid-desktop: 2.0vw;
  --section-heading-size-max-desktop: 2.4rem;

  /* Content heading utility */
  --content-heading-font-weight: 700;
  --content-heading-text-transform: uppercase;
  --content-heading-letter-spacing: 0.0em;
  --content-heading-line-height: 1.2;
  --content-heading-text-align: center;
  --content-heading-margin: 0 0 1rem 0;

  --content-heading-size-min: 1.1rem;
  --content-heading-size-fluid: 2.5vw;
  --content-heading-size-max: 1.3rem;

  --content-heading-size-min-desktop: 1.2rem;
  --content-heading-size-fluid-desktop: 1.2vw;
  --content-heading-size-max-desktop: 1.5rem;


  /* ============================================================
     GLOBAL BUTTON TOKENS
     ============================================================ */
  --btn-radius: 2px;
  --btn-primary-bg: var(--are-color);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: var(--are-light-gray);
  --btn-secondary-text: var(--are-dark-gray);
  --btn-border-width: 2px;
  --btn-padding-xl: 1.4rem 3rem;
  --btn-padding-lg: 0.9rem 1.6rem;
  --btn-padding-sm: 0.55rem 1.2rem;
  --btn-padding-xsm: 0.25rem 0.8rem;
  --btn-font-xl: 1.35rem;
  --btn-font-lg: 0.95rem;
  --btn-font-sm: 0.8rem;
  --btn-font-xsm: 0.7rem;
  --btn-font-weight: 700;
  --btn-letter-spacing: 0.08em;
  --btn-text-transform: uppercase;

  --btn-transition: background-color 0.18s ease, color 0.18s ease,
                    border-color 0.18s ease, transform 0.12s ease;


  /* ============================================================
     GLOBAL SPACING TOKENS (added)
     ============================================================ */
  --gap-sm: 1rem;
  --gap-md: 2rem;
  --gap-lg: 3rem;

  /* ============================================================
     GLOBAL ICON SIZE TOKENS (added)
     ============================================================ */
  --icon-size-sm: 1.2rem;
  --icon-size-md: 1.6rem;
  --icon-size-lg: 2.0rem;

  --icon-circle-size-sm: 2.5rem;
  --icon-circle-size-md: 3.25rem;
  --icon-circle-size-lg: 4rem;

  /* ============================================================
     GLOBAL TOOLTIP TOKENS (used e.g. by map-section)
     ============================================================ */
  --tooltip-bg: rgba(0, 0, 0, 0.8);
  --tooltip-color: #ffffff;
  --tooltip-radius: 0.4rem;
  --tooltip-padding-y: 0.4rem;
  --tooltip-padding-x: 0.6rem;
}

/* ============================================================
   GLOBAL LINK BEHAVIOR
   ============================================================ */
a {
  font-weight: var(--link-weight-normal);
  text-decoration: none;
  color: var(--link-color);
}

a:hover {
  font-weight: var(--link-weight-hover);
  text-decoration: none;
  color: var(--link-hover-color);
}

/* ============================================================
   GLOBAL RESET / BASE LAYOUT
   ============================================================ */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--page-bg);
  color: var(--font-body-color);
  line-height: var(--font-body-line-height);
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  margin: 0 0 1rem 1.5rem;
  padding: 0;
}

.wrap {
  max-width: var(--wrap-max-width);
  margin: 0 auto;
  padding-left: var(--wrap-pad-x);
  padding-right: var(--wrap-pad-x);
}

a:focus {
  outline: 2px solid var(--are-color);
  outline-offset: 2px;
}

/* Focus: no ring after a mouse click or tap, a ring in the house colour
   when moving with the keyboard (Tab). Fields (input / select / textarea)
   show their own ring instead (a box-shadow, the house fields), so they
   get no outline on top. */
*:focus:not(:focus-visible) {
  outline: none !important;
}
:focus-visible {
  outline: 2px solid var(--are-color, #E52713);
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* ============================================================
   TYPOGRAPHY BASELINE
   ============================================================ */

html, body {
  font-family: var(--font-body-family) !important;
}

h1, h2, h3 {
  font-family: var(--font-heading-family) !important;
  font-weight: var(--font-heading-weight);
  color: var(--font-heading-color);
  margin: var(--font-heading-margin);
  line-height: var(--font-heading-line-height);
}

h1 {
  font-size: clamp(var(--h1-size-min), var(--h1-size-fluid), var(--h1-size-max));
  text-transform: var(--font-heading-text-transform);
}

h2 {
  font-size: clamp(var(--h2-size-min), var(--h2-size-fluid), var(--h2-size-max));
  text-transform: var(--font-heading-text-transform);
}

h3 {
  font-size: clamp(var(--h3-size-min), var(--h3-size-fluid), var(--h3-size-max));
  text-transform: var(--font-heading-text-transform);
}

/* Visually hidden, still read by screen readers and search engines
   (e.g. the H1 on pages whose caption is hidden by design). */
.atx-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   GLOBAL SECTION HEADING UTILITY
   ============================================================ */

.atx-section-heading {
  font-weight: var(--section-heading-font-weight);
  text-transform: var(--section-heading-text-transform);
  letter-spacing: var(--section-heading-letter-spacing);
  line-height: var(--section-heading-line-height);
  text-align: var(--section-heading-text-align);
  margin: var(--section-heading-margin);

  font-size: clamp(
    var(--section-heading-size-min),
    var(--section-heading-size-fluid),
    var(--section-heading-size-max)
  );
}

@media (min-width: 768px) {
  .atx-section-heading {
    font-size: clamp(
      var(--section-heading-size-min-desktop),
      var(--section-heading-size-fluid-desktop),
      var(--section-heading-size-max-desktop)
    );
  }
}

/* ============================================================
   GLOBAL CONTENT HEADING UTILITY
   ============================================================ */

.atx-content-heading {
  font-weight: var(--content-heading-font-weight);
  text-transform: var(--content-heading-text-transform);
  letter-spacing: var(--content-heading-letter-spacing);
  line-height: var(--content-heading-line-height);
  margin: var(--content-heading-margin);
  text-align: var(--content-heading-text-align);

  font-size: clamp(
    var(--content-heading-size-min),
    var(--content-heading-size-fluid),
    var(--content-heading-size-max)
  );
}

@media (min-width: 768px) {
  .atx-content-heading {
    font-size: clamp(
      var(--content-heading-size-min-desktop),
      var(--content-heading-size-fluid-desktop),
      var(--content-heading-size-max-desktop)
    );
  }
}

/* ============================================================
   GLOBAL IDENTITY STRIP – ÅreTaxi
   "Användare: <namn>" line auto-injected at the top of internal
   pages by atx-access (class-atx-identity.php) and also rendered
   by the [atx_user_identity] shortcode.
   ============================================================ */

.atx-user-identity {
  margin: 0.75rem 0 1.25rem;
  font-size: 0.9rem;
  color: #6a6f76;
  line-height: 1.4;
}
.atx-user-identity__label { color: #6a6f76; }
.atx-user-identity__name  { color: #222; font-weight: 600; }

/* ============================================================
   GLOBAL BUTTON SYSTEM – ÅreTaxi
   ============================================================ */

.atx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: inherit;
  font-weight: var(--btn-font-weight);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);

  border-radius: var(--btn-radius);
  border: var(--btn-border-width) solid var(--btn-primary-bg);
  cursor: pointer;
  text-decoration: none;

  transition: var(--btn-transition);
}

.atx-btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

.atx-btn--secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-bg);
}

.atx-btn--xl {
  padding: 1.4rem 1.5rem;       /* mobil-default: kompakt horisontell padding */
  font-size: 1.2rem;
  min-width: auto;
}
@media (min-width: 600px) {
  .atx-btn--xl {
    padding: var(--btn-padding-xl);
    font-size: var(--btn-font-xl);
    min-width: 14rem;
  }
}

.atx-btn--lg {
  padding: var(--btn-padding-lg);
  font-size: var(--btn-font-lg);
}

.atx-btn--sm {
  padding: var(--btn-padding-sm);
  font-size: var(--btn-font-sm);
}

.atx-btn--xsm {
  padding: var(--btn-padding-xsm);
  font-size: var(--btn-font-xsm);
}

.atx-btn--primary:hover,
.atx-btn--secondary:hover {
  background-color: #ffffff;
  color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  transform: translateY(-1px);
}

/* --danger: a destructive action (Ta bort, Radera) — always the error red,
   not the house colour, so it reads the same on every site. */
.atx-btn--danger {
  background-color: var(--atx-error, #dc2626);
  color: #fff;
  border-color: var(--atx-error, #dc2626);
}
.atx-btn--danger:hover {
  background-color: #fff;
  color: var(--atx-error-text, #991b1b);
  border-color: var(--atx-error, #dc2626);
  transform: translateY(-1px);
}

.atx-btn:focus-visible {
  outline: 2px solid var(--are-color);
  outline-offset: 2px;
}

.atx-btn[disabled],
.atx-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ============================================================
   "MORE" LINK – ÅreTaxi house style
   Text links that lead on ("Visa fler tjänster ›", "Läs mer ›",
   "Alla nyheter ›" …): black, bold capitals, --are-color on hover.
   The › is part of the text.
   ============================================================ */
.atx-more-link,
a.atx-more-link,
button.atx-more-link {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: none;
  color: var(--text-main);
  cursor: pointer;
  transition: color 0.18s ease;
}
.atx-more-link:hover,
.atx-more-link:focus-visible,
a.atx-more-link:hover,
button.atx-more-link:hover {
  color: var(--are-color);
  font-weight: 700;
  text-decoration: none;
}

/* ============================================================
   GLOBAL RESPONSIVE UTILITIES – MOBILE FIRST
   ============================================================ */

.atx-section {
  padding: 2.5rem 0;
}

.atx-section--tight {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.atx-section--loose {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.atx-section__inner {
  max-width: 100%;
  margin: 0 auto;
}

.atx-grid {
  display: grid;
  gap: 1.5rem;
}

.atx-grid--2,
.atx-grid--3,
.atx-grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .atx-section {
    padding: 3rem 0;
  }
  .atx-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .atx-section {
    padding: 3.5rem 0;
  }
  .atx-section__inner {
    max-width: 90%;
  }
  .atx-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .atx-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .atx-section__inner {
    max-width: 80%;
  }
}

@media (min-width: 1280px) {
  .atx-section__inner {
    max-width: 70%;
  }
}


/************************************/
/* Scroll offsset #anchor */

.scroll-offset {
  scroll-margin-top: 150px; 
}

@media (max-width: 768px) {
  .scroll-offset {
    scroll-margin-top: 90px;
  }
}


/* ============================================================
   FIELD LABEL – ÅreTaxi house style
   The label above a form field: small, semi-bold, grey capitals
   (as in the booking form). No colon in the text.

   Markup:
     <label class="atx-label" for="…">Från</label>
   ============================================================ */
.atx-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
}


/* ============================================================
   CHECKBOXES AND RADIOS – ÅreTaxi house style
   Every checkbox and radio is brand red (accent-color), site-wide.
   A choice with its text: <label class="atx-check"><input type="checkbox"> Text</label>
   (18px box, normal text; --sm: 14px, for pickers in list rows).
   Several radios / checkboxes in a row: <div class="atx-choices">…</div>.
   ============================================================ */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--are-color, #E52713); }
.atx-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.atx-check > input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.atx-check--sm > input { width: 14px; height: 14px; }
.atx-choices { display: flex; flex-wrap: wrap; gap: 8px 18px; }


/* ============================================================
   STATUS BADGES – ÅreTaxi house style
   A small rounded label with a state: <span class="atx-badge atx-badge--ok">Klar</span>.
   Fixed state colours (not the house colour — green is ok, red is an
   error, whatever the site's colour):
     --pending  yellow (väntar, inskickad)   --ok     green (klar, godkänd)
     --error    red (avvisad, pausad)        --alert  solid red (avbokad)
     --info     blue                         --violet violet (sajt, agent)
     --muted    grey text (okänd, utkast)    (none)   neutral grey
   ============================================================ */
.atx-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: #f3f4f6;
  color: #374151;
}
.atx-badge--pending { background: #fef3c7; color: #92400e; }
.atx-badge--ok      { background: #d1fae5; color: #065f46; }
.atx-badge--error   { background: #fee2e2; color: #991b1b; }
.atx-badge--alert   { background: #ef4444; color: #fff; }
.atx-badge--info    { background: #dbeafe; color: #1e3a8a; }
.atx-badge--violet  { background: #e0e7ff; color: #3730a3; }
.atx-badge--muted   { background: #f3f4f6; color: #6b7280; }


/* ============================================================
   FIELD WITH BUTTON – ÅreTaxi house style
   A field (select / text) with a button on its right edge (a chevron, a
   calendar, a clock: __icon--chevron / --date / --time): one border line, the button grey, the house colour on
   hover / open, the focus ring round both. The names .atx-bkl-field-*
   come from the bookings list (used by many modules and its JS);
   .atx-fieldbtn* is the same for new code:
     <span class="atx-fieldbtn">            (= .atx-bkl-field-control)
       <input type="text">
       <button type="button" class="atx-fieldbtn__toggle">   (= .atx-bkl-field-toggle)
         <span class="atx-fieldbtn__icon atx-fieldbtn__icon--date"></span>
       </button>
     </span>
   --compact: a 32px button, for dense table fields (reports).
   --date: a date field; side by side on a phone without the button.
   The field rules are one class stronger, so a module's own field rules
   (.atx-bkl-ctl select …) never take the square inner corners away.
   ============================================================ */
.atx-bkl-field-control,
.atx-fieldbtn {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border-radius: var(--atx-bk-radius, 0.5rem);
  transition: box-shadow 0.15s ease;
}
.atx-bkl-field-control.atx-bkl-field-control > select,
.atx-bkl-field-control.atx-bkl-field-control > input[type="text"],
.atx-fieldbtn.atx-fieldbtn > select,
.atx-fieldbtn.atx-fieldbtn > input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  cursor: pointer;
}
.atx-bkl-field-control:focus-within,
.atx-fieldbtn:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--are-color, #E52713) 15%, transparent);
}
.atx-bkl-field-control.atx-bkl-field-control:focus-within > select,
.atx-bkl-field-control.atx-bkl-field-control:focus-within > input[type="text"],
.atx-bkl-field-control:focus-within > .atx-bkl-field-toggle,
.atx-fieldbtn.atx-fieldbtn:focus-within > select,
.atx-fieldbtn.atx-fieldbtn:focus-within > input[type="text"],
.atx-fieldbtn:focus-within > .atx-fieldbtn__toggle {
  border-color: var(--atx-bk-accent, var(--are-color, #E52713));
}
.atx-bkl-field-control.atx-bkl-field-control:focus-within > select,
.atx-bkl-field-control.atx-bkl-field-control:focus-within > input[type="text"],
.atx-fieldbtn.atx-fieldbtn:focus-within > select,
.atx-fieldbtn.atx-fieldbtn:focus-within > input[type="text"] { box-shadow: none; }

.atx-bkl-field-toggle,
.atx-fieldbtn__toggle {
  box-sizing: border-box; /* 48px with its border, as wide as a stepper's ± */
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #f5f5f5;
  border: 1px solid var(--atx-bk-border-strong, #aaa);
  border-top-right-radius: var(--atx-bk-radius, 0.5rem);
  border-bottom-right-radius: var(--atx-bk-radius, 0.5rem);
  color: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.atx-bkl-field-toggle:hover,
.atx-bkl-field-toggle:active,
.atx-bkl-field-toggle.is-open,
.atx-fieldbtn__toggle:hover,
.atx-fieldbtn__toggle:active,
.atx-fieldbtn__toggle.is-open {
  background: var(--atx-bk-accent, var(--are-color, #E52713));
}
.atx-bkl-field-toggle-icon,
.atx-fieldbtn__icon {
  display: block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: filter 0.12s ease, transform 0.15s ease;
}
.atx-bkl-field-toggle-icon--chevron,
.atx-fieldbtn__icon--chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
}
.atx-bkl-field-toggle-icon--date,
.atx-fieldbtn__icon--date {
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23333' d='M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24v40H64C28.7 64 0 92.7 0 128v16 48v272c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24v40H152V24zM48 192h80v56H48v-56zm0 104h80v64H48v-64zm128 0h96v64h-96v-64zm144 0h80v64h-80v-64zm80-48h-80v-56h80v56zm0 160v40c0 8.8-7.2 16-16 16h-64v-56h80zm-128 0v56h-96v-56h96zm-144 0v56H64c-8.8 0-16-7.2-16-16v-40h80zm96-160h-96v-56h96v56z'/%3E%3C/svg%3E");
}
.atx-bkl-field-toggle-icon--time,
.atx-fieldbtn__icon--time {
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333' d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120v136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");
}
.atx-bkl-field-toggle:hover .atx-bkl-field-toggle-icon,
.atx-bkl-field-toggle:active .atx-bkl-field-toggle-icon,
.atx-bkl-field-toggle.is-open .atx-bkl-field-toggle-icon,
.atx-fieldbtn__toggle:hover .atx-fieldbtn__icon,
.atx-fieldbtn__toggle:active .atx-fieldbtn__icon,
.atx-fieldbtn__toggle.is-open .atx-fieldbtn__icon {
  filter: brightness(0) invert(1);
}
.atx-bkl-field-toggle.is-open .atx-bkl-field-toggle-icon--chevron,
.atx-fieldbtn__toggle.is-open .atx-fieldbtn__icon--chevron {
  transform: rotate(180deg);
}
/* --compact: dense table fields */
.atx-fieldbtn--compact > .atx-fieldbtn__toggle,
.atx-fieldbtn--compact > .atx-bkl-field-toggle { flex-basis: 32px; }
.atx-fieldbtn--compact .atx-fieldbtn__icon,
.atx-fieldbtn--compact .atx-bkl-field-toggle-icon { width: 12px; height: 12px; }
/* --date: a date field (ATX.dateField; a tap in the field opens the
   calendar too). Two side by side on a phone (.atx-form-row--keep): no
   calendar button, so the date fits ("14 nov 2026"); the field gets its
   own right edge back and the × (.atx-combo__clear) sits at the edge. */
@media (max-width: 480px) {
  .atx-form-row--keep .atx-fieldbtn--date > .atx-fieldbtn__toggle { display: none; }
  .atx-form-row--keep .atx-fieldbtn--date { --atx-combo-toggle-w: 0px; }
  .atx-form-row--keep .atx-fieldbtn--date > input[type="text"]:is(input, #atx-never) {
    border-right: 1px solid var(--atx-bk-border-strong, #aaa);
    border-top-right-radius: var(--atx-bk-radius, 0.5rem);
    border-bottom-right-radius: var(--atx-bk-radius, 0.5rem);
  }
  .atx-form-row--keep .atx-fieldbtn--date:focus-within > input[type="text"]:is(input, #atx-never) {
    border-color: var(--atx-bk-accent, var(--are-color, #E52713));
  }
}


/* ============================================================
   STEPPER – ÅreTaxi house style (− 1 +)
   One frame round the buttons and the value; the buttons grey, the house
   colour on hover; a disabled button faded:
     <div class="atx-stepper">
       <button type="button" class="atx-stepper__btn">−</button>
       <output class="atx-stepper__value">1</output>      (or a div / an input)
       <button type="button" class="atx-stepper__btn">+</button>
     </div>
   --block: the full width (the value takes the room). --compact: a dense
   report form (32px buttons, the report field look). The buttons' width
   is width, not flex-basis, so a module can narrow them (teaser, phone).
   ============================================================ */
.atx-stepper {
  display: inline-flex;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.atx-stepper--block { display: flex; width: 100%; }
.atx-stepper:focus-within {
  border-color: var(--are-color, #E52713);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--are-color, #E52713) 15%, transparent);
}
.atx-stepper > .atx-stepper__btn {
  flex: 0 0 auto;
  width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #f5f5f5;
  color: inherit;
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.atx-stepper > .atx-stepper__btn:hover:not(:disabled),
.atx-stepper > .atx-stepper__btn:active:not(:disabled) {
  background: var(--are-color, #E52713);
  color: #fff;
}
.atx-stepper > .atx-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.atx-stepper > .atx-stepper__value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: 56px;
  min-height: 0;
  margin: 0;
  padding: 0 0.875rem;
  border: 0;
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}
.atx-stepper > input.atx-stepper__value:focus { outline: none; box-shadow: none; }
.atx-stepper:not(.atx-stepper--block) > .atx-stepper__value { flex: 0 0 auto; }
/* --block: the number takes what the buttons leave — from 0, not from the
   browser's own text-field width (~20 characters), so a block stepper
   never pushes the field next to it off its row. */
.atx-stepper--block > .atx-stepper__value { flex: 1 1 0; width: 0; }
/* --compact: the report forms' field look */
.atx-stepper--compact { border-color: #d0d7de; border-radius: 4px; }
.atx-stepper--compact > .atx-stepper__btn { width: 32px; min-height: 0; background: #f3f4f6; color: #4b5563; font-size: 1rem; }
.atx-stepper--compact > .atx-stepper__value { min-width: 0; padding: 6px 8px; border-color: #d0d7de; font-size: 0.9rem; font-weight: 400; }


/* ============================================================
   LOADING – ÅreTaxi house style
   The pin with the snowflake turning (the brand's pin and flake, vector,
   from "Kartnål Original 100x100mm v5"): the pin in the house colour, the
   flake white, one turn in 2 s.
     <span class="atx-loader" role="status" aria-label="Laddar"></span>     48px
     <span class="atx-loader atx-loader--lg"></span>                          72px
   Small (in a button, beside "Hämtar …"): only the flake, in the text colour:
     <span class="atx-spinner" aria-hidden="true"></span>                    18px
   --atx-pin / --atx-flake (whole artboard) / --atx-flake-crop (the flake
   alone) are masks for other uses (custom.css: the loading button).
   ============================================================ */
:root {
  --atx-pin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1575 1575%22%3E%3Cg transform=%22matrix(-0.682624,0,0,0.682624,1259.77,62.5993)%22%3E%3Cpath d=%22M652.873,2102.74C500.193,1894.31 0,1175.21 0,692.095C0,309.873 309.87,0 692.1,0C1074.32,0 1384.19,309.873 1384.19,692.095C1384.19,1175.21 883.793,1894.31 731.112,2102.74C731.112,2102.74 711.07,2123 692.095,2123C673.12,2123 652.873,2102.74 652.873,2102.74Z%22/%3E%3C/g%3E%3Cg transform=%22matrix(2.75,0,0,2.63158,-1377.95,-2466.64)%22%3E%3Cellipse cx=%22787.402%22 cy=%221496.85%22 rx=%2212.598%22 ry=%2214.961%22/%3E%3C/g%3E%3C/svg%3E");
  --atx-flake: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1575 1575%22%3E%3Cg transform=%22matrix(0.80564,-0.465136,0.465136,0.80564,-110.566,505.498)%22%3E%3Cg transform=%22matrix(1,0,0,1,32.4961,-88.189)%22%3E%3Cg transform=%22matrix(1,0,0,1,0.000590411,-3.14961)%22%3E%3Cpath id=%22a%22 d=%22M787.366,829.982L727.008,934.525C716.144,953.343 692.046,959.8 673.228,948.936C654.41,938.071 647.953,913.973 658.817,895.155C658.817,895.155 753.305,731.497 753.305,731.497L753.433,731.277C764.358,712.629 788.342,706.264 807.086,717.086C813.953,721.051 819.173,726.777 822.507,733.367L915.985,895.275L916.111,895.496C926.799,914.281 920.319,938.233 901.574,949.056C882.756,959.92 858.658,953.463 847.794,934.645L787.366,829.982Z%22/%3E%3C/g%3E%3Cg transform=%22matrix(1,0,0,-1,0.000590411,1200)%22%3E%3Cuse href=%22%23a%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22matrix(0.5,0.866025,-0.866025,0.5,943.396,-470.916)%22%3E%3Cg transform=%22matrix(1,0,0,1,0.000590411,-3.14961)%22%3E%3Cuse href=%22%23a%22/%3E%3C/g%3E%3Cg transform=%22matrix(1,0,0,-1,0.000590411,1200)%22%3E%3Cuse href=%22%23a%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22matrix(0.5,-0.866025,0.866025,0.5,-93.1065,892.963)%22%3E%3Cg transform=%22matrix(1,0,0,1,0.000590411,-3.14961)%22%3E%3Cuse href=%22%23a%22/%3E%3C/g%3E%3Cg transform=%22matrix(1,0,0,-1,0.000590411,1200)%22%3E%3Cuse href=%22%23a%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --atx-flake-crop: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22314.5 63.7 944 944%22%3E%3Cg transform=%22matrix(0.80564,-0.465136,0.465136,0.80564,-110.566,505.498)%22%3E%3Cg transform=%22matrix(1,0,0,1,32.4961,-88.189)%22%3E%3Cg transform=%22matrix(1,0,0,1,0.000590411,-3.14961)%22%3E%3Cpath id=%22a%22 d=%22M787.366,829.982L727.008,934.525C716.144,953.343 692.046,959.8 673.228,948.936C654.41,938.071 647.953,913.973 658.817,895.155C658.817,895.155 753.305,731.497 753.305,731.497L753.433,731.277C764.358,712.629 788.342,706.264 807.086,717.086C813.953,721.051 819.173,726.777 822.507,733.367L915.985,895.275L916.111,895.496C926.799,914.281 920.319,938.233 901.574,949.056C882.756,959.92 858.658,953.463 847.794,934.645L787.366,829.982Z%22/%3E%3C/g%3E%3Cg transform=%22matrix(1,0,0,-1,0.000590411,1200)%22%3E%3Cuse href=%22%23a%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22matrix(0.5,0.866025,-0.866025,0.5,943.396,-470.916)%22%3E%3Cg transform=%22matrix(1,0,0,1,0.000590411,-3.14961)%22%3E%3Cuse href=%22%23a%22/%3E%3C/g%3E%3Cg transform=%22matrix(1,0,0,-1,0.000590411,1200)%22%3E%3Cuse href=%22%23a%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22matrix(0.5,-0.866025,0.866025,0.5,-93.1065,892.963)%22%3E%3Cg transform=%22matrix(1,0,0,1,0.000590411,-3.14961)%22%3E%3Cuse href=%22%23a%22/%3E%3C/g%3E%3Cg transform=%22matrix(1,0,0,-1,0.000590411,1200)%22%3E%3Cuse href=%22%23a%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.atx-loader {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
  vertical-align: middle;
}
.atx-loader--lg { width: 72px; height: 72px; }
.atx-loader::before,
.atx-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.atx-loader::before { --m: var(--atx-pin); background: var(--are-color, #E52713); }
.atx-loader::after {
  --m: var(--atx-flake);
  background: #fff;
  transform-origin: 49.937% 34.013%;
  animation: atx-flake-spin 2s linear infinite;
}
.atx-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  -webkit-mask: var(--atx-flake-crop) center / contain no-repeat;
  mask: var(--atx-flake-crop) center / contain no-repeat;
  background: currentColor;
  animation: atx-flake-spin 1.6s linear infinite;
}
/* A loading text gets the flake in front: a message line in the state
   is-loading / is-running (setStatus(…, 'loading')), or a fixed loading
   text with .atx-loading-text (not once it carries a data-state). */
.atx-msg.is-loading::before,
.atx-msg.is-running::before,
.atx-loading-text:not([data-state])::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.15em;
  -webkit-mask: var(--atx-flake-crop) center / contain no-repeat;
  mask: var(--atx-flake-crop) center / contain no-repeat;
  background: var(--are-color, #E52713);
  animation: atx-flake-spin 1.6s linear infinite;
}
@keyframes atx-flake-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .atx-loader::after,
  .atx-spinner,
  .atx-msg.is-loading::before,
  .atx-msg.is-running::before,
  .atx-loading-text::before { animation-duration: 6s; }
}


/* ============================================================
   PAGER – ÅreTaxi house style
   "1–25 av 140" on the left, the pages on the right (links or buttons),
   the current page in the house colour. The names .atx-bkl-pager* (the
   bookings list, used by 6 modules) and .atx-sa-poi-admin__pager* (the
   POI lists) are the same; .atx-pager* is for new code:
     <nav class="atx-pager"><span class="atx-pager__info">1–25 av 140</span>
       <ul class="atx-pager__list"><li class="atx-pager__current">1</li>
         <li><a href="…">2</a></li><li class="atx-pager__gap">…</li></ul></nav>
   ============================================================ */
.atx-pager,
.atx-bkl-pager,
.atx-sa-poi-admin__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 0 4px;
}
.atx-pager__info,
.atx-bkl-pager-info,
.atx-sa-poi-admin__pager-info { font-size: 0.85rem; color: #6b7280; }
.atx-pager__list,
.atx-bkl-pager-list,
.atx-sa-poi-admin__pager-list { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.atx-pager__list li,
.atx-pager__list a,
.atx-pager__list button,
.atx-bkl-pager-list li,
.atx-bkl-pager-list a,
.atx-sa-poi-admin__pager-list li,
.atx-sa-poi-admin__pager-list button {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0 8px;
  font: inherit;
  font-size: 0.88rem;
  color: #374151;
  text-decoration: none;
}
.atx-pager__list li:has(> a, > button),
.atx-sa-poi-admin__pager-list li { padding: 0; }
.atx-pager__list a,
.atx-pager__list button,
.atx-bkl-pager-list a,
.atx-sa-poi-admin__pager-list button { border: 1px solid #e5e7eb; background: #fff; cursor: pointer; }
.atx-pager__list a:hover,
.atx-pager__list button:hover,
.atx-bkl-pager-list a:hover,
.atx-sa-poi-admin__pager-list button:hover { background: #f3f4f6; }
.atx-pager__current,
.atx-bkl-pager-current,
.atx-sa-poi-admin__pager-current {
  background: var(--are-color, #E52713);
  color: #fff !important;
  font-weight: 600;
  padding: 0 8px !important;
}
.atx-pager__gap,
.atx-bkl-pager-gap,
.atx-sa-poi-admin__pager-gap { color: #9ca3af; }


/* ============================================================
   JOINED FIELDS – ÅreTaxi house rules (enforced)
   Where a field meets a button or a unit (a dropdown's chevron, a field
   with a button, a field with a unit "kr"):
   1. The two meet with SQUARE corners: the field's right corners and the
      button's / unit's left corners are 0. A form's own field rule
      (e.g. ".atx-booking__row > .atx-otp-phone-row input", which rounds
      all four corners) must never round them again.
   2. The field FILLS what the button / unit leaves (flex: 1, min-width 0)
      and the button / unit never shrinks. Never give the inner field
      width: 100% or flex: 0 0 auto (that pushed the QR country code's
      chevron out over the mobile field).
   The rules below carry an id's weight (:is(…, #atx-never)), so no
   module rule can break them by accident. A module that needs another
   width sets it on the wrapper (.atx-select, .atx-fieldbtn …), not on
   the inner field.
   ============================================================ */
.atx-select > .atx-select__input:is(select, #atx-never),
.atx-fieldbtn > :is(input, select):is(input, select, #atx-never),
.atx-bkl-field-control > :is(input, select):is(input, select, #atx-never) {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.atx-form-field__unitrow > input:is(input, #atx-never) {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.atx-select > .atx-select__toggle:is(button, #atx-never),
.atx-fieldbtn > .atx-fieldbtn__toggle:is(button, #atx-never),
.atx-bkl-field-control > .atx-bkl-field-toggle:is(button, #atx-never),
.atx-form-field__unitrow > .atx-form-field__unit:is(span, #atx-never) {
  flex-shrink: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}


/* ============================================================
   TOOLBAR AND ICON BUTTON – ÅreTaxi house style
   A row of controls above a list (export, refresh, NEW …) that wraps on
   a phone; an icon-only button (.atx-btn … .atx-btn--icon: 44px wide):
     <div class="atx-toolbar"><button class="atx-btn atx-btn--secondary atx-btn--sm atx-btn--icon">
       <svg …></svg></button> … </div>
   ============================================================ */
.atx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.atx-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 44px;
  padding-left: 12px;
  padding-right: 12px;
}
.atx-btn--icon svg { display: block; flex: 0 0 auto; }


/* ============================================================
   WAITING FOR A DRIVER – ÅreTaxi house style (ATX.driverWatch in custom.js)
   After an ASAP booking: the centred house window with the pin and the
   flake turning until a driver accepts (then a green check). On top of
   a booking's own confirmation window.
   ============================================================ */
.atx-dialog.atx-driver-watch { z-index: 100046; }
.atx-driver-watch__icon { display: flex; justify-content: center; min-height: 72px; margin: 0 0 1rem; }
.atx-driver-watch__icon:empty { display: none; }
.atx-driver-watch__check { color: #1f7a3a; }
/* "Du har väntat 2:35": the time since the booking, figures that do not jump. */
.atx-driver-watch__timer { margin: -0.5rem 0 1rem; font-size: 0.95rem; font-weight: 600; color: #333; font-variant-numeric: tabular-nums; }
/* Several cars: a row each, the state (house dot + word) on the right. */
.atx-driver-watch__rides { margin: 0; padding: 0; list-style: none; text-align: left; }
.atx-driver-watch__rides > li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.atx-driver-watch__rides > li + li { border-top: 1px solid #e5e7eb; }
.atx-driver-watch__state { white-space: nowrap; font-weight: 600; color: #333; }


/* ============================================================
   PHONE LINK – ÅreTaxi house style
   A phone number to tap and call: <a class="atx-tel" href="tel:+46…">…</a>
   (.atx-bkl-tel = the bookings list's name for the same).
   ============================================================ */
.atx-tel,
.atx-bkl-tel { color: var(--link-color); text-decoration: none; }
.atx-tel:hover,
.atx-bkl-tel:hover { color: var(--link-hover-color); text-decoration: underline; }


/* ============================================================
   LIST HEAD AND ADD BUTTON – ÅreTaxi house style
   The row above a list: the title (grey capitals, the count after it)
   on the left, the red + that adds a row on the right (as the day
   report's Z-rapporter / Passrapporter). .atx-drpt-daily-drawer__* are
   the day report's names for the same:
     <div class="atx-listhead">
       <h4 class="atx-listhead__title">Rader <span class="atx-listhead__count">(2)</span></h4>
       <button type="button" class="atx-addbtn" aria-label="Lägg till rad">+</button>
     </div>
   ============================================================ */
.atx-listhead,
.atx-drpt-daily-drawer__kidgroup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}
.atx-listhead__title,
.atx-drpt-daily-drawer__kidgroup h4 {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  font-weight: 700;
}
.atx-listhead__count,
.atx-drpt-daily-drawer__count {
  color: #9ca3af;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.atx-addbtn,
.atx-drpt-daily-drawer__attach-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: 1.05rem;
  font-weight: 700;
  border: 1px solid var(--are-color, #E52713);
  border-radius: 6px;
  background: var(--are-color, #E52713);
  color: #fff;
  cursor: pointer;
  transition: var(--btn-transition);
}
.atx-addbtn:hover,
.atx-drpt-daily-drawer__attach-toggle:hover {
  background: #fff;
  color: var(--are-color, #E52713);
  transform: translateY(-1px);
}
/* Open (what it adds is showing): the + turns into × */
.atx-addbtn.is-open,
.atx-drpt-daily-drawer__attach-toggle.is-open {
  background: var(--are-color, #E52713);
  color: #fff;
  transform: rotate(45deg);
}


/* ============================================================
   TOAST – ÅreTaxi house style
   A short notice in the top right corner: ATX.toast(text, type) in
   modules/custom.js. --ok green, --error red (stays, with ×), --info dark.
   Above windows and messages.
   ============================================================ */
.atx-toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100070;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: min(500px, calc(100vw - 2rem));
  box-sizing: border-box;
  padding: 0.85rem 1.25rem;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: atxToastIn 0.3s ease;
}
.atx-toast--ok    { background: #16a34a; }
.atx-toast--error { background: var(--atx-error, #dc2626); }
.atx-toast.is-hiding { animation: atxToastOut 0.3s ease forwards; }
.atx-toast__x {
  flex: 0 0 auto;
  padding: 0 0 0 0.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.75;
  cursor: pointer;
}
.atx-toast__x:hover { opacity: 1; }
@keyframes atxToastIn  { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } }
@keyframes atxToastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(100%); } }


/* ============================================================
   TABS – ÅreTaxi house style
   A row of tabs over a line; the current one in the house colour,
   underlined. Links or buttons:
     <nav class="atx-tabs"><a class="atx-tabs__tab is-active" href="…">Allmänt</a>
       <a class="atx-tabs__tab" href="…">Fordon</a></nav>
   Alias: .atx-maint-tabs / .atx-maint-tab (Underhåll; current = .active).
   ============================================================ */
.atx-tabs,
.atx-maint-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 1rem;
}
.atx-tabs__tab,
.atx-maint-tab {
  padding: 0.75rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.atx-tabs__tab:hover,
.atx-maint-tab:hover { color: #374151; }
.atx-tabs__tab.is-active,
.atx-maint-tab.active {
  color: var(--are-color, #E52713);
  border-bottom-color: var(--are-color, #E52713);
}


/* ============================================================
   TABLE AND FILE UPLOAD – ÅreTaxi house style (for new code; the
   modules' existing tables and pickers keep their own look)
   .atx-table — thin row lines, a header row in grey capitals, the row
   under the pointer tinted; numbers right-aligned (.atx-table__num).
   In .atx-table-wrap it scrolls sideways on a phone. --compact: dense.
     <div class="atx-table-wrap"><table class="atx-table">
       <thead><tr><th>Datum</th><th class="atx-table__num">Belopp</th></tr></thead>
       <tbody><tr><td>27 okt</td><td class="atx-table__num">450 kr</td></tr></tbody>
     </table></div>
   .atx-upload — a button and the chosen file's name (the native field
   hidden but focusable):
     <label class="atx-upload">
       <input type="file" class="atx-upload__input">
       <span class="atx-btn atx-btn--secondary atx-btn--sm">Välj fil</span>
       <span class="atx-upload__name is-empty">Ingen fil vald</span>
     </label>
   ============================================================ */
.atx-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.atx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.atx-table th,
.atx-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
}
.atx-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  white-space: nowrap;
}
.atx-table tbody tr:hover { background: #f9fafb; }
.atx-table .atx-table__num { text-align: right; white-space: nowrap; }
.atx-table--compact th,
.atx-table--compact td { padding: 6px 8px; font-size: 0.85rem; }

.atx-upload { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer; }
.atx-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.atx-upload__input:focus-visible + .atx-btn { outline: 2px solid var(--are-color, #E52713); outline-offset: 2px; }
.atx-upload__input:disabled ~ * { opacity: 0.5; cursor: not-allowed; }
.atx-upload__name { font-size: 0.85rem; color: #374151; overflow-wrap: anywhere; }
.atx-upload__name.is-empty { color: #6b7280; font-style: italic; }


/* ============================================================
   QUICK PICK – ÅreTaxi house style
   A row of radio choices with a label first ("Period: ○ Idag ○ Vecka …"):
     <div class="atx-quickpick"><span class="atx-quickpick__label">Period:</span>
       <label><input type="radio" name="…"> Idag</label> …</div>
   ============================================================ */
.atx-quickpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
  font-size: 0.82rem;
}
.atx-quickpick__label { font-weight: 600; color: #4b5563; }
.atx-quickpick label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #374151;
  cursor: pointer;
}
.atx-quickpick input[type="radio"] { margin: 0; cursor: pointer; }


/* ============================================================
   EMPTY LIST AND KEY FIGURES – ÅreTaxi house style
   .atx-empty — "Inga rapporter …": grey text in a dashed box.
   .atx-kpi   — a row of key-figure tiles (label above, big value):
     <div class="atx-kpi">
       <div class="atx-kpi__tile"><span class="atx-kpi__label">Pass</span>
                                  <span class="atx-kpi__value">12</span></div>
     </div>
   Tile tones: --positive (green), --negative (red), --muted (grey).
   ============================================================ */
.atx-empty {
  margin: 0;
  padding: 16px;
  font-size: 0.9rem;
  text-align: center;
  color: #6b7280;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
}
.atx-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.atx-kpi__tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.atx-kpi__tile--positive { background: #bbf7d0; border-color: #22c55e; }
.atx-kpi__tile--negative { background: #fecaca; border-color: #ef4444; }
.atx-kpi__tile--muted    { background: #e5e7eb; border-color: #d1d5db; }
.atx-kpi__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.atx-kpi__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}


/* ============================================================
   FIELD ERRORS – ÅreTaxi house style
   An error is always red and a warning yellow (not the house colour):
   the colours as variables, for every module's own invalid / warning
   rules (.is-invalid, --invalid, --error …), and two classes for new code:
     <input class="atx-invalid">                 red border + ring
     <p class="atx-field-msg">Ange ett datum</p> red text under the field
     <p class="atx-field-msg atx-field-msg--warn">…</p>   yellow
   ============================================================ */
:root {
  --atx-error:        #dc2626;
  --atx-error-bg:     #fee2e2;
  --atx-error-text:   #991b1b;
  --atx-warn:         #f59e0b;
  --atx-warn-bg:      #fef3c7;
  --atx-warn-text:    #92400e;
  --atx-warn-strong:  #d97706;
}
.atx-invalid,
.atx-invalid:focus {
  border-color: var(--atx-error) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--atx-error) 18%, transparent);
}
.atx-field-msg {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--atx-error-text);
}
.atx-field-msg--warn { color: var(--atx-warn-text); }
.atx-field-msg[hidden] { display: none; }


/* ============================================================
   NOTICES AND FEEDBACK – ÅreTaxi house style
   Two boxes, the colours of the status badges (info blue, warn yellow,
   error red, ok green):

   .atx-notice   — a NOTICE about how things are (the page or an item),
                   stays: "Du måste byta lösenord", "Bilen kan komma 10 min
                   senare", "50 mynt går ut om 3 dagar". A bar on the left,
                   left-aligned, may run over several lines.
   .atx-feedback — FEEDBACK on what was just done, at its button, until it
                   is fixed: "Välj en tid", "Bokningen kunde inte skickas".
                   A frame all round, centred, short.
   (A one-line receipt beside a button, "Sparat.", is .atx-msg.)
   The colour classes are one class stronger, so a module's own layout
   rules (padding, a thicker bar …) never take the colours away.

     <div class="atx-notice atx-notice--warn">…</div>
     <p class="atx-feedback atx-feedback--error" hidden>…</p>
   ============================================================ */
.atx-notice {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #374151;
  background: #f3f4f6;
  border-left: 4px solid #9ca3af;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.atx-notice.atx-notice--info  { color: #1e3a8a; background: #eff6ff; border-left-color: #3b82f6; }
.atx-notice.atx-notice--warn  { color: #92400e; background: #fef3c7; border-left-color: #f59e0b; }
.atx-notice.atx-notice--error { color: #991b1b; background: #fee2e2; border-left-color: #dc2626; }
.atx-notice.atx-notice--ok    { color: #065f46; background: #d1fae5; border-left-color: #10b981; }

.atx-feedback {
  margin: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
}
.atx-feedback.atx-feedback--info  { color: #1e3a8a; background: #eff6ff; border-color: #93c5fd; }
.atx-feedback.atx-feedback--warn  { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.atx-feedback.atx-feedback--error { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
.atx-feedback.atx-feedback--ok    { color: #065f46; background: #d1fae5; border-color: #6ee7b7; }
.atx-notice[hidden],
.atx-feedback[hidden] { display: none; }


/* ============================================================
   WINDOWS AND SETTINGS – ÅreTaxi house style
   A window (dialog) and the fields, rows, units, messages and
   buttons of settings windows and Konfigurering pages. Used by:
   Bokningslarm (atx-booking-alarm). Markup:

     <div class="atx-dialog" hidden>
       <div class="atx-dialog__backdrop" data-close></div>
       <div class="atx-dialog__panel" role="dialog" aria-modal="true">
         <button type="button" class="atx-dialog__x" aria-label="Stäng">×</button>
         <h3 class="atx-dialog__title">…</h3>
         <p class="atx-dialog__help">…</p>
         <div class="atx-form-row">                    ← two side by side
           <label class="atx-form-field"><span class="atx-label">…</span><input></label>
           <label class="atx-form-field"><span class="atx-label">…</span>
             <span class="atx-form-field__unitrow"><input><span class="atx-form-field__unit">min</span></span></label>
         </div>
         <p class="atx-msg is-ok|is-err"></p>
         <div class="atx-actions">                      ← --stack: long texts, stacked in the phone
           <button class="atx-btn atx-btn--secondary atx-btn--lg">Avbryt</button>
           <button class="atx-btn atx-btn--primary atx-btn--lg">Spara</button></div>
       </div>
     </div>

   A settings page: the same fields inside .atx-group (a white card).
   (Not .atx-modal: that is the confirm dialog, GENERIC MODAL below;
   not .atx-section: the page sections' padding.)
   ============================================================ */
/* Aliases — the same window under the modules' own names:
   .atx-bkl-modal*  bookings list + agents list (Ändra detaljer, SMS, transaktion …)
   .atx-drpt-modal* day reports (kontant, ta bort, översikt …)
   .atx-invrpt-modal* invoicing (skapa/redigera)
   .atx-admin-settings__poi-modal* addresses (admin) · .atx-sa-mail* invite by e-mail
   .atx-forxfame-modal* forxfame trades · .atx-maint-modal* Underhåll (are.taxi)
   Windows opened on top of each other set their own z-index in the
   100040-band (day reports: 100040–100044). */
.atx-dialog,
.atx-bkl-modal,
.atx-drpt-modal,
.atx-invrpt-modal,
.atx-admin-settings__poi-modal,
.atx-sa-mail,
.atx-forxfame-modal,
.atx-maint-modal { position: fixed; inset: 0; z-index: 100040; display: flex; align-items: center; justify-content: center; }
.atx-dialog[hidden],
.atx-bkl-modal[hidden],
.atx-drpt-modal[hidden],
.atx-invrpt-modal[hidden],
.atx-admin-settings__poi-modal[hidden],
.atx-sa-mail[hidden],
.atx-forxfame-modal[hidden],
.atx-maint-modal[hidden] { display: none; }
.atx-dialog__backdrop,
.atx-bkl-modal-backdrop,
.atx-drpt-modal__backdrop,
.atx-invrpt-modal__backdrop,
.atx-admin-settings__poi-modal-backdrop,
.atx-sa-mail__backdrop,
.atx-forxfame-modal__backdrop,
.atx-maint-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.atx-dialog__panel,
.atx-bkl-modal-panel,
.atx-drpt-modal__panel,
.atx-invrpt-modal__panel,
.atx-admin-settings__poi-modal-panel,
.atx-sa-mail__panel,
.atx-forxfame-modal__panel,
.atx-maint-modal-content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  /* Narrow sides in the phone, more air from 600px. */
  padding: 18px 16px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
@media (min-width: 600px) {
  .atx-dialog__panel,
  .atx-bkl-modal-panel,
  .atx-drpt-modal__panel,
  .atx-invrpt-modal__panel,
  .atx-admin-settings__poi-modal-panel,
  .atx-sa-mail__panel,
  .atx-forxfame-modal__panel,
  .atx-maint-modal-content { padding: 20px 24px 24px; }
}
/* The × centred on the title's first line: a 32px box, top = the panel's
   top padding + (title line 26px − 32px) / 2. */
.atx-dialog__x,
.atx-bkl-modal-close,
.atx-drpt-modal__close,
.atx-invrpt-modal__close,
.atx-admin-settings__poi-modal-x,
.atx-sa-mail__close,
.atx-forxfame-modal__close,
.atx-maint-modal-header .atx-maint-modal-close {
  position: absolute;
  top: 15px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}
.atx-dialog__x:hover,
.atx-bkl-modal-close:hover,
.atx-drpt-modal__close:hover,
.atx-invrpt-modal__close:hover,
.atx-admin-settings__poi-modal-x:hover,
.atx-sa-mail__close:hover,
.atx-forxfame-modal__close:hover,
.atx-maint-modal-header .atx-maint-modal-close:hover { color: #111; }
@media (min-width: 600px) {
  .atx-dialog__x,
  .atx-bkl-modal-close,
  .atx-drpt-modal__close,
  .atx-invrpt-modal__close,
  .atx-admin-settings__poi-modal-x,
  .atx-sa-mail__close,
  .atx-forxfame-modal__close,
  .atx-maint-modal-header .atx-maint-modal-close { top: 17px; right: 12px; }
}
.atx-dialog__title,
.atx-bkl-modal-panel > h3,
.atx-drpt-modal__title,
.atx-invrpt-modal__title,
.atx-admin-settings__poi-modal-title,
.atx-sa-mail__panel > h3,
.atx-forxfame-modal__title,
.atx-maint-modal-header h3 { margin: 0 2rem 8px 0; font-size: 1.25rem; line-height: 26px; }
.atx-dialog__help { margin: 0 0 10px; font-size: 0.875rem; line-height: 1.4; color: #555; }
body.atx-dialog-open { overflow: hidden; }
/* --center: a short message window (booking done, no free car, install
   the app …): the brand icon on top, everything centred, no ×, buttons
   under each other at full width (the first, primary, on top).
     <div class="atx-dialog atx-dialog--center">
       <div class="atx-dialog__backdrop" data-close></div>
       <div class="atx-dialog__panel" role="dialog" aria-modal="true">
         <img class="atx-dialog__icon" src="…pin…" alt="">
         <h3 class="atx-dialog__title">…</h3>
         <p class="atx-dialog__help">…</p>   <div class="atx-dialog__box">…</div>
         <div class="atx-actions atx-actions--column">…</div>
       </div>
     </div> */
.atx-dialog--center .atx-dialog__panel { width: min(360px, calc(100vw - 32px)); padding: 2rem 1.5rem 1.5rem; text-align: center; }
/* A wider window (room for two date fields side by side, e.g. a schedule row). */
.atx-dialog--wide .atx-dialog__panel { width: min(640px, calc(100vw - 24px)); }
.atx-dialog--center .atx-dialog__title { margin: 0 0 0.75rem; font-size: 1.2rem; line-height: 1.35; }
.atx-dialog--center .atx-dialog__help { margin: 0 0 1.25rem; font-size: 0.95rem; line-height: 1.5; }
/* A whole sentence as the title: normal letters, not the headings' capitals. */
.atx-dialog__title--sentence { text-transform: none; letter-spacing: normal; font-size: 1.1rem; }
.atx-dialog__title--error { color: var(--atx-error-text); font-weight: 400; }
.atx-dialog__icon { display: block; width: 48px; height: auto; margin: 0 auto 1rem; }
/* The site's logo on top instead of the icon (a page of its own, e.g. the alarm's SMS link). */
.atx-dialog__logo { display: block; max-width: 220px; max-height: 64px; width: auto; height: auto; margin: 0 auto 1.25rem; }
/* A grey box for the key facts (trip ID, phone number …). */
.atx-dialog__box { margin: 0 0 1.25rem; padding: 1rem; background: #f5f5f5; border-radius: 0.5rem; font-size: 0.95rem; line-height: 1.5; color: #555; }
.atx-dialog__box strong { color: #222; }
.atx-dialog__box[hidden],
.atx-dialog__help[hidden] { display: none; }

/* A field: the label (.atx-label) above, the control under it. */
.atx-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.atx-form-field > input:not([type="checkbox"]):not([type="radio"]),
.atx-form-field > textarea,
.atx-form-field > select,
.atx-form-field__unitrow > input,
.atx-form-field > .atx-fieldbtn > input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.75rem;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  background: #fff;
  font: inherit;
  font-weight: 600;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.atx-form-field > textarea { min-height: 0; }
/* A list of numbers / codes (one per line): no wrapping inside a line. */
.atx-form-field > textarea[wrap="off"] { padding-left: 0.5rem; padding-right: 0.5rem; white-space: pre; overflow-x: auto; }
.atx-form-field > input:focus,
.atx-form-field > textarea:focus,
.atx-form-field > select:focus,
.atx-form-field__unitrow > input:focus {
  outline: none;
  border-color: var(--are-color, #E52713);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--are-color, #E52713) 15%, transparent);
}
/* Locked (computed) value. A house date field (ATX.dateField) is read-only
   only so the calendar opens: it keeps the normal look. */
.atx-form-field input[readonly]:not(.atx-datefield) { background: #f3f4f6; color: #4b5563; cursor: not-allowed; }
.atx-form-field__hint { margin: 0; font-size: 0.85rem; line-height: 1.35; color: #5f6368; }

/* A unit after the field ("min", "st", "kr", "%"), all the same width. */
.atx-form-field__unitrow { display: flex; align-items: stretch; }
.atx-form-field__unitrow > input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.atx-form-field__unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 3.25rem;
  padding: 0 6px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid #aaa;
  border-left: 0;
  border-radius: 0 0.5rem 0.5rem 0;
}

/* Two fields side by side; under each other below 480px unless --keep.
   --end: the items level at the bottom (a button next to a field). */
.atx-form-row { display: flex; gap: 12px; }
.atx-form-row > * { flex: 1 1 0; min-width: 0; }
.atx-form-row--end { align-items: flex-end; }
/* A button in a field's place (.atx-form-field--btn, in an --end row): as wide as
   the field, its size class (--sm …) sets the height, centred on the
   48px field next to it. */
.atx-form-row > .atx-form-field > .atx-btn { box-sizing: border-box; width: 100%; min-width: 0; padding-left: 0.5rem; padding-right: 0.5rem; }
.atx-form-field--btn { justify-content: center; min-height: 48px; }
@media (max-width: 480px) {
  .atx-form-row:not(.atx-form-row--keep) { flex-direction: column; gap: 0; }
}

/* A message (saved, an error). */
.atx-msg { min-height: 1.2em; margin: 4px 0 8px; font-size: 0.9rem; }
.atx-msg:empty { min-height: 0; margin: 0; }
/* --small: a small grey status line ("Hämtar …"); is-ok / is-error as above. */
.atx-msg--small { min-height: 0; margin: 0; font-size: 0.75rem; color: #6b7280; }
.atx-msg.is-ok { color: #1f7a3a; }
.atx-msg.is-err,
.atx-msg.is-error { color: #c62828; }

/* The buttons at the bottom, on one row and equally wide (Avbryt left,
   Spara right) — also in the phone, for short texts.
   --stack: long texts; under each other in the phone, the last (Spara) on top. */
.atx-actions { display: flex; gap: 12px; }
.atx-actions > .atx-btn { box-sizing: border-box; flex: 1 1 0; min-width: 0; }
/* --column: always under each other at full width, in DOM order. */
.atx-actions--column { flex-direction: column; }
.atx-actions--column > .atx-btn { flex: 0 0 auto; width: 100%; }
@media (max-width: 480px) {
  .atx-actions--stack { flex-direction: column-reverse; }
  .atx-actions--stack > .atx-btn { flex: 0 0 auto; width: 100%; }
}

/* A settings page's card (Inställningar: Min profil, Konfigurering,
   Öppettider …): centred, max 460px — the same width on every site and in
   every section. Heading .atx-group__heading, text under it .atx-group__sub.
     <section class="atx-group"><h3 class="atx-group__heading">…</h3>
       <p class="atx-group__sub">…</p> …</section> */
.atx-group {
  box-sizing: border-box;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e0e2e6;
  border-radius: 10px;
}
.atx-group__heading {
  margin: 0 0 12px;
  font-family: var(--font-heading-family, inherit);
  font-size: clamp(var(--h3-size-min, 0.9rem), var(--h3-size-fluid, 1.8vw), var(--h3-size-max, 1.2rem));
  font-weight: var(--font-heading-weight, 700);
  line-height: var(--font-heading-line-height, 1.2);
  text-transform: uppercase;
  color: var(--font-heading-color, #000);
}
.atx-group__sub { margin: 0 0 12px; font-size: 0.9rem; color: #5f6368; }

/* A part that opens, as the voice booking's sections (Konfigurering …).
   Desktop: the grey title row is the top of the panel (no frame above it),
   the content hangs under it in a frame. Phone (< 600px): no panel — the
   grey title row and the content at full width. The chevron points right while
   closed. No JS — a <details>. (Not .atx-section: that is the page
   sections' padding, GLOBAL RESPONSIVE UTILITIES.)

     <details class="atx-fold"><summary>
       <span class="atx-fold__title">…</span>
       <svg class="atx-fold__chevron" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
         <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z" fill="currentColor"/></svg>
     </summary><div class="atx-fold__body">…</div></details> */
.atx-fold { margin: 0 0 12px; }
.atx-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  transition: background 0.2s;
}
.atx-fold > summary::-webkit-details-marker { display: none; }
.atx-fold > summary:hover { background: #f0f0f0; }
.atx-fold > summary:focus-visible { outline: 2px solid var(--are-color, #E52713); outline-offset: 2px; }
.atx-fold[open] > summary { border-radius: 10px 10px 0 0; }
.atx-fold__title { margin: 0; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
.atx-fold__chevron { flex: 0 0 auto; color: #666; transform: rotate(-90deg); transition: transform 0.3s; }
.atx-fold[open] .atx-fold__chevron { transform: rotate(0deg); }
.atx-fold__body {
  padding: 1rem;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}
@media (max-width: 599.98px) {
  .atx-fold > summary { padding: 0.5rem 0.75rem; border: 0; border-radius: 0; }
  .atx-fold[open] > summary { border-radius: 0; }
  .atx-fold__body { padding: 0.75rem 0 0; border: 0; border-radius: 0; }
}

/* Phones: 16px in the fields, or Safari zooms in when one is tapped. */
@media (max-width: 599.98px) {
  .atx-dialog input,
  .atx-dialog select,
  .atx-dialog textarea,
  .atx-bkl-modal input,
  .atx-bkl-modal select,
  .atx-bkl-modal textarea,
  .atx-drpt-modal input,
  .atx-drpt-modal select,
  .atx-drpt-modal textarea,
  .atx-invrpt-modal input,
  .atx-invrpt-modal select,
  .atx-invrpt-modal textarea,
  .atx-group input,
  .atx-group select,
  .atx-group textarea { font-size: 16px; }
}


/* ============================================================
   ADDRESS LIST – ÅreTaxi house style (ATX.addressCombo in custom.js)
   The list under an address field: places (row colours, see ROW
   COLOURS), Google results, "Använd min plats". The field's row is
   position: relative. Used by the booking form and the QR booking.
   ============================================================ */
.atx-combo__list {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0.25rem 0 0;
    padding: 0.25rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--atx-bk-border-strong, #aaa);
    border-radius: var(--atx-bk-radius, 0.5rem);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
    max-height: 18rem;
    overflow-y: auto;
}
@media (min-width: 768px) {
    .atx-combo__list { max-height: min(34rem, 75vh); }
}
.atx-combo__list[hidden] { display: none; }

/* POI / nickname rows. The row's colour is its own 'color' (house
 * palette in style.css → ROW COLOURS, classes .atx-tint--<key>); a POI
 * without a colour looks like a Google row. */
.atx-combo__list > li.atx-combo__item--poi {
    /* Single-line layout: nick + arrow stay full width; address truncates. */
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    overflow: hidden;
}
.atx-combo__list > li.atx-tint {
    background: var(--atx-tint-bg);
    border-bottom: 1px solid var(--atx-tint-line);
}
.atx-combo__list > li.atx-tint:hover,
.atx-combo__list > li.atx-tint:focus {
    background: var(--atx-tint-hover);
}
.atx-combo__nick {
    font-weight: 700;
    color: var(--atx-bk-fg, var(--text-main, #111));
    flex: 0 0 auto;
    white-space: nowrap;
}
.atx-combo__arrow {
    margin: 0 0.25rem;
    color: var(--atx-bk-muted, #666);
    flex: 0 0 auto;
}
.atx-combo__addr {
    color: var(--atx-bk-fg, var(--text-main, #111));
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atx-combo__list > li {
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.3;
    transition: background-color 0.12s ease;
    /* Truncate non-POI rows (Google Places) on a single line as well. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atx-combo__list > li:hover,
.atx-combo__list > li:focus {
    background: var(--atx-bk-bg-hover, #f5f5f5);
}

/* "Use my location" suggestion — sits at the top of the From dropdown. */
.atx-combo__item--geo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--atx-bk-accent, var(--are-color, #E52713));
    border-bottom: 1px solid var(--atx-bk-border, rgba(0,0,0,0.08));
}
.atx-combo__geo-icon {
    font-size: 1rem;
    line-height: 1;
}
.atx-combo__item--geo-error {
    color: var(--atx-bk-error, #b00020);
    cursor: default;
}
.atx-combo__item--geo-error:hover,
.atx-combo__item--geo-error:focus {
    background: transparent;
}
/* The picked place, when the list opens again: bold, keeps its colour. */
.atx-combo__list > li.is-selected,
.atx-combo__list > li.is-selected .atx-combo__addr { font-weight: 700; }

/* The × that empties the field: inside the field's right edge, hidden
   while the field is empty (its placeholder shows). */
.atx-combo__control { position: relative; }
.atx-combo__control.atx-combo__control > input { padding-right: 2.25rem; } /* over the forms' own input padding */
.atx-combo__clear {
    position: absolute;
    top: 50%;
    right: calc(var(--atx-combo-toggle-w, 48px) + 0.25rem);
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #888;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.atx-combo__clear:hover { background: #eee; color: #333; }
.atx-combo__control > input:placeholder-shown ~ .atx-combo__clear { display: none; }


/* ============================================================
   TIME PICKER – ÅreTaxi house style (ATX.timePicker in custom.js)
   "Snarast" / "Om 30 minuter" / "Om 60 minuter" + hour : minute
   columns, under the time field (its wrapper: position: relative).
   Used by the booking form and the QR booking.
   ============================================================ */
/* Outer wrapper is just a positioning shell with a small gap between the
   two visual panels (presets + scrollers). No background/border of its own. */
.atx-tp {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
.atx-tp[hidden] { display: none; }

/* Panel 1 — preset rows ("Snarast", "Om 30 minuter", "Om 60 minuter").
   Standalone panel with subtle border, tiny rounded corners and shadow. */
.atx-tp__presets {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--atx-bk-border-strong, #aaa);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.atx-tp__preset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--atx-bk-border, var(--are-light-gray, #e9ebee));
    transition: background-color 0.12s ease, color 0.12s ease;
}
.atx-tp__preset:last-child { border-bottom: 0; }
.atx-tp__preset:hover { background: var(--atx-bk-bg-soft, #f5f5f5); color: #111; }
.atx-tp__preset.is-selected {
    background: var(--atx-bk-accent, var(--are-color, #E52713));
    color: #fff;
}
.atx-tp__preset-time {
    font-variant-numeric: tabular-nums;
    color: var(--atx-bk-muted, #777);
    font-weight: 500;
}
.atx-tp__preset.is-selected .atx-tp__preset-time {
    color: rgba(255, 255, 255, 0.85);
}

/* Panel 2 — hour : minute scrollers. Own border, tiny rounded corners and shadow. */
.atx-tp__cols {
    display: flex;
    align-items: stretch;
    height: 200px;
    background: #fff;
    border: 1px solid var(--atx-bk-border-strong, #aaa);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.atx-tp__col {
    flex: 1 1 0;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    padding: calc(50% - 1.2em) 0; /* centring padding so first/last items can reach center */
}
.atx-tp__col::-webkit-scrollbar { width: 6px; }
.atx-tp__col::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 3px; }

.atx-tp__sep {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--atx-bk-text, #333);
    pointer-events: none;
}

.atx-tp__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.atx-tp__item {
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.4em;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    user-select: none;
    color: #666;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.atx-tp__item:hover { background: var(--atx-bk-bg-soft, #f5f5f5); color: #111; }
.atx-tp__item.is-selected {
    background: var(--atx-bk-accent, var(--are-color, #E52713));
    color: #fff;
    font-weight: 700;
}


/* ============================================================
   CALENDAR – ÅreTaxi house style (flatpickr's date popup)
   The brand red on the picked day / range, today, hover; above our
   windows (.atx-dialog 100040). The popup sits in <body>, and style.css
   loads before flatpickr.min.css, so every rule is one class more
   specific (.flatpickr-calendar …) than flatpickr's own. Used by every
   flatpickr date field (booking, voice booking, bookings list, agents,
   day report …); the QR booking keeps its own look.
   ============================================================ */
.flatpickr-calendar { z-index: 100050 !important; }
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected.startRange,
.flatpickr-calendar .flatpickr-day.selected.endRange {
  background: var(--are-color, #E52713) !important;
  border-color: var(--are-color, #E52713) !important;
  color: #fff !important;
}
.flatpickr-calendar .flatpickr-day.today {
  border-color: var(--are-color, #E52713) !important;
  color: var(--are-color, #E52713);
}
.flatpickr-calendar .flatpickr-day.today:hover,
.flatpickr-calendar .flatpickr-day.today:focus {
  background: var(--are-color, #E52713) !important;
  color: #fff !important;
}
.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus {
  background: color-mix(in srgb, var(--are-color, #E52713) 12%, transparent);
  color: #111;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-weekdays {
  color: #333;
}
.flatpickr-calendar .flatpickr-monthDropdown-months:focus {
  outline-color: var(--are-color, #E52713);
}


/* ============================================================
   DROPDOWN (SELECT) – ÅreTaxi house style
   One look for every dropdown: the select and a chevron button
   share one border line; the button turns red on hover/open, the
   chevron turns 180° while the list is open, and a red ring wraps
   both halves on focus. Width follows the surrounding layout
   (100 % of the container). Behaviour (opens/closes the list,
   draws the open list, keyboard, placeholder state) lives in
   modules/custom.js → ATX.select; the open list is styled below.

   Markup:
     <span class="atx-select">
       <select class="atx-select__input">…</select>
       <button type="button" class="atx-select__toggle" tabindex="-1" aria-label="…">
         <span class="atx-select__icon" aria-hidden="true"></span>
       </button>
     </span>

   Placeholder: add data-atx-select-placeholder on .atx-select and
   start the select with <option value="">…</option>; the text is
   grey while that option is selected (.atx-select--placeholder).
   Based on .atx-bkl-field-control (atx-bookings-list.css).
   ============================================================ */

.atx-select {
  --atx-select-border: #aaa;
  --atx-select-radius: 0.5rem;
  --atx-select-height: 48px;
  --atx-select-toggle-w: 48px;
  --atx-select-accent: var(--are-color, #E52713);
  --atx-select-ring: 0 0 0 3px color-mix(in srgb, var(--are-color, #E52713) 15%, transparent);

  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border-radius: var(--atx-select-radius);
  transition: box-shadow 0.15s ease;
}

.atx-select > .atx-select__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: none;
  min-height: var(--atx-select-height);
  margin: 0;
  padding: 0.625rem 0.75rem;
  background: #fff;
  border: 1px solid var(--atx-select-border);
  border-right: none;
  border-radius: var(--atx-select-radius) 0 0 var(--atx-select-radius);
  box-shadow: none;
  font: inherit;
  font-size: 16px; /* 16 px stops iOS from zooming in on focus */
  font-weight: 600;
  color: inherit;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.atx-select > .atx-select__input:focus {
  outline: none;
  box-shadow: none;
}

.atx-select__toggle {
  flex: 0 0 var(--atx-select-toggle-w);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  border: 1px solid var(--atx-select-border);
  border-radius: 0 var(--atx-select-radius) var(--atx-select-radius) 0;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.12s ease, border-color 0.15s ease;
}
.atx-select__icon {
  display: block;
  width: 14px;
  height: 14px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
  transition: filter 0.12s ease, transform 0.15s ease;
}

/* Hover / open: red button, white chevron; open turns the chevron. */
.atx-select__toggle:hover,
.atx-select__toggle:active,
.atx-select.is-open > .atx-select__toggle {
  background: var(--atx-select-accent);
}
.atx-select__toggle:hover .atx-select__icon,
.atx-select__toggle:active .atx-select__icon,
.atx-select.is-open .atx-select__icon {
  filter: brightness(0) invert(1);
}
.atx-select.is-open .atx-select__icon {
  transform: rotate(180deg);
}

/* Focus / open: red border on both halves + ring around the whole field. */
.atx-select:focus-within,
.atx-select.is-open {
  box-shadow: var(--atx-select-ring);
}
.atx-select:focus-within > .atx-select__input,
.atx-select:focus-within > .atx-select__toggle,
.atx-select.is-open > .atx-select__input,
.atx-select.is-open > .atx-select__toggle {
  border-color: var(--atx-select-accent);
}

/* Placeholder: grey text while the empty first option is selected;
   the options in the open list keep the normal text colour. */
/* --compact: 32px, for dense rows (a status in a table row, rows per page). */
.atx-select.atx-select--compact { --atx-select-height: 32px; --atx-select-toggle-w: 32px; width: auto; }
.atx-select.atx-select--compact > .atx-select__input { padding: 0.25rem 0.5rem; font-size: 0.85rem; }
.atx-select.atx-select--compact .atx-select__icon { transform: scale(0.8); }
.atx-select.atx-select--placeholder > .atx-select__input { color: #a0a0a0; }
.atx-select.atx-select--placeholder > .atx-select__input option { color: #000; }

/* Disabled */
.atx-select.is-disabled > .atx-select__input,
.atx-select > .atx-select__input:disabled {
  background: #f5f5f5;
  color: #888;
  cursor: not-allowed;
}
.atx-select.is-disabled > .atx-select__toggle,
.atx-select:has(> .atx-select__input:disabled) > .atx-select__toggle {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

/* ---- Open list -------------------------------------------------
   ATX.select draws the open list itself (the browser's own list is
   not used): one <ul class="atx-select__list"> in <body>, fixed
   position under (or above) the field, field width or wider, height
   fitted to the screen. Look taken from the booking form's address
   list. Selected option: whole row in --are-color, white bold text
   (same as the selected time in the booking form). Options may
   carry a house row colour: <option data-color="blue"> (ROW COLOURS).
   Cards per field: data-atx-select-cards on .atx-select shows each
   <optgroup> as its own card with a 4px gap (like the booking time picker).
   Plain selection per field: data-atx-select-plain on .atx-select keeps
   the selected row in its own colour, in bold (like the booking form's
   address list, e.g. the QR booking's address lists).
   Opt-out per field: data-atx-select-native on .atx-select keeps the
   browser's list. */

/* With ATX.select running, taps/clicks on the select go to the
   wrapper, so the browser's list never opens. */
.atx-select-js .atx-select:not([data-atx-select-native]) > .atx-select__input {
  pointer-events: none;
}
.atx-select-js .atx-select:not([data-atx-select-native]) {
  cursor: pointer;
}

.atx-select__list {
  position: fixed;
  z-index: 100050; /* above popups (.atx-admin-settings__poi-modal = 100000) */
  box-sizing: border-box;
  margin: 0;
  padding: 0; /* no gap: a coloured first/last row fills the rounded corners */
  list-style: none;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text-main, #000);
  text-align: left;
}
.atx-select__list[hidden] { display: none; }

.atx-select__option {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px; /* easy to hit on a phone */
  margin: 0;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.atx-select__option-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.atx-select__option.is-active { background: #f5f5f5; }
.atx-select__option[aria-selected="true"],
.atx-select__list .atx-select__option.atx-tint[aria-selected="true"] {
  background: var(--are-color, #E52713);
  color: #fff;
  font-weight: 700;
}
.atx-select__option.is-placeholder { color: #a0a0a0; }
.atx-select__option.is-placeholder[aria-selected="true"] { color: #fff; }
.atx-select__option[aria-disabled="true"] {
  color: #9ca3af;
  cursor: default;
}

/* Options with a house row colour. */
.atx-select__list .atx-select__option.atx-tint {
  background: var(--atx-tint-bg);
  border-bottom: 1px solid var(--atx-tint-line);
}
.atx-select__list .atx-select__option.atx-tint.is-active:not([aria-selected="true"]) {
  background: var(--atx-tint-hover);
}

/* data-atx-select-plain: the selected row keeps its own colour, in bold. */
.atx-select__list.atx-select__list--plain .atx-select__option[aria-selected="true"] {
  background: transparent;
  color: inherit;
  font-weight: 700;
}
.atx-select__list.atx-select__list--plain .atx-select__option[aria-selected="true"].is-active {
  background: #f5f5f5;
}
.atx-select__list.atx-select__list--plain .atx-select__option.atx-tint[aria-selected="true"] {
  background: var(--atx-tint-bg);
}
.atx-select__list.atx-select__list--plain .atx-select__option.atx-tint[aria-selected="true"].is-active {
  background: var(--atx-tint-hover);
}

/* Group heading (<optgroup label="…">). */
.atx-select__group {
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.75rem 0.25rem;
  border-top: 1px solid #eceff1;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.atx-select__list > .atx-select__group:first-child,
.atx-select__card-list > .atx-select__group:first-child {
  margin-top: 0;
  border-top: 0;
}

/* Kort (data-atx-select-cards på .atx-select): alternativen före första
   gruppen i ett kort, varje grupp i ett eget kort under, 4px mellanrum —
   som tidväljaren i bokningen. Varje kort har egen ram, radie och skugga. */
.atx-select__list.atx-select__list--cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.atx-select__card {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.atx-select__card-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Small size (.atx-select--sm): compact controls such as "Per sida"
   (same size as the bookings list's per-page select). */
.atx-select.atx-select--sm {
  --atx-select-height: 32px;
  --atx-select-toggle-w: 28px;
}
.atx-select.atx-select--sm > .atx-select__input {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}
.atx-select.atx-select--sm .atx-select__icon { width: 10px; height: 10px; }

/* Mobile: narrower button gives the text more room (same as the bookings list). */
@media (max-width: 640px) {
  .atx-select:not(.atx-select--sm) { --atx-select-toggle-w: 40px; }
}

/* ============================================================
   ROW COLOURS – ÅreTaxi house palette for coloured list rows
   Six colours a list row can carry (POI addresses in the booking
   form's address list, the address-list editor, …). A row with no
   colour has no class and looks like any other row (white).

     <li class="atx-tint atx-tint--blue">…</li>   row: background,
                                                  line below, darker
                                                  on hover/focus
     <span class="atx-dot atx-dot--blue"></span>  dot in the same
                                                  colour family
     <span class="atx-dot"></span>                no colour (grey ring)

   Keys: blue, green, teal, yellow, red, purple. The key is what is
   stored on the row ('color' on a POI). Modules that need a stronger
   selector (e.g. `.list > li.atx-tint`) read the same variables:
   --atx-tint-bg, --atx-tint-line, --atx-tint-hover.
   ============================================================ */

.atx-tint--blue   { --atx-tint-bg: #e3f2fd; --atx-tint-line: #90caf9; --atx-tint-hover: #cfe8fc; --atx-tint-dot: #1e88e5; }
.atx-tint--green  { --atx-tint-bg: #e8f5e9; --atx-tint-line: #a5d6a7; --atx-tint-hover: #d4edd6; --atx-tint-dot: #43a047; }
.atx-tint--teal   { --atx-tint-bg: #e0f7f6; --atx-tint-line: #80cbc4; --atx-tint-hover: #c9efed; --atx-tint-dot: #00897b; }
.atx-tint--yellow { --atx-tint-bg: #fff8e1; --atx-tint-line: #ffe082; --atx-tint-hover: #fff3c4; --atx-tint-dot: #f9a825; }
.atx-tint--red    { --atx-tint-bg: #fdecea; --atx-tint-line: #f5b7b1; --atx-tint-hover: #fbd9d5; --atx-tint-dot: #e53935; }
.atx-tint--purple { --atx-tint-bg: #f3e8fd; --atx-tint-line: #cdb4f5; --atx-tint-hover: #e9d8fc; --atx-tint-dot: #8e24aa; }

.atx-tint {
  background: var(--atx-tint-bg, transparent);
  border-bottom: 1px solid var(--atx-tint-line, transparent);
}
.atx-tint:hover,
.atx-tint:focus {
  background: var(--atx-tint-hover, transparent);
}

.atx-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #9ca3af; /* no colour: grey ring */
  vertical-align: middle;
}
.atx-dot[class*="atx-dot--"] { box-shadow: none; }
.atx-dot--blue   { background: #1e88e5; }
.atx-dot--green  { background: #43a047; }
.atx-dot--teal   { background: #00897b; }
.atx-dot--yellow { background: #f9a825; }
.atx-dot--red    { background: #e53935; }
.atx-dot--purple { background: #8e24aa; }

/* ============================================================
   GENERIC MODAL (info / warn / danger)
   Shared design system for confirm-dialogs and single-OK info
   popovers across all modules. Originally lived in atx-booking.css;
   promoted to theme-wide so any module can build a modal by:
     1. Creating an overlay .atx-modal-overlay hosting a
        .atx-modal (role="alertdialog" | role="dialog").
     2. Toggling [hidden] on the overlay to show/hide.
     3. Severity via .atx-modal--warn | --danger | --info.
     4. Optional single-button mode: hide the cancel button.
   Class contract (all elements optional except overlay+dialog):
     .atx-modal-overlay             — backdrop; z=100060
       .atx-modal                   — the panel; border-top accent
         .atx-modal-header
           .atx-modal-icon          — icon slot
             .atx-modal-icon-svg    — recommended for inline SVG
           .atx-modal-title
         .atx-modal-body            — allows <strong>
         .atx-modal-actions
           .atx-modal-btn --cancel  — optional  (+ .atx-btn --secondary --lg)
           .atx-modal-btn --confirm — required  (+ .atx-btn --primary|--danger --lg)
   ============================================================ */
.atx-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100060; /* above the windows (.atx-dialog 100040) it may be opened from */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: atxModalFadeIn 0.15s ease-out;
}
.atx-modal-overlay[hidden] {
    display: none;
}
@keyframes atxModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.atx-modal {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 6px solid var(--are-color, #E52713);
    animation: atxModalPopIn 0.18s ease-out;
}
@keyframes atxModalPopIn {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.atx-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.atx-modal-icon {
    flex: 0 0 auto;
    font-size: 1.75rem;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--are-color, #E52713);
    user-select: none;
}
.atx-modal-icon-svg {
    width: 1.25em;
    height: 1.25em;
    display: block;
}
.atx-modal--danger .atx-modal-icon {
    color: #d32f2f;
}
.atx-modal--info .atx-modal-icon {
    color: var(--are-info, #0088CE);
}
/* Info windows: a blue line on top (warn/danger keep the house colour);
   the buttons are the house buttons as everywhere. */
.atx-modal--info {
    border-top-color: var(--are-info, #0088CE);
}
.atx-modal-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 600;
    color: #212121;
    align-self: center;
}
/* Right-side slot in the header (e.g. a phone-pill CTA). Sits after the
   title, right-aligned by virtue of the title's flex: 1 1 auto. */
.atx-modal-header-extra {
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
}
.atx-modal-header-extra:empty {
    display: none;
}
.atx-modal-body {
    margin: 0;
    color: #424242;
    font-size: 0.98rem;
    line-height: 1.45;
}
.atx-modal-body strong {
    color: #212121;
    font-weight: 700;
}
.atx-modal-body a {
    color: var(--are-color, #E52713);
    font-weight: 600;
    text-decoration: none;
}
.atx-modal-body a:hover,
.atx-modal-body a:focus-visible {
    text-decoration: underline;
}
/* A field under the text (ATX.prompt, ATX.copyText); the field is the house .atx-form-field. */
.atx-modal-field { margin: 0; }
.atx-modal-body.is-text { white-space: pre-line; }
.atx-modal-field[hidden],
.atx-modal-title[hidden],
.atx-modal-body[hidden] { display: none; }
.atx-modal-actions {
    /* One row as .atx-actions (Avbryt left, the choice right), equally wide,
       also in the phone; three long choices wrap, the primary stays on top. */
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
/* The buttons are the house buttons (.atx-btn --lg: capitals, house colour;
   --primary to confirm, --danger to delete, --secondary to cancel); here
   only their place in the row. */
.atx-modal-btn { box-sizing: border-box; flex: 1 1 7rem; min-width: 0; }
.atx-modal-btn[hidden] { display: none; }
@media (min-width: 480px) {
    .atx-modal-actions { justify-content: flex-end; }
    .atx-modal-btn {
        flex: 0 0 auto;
        min-width: 8rem;
    }
}

/* ============================================================
   SCHEDULE – ÅreTaxi house style (ATX.schedule in custom.js)
   A list like the bookings list: the number on the left, the name and
   "period · days · times" in the middle, edit and remove on the right.
   The pencil opens the row's window (.atx-schedule-dialog = the house
   .atx-dialog--wide, on top of the window it opens from): house fields,
   house date fields (.atx-fieldbtn with the calendar, × as in the
   address lists), Aktiv (a rule kept but off: red dot, greyed), the weekdays as pills (ticked = the house colour),
   under Tider how they were read (an error: .atx-invalid +
   .atx-field-msg). The PHP twin is modules/atx-schedule.php.
   ============================================================ */
.atx-schedule__rows { border-top: 1px solid #e5e7eb; margin-bottom: 12px; }
.atx-schedule__row { display: flex; align-items: stretch; border-bottom: 1px solid #e5e7eb; }
.atx-schedule__num {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 2.25rem;
  padding: 0.6rem 0.5rem;
  box-sizing: border-box;
  border-right: 1px solid #e5e7eb;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #999;
}
.atx-schedule__main { flex: 1 1 auto; min-width: 0; padding: 0.6rem 0.75rem; cursor: pointer; font-size: 0.9rem; line-height: 1.4; }
.atx-schedule__name { display: block; font-weight: 700; }
.atx-schedule__sum { display: block; color: #444; }
.atx-schedule__sum i { color: #888; }
/* A rule switched off: kept in the list, greyed (its dot is red). */
.atx-schedule__row.is-off .atx-schedule__main { color: #888; }
.atx-schedule__row.is-off .atx-schedule__sum { color: #999; }
/* The schedule not in use (ATX.schedule … muted(true)): every dot grey. */
.atx-schedule.is-muted .atx-dot[class*="atx-dot--"] { background: #9ca3af; }
/* The window: Namn, and Aktiv to its right at the field's height. */
.atx-schedule__namerow { display: flex; align-items: flex-end; gap: 16px; }
.atx-schedule__namerow > .atx-form-field { flex: 1 1 auto; }
.atx-schedule__active { flex: 0 0 auto; min-height: 48px; margin-bottom: 12px; font-weight: 600; }
.atx-schedule__none { margin: 0; padding: 0.6rem 0.75rem; font-size: 0.9rem; color: #666; }
.atx-schedule__acts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0.4rem;
  border-left: 1px solid #e5e7eb;
}
.atx-schedule__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #666;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.atx-schedule__btn:hover { background: #f3f4f6; color: #111827; }
.atx-schedule__btn--remove:hover { background: #fef2f2; color: #b91c1c; }
.atx-schedule-dialog { z-index: 100045; } /* on top of the window it opens from (100040–100044) */
.atx-schedule__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 440px; }
.atx-schedule__day { position: relative; margin: 0; cursor: pointer; }
.atx-schedule__day > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.atx-schedule__day > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 0 2px;
  box-sizing: border-box;
  border: 1px solid #aaa;
  border-radius: 999px;
  background: #fff;
  color: #444;
  font-size: 0.85rem;
  font-weight: 600;
  user-select: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.atx-schedule__day > input:checked + span {
  background: var(--are-color, #E52713);
  border-color: var(--are-color, #E52713);
  color: #fff;
}
.atx-schedule__day > input:focus-visible + span {
  outline: 2px solid var(--are-color, #E52713);
  outline-offset: 2px;
}
.atx-schedule__read:empty { display: none; }
/* Inställningar → Öppettider (atx-schedule-hours.js): the 14-day table. */
.atx-schedule-hours__preview td:first-child { white-space: nowrap; }
.atx-schedule-hours__src { color: #888; font-size: 0.85em; }
/* Extra fields in the window (ATX.schedule … fields): a check, and a grid
   (e.g. one row per vehicle type: name, − n +, lowest price … kr). */
.atx-schedule__extracheck { margin: 0 0 12px; font-weight: 600; }
.atx-schedule__grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 2), auto); gap: 8px 12px; align-items: center; }
.atx-schedule__gridhead { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #666; }
.atx-schedule__gridname { font-weight: 600; min-width: 0; }
.atx-schedule__gridcell .atx-form-field__unitrow { width: 150px; }
.atx-schedule__gridcell .atx-stepper__value,
.atx-schedule-dialog .atx-stepper__value { width: 56px; text-align: center; border: 0; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.atx-schedule-dialog .atx-stepper__value::-webkit-inner-spin-button,
.atx-schedule-dialog .atx-stepper__value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 480px) {
  .atx-schedule__grid { gap: 8px; }
  .atx-schedule__gridcell .atx-form-field__unitrow { width: 112px; }
}
.atx-form-field__hint.atx-schedule__help { margin: 6px 0; } /* how to write the times: a little air above and below */
.atx-schedule__add { margin-right: 9px; } /* the + right above the row icons */
@media (max-width: 480px) {
  .atx-schedule__num { min-width: 1.9rem; padding: 0.5rem 0.3rem; font-size: 0.78rem; }
  .atx-schedule__main { padding: 0.5rem 0.6rem; }
  .atx-schedule__acts { padding: 0.3rem 0.25rem; gap: 2px; }
  .atx-schedule__btn { width: 30px; height: 30px; }
  .atx-schedule__days { gap: 4px; }
  .atx-schedule__day > span { font-size: 0.8rem; }
}


/* ============================================================
   PHONE PILL — reusable "call us" CTA
   Renders a rounded red pill (.atx-btn--primary palette) with an
   inline phone icon + number label. Suitable for inline embedding
   in modal bodies, banners, and any place a plain tel: link would
   feel underweight. Mirrors the older .atx-book-alt__empty-call
   pattern (kept local to book-alt for now) and promotes it to a
   theme-wide primitive.
   Usage:
     <a href="tel:+46..." class="atx-phone-pill">
       <svg class="atx-phone-pill-icon">…</svg>
       <span class="atx-phone-pill-label">+46 …</span>
     </a>
   Selector uses `a.atx-phone-pill` (specificity 0,1,1) so it beats
   scoped rules like `.atx-modal-body a` which would otherwise
   repaint the label in the ambient link colour and hide the pill's
   white text against the red background.
   ============================================================ */
a.atx-phone-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--btn-primary-bg, var(--are-color, #E52713));
    color: var(--btn-primary-text, #ffffff);
    border: 1px solid var(--btn-primary-bg, var(--are-color, #E52713));
    text-decoration: none;
    line-height: 1;
    font-weight: 600;
    transition: filter 0.12s ease, transform 0.12s ease;
}
a.atx-phone-pill:hover,
a.atx-phone-pill:focus-visible {
    color: var(--btn-primary-text, #ffffff);
    filter: brightness(0.9);
    text-decoration: none;
    transform: translateY(-1px);
}
a.atx-phone-pill:focus-visible {
    outline: 2px solid var(--are-color, #E52713);
    outline-offset: 2px;
}
.atx-phone-pill-icon {
    flex: none;
    display: block;
    width: 16px;
    height: 16px;
}
.atx-phone-pill-label {
    font-weight: 600;
}