/**
 * 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;
  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; }

/* `gap` carries ALL the spacing here, both between the name and a badge and between two
   wrapped lines. It used to be margin-left on each badge, which — once a badge wraps onto
   its own line, as happens on a phone with both the menu badge and "bez przekąsek" present —
   leaves that badge indented from the row's left edge for no reason, AND leaves zero
   vertical gap to the line above, so a wrapped badge sits flush against the text it wrapped
   away from. gap fixes both: it is never applied to a line's own leading edge, and it adds
   space between wrapped lines the same as between inline items. */
.fc-co__pkg-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: #2d262b;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.fc-co__pkg-menu {
  display: inline-block;
  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__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; }

/* The old price, struck through, next to the new one — shared by the draft figures AND
   the committed rows in .fc-co__packages (package-builder.js's priceHtml()). No flex
   trickery needed to wrap or align it: it is plain inline content next to a text node, so
   the browser already wraps it like any other inline element, and the containing dd/div's
   own text-align (right, on the draft rows) or normal flow (in the list) places it
   correctly without a dedicated rule. margin-right is the only thing this needs to not
   crowd the new price that follows it. */
.fc-co__price-strike {
  margin-right: 6px;
  font-size: 0.8em;
  color: #9a9a9a;
  font-weight: 500;
  text-decoration: line-through;
}

.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; }

/* ------------------------------------------------- bez przekasek (8%) -- */

/* The per-package option, in the builder aside under the draft's figures. */
.fc-co__snacks {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e6e4e5;
}

.fc-co__snacks-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #40363c;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.fc-co__snacks-label input { flex: 0 0 auto; margin-top: 1px; }
.fc-co__snacks-label b { color: #3f8104; font-weight: 600; }

/* The info trigger reuses .allergens wholesale, unmodified in how it positions its own
   tooltip — left: 50% + translate(-50%, …), centred on the trigger, exactly as it already
   works on the home page. Three custom re-aims in a row (pinning the icon to the row's
   right edge, then spanning the tip across the whole row, then anchoring it to the row's
   right edge) all moved the tip AWAY from the icon trying to solve a clipping risk that
   the proven home-page version already handles with nothing more than a width cap. Not
   doing that again: the icon sits right where it naturally falls, next to the label text,
   and the tip stays centred on it like every other .allergens trigger on the site.
   Only the size is toned down — that component is built for a 15px label — and the width
   cap is a little tighter than the home page's 283px, since this row is narrower than a
   price card. */
.fc-co__snacks-info {
  flex: 0 0 auto;
  margin-top: -1px;
  font-size: 12px;
}

.fc-co__snacks-info .allergens__tip {
  max-width: min(220px, calc(100vw - 48px));
}


.fc-co__snacks-label b { white-space: nowrap; }

/* The badge on a cart row and on a review row. Spacing comes from .fc-co__pkg-name's `gap` —
   see the note there — not from a margin, for the same wrapping reason. */
.fc-co__pkg-nosnacks {
  display: inline-block;
  padding: 2px 8px;
  background-color: #fff3cd;
  border-radius: 999px;
  color: #7a5600;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.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; }
}