/* bluTshirt — Gift Rewards «هدیهٔ پلکانی»
   Base styles. Every selector here exists in the server-rendered HTML, so
   LiteSpeed UCSS keeps them. JS-only state selectors live in gift-critical.css
   (inlined with data-no-optimize) — see that file for why.

   Colour/spacing/radius all reference the theme's tokens.css variables with
   literal fallbacks, so the module still looks right if the theme is swapped. */

/* =============================================================== progress == */
/* Green tint, not the theme's blue: the free-shipping rail higher up the page
   is blue, and two identical-looking rails read as one confused goal. */
.blu-gift-progress {
  background: rgba(21, 122, 67, .07);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}

.blu-gift-progress__text {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: var(--weight-ui, 500);
  /* a11y: 5.39:1 on the tint. --blu-500 would be 2.59:1 — fails AA. */
  color: var(--success, #157A43);
}

.blu-gift-progress__track {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--gray-150, #EBEBEB);
}
.blu-gift-progress__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill, 999px);
  /* Distinct from the theme's blue free-shipping rail so the two incentives
     read as separate goals rather than competing for the same meaning. */
  background: var(--success, #157A43);
  transition: width var(--motion-slow, 320ms) var(--motion-ease, ease);
}
.blu-gift-progress__stop {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-inline-start: -5px;
  border-radius: var(--radius-pill, 999px);
  border: 2px solid var(--white, #fff);
  background: var(--border-input, #8A9094);
}
.blu-gift-progress__stop.is-unlocked { background: var(--success, #157A43); }

/* =================================================================== shell == */
/* A bordered card, not a bare section — it has to read as its own idea sitting
   between the item list and the totals, not as more cart chrome. */
.blu-gift { margin: var(--space-5, 24px) 0 0; }
.blu-gift:empty { display: none; }
.blu-gift:not(:empty) {
  padding: var(--space-4, 16px);
  border: 1px solid var(--border-soft, #EBEBEB);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface-page, #fff);
}

.blu-gift__head { margin-bottom: var(--space-3, 12px); }
.blu-gift__title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: var(--weight-title, 800);
  color: var(--text-strong, #394246);
}
.blu-gift__title .blu-gift-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--success, #157A43);
}
.blu-gift__sub {
  margin: 0;
  font-size: var(--text-caption, 13px);
  font-weight: var(--weight-body, 300);
  color: var(--muted, #5F6A71);
  line-height: 1.7;
}

.blu-gift__group {
  border: 0;
  margin: 0 0 var(--space-4, 16px);
  padding: 0;
  min-width: 0; /* fieldset defaults to min-content and breaks grid children */
}
.blu-gift__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2, 8px);
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
}
.blu-gift__legend-title {
  font-size: 14px;
  font-weight: var(--weight-strong, 700);
  color: var(--text-strong, #394246);
}
.blu-gift__legend-count {
  font-size: var(--text-label, 12px);
  color: var(--muted, #5F6A71);
}

.blu-gift__scarce {
  margin: 0 0 10px;
  font-size: var(--text-label, 12px);
  font-weight: var(--weight-ui, 500);
  color: var(--warning, #A35F06);
}
.blu-gift__depleted,
.blu-gift__notice {
  margin: 0;
  padding: var(--space-3, 12px);
  border-radius: var(--radius-md, 12px);
  background: var(--gray-100, #F4F4F4);
  font-size: var(--text-caption, 13px);
  color: var(--muted, #5F6A71);
}
.blu-gift__notice p { margin: 0; }

/* ================================================================== grid ==== */
/* Container-driven, NOT viewport-driven.
   The first build used `@media (min-width:1024px) { repeat(4, 1fr) }`. On a
   1440px desktop that fired while the picker was sitting in a 418px column,
   giving 90px cards with shredded text. auto-fill + a 150px floor makes the
   grid respond to the space it actually has, whatever container it lands in. */
.blu-gift__grid {
  display: grid;
  /* 140px floor lets the common "4 options" case sit on one row inside the
     638px main column (4×140 + 3×20 = 620) while still giving 2 columns at
     390px mobile. */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .blu-gift__grid { gap: 20px; }
}
.blu-gift__item { margin: 0; min-width: 0; }

/* ================================================================== card ==== */
.blu-gift-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  background: var(--surface-page, #fff);
  /* a11y 1.4.11: border-input is ~3.23:1 on white. border-soft (1.19:1) is not
     an acceptable boundary for an interactive control. */
  border: 1.5px solid var(--border-input, #8A9094);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  transition:
    border-color var(--motion-fast, 120ms) var(--motion-ease, ease),
    background var(--motion-fast, 120ms) var(--motion-ease, ease),
    box-shadow var(--motion-base, 200ms) var(--motion-ease, ease);
}

/* Visually hidden but still focusable and still announced — never display:none,
   which would remove it from the tab order and kill arrow-key navigation. */
.blu-gift-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.blu-gift-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--gray-100, #F4F4F4);
  overflow: hidden;
}
/* `contain`, not `cover`. Gifts are often flat goods — sticker sheets, tote
   prints — where cover-cropping shows a meaningless corner and the shopper
   cannot tell what they are choosing. Product cards elsewhere use cover
   because those are worn garments shot on a model. */
.blu-gift-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 6px;
}

.blu-gift-card__badge {
  position: absolute;
  top: 9px;
  inset-inline-start: 9px;
  padding: 3px 9px;
  border-radius: var(--radius-pill, 999px);
  /* white on --success = 5.39:1 ✔ (white on --blu-500 would be 2.59:1 ✘) */
  background: var(--success, #157A43);
  color: var(--white, #fff);
  font-size: 10px;
  font-weight: var(--weight-strong, 700);
  line-height: 1.6;
}

.blu-gift-card__check {
  position: absolute;
  top: 9px;
  inset-inline-end: 9px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blu-700, #007AA6);
  color: var(--white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: transform var(--motion-fast, 120ms) var(--motion-ease, ease);
}
.blu-gift-card__check svg { width: 14px; height: 14px; }

.blu-gift-card__flag {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 5px 8px;
  background: rgba(255, 255, 255, .92);
  color: var(--muted-2, #6F777D);
  border-top: 1px solid var(--border-soft, #EBEBEB);
  font-size: 11px;
  font-weight: var(--weight-ui, 500);
  text-align: center;
}

.blu-gift-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 11px 12px;
}
.blu-gift-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
  font-size: 12.5px;
  font-weight: var(--weight-ui, 500);
  line-height: 1.5;
  color: var(--text-strong, #394246);
}
@media (min-width: 1024px) {
  .blu-gift-card__title { font-size: 14.5px; min-height: 44px; }
}
.blu-gift-card__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.blu-gift-card__was {
  /* muted (5.04:1 on gray-100) not muted-2 (4.14:1 — fails AA) */
  color: var(--muted, #5F6A71);
  font-size: .82em;
  font-weight: var(--weight-ui, 500);
  text-decoration: line-through;
}
.blu-gift-card__now {
  color: var(--success, #157A43);
  font-weight: var(--weight-title, 800);
  text-decoration: none;
  font-size: 13px;
}
.blu-gift-card__meta { font-size: 11.5px; color: var(--muted, #5F6A71); }

/* -------- remove-my-gift (only rendered once one is selected) -------- */
.blu-gift__decline-row { margin: 10px 0 0; text-align: center; }
.blu-gift__decline {
  background: none;
  border: 0;
  padding: 12px 8px;
  min-height: 44px;
  font: inherit;
  font-size: var(--text-caption, 13px);
  color: var(--muted, #5F6A71);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ================================================================ locked ==== */
.blu-gift__locked {
  padding: var(--space-4, 16px);
  border-radius: var(--radius-lg, 16px);
  background: var(--gray-100, #F4F4F4);
  text-align: center;
}
.blu-gift__locked-icon { width: 26px; height: 26px; color: var(--muted, #5F6A71); }
.blu-gift__locked-title {
  margin: 6px 0 4px;
  font-size: 14px;
  font-weight: var(--weight-title, 800);
  color: var(--text-strong, #394246);
}
.blu-gift__locked-text {
  margin: 0;
  font-size: var(--text-caption, 13px);
  color: var(--muted, #5F6A71);
}
.blu-gift__teasers {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: var(--space-3, 12px) 0 0;
  padding: 0;
}
.blu-gift__teasers li {
  width: 54px;
  height: 68px;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  background: var(--gray-150, #EBEBEB);
  /* "What you're missing" reads stronger as a dimmed image than as text. */
  opacity: .55;
  filter: grayscale(40%);
}
.blu-gift__teasers img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================================================= terms / status / error === */
.blu-gift__terms {
  margin: var(--space-3, 12px) 0 0;
  padding-inline-start: 18px;
  font-size: var(--text-label, 12px);
  line-height: 1.9;
  color: var(--muted, #5F6A71);
}
.blu-gift__status {
  margin: 8px 0 0;
  font-size: var(--text-caption, 13px);
  color: var(--muted, #5F6A71);
  min-height: 1em;
}
.blu-gift__error {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(194, 47, 47, .06);
  border: 1px solid rgba(194, 47, 47, .30);
  color: var(--danger, #C22F2F);
  font-size: var(--text-caption, 13px);
}

/* ========================================================= cart line item == */
.blu-gift-free {
  color: var(--success, #157A43);
  font-weight: var(--weight-strong, 700);
}
/* Real price kept visible but struck through — it is the figure the invoice
   carries, cancelled by the «هدیهٔ کمپین» discount row. */
.blu-gift-was,
.blu-gift-was .amount,
.blu-gift-was bdi {
  color: var(--muted, #5F6A71);
  text-decoration: line-through;
  font-weight: var(--weight-ui, 500);
}
.blu-gift-qty {
  font-size: var(--text-caption, 13px);
  color: var(--muted, #5F6A71);
}
.cart-item.blu-gift-item,
.woocommerce-cart-form__cart-item.blu-gift-item {
  background: rgba(21, 122, 67, .05);
}

/* Inline badge on the cart / checkout line item. */
.blu-gift-badge,
.blu-gift-review__badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--success, #157A43);
  color: var(--white, #fff);
  font-size: 10px;
  font-weight: var(--weight-strong, 700);
}
.blu-gift-review--link td {
  padding-top: 0;
  font-size: var(--text-label, 12px);
}

/* ================================================================= sheet ==== */
.blu-gift-sheet .modal__body { padding-bottom: 0; }

.blu-gift-sheet__preview {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}
.blu-gift-sheet__preview img {
  width: 72px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  background: var(--gray-100, #F4F4F4);
}
.blu-gift-sheet__name {
  font-size: 14px;
  font-weight: var(--weight-strong, 700);
  color: var(--text-strong, #394246);
}
.blu-gift-sheet__empty {
  padding: var(--space-4, 16px) 0;
  text-align: center;
  color: var(--muted, #5F6A71);
  font-size: var(--text-caption, 13px);
}

.blu-gift-sheet__form .variations { width: 100%; border-collapse: collapse; }
.blu-gift-sheet__form .variations th,
.blu-gift-sheet__form .variations td {
  display: block;
  width: 100%;
  text-align: start;
  padding: 0;
}
.blu-gift-sheet__form .variations th.label {
  margin-bottom: 6px;
  font-size: var(--text-caption, 13px);
  font-weight: var(--weight-ui, 500);
  color: var(--text-body, #4B555A);
}
.blu-gift-sheet__form .variations tr { display: block; margin-bottom: var(--space-3, 12px); }
.blu-gift-sheet__form select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--border-input, #8A9094);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-page, #fff);
  font: inherit;
  color: var(--text-strong, #394246);
}

/* The theme's enhanceVariations() upgrades the selects into swatches/pills;
   bump the hit areas to the project's 44px standard inside the sheet. */
.blu-gift-sheet__form .color-swatch { position: relative; }
.blu-gift-sheet__form .color-swatch::before {
  content: "";
  position: absolute;
  inset: -5px;
}
.blu-gift-sheet__form .size-pill { min-height: 44px; }

.blu-gift-sheet__foot {
  position: sticky;
  bottom: 0;
  margin: var(--space-4, 16px) -18px 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface-page, #fff);
  border-top: 1px solid var(--border-soft, #EBEBEB);
}
.blu-gift-sheet .modal__close { width: 44px; height: 44px; }

/* ============================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .blu-gift-progress__fill,
  .blu-gift-card,
  .blu-gift-card__check {
    transition: none;
  }
}

/* ============================== v1.3.2 — unified rewards rail additions === */
/* برچسب هر پله زیر ریل؛ نقطهٔ پلهٔ بیرونی (ارسال رایگان) آبی تا از هدیه جدا شود. */
.blu-gift-progress__stop--extra { background: var(--blu-600, #0092C4); }
.blu-gift-progress__stop--extra.is-unlocked { background: var(--success, #157A43); }
.blu-gift-progress__labels { position: relative; height: 18px; margin-top: 7px; }
.blu-gift-progress__label {
  position: absolute; top: 0; inset-inline-start: 0; transform: translateX(50%);
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; line-height: 1.6; white-space: nowrap;
  color: var(--muted, #5F6A71);
}
.blu-gift-progress__label.is-unlocked { color: var(--success, #157A43); font-weight: 600; }
/* برچسب پلهٔ آخر (۱۰۰٪) بیرون نزند. */
.blu-gift-progress__label[style*="100%"] { transform: none; inset-inline-end: 0; inset-inline-start: auto !important; }
.blu-gift__locked .blu-gift-progress { text-align: start; margin-top: 10px; }