/*
 * fixeo-profile-v1jb.css — V1-JB Mobile Profile Conversion & Trust Polish
 * Version: v1jb
 * Append-only. No overrides of P1/P2/P3/V1-H/V1-J/V1-TC rules.
 * Loaded on: artisan-profile.html only
 *
 * Contains:
 *  1. Premium typographic avatar (initials, gradient, glassmorphism)
 *  2. Sticky CTA hidden-until-scroll
 *  3. "Indicateurs de confiance" threshold hide
 *  4. Modal spacing + breathing room
 *  5. Estimation block emphasis
 *  6. Mobile guards 390/360/320px
 */

/* ════════════════════════════════════════════════════════════
   1. PREMIUM TYPOGRAPHIC AVATAR
   Replaces the generic user silhouette with initials avatar.
   Applied via JS: .fpv1jb-initials-avatar class on .public-avatar-fallback
   ════════════════════════════════════════════════════════════ */

.fpv1jb-initials-avatar {
  /* Reset V2C silhouette system (which sets font-size:0 to hide initials text) */
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.92) !important;
  border-radius: 50% !important;       /* circular, not square */
  width: 104px;
  height: 104px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  overflow: hidden;
  /* Soft glassmorphism border */
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.30),
    0 0 0 4px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  /* gradient set via inline style by JS (per-artisan derived from name hash) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Remove pseudo-element silhouette for initials-avatar */
.fpv1jb-initials-avatar::before,
.fpv1jb-initials-avatar::after {
  content: none !important;
  display: none !important;
}

/* Subtle inner shine */
.fpv1jb-initials-avatar::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
  border-radius: 50%;
}

/* ════════════════════════════════════════════════════════════
   2. STICKY CTA — HIDDEN UNTIL HERO SCROLLS PAST VIEWPORT
   .ppui-sticky-cta--v2a is initially hidden via JS transform/opacity.
   This CSS provides the animation + initial state.
   ════════════════════════════════════════════════════════════ */

/* Initial hidden state — overrides the display:none from v2a.css */
@media (max-width: 767px) {
  .ppui-sticky-cta--v2a {
    /* Transform approach: avoids layout shift (display:none → block causes reflow) */
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
      transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity 0.22s ease !important;
  }

  .ppui-sticky-cta--v2a.fpv1jb-sticky-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════
   3. TRUST INDICATORS — hide when profile is sparse
   JS adds .fpv1jb-trust-hidden to .ppui-trust-grid--v2a
   when missions < 3 AND confirmations < 2
   ════════════════════════════════════════════════════════════ */

.fpv1jb-trust-hidden {
  display: none !important;
}

/* Hide the section title when section is hidden */
.fpv1jb-trust-hidden ~ .ppui-section-label,
.ppui-section-label:has(+ .fpv1jb-trust-hidden),
.ppui-trust-section-title:has(+ .fpv1jb-trust-hidden) {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   4. ESTIMATION FIXEO BLOCK — premium emphasis
   The estimation block (#res-tarif-estime / .fixeo-res-price-info)
   gets upgraded visual treatment:
   - slightly more prominent card
   - cleaner MAD amount rendering
   - better spacing in normal (non-urgent) mode
   ════════════════════════════════════════════════════════════ */

.fixeo-res-price-info {
  /* Upgrade from basic grey to a calmer card with softer glow */
  background: rgba(32,201,151,0.06) !important;
  border: 1px solid rgba(32,201,151,0.16) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin: 10px 0 !important;
  font-size: 0.83rem !important;
  color: rgba(255,255,255,0.62) !important;
  line-height: 1.55 !important;
}
.fixeo-res-price-info strong {
  color: rgba(255,255,255,0.88) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}
/* Subtle glow on the estimated price */
.fixeo-res-price-info em {
  font-style: normal !important;
  color: rgba(255,255,255,0.72) !important;
}

/* ════════════════════════════════════════════════════════════
   5. BOOKING MODAL POLISH — breathing room + form rhythm
   ════════════════════════════════════════════════════════════ */

/* More breathing room between fields */
.fixeo-res-field {
  margin-bottom: 14px !important;
}
.fixeo-res-field:last-of-type {
  margin-bottom: 0 !important;
}

/* Input: consistent height, readable on 320px */
.fixeo-res-input,
.fixeo-res-textarea {
  font-size: 0.92rem !important;
  padding: 11px 14px !important;
  border-radius: 11px !important;
}

/* Label: slightly more weight */
.fixeo-res-label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  color: rgba(255,255,255,0.72) !important;
}

/* Primary CTA button: more prominent */
.fixeo-res-btn-primary {
  font-size: 0.96rem !important;
  height: 50px !important;
  border-radius: 14px !important;
  letter-spacing: 0.01em !important;
}

/* ════════════════════════════════════════════════════════════
   6. EMPTY REVIEW STATE — upgraded text
   Applied via JS: .fpv1jb-review-empty-upgraded replaces
   "Aucun avis pour le moment" with operational framing.
   ════════════════════════════════════════════════════════════ */

.fpv1jb-review-state-text {
  font-style: italic;
  color: rgba(255,255,255,0.40);
  font-size: 0.80rem;
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════
   7. MOBILE GUARDS — 390 / 360 / 320px
   ════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .fpv1jb-initials-avatar {
    width: 90px !important;
    height: 90px !important;
    font-size: 1.55rem !important;
  }
  .fixeo-res-field { margin-bottom: 12px !important; }
  .fixeo-res-input { font-size: 0.88rem !important; padding: 10px 12px !important; }
  .fixeo-res-btn-primary { font-size: 0.90rem !important; height: 48px !important; }
  .fixeo-res-price-info { padding: 10px 12px !important; font-size: 0.80rem !important; }
}

@media (max-width: 360px) {
  .fpv1jb-initials-avatar {
    width: 82px !important;
    height: 82px !important;
    font-size: 1.4rem !important;
  }
  .fixeo-res-input { font-size: 0.85rem !important; padding: 9px 11px !important; }
  .fixeo-res-btn-primary { font-size: 0.86rem !important; height: 46px !important; }
  .ppui-sticky-cta--v2a .ppui-sticky-cta-btn { font-size: 0.82rem !important; }
  .ppui-sticky-wa-btn { font-size: 0.68rem !important; padding: 10px 9px !important; }
}

@media (max-width: 320px) {
  .fpv1jb-initials-avatar {
    width: 74px !important;
    height: 74px !important;
    font-size: 1.25rem !important;
  }
  .fixeo-res-input { font-size: 0.82rem !important; }
  .fixeo-res-btn-primary { font-size: 0.82rem !important; height: 44px !important; }
  /* Prevent stacked compression in sticky */
  .ppui-sticky-cta--v2a {
    grid-template-columns: 1fr !important;
  }
  .ppui-sticky-wa-btn { display: none !important; } /* too narrow for two buttons */
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ppui-sticky-cta--v2a {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   V1-JC ADDITIONS — Trust Coherence + Real Avatar Alignment
   Version: v1jc (appended to v1jb file)
   ════════════════════════════════════════════════════════════ */

/* ── A. Operational confidence panel (sparse artisan, no zeros) ──
   Replaces 0%/0%/0 trust grid with 4 operational cards.
   Same visual density, same card count, same layout rhythm.
   ─────────────────────────────────────────────────────────── */

.ppui-trust-grid--operational .ppui-trust-item--op {
  /* Slightly warmer tint vs qualified item — signals "in progress" not "empty" */
  border-color: rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.024) !important;
}

.ppui-trust-grid--operational .ppui-trust-icon {
  /* Larger icon for information-dense items (longer labels) */
  font-size: 1.1rem !important;
  min-width: 1.5rem;
  text-align: center;
}

.ppui-trust-grid--operational .ppui-trust-text strong {
  /* Slightly lower opacity — informational, not proof-of-achievement */
  color: rgba(255,255,255,0.78) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
}

.ppui-trust-grid--operational .ppui-trust-text span {
  color: rgba(255,255,255,0.38) !important;
  font-size: 0.70rem !important;
}

/* ── B. Modal coordination chips (when no stars earned) ──
   .fxrva-coord-chips appears in .fixeo-res-artisan-row area
   when rating/review threshold not met.
   Shows: 💳 Paiement après intervention · 💬 Coordination Fixeo
   ─────────────────────────────────────────────────────────── */

.fxrva-coord-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.fxrva-coord-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(32,201,151,0.06);
  border: 1px solid rgba(32,201,151,0.14);
  font-size: 0.69rem;
  font-weight: 500;
  color: rgba(255,255,255,0.62);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ── C. Modal rating row when qualified (stars present) ──
   When trust gates pass, ensure stars render cleanly.
   ─────────────────────────────────────────────────────────── */

.fixeo-res-artisan-row:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.fixeo-res-stars {
  color: #FBBF24;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.fixeo-res-rating {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.80);
}

.fixeo-res-reviews {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.45);
}

/* ── D. WhatsApp button: premium muted emerald (Priority 5) ──
   Reduces harsh green saturation → softer glow, better harmony.
   Targets: .fpv2a-wa-cta button + sticky .ppui-sticky-wa-btn
   ─────────────────────────────────────────────────────────── */

/* Public profile WA CTA */
.fpv2a-wa-cta a,
.fpv2a-wa-cta button,
a.fpv2a-wa-btn,
button.fpv2a-wa-btn {
  /* Muted emerald glass — not neon WA green */
  background: rgba(20,184,166,0.10) !important;
  border: 1px solid rgba(20,184,166,0.24) !important;
  color: rgba(255,255,255,0.72) !important;
  box-shadow: 0 2px 12px rgba(20,184,166,0.08) !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.fpv2a-wa-cta a:hover,
.fpv2a-wa-cta button:hover,
a.fpv2a-wa-btn:hover,
button.fpv2a-wa-btn:hover {
  background: rgba(20,184,166,0.15) !important;
  border-color: rgba(20,184,166,0.34) !important;
  box-shadow: 0 4px 18px rgba(20,184,166,0.14) !important;
}

/* Sticky CTA secondary WA button — muted to harmonize with pink primary */
.ppui-sticky-wa-btn {
  background: rgba(20,184,166,0.10) !important;
  border: 1px solid rgba(20,184,166,0.22) !important;
  color: rgba(255,255,255,0.68) !important;
  font-size: 0.75rem !important;
}

.ppui-sticky-wa-btn:hover {
  background: rgba(20,184,166,0.16) !important;
  border-color: rgba(20,184,166,0.30) !important;
}

/* ── E. Estimation block: MAD amount prominence (Priority 4) ──
   The emerald card is good. Make the MAD number more visually dominant.
   Move card up by reducing top gap (less dead space before it).
   ─────────────────────────────────────────────────────────── */

.fixeo-res-price-info {
  margin-top: 6px !important;  /* was 10px — slightly tighter above-fold */
  margin-bottom: 10px !important;
}

/* MAD amount — dominant display */
.fixeo-res-price-info strong {
  font-size: 1.05rem !important;  /* bumped from 0.95rem */
  font-weight: 900 !important;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.92) !important;
}

/* Service name prefix before MAD — keep readable, not dominant */
.fixeo-res-price-info .fxrva-price-service {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.46);
  display: block;
  margin-bottom: 3px;
}

/* ── F. Avatar: V1-JC refinements ──
   The V1-JB avatar is solid. Minor refinements:
   - Shadow depth increased for stronger presence
   - Inner highlight ring more visible
   - Ensure circular even at edge cases
   ─────────────────────────────────────────────────────────── */

.fpv1jb-initials-avatar {
  box-shadow:
    0 10px 32px rgba(0,0,0,0.36),
    0 0 0 5px rgba(255,255,255,0.045),
    inset 0 1.5px 0 rgba(255,255,255,0.12) !important;
}

/* Ensure border-radius persists even if V2C tries to override after V1-JB */
.public-avatar-fallback.fpv1jb-initials-avatar {
  border-radius: 50% !important;
  overflow: hidden !important;
  /* Remove the V2C silhouette ::before + ::after that create a person shape */
  contain: layout style !important;
}

/* ── G. V1-JC: Hide "0 avis" string if it somehow escaped V1-TC ──
   Belt-and-suspenders CSS guard:
   When the review sub line contains "(0" it's always a zero-count display.
   This rule makes the stars line invisible, not the whole card.
   ─────────────────────────────────────────────────────────── */

/* Hide stars when fixeo-res-stars is followed by fixeo-res-reviews containing "(0" —
 * cannot detect text content in CSS directly.
 * Instead: hide the row children via JS class added by V1-JC (below).
 * CSS rule is kept as structural context for the .fxrva-res-row--no-trust class. */

.fixeo-res-artisan-row.fxrva-res-row--no-trust .fixeo-res-stars,
.fixeo-res-artisan-row.fxrva-res-row--no-trust .fixeo-res-rating,
.fixeo-res-artisan-row.fxrva-res-row--no-trust .fixeo-res-reviews {
  display: none !important;
}

/* ── H. Mobile guards: V1-JC additions ── */

@media (max-width: 480px) {
  .fxrva-coord-chip {
    font-size: 0.64rem !important;
    padding: 3px 7px !important;
  }
  .ppui-trust-grid--operational .ppui-trust-text strong {
    font-size: 0.78rem !important;
  }
}

@media (max-width: 360px) {
  .fxrva-coord-chips {
    gap: 4px;
  }
  .fxrva-coord-chip {
    font-size: 0.61rem !important;
    padding: 2px 6px !important;
  }
}

@media (max-width: 320px) {
  .fxrva-coord-chips {
    flex-direction: column;
    align-items: flex-start;
  }
  .fxrva-coord-chip {
    white-space: normal;
  }
}

/* ══════════════════════════════════════════════════════════
   V2-B1 — Portfolio public display (append-only)
   Namespace: .fpv1h-photo-*
   No layout shift: aspect-ratio container on every image card
   ══════════════════════════════════════════════════════════ */

/* Aspect-ratio wrapper — prevents CLS when image loads */
.fpv1h-photo-aspect {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.fpv1h-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* City label under service/desc */
.fpv1h-photo-city {
  display: block;
  font-size: 0.69rem;
  opacity: 0.38;
  margin-top: 2px;
}

/* Grid: 2-col on mobile, 3-col on wider screens */
.fpv1h-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 4px 0 8px;
}

@media (min-width: 600px) {
  .fpv1h-photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fpv1h-photo-item {
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-direction: column;
}

.fpv1h-photo-meta {
  padding: 7px 9px 9px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fpv1h-photo-service {
  font-size: 0.76rem;
  font-weight: 700;
  opacity: 0.85;
  display: block;
}

.fpv1h-photo-desc {
  font-size: 0.70rem;
  opacity: 0.50;
  line-height: 1.4;
  display: block;
}

.fpv1h-photo-date {
  font-size: 0.67rem;
  opacity: 0.35;
  display: block;
  margin-top: auto;
  padding-top: 4px;
}

.fpv1h-photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  opacity: 0.3;
}