/* ============================================
   TAILWIND ENHANCEMENTS & COMPONENTS
   ============================================ */

/* === FORM STYLING === */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
    @apply border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-[#09A292] focus:border-transparent transition-all duration-300 font-dm-sans text-gray-700;
}

textarea {
    @apply resize-none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    @apply border-[#09A292] box-shadow: 0 0 0 3px rgba(9, 162, 146, 0.1);
}

/* === BUTTON STYLING === */

.btn-primary {
    @apply px-8 py-3 bg-gradient-to-r from-[#F13E22] to-[#d1351d] text-white font-bold rounded-lg hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2 btn-animate;
}

.btn-secondary {
    @apply px-8 py-3 bg-[#09A292] text-white font-bold rounded-lg hover:bg-[#078578] transition-all duration-300 flex items-center justify-center gap-2;
}

.btn-outline {
    @apply px-8 py-3 border-2 border-[#09A292] text-[#09A292] font-bold rounded-lg hover:bg-[#09A292] hover:text-white transition-all duration-300;
}

/* === CARD ENHANCEMENTS === */

.card-modern {
    @apply bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

.card-gradient {
    @apply bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-lg overflow-hidden;
}

.card-glass {
    @apply glass rounded-2xl overflow-hidden;
}

/* === BADGE STYLES === */

.badge-primary {
    @apply inline-flex items-center gap-2 bg-[#F13E22]/10 text-[#F13E22] px-3 py-1 rounded-full text-xs font-semibold;
}

.badge-secondary {
    @apply inline-flex items-center gap-2 bg-[#09A292]/10 text-[#09A292] px-3 py-1 rounded-full text-xs font-semibold;
}

.badge-tertiary {
    @apply inline-flex items-center gap-2 bg-[#FF9E2A]/10 text-[#FF9E2A] px-3 py-1 rounded-full text-xs font-semibold;
}

/* === SECTION DIVIDERS === */

.section-divider {
    @apply h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent my-12;
}

/* === HEADING STYLES === */

h1 {
    @apply font-dm-sans font-extrabold text-gray-800;
}

h2 {
    @apply font-dm-sans font-bold text-gray-800;
}

h3 {
    @apply font-dm-sans font-semibold text-gray-800;
}

/* === TABLES === */

table {
    @apply w-full border-collapse rounded-lg overflow-hidden;
}

thead {
    @apply bg-gradient-to-r from-[#09A292] to-[#07897c];
}

thead th {
    @apply text-white font-bold px-6 py-4 text-left;
}

tbody tr {
    @apply border-b border-gray-200 hover:bg-gray-50 transition-colors;
}

tbody td {
    @apply px-6 py-4 text-gray-700;
}

tbody tr:last-child {
    @apply border-b-0;
}

/* === LIST STYLES === */

.list-modern {
    @apply space-y-3;
}

.list-modern li {
    @apply flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors;
}

.list-modern li::before {
    @apply content-['✓'] w-6 h-6 rounded-full bg-[#09A292] text-white flex items-center justify-center font-bold text-sm flex-shrink-0 mt-0.5;
}

/* === ICON CIRCLES === */

.icon-circle {
    @apply w-12 h-12 rounded-full flex items-center justify-center transition-all duration-300;
}

.icon-circle-primary {
    @apply icon-circle bg-[#F13E22]/10 text-[#F13E22];
}

.icon-circle-secondary {
    @apply icon-circle bg-[#09A292]/10 text-[#09A292];
}

.icon-circle-tertiary {
    @apply icon-circle bg-[#FF9E2A]/10 text-[#FF9E2A];
}

/* === DIVIDER LINE === */

.divider {
    @apply h-px bg-gray-200 my-6;
}

.divider-primary {
    @apply h-1 bg-gradient-to-r from-[#F13E22] to-transparent my-6;
}

.divider-secondary {
    @apply h-1 bg-gradient-to-r from-[#09A292] to-transparent my-6;
}

/* === STAT CARD === */

.stat-card {
    @apply bg-white rounded-xl p-6 shadow-md text-center hover:shadow-lg transition-all duration-300;
}

.stat-card-number {
    @apply text-4xl font-extrabold text-[#09A292] mb-2;
}

.stat-card-label {
    @apply text-sm font-semibold text-gray-600 uppercase tracking-wider;
}

/* === TESTIMONIAL CARD === */

.testimonial-card {
    @apply bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300;
}

.testimonial-stars {
    @apply flex gap-1 mb-4 text-[#FF9E2A];
}

.testimonial-quote {
    @apply text-gray-700 mb-4 italic;
}

.testimonial-author {
    @apply font-semibold text-gray-800;
}

.testimonial-role {
    @apply text-sm text-gray-600;
}

/* === ALERT BOXES === */

.alert {
    @apply p-4 rounded-lg flex items-start gap-3 mb-4;
}

.alert-success {
    @apply bg-green-50 border border-green-200 text-green-700;
}

.alert-error {
    @apply bg-red-50 border border-red-200 text-red-700;
}

.alert-warning {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-700;
}

.alert-info {
    @apply bg-blue-50 border border-blue-200 text-blue-700;
}

/* === PROGRESS BAR === */

.progress-bar {
    @apply w-full h-2 bg-gray-200 rounded-full overflow-hidden;
}

.progress-bar-fill {
    @apply h-full bg-gradient-to-r from-[#09A292] to-[#07897c] transition-all duration-500;
}

/* === TOOLTIP === */

.tooltip {
    @apply relative;
}

.tooltip::after {
    @apply content-[attr(data-tooltip)] absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 pointer-events-none transition-opacity duration-300;
}

.tooltip:hover::after {
    @apply opacity-100;
}

/* === BREADCRUMB === */

.breadcrumb {
    @apply flex items-center gap-2 text-sm;
}

.breadcrumb a {
    @apply text-[#09A292] hover:text-[#F13E22] transition-colors;
}

.breadcrumb-separator {
    @apply text-gray-400;
}

/* === TAG === */

.tag {
    @apply inline-block px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-semibold hover:bg-gray-200 transition-colors cursor-pointer;
}

.tag-primary {
    @apply bg-[#F13E22]/10 text-[#F13E22] hover:bg-[#F13E22]/20;
}

.tag-secondary {
    @apply bg-[#09A292]/10 text-[#09A292] hover:bg-[#09A292]/20;
}

/* === LOADMORE === */

.loadmore-btn {
    @apply w-full py-3 border-2 border-[#09A292] text-[#09A292] font-bold rounded-lg hover:bg-[#09A292] hover:text-white transition-all duration-300;
}

/* === EMPTY STATE === */

.empty-state {
    @apply flex flex-col items-center justify-center py-20 text-center;
}

.empty-state-icon {
    @apply w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 text-4xl mb-6;
}

.empty-state-title {
    @apply text-2xl font-bold text-gray-800 mb-2;
}

.empty-state-description {
    @apply text-gray-600;
}

/* === INLINE CODE === */

code {
    @apply bg-gray-100 text-gray-800 px-2 py-1 rounded font-mono text-sm;
}

/* === BLOCKQUOTE === */

blockquote {
    @apply border-l-4 border-[#09A292] pl-6 py-4 text-gray-700 italic;
}

/* === HR === */

hr {
    @apply border-gray-200 my-8;
}

/* === FOCUS RING === */

.focus-ring {
    @apply outline-none ring-2 ring-[#09A292] ring-offset-2;
}

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

.shadow-elevated {
    @apply shadow-[0_20px_50px_rgba(0,0,0,0.15)];
}

.shadow-elevated-lg {
    @apply shadow-[0_25px_60px_rgba(0,0,0,0.2)];
}

.shadow-glow {
    @apply shadow-[0_0_20px_rgba(9,162,146,0.3)];
}

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

@media (max-width: 768px) {
    .hide-mobile {
        @apply hidden;
    }
}

@media (min-width: 769px) {
    .show-mobile {
        @apply hidden;
    }
}

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

.text-gradient {
    @apply bg-gradient-to-r from-[#F13E22] via-[#09A292] to-[#FF9E2A] bg-clip-text text-transparent;
}

.text-truncate {
    @apply truncate;
}

.text-clamp {
    @apply line-clamp-3;
}

/* === BACKDROP === */

.backdrop-blur-strong {
    @apply backdrop-blur-xl;
}

/* === ASPECT RATIO === */

.aspect-video {
    @apply aspect-video;
}

.aspect-square {
    @apply aspect-square;
}