/* Ivory & Vine — Draft Form Styles */
/* Ivory & Vine — Draft Form Styles */
/* FORM */
#screen-form{display:none;align-items:flex-start;justify-content:center;padding:40px 20px;background:var(--ivory);min-height:100vh}
#screen-form.active{display:flex}
.form-wrap{width:100%;max-width:580px}
.form-header{text-align:center;margin-bottom:40px}
.form-header .logo{margin-bottom:32px;display:block}
.form-header h2{font-family:var(--font-h);font-size:clamp(26px,4vw,38px);font-weight:300;color:var(--dark);margin-bottom:6px}
.form-header p{font-size:13px;color:var(--muted)}
.step-indicator{display:flex;align-items:center;justify-content:center;margin-bottom:36px}
.si-step{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .3s;z-index:1;background:var(--ivory)}
.si-step.active{border-color:var(--gold);color:var(--gold)}
.si-step.done{background:var(--gold);border-color:var(--gold);color:#fff}
.si-line{flex:1;height:1px;background:var(--border);max-width:48px}
.form-step{display:none}
.form-step.active{display:block}
.form-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:36px;box-shadow:var(--shadow)}
.step-title{font-family:var(--font-h);font-size:24px;font-weight:400;color:var(--dark);margin-bottom:4px}
.step-sub{font-size:13px;color:var(--muted);margin-bottom:28px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.field label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--ivory);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;font-size:14px;color:var(--dark);transition:border-color .2s;-webkit-appearance:none;appearance:none;font-family:var(--font-b)}
.field textarea{min-height:92px;resize:vertical;line-height:1.6}
.field .ft-sm{min-height:78px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:var(--border)}
.field-hint{font-size:.72rem;color:var(--muted);line-height:1.55;margin-top:2px}
.content-mode{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px;padding:10px;border:1px solid rgba(194,163,96,.22);border-radius:10px;background:rgba(194,163,96,.045);min-width:0}
.content-mode span{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-family:var(--font-b)}
.content-mode select{width:100%;min-width:0;max-width:100%;padding:8px 30px 8px 10px;font-size:.76rem;background:#fff}
.content-mode small{color:var(--muted);font-size:.72rem;line-height:1.45}
.field-with-mode{gap:9px}
.field-with-mode .content-mode{margin-top:0;margin-bottom:2px}
.field-row-content-modes{align-items:stretch}
.field-row-content-modes .field{margin-bottom:20px}
.couple-connector{display:flex;align-items:center;gap:12px}
.couple-connector input{flex:1}
.couple-connector .amp{font-family:var(--font-h);font-size:24px;color:var(--gold);flex-shrink:0}
.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.style-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px 14px;cursor:pointer;transition:all .2s;background:var(--ivory);display:flex;flex-direction:column;gap:4px}
.style-card:hover{border-color:var(--gold)}
.style-card.selected{border-color:var(--gold);background:#FDF6ED}
.style-card input{display:none}
.style-card .s-emoji{font-size:20px;margin-bottom:4px}
.style-card .s-name{font-size:13px;font-weight:500;color:var(--dark)}
.style-card .s-desc{font-size:11px;color:var(--muted);line-height:1.4}

/* Toggle buttons */
.toggle-group{display:flex;gap:0;margin-bottom:20px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.toggle-btn{flex:1;padding:11px 16px;font-size:12px;letter-spacing:1px;text-transform:uppercase;background:var(--ivory);color:var(--muted);border:none;cursor:pointer;transition:all .2s;font-family:var(--font-b)}
.toggle-btn:not(:last-child){border-right:1px solid var(--border)}
.toggle-btn.active{background:var(--gold);color:#fff}
.toggle-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:block}

.sections-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.sec-check{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;cursor:pointer;transition:all .2s;background:var(--ivory)}
.sec-check:hover{border-color:var(--gold)}
.sec-check.checked{border-color:var(--gold);background:#FDF6ED}
.sec-check input{display:none}
.ck-box{width:16px;height:16px;border-radius:3px;border:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s}
.sec-check.checked .ck-box{background:var(--gold);border-color:var(--gold)}
.sec-check.checked .ck-box::after{content:'✓';color:#fff;font-size:10px}
.ck-label{font-size:12px;color:var(--text)}
.form-nav .btn-secondary{color:var(--text);border-color:var(--border)}
.form-nav .btn-secondary:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.form-nav{display:flex;align-items:center;justify-content:space-between;margin-top:24px}
.color-preset{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--border);border-radius:50px;background:var(--ivory);font-family:var(--font-b);font-size:.68rem;color:var(--text);cursor:pointer;transition:all .2s;white-space:nowrap}
.color-preset:hover{border-color:var(--gold);color:var(--gold)}
.color-preset.selected{border-color:var(--gold);background:#FDF6ED;color:var(--dark);font-weight:500}
.cp-swatch{display:flex;align-items:center;flex-shrink:0}
.cp-swatch span{width:16px;height:16px;border-radius:50%;display:inline-block;border:2px solid rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.cp-swatch span:not(:first-child){margin-left:-7px}
.extra-check{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .2s;background:var(--ivory)}
.extra-check:hover{border-color:var(--gold);background:#FDF6ED}
.extra-check.checked{border-color:var(--gold);background:#FDF6ED}
.extra-icon{font-size:1.2rem;flex-shrink:0}
.extra-text{flex:1}
.extra-title{display:block;font-size:.82rem;color:var(--dark);font-weight:400;margin-bottom:2px}
.extra-desc{display:block;font-size:.72rem;color:var(--muted);line-height:1.5}
.extra-check-box{width:18px;height:18px;border-radius:4px;border:2px solid var(--border);background:transparent;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:11px;color:#fff}
.extra-check.checked .extra-check-box{background:var(--gold);border-color:var(--gold)}
.extra-check.checked .extra-check-box::after{content:'✓'}
.error-msg{background:#FFF0F0;border:1px solid #FFCDD2;color:#C62828;padding:12px 16px;border-radius:var(--radius);font-size:13px;margin-top:12px;display:none}
.error-msg.visible{display:block}

/* EMAIL / PENDING / LOADING */
#screen-email{display:none;align-items:center;justify-content:center;padding:40px 20px;background:var(--surface)}
#screen-email.active{display:flex}
.email-wrap{max-width:480px;width:100%;text-align:center}
.email-wrap .logo{margin-bottom:32px;display:block}
.email-icon{font-size:48px;margin-bottom:16px}
.email-wrap h2{font-family:var(--font-h);font-size:clamp(24px,4vw,36px);font-weight:300;color:var(--dark);margin-bottom:8px}
.email-wrap p{font-size:14px;color:var(--muted);margin-bottom:28px;line-height:1.7}
.email-form{display:flex;flex-direction:column;gap:12px}
.email-form input{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;font-size:15px;color:var(--dark);text-align:center;transition:border-color .2s;width:100%}
.email-form input:focus{outline:none;border-color:var(--gold)}
.email-form .btn-primary{width:100%;justify-content:center}
.dsgvo-note{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.6}
#screen-pending{display:none;align-items:center;justify-content:center;text-align:center;padding:40px 20px;background:var(--surface)}
#screen-pending.active{display:flex}
.pending-wrap{max-width:440px}
.pending-wrap .logo{margin-bottom:32px;display:block}
.pending-icon{margin-bottom:24px;display:flex;justify-content:center}
.modal-success-icon{margin-bottom:20px;display:flex;justify-content:center}
.pending-wrap h2{font-family:var(--font-h);font-size:clamp(24px,4vw,36px);font-weight:300;color:var(--dark);margin-bottom:12px}
.pending-wrap p{font-size:14px;color:var(--muted);line-height:1.8}
#screen-loading{display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:var(--dark)}
#screen-loading.active{display:flex}
.loading-ring{width:64px;height:64px;border-radius:50%;border:2px solid rgba(196,167,107,.2);border-top-color:var(--gold);animation:spin 1.2s linear infinite;margin-bottom:32px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-headline{font-family:var(--font-h);font-size:clamp(22px,3vw,32px);font-weight:300;color:var(--gold);margin-bottom:12px}
.loading-msg{font-size:13px;color:rgba(255,255,255,.5);min-height:20px}

/* PREVIEW TOPBAR */
#screen-preview{display:none;position:relative}
#screen-preview.active{display:block}
.preview-topbar{position:sticky;top:0;z-index:500;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;flex-wrap:wrap}
.topbar-left{display:flex;align-items:center;gap:16px}
.topbar-badge{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(196,167,107,.4);padding:4px 12px;border-radius:20px}
.topbar-couple{font-family:var(--font-h);font-size:18px;color:#fff}
.topbar-right{display:flex;gap:8px;flex-wrap:wrap}

/* ═══════════════════════════════════════
   WEDDING WEBSITE
═══════════════════════════════════════ */