/*
--- Ekstra Plugin Unified Stylesheet ---
Version: 2.1
Description: Final, conflict-free, robust styles for all plugin components.
*/

/* --- Main Container & Typography --- */
.ekstra-container { max-width: 640px; margin: 2rem auto; font-family: system-ui, sans-serif; background-color: #f7f8fc; padding: 1rem; border-radius: 1rem; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); }

/* --- Shared Header --- */
.ekstra-header { text-align: center; padding: 0.5rem 1rem 1.5rem 1rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.5rem; }
.ekstra-header h2 { font-size: 1.75rem; font-weight: 700; color: #374151; }
.ekstra-header p { margin-top: 0.5rem; color: #6b7280; }

/* --- Shared Action Button (Start/Submit) --- */
.ekstra-action-button { display: block; width: 100%; max-width: 300px; margin: 1rem auto; background: linear-gradient(to right, #6d28d9, #4f46e5); color: white; font-weight: 600; padding: 0.8rem 1.5rem; border-radius: 9999px; border: none; cursor: pointer; transition: all 0.2s ease; }
.ekstra-action-button:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

/* --- Aura Quiz --- */
.ekstra-quiz-form.is-hidden { display: none; }
.ekstra-question-container { position: relative; transition: height 0.35s ease-in-out; }

/* CORE FIX: Question Visibility Logic */
.ekstra-question { position: absolute; width: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s ease-in-out, visibility 0.35s; }
.ekstra-question.is-active { position: static; /* Takes up space in the document flow */ opacity: 1; visibility: visible; z-index: 1; }

.ekstra-question-card { background-color: #ffffff; padding: 1.5rem; border-radius: 0.75rem; border: 1px solid #e5e7eb; }
.ekstra-question-text { font-size: 1.125rem; font-weight: 600; color: #1f2937; }
.ekstra-options-container { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }

.ekstra-option { display: flex; align-items: center; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #d1d5db; background-color: #f9fafb; cursor: pointer; transition: all 0.2s ease; }
.ekstra-option:hover { border-color: #a5b4fc; }
.ekstra-option.is-selected { border-color: #6366f1; background-color: #eef2ff; box-shadow: 0 0 0 1px #6366f1; }
.ekstra-option input { display: none; }
.ekstra-option-radio { width: 18px; height: 18px; border: 2px solid #9ca3af; border-radius: 50%; margin-right: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ekstra-option.is-selected .ekstra-option-radio { border-color: #4f46e5; }
.ekstra-option-radio-dot { width: 9px; height: 9px; background-color: #4f46e5; border-radius: 50%; opacity: 0; transition: opacity 0.2s ease; }
.ekstra-option.is-selected .ekstra-option-radio-dot { opacity: 1; }
.ekstra-option-text { color: #374151; font-weight: 500; }

.ekstra-quiz-navigation { margin-top: 1rem; padding: 0.75rem; display: flex; justify-content: space-between; align-items: center; background-color: #fff; border-radius: 0.75rem; border: 1px solid #e5e7eb; }
.ekstra-quiz-button { font-weight: 600; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer; transition: background-color 0.2s; }
.ekstra-quiz-button:disabled { opacity: 0.5; cursor: not-allowed; }
.ekstra-quiz-button.prev { background-color: #e5e7eb; color: #4b5563; }
.ekstra-quiz-button.prev:hover:not(:disabled) { background-color: #d1d5db; }
.ekstra-quiz-button.next { background-color: #4f46e5; color: white; }
.ekstra-quiz-button.next:hover:not(:disabled) { background-color: #4338ca; }

/* --- Aura Calculator --- */
.ekstra-calculator-form { padding: 1.5rem; background: linear-gradient(to right, #a5b4fc, #f472b6); border-radius: 0.75rem; }
.ekstra-calculator-form label { display: block; color: white; font-weight: 600; margin-bottom: 0.5rem; }
.ekstra-calculator-form input { width: 100%; padding: 0.75rem; border-radius: 0.375rem; border: none; }
.ekstra-calculator-form button { width: 100%; margin-top: 1rem; background-color: white; color: #6d28d9; font-weight: 700; padding: 0.7rem; border-radius: 9999px; border: none; cursor: pointer; transition: transform 0.2s; }
.ekstra-calculator-form button:hover { transform: scale(1.05); }

/* --- Shared Result Card --- */
.ekstra-result-card { margin-top: 2rem; padding: 1.5rem; background-color: white; border-radius: 1rem; border-width: 2px; border-style: solid; }
.ekstra-result-title { font-size: 1.5rem; font-weight: 700; text-align: center; }
.ekstra-result-description { margin-top: 1rem; }

/* --- Chakra Visual Bars --- */
.chakra-bar-group { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.chakra-bar-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #4b5563; }
.chakra-bar-label { width: 70px; flex-shrink: 0; font-weight: 500; }
.chakra-bar-track { flex: 1; background-color: #e5e7eb; border-radius: 9999px; overflow: hidden; height: 7px; position: relative; }
.chakra-bar-fill { height: 100%; border-radius: 9999px; transition: width 0.35s ease; }
.chakra-bar-value { width: 40px; text-align: right; font-variant-numeric: tabular-nums; color: #6b7280; }

/* --- Zodiac Compatibility Layout & Bars --- */
.zodiac-compat-form { margin-top: 0.5rem; }
.zodiac-form-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.zodiac-person-card { flex: 1 1 240px; background-color: #ffffff; border-radius: 0.75rem; border: 1px solid #e5e7eb; padding: 1rem; }
.zodiac-person-card h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1rem; font-weight: 700; color: #374151; }
.zodiac-person-card label { display: block; font-size: 0.85rem; font-weight: 600; color: #4b5563; margin-bottom: 0.25rem; }
.zodiac-person-card select { width: 100%; padding: 0.55rem 0.65rem; border-radius: 0.5rem; border: 1px solid #d1d5db; font-size: 0.9rem; }
.zodiac-form-row { margin-top: 1rem; }
.zodiac-form-row label { display: block; font-size: 0.9rem; font-weight: 600; color: #4b5563; margin-bottom: 0.25rem; }
.zodiac-form-row select { width: 100%; max-width: 260px; padding: 0.55rem 0.65rem; border-radius: 9999px; border: 1px solid #d1d5db; font-size: 0.9rem; }

.zodiac-main-score { margin-top: 0.9rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem; }
.zodiac-main-score-number { font-size: 1.8rem; font-weight: 800; color: #4f46e5; min-width: 70px; text-align: center; }
.zodiac-main-score-track { flex: 1; background-color: #e5e7eb; border-radius: 9999px; overflow: hidden; height: 10px; }
.zodiac-main-score-fill { height: 100%; border-radius: 9999px; background: linear-gradient(to right, #f97316, #6366f1); transition: width 0.4s ease; }

.zodiac-bar-group { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.zodiac-bar-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #4b5563; }
.zodiac-bar-label { width: 105px; flex-shrink: 0; font-weight: 500; }
.zodiac-bar-track { flex: 1; background-color: #e5e7eb; border-radius: 9999px; overflow: hidden; height: 7px; }
.zodiac-bar-fill { height: 100%; border-radius: 9999px; background-color: #6366f1; transition: width 0.35s ease; }
.zodiac-bar-value { width: 40px; text-align: right; font-variant-numeric: tabular-nums; color: #6b7280; }

/* Relationship test results reuse zodiac-main-score and zodiac-bar-* görünümleri */

/* --- Name Numerology Layout --- */
.name-numerology-form { margin-top: 0.5rem; }
.name-num-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.name-num-field-card { flex: 1 1 260px; background-color: #ffffff; border-radius: 0.75rem; border: 1px solid #e5e7eb; padding: 1rem; }
.name-num-field-card label { display: block; font-size: 0.9rem; font-weight: 600; color: #4b5563; margin-bottom: 0.35rem; }
.name-num-field-card input[type="text"],
.name-num-field-card input[type="date"] { width: 100%; padding: 0.6rem 0.7rem; border-radius: 0.5rem; border: 1px solid #d1d5db; font-size: 0.9rem; }
.name-num-help { margin-top: 0.35rem; font-size: 0.8rem; color: #6b7280; }
.name-num-field-card .optional { font-size: 0.8rem; color: #9ca3af; font-weight: 400; }

.name-num-system-row { margin-top: 1rem; }
.name-num-system-row label { display: block; font-size: 0.9rem; font-weight: 600; color: #4b5563; margin-bottom: 0.25rem; }
.name-num-system-row select { width: 100%; max-width: 280px; padding: 0.55rem 0.65rem; border-radius: 9999px; border: 1px solid #d1d5db; font-size: 0.9rem; }

.name-num-chip-group { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.name-num-chip { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-radius: 0.75rem; border-width: 2px; border-style: solid; background-color: #ffffff; }
.name-num-chip-number { width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; }
.name-num-chip-text { display: flex; flex-direction: column; }
.name-num-chip-title { font-size: 0.85rem; font-weight: 700; color: #374151; }
.name-num-chip-sub { font-size: 0.8rem; color: #6b7280; }

.name-num-detail-group { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.name-num-detail { padding-top: 0.25rem; border-top: 1px dashed #e5e7eb; }
.name-num-detail-title { font-size: 0.9rem; font-weight: 700; color: #374151; margin-bottom: 0.25rem; }
.name-num-detail-body { font-size: 0.85rem; color: #4b5563; }
.name-num-detail-body p { margin: 0.15rem 0; }

/* --- Utility & Color Classes --- */
.hidden { display: none; }
.border-red-500 { border-color: #ef4444; } .text-red-500 { color: #ef4444; }
.border-orange-500 { border-color: #f97316; } .text-orange-500 { color: #f97316; }
.border-yellow-500 { border-color: #eab308; } .text-yellow-500 { color: #eab308; }
.border-green-500 { border-color: #22c55e; } .text-green-500 { color: #22c55e; }
.border-blue-500 { border-color: #3b82f6; } .text-blue-500 { color: #3b82f6; }
.border-indigo-600 { border-color: #4f46e5; } .text-indigo-600 { color: #4f46e5; }
.border-purple-600 { border-color: #9333ea; } .text-purple-600 { color: #9333ea; }
.border-pink-500 { border-color: #ec4899; } .text-pink-500 { color: #ec4899; }
.border-amber-500 { border-color: #f59e0b; } .text-amber-500 { color: #f59e0b; }
.border-gray-400 { border-color: #9ca3af; } .text-gray-400 { color: #9ca3af; }

/* --- Test Result Description Styling (Prevents CSS Conflicts) --- */
.ekstra-test-result-description { font-size: 0.95rem !important; line-height: 1.6 !important; color: #4b5563 !important; }
.ekstra-test-result-description p { margin: 0.5rem 0 !important; font-size: 0.95rem !important; line-height: 1.6 !important; }
.ekstra-test-result-description strong { font-weight: 700 !important; color: #1f2937 !important; }
.ekstra-test-result-description ul, .ekstra-test-result-description ol { margin: 0.75rem 0 !important; padding-left: 1.5rem !important; }
.ekstra-test-result-description li { margin: 0.4rem 0 !important; line-height: 1.5 !important; }
.ekstra-test-result-description div { margin: 0 !important; }
.ekstra-test-result-description h3, .ekstra-test-result-description h4 { font-size: 1rem !important; font-weight: 700 !important; margin: 0.75rem 0 0.5rem 0 !important; color: #1f2937 !important; }