/**
 * Checkout page — koszyk.php
 *
 * Everything is namespaced fc-co- (page) or fc-cal- (calendar). That is load-bearing, not
 * tidiness: includes/footer-redesign.php ships assets/js/global.js on every page, and
 * global.js binds to the legacy cart selectors and deletes .air-datepicker.-inline- nodes.
 *
 * Depends on foodcase.css for the reset, Poppins and .fc-btn. Palette is taken from there:
 *   #3f8104 / #659a36  green, primary
 *   #2d262b / #40363c  text
 *   #7f787c            muted
 *   #c4c1c3 / #e6e4e5  borders
 *   #f9f9f6            light ground
 */

/* `hidden` must actually hide. foodcase.css gives .fc-btn `display: inline-flex`, which
   outranks the browser's own [hidden] { display: none } — so a hidden button kept showing
   and the builder ended up with three footer buttons instead of two. One rule, once. */
.fc-co [hidden],
.fc-co-modal[hidden] {
  display: none !important;
}

.fc-co {
  background-color: #f9f9f6;
  padding-block: 24px 64px;
}

.fc-co__inner {
  width: min(100% - 2 * 16px, 1362px);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .fc-co__inner { width: min(100% - 2 * 24px, 1362px); }
}

@media (min-width: 1200px) {
  .fc-co__inner { width: min(100% - 2 * 32px, 1362px); }
}

.fc-co__title {
  margin: 0 0 20px;
  color: #2d262b;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

@media (min-width: 992px) {
  .fc-co__title { font-size: 40px; }
}

/* Test-mode banner. Only rendered when the checkout is running on test keys. */
.fc-co__testbadge {
  margin: 0 0 16px;
  padding: 8px 14px;
  background-color: #fff3cd;
  border: 1px solid #e0b64a;
  border-radius: 10px;
  color: #7a5600;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Mismatched keys are a misconfiguration, not a mode — red, not yellow. */
.fc-co__testbadge--error {
  background-color: #fdeaea;
  border-color: #d64545;
  color: #8f1f1f;
}

/* ------------------------------------------------------------------ stepper -- */

.fc-co__stepper { margin-bottom: 24px; }

.fc-co__step-label {
  margin: 0 0 8px;
  color: #3f8104;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fc-co__step-sep { color: #c4c1c3; }

.fc-co__step-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fc-co__step {
  height: 3px;
  background-color: #e6e4e5;
  border-radius: 999px;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.fc-co__step.is-active { background-color: #3f8104; }

/* ------------------------------------------------------------------- banner -- */

.fc-co__banner {
  margin-bottom: 20px;
  padding: 12px 16px;
  background-color: #fff6e5;
  border: 1px solid #f0c98c;
  border-radius: 12px;
  color: #6b4a00;
  font-size: 14px;
  line-height: 1.45;
}

.fc-co__banner--error {
  background-color: #fdecec;
  border-color: #f0a0a0;
  color: #8a1f1f;
}

.fc-co__banner-close {
  float: right;
  margin-left: 12px;
  color: inherit;
  font-size: 18px;
  line-height: 1;
}

/* --------------------------------------------------------------------- grid -- */

.fc-co__grid {
  display: grid;
  gap: 24px;
  align-items: start;
}

@media (min-width: 1024px) {
  .fc-co__grid { grid-template-columns: minmax(0, 1fr) 360px; }
}

.fc-co__main { min-width: 0; }

@media (min-width: 1024px) {
  .fc-co__aside { position: sticky; top: 104px; }
}

/* -------------------------------------------------------------------- panel -- */

.fc-co__panel[hidden] { display: none; }

/* Spacing inside a step comes from one `gap`, not from a margin on each child. Margins
   were collapsing and disappearing between siblings that hide and show — the list, the
   add button and the builder ended up touching each other. A flex column cannot do that. */
.fc-co__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fc-co__panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 0;
}

.fc-co__h2 {
  margin: 0;
  color: #2d262b;
  font-size: 20px;
  font-weight: 600;
}

.fc-co__h3 {
  margin: 0 0 14px;
  padding: 0;
  color: #2d262b;
  font-size: 17px;
  font-weight: 600;
}

.fc-co__note {
  margin: 0;
  color: #7f787c;
  font-size: 13px;
}

.fc-co__empty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  background-color: #f6faf2;
  border: 1px solid #d5e5c6;
  border-radius: 14px;
  color: #40363c;
  font-size: 14px;
  line-height: 1.4;
}

.fc-co__empty::before {
  content: "🥗";
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
}

.fc-co__empty b { display: block; color: #2d262b; font-weight: 600; }
.fc-co__empty span { color: #7f787c; font-size: 13px; }

.fc-co__empty[hidden] { display: none; }

.fc-co__card {
  margin: 0;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #e6e4e5;
  border-radius: 16px;
}

/* ------------------------------------------------------ selected packages -- */

.fc-co__packages {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #e6e4e5;
  border-radius: 16px;
  /* So a row with its own background — the one being edited — is clipped by the rounded
     corners instead of squaring them off when it happens to be first or last. */
  overflow: hidden;
}

.fc-co__packages:empty { display: none; }

/* The row currently loaded into the builder. The builder itself opens between the two
   package lists, directly beneath this row, so the tint and the accent bar only have to say
   "this is the one" — they are not carrying the whole signal on their own. */
.fc-co__pkg.is-editing {
  position: relative;
  background-color: #f6faf2;
}

.fc-co__pkg.is-editing::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background-color: #3f8104;
}

.fc-co__pkg-editing {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background-color: #3f8104;
  border-radius: 999px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

.fc-co__pkg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
}

.fc-co__pkg + .fc-co__pkg { border-top: 1px solid #f1efef; }

.fc-co__pkg-img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.fc-co__pkg-body { flex: 1 1 auto; min-width: 0; }

.fc-co__pkg-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #2d262b;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.fc-co__pkg-menu {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background-color: #eef5e8;
  border-radius: 999px;
  color: #3f8104;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

.fc-co__pkg-dates {
  margin-top: 3px;
  color: #7f787c;
  font-size: 12px;
  line-height: 1.4;
}

/* Money stacks on the right: total on top, the rate that produced it underneath. Keeps a
   row to two lines instead of three and puts the number the eye looks for first on top. */
.fc-co__pkg-figures {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 12px;
  text-align: right;
}

.fc-co__pkg-price {
  color: #2d262b;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.fc-co__pkg-rate {
  margin-top: 3px;
  color: #7f787c;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.fc-co__pkg-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  margin-left: 4px;
}

.fc-co__icon-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #7f787c;
  font-size: 18px;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}

.fc-co__icon-btn--edit { font-size: 14px; }
.fc-co__icon-btn:focus-visible { outline: 2px solid #3f8104; outline-offset: 2px; }

/* A cart row on a phone.
   The desktop row is one flex line: image, name + menu chip + dates, price + rate, two icon
   buttons. That needs roughly 470px of content width before anything is allowed to shrink;
   a 360px phone has about 330px, so `flex: 1 1 auto` on the body squeezed the text to
   nothing while "2 dni × 65,00 zł/dzień" and the buttons refused to shrink and rode over
   each other.

   Below 640px it becomes a grid instead — identity on the first line, money on the second —
   so nothing has to compete for the same horizontal space. */
@media (max-width: 639px) {
  /* The cart row. The review row on step 3 needs the same treatment and is built from the
     same inner markup, but its rule has to sit lower down the file — see the note there.
     The child rules below are shared by both. */
  .fc-co__pkg {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "img     body     actions"
      "figures figures  figures";
    align-items: start;
    gap: 6px 10px;
    padding: 12px 14px;
  }

  .fc-co__pkg-img {
    grid-area: img;
    width: 40px;
    height: 40px;
  }

  .fc-co__pkg-body { grid-area: body; }

  .fc-co__pkg-actions {
    grid-area: actions;
    margin-left: 0;
  }

  .fc-co__pkg-figures {
    grid-area: figures;
    display: flex;
    /* The DOM is price-then-rate. row-reverse leaves the total hard against the right edge,
       where the eye goes for a number, and puts the rate that explains it on the left under
       the dates — without reordering the markup, which the desktop layout depends on. */
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-left: 0;
    padding-left: 0;
    padding-top: 2px;
    text-align: left;
  }

  .fc-co__pkg-rate { margin-top: 0; }

  .fc-co__pkg-name { font-size: 14px; }
  .fc-co__pkg-menu { margin-left: 6px; }
}

.fc-co__add { align-self: flex-start; }
.fc-co__add[hidden] { display: none; }

/* ------------------------------------------------------------------ builder -- */

.fc-co__builder {
  margin: 0;
  background-color: #ffffff;
  border: 1px solid #e6e4e5;
  border-radius: 16px;
  overflow: hidden;
}

.fc-co__builder[hidden] { display: none; }

.fc-co__builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid #f1efef;
}

.fc-co__builder-head .fc-co__h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.fc-co__builder-body { display: grid; }

@media (min-width: 768px) {
  .fc-co__builder-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.fc-co__builder-aside {
  padding: 14px 16px;
  background-color: #fbfbf9;
}

@media (min-width: 768px) {
  .fc-co__builder-aside { border-right: 1px solid #f1efef; }
}

/* Menu type tabs — a per-package choice, and only relevant while picking the tariff, so
   they sit at the top of the right-hand panel and hide with the cards on the date step. */
.fc-co__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.fc-co__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background-color: transparent;
  border: 1px solid #c4c1c3;
  border-radius: 44px;
  color: #7f787c;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.fc-co__tab:focus-visible { outline: 2px solid #3f8104; outline-offset: 2px; }

.fc-co__tab-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.fc-co__tab.is-active {
  border-color: #3f8104;
  color: #3f8104;
  background-color: #eef5e8;
}

/* Scoped, not bare .fc-co__substeps. foodcase.css carries `ul[class], ol[class] { margin:0;
   padding:0 }` at specificity 0,1,1 — a single class is 0,1,0 and loses to it, so the
   spacing here was being silently zeroed while the border still drew. Any list of ours
   needs to out-specify that reset. */
.fc-co__builder-aside .fc-co__substeps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.fc-co__substep {
  display: inline-flex;
  align-items: center;
}

.fc-co__substep > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #7f787c;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s;
}

.fc-co__substep > button:focus-visible { outline: 2px solid #3f8104; outline-offset: 3px; }
.fc-co__substep > button[disabled] { cursor: not-allowed; opacity: 0.6; }

.fc-co__substep + .fc-co__substep::before {
  content: "";
  width: 22px;
  height: 1px;
  margin-right: 10px;
  background-color: #c4c1c3;
}

.fc-co__substep.is-active > button,
.fc-co__substep.is-done > button { color: #2d262b; }

.fc-co__substep-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background-color: #c4c1c3;
  border-radius: 50%;
  color: #ffffff;
  font-size: 12px;
  transition: background-color 0.2s;
}

.fc-co__substep.is-active .fc-co__substep-dot { background-color: #3f8104; }

/* A finished step reads as finished: filled, ticked, and still clickable so you can go
   back and change it while standing on the calendar. */
.fc-co__substep.is-done .fc-co__substep-dot {
  background-color: #659a36;
  font-size: 0;
}

.fc-co__substep.is-done .fc-co__substep-dot::after {
  content: "✓";
  font-size: 12px;
  line-height: 1;
}

.fc-co__substep.is-done + .fc-co__substep::before { background-color: #659a36; }

.fc-co__draft { margin: 0; }

.fc-co__draft-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  font-size: 13px;
}

.fc-co__draft-row dt { color: #7f787c; }
.fc-co__draft-row dd { margin: 0; color: #2d262b; font-weight: 600; text-align: right; }

.fc-co__draft-row--total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #e6e4e5;
  font-size: 15px;
}

.fc-co__draft-row--total dd { color: #3f8104; }

.fc-co__builder-panel { padding: 14px 16px; min-width: 0; }

.fc-co__tiers {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
}

.fc-co__tiers[hidden] { display: none; }

.fc-co__tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 9px;
  background-color: #ffffff;
  border: 1px solid #e6e4e5;
  border-radius: 14px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.fc-co__tier:focus-visible { outline: 2px solid #3f8104; outline-offset: 2px; }

/* Radio semantics: picking a tariff selects it, it does not navigate. */
.fc-co__tier[aria-checked="true"] {
  border-color: #3f8104;
  background-color: #f6faf2;
  box-shadow: 0 0 0 1px #3f8104 inset;
}

.fc-co__tier[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  color: #3f8104;
  font-size: 13px;
  font-weight: 700;
}

.fc-co__tier { position: relative; }

.fc-co__tier-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.fc-co__tier-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fc-co__tier-name { color: #2d262b; font-size: 14px; font-weight: 600; }
.fc-co__tier-price { color: #7f787c; font-size: 12px; }

.fc-co__calendar[hidden] { display: none; }

.fc-co__builder-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background-color: #fbfbf9;
  border-top: 1px solid #f1efef;
}

.fc-co__link-btn {
  color: #40363c;
  font-size: 14px;
  font-weight: 600;
}

.fc-co__link-btn:focus-visible { outline: 2px solid #3f8104; outline-offset: 2px; }

/* --------------------------------------------------------------------- form -- */

.fc-co__form {
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #e6e4e5;
  border-radius: 16px;
}

.fc-co__fieldset {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}

.fc-co__fieldset + .fc-co__fieldset { margin-top: 20px; }

.fc-co__fieldset > .fc-co__h3 { float: none; }

.fc-co__form .fc-co__field { margin-bottom: 14px; }

@media (min-width: 640px) {
  .fc-co__fieldset {
    display: grid;
    gap: 0 16px;
    grid-template-columns: 1fr 1fr;
  }
  .fc-co__fieldset > legend { grid-column: 1 / -1; }
  .fc-co__field--wide { grid-column: 1 / -1; }
}

.fc-co__field label {
  display: block;
  margin-bottom: 5px;
  color: #40363c;
  font-size: 13px;
  font-weight: 500;
}

.fc-co__field input {
  width: 100%;
  padding: 12px 14px;
  background-color: #ffffff;
  border: 1px solid #c4c1c3;
  border-radius: 10px;
  color: #2d262b;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.fc-co__field input::placeholder { color: #b4afb2; }

.fc-co__field input:focus {
  outline: none;
  border-color: #3f8104;
  box-shadow: 0 0 0 3px rgba(63, 129, 4, 0.12);
}

/* Valid styling only once the field has been touched — a pristine form should not be a
   wall of green. The `is-valid` class is added by order-form.js, never by :valid. */
.fc-co__field.is-valid input { border-color: #3f8104; }

.fc-co__field.is-invalid input { border-color: #d64545; }
.fc-co__field.is-invalid input:focus { box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12); }

.fc-co__field-msg {
  margin: 5px 0 0;
  color: #d64545;
  font-size: 12px;
  line-height: 1.35;
  min-height: 0;
}

.fc-co__field-msg:empty { display: none; }

/* ------------------------------------------------------------------- review -- */

.fc-co__card .fc-co__review-lines { margin: 0 0 8px; padding: 0; list-style: none; }

.fc-co__review-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.fc-co__review-line + .fc-co__review-line { border-top: 1px solid #f1efef; }

/* Mobile layout for a review row — the same two-row grid the cart rows get.
   IT HAS TO LIVE HERE, below the rule above, and not up in the 639px block with them.
   Both selectors are a single class, so specificity is equal and the later one wins; a
   media query adds none. Placed earlier in the file, `display: grid` was simply overwritten
   by the `display: flex` above, the row stayed a flex line, and its figures block — already
   stripped of `margin-left: auto` by the shared child rules — dropped straight on top of the
   dates. That is the mess; this is the fix.

   Two columns rather than three: a review row has no action buttons. */
@media (max-width: 639px) {
  .fc-co__review-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "img     body"
      "figures figures";
    align-items: start;
    gap: 6px 10px;
  }
}

.fc-co__review-totals { margin: 0; padding-top: 8px; border-top: 1px solid #e6e4e5; }

.fc-co__review-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 14px;
}

.fc-co__review-row dt { color: #7f787c; }
.fc-co__review-row dd { margin: 0; color: #2d262b; }

.fc-co__review-row--total { font-size: 16px; font-weight: 600; }
.fc-co__review-row--total dd { color: #3f8104; }

.fc-co__review-address { margin: 0; }

.fc-co__review-address > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 14px;
}

.fc-co__review-address dt { color: #7f787c; }
.fc-co__review-address dd { margin: 0; color: #2d262b; text-align: right; }

/* ------------------------------------------------------------------ summary -- */

.fc-co__summary {
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #e6e4e5;
  border-radius: 16px;
}

.fc-co__summary .fc-co__h2 { margin-bottom: 14px; }

.fc-co__sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  color: #40363c;
  font-size: 14px;
}

.fc-co__sum-row--discount span:last-child { color: #d64545; }

.fc-co__sum-menus {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 6px;
  text-align: right;
}

.fc-co__sum-menu {
  padding: 1px 8px;
  background-color: #eef5e8;
  border-radius: 999px;
  color: #3f8104;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.fc-co__sum-row--total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid #e6e4e5;
  font-size: 16px;
}

.fc-co__sum-row--total strong { color: #3f8104; font-size: 20px; }

.fc-co__progress {
  margin: 10px 0 14px;
  padding: 10px 12px;
  background-color: #eef5e8;
  border-radius: 10px;
}

.fc-co__progress[hidden] { display: none; }

.fc-co__progress-text {
  margin: 0 0 7px;
  color: #3f8104;
  font-size: 12px;
  font-weight: 600;
}

.fc-co__progress-track {
  height: 5px;
  background-color: #d5e5c6;
  border-radius: 999px;
  overflow: hidden;
}

.fc-co__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background-color: #3f8104;
  border-radius: 999px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fc-co__terms {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0;
  color: #40363c;
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.fc-co__terms input { flex: 0 0 auto; margin-top: 2px; }
.fc-co__terms a { color: #3f8104; text-decoration: underline; }

.fc-co__cta { width: 100%; }

.fc-co__cta[disabled] { opacity: 0.55; cursor: not-allowed; }

.fc-co__cta.is-busy { position: relative; color: transparent; pointer-events: none; }

.fc-co__cta.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: fc-co-spin 0.7s linear infinite;
}

@keyframes fc-co-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fc-co__cta.is-busy::after { animation-duration: 2s; }
  .fc-co__step, .fc-co__progress-fill { transition: none; }
}

/* -------------------------------------------------------------------- modal -- */

.fc-co-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.fc-co-modal[hidden] { display: none; }

.fc-co-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(27, 23, 25, 0.55);
}

.fc-co-modal__box {
  position: relative;
  width: min(100%, 420px);
  padding: 28px 24px 24px;
  background-color: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(27, 23, 25, 0.22);
  text-align: center;
}

.fc-co-modal__x {
  position: absolute;
  top: 12px;
  right: 14px;
  color: #7f787c;
  font-size: 20px;
  line-height: 1;
}

.fc-co-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  background-color: #fdf0d8;
  border-radius: 50%;
  color: #e0912a;
  font-size: 30px;
}

.fc-co-modal__title {
  margin: 0 0 10px;
  color: #2d262b;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.fc-co-modal__text {
  margin: 0 0 20px;
  color: #7f787c;
  font-size: 14px;
  line-height: 1.5;
}

.fc-co-modal__cta { width: 100%; }

/* ===================================================================== calendar */

.fc-cal {
  background-color: #ffffff;
  border: 1px solid #e6e4e5;
  border-radius: 14px;
  padding: 10px;
  user-select: none;
}

.fc-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.fc-cal__title {
  color: #2d262b;
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
}

.fc-cal__nav {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #40363c;
  font-size: 17px;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}

.fc-cal__nav:focus-visible { outline: 2px solid #3f8104; outline-offset: 2px; }
.fc-cal__nav[disabled] { color: #c4c1c3; cursor: not-allowed; }

.fc-cal__dow,
.fc-cal__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.fc-cal__dow {
  margin-bottom: 4px;
  color: #7f787c;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.fc-cal__dow span { padding: 4px 0; }

/* Fixed height, not aspect-ratio. Square cells in a ~420px panel come out ~55px tall, and
   six rows of that is 350px of calendar — which is what was stretching the page. */
.fc-cal__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 8px;
  color: #40363c;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}

.fc-cal__day:focus-visible { outline: 2px solid #3f8104; outline-offset: -2px; }

/* Sunday is delivered on Saturday — flagged, not forbidden. */
.fc-cal__day.is-weekend { color: #e0912a; }

.fc-cal__day.is-today {
  background-color: #f1efef;
  font-weight: 600;
}

.fc-cal__day.is-selected,
.fc-cal__day.is-selected.is-weekend,
.fc-cal__day.is-selected.is-today {
  background-color: #3f8104;
  color: #ffffff;
  font-weight: 600;
}

.fc-cal__day[disabled] {
  color: #d3d0d1;
  cursor: not-allowed;
}

.fc-cal__day.is-outside { visibility: hidden; }

.fc-cal__hint {
  margin: 10px 0 0;
  color: #7f787c;
  font-size: 11px;
  line-height: 1.4;
}

/* ------------------------------------------------------------------- mobile -- */

/* Below 640px the builder stacks, so the left column's chrome competes with the thing you
   actually came to do. Tighten the figures, and lay the tariff cards out as rows —
   image left, text right, left-aligned — which roughly halves their height compared with
   the centred card. */
@media (max-width: 639px) {
  .fc-co__builder-aside { padding: 12px 14px; }

  .fc-co__builder-aside .fc-co__substeps {
    margin-bottom: 14px;
  }

  .fc-co__draft-row {
    padding: 3px 0;
    font-size: 12px;
  }

  .fc-co__draft-row--total {
    margin-top: 4px;
    padding-top: 9px;
    font-size: 13px;
  }

  .fc-co__builder-panel { padding: 12px 14px; }

  /* Two columns, not one. The row layout makes each card short, but stacking them into a
     single column put the height straight back — five rows of 52px beats three rows of
     110px only barely, while three rows of 48px halves it again. */
  .fc-co__tiers {
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: 7px;
  }

  .fc-co__tier {
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    text-align: left;
  }

  .fc-co__tier-img {
    width: 30px;
    height: 30px;
  }

  .fc-co__tier-text {
    flex: 1 1 auto;
    align-items: flex-start;
  }

  .fc-co__tier-name { font-size: 13px; }
  .fc-co__tier-price { font-size: 11px; }

  /* Tick stays in the corner — inline it would eat width that two columns cannot spare. */
  .fc-co__tier[aria-checked="true"]::after {
    top: 5px;
    right: 7px;
    font-size: 11px;
  }

  .fc-co__tabs { gap: 6px; }
  .fc-co__tab { padding: 6px 11px; font-size: 13px; }
  .fc-co__tab-icon { width: 16px; height: 16px; }
}

/* ---------------------------------------------------------------- hover states -- */

/* Two problems are fixed here at once.
 *
 * 1. STICKY HOVER ON TOUCH. After a tap, :hover stays latched on the element until
 *    something else is tapped, so a freshly chosen day kept showing the hover tint instead
 *    of the selected one. `@media (hover: hover)` means a touch screen never applies these
 *    rules at all.
 *
 * 2. HOVER OUT-RANKED THE SELECTED STATE. `.fc-cal__day:hover:not([disabled])` scores
 *    0,3,1 — a class, a pseudo-class and the attribute inside :not() — while
 *    `.fc-cal__day.is-selected` scores only 0,2,1. Hover therefore won on desktop too, and
 *    a selected day lost its colour the moment the pointer crossed it. Excluding the
 *    chosen state from each hover rule settles it by meaning rather than by arithmetic:
 *    a thing that is already chosen has no hover appearance to show.
 */
@media (hover: hover) and (pointer: fine) {
  .fc-co__icon-btn:hover { background-color: #f1efef; color: #2d262b; }

  .fc-co__tab:hover:not(.is-active) { border-color: #40363c; color: #40363c; }

  .fc-co__substep > button:not([disabled]):hover { color: #2d262b; }

  .fc-co__tier:hover:not([aria-checked="true"]) { border-color: #3f8104; }

  .fc-co__link-btn:hover { color: #3f8104; }

  .fc-cal__nav:hover:not([disabled]) { background-color: #f1efef; }

  .fc-cal__day:hover:not([disabled]):not(.is-selected) { background-color: #eef5e8; }
}

/* ============================================================== thank-you page --
   payments/checkout/success.php. Lives here rather than in its own sheet because it
   reuses .fc-co (the page ground) and .fc-btn, and is two screens of CSS. */

.fc-co__inner--narrow {
  width: min(100% - 2 * 16px, 640px);
}

.fc-done {
  margin-block: 32px 16px;
  padding: 40px 24px;
  background-color: #ffffff;
  border: 1px solid #e6e4e5;
  border-radius: 20px;
  text-align: center;
}

@media (min-width: 768px) {
  .fc-done { padding: 56px 48px; }
}

.fc-done__mark { display: block; margin: 0 auto 24px; }
.fc-done--ok   .fc-done__mark { color: #3f8104; }
.fc-done--warn .fc-done__mark { color: #c98a10; }

.fc-done__title {
  margin: 0 0 12px;
  color: #2d262b;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .fc-done__title { font-size: 32px; }
}

.fc-done__lead {
  margin: 0 auto;
  max-width: 44ch;
  color: #40363c;
  font-size: 15px;
  line-height: 1.55;
}

.fc-done__lead b { font-weight: 600; word-break: break-word; }

/* The facts strip: order numbers and the amount. */
.fc-done__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
}

.fc-done__fact {
  flex: 1 1 200px;
  padding: 14px 16px;
  background-color: #f9f9f6;
  border-radius: 14px;
  text-align: left;
}

.fc-done__fact dt {
  margin: 0 0 4px;
  color: #7f787c;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fc-done__fact dd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  color: #2d262b;
  font-size: 17px;
  font-weight: 600;
}

/* A mixed cart shows two numbers, each tagged with its menu. */
.fc-done__order em {
  color: #7f787c;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.fc-done__note {
  margin: 20px auto 0;
  max-width: 46ch;
  color: #7f787c;
  font-size: 13px;
  line-height: 1.5;
}

.fc-done__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.fc-done__actions .fc-btn { flex: 0 1 auto; }

@media (max-width: 519px) {
  .fc-done__actions .fc-btn { flex: 1 1 100%; justify-content: center; }
}