/* Explain: App-specific component classes (add as needed). */
.btn-premium {
    @apply inline-flex items-center justify-center rounded-lg px-6 py-3 font-semibold transition-all duration-300;
    background-color: var(--primary-color);
    color: var(--background-color);
}
.btn-premium:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-accent {
    @apply inline-flex items-center justify-center rounded-lg px-6 py-3 font-semibold transition-all duration-300;
    background-color: var(--accent-color);
    color: #ffffff;
}
.btn-accent:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
}

.btn-outline-premium {
    @apply inline-flex items-center justify-center rounded-lg border border-[var(--border-color)] px-6 py-3 font-semibold text-[var(--text-color)] transition-all duration-300;
}
.btn-outline-premium:hover {
    background-color: var(--surface-color);
    border-color: var(--text-muted);
}

.card-premium {
    @apply rounded-2xl border border-[var(--border-color)] bg-[var(--surface-color)] p-6 transition-all duration-300;
}
.card-premium:hover {
    border-color: var(--text-muted);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
}

.input-premium {
    @apply w-full rounded-xl border border-[var(--border-color)] bg-[var(--background-color)] px-4 py-3 text-[var(--text-color)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-color)] focus:outline-none focus:ring-1 focus:ring-[var(--accent-color)] transition-colors;
}

.floating-whatsapp {
    @apply fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[#25D366] text-white shadow-lg transition-transform hover:scale-110;
    box-shadow: 0 8px 25px -5px rgba(37, 211, 102, 0.4);
}