/**
 * Main Component Styles
 * Centralized styles for all reusable components
 *
 * @package Mamica_Alapteaza
 */

/* ===================================
   TYPOGRAPHY
   =================================== */

/* Title Variants */
.title {
    @apply text-2xl md:text-3xl uppercase;
}

.small-title {
    @apply text-xl uppercase;
}

.hero-title {
    @apply text-3xl md:text-5xl uppercase;
}

.subtitle {
    @apply text-xs uppercase text-[#39773C];
}

.paragraph {
    @apply text-gray-500;
}

/* ===================================
   BUTTONS
   =================================== */

/* Primary Button */
.button {
    @apply bg-[#39773C] text-white px-4 py-2 cursor-pointer rounded-full;
    @apply hover:bg-[#2d5f32] transition-colors duration-300;
    @apply focus:outline-none focus:ring-2 focus:ring-[#39773C] focus:ring-offset-2;
}

/* Button Variants */
.button-secondary {
    @apply bg-white text-[#39773C] border-2 border-[#39773C] px-4 py-2 cursor-pointer rounded-full;
    @apply hover:bg-[#39773C] hover:text-white transition-all duration-300;
    @apply focus:outline-none focus:ring-2 focus:ring-[#39773C] focus:ring-offset-2;
}

.button-outline {
    @apply bg-transparent text-[#39773C] border border-[#39773C] px-4 py-2 cursor-pointer rounded-full;
    @apply hover:bg-[#39773C] hover:text-white transition-all duration-300;
}

.button-small {
    @apply px-3 py-1.5 text-sm;
}

.button-large {
    @apply px-6 py-3 text-lg;
}

.button-full {
    @apply w-full text-center inline-block;
}

.button-disabled,
.button:disabled {
    @apply opacity-50 cursor-not-allowed hover:bg-[#39773C];
}

/* ===================================
   FORMS
   =================================== */

/* Input Fields */
.input {
    @apply border-b border-b-gray-300 px-1.5 py-2 w-full;
    @apply focus:outline-none focus:border-b-[#39773C] transition-colors duration-200;
}

.input-error {
    @apply border-b-red-500 focus:border-b-red-500;
}

/* Textarea */
textarea.input {
    @apply max-h-[150px] min-h-[100px] resize-y;
}

/* Form Group */
.form-group {
    @apply flex flex-col gap-1.5;
}

.form-label {
    @apply text-sm font-medium text-gray-700;
}

.form-error {
    @apply text-sm text-red-500 mt-1;
}

.form-success {
    @apply text-sm text-green-600 mt-1;
}

/* ===================================
   CARDS
   =================================== */

/* Base Card */
.card {
    @apply flex flex-col gap-3 h-full;
}

/* Card with Shadow */
.card-shadow {
    @apply bg-white shadow-lg rounded-lg overflow-hidden;
}

/* Card Body */
.card-body {
    @apply p-5 flex flex-col gap-3 flex-1;
}

/* Card with Border */
.card-border {
    @apply border border-gray-200 rounded-lg overflow-hidden;
}

/* Card Image */
.card-image {
    @apply aspect-square object-cover w-full hover:opacity-90 transition-opacity;
}

.card-image-video {
    @apply aspect-video object-cover;
}

/* Card Title */
.card-title {
    @apply text-xl uppercase;
}

.card-title a {
    @apply hover:text-[#39773C] transition-colors;
}

/* Content Card (Blog Posts, etc.) */
.content-card {
    @apply flex flex-col gap-1 h-full;
}

.content-card h3 {
    @apply text-xl uppercase pt-2;
}

.content-card h3 a {
    @apply hover:opacity-75 transition-opacity;
}

/* Course Card */
.course-card {
    @apply flex flex-col gap-3 h-full bg-white shadow-lg rounded-lg overflow-hidden;
}

.course-card-body {
    @apply p-5 flex flex-col gap-3 flex-1;
}

/* Review Card */
.review-card {
    @apply flex flex-col gap-1 text-center;
}

.review-card-avatar {
    @apply size-[100px] aspect-square object-cover rounded-full;
}

/* ===================================
   LINKS
   =================================== */

.link {
    @apply text-[#39773C] underline cursor-pointer;
    @apply hover:text-[#2d5f32] transition-colors;
}

.link-no-underline {
    @apply text-[#39773C] no-underline cursor-pointer;
    @apply hover:underline transition-all;
}

/* ===================================
   IMAGES
   =================================== */

.img-cover {
    @apply object-cover w-full h-full;
}

.img-contain {
    @apply object-contain w-full h-full;
}

.img-rounded {
    @apply rounded-lg;
}

.img-circle {
    @apply rounded-full;
}

/* ===================================
   BADGES & TAGS
   =================================== */

.badge {
    @apply inline-block px-2 py-1 text-xs font-semibold rounded-full;
}

.badge-primary {
    @apply bg-[#39773C] text-white;
}

.badge-secondary {
    @apply bg-gray-200 text-gray-700;
}

.badge-success {
    @apply bg-green-500 text-white;
}

.badge-warning {
    @apply bg-yellow-500 text-white;
}

.badge-danger {
    @apply bg-red-500 text-white;
}

/* ===================================
   LOADING STATES
   =================================== */

.loading-spinner {
    @apply opacity-0 absolute inset-0 items-center justify-center;
}

.loading-spinner.active {
    @apply opacity-100 flex;
}

.loading-spinner svg {
    @apply animate-spin h-5 w-5 text-white;
}

/* ===================================
   SECTIONS
   =================================== */

.section {
    @apply py-10 md:py-16;
}

.section-title {
    @apply text-center flex flex-col items-center;
}

.section-title .subtitle {
    @apply subtitle;
}

.section-title .title {
    @apply title max-w-md pt-3;
}

/* ===================================
   NAVIGATION
   =================================== */

.nav-link {
    @apply text-gray-700 hover:text-[#39773C] transition-colors;
}

.nav-link-active {
    @apply text-[#39773C] font-semibold;
}

/* ===================================
   SWIPER CUSTOMIZATION
   =================================== */

/* Swiper Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
    @apply text-[#245942] bg-white w-11 h-11 rounded-full;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    @apply bg-[#245942] text-white;
    transform: scale(1.1);
}

/* Swiper Pagination */
.swiper-pagination-bullet {
    @apply bg-gray-400 opacity-100;
}

.swiper-pagination-bullet-active {
    @apply bg-[#39773C];
}

/* ===================================
   UTILITIES
   =================================== */

.text-primary {
    @apply text-[#39773C];
}

.bg-primary {
    @apply bg-[#39773C];
}

.border-primary {
    @apply border-[#39773C];
}

/* Hover Effects */
.hover-lift {
    @apply transition-transform duration-300;
}

.hover-lift:hover {
    @apply -translate-y-1;
}

.hover-shadow {
    @apply transition-shadow duration-300;
}

.hover-shadow:hover {
    @apply shadow-lg;
}

/* ===================================
   RESPONSIVE HELPERS
   =================================== */

.container-custom {
    @apply container mx-auto px-4;
}

.grid-cards {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.grid-cards-4 {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
}

/* ===================================
   ANIMATIONS
   =================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}