/* =============================================================================
 * SONOYA - nb-seller-identity.css
 * -----------------------------------------------------------------------------
 * ATOME canonique : ligne d'identite vendeur (D-030, 3e composant factorise).
 *
 * A NE PAS CONFONDRE avec nb-seller-card.css :
 *   - nb-seller        = CARTE vendeur pour la navigation (grille, hero, annuaire).
 *                        Ecrans 1, 5, 6.
 *   - nb-seller-identity = LIGNE d'identite inline, posee DANS un autre bloc :
 *                        en-tete de colis (panier, checkout 2 et 3, confirmation),
 *                        detail de commande, messagerie.
 *
 * Extrait de panier.css (.ct-parcel__seller*) le 2026-09-19 : le markup etait
 * enferme dans le scope du panier alors que le checkout, la confirmation et le
 * detail commande en ont exactement besoin.
 *
 * Rendu par templates/layout/components/seller-identity.php
 *   -> renderSellerIdentity($seller, $opts)
 *
 * Variantes :
 *   (defaut)   avatar 34px + nom + note        en-tete de colis
 *   --sm       avatar 26px, note masquee       listes denses, recapitulatifs
 *   --lg       avatar 44px                     confirmation de commande
 *
 * Conforme D-032 : aucune surface semi-transparente, la couleur reste un signal
 * (pastille de mode d'expedition uniquement).
 * ============================================================================= */

@layer components {

  .nb-seller-identity {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }

  /* ---------- Avatar : logo si dispo, sinon initiales ---------- */
  .nb-seller-identity__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--nb-radius-sm);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-family: var(--nb-font-heading);
    font-weight: var(--nb-fw-heavy);
    font-size: var(--nb-fs-2xs);
    overflow: hidden;
  }
  .nb-seller-identity__avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .nb-seller-identity__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .nb-seller-identity__name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  a.nb-seller-identity:hover .nb-seller-identity__name { color: var(--nb-color-accent); }

  .nb-seller-identity__check {
    color: var(--nb-color-info);
    flex-shrink: 0;
  }

  .nb-seller-identity__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--nb-fs-2xs);
    color: var(--nb-color-text-muted);
    font-variant-numeric: tabular-nums;

    & > i { color: var(--nb-color-star); }
  }

  /* ---------- Variante compacte ---------- */
  .nb-seller-identity--sm .nb-seller-identity__avatar {
    width: 26px;
    height: 26px;
  }
  .nb-seller-identity--sm .nb-seller-identity__name { font-size: var(--nb-fs-xs); }
  .nb-seller-identity--sm .nb-seller-identity__rating { display: none; }

  /* ---------- Variante large (confirmation de commande) ---------- */
  .nb-seller-identity--lg .nb-seller-identity__avatar {
    width: 44px;
    height: 44px;
    font-size: var(--nb-fs-xs);
    border-radius: var(--nb-radius-md);
  }
  .nb-seller-identity--lg .nb-seller-identity__name { font-size: var(--nb-fs-base); }


  /* ===============================================
   * PASTILLE DE MODE D'EXPEDITION
   * Vendeur en propre ou hub Sonoya (D-005). Suit la
   * ligne d'identite partout ou un colis est affiche.
   * =============================================== */
  .nb-fulfillment-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px var(--nb-space-2);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-pill);
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-muted);
    white-space: nowrap;
  }
  .nb-fulfillment-tag--hub {
    background: var(--nb-color-info-soft);
    border-color: color-mix(in oklch, var(--nb-color-info) 45%, var(--nb-color-surface));
    color: var(--nb-color-info-hover);
  }

}