/**
 * Copyright since 2026 Prestacraft
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 *
 * @author    Prestacraft <contact@prestacraft.com>
 * @copyright Since 2026 Prestacraft
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License (AFL 3.0)
 */

/* DESIGN_PRESTACRAFT.md §2 tokens, scoped to the module root. Components arrive with lot 2. */
.pclar-front {
  --pc-bg:#FBFAF9;
  --pc-surface:#FFFFFF;
  --pc-surface-subtle:#F5F3F1;
  --pc-text:#0C1322;
  --pc-text-muted:#5A6270;
  --pc-text-faint:#8A909C;
  --pc-border:#E7E3DE;
  --pc-border-strong:#D8D3CC;
  --pc-primary:#0C1322; --pc-primary-hover:#1E2738; --pc-on-primary:#FFFFFF;
  --pc-selected-soft:#EEF1F5;
  --pc-focus-ring:rgba(12,19,34,.18);
  --pc-success:#1F7A54; --pc-success-soft:#EAF4EE;
  --pc-warning:#9A5B12; --pc-warning-soft:#FBF1E5;
  --pc-danger:#B23A34;  --pc-danger-soft:#F7ECEB;
  --pc-radius:8px; --pc-radius-sm:6px;
  --pc-shadow-card:0 1px 2px rgba(12,19,34,.06);
  --pc-shadow-pop:0 10px 30px rgba(12,19,34,.10);

  color: var(--pc-text);
}

/* `hidden` must win over the display of the module's own classes. */
.pclar-front[hidden],
.pclar-front [hidden] {
  display: none;
}

/* Wallet block of the cart and the checkout (lot 2). Native buttons and fields of the theme, laid out
   by the module so that classic (Bootstrap 4) and hummingbird (Bootstrap 5) look alike. */
.pclar-front.pclar-cart {
  margin: 0 0 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.pclar-cart .pclar-cart__line {
  margin: 0 0 0.5rem;
}

.pclar-cart .pclar-cart__label {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  color: var(--pc-text-muted);
}

.pclar-cart .pclar-cart__balance {
  color: var(--pc-text);
}

/* A negative balance is a debt: in red (recette NEG-01). Both classes, so that the base rule of the
   value, whatever its place in this file, never wins. */
.pclar-cart .pclar-cart__balance.pclar-cart__balance--negative,
.pclar-account .pclar-balance__value.pclar-balance__value--negative {
  color: var(--pc-danger);
}

.pclar-cart .pclar-cart__pending,
.pclar-cart .pclar-cart__hint {
  color: var(--pc-text-faint);
  font-size: 0.875rem;
}

.pclar-cart .pclar-cart__hint {
  margin: 0.375rem 0 0;
}

.pclar-cart .pclar-cart__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

/* In a narrow column (classic checkout), the button goes below the amount instead of crushing it. */
.pclar-cart input.pclar-cart__amount {
  flex: 1 1 7rem;
  min-width: 7rem;
}

.pclar-cart .pclar-cart__button {
  flex: 1 1 auto;
  white-space: nowrap;
}

.pclar-cart .pclar-cart__notice {
  margin: 0 0 0.5rem;
}

.pclar-cart .pclar-cart__error {
  margin: 0.5rem 0 0;
  color: var(--pc-danger);
}

.pclar-cart .pclar-cart__link {
  font-weight: 600;
}

/* "My wallet" page (lot 2): boxes, filters, history. */
.pclar-account .pclar-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.pclar-account .pclar-box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
}

/* The balance, out of the boxes: what the customer can spend today comes first. Same card as the
   boxes, as wide as its content; it stands out by its size, not by a colour of its own. */
.pclar-account .pclar-balance {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0.75rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
}

.pclar-account .pclar-balance__label {
  color: var(--pc-text-muted);
  font-size: 0.9375rem;
}

.pclar-account .pclar-balance__value {
  color: var(--pc-text);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.pclar-account .pclar-box__label {
  color: var(--pc-text-muted);
  font-size: 0.875rem;
}

.pclar-account .pclar-box__value {
  color: var(--pc-text);
  font-size: 1.25rem;
}

.pclar-account .pclar-box__note {
  color: var(--pc-text-faint);
  font-size: 0.75rem;
}

/* Tooltip of the module: neither theme initialises Bootstrap's (R19). Hover and keyboard focus. */
.pclar-account .pclar-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: 0.25rem;
  padding: 0;
  border: 1px solid var(--pc-border-strong);
  border-radius: 50%;
  background: var(--pc-surface);
  color: var(--pc-text-muted);
  font-size: 0.75rem;
  line-height: 1;
  cursor: help;
}

.pclar-account .pclar-tip__text {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  z-index: 10;
  width: 16rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--pc-radius-sm);
  background: var(--pc-primary);
  box-shadow: var(--pc-shadow-pop);
  color: var(--pc-on-primary);
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%);
}

.pclar-account .pclar-tip:hover .pclar-tip__text,
.pclar-account .pclar-tip:focus-visible .pclar-tip__text {
  visibility: visible;
  opacity: 1;
}

.pclar-account .pclar-tip:focus-visible {
  outline: 2px solid var(--pc-focus-ring);
  outline-offset: 2px;
}

.pclar-account .pclar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin: 0 0 1rem;
}

.pclar-account .pclar-filters__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 9rem;
}

.pclar-account .pclar-filters__field label {
  margin: 0;
  color: var(--pc-text-muted);
  font-size: 0.875rem;
}

.pclar-account .pclar-filters__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.pclar-account .pclar-history__amount {
  text-align: right;
  white-space: nowrap;
}

.pclar-account .pclar-history__amount--minus {
  color: var(--pc-danger);
}

/* A credit (D77); an upcoming gain stays grey with its badge until it is available. */
.pclar-account .pclar-history__amount--plus {
  color: var(--pc-success);
}

.pclar-account .pclar-history__row--pending td {
  color: var(--pc-text-faint);
}

/* The amount and its mention stay together, on the right of a card on a phone (recette ESP-15). */
.pclar-account .pclar-history__value {
  white-space: nowrap;
}

.pclar-account .pclar-history__badge {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0 0.375rem;
  border-radius: var(--pc-radius-sm);
  background: var(--pc-surface-subtle);
  color: var(--pc-text-muted);
  font-size: 0.75rem;
}

.pclar-account .pclar-history__empty {
  color: var(--pc-text-muted);
}

.pclar-account .pclar-pager {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.pclar-account .pclar-pager__label {
  color: var(--pc-text-muted);
}

/* Narrow screens: each line of the history becomes a small card. */
@media (max-width: 575px) {
  .pclar-account .pclar-history thead {
    display: none;
  }

  .pclar-account .pclar-history tr {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pc-border);
  }

  .pclar-account .pclar-history td {
    display: flex;
    justify-content: space-between;
    padding: 0.125rem 0;
    border: 0;
    text-align: right;
  }

  .pclar-account .pclar-history td::before {
    content: attr(data-label);
    color: var(--pc-text-muted);
    text-align: left;
  }

  /* The tooltip spans its box: centred on an icon near the edge, it widened the page, even hidden. */
  .pclar-account .pclar-box {
    position: relative;
  }

  .pclar-account .pclar-tip {
    position: static;
  }

  .pclar-account .pclar-tip__text {
    right: 0;
    left: 0;
    width: auto;
    transform: none;
  }
}

/* Lot 3: the merchant's message, under the boxes, styled like them (no colour of its own). */
.pclar-account .pclar-account__message {
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  overflow-wrap: anywhere;
}

.pclar-account .pclar-account__message > :last-child {
  margin-bottom: 0;
}

.pclar-account .pclar-account__message img {
  max-width: 100%;
  height: auto;
}

/* Lot 3: what the order will earn, under the balance (spec §5.4). */
.pclar-cart .pclar-cart__gain {
  margin: 0 0 0.5rem;
  color: var(--pc-text-muted);
  font-size: 0.875rem;
}

/* Lot 4: tabs of the page (spec §10.1), links to ?tab=, and the Referral tab (§7.4). */
.pclar-account .pclar-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--pc-border);
}

.pclar-account .pclar-tabs__tab {
  margin-bottom: -1px;
  padding: 0.5rem 0.875rem;
  border-bottom: 2px solid transparent;
  color: var(--pc-text-muted);
  text-decoration: none;
}

.pclar-account .pclar-tabs__tab:hover {
  color: var(--pc-text);
  text-decoration: none;
}

.pclar-account .pclar-tabs__tab.is-active {
  border-bottom-color: var(--pc-primary);
  color: var(--pc-text);
  font-weight: 600;
}

.pclar-account .pclar-tabs__tab:focus-visible {
  outline: 2px solid var(--pc-focus-ring);
  outline-offset: 2px;
}

.pclar-account .pclar-referral__help {
  margin: 0 0 1rem;
  color: var(--pc-text-muted);
}

.pclar-account .pclar-referral__share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
}

/* classic aligns the labels of its forms to the right. */
.pclar-account .pclar-copy__label {
  display: block;
  margin: 0 0 0.25rem;
  text-align: left;
  color: var(--pc-text-muted);
  font-size: 0.875rem;
}

.pclar-account .pclar-copy__row {
  display: flex;
  gap: 0.5rem;
}

.pclar-account .pclar-copy__value {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--pc-surface-subtle);
}

.pclar-account .pclar-copy__value--code {
  font-weight: 600;
  letter-spacing: 0.08em;
}

.pclar-account .pclar-copy__button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.pclar-account .pclar-referral__title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
}

@media (max-width: 767px) {
  .pclar-account .pclar-referral__share {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Lot 5: the Affiliation tab (§8.2, §8.3), on the layout of the Referral tab. */
.pclar-account .pclar-affiliation__form {
  grid-template-columns: minmax(0, 1fr);
}

.pclar-account .pclar-affiliation__form + .pclar-referral__title,
.pclar-account .pclar-affiliation .pclar-history__empty + .pclar-referral__title {
  margin-top: 0.5rem;
}

.pclar-account .pclar-affiliation__error {
  margin: 0.375rem 0 0;
  color: var(--pc-danger);
  font-size: 0.875rem;
}

/* The code already chosen, locked until "Edit" (D76): the theme does not grey a read-only field. */
.pclar-account .pclar-affiliation__form input.form-control[readonly] {
  background-color: var(--pc-surface-subtle);
  color: var(--pc-text-muted);
  cursor: default;
}

/* "Edit": its own colours, classic has no outline button. */
.pclar-account a.btn.pclar-unlock {
  border: 1px solid var(--pc-border-strong);
  background: var(--pc-surface);
  color: var(--pc-text);
}

.pclar-account a.btn.pclar-unlock:hover,
.pclar-account a.btn.pclar-unlock:focus-visible {
  background: var(--pc-surface-subtle);
  color: var(--pc-text);
  text-decoration: none;
}

.pclar-account .pclar-affiliation__hint {
  margin: 0.25rem 0 0;
  color: var(--pc-text-faint);
  font-size: 0.8125rem;
}

/* Characters typed against the limit; the limit reached shows (recette AFF-07). */
.pclar-account .pclar-affiliation__count {
  margin-left: 0.375rem;
  font-variant-numeric: tabular-nums;
}

.pclar-account .pclar-affiliation__count.pclar-affiliation__count--full {
  color: var(--pc-warning);
  font-weight: 600;
}

.pclar-account .pclar-affiliation__own {
  margin: 0 0 1rem;
}