/* ═══════════════════════════════════════
   RF – Ma RosyBox Page v1
   DA Rose&Fly : élégant, sobre, raffiné
   ═══════════════════════════════════════ */

:root {
  --rfmb-rose-poudre: #e8a4b8;
  --rfmb-vieux-rose: #c96b7e;
  --rfmb-bordeaux: #8b3a4c;
  --rfmb-texte: #221f26;
  --rfmb-muted: #6b5a61;
  --rfmb-line: rgba(0,0,0,.06);
  --rfmb-green: #2d8f2d;
  --rfmb-radius: 14px;
  --rfmb-shadow: 0 10px 26px rgba(18,8,20,.05);
}

.rfmb {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* ═══════════════════════════════════════
   Grid 2 colonnes
   ═══════════════════════════════════════ */
.rfmb-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

.rfmb-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rfmb-side {
  position: sticky;
  top: 24px;
}

/* ═══════════════════════════════════════
   Barre de progression design offert
   ═══════════════════════════════════════ */
.rfmb-progress-card {
  background: #fff;
  border-radius: var(--rfmb-radius);
  padding: 14px 18px;
  border: 1px solid var(--rfmb-line);
  box-shadow: 0 4px 16px rgba(18,8,20,.04);
}

.rfmb-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rfmb-progress-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--rfmb-bordeaux);
}

.rfmb-progress-amount {
  font-size: 12px;
  color: var(--rfmb-muted);
  font-weight: 600;
}

.rfmb-progress-track {
  height: 6px;
  background: rgba(201,107,126,.12);
  border-radius: 3px;
  overflow: hidden;
}

.rfmb-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--rfmb-vieux-rose), var(--rfmb-bordeaux));
  border-radius: 3px;
  transition: width .4s ease;
}

/* ═══════════════════════════════════════
   Design card
   ═══════════════════════════════════════ */
.rfmb-design-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: var(--rfmb-radius);
  padding: 16px 18px;
  border: 1px solid var(--rfmb-line);
  box-shadow: 0 4px 16px rgba(18,8,20,.04);
}

.rfmb-design-preview {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f9e4ee, #f0d0e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.rfmb-design-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rfmb-design-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rfmb-rose-poudre);
  margin-bottom: 2px;
}

.rfmb-design-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--rfmb-texte);
}

.rfmb-design-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.rfmb-badge-free {
  font-size: 13px;
  font-weight: 800;
  color: var(--rfmb-green);
  background: rgba(45,143,45,.08);
  padding: 2px 8px;
  border-radius: 6px;
}

.rfmb-price-old {
  font-size: 12px;
  color: #bbb;
  text-decoration: line-through;
}

/* ═══════════════════════════════════════
   Destinataire
   ═══════════════════════════════════════ */
.rfmb-recipient {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(201,107,126,.05);
  border-radius: 10px;
  padding: 10px 16px;
}

.rfmb-recipient-icon { font-size: 16px; }

.rfmb-recipient-text {
  font-size: 14px;
  color: var(--rfmb-bordeaux);
}

.rfmb-recipient-text strong {
  font-weight: 800;
}

/* ═══════════════════════════════════════
   Liste des produits
   ═══════════════════════════════════════ */
.rfmb-items {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--rfmb-radius);
  overflow: hidden;
  border: 1px solid var(--rfmb-line);
  box-shadow: var(--rfmb-shadow);
}

.rfmb-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.rfmb-item:last-child { border-bottom: none; }

.rfmb-item-img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #faf8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.rfmb-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.rfmb-item-placeholder { font-size: 22px; }

.rfmb-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rfmb-item-slot {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rfmb-rose-poudre);
  margin-bottom: 2px;
}

.rfmb-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--rfmb-texte);
  line-height: 1.3;
}

.rfmb-item-variant {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.rfmb-item-price {
  text-align: right;
  flex-shrink: 0;
}

.rfmb-item-price-value {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--rfmb-texte);
}

.rfmb-item-qty {
  font-size: 11px;
  color: #bbb;
}

/* ═══════════════════════════════════════
   CTA Modifier
   ═══════════════════════════════════════ */
.rfmb-cta-modify {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rfmb-vieux-rose);
  text-decoration: none;
  border: 1.5px solid rgba(201,107,126,.2);
  border-radius: 12px;
  background: rgba(201,107,126,.03);
  transition: border-color .18s ease, background .18s ease;
}

.rfmb-cta-modify:hover {
  border-color: var(--rfmb-vieux-rose);
  background: rgba(201,107,126,.06);
  color: var(--rfmb-bordeaux);
}

/* ═══════════════════════════════════════
   Récap latéral
   ═══════════════════════════════════════ */
.rfmb-summary {
  background: #fff;
  border-radius: var(--rfmb-radius);
  padding: 22px 20px;
  border: 1px solid var(--rfmb-line);
  box-shadow: var(--rfmb-shadow);
}

.rfmb-summary-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 900;
  color: var(--rfmb-texte);
}

.rfmb-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: var(--rfmb-texte);
}

.rfmb-summary-value { font-weight: 700; }

.rfmb-green { color: var(--rfmb-green); }

.rfmb-summary-divider {
  height: 1px;
  background: var(--rfmb-line);
  margin: 12px 0;
}

.rfmb-summary-total {
  font-weight: 900;
  font-size: 17px;
}

.rfmb-summary-total span:last-child {
  color: var(--rfmb-bordeaux);
}

.rfmb-cta-cart {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--rfmb-bordeaux), var(--rfmb-vieux-rose));
  border: none;
  border-radius: 12px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(139,58,76,.2);
  transition: transform .15s ease, box-shadow .15s ease;
}

.rfmb-cta-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(139,58,76,.28);
  color: #fff;
}

.rfmb-summary-note {
  margin-top: 12px;
  font-size: 11px;
  color: #999;
  text-align: center;
  line-height: 1.4;
}

/* ═══════════════════════════════════════
   État vide — Rosy
   ═══════════════════════════════════════ */
.rfmb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px;
}

.rfmb-rosy-bubble {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}

.rfmb-rosy-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(201,107,126,.2);
  background: linear-gradient(135deg, #f9e4ee, #f0d0e0);
}

.rfmb-rosy-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rfmb-rosy-speech {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 20px 24px;
  border: 1px solid var(--rfmb-line);
  box-shadow: var(--rfmb-shadow);
  max-width: 340px;
}

.rfmb-rosy-arrow {
  position: absolute;
  left: -8px;
  top: 28px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #fff;
  filter: drop-shadow(-2px 0 1px rgba(0,0,0,.04));
}

.rfmb-rosy-text {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--rfmb-texte);
  line-height: 1.4;
}

.rfmb-rosy-subtext {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--rfmb-vieux-rose);
  font-weight: 600;
  font-style: italic;
}

.rfmb-cta-create {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--rfmb-bordeaux), var(--rfmb-vieux-rose));
  border-radius: var(--rfmb-radius);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(139,58,76,.2);
  transition: transform .15s ease, box-shadow .15s ease;
  margin-bottom: 40px;
}

.rfmb-cta-create:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(139,58,76,.28);
  color: #fff;
}

.rfmb-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 400px;
  width: 100%;
}

.rfmb-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--rfmb-line);
  box-shadow: 0 4px 12px rgba(18,8,20,.04);
}

.rfmb-feature-icon { font-size: 20px; }

.rfmb-feature-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--rfmb-texte);
}

/* ═══════════════════════════════════════
   Responsive
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .rfmb-grid {
    grid-template-columns: 1fr;
  }

  .rfmb-side {
    position: static;
  }

  .rfmb-rosy-bubble {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .rfmb-rosy-arrow { display: none; }

  .rfmb-rosy-speech {
    max-width: 100%;
  }

  .rfmb-features {
    max-width: 100%;
  }
}