/* =================================================================== */
/* ==                 1. NAVIGATION & FOOTER                        == */
/* =================================================================== */

/* Navigation Bar */
nav {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8); /* Light border */
}

/* Navigation Links */
.nav-link {
    position: relative;
    overflow: hidden;
}

/* Shimmer effect on nav-link hover */
.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.2), transparent);
    transition: left 0.5s;
}

.nav-link:hover::before {
    left: 100%;
}

/* Footer Styling */
footer {
    background-color: #111827; /* Dark background for footer */
    color: #9ca3af; /* Gray text for footer */
    border-top: 1px solid #374151;
}

footer .font-bold {
    color: #ffffff; /* White text for the brand name */
}

/* =================================================================== */
/* ==                 2. BUTTONS & INTERACTIVE                      == */
/* =================================================================== */

/* Base button style for hero section and quizzes */
.hero-button {
    color: white !important;
    padding: 1rem 2rem;
    border: none;
    border-radius: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hero-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Shimmer effect on hover for buttons */
.hero-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s;
}

.hero-button:hover::before {
    left: 100%;
}

/* Primary Button (Teal/Blue) - Used for Rules */
.btn-primary {
    background-image: linear-gradient(to right, #14b8a6, #2563eb) !important;
}
.btn-primary:hover {
    background-image: linear-gradient(to right, #0d9488, #1d4ed8) !important;
}

/* Secondary Button (Orange/Red) - Used for Quiz */
.btn-secondary {
    background-image: linear-gradient(to right, #f97316, #ef4444) !important;
}
.btn-secondary:hover {
    background-image: linear-gradient(to right, #ea580c, #dc2626) !important;
}


/* =================================================================== */
/* ==                 3. CARDS & CONTENT BLOCKS                     == */
/* =================================================================== */

/* Feature Card Styling (Homepage) - NEW/UPDATED */
.feature-card {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(229, 231, 235, 0.5);
    transition: all 0.3s ease;
    text-align: left;
}
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Feature Icon (Homepage) */
.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-10deg);
}
.from-teal-500.to-blue-600 { background-image: linear-gradient(to bottom right, #14b8a6, #2563eb); }
.from-orange-500.to-red-500 { background-image: linear-gradient(to bottom right, #f97316, #ef4444); }
.from-purple-500.to-pink-500 { background-image: linear-gradient(to bottom right, #9333ea, #db2777); }


/* --- NDRYSHIM KETU: Rule Card Styling (Rules Page) --- */
.rule-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(229, 231, 235, 0.6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d; /* I nevojshëm për efektin 3D */
}

.rule-card:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    padding: 2px; /* Trashësia e bordurës */
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.rule-card:hover {
    transform: translateY(-10px) rotateX(5deg) scale(1.03);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.rule-card:hover:before {
    opacity: 1; /* Shfaq bordurën me gradient gjatë hover-it */
}

/* Style for the most recently visited rule */
.rule-card.last-visited {
    border-color: #0d9488;
    transform: scale(1.02);
}
.rule-card.last-visited:before {
    opacity: 1; /* Shfaq bordurën me gradient edhe për kartën e vizituar */
}
.rule-card.last-visited .rule-number {
    background: linear-gradient(135deg, #0f766e, #1d4ed8);
    transform: scale(1.1);
}

/* Rule Number Badge */
.rule-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #14b8a6, #3b82f6);
    color: white;
    border-radius: 0.8rem;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rule-card:hover .rule-number {
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 8px 25px rgba(20, 184, 166, 0.4);
}

/* Rule Title and Description */
.rule-title {
    color: #0d9488;
    margin-bottom: 0.5rem; /* Zvogëluar pak hapësirën */
    transition: color 0.3s ease;
    font-weight: 600; /* Pak më i hollë por ende i theksuar */
}
.rule-card:hover .rule-title {
    color: #0f766e;
}

.rule-description {
    color: #4b5563;
    font-size: 0.9rem; /* Zvogëluar pak për një pamje më të pastër */
    line-height: 1.5;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Tregojmë 2 rreshta */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rule-card:hover .rule-description {
    color: #1f2937;
}

/* --- FUNDI I NDRYSHIMIT --- */


/* Rule Detail Page Styling */
.rule-detail {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.rule-detail-title {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0d9488, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
}

.rule-detail-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #374151;
    margin-bottom: 2rem;
}
.rule-detail-description p,
.rule-detail-description ul,
.rule-detail-description ol {
    margin-bottom: 1em;
}
.rule-detail-description strong {
    color: #111827;
}
.rule-detail-description ul {
    list-style-type: disc;
    padding-left: 20px;
}

/* Examples Section Styling */
.examples-section {
    margin: 3rem 0;
}
.example-title {
    font-weight: 700;
    color: #0d9488;
    margin-bottom: 1rem;
}
.example-item {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: rgba(243, 244, 246, 0.7);
    border-radius: 1rem;
    border-left: 5px solid #14b8a6;
    transition: all 0.3s ease;
}
.example-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 20px rgba(20, 184, 166, 0.15);
}

/* Arabic Item Grouping */
.arabic-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
    justify-content: center;
}
.arabic-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    min-width: 140px;
    transition: all 0.3s ease;
}
.arabic-item:hover {
    border-color: #14b8a6;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.arabic-item .arabic {
    font-size: 1.8rem;
    color: #059669;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.arabic-item .pronunciation {
    font-size: 0.9rem;
    color: #6b7280;
    font-style: italic;
}


/* =================================================================== */
/* ==                      4. QUIZ COMPONENTS                       == */
/* =================================================================== */

.quiz-question {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.quiz-option {
    background: rgba(249, 250, 251, 0.8);
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1rem 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quiz-option:hover {
    border-color: #14b8a6;
    background: rgba(240, 253, 250, 0.9);
    transform: translateX(10px);
}

/* States for quiz options */
.quiz-option.selected {
    border-color: #14b8a6;
}

.quiz-option.correct {
    border-color: #10b981;
    background: rgba(209, 250, 229, 0.9);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.quiz-option.incorrect {
    border-color: #ef4444;
    background: rgba(254, 226, 226, 0.9);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
    animation: shake 0.5s ease-in-out;
}


/* =================================================================== */
/* ==               5. BACKGROUND & LOADING                         == */
/* =================================================================== */

/* Background Pattern - z-index is removed here and set in HTML for clarity */
.background-pattern {
    position: fixed;
    inset: 0;
    opacity: 0.2;
    pointer-events: none;
}

/* Loading Indicator */
.loading-indicator {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.loading-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
/* =================================================================== */
/* ==                      6. FAQ SECTION STYLING                   == */
/* =================================================================== */

.faq-item {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.25rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(229, 231, 235, 0.5);
}

.dark .faq-item {
    background-color: rgba(30, 41, 59, 0.7);
    border-color: rgba(75, 85, 99, 0.4);
}

.faq-question {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.75rem;
}

.dark .faq-question {
    color: #f1f5f9;
}

.faq-answer {
    color: #4b5563;
    line-height: 1.7;
}

.dark .faq-answer {
    color: #cbd5e1;
}