/**
 * Gifting front-end styles.
 *
 * Two surfaces share this file: the shopping bar (HID_Gift_Popup) and the
 * checkout picker (gift-checkout.js). Both scoped under hid-gift- prefixes.
 *
 * Brand tokens come from the Elementor kit with hard-coded fallbacks, so the
 * components render correctly even outside kit-174.
 *
 * Restraint is deliberate. The client's standing note: "We don't want it too
 * fancy, too colorful."
 */

:root {
  --hid-gift-green: var(--e-global-color-d49ac81, #67bd50);
  --hid-gift-green-dark: var(--e-global-color-ac00425, #3a7d2c);
  --hid-gift-deep: var(--e-global-color-408a757, #27500a);
  --hid-gift-tint: var(--e-global-color-4d462f5, #d6eac8);
  --hid-gift-tint-soft: var(--e-global-color-cfa1f76, #f0f6e7);
  --hid-gift-ink: var(--e-global-color-044b931, #2a2a2a);
  --hid-gift-amber: var(--e-global-color-14701d6, #fec52b);
  /* Bar only. The one place this palette is allowed to shout. */
  --hid-gift-alert: #d93a1e;
  --hid-gift-highlight: #ffd84d;
}

/* ── Shopping bar ────────────────────────────────────────────────────────── */

/* Deliberately loud. The client's brief, with a Temu screenshot for reference:
   "the issue is that it's hidden... if it will be there, it needs to be bolder
   and the colour changed... it's at the footer but you can't miss it."

   So: a floating rounded pill rather than a flush strip, warm red rather than
   brand green, heavier type, and a highlighted amount. Red is used ONLY here.
   It is the one element on the page allowed to shout, and it earns that by
   carrying a deadline and a number the shopper is trying to reach. */

.hid-gift-bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 12px;

  /* Floating, not flush. Clears the mobile browser chrome that was swallowing
     the old bar, and is what makes it read as a deliberate object rather than
     part of the footer. */
  margin: 0 auto;
  max-width: 680px;
  padding: 13px 16px;
  border-radius: 14px;

  background: var(--hid-gift-alert, #d93a1e);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.hid-gift-bar--bottom {
  bottom: 14px;
  left: 12px;
  right: 12px;
  transform: translateY(140%);
}

/* Clear the WhatsApp FAB, which floats bottom-right at ~56px + offset.

   Only needed while the bar is wide enough to reach it. The bar caps at 680px
   and centres, so above ~900px viewport its right edge sits well inside the
   FAB and the reserved gutter is dead space that pushes the message off-centre.
   Below that the bar spans the viewport and would run underneath the FAB.

   Equal specificity with the 480px block below, so source order decides: this
   must stay ABOVE it or it would override the tighter mobile gutter. */
@media (max-width: 900px) {
  .hid-gift-bar--bottom {
    padding-right: 74px;
  }
}

.hid-gift-bar--top {
  top: 14px;
  left: 12px;
  right: 12px;
  transform: translateY(-140%);
}

.hid-gift-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hid-gift-bar__inner {
  flex: 1 1 auto;
  min-width: 0;
}

/* All caps, at the client's request: "let text be in all caps". Applied as a
   transform rather than baked into the copy so the settings templates stay
   readable in the admin and stay usable anywhere else they might be shown.
   Negative tracking is dropped here — caps need room, not tightening. */
.hid-gift-bar__msg {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #fff;
}

/* Long messages drop out of caps. Set by gift-popup.js from the message length,
   so it follows whatever copy the admin puts in rather than being wired to one
   particular state. Sentence case buys back the width caps costs, which is what
   takes the joined upsell message from four lines to three. */
.hid-gift-bar.is-longform .hid-gift-bar__msg {
  text-transform: none;
  letter-spacing: -0.1px;
  font-size: 14px;
}

@media (max-width: 480px) {
  .hid-gift-bar.is-longform .hid-gift-bar__msg {
    font-size: 13.5px;
  }
}

/* The number the shopper is chasing, lifted out of the sentence. High contrast
   on the red, the same trick the reference screenshot uses. */
.hid-gift-bar__amount {
  color: var(--hid-gift-highlight, #ffd84d);
  font-weight: 900;
  white-space: nowrap;
}

.hid-gift-bar__progress {
  margin-top: 9px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.hid-gift-bar__progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--hid-gift-highlight, #ffd84d);
  transition: width 0.4s ease;
}

/* The bar stays red in every state, at the client's instruction.

   It previously switched to brand green once a gift was unlocked, on the
   reasoning that a state with nothing left to chase should stop shouting. She
   asked for red and only ever reviewed the locked state, so the switch was
   never something she agreed to. Red throughout is what she wants, and it is
   the more consistent object for it: one colour means one thing on the page.

   The is-unlocked class is still applied — the progress fill and the message
   both key off it — it just no longer repaints the background. */

/* Keep the number highlighted in BOTH states. Unlocked still carries an upsell
   amount the shopper is chasing, and dropping it to near-white buried the one
   figure the line exists to communicate. */
.hid-gift-bar.is-unlocked .hid-gift-bar__amount {
  color: var(--hid-gift-highlight, #ffd84d);
}

/* 0% of an empty basket is visually meaningless, so drop the track entirely. */
.hid-gift-bar.is-empty .hid-gift-bar__progress {
  display: none;
}

/* The theme paints bare <button> elements brand green with its own padding and
   radius, which turned this into a green rectangle sitting on the red bar. Same
   cascade fight as the checkout opt-out link, same answer: be specific and win
   deliberately rather than hope. */
.hid-gift-bar .hid-gift-bar__close,
.hid-gift-bar button.hid-gift-bar__close {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22) !important;
  background-image: none !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.hid-gift-bar .hid-gift-bar__close:hover,
.hid-gift-bar .hid-gift-bar__close:focus-visible {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Modal variant — centred, for a campaign launch announcement. */
.hid-gift-bar--modal {
  left: 50%;
  right: auto;
  bottom: auto;
  top: 50%;
  width: min(92vw, 420px);
  transform: translate(-50%, -46%);
  border-radius: 12px;
  padding: 20px 22px;
  text-align: center;
  flex-direction: column;
}

.hid-gift-bar--modal.is-visible {
  transform: translate(-50%, -50%);
}

/* ── Checkout picker ─────────────────────────────────────────────────────── */

.hid-gift-block {
  margin: 4px 0 16px;
  padding: 14px;
  border: 1px solid var(--hid-gift-tint);
  border-radius: 10px;
  background: var(--hid-gift-tint-soft);
}

.hid-gift-block.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

.hid-gift-block__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hid-gift-deep);
  margin-bottom: 2px;
}

/* Deliberately NOT caps. The client asked only for a wording change here and
   the caps came from me; a whole sentence of capitals at 12px reads as shouting
   in a spot that is meant to be a quiet instruction. The shop bar keeps its
   caps — that one she chose. */
.hid-gift-block__sub {
  font-size: 12px;
  color: #5c6b56;
  margin-bottom: 10px;
}

.hid-gift-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hid-gift-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e4ece0;
  border-radius: 8px;
  cursor: pointer;
  /* 48px min tap target on mobile. */
  min-height: 48px;
}

.hid-gift-option:hover {
  border-color: var(--hid-gift-green);
}

.hid-gift-option:focus-within {
  outline: 2px solid var(--hid-gift-green-dark);
  outline-offset: 1px;
}

.hid-gift-option input[type="radio"] {
  accent-color: var(--hid-gift-green);
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  cursor: pointer;
}

.hid-gift-option__img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
  flex: 0 0 auto;
}

.hid-gift-option__name {
  font-size: 14px;
  color: var(--hid-gift-ink);
}

/* Out of stock: dimmed AND labelled. Never colour alone — the text carries the
   meaning for anyone who cannot distinguish the dimming. */
.hid-gift-option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #f6f6f4;
}

.hid-gift-option__oos {
  font-size: 12px;
  color: #8a1f1f;
  font-weight: 600;
}

.hid-gift-warning {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--hid-gift-amber);
  background: #fffaf0;
  font-size: 13px;
  color: #6b4e00;
}

.hid-gift-upsell {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--hid-gift-green-dark);
}

.hid-gift-error {
  margin: 10px 0 0;
  font-size: 13px;
  color: #c0392b;
}

/* The opt-out must read as a quiet way back, NOT as a call to action — it sits
   feet away from "Pay Now" and must never compete with it. Themes style bare
   <button> elements aggressively (this one paints them brand green), so these
   declarations are deliberately specific and !important where the theme would
   otherwise win. */
.hid-gift-block .hid-gift-decline,
.hid-gift-block button.hid-gift-decline {
  display: inline-block;
  margin-top: 10px;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 2px !important;
  width: auto !important;
  min-height: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #6b7a66 !important;
  text-decoration: underline;
  cursor: pointer;
}

.hid-gift-block .hid-gift-decline:hover,
.hid-gift-block .hid-gift-decline:focus-visible {
  color: var(--hid-gift-ink) !important;
  background: none !important;
}

/* Locked teaser — the last upsell before payment. */
.hid-gift-locked__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--hid-gift-deep);
  margin-bottom: 8px;
}

.hid-gift-progress {
  height: 6px;
  border-radius: 999px;
  background: #e4ece0;
  overflow: hidden;
}

.hid-gift-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--hid-gift-green);
  transition: width 0.4s ease;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .hid-gift-bar {
    font-size: 14px;
    padding: 12px 14px;
    padding-right: 68px;
    border-radius: 12px;
  }

  .hid-gift-bar--bottom {
    bottom: 10px;
    left: 8px;
    right: 8px;
  }

  .hid-gift-option__img {
    width: 34px;
    height: 34px;
  }
}

/* ── Motion ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hid-gift-bar,
  .hid-gift-bar__progress span,
  .hid-gift-progress span {
    transition: none;
  }
}