/**
 * fixeo-artisan-card-premium-v1.css — facp-v1a
 * FIXEO Premium Artisan Card Experience
 *
 * Namespace: .facp-* (new elements) — overrides only on existing classes
 * Load position: AFTER artisan-card-conversion-v1.css — wins all cascade battles
 * Selector strategy: uses !important only where inline styles force it
 *
 * ZERO JS CHANGES — CSS-only.
 * ZERO data-attribute changes.
 * ALL existing classes preserved. ALL button hooks preserved.
 *
 * Hierarchy rebuilt:
 *   1. Avatar — 88px, elegant border, soft glow
 *   2. Name — largest text, bold
 *   3. Profession + location — below name
 *   4. Availability badge — green, clean
 *   5. Trust row — 3 verified signals, small
 *   6. Price — dominant anchor
 *   7. CTA — full-width reserve, smaller profile link below
 *   8. Secondary badges — reduced dominance
 *   9. Spacing — luxurious breathing room
 *
 * TRUTH POLICY:
 *   - pvc-fomo "23 réservations" — already display:none, stays hidden
 *   - pvc-trust-line: "Profil vérifié · Paiement après intervention" — verified truths
 *   - rating row: real data from Supabase — preserved
 *   - No fake counters, no fake stars, no fake ETA
 *
 * Version: facp-v1b — 2026-07-12 (Phase 10.1 QA polish)
 */

/* ═══════════════════════════════════════════════════════════
   CARD CONTAINER
   Override inline styles with !important — inline styles
   are set by JS directly on the element.
══════════════════════════════════════════════════════════ */

.artisan-card.other-card.result-card {
  /* Layout */
  display: flex !important;
  flex-direction: column !important;

  /* Glass surface — aligned with design system */
  background:
    linear-gradient(160deg,
      rgba(255,255,255,.055) 0%,
      rgba(255,255,255,.022) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 32px rgba(0,0,0,.26),
    0 2px 8px  rgba(0,0,0,.14) !important;

  /* Premium breathing room */
  padding: 22px 20px 18px !important;
  gap: 0 !important;

  /* Hover — handled by CSS, not inline JS */
  transform: translateY(0) !important;
  transition:
    transform .20s cubic-bezier(0.22,1,0.36,1),
    box-shadow .20s ease,
    border-color .20s ease !important;

  position: relative !important;
  overflow: hidden !important;
}

/* Override JS onmouseenter/onmouseleave with CSS hover */
.artisan-card.other-card.result-card:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 44px rgba(0,0,0,.32),
    0 0 0 1px rgba(72, 100, 255, .18),
    0 4px 12px rgba(0,0,0,.18) !important;
  border-color: rgba(72, 100, 255, .22) !important;
}

/* Top accent line — subtle, like other cards */
.artisan-card.other-card.result-card::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(72,  100, 255, .30),
    rgba(131,  58, 180, .22),
    transparent
  );
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   RESULT-TOP ROW
   Avatar on the left, identity on the right.
   Avatar: 88px (was 56px inline).
══════════════════════════════════════════════════════════ */

.artisan-card.other-card.result-card .result-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

/* ═══════════════════════════════════════════════════════════
   AVATAR — SIGNAL 1: Large. Rounded. Elegant.
   Overrides inline width:56px / height:56px with !important.
══════════════════════════════════════════════════════════ */

.artisan-card.other-card.result-card .artisan-avatar {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  border-radius: 16px !important;  /* premium rounded-square, not full circle */
  flex-shrink: 0 !important;
  object-fit: cover !important;

  /* Elegant border + glow */
  border: 1.5px solid rgba(255, 255, 255, .14) !important;
  box-shadow:
    0 0 0 1px rgba(72, 100, 255, .10),
    0 8px 24px rgba(0,0,0,.28),
    0 2px 6px  rgba(0,0,0,.16) !important;

  /* Premium avatar glow on hover */
  transition: box-shadow .20s ease, border-color .20s ease !important;
}

.artisan-card.other-card.result-card:hover .artisan-avatar {
  border-color: rgba(72, 100, 255, .24) !important;
  box-shadow:
    0 0 0 1px rgba(72, 100, 255, .18),
    0 10px 28px rgba(0,0,0,.32),
    0 0 16px rgba(72, 100, 255, .08) !important;
}

/* Avatar with real photo */
.artisan-card.other-card.result-card .artisan-avatar-image {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
}

/* Avatar initials fallback — inherit size, use design system gradient */
.artisan-card.other-card.result-card .artisan-av-initials {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  border-radius: 16px !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  /* Indigo-violet gradient — intentional, not generic */
  background: linear-gradient(145deg,
    rgba(72,100,255,.28) 0%,
    rgba(131,58,180,.22) 50%,
    rgba(72,100,255,.18) 100%) !important;
  border: 1.5px solid rgba(72, 100, 255, .22) !important;
  color: rgba(255,255,255,.90) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hero category avatar (fx-hero-card-img) — same size treatment */
.artisan-card.other-card.result-card .fx-hero-card-img {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
}

/* ═══════════════════════════════════════════════════════════
   IDENTITY BLOCK — right of avatar
   Name → Profession · City → Availability
══════════════════════════════════════════════════════════ */

.artisan-card.other-card.result-card .artisan-main {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Price+name row — rearranged: name block takes full width above price */
.artisan-card.other-card.result-card .artisan-card-heading > div:first-child {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;  /* override inline space-between — no gap in column mode */
  gap: 6px !important;
}

/* SIGNAL 2: Name — largest text, bold, immediately readable */
.artisan-card.other-card.result-card .artisan-name {
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  letter-spacing: -.022em !important;
  line-height: 1.18 !important;
  color: rgba(255,255,255,.97) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* SIGNAL 3: Profession + location — below name, secondary */
.artisan-card.other-card.result-card .artisan-service {
  font-size: .82rem !important;
  color: rgba(255,255,255,.52) !important;
  margin: 4px 0 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.artisan-card.other-card.result-card .artisan-service span:first-child {
  color: rgba(255,255,255,.76) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   PRICE — SIGNAL 7: Dominant visual anchor
   Now pulled OUT of the inline flex row and placed standalone.
   We restyle the inline price container directly.
══════════════════════════════════════════════════════════ */

/* The price div sits inside the flex row — we target it by its alignment style */
.artisan-card.other-card.result-card .artisan-card-heading > div:first-child > div:last-child {
  align-items: flex-start !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Price number — make it the strongest visual anchor */
.artisan-card.other-card.result-card .artisan-card-heading > div:first-child > div:last-child > span:first-child {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  color: rgba(255,255,255,.97) !important;
  line-height: 1 !important;
}

/* "À partir de" label */
.artisan-card.other-card.result-card .artisan-card-heading > div:first-child > div:last-child > span:last-child {
  font-size: .66rem !important;
  color: rgba(255,255,255,.38) !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

/* ═══════════════════════════════════════════════════════════
   SIGNAL 4 + 5: BADGES — Availability + Verified
   Availability: green, cleaner.
   Verified: subtle, not dominant.
   Both: reduced visual weight vs current.
══════════════════════════════════════════════════════════ */

.artisan-card.other-card.result-card .artisan-badges,
.artisan-card.other-card.result-card .badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 10px !important;
  align-items: center !important;
}

/* All badges — base reset */
.artisan-card.other-card.result-card .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

/* Verified badge — teal, premium */
.artisan-card.other-card.result-card .badge.verified {
  background: rgba(32, 201, 151, .12) !important;
  border: 1px solid rgba(32, 201, 151, .24) !important;
  color: rgba(32, 201, 151, .90) !important;
}

/* SIGNAL 4: Available badge — green, clean */
.artisan-card.other-card.result-card .badge.available {
  background: rgba(32, 201, 151, .10) !important;
  border: 1px solid rgba(32, 201, 151, .20) !important;
  color: rgba(32, 201, 151, .88) !important;
  font-weight: 700 !important;
}

/* New artisan badge */
.artisan-card.other-card.result-card .badge.new {
  background: rgba(72, 100, 255, .10) !important;
  border: 1px solid rgba(72, 100, 255, .20) !important;
  color: rgba(140, 160, 255, .88) !important;
}

/* Top artisan badge */
.artisan-card.other-card.result-card .badge[style*="a855f7"] {
  font-size: .63rem !important;
  opacity: .80 !important;
}

/* Pending badge */
.artisan-card.other-card.result-card .badge.pending {
  background: rgba(255, 165, 40, .10) !important;
  border: 1px solid rgba(255, 165, 40, .20) !important;
  color: rgba(255, 185, 80, .88) !important;
  font-size: .62rem !important;
}

/* ═══════════════════════════════════════════════════════════
   RATING ROW
   Real data only. Cleaned visual.
══════════════════════════════════════════════════════════ */

.artisan-card.other-card.result-card .artisan-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  margin-bottom: 12px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.036) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  flex-wrap: wrap !important;
}

/* Rating number — real data, warm gold */
.artisan-card.other-card.result-card .artisan-rating-row > span:first-child {
  font-weight: 800 !important;
  font-size: .84rem !important;
  color: #ffd166 !important;
}

/* Review count */
.artisan-card.other-card.result-card .artisan-rating-row > span:nth-child(2) {
  color: rgba(255,255,255,.65) !important;
  font-size: .80rem !important;
  font-weight: 600 !important;
}

/* Response time — subtle, secondary */
.artisan-card.other-card.result-card .artisan-rating-row > span:last-child {
  margin-left: auto !important;
  font-size: .72rem !important;
  color: rgba(255,255,255,.38) !important;
}

/* ═══════════════════════════════════════════════════════════
   SIGNAL 5: TRUST ROW — pvc-trust-line
   "Profil vérifié · Paiement après intervention"
   Verified truth — preserved and upgraded.
══════════════════════════════════════════════════════════ */

.artisan-card.other-card.result-card .pvc-trust-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: .71rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.55) !important;
  letter-spacing: .01em !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  opacity: 1 !important;
  line-height: 1.4 !important;
}

/* ═══════════════════════════════════════════════════════════
   FOMO LINE — keep hidden (already display:none in conversion-v1)
   Fake "23 réservations" — permanently suppressed.
══════════════════════════════════════════════════════════ */

.artisan-card.other-card.result-card .pvc-fomo {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   SKILL CHIPS — SIGNAL 8 (secondary)
   Smaller, less saturated, support role only.
══════════════════════════════════════════════════════════ */

.artisan-card.other-card.result-card .artisan-skills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-bottom: 14px !important;
  margin-top: 0 !important;
}

/* Primary chip (category) */
.artisan-card.other-card.result-card .artisan-skills span:first-child {
  padding: 4px 11px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: rgba(72, 100, 255, .10) !important;
  border: 1px solid rgba(72, 100, 255, .18) !important;
  color: rgba(140, 160, 255, .90) !important;
}

/* Secondary chips (skills) */
.artisan-card.other-card.result-card .artisan-skills span:not(:first-child) {
  padding: 4px 10px !important;
  font-size: .69rem !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.50) !important;
}

/* ═══════════════════════════════════════════════════════════
   CTAs — SIGNAL 7
   Reserve: full-width, premium gradient.
   Profile: smaller secondary link below.
══════════════════════════════════════════════════════════ */

.artisan-card.other-card.result-card .result-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 14px !important;
  align-items: stretch !important;
}

/* Inner CTA wrapper — override the inline justify-content:flex-end */
.artisan-card.other-card.result-card .result-actions > div:first-child {
  display: flex !important;
  flex-direction: column-reverse !important;  /* Reserve on top, profile below */
  gap: 8px !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;  /* override inline flex-end — no dead space above buttons */
}

/* SIGNAL 7A: Reserve button — full-width, premium, large */
.artisan-card.other-card.result-card .fhp-btn-reserve-list {
  display: block !important;
  width: 100% !important;
  min-width: unset !important;
  padding: 13px 20px !important;
  font-size: .90rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #E1306C 0%, #833AB4 55%, #405DE6 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(225, 48, 108, .24) !important;
  transition: box-shadow .18s ease, transform .14s cubic-bezier(0.22,1,0.36,1) !important;
  cursor: pointer !important;
  text-align: center !important;

  /* Override JS onmouseenter */
  transform: none !important;
}

.artisan-card.other-card.result-card .fhp-btn-reserve-list:hover {
  box-shadow: 0 6px 24px rgba(225, 48, 108, .38) !important;
  transform: translateY(-1px) !important;
}

.artisan-card.other-card.result-card .fhp-btn-reserve-list:active {
  transform: scale(.98) !important;
  transition: transform .06s !important;
}

.artisan-card.other-card.result-card .fhp-btn-reserve-list:focus-visible {
  outline: 2px solid rgba(255,255,255,.72) !important;
  outline-offset: 2px !important;
}

/* SIGNAL 7B: Profile link — secondary, text-like */
.artisan-card.other-card.result-card .ssb2-btn-profile {
  display: block !important;
  width: 100% !important;
  min-width: unset !important;
  padding: 9px 16px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: rgba(255,255,255,.60) !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .15s, color .15s, border-color .15s !important;
  box-shadow: none !important;
}

.artisan-card.other-card.result-card .ssb2-btn-profile:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.artisan-card.other-card.result-card .ssb2-btn-profile:focus-visible {
  outline: 2px solid rgba(255,255,255,.40) !important;
  outline-offset: 2px !important;
}

/* SIGNAL 9: Under-CTA trust text */
.artisan-card.other-card.result-card .pvc-under-cta {
  font-size: .65rem !important;
  color: rgba(255,255,255,.28) !important;
  text-align: center !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   CARD GRID — #artisans-container
   Spacing between cards.
══════════════════════════════════════════════════════════ */

#artisans-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

@media (min-width: 640px) {
  #artisans-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}

@media (min-width: 1024px) {
  #artisans-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — 375px / 390px / 430px
   Primary target.
══════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .artisan-card.other-card.result-card {
    padding: 18px 16px 16px !important;
  }

  .artisan-card.other-card.result-card .result-top {
    gap: 14px !important;
    margin-bottom: 14px !important;
  }

  /* Avatar: 80px on mobile — still significantly larger than 56px */
  .artisan-card.other-card.result-card .artisan-avatar,
  .artisan-card.other-card.result-card .artisan-avatar-image,
  .artisan-card.other-card.result-card .artisan-av-initials,
  .artisan-card.other-card.result-card .fx-hero-card-img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
  }

  .artisan-card.other-card.result-card .artisan-name {
    font-size: 1.02rem !important;
  }

  .artisan-card.other-card.result-card .fhp-btn-reserve-list {
    padding: 12px 16px !important;
    font-size: .86rem !important;
  }

  .artisan-card.other-card.result-card .artisan-rating-row {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
}

@media (max-width: 374px) {
  .artisan-card.other-card.result-card .artisan-avatar,
  .artisan-card.other-card.result-card .artisan-avatar-image,
  .artisan-card.other-card.result-card .artisan-av-initials,
  .artisan-card.other-card.result-card .fx-hero-card-img {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP ≥1024px
   More horizontal spacing, same visual language.
══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .artisan-card.other-card.result-card {
    padding: 24px 22px 20px !important;
  }

  .artisan-card.other-card.result-card .result-top {
    gap: 18px !important;
    margin-bottom: 18px !important;
  }
}

@media (min-width: 1280px) {
  .artisan-card.other-card.result-card .artisan-name {
    font-size: 1.10rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   REVEAL ANIMATION — when new cards are appended via otherSeeMore()
   (uses existing .other-card--reveal class from JS)
══════════════════════════════════════════════════════════ */

.other-card--reveal.artisan-card.other-card.result-card {
  animation: facp-card-reveal .40s cubic-bezier(0.22,1,0.36,1) both !important;
}

@keyframes facp-card-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .artisan-card.other-card.result-card,
  .artisan-card.other-card.result-card .artisan-avatar,
  .artisan-card.other-card.result-card .fhp-btn-reserve-list,
  .artisan-card.other-card.result-card .ssb2-btn-profile {
    transition: none !important;
  }

  .other-card--reveal.artisan-card.other-card.result-card {
    animation: none !important;
  }
}

/* version: facp-v1b */