/* ===========================================
   KARMA JUDICIARY - Custom Styles
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size increased */
    color: #374151;
}
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
}
/* --- Smooth Global Transitions --- */
*, *::before, *::after {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Button Effects --- */
.button-effect {
    transition-property: transform, box-shadow;
}
.button-effect:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 25px rgba(217, 70, 239, 0.35);
}

/* --- Text Glow Effects --- */
.text-glow-effect:hover {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 6px rgba(249, 115, 22, 0.7);
    transform: scale(1.02);
}
.logo-glow-effect:hover {
    text-shadow: 0 0 10px rgba(217, 70, 239, 0.6);
}

/* --- Card Hover Effects --- */
.card-hover {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 25px rgba(236, 72, 153, 0.3);
}

/* --- Image Container Overlay Effects --- */
.image-container { position: relative; overflow: hidden; }
.image-container .overlay { transition: background-color 0.4s ease; }
.image-container .image-text { transition: transform 0.4s ease; }
.image-container .view-course-link {
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.image-container:hover .overlay { background-color: rgba(0, 0, 0, 0.6); }
.image-container:hover .image-text { transform: translateY(-25px); }
.image-container:hover .view-course-link { opacity: 1; transform: translateY(0); }
.image-container:hover img { transform: scale(1.1); }

/* --- Navigation Link Underline Effect --- */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 2px;
    bottom: -4px; left: 50%; transform: translateX(-50%);
    background-color: #ec4899; transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* --- Footer Hover Effects --- */
footer ul a:hover { color: #f97316; transform: translateX(4px); }
footer .social-icons a:hover { transform: scale(1.2) rotate(10deg); color: #ec4899; }
a:active, button:active { transform: scale(0.96) !important; opacity: 0.8; }

/* --- Course Card Styles --- */
.course-card {
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* --- Blog Card Styles --- */
.blog-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* --- Filter Button Styles --- */
.filter-btn { transition: all 0.2s ease-in-out; cursor: pointer; }
.filter-btn.active { background-color: #d946ef; color: white; }
.filter-btn:not(.active):hover { background-color: #fae8ff; }

/* --- Form Input Styles --- */
.form-input {
    width: 100%; padding: 0.75rem 1rem;
    background-color: #f9fafb; border: 2px solid #e5e7eb;
    border-radius: 0.5rem; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.5);
}

/* --- Accordion Styles --- */
.accordion-content {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* --- Rich Text Editor --- */
#editor { min-height: 300px; outline: none; padding: 1rem; font-size: 1rem; line-height: 1.75; }
.editor-toolbar button {
    padding: 0.5rem 0.75rem; background: #f3f4f6; border: none; border-radius: 0.375rem;
    cursor: pointer; transition: all 0.2s;
}
.editor-toolbar button:hover { background: #fae8ff; color: #d946ef; }

/* --- Admin Sidebar Styles --- */
.sidebar-link {
    display: flex; align-items: center; padding: 0.75rem 1rem;
    color: #374151; border-radius: 0.5rem; font-size: 0.875rem;
    transition: all 0.2s ease; text-decoration: none;
}
.sidebar-link:hover { background-color: #fae8ff; color: #d946ef; }
.sidebar-link.active { background-color: #d946ef; color: white; }

/* --- Status Badge --- */
.status-badge {
    display: inline-flex; align-items: center; padding: 0.25rem 0.75rem;
    border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
}
.status-active, .status-published { background-color: #d1fae5; color: #065f46; }
.status-pending { background-color: #fef3c7; color: #92400e; }
.status-inactive, .status-draft { background-color: #fee2e2; color: #991b1b; }
.status-reviewed { background-color: #dbeafe; color: #1e40af; }
.status-approved, .status-enrolled { background-color: #d1fae5; color: #065f46; }
.status-rejected { background-color: #fee2e2; color: #991b1b; }

/* --- Prose (Blog Content) --- */
.prose { max-width: 80ch; margin: 0 auto; }
.prose h1, .prose h2, .prose h3 { font-weight: 700; color: #111827; margin-top: 2rem; margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose p { font-size: 1.125rem; line-height: 1.8; margin-bottom: 1.5rem; color: #374151; }
.prose ul, .prose ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.5rem; color: #374151; line-height: 1.7; }
.prose a { color: #d946ef; text-decoration: underline; }
.prose img { border-radius: 0.75rem; }

/* --- Toggle Switch --- */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #d1d5db; border-radius: 24px; transition: 0.3s;
}
.toggle-slider:before {
    content: ""; position: absolute; height: 18px; width: 18px;
    left: 3px; bottom: 3px; background-color: white;
    border-radius: 50%; transition: 0.3s;
}
input:checked + .toggle-slider { background-color: #4ade80; }
input:checked + .toggle-slider:before { transform: translateX(20px); }

/* --- Table Styles --- */
.admin-table { width: 100%; text-align: left; }
.admin-table thead th {
    padding: 0.75rem 1rem; border-bottom: 2px solid #e5e7eb;
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    color: #6b7280; letter-spacing: 0.05em;
}
.admin-table tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; color: #374151; }
.admin-table tbody tr:hover { background-color: #f9fafb; }

/* --- Stat Card --- */
.stat-card {
    background: white; border-radius: 1rem; padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.stat-card:hover { transform: translateY(-4px); }

/* --- Alpine.js Cloak --- */
[x-cloak] { display: none !important; }

/* --- Responsive Helpers --- */
@media (max-width: 768px) {
    .mobile-full { width: 100%; }
}
/* --- Performance Optimization for Smooth Scrolling --- */
.card-hover, .button-effect, .image-container img {
    will-change: transform, box-shadow, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* --- Iframe Modal for Buy Now --- */
.iframe-modal-overlay {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.iframe-spinner {
    border: 4px solid rgba(217, 70, 239, 0.2);
    border-top-color: #d946ef;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 
    to { transform: rotate(360deg); } 
}