/* Step Form Geek Styling - Updated Design System */

:root{
  --sfg-primary-color: #763695;
  --sfg-text-color: #1E2939;
  --sfg-background-color: #F9F0FA;
  --sfg-border-radius-lg: 24px;
  --sfg-border-radius-md: 16px;
  --sfg-border-radius-sm: 6px;
  --sfg-font-title: 'Instrument Serif', serif;
  --sfg-font-text: 'Lato', sans-serif;
  --sfg-font-size-text: 18px;
}

/* Landing Page */
.sfg-container{width:100%;max-width:1200px;margin:0 auto}
.sfg-landing{background:linear-gradient(135deg, var(--sfg-background-color) 0%, #f0dae8 100%);min-height:400px;display:flex;align-items:center;justify-content:center;padding:40px 20px;text-align:center;border-radius: 24px;}
.sfg-landing-content{max-width:600px}
.sfg-landing-icon{margin-bottom:30px;display:flex;justify-content:center}
.sfg-landing-icon svg,
.sfg-landing-icon img{width:80px;height:80px;opacity:0.9}
.sfg-landing h1{font-family:var(--sfg-font-title);font-size:48px;color:var(--sfg-primary-color);margin:20px 0;font-weight:normal;letter-spacing:-0.5px}
.sfg-landing p{font-family:var(--sfg-font-text);font-size:var(--sfg-font-size-text);color:var(--sfg-text-color);line-height:1.6;margin:20px 0 30px}
.sfg-start-btn{background:var(--sfg-primary-color);color:#fff;border:1px solid var(--sfg-primary-color);padding:8px 24px;font-size:var(--sfg-font-size-text);border-radius:var(--sfg-border-radius-md);cursor:pointer;transition:all 0.3s;font-weight:600;font-family:var(--sfg-font-text)}
.sfg-start-btn:hover{background:#6a2a78;border-color:#6a2a78}

/* Form Container */
.sfg-form-container{background:var(--sfg-background-color);min-height:600px;padding:40px 20px;border-radius:var(--sfg-border-radius-lg);}
.sfg-wrapper{max-width:800px;margin:0 auto;background:transparent;padding:40px;border-radius:var(--sfg-border-radius-lg);box-shadow:none}

/* Header */
.sfg-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid #e7d7ea}
.sfg-header-left{display:flex;align-items:center;gap:12px;font-family:var(--sfg-font-title);font-size:18px;color:var(--sfg-primary-color);font-weight:600}
.sfg-header-left svg,
.sfg-header-left img{width:24px;height:24px}
#sfg-total{font-family:var(--sfg-font-title);color:var(--sfg-primary-color);font-size:28px;font-weight:normal;margin:0}

/* Steps */
.sfg-step{padding:30px 0;display:none;animation:fadeIn 0.3s}
.sfg-step.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)};to{opacity:1;transform:translateY(0)}}

.sfg-step h3{font-family:var(--sfg-font-title);font-size:32px;color:var(--sfg-primary-color);margin:0 0 10px 0;font-weight:normal;letter-spacing:-0.5px}
.sfg-step > p:first-of-type{font-family:var(--sfg-font-text);color:var(--sfg-text-color);margin:10px 0 30px 0;font-size:var(--sfg-font-size-text)}
.sfg-step > p:not(:first-of-type){font-family:var(--sfg-font-text);font-size:var(--sfg-font-size-text);margin:0}

/* Radio/Checkbox Options */
.sfg-option{margin:20px 0;padding:15px;border:2px solid #e7d7ea;border-radius:var(--sfg-border-radius-sm);cursor:pointer;transition:all 0.2s}
.sfg-option:hover{border-color:var(--sfg-primary-color);background:#fafafa}
.sfg-option input[type="radio"],
.sfg-option input[type="checkbox"]{margin-right:12px;cursor:pointer;width:18px;height:18px}
.sfg-option label{cursor:pointer;display:block;margin:0;font-weight:normal;color:var(--sfg-text-color);font-family:var(--sfg-font-text);font-size:16px}
.sfg-option .sfg-option-description{display:block;margin-top:8px;margin-left:30px;color:#4A5565;font-size:14px;font-weight:normal;font-family:var(--sfg-font-text)}
.sfg-option input[type="radio"]:checked,
.sfg-option input[type="checkbox"]:checked{accent-color:var(--sfg-primary-color)}

/* Number Input */
.sfg-number-input{margin:20px 0}
.sfg-number-input label{display:block;margin-bottom:10px;font-weight:600;color:var(--sfg-text-color);font-family:var(--sfg-font-text);font-size:16px}
.sfg-number-input input[type="number"]{width:100%;padding:10px;font-size:16px;border:2px solid #e7d7ea;border-radius:var(--sfg-border-radius-sm);font-family:var(--sfg-font-text)}
.sfg-number-input input[type="number"]:focus{outline:none;border-color:var(--sfg-primary-color);box-shadow:0 0 0 3px rgba(118,54,149,0.1)}

/* Text/Email Inputs */
.sfg-text-input{margin:15px 0}
.sfg-text-input input,
.sfg-text-input select,
.sfg-text-input textarea{width:100%;padding:12px;font-size:15px;border:2px solid #e7d7ea;border-radius:var(--sfg-border-radius-sm);font-family:var(--sfg-font-text);color:var(--sfg-text-color)}
.sfg-text-input input:focus,
.sfg-text-input select:focus,
.sfg-text-input textarea:focus{outline:none;border-color:var(--sfg-primary-color);box-shadow:0 0 0 3px rgba(118,54,149,0.1)}

/* Actions */
.sfg-actions{display:flex;gap:15px;margin-top:30px;justify-content:flex-end}
.sfg-actions button{padding:8px 24px;font-size:var(--sfg-font-size-text);border-radius:var(--sfg-border-radius-md);border:1px solid var(--sfg-primary-color);cursor:pointer;transition:all 0.3s;font-weight:600;font-family:var(--sfg-font-text)}

/* Primary Button */
.sfg-next,
.sfg-submit{background:var(--sfg-primary-color);color:#fff;border:1px solid var(--sfg-primary-color)}
.sfg-next:hover,
.sfg-submit:hover{background:#6a2a78;border-color:#6a2a78}

/* Outline Button */
.sfg-prev{color:var(--sfg-primary-color);background:transparent;border:1px solid var(--sfg-primary-color)}
.sfg-prev:hover{background:var(--sfg-background-color)}

/* Summary */
.sfg-summary-box{background:var(--sfg-background-color);padding:20px;border-radius:var(--sfg-border-radius-sm);border-left:4px solid var(--sfg-primary-color);margin:20px 0}
.sfg-summary-box p{margin:0 0 15px 0;font-size:16px;font-family:var(--sfg-font-text);color:var(--sfg-text-color)}
.sfg-summary-box strong{color:var(--sfg-primary-color)}
.sfg-summary-box ul{margin:10px 0;padding-left:20px;list-style:none}
.sfg-summary-box li{margin:8px 0;color:var(--sfg-text-color);font-size:14px;font-family:var(--sfg-font-text)}
.sfg-summary-box li:before{content:"✓ ";color:var(--sfg-primary-color);font-weight:bold;margin-right:8px}

.sfg-summary-container{background:transparent;padding:30px;border-radius:var(--sfg-border-radius-lg);margin:20px 0}
.sfg-summary-header{border-bottom:2px solid var(--sfg-primary-color);padding-bottom:20px;margin-bottom:20px}
.sfg-summary-header h2{font-family:var(--sfg-font-title);font-size:24px;color:var(--sfg-primary-color);margin:0;font-weight:normal}
.sfg-summary-content h3{font-family:var(--sfg-font-title);font-size:16px;color:var(--sfg-primary-color);margin:0 0 20px 0;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.sfg-summary-items{display:grid;gap:15px;margin-bottom:25px}
.sfg-summary-item{background:transparent;padding:15px;border-radius:var(--sfg-border-radius-sm);display:grid;grid-template-columns:1fr 1fr auto;gap:15px;align-items:center;border-left:4px solid var(--sfg-primary-color)}
.sfg-summary-label{font-weight:600;color:var(--sfg-primary-color);font-size:13px;text-transform:uppercase;letter-spacing:0.5px;font-family:var(--sfg-font-text)}
.sfg-summary-value{color:var(--sfg-text-color);font-size:14px;font-family:var(--sfg-font-text)}
.sfg-summary-price{color:var(--sfg-primary-color);font-weight:600;text-align:right;font-family:var(--sfg-font-text)}
.sfg-summary-total{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:20px;background:transparent;border-radius:var(--sfg-border-radius-sm);border-left:4px solid var(--sfg-primary-color);align-items:center}
.sfg-summary-total strong{font-size:16px;color:var(--sfg-primary-color);font-family:var(--sfg-font-text)}
.sfg-summary-total-amount{font-family:var(--sfg-font-title);font-size:24px !important;color:var(--sfg-primary-color);text-align:right}
.sfg-summary-note{color:var(--sfg-text-color);font-size:14px;font-style:italic;margin-top:20px;padding:15px;background:transparent;border-left:3px solid #f5a623;border-radius:var(--sfg-border-radius-sm);line-height:1.6;font-family:var(--sfg-font-text)}

/* Contact Section */
.sfg-contact-section{margin-top:20px}
.sfg-form-row{margin:15px 0}

/* Message */
#sfg-message{margin-top:20px;padding:15px;border-radius:var(--sfg-border-radius-sm);text-align:center;display:none;font-family:var(--sfg-font-text)}
#sfg-message.success{display:block;background:#e8f5e9;color:#2e7d32;border:1px solid #c8e6c9}
#sfg-message.error{display:block;background:#ffebee;color:#c62828;border:1px solid #ffcdd2}

/* Responsive */
@media (max-width:600px){
  .sfg-wrapper{padding:20px}
  .sfg-header{flex-direction:column;align-items:flex-start;gap:15px}
  .sfg-actions{flex-direction:column}
  .sfg-actions button{width:100%}
  .sfg-landing h1{font-size:36px}
  .sfg-step h3{font-size:24px}
  .sfg-summary-item{grid-template-columns:1fr}
  .sfg-form-row{display:block !important}
  .sfg-form-row > div{width:100% !important}
}