/*
  floating-actions.css: the public website's floating button, the WhatsApp box and the "Chat on WhatsApp"
  buttons of the menu bar and the footer (Content module; docs/modules/02-website.md, "Floating button").
  Tokens only (StyleRules), logical properties only, so Arabic needs nothing extra: "start" and "end"
  follow the page's direction.

  Where it sits, and what it keeps clear of (all fixed to the bottom corners):
    - the template's back-to-top button (go-top), at the END corner, about 12 to 52px from the bottom:
      an end-side floating button sits above it;
    - the light/dark switch (bfau-mode-switch), at the START corner on computers, up to 4.25rem high,
      and staff's "Edit this page" pill above it, up to about 7.5rem: a start-side button sits above
      whichever of them is on the page;
    - the analytics consent bar, across the bottom: the script lifts the button by the bar's height
      (--bfau-fab-lift) while the bar shows;
    - the WhatsApp box, a modal dialog in the top layer, above everything.
  z-index 1035: above the mode switch and the edit pill (1030), below the consent bar (1050).
*/

.bfau-fab {
  position: fixed;
  z-index: 1035;
  inset-block-end: calc(var(--bfau-fab-bottom, 1.25rem) + var(--bfau-fab-lift, 0px));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-inline-size: calc(100vw - 2rem);
}

.bfau-fab-end {
  inset-inline-end: 1rem;
  align-items: flex-end;
}

.bfau-fab-start {
  inset-inline-start: 1rem;
  align-items: flex-start;
}

/* Clear of the template's back-to-top button at the end corner. */
body:has(> .go-top) .bfau-fab-end {
  --bfau-fab-bottom: 4.5rem;
}

/* Clear of the light/dark switch at the start corner (it floats on computers only). */
@media (min-width: 992px) {
  html[data-bfau-dark-switch="on"] .bfau-fab-start {
    --bfau-fab-bottom: 5.25rem;
  }
}

/* Clear of staff's "Edit this page" pill, once its script has shown it. */
body:has(.bfau-edit-link:not([hidden])) .bfau-fab-start {
  --bfau-fab-bottom: 8.5rem;
}

@media (max-width: 991.98px) {
  .bfau-fab-no-phone {
    display: none;
  }
}

@media (min-width: 992px) {
  .bfau-fab-no-desktop {
    display: none;
  }
}

/* ---- The list: open without scripts; with them (html.bfau-js, set before the first paint by
   public-boot.js) closed until the main button opens it. ---- */
.bfau-fab-list {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bfau-js .bfau-fab-list:not(.bfau-fab-open) {
  display: none;
}

html:not(.bfau-js) .bfau-fab-toggle {
  display: none;
}

/* One button in the list: a pill with its icon nearest the screen's edge. */
.bfau-fab-action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 2.75rem;
  max-inline-size: 18rem;
  padding-block: 0.25rem;
  padding-inline: 0.25rem 1rem;
  border-radius: 999px;
  background-color: var(--bfau-surface);
  color: var(--bfau-heading);
  box-shadow: var(--bfau-shadow);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.bfau-fab-end .bfau-fab-action {
  flex-direction: row-reverse;
  padding-inline: 1rem 0.25rem;
}

.bfau-fab-action:hover,
.bfau-fab-action:focus {
  background-color: var(--bfau-surface);
  color: var(--bfau-heading);
  text-decoration: none;
}

.bfau-fab-action:focus-visible,
.bfau-fab-toggle:focus-visible,
.bfau-wa-close:focus-visible {
  outline: 3px solid var(--bfau-focus-ring);
  outline-offset: 2px;
}

.bfau-fab-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
  font-size: 1.25rem;
}

.bfau-fab-whatsapp .bfau-fab-icon {
  background-color: var(--bfau-whatsapp);
  color: var(--bfau-on-whatsapp);
}

/* ---- The single button: round, its icon only (the link's aria-label names it). ---- */
.bfau-fab-direct .bfau-fab-action {
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  padding: 0;
  background-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
}

.bfau-fab-direct .bfau-fab-action.bfau-fab-whatsapp {
  background-color: var(--bfau-whatsapp);
  color: var(--bfau-on-whatsapp);
}

.bfau-fab-direct .bfau-fab-icon {
  inline-size: 100%;
  block-size: 100%;
  font-size: 1.75rem;
}

.bfau-fab-direct .bfau-fab-label {
  display: none;
}

/* ---- The main button that opens the list. ---- */
.bfau-fab-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
  box-shadow: var(--bfau-shadow);
  font-size: 1.75rem;
  cursor: pointer;
}

.bfau-fab-toggle[aria-expanded="true"] [data-bfau-fab-icon="closed"],
.bfau-fab-toggle[aria-expanded="false"] [data-bfau-fab-icon="open"] {
  display: none;
}

/* ---- The WhatsApp box: a modal dialog. Centred on computers, a sheet along the bottom on phones. ---- */
.bfau-wa-box {
  inline-size: min(26rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.25rem;
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius-lg);
  background-color: var(--bfau-surface);
  color: var(--bfau-text);
  box-shadow: var(--bfau-shadow);
}

.bfau-wa-box::backdrop {
  background-color: var(--bfau-photo-scrim-top);
}

dialog.bfau-wa-box:not([open]) {
  display: none;
}

@media (max-width: 575.98px) {
  .bfau-wa-box {
    inline-size: 100%;
    max-inline-size: 100%;
    margin-block-end: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
}

.bfau-wa-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 1rem;
}

.bfau-wa-mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background-color: var(--bfau-whatsapp);
  color: var(--bfau-on-whatsapp);
  font-size: 1.5rem;
}

.bfau-wa-title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--bfau-heading);
  font-size: 1.15rem;
  line-height: 1.3;
}

.bfau-wa-close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--bfau-surface);
  color: var(--bfau-heading);
  font-size: 1.5rem;
  cursor: pointer;
}

.bfau-wa-label {
  display: block;
  margin-block-end: 0.35rem;
  color: var(--bfau-heading);
  font-weight: 600;
}

.bfau-wa-text {
  resize: vertical;
  min-block-size: 7rem;
}

.bfau-wa-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-block: 0.5rem 1rem;
}

.bfau-wa-help {
  flex: 1 1 14rem;
  margin: 0;
  color: var(--bfau-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.bfau-wa-count {
  color: var(--bfau-text-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

.bfau-wa-fallback {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--bfau-border);
}

.bfau-wa-fallback-text {
  margin-block-end: 0.5rem;
  color: var(--bfau-text);
  font-size: 0.9rem;
}

.bfau-wa-number {
  color: var(--bfau-heading);
  font-weight: 600;
}

.bfau-wa-status {
  display: block;
  margin-block-start: 0.5rem;
  color: var(--bfau-text);
  font-size: 0.875rem;
}

/* The template's dark button keeps its own look; only its spacing changes here. */
.optional-btn.bfau-wa-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: 0;
  padding-block: 0.6rem;
  padding-inline: 1.25rem;
  min-block-size: 2.75rem;
  font-size: 0.9rem;
}

/* ---- The WhatsApp buttons (the box's Send, the menu bar's and the footer's): the template's button in
   the WhatsApp colour. The template (and templates.css after it) colours a button's label for the brand
   colour and fills it with the heading colour on hover; here the label keeps the WhatsApp text colour and
   the fill only darkens, in every state. The html[data-bs-theme] prefix outranks templates.css's
   dark-mode focus rule. ---- */
html[data-bs-theme] .default-btn:is(.bfau-wa-send, .bfau-wa-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background-color: var(--bfau-whatsapp);
  color: var(--bfau-on-whatsapp);
}

html[data-bs-theme] .default-btn:is(.bfau-wa-send, .bfau-wa-cta):is(:hover, :focus, :active) {
  background-color: var(--bfau-whatsapp);
  color: var(--bfau-on-whatsapp);
  filter: brightness(0.9);
}

.default-btn:is(.bfau-wa-send, .bfau-wa-cta) span {
  display: none;
}

.default-btn:is(.bfau-wa-send, .bfau-wa-cta) i {
  margin-inline: 0 0.25rem;
  font-size: 1.15rem;
  vertical-align: -0.15em;
}

.bfau-wa-send {
  inline-size: 100%;
  min-block-size: 2.75rem;
}

/* Level with the language switch beside it in the menu bar. */
.huruma-nav .others-options:has(> .bfau-wa-cta-header) {
  display: flex;
  align-items: center;
}

.default-btn.bfau-wa-cta-header {
  padding-block: 0.6rem;
  padding-inline: 1.25rem;
  margin-inline-start: 1.25rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

.default-btn.bfau-wa-cta-footer {
  margin-block: 0.5rem 1rem;
  padding-block: 0.7rem;
  padding-inline: 1.4rem;
  font-size: 0.95rem;
}


/* A laptop-width menu bar has no room for the words: the icon alone (the link keeps its spoken name). */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .default-btn.bfau-wa-cta-header {
    padding-inline: 0.75rem;
  }

  .bfau-wa-cta-header .bfau-wa-cta-text {
    display: none;
  }

  .default-btn.bfau-wa-cta-header i {
    margin-inline: 0;
  }
}

/* The menu bar's WhatsApp button, copied into the phone menu (floating-actions.js): the template's
   phone menu draws every link as a full-width row; this one keeps its button look, words included. */
.mean-container .mean-nav ul li.bfau-wa-phone-item {
  padding-block: 0.75rem;
  padding-inline: 5%;
  border-block-start: 1px solid var(--bfau-border);
}

.mean-container .mean-nav ul li.bfau-wa-phone-item a.default-btn.bfau-wa-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  float: none;
  inline-size: auto;
  margin: 0;
  padding-block: 0.6rem;
  padding-inline: 1.25rem;
  border: 0;
  background-color: var(--bfau-whatsapp);
  color: var(--bfau-on-whatsapp);
  text-align: center;
}

.mean-container .mean-nav ul li.bfau-wa-phone-item .bfau-wa-cta-text,
.mean-container .mean-nav ul li.bfau-wa-phone-item .bfau-wa-cta i {
  display: inline;
  color: var(--bfau-on-whatsapp);
}