/* ── Reset & Base ────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:#0a0a0a;color:#fff;line-height:1.5;min-height:100vh}
a{color:#FFD700;text-decoration:none}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header{text-align:center;padding:32px 20px 24px;border-bottom:1px solid #1c1c1c}
.site-logo{font-size:2rem;font-weight:800;letter-spacing:-0.02em;color:#FFD700}
.site-logo span{color:#fff}
.site-tagline{color:#555;font-size:0.85rem;margin-top:5px}

/* ── Builder Layout ──────────────────────────────────────────────────────── */
.builder-wrap{max-width:1200px;margin:0 auto;padding:36px 20px}
.builder-layout{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:start}
.preview-col{position:sticky;top:20px}
.preview-label{font-size:0.72rem;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;text-align:center}

/* ── Form ────────────────────────────────────────────────────────────────── */
.form-section{margin-bottom:28px}
.form-section-title{font-size:0.72rem;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form-row.full{grid-template-columns:1fr}
.field-group{display:flex;flex-direction:column;gap:4px}
.field-group label{font-size:0.73rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:0.05em}
input,select,textarea{background:#161616;border:1px solid #2a2a2a;border-radius:8px;color:#fff;padding:10px 13px;font-family:'Inter',sans-serif;font-size:0.88rem;width:100%;outline:none;transition:border-color 0.2s;-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
select option{background:#1a1a1a}
input:focus,select:focus,textarea:focus{border-color:#FFD700}
textarea{resize:vertical;min-height:70px}
.char-counter{font-size:0.72rem;color:#555;text-align:right;margin-top:3px}
.field-error{font-size:0.72rem;color:#ff7070;margin-top:2px;display:none}
.field-error.show{display:block}

/* ── Template Selector ───────────────────────────────────────────────────── */
.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tpl-card{border:2px solid #2a2a2a;border-radius:10px;padding:12px 10px;cursor:pointer;transition:border-color 0.2s;text-align:center;user-select:none}
.tpl-card.selected{border-color:#FFD700}
.tpl-card-preview{height:60px;border-radius:6px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;letter-spacing:0.03em}
.tpl-card-name{font-size:0.78rem;font-weight:600;color:#ccc}

.tpl-card-preview.prev-gold{background:#1a1a2e;color:#D4AF37;border:1px solid #D4AF37;font-family:'Playfair Display',serif}
.tpl-card-preview.prev-minimal{background:#fff;color:#333;border:1px solid #ddd;font-family:'Inter',sans-serif}
.tpl-card-preview.prev-floral{background:#FFF0F5;color:#D4A0A0;border:1px solid #D4A0A0;font-family:'Lora',serif}
.tpl-card-preview.prev-islamic{background:#FDF8F0;color:#C9A84C;border:1px solid #C9A84C;font-family:'Playfair Display',serif}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-create{display:block;width:100%;padding:16px;background:#FFD700;color:#000;border:none;border-radius:12px;font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;margin-top:24px;transition:transform 0.15s,box-shadow 0.15s;letter-spacing:0.01em}
.btn-create:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,215,0,.3)}
.btn-create:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Success Screen ──────────────────────────────────────────────────────── */
#success-screen{display:none;max-width:560px;margin:60px auto;text-align:center;padding:0 20px}
.success-icon{font-size:3rem;margin-bottom:16px}
.success-title{font-size:1.6rem;font-weight:800;color:#FFD700;margin-bottom:8px}
.success-sub{color:#888;font-size:0.9rem;margin-bottom:28px}
.share-link-box{background:#161616;border:1px solid #2a2a2a;border-radius:10px;padding:14px 16px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.share-link-box span{flex:1;font-size:0.82rem;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.btn-copy{background:#2a2a2a;border:none;color:#FFD700;font-family:'Inter',sans-serif;font-size:0.78rem;font-weight:600;padding:7px 12px;border-radius:6px;cursor:pointer;transition:background 0.15s;white-space:nowrap}
.btn-copy:hover{background:#3a3a3a}
.btn-wa-share{display:block;background:#25D366;color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:0.95rem;padding:14px 20px;border-radius:12px;text-decoration:none;margin-bottom:12px;transition:opacity 0.15s}
.btn-wa-share:hover{opacity:0.9}
.btn-create-new{background:none;border:1px solid #333;color:#888;font-family:'Inter',sans-serif;font-size:0.85rem;padding:10px 20px;border-radius:8px;cursor:pointer;transition:border-color 0.15s}
.btn-create-new:hover{border-color:#FFD700;color:#FFD700}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid #1c1c1c;padding:28px 20px;text-align:center;color:#444;font-size:0.8rem;line-height:1.8}
.site-footer a{color:#666}

/* ── Invitation Wrapper (shared) ─────────────────────────────────────────── */
.invite-wrapper{position:relative;border-radius:12px;overflow:hidden;padding:36px 30px 30px}
.invite-corner{position:absolute;width:40px;height:40px}
.invite-inner{position:relative;z-index:1;text-align:center}
.invite-tag{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;opacity:0.6;margin-bottom:14px}
.couple-names{font-size:2rem;font-weight:700;line-height:1.2;letter-spacing:-0.01em}
.invite-amp{font-size:1.3rem;margin:6px 0;opacity:0.6}
.invite-divider{width:80px;height:1px;margin:16px auto;opacity:0.4}
.invite-subtitle{font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;opacity:0.6;margin-bottom:16px}
.invite-message{font-style:italic;font-size:0.88rem;opacity:0.75;margin-bottom:18px;padding:0 10px;line-height:1.6}
.invite-details{text-align:left;display:inline-block;min-width:220px;margin:0 auto}
.invite-detail-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:0.85rem}
.detail-icon{flex-shrink:0;width:20px}
.detail-text{line-height:1.5}

/* ── Template 1: Elegant Gold ────────────────────────────────────────────── */
.tpl-gold{background:#1a1a2e;color:#fff;font-family:'Playfair Display',serif;border:1px solid #D4AF37}
.tpl-gold .invite-corner{border-color:#D4AF37}
.tpl-gold .invite-corner.tl{top:8px;left:8px;border-top:2px solid #D4AF37;border-left:2px solid #D4AF37}
.tpl-gold .invite-corner.tr{top:8px;right:8px;border-top:2px solid #D4AF37;border-right:2px solid #D4AF37}
.tpl-gold .invite-corner.bl{bottom:8px;left:8px;border-bottom:2px solid #D4AF37;border-left:2px solid #D4AF37}
.tpl-gold .invite-corner.br{bottom:8px;right:8px;border-bottom:2px solid #D4AF37;border-right:2px solid #D4AF37}
.tpl-gold .couple-names{color:#D4AF37}
.tpl-gold .invite-amp{color:#D4AF37}
.tpl-gold .invite-divider{background:linear-gradient(to right,transparent,#D4AF37,transparent)}
.tpl-gold .rsvp-section .rsvp-label{color:#ccc}

/* ── Template 2: Modern Minimalist ──────────────────────────────────────── */
.tpl-minimal{background:#fff;color:#1a1a1a;font-family:'Inter',sans-serif;border:1px solid #e0e0e0}
.tpl-minimal .invite-corner.tl{top:0;left:0;border-top:3px solid #1a1a1a;border-left:3px solid #1a1a1a}
.tpl-minimal .invite-corner.tr{top:0;right:0;border-top:3px solid #1a1a1a;border-right:3px solid #1a1a1a}
.tpl-minimal .invite-corner.bl{bottom:0;left:0;border-bottom:3px solid #1a1a1a;border-left:3px solid #1a1a1a}
.tpl-minimal .invite-corner.br{bottom:0;right:0;border-bottom:3px solid #1a1a1a;border-right:3px solid #1a1a1a}
.tpl-minimal .couple-names{font-weight:600;letter-spacing:0.02em}
.tpl-minimal .invite-amp{color:#D4AF37}
.tpl-minimal .invite-divider{background:linear-gradient(to right,transparent,#D4AF37,transparent)}
.tpl-minimal .invite-tag{color:#888}
.tpl-minimal .invite-subtitle{color:#888}
.tpl-minimal .invite-message{color:#555}
.tpl-minimal .rsvp-section .rsvp-label{color:#555}

/* ── Template 3: Soft Floral ─────────────────────────────────────────────── */
.tpl-floral{background:#FFF0F5;color:#5a3a3a;font-family:'Lora',serif;border:1px solid #D4A0A0}
.tpl-floral .invite-corner{font-size:1.5rem;display:flex;align-items:center;justify-content:center;opacity:0.45}
.tpl-floral .invite-corner::after{content:'✿'}
.tpl-floral .invite-corner.tl{top:6px;left:6px}
.tpl-floral .invite-corner.tr{top:6px;right:6px}
.tpl-floral .invite-corner.bl{bottom:6px;left:6px}
.tpl-floral .invite-corner.br{bottom:6px;right:6px}
.tpl-floral .couple-names{color:#C07070}
.tpl-floral .invite-amp{color:#D4A0A0}
.tpl-floral .invite-divider{background:linear-gradient(to right,transparent,#D4A0A0,transparent)}
.tpl-floral .invite-tag{color:#C07070;opacity:0.7}
.tpl-floral .rsvp-section .rsvp-label{color:#8a6060}

/* ── Template 4: Islamic Geometric ──────────────────────────────────────── */
.tpl-islamic{background:#FDF8F0;color:#3a2e1a;font-family:'Playfair Display',serif;border:2px solid #C9A84C}
.tpl-islamic::before{content:'';position:absolute;inset:6px;border:1px solid #C9A84C;border-radius:8px;pointer-events:none;z-index:0}
.tpl-islamic .invite-corner{width:30px;height:30px;opacity:0.7}
.tpl-islamic .invite-corner.tl{top:12px;left:12px;border-top:2px solid #C9A84C;border-left:2px solid #C9A84C}
.tpl-islamic .invite-corner.tr{top:12px;right:12px;border-top:2px solid #C9A84C;border-right:2px solid #C9A84C}
.tpl-islamic .invite-corner.bl{bottom:12px;left:12px;border-bottom:2px solid #C9A84C;border-left:2px solid #C9A84C}
.tpl-islamic .invite-corner.br{bottom:12px;right:12px;border-bottom:2px solid #C9A84C;border-right:2px solid #C9A84C}
.tpl-islamic .couple-names{color:#8B6914}
.tpl-islamic .invite-amp{color:#C9A84C}
.tpl-islamic .invite-divider{background:linear-gradient(to right,transparent,#C9A84C,transparent)}
.tpl-islamic .invite-tag{color:#8B6914;opacity:0.7}
.tpl-islamic .rsvp-section .rsvp-label{color:#6a5214}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media(max-width:800px){
  .builder-layout{grid-template-columns:1fr}
  .preview-col{position:static;order:-1}
  .form-row{grid-template-columns:1fr}
  .invite-wrapper{padding:28px 20px 22px}
  .couple-names{font-size:1.6rem}
}