/* --- BULLETPROOF ESTO PLANNER CSS V3 (With Auto-Wrapping Grid) --- */
.esto-full-wrapper { width: 100% !important; max-width: 1200px !important; margin: 40px auto !important; font-family: inherit !important; color: #1f2937 !important; }
.esto-dashboard { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px !important; align-items: start !important; }
.esto-panel { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 32px !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; }

.esto-inputs-panel h3 { margin: 0 0 8px 0 !important; font-size: 28px !important; color: #111827 !important; }
.esto-subtitle { color: #6b7280 !important; margin-bottom: 24px !important; line-height: 1.5 !important; }

.esto-input-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.esto-input-group { margin-bottom: 20px !important; }
.esto-input-group label { display: block !important; font-weight: 600 !important; margin-bottom: 8px !important; font-size: 14px !important; color: #374151 !important; }
.esto-input-group select { width: 100% !important; padding: 12px !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; font-size: 15px !important; box-sizing: border-box !important; background: #ffffff !important; color: #1f2937 !important; cursor: pointer !important; }
.esto-input-group select:focus { outline: none !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; }
.esto-input-group small { display: block !important; color: #6b7280 !important; margin-top: 6px !important; font-size: 12px !important; }

button.esto-btn-main { width: 100% !important; margin-top: 16px !important; padding: 16px !important; background-color: #111827 !important; color: white !important; border: none !important; border-radius: 8px !important; font-size: 18px !important; font-weight: bold !important; cursor: pointer !important; transition: background 0.2s !important; }
button.esto-btn-main:hover { background-color: #374151 !important; }

/* Results Panel */
.esto-results-panel { background: #f9fafb !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.esto-empty-state { text-align: center !important; padding: 60px 20px !important; color: #9ca3af !important; font-style: italic !important; }

/* NEW: Results Grid (Auto-Wrapping) */
.esto-results-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; gap: 24px !important; margin-bottom: 24px !important; }
.esto-grid-item { display: flex !important; flex-direction: column !important; }
.esto-grid-item .esto-window-card { flex-grow: 1 !important; }

.esto-section-heading { margin: 0 0 12px 0 !important; color: #4b5563 !important; text-transform: uppercase !important; font-size: 12px !important; letter-spacing: 0.05em !important; font-weight: bold !important; }

/* Result Cards */
.esto-window-card { background: #ffffff !important; border: 2px solid #e5e7eb !important; border-radius: 8px !important; padding: 20px !important; position: relative !important; }
.esto-window-card.best-match { border-color: #3b82f6 !important; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1) !important; }
.esto-window-card.worst-match { border-color: #fca5a5 !important; background: #fef2f2 !important; }

.esto-window-header { margin-bottom: 16px !important; }
.esto-badge { display: inline-block !important; background: #dbeafe !important; color: #1d4ed8 !important; padding: 4px 10px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: bold !important; text-transform: uppercase !important; }
.esto-badge.alt { background: #d1fae5 !important; color: #047857 !important; }
.esto-badge.danger { background: #fee2e2 !important; color: #b91c1c !important; }

.esto-window-data { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 12px !important; }
.esto-data-label { display: block !important; font-size: 11px !important; color: #6b7280 !important; text-transform: uppercase !important; margin-bottom: 2px !important; font-weight: 600 !important; }
.esto-data-value { display: block !important; font-size: 16px !important; font-weight: 800 !important; color: #111827 !important; }
.esto-data-value.time { color: #2563eb !important; }
.esto-window-card.secondary-match .esto-data-value.time { color: #059669 !important; }
.esto-window-card.worst-match .esto-data-value.time, .esto-window-card.worst-match .esto-data-value { color: #b91c1c !important; }

.esto-rationale { font-size: 13px !important; color: #4b5563 !important; margin: 0 !important; padding-top: 16px !important; border-top: 1px solid #e5e7eb !important; line-height: 1.5 !important; }
.esto-window-card.worst-match .esto-rationale { border-color: #fca5a5 !important; color: #991b1b !important; }

/* CTA */
.esto-cta-card { background: #eff6ff !important; border: 1px solid #bfdbfe !important; border-radius: 8px !important; padding: 24px !important; text-align: center !important; }
.esto-cta-card h4 { margin: 0 0 12px 0 !important; color: #1e3a8a !important; font-size: 18px !important;}
.esto-cta-card p { font-size: 14px !important; color: #3b82f6 !important; margin-bottom: 16px !important; line-height: 1.5 !important;}
a.esto-btn-cta { display: block !important; padding: 14px !important; background-color: #2563eb !important; color: #ffffff !important; text-decoration: none !important; font-weight: bold !important; border-radius: 6px !important; font-size: 16px !important; transition: background 0.2s !important; }
a.esto-btn-cta:hover { background-color: #1d4ed8 !important; }

/* FAQ Styles */
.esto-faq-section { margin-top: 60px !important; padding-top: 40px !important; border-top: 1px solid #e5e7eb !important; }
.esto-faq-section h3 { font-size: 28px !important; color: #111827 !important; margin-bottom: 8px !important; text-align: center !important; }
.esto-faq-intro { text-align: center !important; color: #6b7280 !important; margin: 0 auto 40px auto !important; font-size: 16px !important; max-width: 600px !important; }
.esto-faq-accordion { max-width: 800px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.esto-faq-item { border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; overflow: hidden !important; margin-bottom: 0 !important; }
button.esto-faq-question { width: 100% !important; text-align: left !important; padding: 20px 24px !important; background-color: transparent !important; border: none !important; font-size: 16px !important; font-weight: 600 !important; color: #1f2937 !important; cursor: pointer !important; display: flex !important; justify-content: space-between !important; align-items: center !important; box-shadow: none !important; margin: 0 !important; border-radius: 0 !important; line-height: 1.5 !important; transition: background-color 0.2s ease !important; }
button.esto-faq-question:hover { background-color: #f9fafb !important; }
button.esto-faq-question::after { content: '+'; font-size: 24px !important; color: #6b7280 !important; font-weight: 400 !important; transition: transform 0.3s !important; }
.esto-faq-item.active button.esto-faq-question::after { content: '−' !important; transform: rotate(180deg) !important; }
.esto-faq-answer { max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; transition: all 0.3s ease-in-out !important; background-color: #ffffff !important; padding: 0 24px !important; margin: 0 !important; }
.esto-faq-item.active .esto-faq-answer { max-height: 1000px !important; opacity: 1 !important; padding: 10px 24px 24px 24px !important; }
.esto-faq-answer p { margin: 0 0 16px 0 !important; color: #4b5563 !important; line-height: 1.6 !important; font-size: 15px !important; }
.esto-faq-answer p:last-child { margin-bottom: 0 !important; }

@media (max-width: 860px) {
    .esto-dashboard { grid-template-columns: 1fr !important; }
    .esto-input-grid { grid-template-columns: 1fr !important; }
}