/**handles:hfai-pillbar-css**/
/* ============================================================
   HFAI Pillbar CSS — CLEAN (no duplicate float blocks)
   Notes:
   - No flex "gap" used (Thrive Architect compatibility)
   - Desktop: floating/portalized form is fixed at --pb-top-desktop
   - Mobile: mobile form is fixed at --pb-top-mobile and stays anchored
   - Minimize: hides bar and shows FAB bottom-left
   ============================================================ */

/* === Base wrapper ====================================================== */
.hfai-pillbar-wrap {
  width: 100%;
}
.hfai-pillbar-wrap.is-centered {
  display: flex;
  justify-content: center;
}

/* === Base pillbar (non-floating) ====================================== */
.hfai-pillbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--hfai-radius, 8px);

  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);

  width: fit-content;
  max-width: 100%;

  /* Spacing without gap */
}
.hfai-pillbar > * {
  margin-right: 0.5rem;
}
.hfai-pillbar > *:last-child {
  margin-right: 0;
}

.hfai-pillbar .pill-field {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.6rem;

  /* spacing without gap */
}
.hfai-pillbar .pill-field > * {
  margin-right: 0.5rem;
}
.hfai-pillbar .pill-field > *:last-child {
  margin-right: 0;
}

.hfai-pillbar label {
  font-size: 1rem;
  color: #6b7280;
  white-space: nowrap;
}

.hfai-pillbar input[type="text"],
.hfai-pillbar input[type="date"],
.hfai-pillbar select {
  border: 0;
  background: transparent;
  padding: 0.25rem 0;
  font-size: 0.95rem;
  color: #111827;
  outline: none;
  min-width: 6ch;
}

.hfai-pillbar .pill-sep {
  opacity: 0.35;
  user-select: none;
}

.hfai-pillbar .pill-cta[disabled] {
  opacity: 0.8;
  cursor: not-allowed;
  pointer-events: none;
}

/* === CTA styling (accent comes from shortcode inline CSS var) ========== */
.hfai-pillbar .pill-cta {
  background: var(--hfai-accent) !important;
  border-color: var(--hfai-accent) !important;
  color: #fff !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  margin-left: 0 !important; /* prevent old “push right” rules */
}

/* === Close (×) button ================================================== */
.hfai-pillbar .pill-hide {
  line-height: 1 !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 16px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111827 !important;
}

/* === Flatpickr calendar always above ================================== */
.flatpickr-calendar {
  z-index: 10000 !important;
}

/* =======================================================================
   DESKTOP FLOATING (PORTALIZED FORM)
   This is the ONE authoritative floating block for desktop.
   ======================================================================= */

:root {
  /* Desktop “straddle line” (because translateY(-50%)) */
  --pb-top-desktop: 116px;

  /* Mobile “straddle line” under header (EDIT THIS if needed) */
  --pb-top-mobile: 64px;
}

/* Float the DESKTOP form when it has .is-floating (JS adds this) */
form.hfai-pillbar--desktop.is-floating {
  position: fixed !important;
  z-index: 9995 !important;

  left: 50% !important;
  top: var(--pb-top-desktop) !important;
  transform: translate(
    -50%,
    -50%
  ) !important; /* half above / half below line */

  width: max-content !important;
  max-width: calc(100vw - 32px) !important; /* 16px gutters */

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;

  padding: 10px 14px !important;
  box-sizing: border-box !important;

  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.28) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* No child growth / no mystery gaps (no gap property) */
form.hfai-pillbar--desktop.is-floating > * {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Spacing between direct children without gap */
form.hfai-pillbar--desktop.is-floating > * {
  margin-right: 10px !important;
}
form.hfai-pillbar--desktop.is-floating > *:last-child {
  margin-right: 0 !important;
}

/* Compact field widths (Flatpickr alt inputs) */
form.hfai-pillbar--desktop.is-floating input.form-control.input,
form.hfai-pillbar--desktop.is-floating input[type="text"] {
  width: 14ch !important;
  max-width: 14ch !important;
}
form.hfai-pillbar--desktop.is-floating select {
  width: 6ch !important;
  max-width: 6ch !important;
}

/* Hide separators while floating */
form.hfai-pillbar--desktop.is-floating .pill-sep,
form.hfai-pillbar--desktop.is-floating .separator,
form.hfai-pillbar--desktop.is-floating .divider {
  display: none !important;
}

/* Optional per-breakpoint tuning for desktop float line */
@media (max-width: 1199.98px) {
  :root {
    --pb-top-desktop: 108px;
  }
}
@media (max-width: 991.98px) {
  :root {
    --pb-top-desktop: 100px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --pb-top-desktop: 92px;
  }
}

/* Neutralize any old wrapper-floating if it ever existed */
.hfai-pillbar-wrap.is-floating {
  position: static !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
}

/* =======================================================================
   MINIMIZE + FAB
   ======================================================================= */

/* Show FAB only when minimized */
.hfai-pillbar-wrap:not(.is-minimized) .hfai-pillbar-toggle {
  display: none !important;
}

/* When minimized, hide whatever pillbar is visible */
.hfai-pillbar-wrap.is-minimized .hfai-pillbar {
  display: none !important;
}

/* ============================================================
   MOBILE: FAB visibility when portalized to <body>
   - When minimized, the FAB may be moved to <body>.
   - This rule ensures it can still become visible.
   ============================================================ */
@media (max-width: 520px) {
  .hfai-pillbar-wrap.is-minimized ~ button.hfai-pillbar-toggle,
  body > button.hfai-pillbar-toggle {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
}

/* FAB button */
.hfai-pillbar-wrap.is-minimized .hfai-pillbar-toggle {
  display: grid !important;
  position: fixed !important;
  left: 16px !important;
  bottom: 16px !important;
  z-index: 10000 !important;

  width: var(--hfai-fab-size, 44px);
  height: var(--hfai-fab-size, 44px);

  border-radius: 50%;
  place-items: center;
  padding: 0;
  border: 0;

  background: #52B5A3;
  color: #fff;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
}
.hfai-pillbar-wrap.is-minimized .hfai-pillbar-toggle i {
  font-size: calc(var(--hfai-fab-size, 44px) * 0.58);
  line-height: 1;
}

/* =======================================================================
   DESKTOP vs MOBILE visibility switching
   ======================================================================= */

/* Default: show desktop form, hide mobile form */
form.hfai-pillbar--mobile {
  display: none;
}
form.hfai-pillbar--desktop {
  display: block;
}

/* Mobile viewport: hide desktop (including portalized), show mobile */
@media (max-width: 520px) {
  form.hfai-pillbar--desktop,
  form.hfai-pillbar--desktop.is-floating,
  body > form.hfai-pillbar--desktop {
    display: none !important;
  }
form.hfai-pillbar--mobile:not(.hfai-mobile-hidden) {
    display: block !important;
  }

  /* Authoritative: hidden always wins */
  form.hfai-pillbar--mobile.hfai-mobile-hidden {
    display: none !important;
  }
}


/* =======================================================================
   MOBILE: PIN THE MOBILE PILLBAR UNDER THE HEADER (ANCHOR ON SCROLL)
   This is the key behavior you want.
   - Uses translateY(-50%) to straddle header bottom line.
   - Adjust --pb-top-mobile if needed.
   ======================================================================= */
@media (max-width: 520px) {
  /* Pin the mobile form to the viewport */
  form.hfai-pillbar--mobile {
    position: fixed !important;
    left: 50% !important;
    top: var(--pb-top-mobile) !important;
    transform: translate(-50%, -50%) !important;

    z-index: 99999 !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* If minimized, hide mobile form (FAB stays visible via rules above) */
  .hfai-pillbar-wrap.is-minimized form.hfai-pillbar--mobile {
    display: none !important;
  }
}

/* =======================================================================
   MOBILE LAYOUT (legacy-safe floats; no CSS gap)
   ======================================================================= */
form.hfai-pillbar--mobile {
  box-sizing: border-box;
}
form.hfai-pillbar--mobile::after {
  content: "";
  display: block;
  clear: both;
}

form.hfai-pillbar--mobile .pill-col {
  float: left;
  box-sizing: border-box;
  margin-right: 2%;
  white-space: nowrap;
}
form.hfai-pillbar--mobile .pill-col:nth-child(4n + 1) {
  clear: left;
}
form.hfai-pillbar--mobile .pill-col:nth-child(4n) {
  margin-right: 0;
}

/* Row 1: label 24 | date 23 | label 24 | date 23 = 94% */
form.hfai-pillbar--mobile .pill-col:nth-child(1),
form.hfai-pillbar--mobile .pill-col:nth-child(3) {
  width: 24%;
}

form.hfai-pillbar--mobile .pill-col:nth-child(2),
form.hfai-pillbar--mobile .pill-col:nth-child(4) {
  width: 23%;
}

/* Row 2: label 18 | select 20 | CTA 50 | × 6 = 94% */
form.hfai-pillbar--mobile .pill-col:nth-child(5) {
  width: 18%;
}
form.hfai-pillbar--mobile .pill-col:nth-child(6) {
  width: 20%;
}
form.hfai-pillbar--mobile .pill-col:nth-child(7) {
  width: 50%;
}
form.hfai-pillbar--mobile .pill-col:nth-child(8) {
  width: 6%;
  text-align: center;
}

/* Controls fill their cells */
form.hfai-pillbar--mobile input[type="date"],
form.hfai-pillbar--mobile select,
form.hfai-pillbar--mobile button {
  width: 100%;
  max-width: 100%;
}

/* Remove label colon on mobile (your preference) */
@media (max-width: 520px) {
  form.hfai-pillbar--mobile label::after {
    content: none;
  }
}

/* Compact heights on mobile */
@media (max-width: 520px) {
  form.hfai-pillbar--mobile input[type="date"],
  form.hfai-pillbar--mobile select {
    height: 32px;
    min-height: 32px;
    padding: 2px 8px;
    font-size: 14px;
    line-height: 1.1;
  }

  /* 4px gap under Row 1 (first 4 columns) */
  form.hfai-pillbar--mobile .pill-col:nth-child(-n + 4) {
    margin-bottom: 4px;
  }

  /* CTA and close match height */
  form.hfai-pillbar--mobile .pill-cta {
    height: 32px;
    line-height: 32px;
    border-radius: 8px;
    padding: 0 14px;
    text-transform: capitalize;
  }
  form.hfai-pillbar--mobile .pill-hide {
    height: 32px;
    line-height: 32px;
  }
}

/* If Flatpickr alt inputs ever exist in mobile, style them safely */
@media (max-width: 520px) {
  form.hfai-pillbar--mobile input.hfai-alt {
    height: 32px;
    line-height: 32px;
    padding: 2px 10px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    box-sizing: border-box;
  }
}
/* ============================================================
   HFAI Pillbar — MOBILE BASELINE RESTORE (layout + pinned)
   - Restores correct width/placement of mobile pillbar
   - Restores FAB styling (but DOES NOT force it visible)
   - Does NOT affect desktop (wrapped in max-width:520px)
   ============================================================ */

@media (max-width:520px){

  /* --- Mobile pillbar pinned under header (centered) --- */
  form.hfai-pillbar--mobile{
    position: fixed !important;
    left: 50% !important;
    top: var(--pb-top-mobile, 64px) !important;
    transform: translate(-50%, 15px) !important;

    z-index: 2147483647 !important;

    width: min(360px, calc(100vw - 56px)) !important;
    max-width: min(360px, calc(100vw - 56px)) !important;

    box-sizing: border-box !important;
  }

  /* Make the form shell span full width */
  form.hfai-pillbar--mobile.hfai-pillbar{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- Mobile layout: float columns (no gap) --- */
  form.hfai-pillbar--mobile{ box-sizing:border-box !important; }
  form.hfai-pillbar--mobile::after{ content:""; display:block; clear:both; }

  form.hfai-pillbar--mobile .pill-col{
    float:left;
    box-sizing:border-box;
    margin-right:2%;
    white-space:nowrap;
  }
  form.hfai-pillbar--mobile .pill-col:nth-child(4n+1){ clear:left; }
  form.hfai-pillbar--mobile .pill-col:nth-child(4n){ margin-right:0; }

/* Row 1: label 18 | date 29 | label 18 | date 29 = 94% */
form.hfai-pillbar--mobile .pill-col:nth-child(1),
form.hfai-pillbar--mobile .pill-col:nth-child(3){
  width:18%;
}

form.hfai-pillbar--mobile .pill-col:nth-child(2),
form.hfai-pillbar--mobile .pill-col:nth-child(4){
  width:29%;
}

  /* Row 2: label 18 | select 20 | CTA 50 | × 6 = 94% */
  form.hfai-pillbar--mobile .pill-col:nth-child(5){ width:18%; }
  form.hfai-pillbar--mobile .pill-col:nth-child(6){ width:20%; }
  form.hfai-pillbar--mobile .pill-col:nth-child(7){ width:50%; }
  form.hfai-pillbar--mobile .pill-col:nth-child(8){ width:6%; text-align:center; }

  /* Controls fill their cells */
  form.hfai-pillbar--mobile input[type="date"],
  form.hfai-pillbar--mobile select,
  form.hfai-pillbar--mobile button{
    width:100% !important;
    max-width:100% !important;
  }

  /* Compact heights */
  form.hfai-pillbar--mobile input[type="date"],
  form.hfai-pillbar--mobile select{
    height:32px !important;
    min-height:32px !important;
    padding:2px 8px !important;
    font-size:14px !important;
    line-height:1.1 !important;
  }

form.hfai-pillbar--mobile input[type="date"]{
  padding-right: 6px !important;
  text-overflow: clip !important;
}

  /* 4px gap under Row 1 (first 4 columns) */
  form.hfai-pillbar--mobile .pill-col:nth-child(-n+4){
    margin-bottom:4px;
  }

  /* CTA and close match height */
  form.hfai-pillbar--mobile .pill-cta{
    height:32px !important;
    line-height:32px !important;
    border-radius:8px !important;
    padding:0 14px !important;
    text-transform: capitalize !important;
  }
  form.hfai-pillbar--mobile .pill-hide{
    height:32px !important;
    line-height:32px !important;
  }

  /* Remove label colon on mobile */
  form.hfai-pillbar--mobile label::after{ content:none !important; }
}

/* --- FAB styling (global, but does NOT force visibility) --- */
button.hfai-pillbar-toggle{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 2147483647;

  width: var(--hfai-fab-size,44px);
  height: var(--hfai-fab-size,44px);
  border-radius: 50%;

  display: grid;
  place-items: center;

  border: 0;
  padding: 0;
  background: #52B5A3;
  color: #fff;

  box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
}

button.hfai-pillbar-toggle i{
  font-size: calc(var(--hfai-fab-size,44px) * .58);
  line-height: 1;
}

/* HFAI — MOBILE PILLBAR: HARDWIRED WIDTH (no calc) */
@media (max-width: 520px) {

  /* the mobile pillbar form/card */
  form.hfai-pillbar--mobile,
  form.hfai-pillbar--mobile.hfai-pillbar,
  form.hfai-pillbar--mobile .hfai-pillbar {
    width: 387px !important;       /* HARDWIRED: fits 412px viewport with margins */
    max-width: 387px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}

/* HFAI — MOBILE DATE INPUTS: make native mm/dd/yyyy fully visible */
@media (max-width: 520px) {

  form.hfai-pillbar--mobile input[type="date"].flatpickr-mobile {
    font-size: 13px !important;   /* smaller so yyyy fits */
    padding-right: 4px !important;
    padding-left: 2px !important;
    min-width: 100px !important;
  }

}

/* ============================================================
   HFAI Pillbar — MOBILE: show portalized FAB when minimized
   (JS sets: body.hfai-pb-minimized and data-hfai-portal="1")
   ============================================================ */
@media (max-width: 520px) {

  /* When minimized, the portalized FAB must be visible/clickable */
  body.hfai-pb-minimized > button.hfai-pillbar-toggle[data-hfai-portal="1"] {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;

    position: fixed !important;
    left: 16px !important;
    bottom: 16px !important;
    z-index: 2147483647 !important;
  }
}