/* JCM Car Memorial Tool v2.2 - Styles */

.jcm-memorial-app {
  max-width: 680px; margin: 0 auto; padding: 40px 20px 60px;
  font-family: 'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  color: #222; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.jcm-memorial-app *, .jcm-memorial-app *::before, .jcm-memorial-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

.jcm-fade-in { animation: jcmFadeIn 0.4s cubic-bezier(0.22,1,0.36,1) forwards; }
.jcm-fade-out { animation: jcmFadeOut 0.25s ease forwards; }
@keyframes jcmFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes jcmFadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes jcmPulse { 0%,100% { opacity:0.3; } 50% { opacity:1; } }
@keyframes jcmSlideUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.jcm-card-reveal { animation: jcmSlideUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }

.jcm-step { display:none; }
.jcm-step.active { display:block; }

/* Intro */
.jcm-intro { text-align:center; padding:20px 0; }
.jcm-logo-badge { display:inline-flex; align-items:center; margin-bottom:24px; }
.jcm-hero-title { font-family:'Outfit',sans-serif; font-size:44px; font-weight:800; line-height:1.1; color:#1a1a2e; margin-bottom:16px; letter-spacing:-0.5px; }
.jcm-hero-title span { color:#e02b2b; }
.jcm-hero-sub { font-size:17px; line-height:1.7; color:#444; max-width:480px; margin:0 auto 28px; }
.jcm-hero-features { display:flex; justify-content:center; gap:24px; margin-top:24px; flex-wrap:wrap; }
.jcm-hero-feature { display:flex; align-items:center; gap:6px; font-size:14px; color:#777; }

/* Buttons */
.jcm-btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:#e02b2b; color:#fff !important; border:none; border-radius:8px;
  padding:16px 32px; font-size:16px; font-weight:700; font-family:'Outfit',sans-serif;
  cursor:pointer; transition:all 0.2s; box-shadow:0 2px 8px rgba(224,43,43,0.25);
  text-decoration:none; line-height:1.4;
}
.jcm-btn-primary:hover { background:#c82323; box-shadow:0 4px 16px rgba(224,43,43,0.3); transform:translateY(-1px); color:#fff !important; text-decoration:none; }
.jcm-btn-primary:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
.jcm-btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; color:#777; border:2px solid #e5e5e5; border-radius:8px;
  padding:14px 22px; font-size:15px; font-weight:600; font-family:'Outfit',sans-serif;
  cursor:pointer; transition:all 0.15s; text-decoration:none; line-height:1.4;
}
.jcm-btn-ghost:hover { border-color:#ccc; color:#222; text-decoration:none; }
.jcm-btn-row { display:flex; justify-content:space-between; align-items:center; margin-top:32px; gap:12px; }
.jcm-home-link { display:inline-block; margin-top:20px; font-size:14px; color:#999; text-decoration:none; transition:color 0.15s; }
.jcm-home-link:hover { color:#e02b2b; text-decoration:underline; }

/* Form */
.jcm-form-wrap { display:flex; flex-direction:column; gap:22px; }
.jcm-step-label { font-size:13px; font-weight:700; letter-spacing:1px; color:#e02b2b; text-transform:uppercase; }
.jcm-form-title { font-family:'Outfit',sans-serif; font-size:30px; font-weight:800; color:#1a1a2e; margin-top:-4px; }
.jcm-form-sub { font-size:15px; color:#777; margin-top:-10px; }
.jcm-field-row { display:flex; gap:14px; }
.jcm-field-group { display:flex; flex-direction:column; gap:6px; flex:1; }
.jcm-field-group.flex2 { flex:2; }
.jcm-label { font-size:14px; font-weight:600; color:#222; }
.jcm-optional { font-weight:400; color:#999; font-size:13px; }

.jcm-memorial-app .jcm-input,
.jcm-memorial-app .jcm-select,
.jcm-memorial-app .jcm-textarea {
  background:#fff; border:2px solid #e5e5e5; border-radius:8px;
  padding:12px 14px; font-size:15px; color:#222; font-family:'Outfit',sans-serif;
  outline:none; transition:border-color 0.2s; width:100%; -webkit-appearance:none;
}
.jcm-memorial-app .jcm-input:focus, .jcm-memorial-app .jcm-select:focus, .jcm-memorial-app .jcm-textarea:focus {
  border-color:#e02b2b; box-shadow:0 0 0 3px rgba(224,43,43,0.08);
}
.jcm-memorial-app .jcm-input::placeholder, .jcm-memorial-app .jcm-textarea::placeholder { color:#bbb; }
.jcm-memorial-app .jcm-select { cursor:pointer; }
.jcm-memorial-app .jcm-textarea { resize:vertical; line-height:1.6; }

/* Upload */
.jcm-upload-zone { border:2px dashed #e5e5e5; border-radius:10px; padding:24px; display:flex; justify-content:center; align-items:center; min-height:130px; cursor:pointer; transition:all 0.2s; background:#fafafa; }
.jcm-upload-zone:hover { border-color:#ccc; background:#f7f7f7; }
.jcm-upload-placeholder { display:flex; flex-direction:column; align-items:center; gap:8px; }
.jcm-upload-icon { width:48px; height:48px; border-radius:50%; background:#fef2f2; display:flex; align-items:center; justify-content:center; font-size:22px; }
.jcm-upload-text { font-size:14px; color:#777; }
.jcm-upload-text strong { color:#e02b2b; }
.jcm-preview-img { max-height:220px; max-width:100%; border-radius:8px; object-fit:contain; }

/* Chips */
.jcm-chip-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.jcm-cause-chip, .jcm-trait-chip {
  padding:9px 16px; border-radius:8px; border:2px solid #e5e5e5;
  background:#fff; color:#444; cursor:pointer; font-size:13px; font-weight:500;
  font-family:'Outfit',sans-serif; transition:all 0.15s; text-align:left; line-height:1.4;
}
.jcm-cause-chip:hover { border-color:#ccc; background:#f7f7f7; }
.jcm-cause-chip.active { border-color:#e02b2b; background:#fef2f2; color:#c82323; font-weight:600; }
.jcm-trait-chip { border-radius:100px; }
.jcm-trait-chip:hover { border-color:#ccc; background:#f7f7f7; }
.jcm-trait-chip.active { border-color:#2a9d8f; background:#f0fdf9; color:#1a7a6e; font-weight:600; }

/* Other chip text field */
.jcm-chip-other { margin-top:10px; }

/* Follow-up field that appears after chip selection */
.jcm-followup { margin-top:10px; position:relative; }
.jcm-followup::before {
  content:"↳";
  position:absolute; left:-22px; top:14px;
  color:#ccc; font-size:14px;
}
.jcm-followup-input {
  background:#fff; border:2px solid #e5e5e5; border-radius:8px;
  padding:12px 14px; font-size:14px; color:#222; font-family:'Outfit',sans-serif;
  outline:none; transition:border-color 0.2s; width:100%; border-style:dashed;
}
.jcm-followup-input:focus { border-color:#e02b2b; border-style:solid; box-shadow:0 0 0 3px rgba(224,43,43,0.08); }
.jcm-followup-input::placeholder { color:#bbb; font-style:italic; }

/* Generating */
.jcm-generating { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:360px; gap:4px; }
.jcm-gen-icon { font-size:48px; margin-bottom:16px; }
.jcm-dots { display:flex; gap:8px; margin-top:20px; }
.jcm-dot { width:10px; height:10px; border-radius:50%; background:#e02b2b; animation:jcmPulse 1.2s ease infinite; }
.jcm-dot:nth-child(2) { animation-delay:0.2s; }
.jcm-dot:nth-child(3) { animation-delay:0.4s; }
.jcm-error-msg { color:#e02b2b; font-size:14px; font-weight:500; padding:10px 14px; background:#fef2f2; border-radius:8px; }

/* Memorial Card */
.jcm-result-wrap { display:flex; flex-direction:column; gap:28px; }
.jcm-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #e5e5e5; box-shadow:0 12px 48px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.04); }
.jcm-card-accent { height:4px; background:linear-gradient(90deg,#1a1a2e,#333,#1a1a2e); }
.jcm-card-content { padding:40px 44px; }
.jcm-card-header { text-align:center; margin-bottom:24px; }
.jcm-card-in-loving { font-family:'Lora',serif; font-size:16px; font-style:italic; color:#999; letter-spacing:1px; margin-bottom:8px; }
.jcm-card-car-name { font-family:'Lora',serif; font-size:30px; font-weight:700; color:#1a1a2e; line-height:1.2; }
.jcm-card-car-sub { font-size:15px; color:#777; margin-top:4px; }
.jcm-card-years-line { font-family:'Outfit',sans-serif; font-size:14px; font-weight:600; color:#999; letter-spacing:3px; margin-top:8px; }
.jcm-card-photo-wrap { margin:0 -44px; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; }
.jcm-card-photo { width:100%; max-height:360px; object-fit:cover; display:block; }
.jcm-card-body { padding-top:24px; }
.jcm-card-details { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; padding:0 0 20px; margin-bottom:20px; }
.jcm-detail-item { font-size:13px; color:#888; }
.jcm-detail-item strong { color:#444; font-weight:600; }
.jcm-card-tribute { text-align:center; padding:8px 0 20px; }
.jcm-card-tribute-divider { width:40px; height:1px; background:#ddd; margin:0 auto 20px; }
.jcm-card-tribute-divider:last-child { margin:20px auto 0; }
.jcm-card-tribute-text { font-family:'Lora',serif; font-size:17px; font-style:italic; line-height:1.8; color:#333; max-width:480px; margin:0 auto; }
.jcm-card-diagnosis { text-align:center; padding:12px 0 0; border-top:1px solid #f0f0f0; margin-top:8px; }
.jcm-card-diagnosis-label { font-size:12px; font-weight:700; color:#e02b2b; letter-spacing:1px; text-transform:uppercase; }
.jcm-card-diagnosis-value { font-size:14px; color:#555; margin-left:6px; }
.jcm-card-footer { text-align:center; padding:24px 44px 32px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.jcm-card-footer-text { font-size:12px; color:#aaa; }
.jcm-card-footer-date { font-size:11px; color:#ccc; }

/* Publish */
.jcm-publish-section, .jcm-published-section { text-align:center; background:#f9fafb; border-radius:12px; padding:28px 24px; border:1px solid #eee; }
.jcm-publish-title { font-family:'Outfit',sans-serif; font-size:20px; font-weight:700; color:#1a1a2e; margin-bottom:6px; }
.jcm-publish-sub { font-size:14px; color:#777; margin-bottom:16px; max-width:420px; margin-left:auto; margin-right:auto; }
.jcm-publish-note { font-size:13px; color:#999; margin-top:12px; }
.jcm-publish-fields { max-width:440px; margin:0 auto 8px; text-align:left; }
.jcm-published-check { width:48px; height:48px; border-radius:50%; background:#f0fdf9; color:#2a9d8f; font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }

/* Share */
.jcm-share-section { text-align:center; background:#f7f7f7; border-radius:12px; padding:28px 24px; border:1px solid #eee; }
.jcm-share-title { font-family:'Outfit',sans-serif; font-size:20px; font-weight:700; color:#1a1a2e; margin-bottom:4px; }
.jcm-share-sub { font-size:14px; color:#777; margin-bottom:18px; }
.jcm-share-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jcm-share-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:8px; border:2px solid #e5e5e5;
  background:#fff; color:#444; cursor:pointer; font-family:'Outfit',sans-serif;
  font-size:14px; font-weight:600; transition:all 0.15s; text-decoration:none; line-height:1.4;
}
.jcm-share-btn:hover { border-color:#ccc; transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.jcm-share-btn.twitter:hover { border-color:#1da1f2; color:#1da1f2; }
.jcm-share-btn.facebook:hover { border-color:#1877f2; color:#1877f2; }
.jcm-share-btn.download:hover { border-color:#e02b2b; color:#e02b2b; }
.jcm-share-btn.copy:hover { border-color:#2a9d8f; color:#2a9d8f; }
.jcm-share-btn svg { flex-shrink:0; }

/* Gallery */
.jcm-gallery { padding:40px 0 20px; }
.jcm-gallery-title { font-family:'Outfit',sans-serif; font-size:28px; font-weight:800; color:#1a1a2e; text-align:center; margin-bottom:4px; }
.jcm-gallery-sub { font-size:15px; color:#777; text-align:center; margin-bottom:28px; }
.jcm-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.jcm-gallery-card { background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; transition:all 0.2s; display:flex; flex-direction:column; }
.jcm-gallery-card:hover { border-color:#ddd; box-shadow:0 4px 16px rgba(0,0,0,0.08); transform:translateY(-2px); }
.jcm-gallery-photo { height:180px; background-size:cover; background-position:center; background-color:#f5f5f5; }
.jcm-gallery-photo-empty { display:flex; align-items:center; justify-content:center; }
.jcm-gallery-photo-empty span { font-size:48px; opacity:0.3; }
.jcm-gallery-info { padding:16px 18px 18px; }
.jcm-gallery-name { font-family:'Lora',serif; font-size:18px; font-weight:700; color:#1a1a2e; margin-bottom:2px; }
.jcm-gallery-vehicle { font-size:13px; color:#888; margin-bottom:4px; }
.jcm-gallery-by { font-size:12px; color:#aaa; margin-bottom:6px; }
.jcm-gallery-snippet { font-family:'Lora',serif; font-size:13px; font-style:italic; color:#666; line-height:1.6; }
.jcm-gallery-comments { font-size:12px; color:#2a9d8f; font-weight:600; margin-top:8px; display:inline-block; }
.jcm-gallery-empty { text-align:center; padding:40px 20px; color:#999; }

@media (max-width:600px) {
  .jcm-memorial-app { padding:20px 16px 40px; }
  .jcm-hero-title { font-size:34px; }
  .jcm-form-title { font-size:24px; }
  .jcm-field-row { flex-direction:column; gap:16px; }
  .jcm-card-content { padding:32px 24px; }
  .jcm-card-photo-wrap { margin:0 -24px; }
  .jcm-card-footer { padding:24px 24px 28px; }
  .jcm-share-grid { grid-template-columns:1fr; }
  .jcm-card-car-name { font-size:24px; }
  .jcm-hero-features { gap:16px; }
  .jcm-gallery-grid { grid-template-columns:1fr; }
  .jcm-followup::before { display:none; }
}