/**
 * ============================================================================
 *  BUILD YOUR BOX — CALCULATOR STYLES  (editable, no build step)
 * ============================================================================
 *
 *  Loaded AFTER the compiled bundle (see header.php) on the front page and the
 *  Box Calculator template, so everything here overrides the old compiled CSS.
 *  Every rule is scoped to .calculator-form-container — nothing else on the
 *  site is affected.
 *
 *  Pairs with: inc/box-calculator-config.php, inc/_box-calculator.php,
 *  js/box-calculator.js (see box-calculator-README.md).
 *
 *  ---------------------------------------------------------------------------
 *  LAYOUT REBUILD (replaces the styles originally extracted from the bundle)
 *  ---------------------------------------------------------------------------
 *   - The 4 steps now have a real progress bar instead of a line of text. Which
 *     step is lit is derived in CSS from which fieldset the JS has made visible
 *     (see [3]), so there is no state to keep in sync and no JS change.
 *   - Option cards are a responsive grid rather than fixed 31%/100% widths, so
 *     they keep equal heights and reflow properly at any width.
 *   - Selected state is the brand blue with a tick, instead of a yellow border
 *     that read as a warning.
 *   - Step navigation is proper Back / Continue buttons rather than two small
 *     arrow glyphs floating in the middle.
 *   - The size step is a real two-column layout (dimensions | quantity), and
 *     the inputs are proper bordered fields.
 *
 *  DO NOT RENAME these — js/box-calculator.js depends on them:
 *    .box-type .box-thickness .colour .size-container   (toggled d-none/d-flex)
 *    .banner-calc__option + .active                     (option cards)
 *    .box-type-step                                     (step text is written here)
 *    .calculated-amounts .feedback #ppb #oc .view_product
 *    #calculate #length #width #height #amount  + .error
 *
 *  BRAND: blue #02A0C5, light tints #F2FAFD / #E4F4FB, borders #DCEDF5,
 *         green #008B25 (primary action), yellow #FFF445 (price highlight).
 * ============================================================================
 */


/* ---------------------------------------------------------------------------
 * [1] SHELL
 * ------------------------------------------------------------------------- */
.calculator-form-container {
  border: 0;
  border-radius: 5px;
  box-shadow: 0 14px 34px rgba(13, 45, 66, .16);

  /* NOT `overflow: hidden` — the mascot is meant to poke out above the top
     edge, and clipping the container decapitates it. The rounded corners are
     therefore applied to the inner panels instead (see below). */
  overflow: visible;
}

/* Round the bottom of whatever sits last, so the square white/blue panel can't
   cover the container's rounded bottom corners. */
.calculator-form-container #calculate-form {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.calculator-form-container .calculated-amounts {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Header bar. It carries Bootstrap's `py-4`, which is asymmetric site-wide
   (1rem top / 2.3rem bottom — see css/custom.css), so the title sat high in the
   black bar. Even padding + centred items puts it back on the middle line. */
.calculator-form-container .bx-header {
  align-items: center;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.calculator-form-container .bx-header h4 {
  line-height: 1.2;
}

/* The mascot deliberately breaks out of the top of the panel. */
.calculator-form-container .calculator-icon {
  position: absolute;
  left: 50%;
  bottom: -1rem;
  z-index: 2;
  width: 75px;
  height: 75px;
  transform: translateX(-50%) rotate(12deg);
}

@media only screen and (min-width: 992px) {
  .calculator-form-container .calculator-icon {
    width: 100px;
    height: 100px;
  }
}


/* ---------------------------------------------------------------------------
 * [2] PROGRESS BAR
 * ------------------------------------------------------------------------- */
.calculator-form-container .bx-steps {
  padding: 18px 24px 14px;
  border-bottom: 1px solid #E7F2F7;
}

.calculator-form-container .bx-steps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.calculator-form-container .bx-steps__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-top: 10px;
  border-top: 3px solid #E7F2F7;      /* the track — fills in per step */
  transition: border-color .25s ease;
}

.calculator-form-container .bx-steps__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #E7F2F7;
  color: #7C93A0;
  font-size: 13px;
  font-weight: 700;
  transition: background .25s ease, color .25s ease;
}

.calculator-form-container .bx-steps__label {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: #7C93A0;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .25s ease;
}

/* the "Step n of 4: …" line the JS writes — a caption under the bar */
.calculator-form-container .box-type-step {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #02A0C5;
}


/* ---------------------------------------------------------------------------
 * [3] PROGRESS BAR STATE
 *
 *     Worked out from which fieldset is visible. The JS adds `d-flex` to the
 *     step it shows and `d-none` to the rest; step 1 is the exception because
 *     it starts visible with neither class, hence the :not(:has(.d-none)).
 *     Completed rules come first so the active rules win on the current step.
 * ------------------------------------------------------------------------- */

/* --- completed --- */
.calculator-form-container:has(.box-thickness.d-flex) .bx-steps__item[data-bx-step="1"],
.calculator-form-container:has(.colour.d-flex) .bx-steps__item[data-bx-step="1"],
.calculator-form-container:has(.colour.d-flex) .bx-steps__item[data-bx-step="2"],
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="1"],
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="2"],
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="3"] {
  border-top-color: #9BD7EA;
}

.calculator-form-container:has(.box-thickness.d-flex) .bx-steps__item[data-bx-step="1"] .bx-steps__num,
.calculator-form-container:has(.colour.d-flex) .bx-steps__item[data-bx-step="1"] .bx-steps__num,
.calculator-form-container:has(.colour.d-flex) .bx-steps__item[data-bx-step="2"] .bx-steps__num,
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="1"] .bx-steps__num,
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="2"] .bx-steps__num,
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="3"] .bx-steps__num {
  background: #D6EEF7;
  color: #02A0C5;
}

.calculator-form-container:has(.box-thickness.d-flex) .bx-steps__item[data-bx-step="1"] .bx-steps__label,
.calculator-form-container:has(.colour.d-flex) .bx-steps__item[data-bx-step="1"] .bx-steps__label,
.calculator-form-container:has(.colour.d-flex) .bx-steps__item[data-bx-step="2"] .bx-steps__label,
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="1"] .bx-steps__label,
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="2"] .bx-steps__label,
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="3"] .bx-steps__label {
  color: #3E5A68;
}

/* --- active --- */
.calculator-form-container:not(:has(.box-type.d-none)) .bx-steps__item[data-bx-step="1"],
.calculator-form-container:has(.box-thickness.d-flex) .bx-steps__item[data-bx-step="2"],
.calculator-form-container:has(.colour.d-flex) .bx-steps__item[data-bx-step="3"],
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="4"] {
  border-top-color: #02A0C5;
}

.calculator-form-container:not(:has(.box-type.d-none)) .bx-steps__item[data-bx-step="1"] .bx-steps__num,
.calculator-form-container:has(.box-thickness.d-flex) .bx-steps__item[data-bx-step="2"] .bx-steps__num,
.calculator-form-container:has(.colour.d-flex) .bx-steps__item[data-bx-step="3"] .bx-steps__num,
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="4"] .bx-steps__num {
  background: #02A0C5;
  color: #fff;
}

.calculator-form-container:not(:has(.box-type.d-none)) .bx-steps__item[data-bx-step="1"] .bx-steps__label,
.calculator-form-container:has(.box-thickness.d-flex) .bx-steps__item[data-bx-step="2"] .bx-steps__label,
.calculator-form-container:has(.colour.d-flex) .bx-steps__item[data-bx-step="3"] .bx-steps__label,
.calculator-form-container:has(.size-container.d-flex) .bx-steps__item[data-bx-step="4"] .bx-steps__label {
  color: #0F2F3D;
  font-weight: 700;
}


/* ---------------------------------------------------------------------------
 * [4] STEP PANELS
 *     No `display` here beyond the flex column the JS expects — `d-none` must
 *     keep winning, so never add !important display rules to these.
 * ------------------------------------------------------------------------- */
.calculator-form-container #calculate-form .box-styling {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  cursor: default;
}

.calculator-form-container #calculate-form .size-container {
  display: flex;
  flex-direction: column;
  padding: 24px;
}


/* ---------------------------------------------------------------------------
 * [5] OPTION CARDS
 * ------------------------------------------------------------------------- */
.calculator-form-container .bx-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.calculator-form-container .bx-options--wide {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.calculator-form-container .bx-options--colours {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.calculator-form-container #calculate-form .box-styling .banner-calc__option {
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;                        /* was a fixed 31% / 100% */
  margin: 0;                          /* was nth-child margin hacks */
  padding: 16px;
  border: 2px solid #DCEDF5;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.calculator-form-container #calculate-form .box-styling .banner-calc__option:hover {
  border-color: #9BD7EA;
  box-shadow: 0 6px 16px rgba(13, 45, 66, .10);
  transform: translateY(-2px);
}

/* the even-child margins from the old fixed layout are no longer needed */
.calculator-form-container #calculate-form .box-styling .banner-calc__option:nth-child(even) {
  margin: 0;
}

/* selected — brand blue rather than the old warning-yellow border */
.calculator-form-container #calculate-form .box-styling .banner-calc__option.active,
.calculator-form-container #calculate-form .box-styling .banner-calc__option:has(:checked) {
  border-color: #02A0C5;
  background: #F2FAFD;
  box-shadow: 0 0 0 3px rgba(2, 160, 197, .12);
  cursor: default;
  transform: none;
}

.calculator-form-container #calculate-form .box-styling .banner-calc__option.active::after,
.calculator-form-container #calculate-form .box-styling .banner-calc__option:has(:checked)::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #02A0C5;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* the radio itself stays out of the way — the whole card is the control */
.calculator-form-container #calculate-form .box-styling .banner-calc__option input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
}

.calculator-form-container #calculate-form .box-styling .banner-calc__option .responsive-image {
  width: 100%;
  height: 76px;
  margin-bottom: 10px;
}

.calculator-form-container #calculate-form .box-styling.colour .banner-calc__option .responsive-image {
  width: 100%;
  height: 64px;
}

/* The two flute diagrams have different aspect ratios — single-thickness.svg is
   86x27 (3.19:1), double-thickness.svg is 106x47 (2.26:1). With `contain` both
   fill the box height and end up 204px vs 144px wide, which reads as one image
   being bigger than the other. Sizing them to a fixed WIDTH instead makes the
   pair sit consistently, and lets the double-wall art stay visibly thicker —
   which is the point of the illustration. The box is tall enough for the
   taller of the two so neither gets clipped. */
.calculator-form-container #calculate-form .box-styling.box-thickness .banner-calc__option .responsive-image {
  width: 100%;
  height: 78px;
  background-size: 150px auto;
  background-position: center;
}

.calculator-form-container #calculate-form .box-styling .banner-calc__option .box-description,
.calculator-form-container #calculate-form .box-styling .banner-calc__option .box-description p {
  font-size: 12.5px;
  line-height: 1.45;
  color: #4A6270;
}

.calculator-form-container #calculate-form .box-styling.box-thickness .fst-italic,
.calculator-form-container #calculate-form .box-styling.colour .fst-italic {
  font-size: 12px;
}


/* ---------------------------------------------------------------------------
 * [6] STEP NAVIGATION — real buttons instead of bare arrows
 * ------------------------------------------------------------------------- */
.calculator-form-container .bx-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.calculator-form-container .bx-nav--end {
  justify-content: flex-end;
}

.calculator-form-container #calculate-form .nav-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.calculator-form-container #calculate-form .nav-arrow.next {
  background: #02A0C5;
  border: 2px solid #02A0C5;
  color: #fff;
}

.calculator-form-container #calculate-form .nav-arrow.next:hover {
  background: #018AAA;
  border-color: #018AAA;
  color: #fff;
  transform: none;                    /* the old rule nudged it sideways */
}

.calculator-form-container #calculate-form .nav-arrow.prev {
  background: #fff;
  border: 2px solid #DCEDF5;
  color: #3E5A68;
}

.calculator-form-container #calculate-form .nav-arrow.prev:hover {
  border-color: #9BD7EA;
  color: #02A0C5;
  transform: none;
}

.calculator-form-container #calculate-form .nav-arrow i {
  margin: 0;
  font-size: 1rem;
}

/* small helper notes ("Images shown are for illustration…") */
.calculator-form-container .bx-note {
  margin-top: 16px;
}

.calculator-form-container .bx-note p {
  font-size: 12px;
  color: #4A6270;
}


/* ---------------------------------------------------------------------------
 * [7] STEP 4 — SIZE & QUANTITY
 * ------------------------------------------------------------------------- */
.calculator-form-container .bx-size {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media only screen and (min-width: 992px) {
  .calculator-form-container .bx-size {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}

.calculator-form-container #calculate-form .size-container .measurement-container {
  width: auto;
  margin: 0;
  padding: 20px;
  border: 1px solid #DCEDF5;
  border-radius: 5px;
  background: #fff;
}

/* Length × Width × Height on one line. An explicit 5-track grid (field, ×,
   field, ×, field) rather than flex-wrap, which stranded a lone × at the end
   of the first row and pushed Height onto its own line. */
.calculator-form-container .bx-dims {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px;
}

.calculator-form-container #calculate-form .size-container .measurement-container .measurement {
  width: auto;
  min-width: 0;
}

.calculator-form-container #calculate-form .size-container .measurement-container .measurement input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #DCEDF5;          /* was a bare bottom rule */
  border-radius: 4px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.calculator-form-container #calculate-form .size-container .measurement-container .measurement input:focus {
  outline: 0;
  border-color: #02A0C5;
  box-shadow: 0 0 0 3px rgba(2, 160, 197, .14);
}

/* invalid field — the JS adds .error */
.calculator-form-container #calculate-form input.error {
  border-color: #E9310B !important;
  box-shadow: 0 0 0 3px rgba(233, 49, 11, .12);
}

.calculator-form-container #calculate-form .size-container .measurement-container i.fa-xmark {
  display: flex;
  align-items: center;
  align-self: center;
  margin: 0;
  padding-top: 22px;                  /* line it up with the inputs, not the labels */
  color: #9BD7EA;
}

.calculator-form-container #calculate-form .size-container .measurement-container p {
  font-size: 12px;
  line-height: 1.4;
}

.calculator-form-container #calculate-form .size-container .quantity-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 20px;
  border: 1px solid #DCEDF5;
  border-radius: 5px;
  background: #F2FAFD;
  text-align: left;
}

.calculator-form-container #calculate-form .size-container .quantity-container label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 700;
}

.calculator-form-container #calculate-form .size-container .quantity-container #amount {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #DCEDF5;
  border-radius: 4px;
  background: #fff;
}

.calculator-form-container #calculate-form .size-container .quantity-container #amount:focus {
  outline: 0;
  border-color: #02A0C5;
  box-shadow: 0 0 0 3px rgba(2, 160, 197, .14);
}

.calculator-form-container #calculate-form .size-container .quantity-container #calculate {
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  border: 2px solid #008B25;
  border-radius: 4px;
  background: #008B25;                /* matches the site's primary action green */
  color: #fff;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease;
}

.calculator-form-container #calculate-form .size-container .quantity-container #calculate:hover {
  background: #00691D;
  border-color: #00691D;
  color: #fff !important;
}


/* ---------------------------------------------------------------------------
 * [8] RESULT PANEL
 * ------------------------------------------------------------------------- */
.calculator-form-container .calculated-amounts {
  border-top: 0;
  padding: 24px !important;
}

.calculator-form-container .calculated-amounts #oc,
.calculator-form-container .calculated-amounts #ppb {
  margin-bottom: 1rem;
  color: #fff;
  font-weight: 600;
}

@media only screen and (min-width: 992px) {
  .calculator-form-container .calculated-amounts #oc,
  .calculator-form-container .calculated-amounts #ppb {
    margin-bottom: 0;
  }
}

/* the figures themselves — the point of the whole panel, so make them read */
.calculator-form-container .calculated-amounts #oc span,
.calculator-form-container .calculated-amounts #ppb span {
  color: #FFF445;
  font-size: 1.5rem;
  font-weight: 700;
}

.calculator-form-container .calculated-amounts #oc .f--xs,
.calculator-form-container .calculated-amounts #ppb .f--xs {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
}

.calculator-form-container .calculated-amounts .view_product {
  height: fit-content;
  padding: 12px 22px;
  border: 2px solid #FFF445;
  border-radius: 4px;
  background: #FFF445;
  color: #000;
  font-weight: 700;
  text-align: center;
  transition: all .25s ease;
}

.calculator-form-container .calculated-amounts .view_product:hover {
  background: #008B25;
  border-color: #008B25;
  color: #fff !important;
}

.calculator-form-container .calculated-amounts .view_product:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.calculator-form-container .calculated-amounts .disclaimer {
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .35);
}

.calculator-form-container .calculated-amounts .disclaimer p {
  color: #fff;
  font-size: 12px;
}

/* validation banner (moved here from an inline <style> in the markup, where it
   was unscoped and could hit any .feedback element on the page) */
.calculator-form-container .calculated-amounts .feedback {
  position: relative;
  display: none;
  margin-bottom: 1.5rem;
  padding: 15px 15px 15px 60px;
  border-radius: 4px;
  background: #E9310B;
  color: #fff;
}

.calculator-form-container .calculated-amounts .feedback:empty {
  margin-bottom: 0;
}

.calculator-form-container .calculated-amounts .feedback::before {
  content: "";
  position: absolute;
  top: calc(50% - 15px);
  left: 15px;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background-color: #fff;
  background-image: url("/wp-content/uploads/2025/05/danger-1.svg");
  background-repeat: no-repeat;
  background-size: 80% auto;
  background-position: center center;
}

.calculator-form-container .calculated-amounts .feedback a {
  position: relative;
  width: fit-content;
  color: #FFF445;
  text-decoration: underline;
}

.calculator-form-container .calculated-amounts .feedback a:hover {
  color: #FFF445;
}


/* ---------------------------------------------------------------------------
 * [9] NARROW SCREENS
 * ------------------------------------------------------------------------- */
@media only screen and (max-width: 575.98px) {
  .calculator-form-container .bx-steps__label {
    display: none;                    /* numbers only — labels won't fit */
  }

  .calculator-form-container .bx-steps__item {
    justify-content: center;
  }

  .calculator-form-container #calculate-form .box-styling,
  .calculator-form-container #calculate-form .size-container {
    padding: 18px;
  }

  .calculator-form-container .bx-nav .nav-arrow {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* stack the three dimensions; the × separators only make sense in a row */
  .calculator-form-container .bx-dims {
    grid-template-columns: 1fr;
  }

  .calculator-form-container #calculate-form .size-container .measurement-container i.fa-xmark {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Use-case labels, the dark-board note and the bespoke-order note
   -------------------------------------------------------------------------- */

.bx-usecase {
  font-size: .8rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--bs-quaternary, #0b7285);
  margin-top: .15rem;
}

.bx-colour-note {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border: 1px solid #e3c86b;
  border-left-width: 4px;
  border-radius: .25rem;
  background: #fdf7e3;
}

.bx-colour-note p {
  font-size: .85rem;
  line-height: 1.5;
}

.bx-colour-note i {
  margin-right: .4rem;
  color: #b8860b;
}

.bx-bespoke-note {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .35);
}

.bx-bespoke-note p {
  font-size: .8rem;
  line-height: 1.5;
}