/* =============================================================================
   LoveCupido Wizard — Supplementary Styles
   For the vanilla-JS wizard. Uses lcw- prefix to avoid clashing with existing
   hkj- classes in style.css.
   ============================================================================= */

:root {
  --lcw-primary: #ef4444;
  --lcw-primary-dark: #b91c1c;
  --lcw-accent: #ec4899;
  --lcw-text: #111827;
  --lcw-text-soft: #6b7280;
  --lcw-bg-soft: #f9fafb;
  --lcw-border: #e5e7eb;
  --lcw-card-bg: #ffffff;
  --lcw-shadow: 0 1px 3px rgba(0,0,0,.06);
  --lcw-shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --lcw-radius: 14px;
  --lcw-radius-lg: 20px;
  --lcw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}

/* Host container — Wizard mounts here */
.lcw-host {
  font-family: var(--lcw-font);
  color: var(--lcw-text);
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Day 5 — accessibility helpers */
.lcw-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.lcw-host :focus-visible {
  outline: 3px solid rgba(239,68,68,0.45);
  outline-offset: 2px;
  border-radius: 6px;
}
.lcw-host button:focus-visible {
  box-shadow: 0 0 0 4px rgba(239,68,68,0.20);
}

/* Day 5 — smooth fade transition between screens */
.lcw-screen {
  animation: lcw-fade-in .25s ease-out both;
}
@keyframes lcw-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Day 5 — respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lcw-screen,
  .lcw-mascot-cursor,
  .lcw-pitch-cta,
  .lcw-btn-next,
  .lcw-card,
  .lcw-picker-card,
  .lcw-plan-card {
    animation: none !important;
    transition: none !important;
  }
  .lcw-stepper-line, .lcw-progress-fill { transition: none !important; }
}

/* Day 5 — pricing skeleton (shimmer placeholder) */
.lcw-skeleton {
  background: linear-gradient(110deg, #f3f4f6 8%, #e5e7eb 18%, #f3f4f6 33%);
  background-size: 200% 100%;
  animation: lcw-shimmer 1.4s linear infinite;
  border-radius: 14px;
}
.lcw-skeleton-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 16px auto; }
.lcw-skeleton-card { height: 380px; border-radius: 20px; }
@media (max-width: 760px) { .lcw-skeleton-cards { grid-template-columns: 1fr; } }
@keyframes lcw-shimmer {
  to { background-position: -200% 0; }
}

.lcw-screen {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 70vh;
}

/* ============ Progress bar (pre-step screens) ============ */
.lcw-progress {
  height: 6px;
  width: 100%;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.lcw-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lcw-primary) 0%, var(--lcw-accent) 100%);
  transition: width .4s ease;
}

/* ============ Stepper (1-2-3-4-5-6) ============ */
.lcw-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
}
.lcw-stepper-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f3f4f6; color: var(--lcw-text-soft);
  font-weight: 600; font-size: 14px;
  border: 2px solid #e5e7eb;
  transition: all .2s;
}
.lcw-stepper-dot.current {
  background: #fff; color: var(--lcw-primary);
  border-color: var(--lcw-primary);
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}
.lcw-stepper-dot.done {
  background: var(--lcw-primary); color: #fff; border-color: var(--lcw-primary);
}
.lcw-stepper-line {
  flex: 1; height: 2px; background: #e5e7eb;
  transition: background .3s;
}
.lcw-stepper-line.done { background: var(--lcw-primary); }
.lcw-check { font-size: 14px; line-height: 1; }

/* ============ Mascot + chat bubble ============ */
.lcw-mascot-area {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 8px 0 16px;
}
.lcw-mascot-avatar {
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #e0f2fe, #bae6fd);
  box-shadow: var(--lcw-shadow-md);
  flex-shrink: 0;
  overflow: hidden;
}
.lcw-mascot-svg { width: 100%; height: 100%; display: block; }
.lcw-mascot-bubble {
  flex: 1; background: #fff;
  padding: 16px 22px;
  border-radius: 18px;
  box-shadow: var(--lcw-shadow);
  font-size: 16px; line-height: 1.5; color: var(--lcw-text);
  position: relative;
  min-height: 50px;
  cursor: pointer;
}
.lcw-mascot-bubble::before {
  content: "";
  position: absolute;
  left: -10px; top: 22px;
  border: 10px solid transparent;
  border-right-color: #fff;
}
.lcw-mascot-cursor {
  display: inline-block;
  color: var(--lcw-primary);
  animation: lcw-blink 1s steps(2) infinite;
  margin-left: 2px;
}
@keyframes lcw-blink { 50% { opacity: 0; } }

/* ============ Cards (Recipient picker) ============ */
.lcw-cards-wrap {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 760px; width: 100%; margin: 0 auto;
}
.lcw-card {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  background: var(--lcw-card-bg);
  border: 1.5px solid var(--lcw-border);
  border-radius: var(--lcw-radius);
  padding: 22px 24px;
  cursor: pointer;
  transition: all .2s;
  box-shadow: var(--lcw-shadow);
  /* cards are <button> elements — neutralize UA button styling */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.lcw-card:focus-visible,
.lcw-pill:focus-visible {
  outline: 3px solid var(--lcw-primary);
  outline-offset: 2px;
}
.lcw-card-cta {
  margin-left: auto;
  flex-shrink: 0;
  background: #fee2e2;
  color: var(--lcw-primary);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  transition: all .2s;
}
.lcw-card:hover .lcw-card-cta {
  background: var(--lcw-primary);
  color: #fff;
}
.lcw-skip-row {
  text-align: center;
  margin-top: 22px;
}
.lcw-skip-link {
  font-size: 13px;
  color: var(--lcw-text-soft, #6b7280);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lcw-skip-link:hover { color: var(--lcw-primary); }
.lcw-reset-row {
  text-align: center;
  margin-top: 10px;
}
.lcw-reset-link {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--lcw-text-soft, #9ca3af);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lcw-reset-link:hover { color: var(--lcw-primary); }

/* ============================================================ */
/* Checkout form — final pre-payment screen                     */
/* ============================================================ */
.lcw-checkout-screen { max-width: 1100px; margin: 0 auto; }
.lcw-checkout-split {
  display: grid; grid-template-columns: 360px 1fr;
  gap: 24px; margin-top: 16px;
  align-items: start;
}
@media (max-width: 840px) {
  .lcw-checkout-split { grid-template-columns: 1fr; }
}
.lcw-checkout-summary,
.lcw-checkout-form {
  background: #fff;
  border: 1px solid var(--lcw-border);
  border-radius: var(--lcw-radius);
  padding: 20px 22px;
  box-shadow: var(--lcw-shadow);
}
.lcw-checkout-section-title {
  font-size: 15px; font-weight: 700; color: var(--lcw-text);
  margin: 0 0 4px;
}
.lcw-checkout-section-title + .lcw-checkout-section-title { margin-top: 18px; }
.lcw-checkout-section-sub {
  font-size: 13px; color: var(--lcw-text-soft);
  margin: 0 0 12px;
}
.lcw-checkout-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.lcw-sum-row {
  display: flex; justify-content: space-between;
  font-size: 14px; color: var(--lcw-text-soft);
}
.lcw-sum-row span:last-child { color: var(--lcw-text); font-weight: 500; }
.lcw-checkout-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--lcw-border);
}
.lcw-sum-total-label { font-size: 14px; font-weight: 700; color: var(--lcw-text); }
.lcw-sum-total-value { font-size: 22px; font-weight: 800; color: var(--lcw-text); }
.lcw-checkout-coupon { margin-top: 14px; }
.lcw-checkout-coupon-toggle {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none;
  color: var(--lcw-primary); font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 4px 0;
  font-family: inherit;
}
.lcw-coupon-tag { font-size: 14px; }
.lcw-coupon-chev { margin-left: auto; opacity: 0.6; }
.lcw-checkout-coupon-input { margin-top: 6px; }

/* QR carousel */
.lcw-qr-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.lcw-qr-card {
  background: #fff; border: 2px solid var(--lcw-border);
  border-radius: 12px; padding: 8px;
  cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: inherit;
}
.lcw-qr-card:hover { border-color: #fca5a5; transform: translateY(-1px); }
.lcw-qr-card.selected {
  border-color: var(--lcw-primary);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}
.lcw-qr-card-svg { width: 100%; aspect-ratio: 100/130; }
.lcw-qr-card-svg svg { width: 100%; height: 100%; display: block; border-radius: 6px; }
.lcw-qr-card-price {
  font-size: 13px; font-weight: 700; color: var(--lcw-primary);
}
.lcw-qr-card:not(.selected) .lcw-qr-card-price { color: var(--lcw-text-soft); }

/* Payment method tabs */
.lcw-pay-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; border: 1px solid var(--lcw-border);
  border-radius: 12px; padding: 4px;
  margin-bottom: 12px;
}
.lcw-pay-tab {
  background: transparent; border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--lcw-text-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .15s;
}
.lcw-pay-tab.active {
  background: #fff; color: var(--lcw-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.lcw-pay-tab-icon { font-size: 16px; color: var(--lcw-primary); }
.lcw-pay-note {
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.lcw-pay-tab.active[data-method="card"] ~ .lcw-pay-note,
.lcw-pay-note:has(+ .lcw-btn-pay) {} /* layout only */
.lcw-pay-note-title {
  font-size: 14px; font-weight: 700; color: #166534;
  margin-bottom: 2px;
}
.lcw-pay-note-body {
  font-size: 12px; color: #166534; opacity: 0.85;
}

.lcw-btn-pay {
  width: 100%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; font-weight: 700; font-size: 15px;
  border: none; border-radius: 12px;
  padding: 14px 20px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(16,185,129,0.25);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s, box-shadow .12s;
}
.lcw-btn-pay:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,185,129,0.35); }
.lcw-btn-pay-amt { font-weight: 600; opacity: 0.9; }
.lcw-pay-trust {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; align-items: center;
  margin-top: 14px;
  font-size: 12px; color: var(--lcw-text-soft);
}
.lcw-pay-trust-dot { opacity: 0.4; }

.lcw-checkout-back-row { margin-top: 16px; }
.lcw-card:hover {
  border-color: var(--lcw-primary);
  transform: translateY(-2px);
  box-shadow: var(--lcw-shadow-md);
}
.lcw-card-popular { border-color: var(--lcw-primary); }
.lcw-card-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--lcw-primary); color: #fff;
  padding: 4px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
}
.lcw-card-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: #fef2f2;
  color: var(--lcw-primary);
}
.lcw-card-icon svg { width: 28px; height: 28px; }
.lcw-icon-heart { background: #fef2f2; color: var(--lcw-primary); }
.lcw-icon-chat  { background: #fdf2f8; color: var(--lcw-accent); }
.lcw-card-body { flex: 1; }
.lcw-card-title {
  margin: 0 0 4px; font-size: 22px; font-weight: 700;
  color: var(--lcw-primary);
}
.lcw-card-sub  { margin: 0 0 8px; color: var(--lcw-text-soft); font-size: 14px; }
.lcw-card-foot { font-size: 11px; font-weight: 700; color: var(--lcw-primary-dark); letter-spacing: 0.5px; }

/* ============ Separator ("OU HOMENAGEIE DIRETAMENTE") ============ */
.lcw-separator {
  display: flex; align-items: center; gap: 12px;
  margin: 24px auto 8px;
  max-width: 600px;
}
.lcw-separator-line {
  flex: 1; height: 1px; background: var(--lcw-border);
}
.lcw-separator-text {
  font-size: 11px; letter-spacing: 1px; color: var(--lcw-text-soft);
  font-weight: 600;
}

/* ============ Direct-honor pills ============ */
.lcw-pills-wrap {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 760px; margin: 0 auto;
}
.lcw-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--lcw-border);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--lcw-primary);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.lcw-pill:hover {
  background: #fef2f2;
  border-color: var(--lcw-primary);
  transform: translateY(-1px);
}
.lcw-pill-icon { font-size: 16px; line-height: 1; }

/* ============ Form fields ============ */
.lcw-fields {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 720px; width: 100%; margin: 0 auto;
}
.lcw-fields-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 720px; width: 100%; margin: 0 auto;
}
.lcw-field-half { grid-column: span 1; }
.lcw-field-full { grid-column: 1 / -1; }
.lcw-field {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border: 1.5px solid var(--lcw-border);
  border-radius: var(--lcw-radius);
  padding: 16px 18px;
  cursor: text;
  transition: border-color .15s;
}
.lcw-field:focus-within { border-color: var(--lcw-primary); }
.lcw-field-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #fef2f2; color: var(--lcw-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lcw-field-icon svg { width: 18px; height: 18px; }
.lcw-field-inner { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lcw-field-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--lcw-primary); text-transform: uppercase;
}
.lcw-input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 16px; color: var(--lcw-text); font-family: inherit;
  padding: 2px 0;
  min-width: 0;
}
.lcw-input::placeholder { color: #6b7280; opacity: 1; }
.lcw-input-date, .lcw-input-time { padding-right: 4px; }

/* ============ Action bar (Voltar / Continuar) ============ */
.lcw-action-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 24px;
  margin-top: auto;
}
.lcw-btn-back, .lcw-btn-next {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 24px;
  border-radius: var(--lcw-radius);
  font-size: 15px; font-weight: 600; cursor: pointer;
  border: none; font-family: inherit;
  transition: all .15s;
}
.lcw-btn-back {
  background: #fff; color: var(--lcw-text-soft);
  border: 1.5px solid var(--lcw-border);
}
.lcw-btn-back:hover { border-color: var(--lcw-text-soft); }
.lcw-btn-next {
  background: linear-gradient(135deg, var(--lcw-primary), var(--lcw-accent));
  color: #fff; min-width: 160px; justify-content: center;
  box-shadow: 0 4px 14px rgba(239,68,68,.3);
}
.lcw-btn-next:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(239,68,68,.4); }
.lcw-btn-next.disabled, .lcw-btn-next[disabled] {
  opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none;
}
.lcw-arrow { font-size: 14px; }

/* ============ Live counter ("Juntos há...") ============ */
.lcw-counter-mount { margin-top: 8px; }
.lcw-counter-card {
  background: #fff;
  border: 1.5px solid var(--lcw-border);
  border-radius: var(--lcw-radius);
  padding: 20px 18px;
  box-shadow: var(--lcw-shadow);
  max-width: 720px; margin: 0 auto;
}
.lcw-counter-title {
  text-align: center; color: var(--lcw-text-soft);
  font-size: 14px; margin-bottom: 12px;
  font-weight: 500;
}
.lcw-counter-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.lcw-counter-tile {
  text-align: center;
  background: #fef2f2;
  border-radius: 12px;
  padding: 12px 6px;
}
.lcw-counter-num {
  font-size: 28px; font-weight: 700; color: var(--lcw-primary);
  line-height: 1.1;
}
.lcw-counter-label {
  font-size: 11px; color: var(--lcw-text-soft);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-top: 4px;
}

/* =============================================================================
   DAY 2 — Builder shell, phone preview, all 6 step UIs
   ============================================================================= */

/* ============ Builder split layout ============ */
.lcw-builder { gap: 16px; }
.lcw-builder-split {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: flex-start;
}
.lcw-builder-form {
  display: flex; flex-direction: column;
  gap: 16px;
  min-height: 500px;
}
.lcw-builder-preview {
  position: sticky; top: 16px;
  align-self: flex-start;
}

/* ============ Step title block ============ */
.lcw-step-title {
  font-size: 28px; font-weight: 800; margin: 0 0 4px;
  color: var(--lcw-text);
}
.lcw-step-sub {
  font-size: 15px; color: var(--lcw-text-soft); margin: 0 0 6px;
}
.lcw-edit-note {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fef2f2;
  color: var(--lcw-primary);
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  width: max-content;
  margin-bottom: 8px;
}
.lcw-edit-note-icon { display: inline-flex; }
.lcw-edit-note-icon svg { width: 12px; height: 12px; }

/* ============ Textbox (title, message) ============ */
.lcw-textbox {
  background: #fff;
  border: 1.5px solid var(--lcw-border);
  border-radius: var(--lcw-radius);
  padding: 14px 16px;
  transition: border-color .15s;
}
.lcw-textbox:focus-within { border-color: var(--lcw-primary); }
.lcw-textbox-tall { min-height: 200px; display: flex; flex-direction: column; }
.lcw-textbox-area {
  width: 100%; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 15px;
  resize: vertical; min-height: 60px;
  color: var(--lcw-text);
  padding: 0;
}
.lcw-textbox-area-tall { min-height: 140px; flex: 1; }
.lcw-textbox-area::placeholder { color: #6b7280; opacity: 1; }
.lcw-textbox-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px;
  border-top: 1px dashed #f1f1f4;
  margin-top: 10px;
}
.lcw-textbox-tools { display: inline-flex; gap: 12px; }
.lcw-textbox-tool {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none;
  font-size: 13px; color: var(--lcw-text-soft);
  cursor: pointer; padding: 2px 6px;
  font-family: inherit;
}
.lcw-textbox-tool:hover { color: var(--lcw-primary); }
.lcw-textbox-tool-icon { display: inline-flex; }
.lcw-textbox-tool-icon svg { width: 14px; height: 14px; }
.lcw-textbox-counter { font-size: 13px; color: var(--lcw-text-soft); }

/* ============ Expand modal (message step) ============ */
.lcw-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 24px;
  animation: lcw-modal-fade 0.16s ease-out;
}
@keyframes lcw-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.lcw-modal-card {
  background: #fff;
  border-radius: 18px;
  width: 100%; max-width: 720px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: lcw-modal-pop 0.18s ease-out;
}
@keyframes lcw-modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lcw-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--lcw-border);
}
.lcw-modal-title { font-size: 18px; font-weight: 800; margin: 0; color: var(--lcw-text); }
.lcw-modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--lcw-text-soft);
  padding: 0 4px;
}
.lcw-modal-close:hover { color: var(--lcw-primary); }
.lcw-modal-textarea {
  flex: 1; min-height: 280px;
  border: none; resize: none;
  padding: 22px;
  font-family: inherit; font-size: 16px; line-height: 1.55;
  color: var(--lcw-text);
  outline: none;
}
.lcw-modal-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px;
  border-top: 1px solid var(--lcw-border);
  background: #f9fafb;
}

/* ============ Section toggle cards (gallery_section step) ============ */
.lcw-section-card {
  display: block; width: 100%;
  background: #fff;
  border: 1.5px solid var(--lcw-border);
  border-radius: var(--lcw-radius);
  padding: 16px 18px;
  margin: 8px 0;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit; text-align: left;
}
.lcw-section-card:hover { border-color: var(--lcw-primary); }
.lcw-section-card.selected {
  border-color: var(--lcw-primary);
  background: #fef2f2;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.10);
}
.lcw-section-card-head {
  display: flex; align-items: center; gap: 14px;
}
.lcw-section-card-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lcw-text);
}
.lcw-section-card-icon svg { width: 22px; height: 22px; }
.lcw-section-card-body { flex: 1; min-width: 0; }
.lcw-section-card-title {
  font-size: 16px; font-weight: 700; color: var(--lcw-text);
  margin-bottom: 2px;
}
.lcw-section-card-sub {
  font-size: 13px; color: var(--lcw-text-soft); line-height: 1.4;
}
.lcw-section-card-check {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lcw-primary);
}
.lcw-section-card-check svg { width: 24px; height: 24px; }

.lcw-section-title-field {
  display: block;
  margin: 12px 4px 4px;
}
.lcw-field-label-block {
  display: block;
  font-size: 13px; color: var(--lcw-text-soft);
  margin-bottom: 6px;
}
.lcw-section-title-field .lcw-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--lcw-border); border-radius: 12px;
  font-family: inherit; font-size: 15px;
}

/* Gift view: gallery section title */
.lcv-gallery-section .lcv-section-title {
  font-size: 22px; font-weight: 800;
  margin: 0 0 14px;
  color: #fff; padding: 0 4px;
}

/* ============ Help line under fields ============ */
.lcw-help-line {
  font-size: 12px; color: var(--lcw-text-soft);
  margin-top: -8px; margin-left: 4px;
  min-height: 16px;
}

/* ============ Photo upload (Step 3) + Cover (Step 5) ============ */
.lcw-drop {
  position: relative;
  border: 2px dashed var(--lcw-border);
  border-radius: var(--lcw-radius);
  padding: 28px 16px;
  background: #fff;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.lcw-drop:hover, .lcw-drop-over { border-color: var(--lcw-primary); background: #fef2f2; }
.lcw-drop-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.lcw-drop-icon { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; background: #fef2f2; color: var(--lcw-primary); align-items: center; justify-content: center; margin-bottom: 4px; }
.lcw-drop-icon svg { width: 22px; height: 22px; }
.lcw-drop-label { font-weight: 600; color: var(--lcw-text); font-size: 15px; }
.lcw-drop-sub   { font-size: 12px; color: var(--lcw-text-soft); }
.lcw-drop-limit {
  display: inline-block;
  background: #fef2f2; color: var(--lcw-primary);
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 999px;
  margin-top: 4px;
}
.lcw-drop-input { display: none; }

.lcw-photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 8px;
}
.lcw-photo-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--lcw-border);
  cursor: grab;
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.lcw-photo-cell:active { cursor: grabbing; }
.lcw-photo-cell.lcw-photo-dragging {
  opacity: 0.35;
  transform: scale(0.95);
}
/* Drop indicator — a thick red bar on the side of the hovered cell */
.lcw-photo-cell.lcw-photo-drop-before::before,
.lcw-photo-cell.lcw-photo-drop-after::after {
  content: '';
  position: absolute; top: 6%; bottom: 6%;
  width: 4px; border-radius: 2px;
  background: var(--lcw-primary);
  box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
  z-index: 2;
}
.lcw-photo-cell.lcw-photo-drop-before::before { left: -6px; }
.lcw-photo-cell.lcw-photo-drop-after::after  { right: -6px; }
.lcw-photo-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;  /* drag from cell, not from img */
  user-select: none;
}
/* Per-photo caption input — overlaid bar at the bottom of each thumbnail. */
.lcw-photo-cap {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3;
  border: none; border-radius: 6px; padding: 5px 7px;
  font-size: 11px; font-weight: 600; line-height: 1.2;
  background: rgba(0,0,0,0.62); color: #fff; outline: none; cursor: text;
}
.lcw-photo-cap::placeholder { color: rgba(255,255,255,0.6); font-weight: 400; }
.lcw-photo-cap:focus { background: rgba(0,0,0,0.82); box-shadow: 0 0 0 2px var(--lcw-primary); }
.lcw-photo-drag-handle {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,0.55); color: #fff;
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
.lcw-photo-drag-handle svg { width: 14px; height: 14px; }
.lcw-photo-cell:hover .lcw-photo-drag-handle { opacity: 1; }
.lcw-photo-remove {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,0.65); color: #fff; border: none;
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.lcw-photo-remove svg { width: 14px; height: 14px; }
.lcw-photo-remove:hover { background: var(--lcw-primary); }

.lcw-cover-preview {
  position: relative; width: 100%; max-width: 360px;
  border-radius: 12px; overflow: hidden; margin: 0 auto 8px;
}
.lcw-cover-img { width: 100%; height: auto; display: block; }
.lcw-cover-remove {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,0.7); color: #fff;
  border: none; width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lcw-cover-remove svg { width: 16px; height: 16px; }

/* ============ Step 6 — editable label rows ============ */
.lcw-edit-card {
  background: #fff;
  border: 1.5px solid var(--lcw-border);
  border-radius: var(--lcw-radius);
  padding: 14px 16px;
}
.lcw-edit-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 12px;
  align-items: center;
  padding: 8px 0;
}
.lcw-edit-row + .lcw-edit-row { border-top: 1px dashed #f1f1f4; }
.lcw-edit-row-label { font-size: 13px; color: var(--lcw-text-soft); }
.lcw-edit-row-head { font-size: 13px; font-weight: 700; color: var(--lcw-text); margin-bottom: 4px; }
.lcw-input-edit {
  background: #f9fafb;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
}

/* ============ Phone preview pane ============ */
.lcw-preview-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--lcw-text-soft);
  letter-spacing: 1px; font-weight: 600;
  margin-bottom: 12px; padding: 0 4px;
}
.lcw-preview-refresh {
  background: #fff;
  border: 1px solid var(--lcw-border);
  border-radius: 8px;
  width: 32px; height: 32px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--lcw-text-soft);
}
.lcw-preview-refresh:hover { color: var(--lcw-primary); border-color: var(--lcw-primary); }
.lcw-preview-refresh svg { width: 14px; height: 14px; }
.lcw-phone {
  width: 100%; max-width: 360px;
  background: #000;
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
.lcw-phone-screen {
  background: #1f2937;
  border-radius: 28px;
  color: #fff;
  /* Phone simulator: height adapts to the viewport (matches the reference
     site, which is taller on big monitors). Bounded so it never gets
     unreadably short on a small laptop or comically tall on a 4K screen.
     Content overflows the frame so the user can scroll through the entire
     gift mockup (photo → music → counter → message → wrapped). */
  height: calc(100vh - 220px);
  min-height: 520px;
  max-height: 820px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex; flex-direction: column;
  position: relative;
  scroll-behavior: smooth;
}
/* Stop flex children from shrinking — they should hold their declared height
   and overflow the screen, triggering the scrollbar like a real phone. */
.lcw-phone-screen > * { flex-shrink: 0; }
/* Subtle webkit scrollbar inside the phone — visible without dominating */
.lcw-phone-screen::-webkit-scrollbar { width: 6px; }
.lcw-phone-screen::-webkit-scrollbar-track { background: transparent; }
.lcw-phone-screen::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}
.lcw-phone-screen::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
/* Firefox */
.lcw-phone-screen {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.lcw-phone-screen.lcw-phone-red {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}
.lcw-phone-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 10px;
  font-size: 14px; font-weight: 600;
  background: rgba(0,0,0,0.2);
}
.lcw-phone-down, .lcw-phone-more { color: #fff; opacity: 0.6; font-size: 16px; line-height: 1; }
.lcw-phone-title {
  max-width: 60%; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.lcw-phone-hero {
  background: #0f172a;
  height: 220px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lcw-phone-hero-img { width: 100%; height: 100%; object-fit: cover; }
.lcw-phone-hero-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
}
.lcw-phone-cam-icon { display: inline-flex; }
.lcw-phone-cam-icon svg { width: 28px; height: 28px; }

/* Red message hero on step 4 */
.lcw-phone-msg-hero {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  padding: 18px 16px;
  color: #fff;
}
.lcw-phone-msg-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  opacity: 0.9;
}
.lcw-phone-msg-text {
  font-size: 18px; font-weight: 700; margin: 6px 0 12px;
  line-height: 1.3;
}
.lcw-phone-msg-btn {
  background: #fff; color: #dc2626;
  border: none; border-radius: 999px;
  padding: 8px 18px; font-size: 13px; font-weight: 700;
  cursor: default; opacity: 0.9;
  font-family: inherit;
}

/* Conquistas */
.lcw-phone-conquistas {
  background: rgba(0,0,0,0.25);
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lcw-phone-conquistas-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.lcw-phone-conquistas-title { font-size: 14px; font-weight: 700; color: #fff; }
.lcw-phone-conquistas-count {
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,0.1); color: #fff;
  padding: 3px 10px; border-radius: 999px;
}
.lcw-phone-conquistas-icons {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.lcw-phone-conquistas-icon {
  text-align: center; font-size: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 4px;
  opacity: 0.35;
  transition: opacity .2s;
}
.lcw-phone-conquistas-icon.filled {
  opacity: 1;
  background: rgba(255,255,255,0.12);
  border-color: rgba(251,191,36,0.5);
  box-shadow: 0 0 0 2px rgba(251,191,36,0.15);
}

/* Song row */
.lcw-phone-song {
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lcw-phone-song-empty { opacity: 0.6; }
.lcw-phone-song-info { flex: 1; min-width: 0; }
.lcw-phone-song-title {
  font-size: 16px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lcw-phone-song-artist { font-size: 13px; opacity: 0.7; }
.lcw-phone-song-check {
  width: 28px; height: 28px; color: #22c55e;
  display: inline-flex;
}
.lcw-phone-song-check svg { width: 100%; height: 100%; }
.lcw-phone-song-cover-empty {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5);
  font-size: 22px; border-radius: 8px;
}

/* Music player widget — visual mock to give the phone preview a richer
   "real mobile" feel matching the reference site. Controls are disabled. */
.lcw-phone-player {
  padding: 14px 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lcw-phone-player-bar {
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.15);
  position: relative; overflow: hidden;
}
.lcw-phone-player-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 18%;
  background: #fff; border-radius: 2px;
}
.lcw-phone-player-bar-fill::after {
  content: ''; position: absolute; right: -5px; top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; transform: translateY(-50%);
}
.lcw-phone-player-times {
  display: flex; justify-content: space-between;
  font-size: 11px; opacity: 0.65; margin-top: 6px;
}
.lcw-phone-player-controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; color: #fff;
}
.lcw-phone-player-btn,
.lcw-phone-player-play {
  background: transparent; border: none; padding: 4px;
  color: inherit; opacity: 0.85;
  display: inline-flex; align-items: center; justify-content: center;
}
.lcw-phone-player-play {
  width: 44px; height: 44px;
  background: #fff; color: #1f2937; border-radius: 50%;
  opacity: 1;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.lcw-phone-player-play:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.lcw-phone-player-play.shake { animation: lcw-shake 0.3s ease-in-out 2; }
@keyframes lcw-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.lcw-phone-player-iframe-slot {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  margin-top: 0;
}
.lcw-phone-player.playing .lcw-phone-player-iframe-slot {
  max-height: 220px;
  margin-top: 12px;
}
.lcw-phone-player-iframe {
  width: 100%; aspect-ratio: 16/9;
  border: 0; border-radius: 10px;
  background: #000;
}

/* Couple/counter card */
.lcw-phone-couple {
  padding: 14px 16px;
  background: rgba(0,0,0,0.25);
}
.lcw-phone-couple-head {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7);
  letter-spacing: 0.3px;
}
.lcw-phone-couple-names {
  font-size: 18px; font-weight: 700; margin: 6px 0 2px;
}
.lcw-phone-couple-since {
  font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 10px;
}
.lcw-phone-counter-mini {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.lcw-phone-counter-tile {
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 4px;
  text-align: center;
}
.lcw-phone-counter-tile-num { font-size: 22px; font-weight: 700; line-height: 1; }
.lcw-phone-counter-tile-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.65); margin-top: 4px;
}

/* ============ Responsive (mobile) ============ */
@media (max-width: 720px) {
  .lcw-host { padding: 12px; }
  .lcw-mascot-avatar { width: 80px; height: 80px; }
  .lcw-mascot-bubble { font-size: 14px; padding: 12px 16px; }
  .lcw-mascot-bubble::before { top: 16px; }
  .lcw-card-title { font-size: 18px; }
  .lcw-card-icon { width: 44px; height: 44px; }
  .lcw-card-icon svg { width: 22px; height: 22px; }
  .lcw-card { padding: 18px 16px; gap: 12px; }
  .lcw-card-cta { padding: 7px 12px; font-size: 12px; }
  .lcw-fields-grid { grid-template-columns: 1fr; }
  .lcw-counter-grid { grid-template-columns: repeat(3, 1fr); }
  .lcw-counter-num { font-size: 22px; }
  .lcw-btn-next { min-width: 0; flex: 1; }
  .lcw-btn-back { flex: 0 0 auto; }
  .lcw-builder-split { grid-template-columns: 1fr; }
  .lcw-builder-preview { position: static; max-width: 360px; margin: 16px auto; }
  /* On stacked (mobile) layout, viewport-relative height makes the preview
     tower over content; cap it so the user can still see the form below it. */
  .lcw-phone-screen { height: 520px; min-height: 0; max-height: 60vh; }
  .lcw-edit-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 980px) and (min-width: 721px) {
  .lcw-builder-split { grid-template-columns: 1fr 300px; gap: 16px; }
}

/* =============================================================================
   DAY 3 — Wrapped pitch, FAQ, section picker, pricing
   ============================================================================= */

/* ============ Wrapped pitch carousel ============ */
.lcw-wrapped { gap: 24px; }
.lcw-carousel {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; align-items: center;
  max-width: 1100px; margin: 0 auto;
  padding: 16px;
}
.lcw-carousel-phone {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.lcw-carousel-info {
  display: flex; flex-direction: column; gap: 12px;
}
.lcw-pitch-decor {
  position: absolute; top: 0; bottom: 0;
  width: 80px; pointer-events: none;
}
.lcw-pitch-decor-left  { left: -10px; }
.lcw-pitch-decor-right { right: -10px; transform: scaleX(-1); }
.lcw-pitch-decor svg { width: 100%; height: 100%; }
.lcw-phone-pitch { max-width: 280px; }
.lcw-phone-screen-pitch { min-height: 460px; padding: 0; overflow: hidden; }
.lcw-pitch-svg { width: 100%; height: 100%; }
.lcw-pitch-svg svg { width: 100%; height: 100%; display: block; }

.lcw-pitch-icon-badge {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fef2f2; color: var(--lcw-primary);
  display: flex; align-items: center; justify-content: center;
}
.lcw-pitch-icon-badge svg { width: 28px; height: 28px; }
.lcw-pitch-title {
  font-size: 36px; font-weight: 800; margin: 0;
  color: var(--lcw-text); line-height: 1.1;
}
.lcw-pitch-desc {
  font-size: 16px; color: var(--lcw-text-soft);
  margin: 0; max-width: 480px; line-height: 1.5;
}
.lcw-pitch-pag {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 8px 0;
}
.lcw-pitch-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--lcw-border);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--lcw-text-soft);
  font-size: 20px; line-height: 1;
  font-family: inherit;
  transition: all .15s;
}
.lcw-pitch-arrow:hover {
  border-color: var(--lcw-primary); color: var(--lcw-primary);
}
.lcw-pitch-dots {
  display: inline-flex; gap: 6px; padding: 0 4px;
}
.lcw-pitch-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d1d5db; cursor: pointer; transition: all .15s;
}
.lcw-pitch-dot.active { background: var(--lcw-primary); width: 24px; border-radius: 999px; }

.lcw-pitch-cta {
  position: relative;
  background: linear-gradient(135deg, var(--lcw-primary), var(--lcw-accent));
  color: #fff; border: none;
  border-radius: var(--lcw-radius);
  padding: 16px 24px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
  box-shadow: 0 8px 20px rgba(239,68,68,.3);
  margin-top: 12px;
  width: max-content;
  transition: transform .15s;
}
.lcw-pitch-cta:hover { transform: translateY(-2px); }
.lcw-pitch-cta-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #1f2937; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  padding: 4px 12px; border-radius: 999px;
  white-space: nowrap;
}
.lcw-pitch-cta-label { display: inline-flex; align-items: center; }
.lcw-pitch-skip {
  background: none; border: none;
  color: var(--lcw-text-soft);
  font-size: 14px; text-decoration: underline; cursor: pointer;
  padding: 6px 0; align-self: flex-start;
  font-family: inherit;
}
.lcw-pitch-skip:hover { color: var(--lcw-primary); }

/* ============ FAQ accordion ============ */
.lcw-faq-head {
  text-align: center; margin: 32px auto 8px;
  max-width: 600px;
}
.lcw-faq-badge {
  display: inline-block;
  background: #fef2f2; color: var(--lcw-primary);
  font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 8px;
}
.lcw-faq-title {
  font-size: 28px; font-weight: 800; margin: 8px 0 4px;
}
.lcw-faq-sub { color: var(--lcw-text-soft); font-size: 14px; margin: 0; }

.lcw-faq-list {
  max-width: 760px; margin: 16px auto 32px;
  display: flex; flex-direction: column; gap: 10px;
}
.lcw-faq-item {
  background: #fff;
  border: 1.5px solid var(--lcw-border);
  border-radius: var(--lcw-radius);
  overflow: hidden;
  transition: border-color .15s;
}
.lcw-faq-item:hover { border-color: var(--lcw-primary); }
.lcw-faq-item.open  { border-color: var(--lcw-primary); }
.lcw-faq-q {
  width: 100%; background: none; border: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  font-size: 15px; font-weight: 600; color: var(--lcw-text);
  cursor: pointer; text-align: left;
  font-family: inherit;
}
.lcw-faq-chev {
  font-size: 18px; line-height: 1;
  transition: transform .2s;
}
.lcw-faq-item.open .lcw-faq-chev { transform: rotate(180deg); }
.lcw-faq-a {
  max-height: 0; overflow: hidden;
  padding: 0 20px;
  color: var(--lcw-text-soft); font-size: 14px; line-height: 1.6;
  transition: max-height .25s, padding .25s;
}
.lcw-faq-item.open .lcw-faq-a {
  max-height: 300px;
  padding: 0 20px 16px;
}

/* ============ Wrapped section picker ============ */
.lcw-picker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 980px; margin: 8px auto;
}
.lcw-picker-card {
  position: relative;
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--lcw-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--lcw-shadow);
}
.lcw-picker-card:hover { transform: translateY(-2px); box-shadow: var(--lcw-shadow-md); }
.lcw-picker-card.active { border-color: var(--lcw-primary); box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }
.lcw-picker-phone {
  aspect-ratio: 9 / 16;
  width: 100%;
  background: #0f172a;
  overflow: hidden;
}
.lcw-picker-svg svg { width: 100%; height: 100%; display: block; }
.lcw-picker-name {
  padding: 10px 12px;
  font-size: 13px; font-weight: 700; color: var(--lcw-text);
  text-align: center;
}
.lcw-picker-check {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--lcw-primary);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.lcw-picker-check svg { width: 18px; height: 18px; }
.lcw-picker-card.active .lcw-picker-check { opacity: 1; }
.lcw-picker-count {
  text-align: center; margin: 16px auto;
  font-size: 13px; color: var(--lcw-text-soft);
}
.lcw-picker-count-badge {
  background: var(--lcw-primary); color: #fff;
  padding: 3px 12px; border-radius: 999px;
  font-weight: 700; font-size: 12px;
  margin-left: 6px;
}

/* ============ Pricing cards ============ */
.lcw-pricing-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  max-width: 760px; margin: 16px auto;
}
.lcw-plan-card {
  position: relative;
  background: #fff;
  border: 2px solid var(--lcw-border);
  border-radius: var(--lcw-radius-lg);
  padding: 24px 22px;
  cursor: pointer;
  transition: all .15s;
}
.lcw-plan-card:hover { transform: translateY(-2px); box-shadow: var(--lcw-shadow-md); }
.lcw-plan-card.active {
  border-color: var(--lcw-primary);
  box-shadow: 0 0 0 4px rgba(239,68,68,0.12);
}
.lcw-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--lcw-primary); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  padding: 4px 14px; border-radius: 999px;
  white-space: nowrap;
}
/* Secondary badge (e.g. ECONÔMICO on the 24h plan) — muted amber so the
   primary "MELHOR CUSTO-BENEFÍCIO" badge still wins visual hierarchy. */
.lcw-plan-badge-secondary {
  background: #f59e0b; /* amber-500 */
  color: #111827;
}

/* Social-proof + urgency banner above the recipient picker.
   Closes the conversion gap vs lovepanda's intro. */
.lcw-urgency-banner {
  max-width: 760px;
  margin: 8px auto 16px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
  border-radius: 999px;
  color: #92400e;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  animation: lcwUrgencyIn .4s ease-out both;
}
.lcw-urgency-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}
.lcw-urgency-text strong { color: #b45309; font-weight: 700; }
.lcw-urgency-pulse {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.7);
  animation: lcwPulse 1.6s ease-in-out infinite;
}
@keyframes lcwPulse {
  0%   { box-shadow: 0 0 0 0   rgba(239,68,68,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0   rgba(239,68,68,0); }
}
@keyframes lcwUrgencyIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 520px) {
  .lcw-urgency-banner { font-size: 12px; padding: 8px 14px; border-radius: 12px; }
  .lcw-urgency-row { flex-wrap: wrap; justify-content: center; gap: 8px; }
  /* Mobile: mascot centered above the bubble (matches reference layout) */
  .lcw-mascot-area { flex-direction: column; align-items: center; gap: 10px; }
  .lcw-mascot-bubble { width: 100%; text-align: center; }
  .lcw-mascot-bubble::before {
    left: 50%; top: -10px;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-bottom-color: #fff;
    border-top: none;
  }
  /* Mobile: whole card is the tap target — the inline CTA just crowds it */
  .lcw-card-cta { display: none; }
}
.lcw-plan-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.lcw-plan-name {
  font-size: 18px; font-weight: 700; color: var(--lcw-primary);
}
.lcw-plan-check {
  width: 24px; height: 24px;
  color: var(--lcw-primary);
  opacity: 0; transition: opacity .15s;
}
.lcw-plan-check svg { width: 100%; height: 100%; }
.lcw-plan-card.active .lcw-plan-check { opacity: 1; }
.lcw-plan-price-block { margin-bottom: 12px; }
.lcw-plan-anchor {
  font-size: 15px; color: #9ca3af;
  text-decoration: line-through;
  margin-bottom: 4px;
}
.lcw-plan-price {
  font-size: 36px; font-weight: 800;
  color: var(--lcw-text);
}
.lcw-plan-tag {
  font-size: 13px; color: var(--lcw-text-soft);
  margin-bottom: 12px;
}
.lcw-plan-benefits {
  list-style: disc; padding-left: 20px; margin: 0 0 14px;
  font-size: 13px; color: var(--lcw-text);
  line-height: 1.7;
}
.lcw-plan-benefits li { padding: 2px 0; }
.lcw-plan-life {
  font-size: 13px; color: var(--lcw-primary);
  font-weight: 600;
  padding-top: 12px; border-top: 1px dashed #f1f1f4;
}
.lcw-plan-life-daily { color: var(--lcw-text-soft); }

.lcw-trust-line {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  font-size: 13px; color: var(--lcw-text-soft);
  margin: 16px auto;
}
.lcw-trust-dot { color: var(--lcw-primary); font-weight: 700; }

.lcw-loading, .lcw-error {
  text-align: center; padding: 32px;
  color: var(--lcw-text-soft); font-size: 14px;
}
.lcw-error { color: var(--lcw-primary); font-weight: 600; }

/* ============ Responsive ============ */
@media (max-width: 800px) {
  .lcw-carousel { grid-template-columns: 1fr; gap: 16px; }
  .lcw-pitch-title { font-size: 28px; }
  .lcw-pitch-decor { display: none; }
  .lcw-picker-grid { grid-template-columns: repeat(2, 1fr); }
  .lcw-pricing-cards { grid-template-columns: 1fr; }
}

/* ============================================================ */
/*  MUSIC SEARCH (YouTube via /giftcard/v1/music-search proxy)   */
/* ============================================================ */
.lcw-music-search-wrap { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }

.lcw-music-search-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  transition: border-color .12s, box-shadow .12s;
}
.lcw-music-search-box:focus-within {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.lcw-music-search-icon { display: inline-flex; color: #ef4444; }
.lcw-music-search-input {
  flex: 1; border: none; outline: none; font-size: 15px; background: transparent;
  font-family: inherit; color: #111827;
  padding: 6px 0;
}
.lcw-music-search-input::placeholder { color: #6b7280; opacity: 1; }

.lcw-music-search-status {
  font-size: 13px; color: #6b7280; padding: 6px 4px;
}

.lcw-music-results {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 380px; overflow-y: auto;
  border-radius: 12px;
}
.lcw-music-result {
  display: flex; align-items: center; gap: 12px;
  padding: 8px;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .12s, transform .12s, background .12s;
  font-family: inherit;
}
.lcw-music-result:hover { border-color: #ef4444; background: #fef2f2; transform: translateY(-1px); }
.lcw-music-result:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; }

.lcw-music-result-cover {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 8px; object-fit: cover;
  background: #f3f4f6;
}
/* overflow:hidden on the flex child forces its min-content size to 0,
   letting flex:1 actually shrink instead of bursting the row width and
   triggering horizontal scroll on the result list. */
.lcw-music-result-meta { flex: 1 1 0; min-width: 0; overflow: hidden; }
.lcw-music-result-title {
  font-size: 14px; font-weight: 600; color: #111827;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lcw-music-result-artist {
  font-size: 12px; color: #6b7280; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Selected music card */
.lcw-music-selected { margin-bottom: 6px; }
.lcw-music-sel-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 44px 12px 12px;
  background: linear-gradient(135deg,#fef2f2,#fff);
  border: 2px solid #ef4444;
  border-radius: 14px;
}
.lcw-music-sel-cover {
  width: 60px; height: 60px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0;
}
.lcw-music-sel-cover-empty {
  display: flex; align-items: center; justify-content: center;
  background: #fee2e2; color: #ef4444;
  font-size: 26px; font-weight: 700;
}
.lcw-music-sel-meta { flex: 1; min-width: 0; }
.lcw-music-sel-title {
  font-size: 15px; font-weight: 700; color: #111827;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lcw-music-sel-artist {
  font-size: 13px; color: #6b7280; margin-top: 2px;
}
.lcw-music-sel-clear {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px;
  background: rgba(239,68,68,.1);
  border: none; border-radius: 50%;
  font-size: 18px; line-height: 1; color: #ef4444;
  cursor: pointer;
}
.lcw-music-sel-clear:hover { background: #ef4444; color: #fff; }

/* ============================================================ */
/*  CITY AUTOCOMPLETE (estado--cidade taxonomy, 9.6k Br cities)  */
/* ============================================================ */
.lcw-city-autocomplete { position: relative; flex: 1; }
.lcw-city-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  max-height: 280px; overflow-y: auto;
  z-index: 50;
}
.lcw-city-item {
  padding: 10px 14px;
  font-size: 14px; color: #111827;
  cursor: pointer;
  border-bottom: 1px solid #f9fafb;
}
.lcw-city-item:last-child { border-bottom: none; }
.lcw-city-item:hover,
.lcw-city-item.active { background: #fef2f2; color: #ef4444; }
/* "Usar …" free-text row — lets any non-BR place (e.g. Dubai) be confirmed */
.lcw-city-item-free { display: flex; align-items: center; gap: 8px; color: #ef4444; font-weight: 600; }
.lcw-city-free-pin { font-size: 14px; }
.lcw-wrc-field .lcw-city-autocomplete { width: 100%; }
.lcw-wrc-field .lcw-city-autocomplete .lcw-wrc-field-in,
.lcw-wrc-field .lcw-city-autocomplete .lcw-wrc-in { width: 100%; }

/* Music cover thumbnail inside the phone preview's song row */
.lcw-phone-song-cover {
  width: 38px; height: 38px;
  border-radius: 6px; object-fit: cover;
  flex-shrink: 0; margin-right: 10px;
}

/* ==== YouTube preview play button + iframe inside music result ==== */
.lcw-music-result-thumb {
  position: relative; flex-shrink: 0;
  width: 64px; height: 64px;
}
.lcw-music-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  border: none; border-radius: 8px;
  color: #fff; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.lcw-music-play svg { width: 24px; height: 24px; }
.lcw-music-result:hover .lcw-music-play,
.lcw-music-result.playing .lcw-music-play,
.lcw-music-play:focus-visible { opacity: 1; }
.lcw-music-pick {
  flex-shrink: 0;
  background: linear-gradient(135deg,#ef4444,#ec4899);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s, box-shadow .12s;
}
.lcw-music-pick:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(239,68,68,.25);
}
.lcw-music-pick:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}
/* Default: collapsed. Only takes width/height when the user clicks Play and
   the .playing class is added (rule below). Without this, the empty slot
   was claiming 100% of the flex-row width and squeezing meta to 0. */
.lcw-music-iframe-slot { width: 0; height: 0; flex: 0 0 0; overflow: hidden; }
.lcw-music-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  margin-top: 10px;
  background: #000;
}
/* When card is playing, expand it to make room for the iframe and flag it */
.lcw-music-result.playing {
  flex-direction: row;
  flex-wrap: wrap;
  border-color: #ef4444;
  background: #fef2f2;
}
.lcw-music-result.playing .lcw-music-iframe-slot {
  order: 99;
  width: 100%;
}

/* ============================================================ */
/*  PUBLIC GIFT VIEW (/gift/?view=ID)                              */
/*  What the recipient sees — full-screen storybook layout        */
/* ============================================================ */
.lcv-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 80px;
  background: #0b1019;
  color: #fff;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lcv-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #18181b;
}
.lcv-cover {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lcv-cover-empty {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #ef4444 0%, #ec4899 100%);
}
.lcv-hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,16,25,1) 0%, rgba(11,16,25,0.4) 50%, transparent 100%);
  pointer-events: none;
}
.lcv-hero-text {
  position: absolute; bottom: 20px; left: 24px; right: 24px;
  z-index: 1;
}
.lcv-title {
  font-size: 32px; font-weight: 800; margin: 0 0 8px;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.lcv-names {
  font-size: 14px; opacity: 0.85; margin: 0;
  letter-spacing: 0.5px;
}

.lcv-section {
  padding: 28px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.lcv-counter-section {
  text-align: center;
  background: linear-gradient(180deg, rgba(239,68,68,0.05), transparent);
}
.lcv-counter-prefix {
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  opacity: 0.7; margin: 0 0 18px;
}
.lcv-counter {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  max-width: 480px; margin: 0 auto;
}
.lcv-counter-cell {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 6px;
}
.lcv-counter-num {
  font-size: 22px; font-weight: 700;
  color: #fca5a5;
  line-height: 1;
}
.lcv-counter-lab {
  font-size: 9px; letter-spacing: 0.5px;
  opacity: 0.6; margin-top: 4px; text-transform: uppercase;
}
@media (max-width: 420px) {
  .lcv-counter-num { font-size: 18px; }
}

.lcv-music {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px;
}
.lcv-music-cover {
  width: 56px; height: 56px;
  border-radius: 8px; flex-shrink: 0;
  object-fit: cover;
}
.lcv-music-cover-empty {
  display: flex; align-items: center; justify-content: center;
  background: #fee2e2; color: #ef4444; font-size: 26px;
}
.lcv-music-meta { flex: 1; min-width: 0; }
.lcv-music-title {
  font-size: 15px; font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lcv-music-artist {
  font-size: 13px; opacity: 0.7; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lcv-music-play {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: #ef4444; color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.lcv-music-play:hover { transform: scale(1.05); background: #dc2626; }
.lcv-music-play svg { width: 22px; height: 22px; }
.lcv-music-player { width: 100%; }
.lcv-music-iframe {
  width: 100%; aspect-ratio: 16/9; border-radius: 12px;
  margin-top: 12px; background: #000;
}

.lcv-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.lcv-gallery-photo {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: #18181b;
}

.lcv-message {
  background: linear-gradient(135deg, #ef4444, #ec4899);
  border-radius: 16px;
  padding: 24px 22px;
  color: #fff;
}
.lcv-message-label {
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  opacity: 0.9; font-weight: 600; margin-bottom: 10px;
}
.lcv-message-body {
  font-size: 16px; line-height: 1.55;
}

.lcv-foot {
  text-align: center;
  padding: 28px 24px;
  font-size: 12px;
  opacity: 0.5;
}
.lcv-foot a {
  color: #fca5a5;
  text-decoration: none;
}
.lcv-foot a:hover { text-decoration: underline; }

/* Section picker — secondary skip link below the primary CTA */
.lcw-picker-skip {
  text-align: center;
  margin-top: 12px;
  padding-bottom: 16px;
}
.lcw-picker-skip a {
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.lcw-picker-skip a:hover {
  color: #ef4444;
  border-bottom-color: #ef4444;
}

/* "Sua Retrospectiva" card in the live phone preview (mirrors gift.js) */
.lcw-phone-retro {
  margin: 10px;
  border-radius: 12px;
  padding: 18px 14px 16px;
  text-align: center;
  background: radial-gradient(120% 100% at 50% 0%, rgba(236, 72, 153, 0.55), #161616 72%);
  position: relative;
  overflow: hidden;
}
.lcw-phone-retro-title {
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.lcw-phone-retro-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  margin-top: 3px;
}
.lcw-phone-retro-cta {
  display: inline-block;
  margin-top: 12px;
  background: linear-gradient(135deg, #ef4444, #ec4899);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 22px;
  border-radius: 999px;
}

/* =========================================================================
   Inline photo uploader for Wrapped-content rows (Timeline, Journey, Tree).
   Replaces the old "URL da foto" text input — buyers couldn't realistically
   paste a hosted URL, so the field stayed empty and sections went unauthored.
   ========================================================================= */
.lcw-wrc-photo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.lcw-wrc-photo-btn {
  padding: 9px 16px;
  font-size: 13px;
  font-family: inherit;
  border-radius: 8px;
  border: 1px dashed #d4d4d8;
  background: #fafafa;
  color: #6b7280;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.lcw-wrc-photo-btn:hover {
  border-color: var(--lcw-primary, #ef4444);
  color: var(--lcw-primary, #ef4444);
  background: #fff5f7;
}
.lcw-wrc-photo-swap {
  border-style: solid;
  background: #fff;
}
.lcw-wrc-photo-thumb {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: visible;
  flex-shrink: 0;
}
.lcw-wrc-photo-thumb img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid #e5e7eb;
}
.lcw-wrc-photo-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.lcw-wrc-photo-x:hover { background: #dc2626; }

/* =========================================================================
   Wrapped-content editor cards (Linha do Tempo, Jornada, Árvore de Presentes)
   The classes were previously unstyled — inputs rendered as raw browser
   defaults. This block gives the whole authoring surface a soft pink card
   layout with floating-label fields, a magic-wand helper pill, a Conquistas
   badge, and a dashed "add more" CTA. Pattern lifted from lovepanda; colors
   stay LoveCupido pink-red.
   ========================================================================= */
.lcw-wrc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.lcw-wrc-card {
  background: #fff5f7;
  border: 1px solid #fce7ec;
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
}
.lcw-wrc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.lcw-wrc-card-head-text {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.lcw-wrc-card-icon {
  width: 38px;
  height: 38px;
  background: #fff;
  border: 0.5px solid #fce7ec;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.lcw-wrc-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #4b1528;
  margin: 0;
  line-height: 1.2;
}
.lcw-wrc-card-sub {
  font-size: 13px;
  color: #993556;
  margin: 2px 0 0;
  line-height: 1.3;
}
.lcw-wrc-conq {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #fce7ec;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  color: #993556;
  white-space: nowrap;
  flex-shrink: 0;
}
.lcw-wrc-conq-num { font-weight: 600; }

.lcw-wrc-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 0.5px solid #fce7ec;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: #993556;
}
.lcw-wrc-pill-icon { font-size: 14px; line-height: 1; }

.lcw-wrc-field {
  display: block;
  background: #fff;
  border: 0.5px solid #fce7ec;
  border-radius: 12px;
  padding: 7px 14px 9px;
  margin-bottom: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.lcw-wrc-field:focus-within {
  border-color: var(--lcw-primary, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}
.lcw-wrc-field-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  color: #993556;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 2px;
}
.lcw-wrc-field-in {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: #4b1528;
  padding: 1px 0 1px;
  min-width: 0;
}
.lcw-wrc-field-in::placeholder { color: #b4b2a9; opacity: 1; }

.lcw-wrc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 10px;
}
.lcw-wrc-section-head-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #888780;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.lcw-wrc-section-head-count {
  background: #fce7ec;
  color: #993556;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 500;
}

.lcw-wrc-mile {
  background: #fff;
  border: 1px solid #fce7ec;
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin-bottom: 10px;
  position: relative;
}
.lcw-wrc-mile-head {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.lcw-wrc-mile-num {
  width: 22px;
  height: 22px;
  background: #fce7ec;
  color: #993556;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.lcw-wrc-mile-rm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0.5px solid #fce7ec;
  background: #fff;
  color: #993556;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 12px;
  transition: background .12s, color .12s, border-color .12s;
}
.lcw-wrc-mile-rm:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}
.lcw-wrc-mile-body { margin-right: 64px; }

/* Inside a milestone, fields are denser/lighter. */
.lcw-wrc-mile .lcw-wrc-field {
  background: #fafafa;
  border-color: transparent;
  border-radius: 10px;
  padding: 6px 12px 8px;
}
.lcw-wrc-mile .lcw-wrc-field:focus-within {
  background: #fff;
  border-color: var(--lcw-primary, #ef4444);
}
.lcw-wrc-mile .lcw-wrc-field-eyebrow {
  font-size: 10px;
  letter-spacing: 0.5px;
}
.lcw-wrc-mile .lcw-wrc-field-in { font-size: 13.5px; }

.lcw-wrc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.lcw-wrc-mile-photo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.lcw-wrc-mile-photo-row .lcw-wrc-photo {
  margin-top: 0;
  flex-shrink: 0;
}
.lcw-wrc-mile-photo-hint {
  flex: 1;
  font-size: 11.5px;
  color: #888780;
  line-height: 1.4;
}
.lcw-wrc-mile-photo-hint b {
  display: block;
  font-size: 12.5px;
  color: #4b1528;
  font-weight: 600;
  margin-bottom: 2px;
}

.lcw-wrc-add {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  border: 2px dashed #f4c0d1;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .12s, background .12s;
  margin-top: 4px;
}
.lcw-wrc-add:hover {
  border-color: var(--lcw-primary, #ef4444);
  background: #fff5f7;
}
.lcw-wrc-add-plus {
  width: 30px;
  height: 30px;
  background: #fce7ec;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4537e;
  font-size: 18px;
  font-weight: 400;
  flex-shrink: 0;
}
.lcw-wrc-add-text { min-width: 0; }
.lcw-wrc-add-title {
  font-size: 13.5px;
  color: #993556;
  font-weight: 600;
  line-height: 1.2;
}
.lcw-wrc-add-sub {
  font-size: 11.5px;
  color: #888780;
  margin-top: 2px;
  line-height: 1.3;
}

.lcw-wrc-toggle {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.lcw-wrc-toggle button {
  flex: 1;
  background: #fff;
  border: 0.5px solid #fce7ec;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12.5px;
  color: #993556;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.lcw-wrc-toggle button:hover { border-color: #d4537e; }
.lcw-wrc-toggle button.on {
  background: var(--lcw-primary, #ef4444);
  border-color: var(--lcw-primary, #ef4444);
  color: #fff;
  font-weight: 600;
}