/* SIQ – side-cart offer block (includes/cart-offers.php).
   Loaded on every front-end page except cart/checkout, because the FunnelKit drawer lives everywhere;
   siq-styles.css only loads on product pages and has page-wide button rules, so it is NOT used here.
   Everything is prefixed .siq-offer and the colours / font are variables on the block itself. Fonts are
   the ones the site already loads (Genty Sans headings, Baloo Paaji 2 body) — nothing is imported. */

.siq-offer{
  --siq-offer-navy:#1C3057;
  --siq-offer-bg:#E3F8FD;
  --siq-offer-orange:#FF7D2C;                      /* "Yes" button: brand orange */
  --siq-offer-green:#5CA92E;                       /* CTA green: change here to match the site's Add to Cart exactly */
  --siq-offer-muted:rgba(28,48,87,.72);
  --siq-offer-font:'Baloo Paaji 2',sans-serif;
  --siq-offer-font-head:'Genty Sans','Baloo Paaji 2',sans-serif;

  box-sizing:border-box; display:block; width:100%; margin:10px 0 0; padding:12px 12px 10px;
  background:var(--siq-offer-bg); border-radius:16px 16px 0 0; color:var(--siq-offer-navy);
  font-family:var(--siq-offer-font); font-size:14px; line-height:1.25; text-align:center;
}
.siq-offer *, .siq-offer *::before, .siq-offer *::after{ box-sizing:border-box; }
.siq-offer .amount, .siq-offer bdi{ color:inherit; font:inherit; }

.siq-offer__heading{ font-family:var(--siq-offer-font-head); font-weight:700; font-size:18px; line-height:1.15; margin:0 0 4px; }
.siq-offer__subheading{ font-family:var(--siq-offer-font); font-size:12.5px; font-weight:600; color:rgba(28,48,87,.9); margin:0 0 10px; }   /* Baloo Paaji 2 semi bold; colour was .72: a touch stronger */
.siq-offer__subheading strong{ font-weight:800; }   /* first sentence stays a step heavier than the semi-bold rest */

/* product row */
.siq-offer__product{ text-align:left; margin:0 0 10px; background:white; padding:10px; border-radius:8px; border:solid 1px; border-color:#cfedf4; }
.siq-offer__row{ display:flex; align-items:center; gap:10px; }

/* "Yes" button (left aligned, inside .siq-offer__info): orange with a small solid navy offset shadow (1px 2px, lighter than the CTA's because the button is small), green on hover / when open. Opens / closes
   the plan toggle, price and CTA (.siq-offer__more). The text can wrap when the drawer is narrow. */
.siq-offer button.siq-offer__yes{
  display:block; max-width:100%; margin:8px 0 6px; padding:7px 14px;
  background:var(--siq-offer-orange) !important; color:#fff !important;
  border:0 !important; border-radius:18px !important; box-shadow:1px 2px 0 var(--siq-offer-navy) !important;
  font-family:var(--siq-offer-font); font-weight:700; font-size:13px; line-height:1.15; text-align:center; white-space:normal; text-transform:none; letter-spacing:0;
  cursor:pointer; transition:background-color .2s ease;
}
.siq-offer button.siq-offer__yes:hover, .siq-offer button.siq-offer__yes:focus-visible, .siq-offer button.siq-offer__yes[aria-expanded="true"]{ background:var(--siq-offer-green) !important; color:#fff !important; }
.siq-offer button.siq-offer__yes:focus-visible{ outline:2px solid var(--siq-offer-navy); outline-offset:2px; }
.siq-offer:not(.is-open) .siq-offer__more{ display:none; }
.siq-offer:not(.is-open) .siq-offer__product{ margin-bottom:0; }
.siq-offer .siq-offer__img{ flex:0 0 auto; width:44px; height:44px; max-width:44px; object-fit:cover; border-radius:10px; background:#fff; margin:0; }
.siq-offer__info{ flex:1 1 auto; min-width:0; }
.siq-offer__name{ font-weight:700; font-size:14px; }
.siq-offer__psub{ font-family:var(--siq-offer-font); font-size:11.5px; font-weight:600; color:var(--siq-offer-muted); }
.siq-offer__psub-end{ display:block; }   /* last three words always on their own last line */
/* badges: both on one row at the right of the product row, where the crossed full price used to be (same look as the
   plan cards' .pd-save: green; orange for "a day"). If the drawer is too narrow for both they wrap instead of overflowing. */
.siq-offer__badges{ display:none; }
.siq-offer__badges.is-active{ display:flex; flex:0 1 auto; flex-direction:column; align-items:flex-end; gap:8px; max-width:62%; }
.siq-offer__badge-row{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
/* crossed + purchase price above the badges: small on purpose; the crossed one is 2px smaller and light navy */
.siq-offer__badge-price{ font-size:15px; line-height:18px; white-space:nowrap; }
.siq-offer .siq-offer__badge-was{ color:rgba(28,48,87,.5); font-size:12px; font-weight:400; }
.siq-offer__badge-now{ font-weight:800; }
.siq-offer__badge{ display:inline-block; padding:4px 10px; border-radius:50px; font-size:12px; font-weight:700; line-height:12px; white-space:nowrap; }
.siq-offer__badge--off{ background:#E6F4DC; color:#5CA92E; }
.siq-offer__badge--day{ background:#FFE8CC; color:#E8750A; }

/* plan toggle: white pill, navy thumb slides under the selected half */
.siq-offer__toggle{ position:relative; display:flex; margin:0 0 8px; padding:3px; background:#fff; border:1px solid var(--siq-offer-navy); border-radius:999px; }
.siq-offer__thumb{
  position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / var(--siq-offer-n,2));
  background:var(--siq-offer-navy); border-radius:999px;
  transform:translateX(calc(var(--siq-offer-i,0) * 100%)); transition:transform .25s ease;
}
.siq-offer button.siq-offer__opt{
  position:relative; z-index:1; flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:1px;
  margin:0; padding:6px 4px; background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:999px; color:var(--siq-offer-navy) !important; font-family:var(--siq-offer-font);
  text-transform:none; letter-spacing:0; cursor:pointer; transition:color .25s ease;
}
.siq-offer button.siq-offer__opt.is-selected{ color:#fff !important; }
.siq-offer__opt-label{ font-weight:700; font-size:14px; line-height:1.1; }
.siq-offer__opt-price{ font-size:11px; font-weight:400; line-height:1.1; }
.siq-offer button.siq-offer__opt:focus-visible{ outline:2px solid var(--siq-offer-green); outline-offset:2px; }

/* price line (only the line for the selected plan is shown) */
.siq-offer__price, .siq-offer__separate{ display:none; }
.siq-offer__price.is-active{ display:block; margin:0 0 2px; font-size:14px; }
.siq-offer .siq-offer__price-was{ color:#8a8f98; margin-right:4px; }
.siq-offer__price-now{ font-weight:800; font-size:16px; }
.siq-offer__price-note{ font-size:12px; color:var(--siq-offer-muted); }

/* CTA: green pill, solid navy offset shadow, navy on hover */
.siq-offer button.siq-offer__cta{
  position:relative; display:block; width:100%; margin:8px 0 0; padding:12px 16px;
  background:var(--siq-offer-green) !important; color:#fff !important; border:0 !important; border-radius:999px !important;
  box-shadow:2px 4px 0 var(--siq-offer-navy) !important;
  font-family:var(--siq-offer-font); font-weight:700; font-size:16px; line-height:1.2; text-transform:none; letter-spacing:0;
  cursor:pointer; transition:background-color .2s ease;
}
.siq-offer button.siq-offer__cta:hover, .siq-offer button.siq-offer__cta:focus-visible{ background:var(--siq-offer-navy) !important; color:#fff !important; }
.siq-offer button.siq-offer__cta.is-loading, .siq-offer button.siq-offer__cta:disabled{ cursor:progress; opacity:.85; pointer-events:none; }
.siq-offer button.siq-offer__cta.is-loading .siq-offer__cta-label{ visibility:hidden; }
.siq-offer button.siq-offer__cta.is-loading::after{
  content:''; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:siq-offer-spin .7s linear infinite;
}
@keyframes siq-offer-spin{ to{ transform:rotate(360deg); } }

.siq-offer__cta-sub{ margin-top:6px; font-size:11.5px; color:var(--siq-offer-muted); }
.siq-offer__separate.is-active{ display:inline; margin:0; font-size:inherit; color:inherit; }
.siq-offer__error{ display:none; margin-top:6px; font-size:12px; font-weight:700; color:#b3261e; }

/* Subtotal line in the side cart: [SAVE 48%] ~~£135.00~~ £70.00 (inserted by cart-offers.js from cart-savings.php).
   The badge copies the plan cards' .pd-save look (siq-styles.css does not load on every page). The line stays on one
   row, and the amount keeps a minimum height so nothing jumps when the badge appears. */
.fkcart-subtotal-wrap .fkcart-summary-amount{ white-space:nowrap; min-height:20px; }
.siq-subtotal-badge{ display:inline-block; margin-right:6px; padding:4px 12px; border-radius:50px; background:#E6F4DC; color:#5CA92E; font-family:'Baloo Paaji 2',sans-serif; font-size:12px; font-weight:700; line-height:12px; vertical-align:middle; white-space:nowrap; }
.siq-subtotal-was{ margin-right:6px; color:#8a8f98; font-weight:400; text-decoration:line-through; white-space:nowrap; }
@media (max-width:380px){
  .siq-subtotal-badge{ padding:4px 8px; margin-right:4px; font-size:11px; }
  .siq-subtotal-was{ margin-right:4px; }
}

/* Cart item sub text in the side cart ("N bottles (30-day supply)", "Keepsake tin, surprise toys..." = WooCommerce item data under the
   product name): Baloo Paaji 2, semi bold. Size and colour are left to FunnelKit. Both the standard WooCommerce markup
   (dl.variation > dt / dd) and FunnelKit's own meta wrapper are covered. */
.fkcart--item dl.variation, .fkcart--item dl.variation dt, .fkcart--item dl.variation dd, .fkcart--item dl.variation p,
.fkcart--item .fkcart-item-meta, .fkcart--item .fkcart-item-meta *{ font-family:'Baloo Paaji 2',sans-serif; font-weight:600; }

/* no quantity stepper on an offer line (the server also forces quantity 1) */
.fkcart--item:has(.siq-offer-line-flag) .fkcart-qty-wrap,
.fkcart--item.siq-offer-line .fkcart-qty-wrap{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  .siq-offer__thumb, .siq-offer button.siq-offer__opt, .siq-offer button.siq-offer__cta{ transition:none; }
  .siq-offer button.siq-offer__cta.is-loading::after{ animation-duration:1.6s; }
}