/* =========================================================
   FunnelKit Cart — Quick-view ("Select options") popup,
   styled to mirror the GLOW WITH BELLA product detail page.
   All rules are scoped to .gwb-fkqv (the override template's
   root) so nothing leaks into the rest of the FunnelKit cart.
   ========================================================= */

.gwb-fkqv { font-family: 'Poppins', sans-serif; color: #1a1a1a; }
.gwb-fkqv .fkcart-panel { padding-left: 16px; padding-right: 16px; }

/* ── Hero image ── */
.gwb-fkqv__media { text-align: center; padding-top: 14px; }
.gwb-fkqv__media img {
  width: 220px; max-width: 70%; height: auto;
  background: #faf5f2; border-radius: 12px; display: inline-block;
}

/* ── Title + stock + rating ── */
.gwb-fkqv__head { margin-top: 6px; }
.gwb-fkqv__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gwb-fkqv__title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: #1a1a1a; }
.gwb-fkqv__title a { color: inherit; text-decoration: none; }
.gwb-fkqv__stock { flex-shrink: 0; font-size: 0.82rem; font-weight: 700; white-space: nowrap; margin-top: 4px; }
.gwb-fkqv__stock.in { color: #1a8a3a; }
.gwb-fkqv__stock.out { color: #c0392b; }
.gwb-fkqv__rating { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.82rem; color: #555; }
.gwb-fkqv__rating-num { font-weight: 800; color: #1a1a1a; }
.gwb-fkqv__rating-star { color: #f5b50a; }

/* ── Price (mirrors .gwb-pdp__price-block) ── */
.gwb-fkqv__price-block { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gwb-fkqv__offer { font-size: 1.5rem; font-weight: 800; color: #1a1a1a; }
.gwb-fkqv__offer .woocommerce-Price-amount { font-size: inherit; }
.gwb-fkqv__offer ins { background: none; text-decoration: none; font-weight: 800; }
.gwb-fkqv__offer del { color: #999; font-weight: 400; font-size: 1rem; margin-right: 4px; }
.gwb-fkqv__mrp { font-size: 1rem; color: #999; }
.gwb-fkqv__mrp del { text-decoration: line-through; }
.gwb-fkqv__disc {
  display: inline-block; background: #fff3e8; color: #e65100;
  font-size: 0.78rem; font-weight: 700; padding: 3px 8px; border-radius: 6px;
}
.gwb-fkqv__tax { flex-basis: 100%; font-size: 0.72rem; color: #999; margin-top: 2px; }

/* ── Available Offers accordion ── */
.gwb-fkqv__offers { margin-top: 12px; }
.gwb-fkqv__offers-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; background: #fff8f0; border: 1px solid #ffe6cf;
  border-radius: 10px; cursor: pointer; font-size: 0.85rem; font-weight: 700;
  color: #1a1a1a; text-align: left; font-family: inherit;
}
.gwb-fkqv__offers-toggle svg:first-child { color: var(--color-primary, #E91E8C); flex-shrink: 0; }
.gwb-fkqv__offers-toggle span { flex: 1; }
.gwb-fkqv__offers-arrow { transition: transform 0.2s; flex-shrink: 0; }
.gwb-fkqv__offers-toggle[aria-expanded="true"] .gwb-fkqv__offers-arrow { transform: rotate(180deg); }
.gwb-fkqv__offers-list { padding: 12px 4px 2px; }
.gwb-fkqv__offers-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gwb-fkqv__offers-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: #1a1a1a; }
.gwb-fkqv__offers-list li svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary, #E91E8C); }

/* ── Size form: pink swatches + "X left" labels (mirror PDP) ── */
.gwb-fkqv__form { margin-top: 12px; }
/* NOTE: FunnelKit wraps Size/Clear/Quantity in one extra unclassed <div>
   inside .variations_form, so `order` on THESE selectors has no flex parent
   and does nothing. The real reorder (Size, Clear, In stock, View Size
   Chart, Quantity) is done by JS — see reorderQuickViewLayout() in
   fkcart-quickview.js — which physically moves the DOM nodes. */
/* "Clear" — plain dark link below the swatches, only once a size is chosen */
.gwb-fkqv .variations_form .fkcart-product-form-reset-form { text-align: left; margin: 14px 0 0; }
.gwb-fkqv .variations_form:not(.gwb-has-size) .fkcart-product-form-reset-form { display: none; }
.gwb-fkqv .variations_form .reset_variations {
  display: inline-block; font-size: 1rem; font-weight: 600;
  color: #333; text-decoration: none;
}
.gwb-fkqv .variations_form .reset_variations:hover { color: #000; text-decoration: underline; }

.gwb-fkqv .variations table.variations { width: 100%; }
.gwb-fkqv .variations th.label label { font-size: 0.95rem; font-weight: 700; color: #1a1a1a; }
.gwb-fkqv .variable-items-wrapper { gap: 10px !important; align-items: flex-start !important; flex-wrap: wrap; }
.gwb-fkqv .variable-item.button-variable-item {
  min-width: 46px; height: 46px; border-radius: 50% !important;
  border: 1.5px solid #ccc !important; box-shadow: none !important;
  background-color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; padding: 0 8px;
}
.gwb-fkqv .variable-item.button-variable-item .variable-item-span { color: #333; }
.gwb-fkqv .variable-item.button-variable-item:hover {
  border-color: var(--color-primary, #E91E8C) !important;
}
.gwb-fkqv .variable-item.button-variable-item:hover .variable-item-span { color: var(--color-primary, #E91E8C); }
/* Selected swatch — solid pink fill + white label (match aria-checked too, so
   the label is never white-on-white) */
.gwb-fkqv .variable-item.button-variable-item.selected,
.gwb-fkqv .variable-item.button-variable-item[aria-checked="true"],
.gwb-fkqv .variable-items-wrapper .variable-item.selected {
  background-color: var(--color-primary, #E91E8C) !important;
  border-color: var(--color-primary, #E91E8C) !important;
  box-shadow: 0 0 0 1px var(--color-primary, #E91E8C) !important;
}
/* A legacy "#fkcart-modal .variable-item{background:#fff}" rule in the site's
   Additional CSS (wp-admin → Customizer) has an ID selector, which otherwise
   beats the rule above on specificity alone. Repeat it with #fkcart-modal in
   front so our pink fill actually wins. */
#fkcart-modal .gwb-fkqv .variable-item.button-variable-item.selected,
#fkcart-modal .gwb-fkqv .variable-item.button-variable-item[aria-checked="true"],
#fkcart-modal .gwb-fkqv .variable-items-wrapper .variable-item.selected {
  background-color: var(--color-primary, #E91E8C) !important;
  border-color: var(--color-primary, #E91E8C) !important;
  box-shadow: 0 0 0 1px var(--color-primary, #E91E8C) !important;
}
.gwb-fkqv .variable-item.selected .variable-item-contents,
.gwb-fkqv .variable-item[aria-checked="true"] .variable-item-contents { background: transparent !important; }
.gwb-fkqv .variable-item.selected .variable-item-span,
.gwb-fkqv .variable-item.selected span,
.gwb-fkqv .variable-item[aria-checked="true"] .variable-item-span,
.gwb-fkqv .variable-item[aria-checked="true"] span { color: #fff !important; }
/* "X left" label stacked under each swatch */
.gwb-fkqv .gwb-size-slot { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.gwb-fkqv .gwb-size-stock { font-size: 0.66rem; font-weight: 600; color: var(--color-primary, #E91E8C); line-height: 1; white-space: nowrap; }
/* Hide FunnelKit's duplicate inline variation price (we show our own up top) */
.gwb-fkqv .single_variation .woocommerce-variation-price { display: none; }
.gwb-fkqv .single_variation .woocommerce-variation-availability {
  display: block; font-size: 0.8rem; font-weight: 700; color: #1a8a3a;
  text-align: left; margin: 14px 0 0;
}

/* Quantity selector */
.gwb-fkqv .fkcart-input-label { font-size: 0.9rem; font-weight: 700; color: #1a1a1a; }
.gwb-fkqv .fkcart-quantity-selector { border: 1.5px solid #ddd; border-radius: 10px; overflow: hidden; width: max-content; }
.gwb-fkqv .fkcart-quantity-button { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gwb-fkqv .fkcart-quantity__input { width: 52px; height: 42px; border: none; border-left: 1.5px solid #eee; border-right: 1.5px solid #eee; text-align: center; font-weight: 700; }

/* ── View Size Chart pill ── */
.gwb-fkqv__sizechart { margin-top: 14px; }
/* Once JS relocates this panel inside .variations_form (see
   reorderQuickViewLayout in fkcart-quickview.js), it sits one level deeper
   than before — inside .gwb-fkqv__form, which is ALSO a .fkcart-panel with
   its own 16px side padding. Without this, the pill would end up indented
   16px further right than Size/Clear/In stock above it. */
#fkcart-modal .gwb-fkqv .variations_form .gwb-fkqv__sizechart { padding-left: 0 !important; padding-right: 0 !important; margin-top: 14px; }
.gwb-fkqv__sizechart .size-chart-btn--pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1.5px solid var(--color-primary, #E91E8C);
  border-radius: 30px; background: #fff; color: var(--color-primary, #E91E8C);
  font-size: 0.85rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.gwb-fkqv__sizechart .size-chart-btn--pill:hover { background: #fff0f8; }

/* ── Check Delivery ── */
.gwb-fkqv__delivery { margin: 16px; padding-top: 14px; padding-bottom: 14px; border: 1px solid #eee; border-radius: 10px; }
.gwb-fkqv__delivery-head { display: flex; align-items: center; gap: 7px; font-size: 0.9rem; color: #1a1a1a; margin-bottom: 10px; }
.gwb-fkqv__delivery-head svg { color: var(--color-primary, #E91E8C); }
.gwb-fkqv__delivery-form { display: flex; gap: 8px; }
.gwb-fkqv__pin {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px;
  border: 1.5px solid #ddd; border-radius: 8px; font-size: 0.9rem; outline: none; font-family: inherit;
}
.gwb-fkqv__pin:focus { border-color: var(--color-primary, #E91E8C); }
.gwb-fkqv__pin-btn {
  height: 42px; padding: 0 20px; border: 1.5px solid var(--color-primary, #E91E8C);
  border-radius: 8px; background: #fff; color: var(--color-primary, #E91E8C);
  font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.gwb-fkqv__pin-btn:hover { background: #fff0f8; }
.gwb-fkqv__delivery-result { font-size: 0.8rem; font-weight: 600; margin-top: 8px; min-height: 1em; }
.gwb-fkqv__delivery-result.ok { color: #1a8a3a; }
.gwb-fkqv__delivery-result.err { color: #c0392b; }

/* ── Manual drawer overrides (moved here from a direct plugin-file edit so
   they're zip-deployable and survive FunnelKit plugin updates).
   The plugin's own CSS for these exact selectors happens to load AFTER
   ours in the page, so identical-specificity rules here lose the tie —
   !important forces ours to win regardless of load order. ── */
.fkcart-quick-view-drawer .fkcart-product-form-reset-form .reset_variations,
.fkcart-quick-view-drawer .fkcart-product-form-reset-form a {
  font-weight: 500 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  display: block !important;
  background: 0 0 !important;
  /* Drop the plugin's fixed size + pink tint — inherit from the surrounding
     text instead (this is what unchecking those 3 properties in devtools
     previewed). */
  font-size: unset !important;
  line-height: unset !important;
  color: unset !important;
}

#fkcart-modal .fkcart-panel:not(.fkwcs_fkcart_gpay_wrapper) {
  padding-bottom: 16px !important;
  padding-right: 16px !important;
  padding-left: 16px !important;
}

#fkcart-modal .fkcart-product-form-field .fkcart-input-label {
  display: inline-flex !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
  font-size: 14px !important;
  min-width: 100px !important;
}

/* ── Trust strip ── */
.gwb-fkqv__trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.gwb-fkqv__trust-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 0.68rem; font-weight: 600; color: #555; }
.gwb-fkqv__trust-item svg { color: var(--color-primary, #E91E8C); }

/* ── View details ── */
.gwb-fkqv__view { margin-top: 14px; }
.gwb-fkqv__view .fkcart-view-link { font-size: 0.88rem; font-weight: 700; color: var(--color-primary, #E91E8C); text-decoration: none; }
.gwb-fkqv__view .fkcart-view-link:hover { text-decoration: underline; }

/* ── Submit button (PDP primary) ── */
.gwb-fkqv__submit { margin-top: 6px; }
.gwb-fkqv .fkcart-add-variant-product {
  width: 100%; padding: 15px; border: none; border-radius: 10px;
  background: var(--color-primary, #E91E8C); color: #fff;
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.4px; cursor: pointer; font-family: inherit;
}
.gwb-fkqv .fkcart-add-variant-product:hover { background: var(--color-primary-dark, #c2177a); }