/* ==========================================================================
   GPDStore — Phase 5: side-cart drawer dark reskin (Flow Site DxSideCart)
   --------------------------------------------------------------------------
   Overlay (handle: gpd-sidecart) after side-cart.css. side-cart.css scopes a
   droix light token block on .shoptimizer-mini-cart-wrap — redefining it here
   recolors most of the drawer; literal #fff panels get parity rules.

   Design: …handoff/project/cart.jsx (DxSideCart — "Droix CartA structure,
   GPD-dark skin") + dxc.css base, per the user's approved screenshot:
   teal bag mark + FREE GIFT chip + upgrade Add · white item prices ·
   lime subtotal + "Proceed to checkout" · orange upgrade prices.
   ========================================================================== */

.shoptimizer-mini-cart-wrap {
  /* conversion + informational accents */
  --green:       var(--lime-500);
  --green-dark:  var(--lime-600);
  --green-tint:  rgba(211, 255, 95, 0.10);
  --magenta:     #FFFFFF;                  /* item prices read white in the design */
  --red-sale:    var(--orange-500);
  /* text ladder */
  --ink:         #FFFFFF;
  --ink-2:       #D4D4D4;
  --muted:       #99A1AF;
  --muted-2:     #6B7478;
  /* strokes + surfaces */
  --line:        rgba(255, 255, 255, 0.10);
  --line-2:      rgba(255, 255, 255, 0.06);
  --line-3:      rgba(255, 255, 255, 0.14);
  --surface:     #1A2028;
  --surface-2:   #161C20;
  --disabled-bg: rgba(255, 255, 255, 0.06);
  --disabled-fg: #6B7478;
  --danger:      #FF6B35;
  /* type → Inter */
  --font-ui:   'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* frame + header (literal #fff in side-cart.css) */
.shoptimizer-mini-cart-wrap {
  background: var(--bg-1);
  border-left: 1px solid var(--line-1);
  box-shadow: var(--shadow-lg);
}
.shoptimizer-mini-cart-wrap .cart-drawer-heading {
  background: var(--bg-1);
}
/* teal bag mark (design screenshot; informational accent) */
.shoptimizer-mini-cart-wrap .cart-drawer-heading .gpd-cart-mark {
  background: var(--teal-500);
  color: #06160F;
}
.shoptimizer-mini-cart-wrap .cart-drawer-heading,
.shoptimizer-mini-cart-wrap .cart-drawer-heading .gpd-cart-title { color: #fff; }

/* close button → glass circle */
.shoptimizer-mini-cart-wrap .cart-drawer-close,
.shoptimizer-mini-cart-wrap .close-drawer {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg-1);
  border-radius: 9px;
}
.shoptimizer-mini-cart-wrap .cart-drawer-close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ship/savings + promo strip → lime-tinted dark band (DxStrip) */
.shoptimizer-mini-cart-wrap .gpd-ship {
  background: rgba(211, 255, 95, 0.07);
  border-color: var(--line-2);
}
.shoptimizer-mini-cart-wrap .gpd-ship__msg { color: var(--fg-1); }
.shoptimizer-mini-cart-wrap .gpd-ship__msg strong { color: var(--lime-500); }
/* "You're saving" amount → teal (savings only; free-shipping progress stays lime) */
.shoptimizer-mini-cart-wrap .is-savings .gpd-ship__msg strong { color: var(--teal-500); }
.shoptimizer-mini-cart-wrap .gpd-ship__bar { background: rgba(255, 255, 255, 0.08); }
.shoptimizer-mini-cart-wrap .gpd-ship__bar > * { background: var(--lime-500); }
.shoptimizer-mini-cart-wrap .gpd-ship__promo .gpd-promo__applied {
  background: var(--surface-glass);
  border: 1px solid var(--line-1);
  color: var(--fg-1);
}
.shoptimizer-mini-cart-wrap .gpd-promo-wrap button,
.shoptimizer-mini-cart-wrap .gpd-promo-toggle {
  background: transparent;
  border: 1px solid var(--line-1);
  color: var(--fg-1);
  border-radius: var(--r-full);
}

/* line items */
.shoptimizer-mini-cart-wrap .gpd-line { border-color: var(--line-2); }
.shoptimizer-mini-cart-wrap .gpd-line__title,
.shoptimizer-mini-cart-wrap .gpd-line__title a { color: #fff; }
.shoptimizer-mini-cart-wrap .gpd-line__thumb {
  background: #0c1014;
  border: 1px solid var(--line-2);
}
.shoptimizer-mini-cart-wrap .gpd-meta { color: var(--fg-secondary); }
.shoptimizer-mini-cart-wrap .gpd-meta b,
.shoptimizer-mini-cart-wrap .gpd-meta strong { color: var(--fg-1); }
/* prices: white now-price, grey was, lime FREE */
.shoptimizer-mini-cart-wrap .gpd-line__price {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.shoptimizer-mini-cart-wrap .gpd-line__was,
.shoptimizer-mini-cart-wrap .gpd-line__was * {
  color: var(--fg-tertiary);
  -webkit-text-fill-color: var(--fg-tertiary);
}
.shoptimizer-mini-cart-wrap .gpd-line__price--free,
.shoptimizer-mini-cart-wrap .gpd-line__price--free * {
  color: var(--lime-500);
  -webkit-text-fill-color: var(--lime-500);
}
/* FREE GIFT chip → teal soft (design) */
.shoptimizer-mini-cart-wrap .gpd-badge--free {
  background: rgba(35, 221, 190, 0.12);
  color: var(--teal-500);
  border: 0;
}
/* qty stepper + remove */
.shoptimizer-mini-cart-wrap .quantity,
.shoptimizer-mini-cart-wrap .gpd-line .quantity input {
  background: var(--surface-glass);
  border-color: var(--line-1);
  color: #fff;
}
.shoptimizer-mini-cart-wrap .gpd-line__actions a,
.shoptimizer-mini-cart-wrap .gpd-line .remove {
  color: var(--fg-secondary);
}
.shoptimizer-mini-cart-wrap .gpd-line .remove:hover { color: var(--orange-500); }

/* recommended upgrades (bumps carousel) */
.shoptimizer-mini-cart-wrap .gpd-bumps { border-color: var(--line-1); background: var(--surface-glass-2); }
.shoptimizer-mini-cart-wrap .gpd-bumps__head,
.shoptimizer-mini-cart-wrap .gpd-bumps__title { color: var(--fg-secondary); }
.shoptimizer-mini-cart-wrap .gpd-bumps__slot .commercekit-order-bump,
.shoptimizer-mini-cart-wrap .gpd-bumps__slot > * {
  background: var(--surface-elev);
  border-color: var(--line-1);
  color: var(--fg-1);
  border-radius: var(--r-lg);
}
.shoptimizer-mini-cart-wrap .gpd-bumps .price,
.shoptimizer-mini-cart-wrap .gpd-bumps .amount {
  color: var(--orange-500);
  -webkit-text-fill-color: var(--orange-500);
  font-weight: 800;
}
.shoptimizer-mini-cart-wrap .gpd-bumps del,
.shoptimizer-mini-cart-wrap .gpd-bumps del .amount {
  color: var(--fg-tertiary);
  -webkit-text-fill-color: var(--fg-tertiary);
  font-weight: 400;
}
.shoptimizer-mini-cart-wrap .gpd-bumps button,
.shoptimizer-mini-cart-wrap .gpd-bumps .add_to_cart_button {
  background: rgba(35, 221, 190, 0.12);
  color: var(--teal-500);
  border: 0;
  border-radius: var(--r-md);
  font-weight: 700;
}
.shoptimizer-mini-cart-wrap .gpd-bumps button:hover { background: rgba(35, 221, 190, 0.2); }

/* footer: lime subtotal + lime CTA + ghost continue */
.shoptimizer-mini-cart-wrap .widget_shopping_cart_content .total,
.shoptimizer-mini-cart-wrap .gpd-subtotal {
  color: #fff;
  border-color: var(--line-1);
  background: var(--bg-1);
}
.shoptimizer-mini-cart-wrap .widget_shopping_cart_content .total .amount,
.shoptimizer-mini-cart-wrap .widget_shopping_cart_content .total bdi,
.shoptimizer-mini-cart-wrap .gpd-subtotal .amount {
  color: var(--lime-500) !important;
  -webkit-text-fill-color: var(--lime-500);
  font-weight: 800;
}
.shoptimizer-mini-cart-wrap .widget_shopping_cart_content .buttons .checkout,
.shoptimizer-mini-cart-wrap .gpd-checkout-btn,
.shoptimizer-mini-cart-wrap a.checkout {
  background: var(--lime-500) !important;
  color: #0A0D0F !important;
  font-weight: 800;
  border-radius: var(--r-md);
}
.shoptimizer-mini-cart-wrap .widget_shopping_cart_content .buttons .checkout:hover,
.shoptimizer-mini-cart-wrap .gpd-checkout-btn:hover,
.shoptimizer-mini-cart-wrap a.checkout:hover {
  background: var(--lime-500) !important; /* stay lime on hover (was flashing white) */
  color: #0A0D0F !important;
  box-shadow: var(--shadow-glow) !important;
}
.shoptimizer-mini-cart-wrap .gpd-continue {
  color: var(--fg-secondary);
  background: transparent;
}
.shoptimizer-mini-cart-wrap .gpd-continue:hover { color: #fff; }

/* empty state */
.shoptimizer-mini-cart-wrap .gpd-empty__title { color: #fff; }
.shoptimizer-mini-cart-wrap .gpd-empty__sub { color: var(--fg-secondary); }

/* white wrapper layers inside the drawer (classless inner div + the Woo
   widget_shopping_cart shell are painted #fff by side-cart.css) */
.shoptimizer-mini-cart-wrap > div,
.shoptimizer-mini-cart-wrap .widget.woocommerce.widget_shopping_cart,
.shoptimizer-mini-cart-wrap .widget_shopping_cart_content,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart {
    background: var(--bg-1);
}
.shoptimizer-mini-cart-wrap .cart-drawer-heading { background: var(--bg-1); }

/* anchors in the drawer pick up a #222 link rule — pin them */
.shoptimizer-mini-cart-wrap a { color: var(--fg-1); }
.shoptimizer-mini-cart-wrap a.gpd-line__title { color: #fff; }
.shoptimizer-mini-cart-wrap a.gpd-line__title:hover { color: var(--lime-500); }

/* footer buttons band (white literal) */
.shoptimizer-mini-cart-wrap p.woocommerce-mini-cart__buttons.buttons,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons {
    background: var(--bg-1);
    border-top: 1px solid var(--line-2);
}

/* order-bump card + carousel nav arrows (white !important literals at
   side-cart.css:795/967) — !important parity */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-item,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap [class*="ckobp-"][class*="card"],
.shoptimizer-mini-cart-wrap .gpd-bumps__slot .ckobp-item {
    background: var(--surface-elev) !important;
    border-color: var(--line-1) !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-prev,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-next {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--line-1) !important;
    color: var(--fg-1) !important;
}

/* parent-theme (#222) link rules reach into the drawer — pin with !important */
.shoptimizer-mini-cart-wrap a.gpd-line__title,
.shoptimizer-mini-cart-wrap .gpd-line__title,
.shoptimizer-mini-cart-wrap .gpd-line__titlewrap a {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}
.shoptimizer-mini-cart-wrap .gpd-meta,
.shoptimizer-mini-cart-wrap .gpd-meta * {
    color: var(--fg-secondary) !important;
    -webkit-text-fill-color: var(--fg-secondary);
}
.shoptimizer-mini-cart-wrap .gpd-meta b,
.shoptimizer-mini-cart-wrap .gpd-meta strong {
    color: var(--fg-1) !important;
    -webkit-text-fill-color: var(--fg-1);
}

/* subtotal band above the CTA (white literal at side-cart.css:1024) */
.shoptimizer-mini-cart-wrap .gpd-sum {
    background: var(--bg-1);
    border-top-color: var(--line-2);
}
.shoptimizer-mini-cart-wrap .gpd-sum,
.shoptimizer-mini-cart-wrap .gpd-sum__line { color: var(--fg-secondary); }
.shoptimizer-mini-cart-wrap .gpd-sum__line b,
.shoptimizer-mini-cart-wrap .gpd-sum .amount {
    color: var(--lime-500) !important;
    -webkit-text-fill-color: var(--lime-500);
}

/* CommerceKit order-bump cards (plugin DOM — bridge restyle) */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .commercekit-order-bump {
    background: var(--surface-elev) !important;
    border-color: var(--line-1) !important;
    color: var(--fg-1) !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bump .ckobp-title,
.shoptimizer-mini-cart-wrap .commercekit-order-bump a,
.shoptimizer-mini-cart-wrap .commercekit-order-bump label {
    color: var(--fg-1) !important;
}

/* Bump carousel chevrons: the inline SVGs ship with stroke="#292D32" (near
   black) — invisible on the dark buttons. Recolour the strokes; keep disabled
   arrows dimmed (base side-cart.css dims via the same path-level stroke). */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-prev svg path,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-next svg path {
    stroke: var(--fg-1) !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-disabled svg path {
    stroke: var(--muted-2) !important;
}

/* Drawer close X: glass square, crisp mark (the base 1.5 stroke reads
   broken/washed-out on dark). Reduced ~20% and explicitly centered (the × was
   sitting high in the square). */
.shoptimizer-mini-cart-wrap .close-drawer {
    width: 27px;
    height: 27px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shoptimizer-mini-cart-wrap .close-drawer span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.shoptimizer-mini-cart-wrap .close-drawer svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    display: block;
}

/* GPD loader: dark glass backdrop (base side-cart.css paints #ajax-loading #fff,
   the white flash on open). Unscoped — the base shows #ajax-loading in more than
   one state (add-to-cart sets body.gpd-cart-loading; the checkout-redirect uses
   gpd-checkout-navigating), so the dark backdrop must apply whenever it's shown,
   not only for gpd-cart-loading. lime→teal→lime three-dot bounce. */
.shoptimizer-mini-cart-wrap #ajax-loading {
    background: rgba(10, 13, 15, 0.96);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* the parent .spinner is a 1px #ccc ring that wraps the bounce dots — drop the
   ring so only the GPD three-dot bounce shows (the ring read as a stray grey arc). */
.shoptimizer-mini-cart-wrap #ajax-loading .spinner {
    border: 0 !important;
    width: auto;
    height: auto;
}
.shoptimizer-mini-cart-wrap #ajax-loading .spinner > div {
    width: 11px;
    height: 11px;
    background: var(--lime-500);
    animation-duration: 1.2s;
}
.shoptimizer-mini-cart-wrap #ajax-loading .spinner .bounce2 { background: var(--teal-500); }

/* Applied-promo chip remove (×): a global GPD button reset turns it into a
   1px-bordered 999px circle that collides with the pill's own border. Return
   it to the design's quiet inline glyph. */
.shoptimizer-mini-cart-wrap .gpd-promo__remove {
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: var(--fg-tertiary) !important;
    box-shadow: none !important;
}
.shoptimizer-mini-cart-wrap .gpd-promo__remove:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* Lock icon on the lime "Proceed to Checkout" CTA: the parent paints the
   mask white (`.widget_shopping_cart .buttons .checkout:before`
   background-color:#fff) — icons on lime buttons are black in the GPD design,
   so follow the button's own ink. */
.shoptimizer-mini-cart-wrap .widget_shopping_cart .buttons .checkout::before {
    background-color: currentColor;
}