/* MainChick - cart / checkout / nutrition modal + sticky buy bar.
   Matches the flow in the walkthrough video: one bottom sheet that swaps its
   contents between steps instead of navigating to separate pages. */

/* ---------- shell ---------- */
.mc-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:flex-end; justify-content:center; }
.mc-modal[hidden]{ display:none; }
.mc-modal__backdrop{ position:absolute; inset:0; background:rgba(252,245,232,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); opacity:0; transition:opacity .22s ease; }
.mc-modal.is-open .mc-modal__backdrop{ opacity:1; }

.mc-modal__sheet{ position:relative; width:100%; max-width:480px; background:#fff; border-radius:22px 22px 0 0;
  box-shadow:0 -8px 44px rgba(21,21,21,.18); padding:20px 22px 22px; max-height:88vh; overflow-y:auto;
  transform:translateY(102%); transition:transform .28s cubic-bezier(.22,1,.36,1); }
.mc-modal.is-open .mc-modal__sheet{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .mc-modal__sheet, .mc-modal__backdrop{ transition:none; }
}

.mc-modal__grip{ display:block; width:44px; height:4px; border-radius:99px; background:rgba(21,21,21,.16); margin:0 auto 14px; }
.mc-modal__x{ position:absolute; top:18px; right:20px; width:28px; height:28px; border-radius:50%; border:1px solid var(--mc-line);
  background:#fff; color:var(--mc-ink); font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.mc-modal__x:hover{ background:var(--mc-cream-2); }
.mc-modal__title{ font-family:'Fredoka',sans-serif; font-size:21px; font-weight:600; color:var(--mc-ink); margin:0 0 16px; letter-spacing:-.01em; }

/* ---------- cart line items ---------- */
.mc-line{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--mc-line); }
.mc-line__img{ width:46px; height:46px; flex:0 0 46px; border-radius:11px; overflow:hidden; background:var(--mc-cream-2); }
.mc-line__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mc-line__meta{ flex:1 1 auto; min-width:0; }
.mc-line__name{ font-size:13.5px; font-weight:700; color:var(--mc-ink); line-height:1.25; }
.mc-line__sub{ font-size:11.5px; color:var(--mc-ink-2); margin-top:2px; }
.mc-line__price{ font-size:13.5px; font-weight:700; color:var(--mc-ink); white-space:nowrap; }
.mc-line__rm{ border:0; background:none; color:var(--mc-ink-2); font-size:15px; cursor:pointer; padding:4px; line-height:1; }
.mc-line__rm:hover{ color:var(--mc-red); }

.mc-step{ display:flex; align-items:center; gap:2px; background:#fff; border:1.5px solid var(--mc-line); border-radius:10px; padding:3px; }
.mc-step button{ width:26px; height:26px; border:0; background:none; font-size:15px; line-height:1; color:var(--mc-ink); cursor:pointer; border-radius:7px; }
.mc-step button:hover{ background:var(--mc-cream-2); }
.mc-step button:disabled{ opacity:.35; cursor:not-allowed; }
.mc-step output{ min-width:22px; text-align:center; font-size:13.5px; font-weight:700; }

/* ---------- totals ---------- */
.mc-row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--mc-ink-2); padding:9px 0; }
.mc-row--total{ font-size:17px; font-weight:700; color:var(--mc-ink); border-top:1px solid var(--mc-line); padding-top:13px; margin-top:2px; }
.mc-row--total span:last-child{ font-family:'Fredoka',sans-serif; font-size:21px; font-weight:600; }
.mc-free{ color:var(--mc-green); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:11px; }

.mc-cta{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px; padding:16px 20px;
  background:var(--mc-red); color:#fff!important; border:0; border-radius:12px; font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer; text-decoration:none; min-height:52px; transition:background .18s ease; }
.mc-cta:hover{ background:var(--mc-red-2); }
.mc-cta:disabled{ opacity:.6; cursor:not-allowed; }
.mc-back{ background:none; border:0; color:var(--mc-ink-2); font-size:12.5px; font-family:inherit; cursor:pointer; padding:12px 0 0; text-decoration:underline; display:block; margin:0 auto; }

/* ---------- checkout step ---------- */
.mc-summary{ background:var(--mc-cream); border-radius:13px; padding:14px 16px; margin-bottom:16px; }
.mc-summary .mc-row{ padding:5px 0; }
.mc-summary .mc-row--total{ margin-top:6px; padding-top:10px; }

.mc-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mc-fields .mc-full{ grid-column:1 / -1; }
.mc-field input{ width:100%; background:#fff; border:1.5px solid var(--mc-line); border-radius:11px; padding:13px 14px;
  font-family:inherit; font-size:14px; color:var(--mc-ink); min-height:48px; }
.mc-field input::placeholder{ color:#9A9A9A; }
.mc-field input:focus{ outline:none; border-color:var(--mc-red); box-shadow:0 0 0 3px rgba(200,32,43,.10); }
.mc-field.is-bad input{ border-color:var(--mc-red); }
.mc-field small{ display:none; color:var(--mc-red); font-size:11px; margin-top:4px; }
.mc-field.is-bad small{ display:block; }

.mc-paylabel{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mc-ink-2); margin:18px 0 9px; }
.mc-pay{ display:flex; align-items:center; gap:11px; border:1.5px solid var(--mc-red); border-radius:12px; padding:13px 15px; background:#fff; }
.mc-pay b{ font-size:13.5px; font-weight:700; color:var(--mc-ink); display:block; }
.mc-pay span{ font-size:11.5px; color:var(--mc-ink-2); display:block; margin-top:2px; }
.mc-secure{ text-align:center; font-size:11px; color:var(--mc-ink-2); margin:12px 0 0; }

.mc-alert{ background:rgba(200,32,43,.07); border:1px solid rgba(200,32,43,.25); color:var(--mc-red); border-radius:11px;
  padding:11px 13px; font-size:12.5px; line-height:1.45; margin-bottom:14px; }
.mc-alert[hidden]{ display:none; }
.mc-empty{ text-align:center; color:var(--mc-ink-2); font-size:14px; padding:26px 0; }

/* ---------- nutrition step ---------- */
.mc-nut{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
.mc-nut div{ background:var(--mc-cream); border-radius:12px; padding:13px 15px; }
.mc-nut b{ display:block; font-family:'Fredoka',sans-serif; font-size:25px; font-weight:600; color:var(--mc-ink); line-height:1; }
.mc-nut span{ display:block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mc-ink-2); margin-top:5px; }
.mc-nutnote{ font-size:12.5px; line-height:1.6; color:var(--mc-ink-2); margin:0; }

/* ---------- sticky buy bar ---------- */
.mc-sticky{ position:fixed; left:50%; bottom:18px; transform:translate(-50%,140%); z-index:9998;
  display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--mc-line); border-radius:9999px;
  padding:8px 8px 8px 12px; box-shadow:0 8px 30px rgba(21,21,21,.16); transition:transform .3s cubic-bezier(.22,1,.36,1);
  max-width:calc(100vw - 32px); }
.mc-sticky.is-on{ transform:translate(-50%,0); }
.mc-sticky__img{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; overflow:hidden; background:var(--mc-cream-2); }
.mc-sticky__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mc-sticky__t{ font-size:12.5px; font-weight:700; color:var(--mc-ink); line-height:1.2; white-space:nowrap; }
.mc-sticky__s{ font-size:11px; color:var(--mc-ink-2); margin-top:1px; white-space:nowrap; }
.mc-sticky__btn{ background:var(--mc-red); color:#fff!important; border:0; border-radius:9999px; padding:11px 20px;
  font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap; }
.mc-sticky__btn:hover{ background:var(--mc-red-2); }
/* On mobile the bar is full-width but its children were left-packed, leaving
   ~97px of dead space to the right of Buy Now so the button read as off-centre.
   margin-left:auto pins it to the right edge; on wider screens the bar is
   shrink-to-fit so there is no free space and this is a no-op. */
.mc-sticky__btn{ margin-left:auto; }
@media (max-width:520px){
  .mc-sticky{ left:12px; right:12px; bottom:12px; transform:translateY(140%); max-width:none; }
  .mc-sticky.is-on{ transform:translateY(0); }
  .mc-sticky__s{ display:none; }
  .mc-sticky__t{ overflow:hidden; text-overflow:ellipsis; }
  .mc-modal__sheet{ max-width:none; border-radius:20px 20px 0 0; padding:18px 16px; max-height:92vh; }
  .mc-fields{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .mc-sticky{ transition:none; } }

/* =============== UI FIXES =============== */

/* [5][8] A global button rule injects padding:8px 16px, which stretched the modal
   close button to 34x28 (so the x sat off-centre) and the steppers to 32x26.
   Scope by #mc-modal to out-specify it and pin exact box sizes. */
#mc-modal .mc-modal__x{
  padding:0!important; width:28px!important; height:28px!important;
  min-width:0!important; line-height:1!important; font-size:16px!important;
}
#mc-modal .mc-step button{
  padding:0!important; width:34px!important; height:34px!important;
  min-width:0!important; position:relative; font-size:0!important; line-height:0!important;
}
/* [8] The minus glyph U+2212 is missing from Plus Jakarta Sans, so Windows fell back
   to an emoji font and rendered a green heavy-minus at a different size to the plus.
   Draw both marks in CSS instead - font-independent, identical, always centred. */
#mc-modal .mc-step button::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:13px; height:2px; background:currentColor; border-radius:1px;
}
#mc-modal .mc-step button[data-inc]::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2px; height:13px; background:currentColor; border-radius:1px;
}
#mc-modal .mc-line__rm{
  padding:0!important; width:22px!important; height:22px!important; min-width:0!important;
  display:flex; align-items:center; justify-content:center; line-height:1!important;
}

.mc-nutserving{ font-size:11.5px; color:var(--mc-ink-2); margin:-6px 0 12px; }
.mc-nut{ grid-template-columns:repeat(3,1fr); }
.mc-nut b{ font-size:21px; }
.mc-nutnote + .mc-nutnote{ margin-top:9px; }
.mc-fssai{ font-size:11px!important; color:var(--mc-ink-2); border-top:1px solid var(--mc-line); padding-top:11px; margin-top:13px!important; }
@media (max-width:520px){ .mc-nut{ grid-template-columns:repeat(2,1fr); } }

/* [9] The close button inherited Woo's button:focus fill (#CC3366) after a click,
   and U+00D7 centres on its line box rather than on its own ink, so the x sat
   high. Draw the cross in CSS instead - font-independent, exactly centred -
   and pin every interaction state so nothing can repaint it. */
#mc-modal .mc-modal__x{ font-size:0!important; }
#mc-modal .mc-modal__x::before,
#mc-modal .mc-modal__x::after{
  content:""; position:absolute; top:50%; left:50%;
  width:12px; height:2px; background:currentColor; border-radius:1px;
}
#mc-modal .mc-modal__x::before{ transform:translate(-50%,-50%) rotate(45deg); }
#mc-modal .mc-modal__x::after{ transform:translate(-50%,-50%) rotate(-45deg); }
#mc-modal .mc-modal__x,
#mc-modal .mc-modal__x:focus{ background:#fff; color:var(--mc-ink); }
#mc-modal .mc-modal__x:hover,
#mc-modal .mc-modal__x:focus:hover{ background:var(--mc-cream-2); color:var(--mc-ink); }
#mc-modal .mc-modal__x:focus-visible{ outline:2px solid var(--mc-ink); outline-offset:2px; }

/* delivery-day picker: match the text inputs exactly */
.mc-field select{
  width:100%; font-family:inherit; font-size:14px; line-height:21px; color:var(--mc-ink);
  background:#fff; border:1.5px solid var(--mc-line); border-radius:11px;
  padding:13px 40px 13px 14px; min-height:48px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23151515' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px 8px;
}
.mc-field select:focus{ outline:none; border-color:var(--mc-ink); }
.mc-field.is-bad select{ border-color:var(--mc-red); }

/* [10] On a phone the 28px close button is the main way out of the sheet -
   too small for a thumb, so the close button needs a real thumb target. */
@media (max-width:980px){
  #mc-modal .mc-modal__x{ width:40px!important; height:40px!important; top:14px; right:14px; }
  #mc-modal .mc-modal__x::before,
  #mc-modal .mc-modal__x::after{ width:15px; }
}


/* iOS Safari draws its own toolbar over the bottom of the viewport, so a bar
   pinned at bottom:12px sat underneath it and the Buy button could not be
   tapped. Respect the safe area. */
.mc-sticky{ bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:520px){
  .mc-sticky{ bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mc-sticky__btn{ padding:13px 22px; }
}


/* ================= mobile QA pass 2026-08-18 ================= */

/* iOS Safari zooms the whole viewport when a focused input is under 16px. Every
   checkout field was 14px, so tapping Full name zoomed the page in and the
   customer had to pinch back out for each of the six fields. 16px is the
   threshold - below it iOS zooms, at it iOS does not. */
@media (max-width:820px){
  #mc-modal .mc-field input,
  #mc-modal .mc-field select{ font-size:16px; }
}

/* Cart-line controls were 34px and 22px - both under a comfortable thumb.
   Kept at 40/32 rather than 44 so the line grid still fits a 375px screen. */
@media (max-width:620px){
  #mc-modal .mc-step button{ width:40px!important; height:40px!important; }
  #mc-modal .mc-line__rm{ width:32px!important; height:32px!important; }
}


/* The cart line is a packed flex row: enlarging the steppers made flex shrink
   the remove button to 12px wide. Pin its basis, trim the gap, and settle the
   steppers at 36px so the product name (now flavour + pack size) keeps room. */
@media (max-width:620px){
  #mc-modal .mc-line{ gap:10px; }
  #mc-modal .mc-step button{ width:36px!important; height:36px!important; }
  #mc-modal .mc-line__rm{ flex:0 0 30px; width:30px!important; height:30px!important; }
}


/* 375px cannot hold thumb + name + stepper + price + remove on one row: the name
   column collapsed to 74px and wrapped to three lines. Give the line two rows on
   phones - thumbnail and name on top, controls beneath - which also frees enough
   width to take the steppers back up to a 40px target. */
@media (max-width:620px){
  #mc-modal .mc-line{ flex-wrap:wrap; row-gap:10px; }
  #mc-modal .mc-line__meta{ flex:1 1 calc(100% - 56px); min-width:0; }
  #mc-modal .mc-step{ margin-left:56px; }
  #mc-modal .mc-step button{ width:40px!important; height:40px!important; }
  #mc-modal .mc-line__price{ margin-left:auto; }
}


/* Buy Now step: the order summary now carries the same quantity stepper and
   remove control as the cart step, so a customer can adjust or drop a line
   without backing out of checkout. */
.mc-row--item{ align-items:center; gap:10px; padding:8px 0; }
.mc-sum__name{ flex:1 1 auto; min-width:0; line-height:1.35; }
.mc-sum__ctrl{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.mc-sum__price{ min-width:62px; text-align:right; font-weight:700; }
#mc-modal [data-mc-summary] .mc-step{ transform:scale(.92); transform-origin:right center; }
@media (max-width:620px){
  .mc-row--item{ flex-wrap:wrap; row-gap:8px; }
  .mc-sum__name{ flex:1 1 100%; }
  .mc-sum__ctrl{ width:100%; justify-content:flex-end; }
  .mc-sum__price{ margin-left:auto; }
}


/* ================= coupon code (added 2026-09-13) =================
   Entry box + discount line in the cart and checkout steps. Scoped under
   #mc-modal where a global button rule would otherwise repaint the buttons. */
.mc-coupon{ padding:6px 0 4px; }
#mc-modal .mc-coupon__toggle,
#mc-modal .mc-coupon__toggle:focus{ background:none!important; border:0; padding:4px 0!important; min-width:0; font-family:inherit;
  font-size:12.5px; font-weight:700; color:var(--mc-ink)!important; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
#mc-modal .mc-coupon__toggle:focus-visible{ outline:2px solid var(--mc-ink); outline-offset:2px; }
.mc-coupon__form{ display:flex; gap:8px; align-items:stretch; }
#mc-modal .mc-coupon__form input{ flex:1 1 auto; min-width:0; background:#fff; border:1.5px solid var(--mc-line); border-radius:11px;
  padding:10px 13px; font-family:inherit; font-size:14px; color:var(--mc-ink); min-height:44px; text-transform:uppercase; letter-spacing:.04em; }
#mc-modal .mc-coupon__form input::placeholder{ text-transform:none; letter-spacing:0; color:#9A9A9A; }
#mc-modal .mc-coupon__form input:focus{ outline:none; border-color:var(--mc-red); box-shadow:0 0 0 3px rgba(200,32,43,.10); }
#mc-modal .mc-coupon__apply,
#mc-modal .mc-coupon__apply:focus{ flex:0 0 auto; min-height:44px; min-width:0; padding:0 18px!important; border:0; border-radius:11px;
  background:var(--mc-ink)!important; color:#fff!important; font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
#mc-modal .mc-coupon__apply:disabled{ opacity:.55; cursor:not-allowed; }
.mc-coupon__msg{ margin:6px 0 0; font-size:12px; line-height:1.4; color:var(--mc-red); }
.mc-row--discount{ color:var(--mc-green); font-weight:700; }
.mc-row--discount b{ letter-spacing:.04em; }
#mc-modal .mc-coupon__rm,
#mc-modal .mc-coupon__rm:focus{ background:none!important; border:0; padding:0 0 0 8px!important; min-width:0; font-family:inherit;
  font-size:11.5px; font-weight:600; color:var(--mc-ink-2)!important; text-decoration:underline; cursor:pointer; }
/* iOS zooms the page when a focused input is under 16px - same rule as the checkout fields. */
@media (max-width:820px){ #mc-modal .mc-coupon__form input{ font-size:16px; } }