/* ==========================================================================
   XT Free Shipping — Franco bar  (Premium style)
   Scoped under .xt-franco-bar-* — override freely in your child-theme CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper — AJAX target, no visual style
   -------------------------------------------------------------------------- */

.xt-franco-bar-wrapper {
  /* Intentionally unstyled: it is the AJAX fragment container only. */
}

/* --------------------------------------------------------------------------
   Base card
   -------------------------------------------------------------------------- */

.xt-franco-bar {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 16px;
  box-sizing: border-box;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Header row: icon + message
   -------------------------------------------------------------------------- */

.xt-franco-bar__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.xt-franco-bar__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 1;
}

.xt-franco-bar__message {
  margin: 0;
  padding: 0;
  font-weight: 500;
  line-height: 1.4;
  color: #333333;
}

/* wc_price() wraps amounts in a <span> — keep inline and emphasise */
.xt-franco-bar__message .woocommerce-Price-amount {
  font-weight: 700;
  font-size: 1.1em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Progress track row (below header)
   -------------------------------------------------------------------------- */

.xt-franco-bar__track-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.xt-franco-bar__track {
  flex: 1;
  height: 8px;
  background-color: #f0f5f6;
  border-radius: 9999px;
  overflow: hidden;
}

.xt-franco-bar__fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
  transition: width 1s ease-out;
  will-change: width;
}

.xt-franco-bar__pct {
  flex-shrink: 0;
  font-size: 0.75em;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   State: franco reached — green
   -------------------------------------------------------------------------- */

.xt-franco-bar--reached .xt-franco-bar__icon {
  color: #16a34a;
}

.xt-franco-bar--reached .xt-franco-bar__fill {
  background-color: #16a34a;
}

/* --------------------------------------------------------------------------
   State: pending — teal brand colour
   -------------------------------------------------------------------------- */

.xt-franco-bar--pending .xt-franco-bar__icon {
  color: #1c717a;
}

.xt-franco-bar--pending .xt-franco-bar__fill {
  background-color: #1c717a;
}

.xt-franco-bar--pending .xt-franco-bar__pct {
  color: #1c717a;
}

/* --------------------------------------------------------------------------
   State: excluded — amber
   -------------------------------------------------------------------------- */

.xt-franco-bar--excluded .xt-franco-bar__icon {
  color: #d97706;
}

/* --------------------------------------------------------------------------
   Mobile (≤ 480 px) — taille réduite, padding serré
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .xt-franco-bar {
    font-size: 11px;
    padding: 11px 12px;
    align-items: stretch;
  }

  .xt-franco-bar__header {
    gap: 9px;
    flex-shrink: 0;
  }

  .xt-franco-bar__icon svg {
    width: 17px;
    height: 17px;
  }

  .xt-franco-bar__track-wrap {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    gap: 8px;
    margin-top: 10px;
    min-width: 0;
    min-height: 6px;
  }

  .xt-franco-bar__track {
    flex: 1 1 0;
    min-width: 0;
    height: 6px;
  }
}

/* --------------------------------------------------------------------------
   Dark-mode support (opt-in via prefers-color-scheme)
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  .xt-franco-bar {
    background-color: #1c1c1c;
    border-color: #3a3a3a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }

  .xt-franco-bar__message {
    color: #e5e5e5;
  }

  .xt-franco-bar__track {
    background-color: #2a3536;
  }

  .xt-franco-bar--reached .xt-franco-bar__icon {
    color: #4ade80;
  }
  .xt-franco-bar--reached .xt-franco-bar__fill {
    background-color: #4ade80;
  }

  .xt-franco-bar--pending .xt-franco-bar__icon {
    color: #34d4df;
  }
  .xt-franco-bar--pending .xt-franco-bar__fill {
    background-color: #34d4df;
  }
  .xt-franco-bar--pending .xt-franco-bar__pct {
    color: #34d4df;
  }

  .xt-franco-bar--excluded .xt-franco-bar__icon {
    color: #fbbf24;
  }
}