/* ====================================================================
   GELATIN LABS - Roll Card block, WooCommerce Blocks cart (2026-10-21)
   ====================================================================
   Drawn by roll-card-cart-2026-10-21.js above the coupon panel, on the
   dark #242424 sidebar card. Values come from the approved boards.

   Specificity: everything inside the block is scoped under #gl-rco-block
   (id column), so the cart overhaul's element resets and WC Blocks'
   body-level <style> cannot out-rank it. Rules outside the block use
   unique class names. No colored side borders (site rule).
   ==================================================================== */

#gl-rco-block {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 14px 0 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  font-family: Lexend, system-ui, sans-serif !important;
  text-align: left !important;
  text-transform: none !important;
}
#gl-rco-block.gl-rco--ready {
  background: rgba(253,206,49,0.06) !important;
  border-color: rgba(253,206,49,0.25) !important;
}

#gl-rco-block .gl-rco__head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#gl-rco-block .gl-rco__title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Barlow Semi Condensed", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #ffffff !important;
}

#gl-rco-block .gl-rco__eyebrow {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  color: rgba(253,206,49,0.85) !important;
  white-space: nowrap !important;
}

#gl-rco-block .gl-rco__text {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.85) !important;
}

/* ---- Strip: size circles plus the gift, 15 px, 4 px gap ---- */
#gl-rco-block .gl-rco-strip {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}
#gl-rco-block .gl-rco-dot {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: none !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-style: normal !important;
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.35) !important;
}
#gl-rco-block .gl-rco-dot--on {
  background: #FDCE31 !important;
  border: 0 !important;
  color: #1B1B1B !important;
}
#gl-rco-block .gl-rco-dot--add {
  background: transparent !important;
  border: 1.5px dashed #FDCE31 !important;
}
#gl-rco-block .gl-rco-dot svg {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  margin: 0 !important;
  fill: none !important;
}

/* ---- Signed-out pills ---- */
#gl-rco-block .gl-rco__actions {
  display: flex !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#gl-rco-block a.gl-rco__btn {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-family: "Barlow Semi Condensed", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background-color 0.15s, border-color 0.15s !important;
  /* The live Additional CSS (".wp-block-woocommerce-cart-order-summary-coupon-form-block
     div a") also matches these pills, because the block is inserted inside that
     div. It sets non-!important transform, width, position, align-items,
     justify-content and text-align for the coupon Apply button. The properties
     above already beat the rest; these neutralise what is left. */
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  width: auto !important;
  position: static !important;
  align-items: center !important;
  justify-content: normal !important;
  text-align: center !important;
}
#gl-rco-block a.gl-rco__btn--primary {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #1B1B1B !important;
}
#gl-rco-block a.gl-rco__btn--primary:hover {
  background: #f1f1f1 !important;
  color: #1B1B1B !important;
}
#gl-rco-block a.gl-rco__btn--ghost {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
}
#gl-rco-block a.gl-rco__btn--ghost:hover {
  border-color: rgba(255,255,255,0.45) !important;
  color: #ffffff !important;
}
#gl-rco-block a.gl-rco__btn:focus-visible {
  outline: 2px solid #FDCE31 !important;
  outline-offset: 2px !important;
}

/* ---- Promo notices (outside the block, unique names) ---- */
p.gl-rco-locked,
p.gl-rco-removed {
  margin: 0 !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
}
p.gl-rco-locked {
  padding: 12px 0 !important;
  color: rgba(255,255,255,0.6) !important;
}
p.gl-rco-removed {
  padding: 0 0 14px 0 !important;
  margin-top: -6px !important;
  color: rgba(255,255,255,0.75) !important;
}
/* `hidden` must win over the overhaul's display rules on the coupon panel */
.wc-block-components-totals-coupon[hidden] {
  display: none !important;
}

/* ---- The Free Loyalty Roll fee row (class added by the JS) ---- */
.wc-block-cart__sidebar .gl-rco-fee,
.wc-block-cart__sidebar .gl-rco-fee .wc-block-components-totals-item__label,
.wc-block-cart__sidebar .gl-rco-fee .wc-block-components-totals-item__value,
.wc-block-cart__sidebar .gl-rco-fee .wc-block-formatted-money-amount {
  color: #FDCE31 !important;
}