/* ============================================================
 * Smile · Account page components (Claude Design canon)
 * Spec: design_handoff_smile_v2/COMPONENTS.md + ACCOUNT_SPEC.md
 *      design_handoff_smile_prestashop/04_source_components/pages-account.jsx
 *
 * Components covered:
 *   - .smile-address-card (mi-cuenta direcciones + checkout)
 *   - .smile-order-row (historial pedidos + order detail)
 *   - .smile-order-summary (checkout summary refinado)
 *   - .smile-status-pill (estado pedido: pending, paid, shipped, delivered, canceled)
 *   - .smile-avatar (dashboard customer)
 *
 * Aliases para markup PrestaShop legacy:
 *   - article.address.address-item → .smile-address-card
 *   - .order, table.history → .smile-order-row
 *   - .order-summary-line → .smile-order-summary
 * ============================================================ */

/* ============================================================
 * ADDRESS-CARD
 * Markup canon:
 *   <article class="smile-address-card">
 *     <header><h4 class="smile-address-card__alias">Mi Dirección</h4>
 *       <span class="smile-address-card__badge">Predeterminada</span>
 *     </header>
 *     <address>...</address>
 *     <footer class="smile-address-card__actions">
 *       <a class="smile-link">Modificar</a><a class="smile-link">Eliminar</a>
 *     </footer>
 *   </article>
 * ============================================================ */
.smile-address-card,
body article.address,
body .address-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 20px !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--line, #E8DFD6) !important;
  border-radius: var(--r-lg, 16px) !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}
.smile-address-card:hover,
body article.address:hover,
body .address-item:hover {
  border-color: var(--ink-2, #6B6360);
}
.smile-address-card.is-selected,
body article.address.selected,
body .address-item.selected,
body article.address:has(input:checked),
body .address-item:has(input:checked) {
  border-color: var(--ink, #2B2826) !important;
  background: var(--surface-2, #FAF7F2) !important;
}

.smile-address-card header,
body article.address header,
body article.address > .h4,
body .address-item header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.smile-address-card__alias,
body .address-alias,
body article.address .h4 {
  font-family: var(--f-display, Playfair Display, serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--ink, #2B2826) !important;
  margin: 0 !important;
}

.smile-address-card__badge,
body article.address .badge {
  font-family: var(--f-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--burgundy, #6B2C2C) !important;
  background: var(--rose, #E8C5C5) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

.smile-address-card address,
body article.address address,
body article.address .address {
  font-style: normal !important;
  font-family: var(--f-body) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--ink-2, #6B6360) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.smile-address-card hr,
body article.address hr {
  border: 0 !important;
  border-top: 1px solid var(--line-2, #F0E8DE) !important;
  margin: 4px 0 !important;
}

.smile-address-card__actions,
body article.address footer,
body article.address .address-footer {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.smile-address-card__actions a,
body article.address footer a,
body article.address .address-footer a,
body article.address .edit-address,
body article.address .delete-address {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--f-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-2, #6B6360) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
  padding: 0 !important;
  margin: 0 !important;
}
.smile-address-card__actions a:hover,
body article.address footer a:hover {
  color: var(--burgundy, #6B2C2C) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.smile-address-card__actions a .material-icons,
body article.address footer a .material-icons {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
}

/* ============================================================
 * ORDER-ROW (historial + order detail)
 * Markup canon:
 *   <article class="smile-order-row">
 *     <div class="smile-order-row__head">
 *       <span class="smile-order-row__ref">#REF-001</span>
 *       <span class="smile-order-row__date">12 Mar 2026</span>
 *       <span class="smile-status-pill smile-status-pill--shipped">Enviado</span>
 *     </div>
 *     <div class="smile-order-row__body">...</div>
 *     <footer class="smile-order-row__foot">
 *       <span class="smile-order-row__total">$340</span>
 *       <a class="smile-link">Ver detalle</a>
 *     </footer>
 *   </article>
 * ============================================================ */
.smile-order-row,
body .order-list .order,
body table.order-row,
body tr.order {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--line, #E8DFD6) !important;
  border-radius: var(--r-lg, 12px) !important;
  margin: 0 0 10px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.smile-order-row:hover,
body .order-list .order:hover {
  border-color: var(--ink-2, #6B6360);
  box-shadow: 0 4px 12px -6px rgba(43, 40, 38, 0.08);
}

.smile-order-row__head {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.smile-order-row__ref {
  font-family: var(--f-body, Inter) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink, #2B2826) !important;
  font-variant-numeric: tabular-nums !important;
}
.smile-order-row__date {
  font-size: 12px !important;
  color: var(--ink-2, #6B6360) !important;
  margin-left: auto !important;
}
.smile-order-row__total {
  font-family: var(--f-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink, #2B2826) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Tablas legacy de pedidos en mi-cuenta */
body table.table.table-bordered.table-labeled,
body .order-list table {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}
body table.table.table-bordered.table-labeled th {
  font-family: var(--f-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ink-3, #9A928B) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 16px 8px !important;
  text-align: left !important;
}
body table.table.table-bordered.table-labeled td {
  background: var(--surface, #fff) !important;
  border: 1px solid var(--line, #E8DFD6) !important;
  border-right: 0 !important;
  border-left: 0 !important;
  padding: 16px !important;
  font-size: 13px !important;
  color: var(--ink-2, #6B6360) !important;
  vertical-align: middle !important;
}
body table.table.table-bordered.table-labeled td:first-child {
  border-left: 1px solid var(--line, #E8DFD6) !important;
  border-radius: 12px 0 0 12px !important;
}
body table.table.table-bordered.table-labeled td:last-child {
  border-right: 1px solid var(--line, #E8DFD6) !important;
  border-radius: 0 12px 12px 0 !important;
}

/* ============================================================
 * STATUS-PILL
 * Markup: <span class="smile-status-pill smile-status-pill--paid">Pagado</span>
 * Variants: pending, paid, processing, shipped, delivered, canceled, refunded
 * ============================================================ */
.smile-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-family: var(--f-body, Inter) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  background: var(--surface-2, #FAF7F2) !important;
  color: var(--ink, #2B2826) !important;
  border: 1px solid var(--line, #E8DFD6) !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
.smile-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.smile-status-pill--pending { background: #FFF8E5 !important; color: #8a6914 !important; border-color: #F5E6A8 !important; }
.smile-status-pill--paid { background: #E8F0E5 !important; color: #2E5C3F !important; border-color: #C5DCC0 !important; }
.smile-status-pill--processing { background: #E8EAF2 !important; color: #364080 !important; border-color: #C5CCE2 !important; }
.smile-status-pill--shipped { background: var(--rose, #E8C5C5) !important; color: var(--burgundy, #6B2C2C) !important; border-color: var(--rose-deep, #D4A5A5) !important; }
.smile-status-pill--delivered { background: #E8F0E5 !important; color: #2E5C3F !important; border-color: #C5DCC0 !important; }
.smile-status-pill--canceled { background: #F5E0DE !important; color: #8a3232 !important; border-color: #E8C5C5 !important; }
.smile-status-pill--refunded { background: var(--surface-2, #FAF7F2) !important; color: var(--ink-2, #6B6360) !important; }

/* Aliasar PS classes para que tomen el pill style */
.label-pill,
.order-actions .label,
.label.bright {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-family: var(--f-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  background: var(--surface-2, #FAF7F2) !important;
  color: var(--ink, #2B2826) !important;
  border: 1px solid var(--line, #E8DFD6) !important;
  text-transform: none !important;
}

/* ============================================================
 * ORDER-SUMMARY (refinado para checkout + order detail)
 * Markup PS legacy: .cart-summary-line con .label + .value
 * ============================================================ */
.smile-order-summary,
body .cart-summary-totals-container,
body .card-block.cart-summary-subtotals-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px 20px !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--line, #E8DFD6) !important;
  border-radius: var(--r-lg, 12px) !important;
  margin: 0 !important;
}
.smile-order-summary__line,
body .cart-summary-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  font-family: var(--f-body) !important;
  font-size: 13px !important;
  color: var(--ink-2, #6B6360) !important;
  margin: 0 !important;
}
.smile-order-summary__line .label,
.smile-order-summary__line > span:first-child,
body .cart-summary-line .label,
body .cart-summary-line > span:first-child {
  color: var(--ink-2, #6B6360) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  text-transform: none !important;
}
.smile-order-summary__line .value,
.smile-order-summary__line > span:last-child,
body .cart-summary-line .value,
body .cart-summary-line > span:last-child {
  color: var(--ink, #2B2826) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
}
.smile-order-summary__line.is-total,
body .cart-summary-line.cart-total {
  border-top: 1px solid var(--line, #E8DFD6) !important;
  padding-top: 12px !important;
  margin-top: 8px !important;
  font-size: 15px !important;
}
.smile-order-summary__line.is-total .label,
.smile-order-summary__line.is-total > span:first-child,
body .cart-summary-line.cart-total .label,
body .cart-summary-line.cart-total > span:first-child {
  font-weight: 600 !important;
  color: var(--ink, #2B2826) !important;
  font-size: 14px !important;
}
.smile-order-summary__line.is-total .value,
body .cart-summary-line.cart-total .value {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink, #2B2826) !important;
}
.smile-order-summary__line.is-discount .value,
body .cart-summary-line.cart-summary-line.cart-summary-line-discount .value { color: var(--burgundy, #6B2C2C) !important; }

/* ============================================================
 * AVATAR
 * Markup: <div class="smile-avatar" data-initial="K">K</div>
 * O con imagen: <div class="smile-avatar"><img src="..."></div>
 * ============================================================ */
.smile-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--rose, #E8C5C5) !important;
  color: var(--burgundy, #6B2C2C) !important;
  font-family: var(--f-display, Playfair Display, serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  text-transform: uppercase !important;
}
.smile-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.smile-avatar--sm { width: 32px !important; height: 32px !important; font-size: 14px !important; }
.smile-avatar--lg { width: 64px !important; height: 64px !important; font-size: 24px !important; }
.smile-avatar--xl { width: 96px !important; height: 96px !important; font-size: 36px !important; }

/* ============================================================
 * Mi-cuenta links (Bootstrap legacy override)
 * .my-account-page .links / .col-lg-4
 * ============================================================ */
body#my-account .links,
body#my-account .my-account-links {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 !important;
}
body#my-account .links li,
body#my-account .my-account-links li {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
body#my-account .links a,
body#my-account .my-account-links a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--line, #E8DFD6) !important;
  border-radius: var(--r-lg, 12px) !important;
  color: var(--ink, #2B2826) !important;
  text-decoration: none !important;
  font-family: var(--f-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: border-color 0.15s, transform 0.15s !important;
}
body#my-account .links a:hover,
body#my-account .my-account-links a:hover {
  border-color: var(--ink, #2B2826) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
  color: var(--ink, #2B2826) !important;
}
body#my-account .links a .material-icons,
body#my-account .links a i {
  width: 24px !important;
  height: 24px !important;
  font-size: 22px !important;
  color: var(--burgundy, #6B2C2C) !important;
}

/* Page title generic */
body#my-account h1.page-heading,
body#history h1.page-heading,
body#addresses h1.page-heading,
body#address h1.page-heading {
  font-family: var(--f-display, Playfair Display, serif) !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink, #2B2826) !important;
  margin: 0 0 24px !important;
  text-transform: none !important;
}