/*
 * Innovating Chaos — booking calendar
 *
 * Everything is scoped under `.ic-bk`. This component can be dropped on any
 * page on the site, including the WPFunnels pages that are off the design
 * system, so it must not reach a single selector outside itself.
 *
 * THE LOOK, AND WHERE IT COMES FROM
 * ---------------------------------
 * The reference this was built against is a floating-card interface: panels
 * lifted off a soft field, wide corner radii, frosted chrome, pill segmented
 * controls, and rows led by a tinted icon chip. That structure is used here in
 * full.
 *
 * The reference's palette is not. It is cool — greys, lavender, mint — and this
 * site's design system is Lettery kit 2062, which is warm: cream #EFEAE3, sand
 * #DACFC1, and the accent #FF6600. Importing a cool neutral set alongside it
 * produces two design systems on one page. So the *effect* is borrowed and the
 * *colour* is the kit's, with every tint derived from the accent's own arc.
 *
 * WHERE THE FROSTING STOPS
 * ------------------------
 * `backdrop-filter` is used on the stage and on the card edge, never underneath
 * running text. Blurred glass behind body copy is the reliable way to fail
 * contrast: the background moves, the measured ratio moves with it, and there
 * is no value that is safe on every scroll position. Text sits on a near-opaque
 * surface throughout, which is why the dark scheme can be checked and stated
 * rather than hoped for.
 */

/* ---------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------ */
.ic-bk {
  /* Kit 2062. Same values, same names, as ic-pathways.css. */
  --ic-bk-brand:      #FF6600;
  --ic-bk-brand-ink:  #8C3800;  /* text-legible accent, 5.10:1 on sand */
  --ic-bk-brand-lift: #FF8A3D;  /* for dark surfaces — #FF6600 is 4.48:1 there */
  --ic-bk-brand-soft: #FFEDE0;

  --ic-bk-ink:        #0B0500;
  --ic-bk-body:       #5A5751;
  /* Not the kit's #7A7A7A. That is Lettery's body grey and it measures 3.79:1
     on white — under AA for normal text, which every use of this token is.
     ic-pathways.css already replaced it with #5A5751 for the same reason; this
     is the same decision one step lighter, at 5.6:1. */
  --ic-bk-quiet:      #6B665F;
  --ic-bk-hairline:   #E4DED5;
  --ic-bk-paper:      #FFFFFF;
  --ic-bk-warm:       #FBF8F4;
  --ic-bk-cream:      #EFEAE3;
  --ic-bk-sand:       #DACFC1;

  /* Icon chips. Three warm tints along the accent's arc — amber, clay, rust —
     rather than the reference's mint and lavender, which have no relationship
     to a cream-and-sand page. */
  --ic-bk-chip-1: #FFEDE0;
  --ic-bk-chip-2: #F8F0E1;
  --ic-bk-chip-3: #F5EEEA;

  --ic-bk-ok:    #1a7f37;
  --ic-bk-error: #B42318;

  --ic-bk-radius:    22px;
  --ic-bk-radius-sm: 14px;

  /* Layered rather than one big blur: a tight contact shadow for the edge and
     a wide soft one for the lift. One shadow doing both jobs reads as a drop
     shadow; two read as an object above a surface. */
  --ic-bk-lift:
    0 1px 2px rgba(11, 5, 0, .05),
    0 8px 20px -10px rgba(11, 5, 0, .14),
    0 30px 60px -30px rgba(11, 5, 0, .20);
  --ic-bk-lift-sm:
    0 1px 2px rgba(11, 5, 0, .05),
    0 6px 16px -12px rgba(11, 5, 0, .18);

  --ic-bk-surface: rgba(255, 255, 255, .86);

  --ic-bk-ease: cubic-bezier(.22, .61, .36, 1);

  position: relative;
  isolation: isolate;
  container-type: inline-size;

  font-family: inherit;
  color: var(--ic-bk-body);
  line-height: 1.55;

  padding: clamp(18px, 4vw, 44px) 0;
}

/* The field the cards float on. A warm wash plus two soft accent glows, drawn
   as a pseudo-element so it cannot affect layout or be inherited by children. */
.ic-bk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: clamp(16px, 3vw, 32px);
  background:
    radial-gradient(70% 55% at 12% 0%,  rgba(255, 102, 0, .10), transparent 62%),
    radial-gradient(60% 60% at 92% 22%, rgba(218, 207, 193, .55), transparent 66%),
    linear-gradient(180deg, var(--ic-bk-cream), #F6F2EC);
}

.ic-bk *,
.ic-bk *::before,
.ic-bk *::after { box-sizing: border-box; }

/*
 * Every icon in this component is a stroke drawing on `fill="none"`.
 *
 * `fill="none"` on the tag is a *presentation attribute*, and presentation
 * attributes sit at the very bottom of the cascade — any stylesheet rule beats
 * them, including a bare element selector. Safe SVG is active on this site and
 * ships exactly that: `svg { fill: currentColor }`, site-wide. Without the rule
 * below, every closed path fills in and the icon set renders as solid blobs.
 *
 * This is not a hypothetical. It is a recorded trap on this project and the
 * sibling Output Fixes plugin already carries the same defence for its card
 * icons. `!important` is load-bearing here, not decoration — it is what makes
 * this beat a third-party rule the plugin cannot edit.
 */
.ic-bk svg,
.ic-bk svg * {
  fill: none !important;
  stroke: currentColor;
}

/* ---------------------------------------------------------------------------
   2. Layout
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__grid {
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
  grid-template-columns: 1fr;
  align-items: start;
  padding: clamp(14px, 2.4vw, 26px);
  max-width: 1160px;
  margin: 0 auto;
}

/* Container query, not a media query: this component is dropped inside
   Elementor sections of varying width, so its own width is the only honest
   thing to lay out against. */
@container (min-width: 900px) {
  .ic-bk .ic-bk__grid {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  }
  .ic-bk .ic-bk__card--brief { grid-column: 1; grid-row: 1; }
  .ic-bk .ic-bk__card--pick,
  .ic-bk .ic-bk__card--details,
  .ic-bk .ic-bk__card--done { grid-column: 2; grid-row: 1; }
}

/* Fallback for browsers without container queries (Safari < 16). Without it
   they get the single-column layout, which is legible but wastes a wide page. */
@supports not (container-type: inline-size) {
  @media (min-width: 940px) {
    .ic-bk .ic-bk__grid { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
    .ic-bk .ic-bk__card--brief { grid-column: 1; grid-row: 1; }
    .ic-bk .ic-bk__card--pick,
    .ic-bk .ic-bk__card--details,
    .ic-bk .ic-bk__card--done { grid-column: 2; grid-row: 1; }
  }
}

/* ---------------------------------------------------------------------------
   3. Cards
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__card {
  position: relative;
  padding: clamp(18px, 2.6vw, 30px);
  border-radius: var(--ic-bk-radius);
  background: var(--ic-bk-surface);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--ic-bk-lift);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
}

/* Without backdrop-filter the translucent surface reads as washed-out rather
   than frosted, so those browsers get the solid paper instead. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ic-bk .ic-bk__card { background: var(--ic-bk-paper); }
}

.ic-bk .ic-bk__card--single { max-width: 620px; margin: 0 auto; }

/* Colour and gradient set separately, not with the `background` shorthand.
   A gradient alone leaves `background-color` transparent, so the card has no
   surface if the gradient fails to paint — and anything measuring contrast
   against it reads straight through to whatever is behind. */
.ic-bk .ic-bk__card--brief {
  background-color: var(--ic-bk-surface);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .82));
}

/* ---------------------------------------------------------------------------
   4. Type
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ic-bk-brand-ink);
}

.ic-bk .ic-bk__title {
  margin: 0 0 10px;
  font-size: clamp(23px, 2.7vw, 30px);
  line-height: 1.18;
  font-weight: 600;
  color: var(--ic-bk-ink);
  letter-spacing: -.01em;
}

.ic-bk .ic-bk__title--sm { font-size: clamp(19px, 2vw, 22px); }

.ic-bk .ic-bk__blurb {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--ic-bk-body);
}

.ic-bk .ic-bk__blurb--sm { font-size: 14px; }

.ic-bk .ic-bk__hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ic-bk-quiet);
}

.ic-bk .ic-bk__hint a,
.ic-bk .ic-bk__blurb a { color: var(--ic-bk-brand-ink); }

.ic-bk .ic-bk__muted {
  margin: 0;
  padding: 22px 4px;
  font-size: 14px;
  color: var(--ic-bk-quiet);
}

.ic-bk .ic-bk__label {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ic-bk-ink);
}

/* ---------------------------------------------------------------------------
   5. Icon rows — the reference's tinted chip and two-line label
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__facts,
.ic-bk .ic-bk__summary {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ic-bk .ic-bk__facts li,
.ic-bk .ic-bk__summary li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--ic-bk-hairline);
}

.ic-bk .ic-bk__facts li:first-child,
.ic-bk .ic-bk__summary li:first-child { border-top: 0; }

.ic-bk .ic-bk__facts li > span:last-child,
.ic-bk .ic-bk__summary li > span:last-child { display: block; min-width: 0; }

.ic-bk .ic-bk__facts strong,
.ic-bk .ic-bk__summary strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ic-bk-ink);
}

.ic-bk .ic-bk__facts em,
.ic-bk .ic-bk__summary em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--ic-bk-quiet);
}

.ic-bk .ic-bk__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--ic-bk-chip-1);
  color: var(--ic-bk-brand-ink);
}

.ic-bk .ic-bk__ico svg { width: 20px; height: 20px; }

.ic-bk .ic-bk__facts li:nth-child(2) .ic-bk__ico,
.ic-bk .ic-bk__summary li:nth-child(2) .ic-bk__ico { background: var(--ic-bk-chip-2); }
.ic-bk .ic-bk__facts li:nth-child(3) .ic-bk__ico { background: var(--ic-bk-chip-3); }
.ic-bk .ic-bk__facts li:nth-child(4) .ic-bk__ico { background: var(--ic-bk-chip-2); }

.ic-bk .ic-bk__summary {
  margin: 0 0 22px;
  padding: 6px 16px;
  border-radius: var(--ic-bk-radius-sm);
  background: var(--ic-bk-warm);
  border: 1px solid var(--ic-bk-hairline);
}

/* ---------------------------------------------------------------------------
   6. Step crumbs
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  counter-reset: ic-bk-step;
}

.ic-bk .ic-bk__steps li {
  counter-increment: ic-bk-step;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--ic-bk-hairline);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ic-bk-quiet);
}

.ic-bk .ic-bk__steps li::before {
  content: counter(ic-bk-step);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ic-bk-hairline);
  color: var(--ic-bk-body);
  font-size: 11px;
}

.ic-bk .ic-bk__steps li.is-on {
  background: var(--ic-bk-brand-soft);
  border-color: #F3CBAE;
  color: var(--ic-bk-brand-ink);
}

.ic-bk .ic-bk__steps li.is-on::before {
  background: var(--ic-bk-brand);
  color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   7. Month navigation and day grid
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.ic-bk .ic-bk__month-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ic-bk-ink);
  text-align: center;
  flex: 1 1 auto;
}

.ic-bk .ic-bk__nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ic-bk-hairline);
  background: var(--ic-bk-paper);
  color: var(--ic-bk-ink);
  cursor: pointer;
  transition: background .18s var(--ic-bk-ease), border-color .18s var(--ic-bk-ease);
}

.ic-bk .ic-bk__nav svg { width: 19px; height: 19px; }
.ic-bk .ic-bk__nav:hover:not(:disabled) { background: var(--ic-bk-brand-soft); border-color: #F3CBAE; }

.ic-bk .ic-bk__nav:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.ic-bk .ic-bk__weekdays,
.ic-bk .ic-bk__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.ic-bk .ic-bk__weekdays {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ic-bk-quiet);
  text-align: center;
}

.ic-bk .ic-bk__days { min-height: 220px; align-content: start; }

.ic-bk .ic-bk__day {
  position: relative;
  display: grid;
  place-items: center;
  /* 44px is the minimum comfortable touch target; the aspect ratio keeps the
     grid square as the container grows. */
  min-height: 44px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ic-bk-ink);
  cursor: pointer;
  transition: background .16s var(--ic-bk-ease), color .16s var(--ic-bk-ease),
              border-color .16s var(--ic-bk-ease), transform .16s var(--ic-bk-ease);
}

.ic-bk .ic-bk__day--pad { visibility: hidden; pointer-events: none; }

.ic-bk .ic-bk__day--free {
  background: var(--ic-bk-paper);
  border-color: var(--ic-bk-hairline);
  box-shadow: var(--ic-bk-lift-sm);
}

.ic-bk .ic-bk__day--free:hover {
  border-color: var(--ic-bk-brand);
  transform: translateY(-1px);
}

/* The availability dot from the reference calendar. Decorative only — the
   accessible name carries the count, because a 5px dot is not information a
   screen reader or a colourblind reader can act on. */
.ic-bk .ic-bk__day--free::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ic-bk-brand);
}

/* A day with nothing free is still a date, and people orient in a month by
   reading the numbers. Disabled controls are exempt from the contrast rule;
   greying this to the point of illegibility would still be the wrong call, so
   it sits at 4.6:1 — clearly quieter than an open day at 17.9:1, and readable. */
.ic-bk .ic-bk__day--none {
  color: #7B756C;
  cursor: not-allowed;
}

.ic-bk .ic-bk__day--today { font-weight: 700; }

.ic-bk .ic-bk__day--today::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  border: 1px dashed var(--ic-bk-sand);
}

.ic-bk .ic-bk__day.is-on, 
.ic-bk .ic-bk__day.is-on:hover {
  background: var(--ic-bk-ink);
  border-color: var(--ic-bk-ink);
  color: #FFFFFF;
  transform: none;
}

.ic-bk .ic-bk__day.is-on::after { background: var(--ic-bk-brand-lift); }
.ic-bk .ic-bk__day.is-on::before { border-color: transparent; }

/* ---------------------------------------------------------------------------
   8. Time slots
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__slots-wrap {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ic-bk-hairline);
}

.ic-bk .ic-bk__slots-head {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ic-bk-ink);
}

.ic-bk .ic-bk__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  /* Roughly five rows before it scrolls, so a busy day cannot push the confirm
     button off the bottom of a phone screen. */
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ic-bk .ic-bk__slot {
  min-height: 44px;
  padding: 11px 8px;
  border-radius: 12px;
  border: 1px solid var(--ic-bk-hairline);
  background: var(--ic-bk-paper);
  box-shadow: var(--ic-bk-lift-sm);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ic-bk-ink);
  cursor: pointer;
  transition: border-color .16s var(--ic-bk-ease), background .16s var(--ic-bk-ease),
              transform .16s var(--ic-bk-ease);
}

.ic-bk .ic-bk__slot:hover {
  border-color: var(--ic-bk-brand);
  background: var(--ic-bk-brand-soft);
  transform: translateY(-1px);
}

.ic-bk .ic-bk__slot.is-on {
  background: var(--ic-bk-brand);
  border-color: var(--ic-bk-brand);
  color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   9. Form
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 14px;
  padding: 7px 13px 7px 8px;
  border-radius: 999px;
  border: 1px solid var(--ic-bk-hairline);
  background: var(--ic-bk-paper);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ic-bk-body);
  cursor: pointer;
}

.ic-bk .ic-bk__back svg { width: 16px; height: 16px; }
.ic-bk .ic-bk__back:hover { border-color: var(--ic-bk-brand); color: var(--ic-bk-brand-ink); }

.ic-bk .ic-bk__field { margin-bottom: 16px; }

.ic-bk .ic-bk__row {
  display: grid;
  gap: 0 14px;
  grid-template-columns: 1fr;
}

@container (min-width: 560px) {
  .ic-bk .ic-bk__row { grid-template-columns: 1fr 1fr; }
}

.ic-bk .ic-bk__field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ic-bk-ink);
}

.ic-bk .ic-bk__field label span { color: var(--ic-bk-brand-ink); }

.ic-bk .ic-bk__field input, 
.ic-bk .ic-bk__field textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--ic-bk-hairline);
  background: var(--ic-bk-paper);
  font: inherit;
  /* 16px stops iOS Safari zooming the viewport when a field is focused, which
     on a phone reads as the page jumping. */
  font-size: 16px;
  color: var(--ic-bk-ink);
  transition: border-color .16s var(--ic-bk-ease), box-shadow .16s var(--ic-bk-ease);
}

.ic-bk .ic-bk__field textarea { min-height: 96px; resize: vertical; }

.ic-bk .ic-bk__field input:focus, 
.ic-bk .ic-bk__field textarea:focus {
  outline: none;
  border-color: var(--ic-bk-brand);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, .18);
}

.ic-bk .ic-bk__field input[aria-invalid="true"], 
.ic-bk .ic-bk__field textarea[aria-invalid="true"] {
  border-color: var(--ic-bk-error);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
}

/* Pill segmented control — the reference's row of soft chips. */
.ic-bk .ic-bk__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ic-bk .ic-bk__pill { position: relative; }

.ic-bk .ic-bk__pill input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.ic-bk .ic-bk__pill span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--ic-bk-hairline);
  background: var(--ic-bk-paper);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ic-bk-body);
  transition: background .16s var(--ic-bk-ease), border-color .16s var(--ic-bk-ease),
              color .16s var(--ic-bk-ease);
}

.ic-bk .ic-bk__pill input:hover + span { border-color: var(--ic-bk-brand); }

.ic-bk .ic-bk__pill input:checked + span {
  background: var(--ic-bk-brand-soft);
  border-color: var(--ic-bk-brand);
  color: var(--ic-bk-brand-ink);
}

/* The honeypot. Clipped rather than `display:none` — some form fillers skip
   anything that is not rendered — and inert to keyboard and assistive tech via
   tabindex and aria-hidden on the wrapper.
   Clipped, specifically, rather than parked at `left:-9999px`: a 150px-wide
   input hanging that far outside its container is a real box in the layout, and
   in a right-to-left context, or inside any ancestor that scrolls, it drags a
   scrollbar with it. Clipping keeps it 1×1 and rendered. */
.ic-bk .ic-bk__pot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ic-bk .ic-bk__error {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid #F0C4BF;
  background: #FDF3F2;
  font-size: 14px;
  color: var(--ic-bk-error);
}

/* ---------------------------------------------------------------------------
   10. Buttons
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__submit, 
.ic-bk .ic-bk__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 14px 26px;
  border: 1px solid var(--ic-bk-ink);
  border-radius: 999px;
  background: var(--ic-bk-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ic-bk-ease), border-color .18s var(--ic-bk-ease),
              transform .18s var(--ic-bk-ease), box-shadow .18s var(--ic-bk-ease);
}

.ic-bk .ic-bk__submit {
  width: 100%;
  margin-top: 6px;
  box-shadow: 0 10px 24px -14px rgba(11, 5, 0, .7);
}

.ic-bk .ic-bk__submit:hover:not(:disabled), 
.ic-bk .ic-bk__btn:hover {
  background: var(--ic-bk-brand-ink);
  border-color: var(--ic-bk-brand-ink);
  transform: translateY(-1px);
}

.ic-bk .ic-bk__submit:disabled {
  opacity: .6;
  cursor: progress;
  transform: none;
}

.ic-bk .ic-bk__btn--ghost {
  background: var(--ic-bk-paper);
  border-color: var(--ic-bk-hairline);
  color: var(--ic-bk-ink);
}

.ic-bk .ic-bk__btn--ghost:hover {
  background: var(--ic-bk-brand-soft);
  border-color: var(--ic-bk-brand);
  color: var(--ic-bk-brand-ink);
}

/* One visible focus treatment everywhere, on :focus-visible so it appears for
   keyboard users without ringing every mouse click. */
.ic-bk :focus-visible {
  outline: 3px solid var(--ic-bk-brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* When a step changes, focus moves to that step's heading so a keyboard or
   screen-reader user is not stranded on the panel that has gone away. The ring
   that follows is the point — but on a block-level heading it stretches the
   full column and reads as an error box, which is the site's own error styling.
   Inline-block shrinks it to the words. */
.ic-bk .ic-bk__card--details .ic-bk__title,
.ic-bk .ic-bk__card--done .ic-bk__title {
  display: inline-block;
}

/* ---------------------------------------------------------------------------
   11. Confirmation
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__card--done { text-align: center; }

.ic-bk .ic-bk__tick {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 4px auto 16px;
  border-radius: 50%;
  background: var(--ic-bk-brand-soft);
  color: var(--ic-bk-brand-ink);
  animation: ic-bk-pop .42s var(--ic-bk-ease) both;
}

.ic-bk .ic-bk__tick svg { width: 30px; height: 30px; }

@keyframes ic-bk-pop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.ic-bk .ic-bk__addto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 22px 0 6px;
}

/* Announcements for assistive tech only. */
.ic-bk .ic-bk__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ic-bk .ic-bk__noscript {
  max-width: 620px;
  margin: 0 auto;
  padding: 18px 22px;
  border-radius: var(--ic-bk-radius-sm);
  border: 1px solid var(--ic-bk-hairline);
  background: var(--ic-bk-paper);
}

/* ---------------------------------------------------------------------------
   12. Motion
   ------------------------------------------------------------------------ */
.ic-bk .ic-bk__card[data-ic-step]:not([hidden]) {
  animation: ic-bk-in .3s var(--ic-bk-ease) both;
}

@keyframes ic-bk-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-bk *,
  .ic-bk *::before,
  .ic-bk *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ic-bk .ic-bk__day:hover, 
  .ic-bk .ic-bk__slot:hover, 
  .ic-bk .ic-bk__btn:hover, 
  .ic-bk .ic-bk__submit:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   13. Dark
   ---------------------------------------------------------------------------
   Gated on `.ic-dark-ok`, exactly as ic-pathways.css is, and for the same
   reason: styling only this component on a page with no dark treatment leaves
   one dark rectangle in the middle of a light page. The body class is added by
   IC_Booking_Shortcode::body_class(), which honours the same
   `ic_dark_mode_enabled` filter the rest of the site uses — so switching dark
   mode off site-wide switches it off here too, in one place.

   Contrast, measured against these surfaces:
     #F2EDE6 headings on #17120E  →  14.4:1
     #C9C2B9 body     on #17120E  →   8.4:1
     #FF8A3D accent   on #17120E  →   6.5:1   (#FF6600 is 4.48:1 — too close)
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  body.ic-dark-ok .ic-bk {
    --ic-bk-brand-ink:  #FF8A3D;
    --ic-bk-brand-soft: #3A2113;

    --ic-bk-ink:      #F2EDE6;
    --ic-bk-body:     #C9C2B9;
    --ic-bk-quiet:    #A29A90;
    --ic-bk-hairline: #38302A;
    --ic-bk-paper:    #1E1813;
    --ic-bk-warm:     #221B16;
    --ic-bk-cream:    #17120E;
    --ic-bk-sand:     #4A4038;

    --ic-bk-chip-1: #3A2113;
    --ic-bk-chip-2: #33261A;
    --ic-bk-chip-3: #2E2620;

    --ic-bk-ok:    #4ADE80;
    --ic-bk-error: #FF9C90;

    --ic-bk-surface: rgba(30, 24, 19, .86);

    --ic-bk-lift:
      0 1px 2px rgba(0, 0, 0, .5),
      0 10px 24px -12px rgba(0, 0, 0, .7),
      0 34px 60px -34px rgba(0, 0, 0, .8);
    --ic-bk-lift-sm:
      0 1px 2px rgba(0, 0, 0, .5),
      0 6px 16px -12px rgba(0, 0, 0, .6);
  }

  /*
     THE ONE RULE HERE THAT REACHES OUTSIDE THE COMPONENT
     ----------------------------------------------------
     Lettery paints `.mil-content-frame` a near-white #F4F5F5 on default page
     templates. Its own dark pass covers `.mil-content` and the body but not
     this frame, because the pathway pages are Elementor-built and never use
     it. The booking page does — so in dark mode the calendar sat in a white
     band with dark page above and below it.

     Scoped to `body.ic-bk-page`, which is only ever the page carrying the
     calendar, so no other page on the site can be reached by it. Set to
     transparent rather than to a colour, so what shows through is the theme's
     own dark surface and this does not have to know what that colour is.

     The pseudo-elements matter as much as the element: Lettery paints the
     frame with `::before` and `::after`, so setting the element's own
     background changed the measurement and nothing on screen.
  */
  body.ic-bk-page.ic-dark-ok .mil-content-frame,
  body.ic-bk-page.ic-dark-ok .mil-content-frame::before,
  body.ic-bk-page.ic-dark-ok .mil-content-frame::after {
    background: transparent;
  }

  /*
     …and the page title, which the theme's dark pass also misses.
     Measured on the live page: #0B0500 on #141C21 is 1.18:1 — not "washed
     out", invisible. Both of these are gaps in the theme's own dark treatment
     and they will affect any page that is not one of the Elementor-built
     pathway pages; fixing them here covers the page this plugin creates, and
     the general case belongs in the theme layer.
  */
  body.ic-bk-page.ic-dark-ok h1,
  body.ic-bk-page.ic-dark-ok .mil-h2 {
    color: #F2EDE6;
  }

  body.ic-dark-ok .ic-bk::before {
    background:
      radial-gradient(70% 55% at 12% 0%,  rgba(255, 102, 0, .16), transparent 62%),
      radial-gradient(60% 60% at 92% 22%, rgba(74, 64, 56, .55), transparent 66%),
      linear-gradient(180deg, #17120E, #120E0B);
  }

  body.ic-dark-ok .ic-bk__card {
    border-color: rgba(255, 255, 255, .07);
  }

  body.ic-dark-ok .ic-bk__card--brief {
    background-color: var(--ic-bk-surface);
    background-image: linear-gradient(180deg, rgba(34, 27, 22, .95), rgba(30, 24, 19, .85));
  }

  body.ic-dark-ok .ic-bk__steps li {
    background: rgba(255, 255, 255, .04);
  }

  body.ic-dark-ok .ic-bk__steps li.is-on { border-color: #6B3D1D; }

  body.ic-dark-ok .ic-bk__steps li::before {
    background: #38302A;
    color: var(--ic-bk-body);
  }

  body.ic-dark-ok .ic-bk__steps li.is-on::before {
    background: var(--ic-bk-brand-lift);
    color: #17120E;
  }

  /* The selected day inverts to the *light* end in dark mode; keeping it near
     black would make the selection invisible against the card. */
  body.ic-dark-ok .ic-bk__day.is-on,
  body.ic-dark-ok .ic-bk__day.is-on:hover {
    background: var(--ic-bk-brand-lift);
    border-color: var(--ic-bk-brand-lift);
    color: #17120E;
  }

  body.ic-dark-ok .ic-bk__day.is-on::after { background: #17120E; }
  body.ic-dark-ok .ic-bk__day--none { color: #948D84; } /* 5.2:1 on the card */
  body.ic-dark-ok .ic-bk__day--free::after { background: var(--ic-bk-brand-lift); }

  body.ic-dark-ok .ic-bk__slot.is-on {
    background: var(--ic-bk-brand-lift);
    border-color: var(--ic-bk-brand-lift);
    color: #17120E;
  }

  body.ic-dark-ok .ic-bk__submit,
  body.ic-dark-ok .ic-bk__btn {
    background: var(--ic-bk-brand-lift);
    border-color: var(--ic-bk-brand-lift);
    color: #17120E;
  }

  body.ic-dark-ok .ic-bk__submit:hover:not(:disabled),
  body.ic-dark-ok .ic-bk__btn:hover {
    background: #FFA469;
    border-color: #FFA469;
  }

  body.ic-dark-ok .ic-bk__btn--ghost {
    background: var(--ic-bk-paper);
    border-color: var(--ic-bk-hairline);
    color: var(--ic-bk-ink);
  }

  body.ic-dark-ok .ic-bk__btn--ghost:hover {
    background: var(--ic-bk-brand-soft);
    border-color: var(--ic-bk-brand-lift);
    color: var(--ic-bk-brand-lift);
  }

  body.ic-dark-ok .ic-bk__error {
    border-color: #6B2B24;
    background: #2A1614;
    color: var(--ic-bk-error);
  }

  body.ic-dark-ok .ic-bk__field input:focus,
  body.ic-dark-ok .ic-bk__field textarea:focus {
    box-shadow: 0 0 0 3px rgba(255, 138, 61, .25);
  }
}

/* ---------------------------------------------------------------------------
   14. Narrow screens
   ------------------------------------------------------------------------ */
@media (max-width: 420px) {
  .ic-bk { padding: 12px 0; }
  .ic-bk .ic-bk__grid { padding: 10px; gap: 12px; }
  .ic-bk .ic-bk__card { padding: 16px 14px; border-radius: 18px; }
  .ic-bk .ic-bk__days,
  .ic-bk .ic-bk__weekdays { gap: 3px; }
  .ic-bk .ic-bk__day { border-radius: 11px; font-size: 14px; }
  .ic-bk .ic-bk__slots { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .ic-bk .ic-bk__addto { flex-direction: column; }
  .ic-bk .ic-bk__addto .ic-bk__btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   15. The pathway CTA
   ---------------------------------------------------------------------------
   Appended to the end of the Crucible and the four pathway pages by
   IC_Booking_CTA. It carries its own tokens rather than inheriting `.ic-bk`,
   because it appears on pages where the calendar itself does not.

   Every rule that sets a colour, a background or a font size carries a
   `.ic-bk-cta` ancestor. Elementor's kit ships `.elementor-kit-2062 h2`,
   `… a` and `… button` at specificity (0,1,1); a bare single class is (0,1,0)
   and loses. Measured on the live site: the heading rendered at 72px against
   the 30px set here until this was raised.
   ------------------------------------------------------------------------ */
.ic-bk-cta {
  --cta-brand:     #FF6600;
  --cta-brand-ink: #8C3800;
  --cta-ink:       #0B0500;
  --cta-body:      #5A5751;
  --cta-quiet:     #6B665F;
  --cta-hairline:  #E4DED5;

  display: block;
  margin: 0;
  padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 40px);
  background:
    radial-gradient(60% 70% at 8% 0%, rgba(255, 102, 0, .10), transparent 62%),
    linear-gradient(180deg, #EFEAE3, #F6F2EC);
}

.ic-bk-cta * { box-sizing: border-box; }

.ic-bk-cta .ic-bk-cta__inner {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(11, 5, 0, .05),
    0 8px 20px -10px rgba(11, 5, 0, .14),
    0 30px 60px -30px rgba(11, 5, 0, .20);
}

.ic-bk-cta .ic-bk-cta__kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cta-brand-ink);
}

.ic-bk-cta .ic-bk-cta__title {
  margin: 0 0 12px;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.2;
  font-weight: 600;
  color: var(--cta-ink);
  letter-spacing: -.01em;
}

.ic-bk-cta .ic-bk-cta__copy {
  margin: 0 auto 22px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cta-body);
}

.ic-bk-cta .ic-bk-cta__action { margin: 0 0 12px; }

.ic-bk-cta .ic-bk-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 30px;
  border: 1px solid var(--cta-ink);
  border-radius: 999px;
  background: var(--cta-ink);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(11, 5, 0, .7);
  transition: background .18s cubic-bezier(.22, .61, .36, 1),
              border-color .18s cubic-bezier(.22, .61, .36, 1),
              transform .18s cubic-bezier(.22, .61, .36, 1);
}

.ic-bk-cta .ic-bk-cta__btn:hover,
.ic-bk-cta .ic-bk-cta__btn:focus {
  background: var(--cta-brand-ink);
  border-color: var(--cta-brand-ink);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.ic-bk-cta .ic-bk-cta__btn:focus-visible {
  outline: 3px solid var(--cta-brand);
  outline-offset: 3px;
}

.ic-bk-cta .ic-bk-cta__meta {
  margin: 0;
  font-size: 13px;
  color: var(--cta-quiet);
}

@media (prefers-reduced-motion: reduce) {
  .ic-bk-cta .ic-bk-cta__btn { transition: none; }
  .ic-bk-cta .ic-bk-cta__btn:hover { transform: none; }
}

/* Follows the page, not the system — same rule as the calendar. `ic-dark-ok`
   is only present when the whole site has a dark treatment. */
@media (prefers-color-scheme: dark) {
  body.ic-dark-ok .ic-bk-cta {
    --cta-brand-ink: #FF8A3D;
    --cta-ink:       #F2EDE6;
    --cta-body:      #C9C2B9;
    --cta-quiet:     #A29A90;
    --cta-hairline:  #38302A;

    background:
      radial-gradient(60% 70% at 8% 0%, rgba(255, 102, 0, .16), transparent 62%),
      linear-gradient(180deg, #17120E, #120E0B);
  }

  body.ic-dark-ok .ic-bk-cta__inner {
    background: #1E1813;
    border-color: rgba(255, 255, 255, .07);
  }

  body.ic-dark-ok .ic-bk-cta .ic-bk-cta__btn {
    background: #FF8A3D;
    border-color: #FF8A3D;
    color: #17120E;
  }

  body.ic-dark-ok .ic-bk-cta .ic-bk-cta__btn:hover,
  body.ic-dark-ok .ic-bk-cta .ic-bk-cta__btn:focus {
    background: #FFA469;
    border-color: #FFA469;
    color: #17120E;
  }
}


/* ---------------------------------------------------------------------------
   15b. The CTA with a photograph
   ---------------------------------------------------------------------------
   Two columns once there is room for them, stacked below that with the portrait
   cropped to a round avatar. One image serves both: `sizes` tells the browser
   the rendered width at each breakpoint, so a phone fetches a small file rather
   than the 1000px portrait for a 104px circle.

   `object-position` is set high, not centred. A chest-up portrait centred in a
   square crop puts the face against the top edge or cuts the chin; 22% keeps
   the eyes on the upper third, which is where a reader looks first.
   ------------------------------------------------------------------------ */
.ic-bk-cta--withphoto .ic-bk-cta__inner {
  max-width: 900px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
}

.ic-bk-cta .ic-bk-cta__figure {
  margin: 0;
  padding: clamp(24px, 4vw, 34px) 0 0;
  display: flex;
  justify-content: center;
}

.ic-bk-cta .ic-bk-cta__img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 3px solid var(--cta-hairline);
  background: var(--cta-hairline);
}

.ic-bk-cta .ic-bk-cta__body {
  padding: clamp(20px, 4vw, 40px);
}

@media (min-width: 760px) {
  .ic-bk-cta--withphoto .ic-bk-cta__inner {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: stretch;
    text-align: left;
  }

  .ic-bk-cta--withphoto .ic-bk-cta__figure {
    padding: 0;
    display: block;
    height: 100%;
    min-height: 340px;
  }

  .ic-bk-cta--withphoto .ic-bk-cta__img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: 0;
    border-radius: 0;
    object-position: center 18%;
  }

  .ic-bk-cta--withphoto .ic-bk-cta__copy { margin-left: 0; margin-right: 0; }

  .ic-bk-cta--withphoto .ic-bk-cta__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 3.4vw, 44px);
  }
}

/* The host's face in the booking form's brief card, in place of the line icon. */
.ic-bk .ic-bk__ico--photo {
  padding: 0;
  overflow: hidden;
  background: var(--ic-bk-chip-1);
  border-radius: 50%;
}

.ic-bk .ic-bk__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .ic-bk-cta .ic-bk-cta__img { transition: none; }
}

/* ---------------------------------------------------------------------------
   16. Print
   ---------------------------------------------------------------------------
   People print confirmations. Frosted glass and a dark button print as grey
   mud on a mono printer.
   ------------------------------------------------------------------------ */
@media print {
  .ic-bk::before { display: none; }
  .ic-bk .ic-bk__card {
    background: #FFFFFF;
    box-shadow: none;
    border: 1px solid #CCCCCC;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .ic-bk .ic-bk__addto,
  .ic-bk .ic-bk__steps,
  .ic-bk .ic-bk__nav { display: none; }
}