/* Enneagram Scoped Styles */

/* Base overrides for Enneagram pages */
.enneagram-content-wrapper {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
}

/* Common Interactive Elements */
.enneagram-content-wrapper details>summary {
    list-style: none;
}

.enneagram-content-wrapper details>summary::-webkit-details-marker {
    display: none;
}

/* Scrollbar Hiding for Nav */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Animations found in designs */
@keyframes ennea-float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.enneagram-content-wrapper .animate-float {
    animation: ennea-float 6s ease-in-out infinite;
}

@keyframes ennea-morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

/* Type Specific Color Overrides 
   Note: Using !important to ensure these scoped styles override standard utility classes 
   without needing to recompile the main stylesheet. 
*/

/* Type 1: Reformer (Blue #0369a1) */
.enneagram-content-wrapper.ennea-type-1 .bg-primary {
    background-color: #0369a1 !important;
}

.enneagram-content-wrapper.ennea-type-1 .text-primary {
    color: #0369a1 !important;
}

.enneagram-content-wrapper.ennea-type-1 .border-primary {
    border-color: #0369a1 !important;
}

.enneagram-content-wrapper.ennea-type-1 .bg-primary-light {
    background-color: #e0f2fe !important;
}

.enneagram-content-wrapper.ennea-type-1 .bg-primary\/20 {
    background-color: rgba(3, 105, 161, 0.2) !important;
}

.enneagram-content-wrapper.ennea-type-1 .shape-blob {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(248, 250, 252, 0) 70%);
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.8;
    position: absolute;
    z-index: 0;
}

/* Type 2: Helper (Blue #3b82f6) */
.enneagram-content-wrapper.ennea-type-2 .bg-primary-500,
.enneagram-content-wrapper.ennea-type-2 .bg-primary-600 {
    background-color: #3b82f6 !important;
}

.enneagram-content-wrapper.ennea-type-2 .text-primary-600 {
    color: #2563eb !important;
}

.enneagram-content-wrapper.ennea-type-2 .hero-pattern {
    background-color: #ffffff;
    background-image: radial-gradient(#3b82f6 0.5px, #ffffff 0.5px);
    background-size: 20px 20px;
}

/* Type 3: Achiever (Orange #ea580c) */
.enneagram-content-wrapper.ennea-type-3 .bg-primary-600 {
    background-color: #ea580c !important;
}

.enneagram-content-wrapper.ennea-type-3 .text-primary-600 {
    color: #ea580c !important;
}

.enneagram-content-wrapper.ennea-type-3 .shadow-primary-500\/20 {
    --tw-shadow-color: rgba(249, 115, 22, 0.2) !important;
}

.enneagram-content-wrapper.ennea-type-3 .gradient-text {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Type 4: Individualist (Purple #7311d4) */
.enneagram-content-wrapper.ennea-type-4 .bg-primary-700 {
    background-color: #7311d4 !important;
}

.enneagram-content-wrapper.ennea-type-4 .text-primary-700 {
    color: #7311d4 !important;
}

.enneagram-content-wrapper.ennea-type-4 .text-gradient {
    background: linear-gradient(to left, #7311d4, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.enneagram-content-wrapper.ennea-type-4 .morph-shape {
    background: linear-gradient(135deg, #7311d4 0%, #a78bfa 100%);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: ennea-morph 8s ease-in-out infinite;
}

/* Type 5: Investigator (Sky #0284c7) */
.enneagram-content-wrapper.ennea-type-5 .bg-primary {
    background-color: #0284c7 !important;
}

.enneagram-content-wrapper.ennea-type-5 .text-primary {
    color: #0284c7 !important;
}

.enneagram-content-wrapper.ennea-type-5 .glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Type 6: Loyalist (Indigo #4f46e5) */
.enneagram-content-wrapper.ennea-type-6 .bg-primary-600 {
    background-color: #4f46e5 !important;
}

.enneagram-content-wrapper.ennea-type-6 .text-primary-600 {
    color: #4f46e5 !important;
}

.enneagram-content-wrapper.ennea-type-6 .bg-hero-pattern {
    background-image: radial-gradient(circle at 50% 0%, #eef2ff 0%, #ffffff 70%);
}

/* Type 7: Enthusiast (Orange #f97316) */
.enneagram-content-wrapper.ennea-type-7 .bg-primary-500,
.enneagram-content-wrapper.ennea-type-7 .bg-primary-600 {
    background-color: #ea580c !important;
    /* Darkened from #f97316 for contrast */
}

.enneagram-content-wrapper.ennea-type-7 .text-primary-500,
.enneagram-content-wrapper.ennea-type-7 .text-primary-600,
.enneagram-content-wrapper.ennea-type-7 .text-primary-700 {
    color: #ea580c !important;
}

.enneagram-content-wrapper.ennea-type-7 .bg-primary-50,
.enneagram-content-wrapper.ennea-type-7 .bg-primary-100 {
    background-color: #fff7ed !important;
}

.enneagram-content-wrapper.ennea-type-7 .border-primary-100,
.enneagram-content-wrapper.ennea-type-7 .border-primary-200 {
    border-color: #fed7aa !important;
}

.enneagram-content-wrapper.ennea-type-7 .shadow-primary-500\/20 {
    --tw-shadow-color: rgba(249, 115, 22, 0.2) !important;
}

.enneagram-content-wrapper.ennea-type-7 .gradient-text {
    background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Type 8: Challenger (Red #ef4444) */
.enneagram-content-wrapper.ennea-type-8 .bg-primary {
    background-color: #ef4444 !important;
}

.enneagram-content-wrapper.ennea-type-8 .text-primary {
    color: #ef4444 !important;
}

.enneagram-content-wrapper.ennea-type-8 .bg-primary\/5 {
    background-color: rgba(239, 68, 68, 0.05) !important;
}

.enneagram-content-wrapper.ennea-type-8 .gradient-text {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.enneagram-content-wrapper.ennea-type-8 .pattern-grid {
    background-image: radial-gradient(#ef4444 0.5px, transparent 0.5px);
    background-size: 24px 24px;
}

/* Type 9: Peacemaker (Emerald #10b981) */
.enneagram-content-wrapper.ennea-type-9 .bg-primary-500,
.enneagram-content-wrapper.ennea-type-9 .bg-primary-600 {
    background-color: #059669 !important;
    /* Darkened from #10b981 for contrast */
}

.enneagram-content-wrapper.ennea-type-9 .text-primary-600,
.enneagram-content-wrapper.ennea-type-9 .text-primary-700 {
    color: #059669 !important;
}

.enneagram-content-wrapper.ennea-type-9 .bg-primary-50,
.enneagram-content-wrapper.ennea-type-9 .bg-primary-100 {
    background-color: #ecfdf5 !important;
}

.enneagram-content-wrapper.ennea-type-9 .border-primary-100 {
    border-color: #d1fae5 !important;
}

.enneagram-content-wrapper.ennea-type-9 .shadow-primary-500\/30 {
    --tw-shadow-color: rgba(16, 185, 129, 0.3) !important;
}

.enneagram-content-wrapper.ennea-type-9 .bg-grid-pattern {
    background-image: radial-gradient(#10b981 0.5px, transparent 0.5px);
    background-size: 24px 24px;
}