/*
╔═══════════════════════════════════════════════════════════════════════════════╗
║                        ECLIPSEX DESIGN SYSTEM                                  ║
║                   Clean, Minimal, Fluent-Inspired                              ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║                                                                               ║
║  DESIGN PHILOSOPHY                                                            ║
║  • Clean, minimal, Microsoft Fluent-inspired                                  ║
║  • Sharp components (6-8px border radius max)                                 ║
║  • Subtle shadows and clear borders                                           ║
║  • Neutral palette + ONE primary accent (blue)                                ║
║                                                                               ║
║  TYPOGRAPHY HIERARCHY                                                         ║
║  • Page title: text-2xl/3xl font-bold                                         ║
║  • Section title: text-lg font-semibold                                       ║
║  • Body: text-sm                                                              ║
║  • Meta: text-xs                                                              ║
║                                                                               ║
║  SPACING (4px base)                                                           ║
║  • 4px, 8px, 12px, 16px, 24px, 32px                                           ║
║                                                                               ║
╚═══════════════════════════════════════════════════════════════════════════════╝
*/

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

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ═══════════════════════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

@layer base {
    html {
        @apply scroll-smooth;
    }

    body {
        @apply antialiased font-sans;
        @apply bg-gray-50 text-gray-900;
        @apply dark:bg-gray-950 dark:text-gray-100;
    }

    /* Focus visible for accessibility */
    *:focus-visible {
        @apply outline-none ring-2 ring-primary-500 ring-offset-2;
        @apply dark:ring-offset-gray-900;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMPONENT STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

@layer components {

    /* ─────────────────────────────────────────────────────────────────────────────
       BUTTONS
       ───────────────────────────────────────────────────────────────────────────── */

    /* Primary Button */
    .btn-primary {
        @apply inline-flex items-center justify-center gap-2;
        @apply px-5 py-2.5;
        @apply bg-primary-500 hover:bg-primary-600 active:bg-primary-700;
        @apply text-white font-medium text-sm;
        @apply rounded-md shadow-sm;
        @apply transition-colors duration-200;
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
        @apply dark:focus:ring-offset-gray-900;
        @apply disabled:opacity-50 disabled:cursor-not-allowed;
    }

    /* Secondary Button */
    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2;
        @apply px-5 py-2.5;
        @apply bg-white dark:bg-gray-800;
        @apply text-gray-700 dark:text-gray-200;
        @apply font-medium text-sm;
        @apply rounded-md shadow-sm;
        @apply border border-gray-200 dark:border-gray-700;
        @apply hover:bg-gray-50 dark:hover:bg-gray-700;
        @apply transition-colors duration-200;
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
        @apply dark:focus:ring-offset-gray-900;
        @apply disabled:opacity-50 disabled:cursor-not-allowed;
    }

    /* Ghost Button */
    .btn-ghost {
        @apply inline-flex items-center justify-center gap-2;
        @apply px-5 py-2.5;
        @apply bg-transparent;
        @apply text-gray-600 dark:text-gray-300;
        @apply font-medium text-sm;
        @apply rounded-md;
        @apply hover:bg-gray-100 dark:hover:bg-gray-800;
        @apply transition-colors duration-200;
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
        @apply dark:focus:ring-offset-gray-900;
    }

    /* Danger Button */
    .btn-danger {
        @apply inline-flex items-center justify-center gap-2;
        @apply px-5 py-2.5;
        @apply bg-red-500 hover:bg-red-600 active:bg-red-700;
        @apply text-white font-medium text-sm;
        @apply rounded-md shadow-sm;
        @apply transition-colors duration-200;
        @apply focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
        @apply dark:focus:ring-offset-gray-900;
    }

    /* Icon Button */
    .btn-icon {
        @apply inline-flex items-center justify-center;
        @apply p-2.5;
        @apply text-gray-500 dark:text-gray-400;
        @apply rounded-md;
        @apply hover:bg-gray-100 dark:hover:bg-gray-800;
        @apply hover:text-gray-700 dark:hover:text-gray-200;
        @apply transition-colors duration-200;
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
        @apply dark:focus:ring-offset-gray-900;
    }

    /* Circle Button (for hire buttons, etc.) */
    .btn-circle {
        @apply inline-flex items-center justify-center;
        @apply w-9 h-9;
        @apply bg-primary-500 hover:bg-primary-600;
        @apply text-white;
        @apply rounded-full shadow-sm;
        @apply transition-colors duration-200;
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
        @apply dark:focus:ring-offset-gray-900;
    }

    /* Button Sizes */
    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }

    .btn-lg {
        @apply px-6 py-3 text-base;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       CARDS
       ───────────────────────────────────────────────────────────────────────────── */

    /* Base Card */
    .card {
        @apply bg-white dark:bg-gray-900;
        @apply border border-gray-200 dark:border-gray-800;
        @apply rounded-lg shadow-sm;
        @apply p-4;
    }

    /* Card with hover effect */
    .card-hover {
        @apply card;
        @apply transition-all duration-200;
        @apply hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700;
    }

    /* Card with no padding */
    .card-flush {
        @apply bg-white dark:bg-gray-900;
        @apply border border-gray-200 dark:border-gray-800;
        @apply rounded-lg shadow-sm;
        @apply overflow-hidden;
    }

    /* Stat Card */
    .stat-card {
        @apply card text-center;
    }

    .stat-card .stat-value {
        @apply text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white;
    }

    .stat-card .stat-label {
        @apply text-sm text-gray-500 dark:text-gray-400;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       FORMS
       ───────────────────────────────────────────────────────────────────────────── */

    /* Input Field */
    .input {
        @apply w-full px-4 py-2.5;
        @apply bg-white dark:bg-gray-800;
        @apply border border-gray-200 dark:border-gray-700;
        @apply rounded-md;
        @apply text-gray-900 dark:text-gray-100 text-sm;
        @apply placeholder-gray-400 dark:placeholder-gray-500;
        @apply transition-colors duration-200;
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
        @apply disabled:bg-gray-100 dark:disabled:bg-gray-900 disabled:cursor-not-allowed;
    }

    /* Select Dropdown */
    .select {
        @apply input appearance-none cursor-pointer;
        @apply pr-10;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.75rem center;
        background-repeat: no-repeat;
        background-size: 1.25em 1.25em;
    }

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

    /* Label */
    .label {
        @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5;
    }

    /* Form Group */
    .form-group {
        @apply mb-4;
    }

    /* Checkbox */
    .checkbox {
        @apply w-4 h-4;
        @apply rounded;
        @apply border-gray-300 dark:border-gray-600;
        @apply text-primary-500;
        @apply focus:ring-primary-500 focus:ring-offset-0;
        @apply dark:bg-gray-800;
    }

    /* Radio */
    .radio {
        @apply w-4 h-4;
        @apply border-gray-300 dark:border-gray-600;
        @apply text-primary-500;
        @apply focus:ring-primary-500 focus:ring-offset-0;
        @apply dark:bg-gray-800;
    }

    /* Input with error state */
    .input-error {
        @apply border-red-500 dark:border-red-500;
        @apply focus:ring-red-500;
    }

    /* Error message */
    .error-message {
        @apply text-red-500 text-xs mt-1;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       BADGES
       ───────────────────────────────────────────────────────────────────────────── */

    /* Base Badge */
    .badge {
        @apply inline-flex items-center gap-1.5;
        @apply px-2.5 py-1;
        @apply text-xs font-medium;
        @apply rounded-md;
        @apply border;
    }

    /* Badge variants */
    .badge-primary {
        @apply badge;
        @apply bg-primary-50 dark:bg-primary-900/30;
        @apply text-primary-600 dark:text-primary-400;
        @apply border-primary-200 dark:border-primary-800;
    }

    .badge-success {
        @apply badge;
        @apply bg-emerald-50 dark:bg-emerald-900/30;
        @apply text-emerald-600 dark:text-emerald-400;
        @apply border-emerald-200 dark:border-emerald-800;
    }

    .badge-warning {
        @apply badge;
        @apply bg-amber-50 dark:bg-amber-900/30;
        @apply text-amber-600 dark:text-amber-400;
        @apply border-amber-200 dark:border-amber-800;
    }

    .badge-danger {
        @apply badge;
        @apply bg-red-50 dark:bg-red-900/30;
        @apply text-red-600 dark:text-red-400;
        @apply border-red-200 dark:border-red-800;
    }

    .badge-info {
        @apply badge;
        @apply bg-blue-50 dark:bg-blue-900/30;
        @apply text-blue-600 dark:text-blue-400;
        @apply border-blue-200 dark:border-blue-800;
    }

    .badge-neutral {
        @apply badge;
        @apply bg-gray-100 dark:bg-gray-800;
        @apply text-gray-600 dark:text-gray-400;
        @apply border-gray-200 dark:border-gray-700;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       TABS
       ───────────────────────────────────────────────────────────────────────────── */

    /* Tab Container */
    .tabs {
        @apply border-b border-gray-200 dark:border-gray-800;
    }

    .tabs-list {
        @apply flex -mb-px overflow-x-auto;
    }

    /* Tab Item */
    .tab {
        @apply px-4 py-3;
        @apply text-sm font-medium;
        @apply border-b-2 border-transparent;
        @apply text-gray-500 dark:text-gray-400;
        @apply hover:text-gray-700 dark:hover:text-gray-300;
        @apply hover:border-gray-300 dark:hover:border-gray-600;
        @apply whitespace-nowrap;
        @apply transition-colors duration-200;
        @apply focus:outline-none;
    }

    .tab-active {
        @apply tab;
        @apply border-primary-500;
        @apply text-primary-600 dark:text-primary-400;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       SEGMENTED CONTROL
       ───────────────────────────────────────────────────────────────────────────── */

    .segmented-control {
        @apply inline-flex p-1;
        @apply bg-gray-100 dark:bg-gray-800;
        @apply rounded-md;
    }

    .segmented-control-item {
        @apply px-4 py-2;
        @apply text-sm font-medium;
        @apply text-gray-600 dark:text-gray-400;
        @apply rounded-md;
        @apply transition-all duration-200;
        @apply hover:text-gray-900 dark:hover:text-white;
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1;
    }

    .segmented-control-item-active {
        @apply segmented-control-item;
        @apply bg-white dark:bg-gray-700;
        @apply text-gray-900 dark:text-white;
        @apply shadow-sm;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       AVATARS
       ───────────────────────────────────────────────────────────────────────────── */

    .avatar {
        @apply inline-flex items-center justify-center;
        @apply rounded-full;
        @apply bg-gray-200 dark:bg-gray-700;
        @apply text-gray-600 dark:text-gray-300;
        @apply font-medium;
        @apply overflow-hidden;
    }

    .avatar-sm { @apply w-8 h-8 text-xs; }
    .avatar-md { @apply w-10 h-10 text-sm; }
    .avatar-lg { @apply w-12 h-12 text-base; }
    .avatar-xl { @apply w-16 h-16 text-lg; }
    .avatar-2xl { @apply w-24 h-24 text-2xl; }
    .avatar-3xl { @apply w-32 h-32 text-3xl; }

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

    /* ─────────────────────────────────────────────────────────────────────────────
       ALERTS
       ───────────────────────────────────────────────────────────────────────────── */

    .alert {
        @apply p-4 rounded-lg border;
    }

    .alert-success {
        @apply alert;
        @apply bg-emerald-50 dark:bg-emerald-900/30;
        @apply text-emerald-700 dark:text-emerald-300;
        @apply border-emerald-200 dark:border-emerald-800;
    }

    .alert-warning {
        @apply alert;
        @apply bg-amber-50 dark:bg-amber-900/30;
        @apply text-amber-700 dark:text-amber-300;
        @apply border-amber-200 dark:border-amber-800;
    }

    .alert-danger {
        @apply alert;
        @apply bg-red-50 dark:bg-red-900/30;
        @apply text-red-700 dark:text-red-300;
        @apply border-red-200 dark:border-red-800;
    }

    .alert-info {
        @apply alert;
        @apply bg-blue-50 dark:bg-blue-900/30;
        @apply text-blue-700 dark:text-blue-300;
        @apply border-blue-200 dark:border-blue-800;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       TABLES
       ───────────────────────────────────────────────────────────────────────────── */

    .table-container {
        @apply overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-800;
    }

    .table {
        @apply w-full text-sm text-left;
    }

    .table thead {
        @apply bg-gray-50 dark:bg-gray-800;
        @apply text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider;
    }

    .table th {
        @apply px-4 py-3 font-semibold;
    }

    .table td {
        @apply px-4 py-3;
        @apply text-gray-700 dark:text-gray-300;
        @apply border-t border-gray-200 dark:border-gray-800;
    }

    .table tbody tr {
        @apply bg-white dark:bg-gray-900;
        @apply hover:bg-gray-50 dark:hover:bg-gray-800/50;
        @apply transition-colors;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       NAVIGATION
       ───────────────────────────────────────────────────────────────────────────── */

    .nav-link {
        @apply px-3 py-2;
        @apply text-sm font-medium;
        @apply text-gray-600 dark:text-gray-300;
        @apply hover:text-gray-900 dark:hover:text-white;
        @apply hover:bg-gray-100 dark:hover:bg-gray-800;
        @apply rounded-md;
        @apply transition-colors duration-200;
    }

    .nav-link-active {
        @apply nav-link;
        @apply text-primary-600 dark:text-primary-400;
        @apply bg-primary-50 dark:bg-primary-900/30;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       EMPTY STATES
       ───────────────────────────────────────────────────────────────────────────── */

    .empty-state {
        @apply text-center py-12;
    }

    .empty-state-icon {
        @apply inline-flex items-center justify-center;
        @apply w-16 h-16 mb-4;
        @apply bg-gray-100 dark:bg-gray-800;
        @apply text-gray-400 dark:text-gray-500;
        @apply rounded-full;
    }

    .empty-state-title {
        @apply text-lg font-semibold text-gray-900 dark:text-white mb-2;
    }

    .empty-state-description {
        @apply text-sm text-gray-500 dark:text-gray-400 mb-6;
        @apply max-w-sm mx-auto;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       DROPDOWNS
       ───────────────────────────────────────────────────────────────────────────── */

    .dropdown-menu {
        @apply absolute z-50;
        @apply bg-white dark:bg-gray-800;
        @apply border border-gray-200 dark:border-gray-700;
        @apply rounded-lg shadow-lg;
        @apply py-1;
        @apply min-w-[200px];
    }

    .dropdown-item {
        @apply block w-full px-4 py-2;
        @apply text-sm text-left;
        @apply text-gray-700 dark:text-gray-200;
        @apply hover:bg-gray-100 dark:hover:bg-gray-700;
        @apply transition-colors duration-150;
    }

    .dropdown-divider {
        @apply my-1 border-t border-gray-200 dark:border-gray-700;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       MODALS
       ───────────────────────────────────────────────────────────────────────────── */

    .modal-backdrop {
        @apply fixed inset-0 z-40;
        @apply bg-black/50;
        @apply backdrop-blur-sm;
    }

    .modal {
        @apply fixed z-50;
        @apply top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
        @apply w-full max-w-lg;
        @apply bg-white dark:bg-gray-900;
        @apply border border-gray-200 dark:border-gray-800;
        @apply rounded-lg shadow-xl;
        @apply p-6;
    }

    .modal-header {
        @apply flex items-center justify-between mb-4;
    }

    .modal-title {
        @apply text-lg font-semibold text-gray-900 dark:text-white;
    }

    .modal-body {
        @apply text-sm text-gray-600 dark:text-gray-300;
    }

    .modal-footer {
        @apply flex items-center justify-end gap-3 mt-6 pt-4;
        @apply border-t border-gray-200 dark:border-gray-800;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       LOADING STATES
       ───────────────────────────────────────────────────────────────────────────── */

    .skeleton {
        @apply bg-gray-200 dark:bg-gray-800;
        @apply animate-pulse rounded;
    }

    .spinner {
        @apply inline-block w-5 h-5;
        @apply border-2 border-current border-t-transparent;
        @apply rounded-full;
        animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       DIVIDERS
       ───────────────────────────────────────────────────────────────────────────── */

    .divider {
        @apply border-t border-gray-200 dark:border-gray-800 my-4;
    }

    .divider-vertical {
        @apply border-l border-gray-200 dark:border-gray-800 mx-4 self-stretch;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       TYPOGRAPHY
       ───────────────────────────────────────────────────────────────────────────── */

    .page-title {
        @apply text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white;
    }

    .section-title {
        @apply text-lg font-semibold text-gray-900 dark:text-white;
    }

    .text-muted {
        @apply text-gray-500 dark:text-gray-400;
    }

    .link {
        @apply text-primary-500 hover:text-primary-600;
        @apply dark:text-primary-400 dark:hover:text-primary-300;
        @apply transition-colors duration-200;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       LAYOUT HELPERS
       ───────────────────────────────────────────────────────────────────────────── */

    .page-container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    .page-container-sm {
        @apply max-w-3xl mx-auto px-4 sm:px-6;
    }

    .page-container-lg {
        @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    .section {
        @apply py-6 sm:py-8;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

@layer utilities {
    /* Hide scrollbar */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* Line clamp */
    .line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ALPINE.JS UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

[x-cloak] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HOMEPAGE DESIGN SYSTEM
   Premium, consistent components for customer homepage
   ═══════════════════════════════════════════════════════════════════════════════ */

@layer components {

    /* ─────────────────────────────────────────────────────────────────────────────
       HOMEPAGE SECTIONS
       ───────────────────────────────────────────────────────────────────────────── */

    .home-section {
        @apply mb-10;
    }

    .home-section-header {
        @apply flex items-center justify-between mb-5;
    }

    .home-section-title {
        @apply text-lg font-semibold text-gray-900 dark:text-white;
        @apply flex items-center gap-2;
    }

    .home-section-link {
        @apply text-sm font-medium text-primary-500 hover:text-primary-600;
        @apply dark:text-primary-400 dark:hover:text-primary-300;
        @apply transition-colors duration-200;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       HOMEPAGE CARDS
       ───────────────────────────────────────────────────────────────────────────── */

    /* Category Card */
    .home-card-category {
        @apply bg-white dark:bg-gray-900;
        @apply border border-gray-200 dark:border-gray-800;
        @apply rounded-xl shadow-sm;
        @apply p-5;
        @apply text-center;
        @apply transition-all duration-200;
        @apply hover:shadow-md hover:border-primary-300 dark:hover:border-primary-700;
        @apply hover:-translate-y-0.5;
        @apply flex flex-col items-center justify-center;
        @apply min-h-[140px];
    }

    .home-card-category-icon {
        @apply w-12 h-12 rounded-xl;
        @apply bg-primary-50 dark:bg-primary-900/30;
        @apply flex items-center justify-center;
        @apply mb-3;
        @apply transition-transform duration-200;
        @apply group-hover:scale-110;
    }

    .home-card-category-title {
        @apply text-sm font-medium text-gray-900 dark:text-white;
        @apply group-hover:text-primary-600 dark:group-hover:text-primary-400;
        @apply transition-colors duration-200;
    }

    .home-card-category-meta {
        @apply text-xs text-gray-500 dark:text-gray-400 mt-1;
    }

    /* Offer Card */
    .home-card-offer {
        @apply bg-white dark:bg-gray-900;
        @apply border border-gray-200 dark:border-gray-800;
        @apply rounded-xl shadow-sm;
        @apply p-5;
        @apply transition-all duration-200;
        @apply hover:shadow-md hover:border-primary-300 dark:hover:border-primary-700;
        @apply relative overflow-hidden;
    }

    .home-card-offer-discount {
        @apply text-2xl font-bold text-primary-600 dark:text-primary-400;
        @apply mb-1;
    }

    .home-card-offer-title {
        @apply text-base font-semibold text-gray-900 dark:text-white;
        @apply group-hover:text-primary-600 dark:group-hover:text-primary-400;
        @apply transition-colors duration-200;
        @apply line-clamp-1;
    }

    .home-card-offer-meta {
        @apply text-sm text-gray-500 dark:text-gray-400;
    }

    .home-card-offer-footer {
        @apply mt-4 pt-4 border-t border-gray-100 dark:border-gray-800;
        @apply flex items-center justify-between;
    }

    /* Professional Card */
    .home-card-pro {
        @apply bg-white dark:bg-gray-900;
        @apply border border-gray-200 dark:border-gray-800;
        @apply rounded-xl shadow-sm;
        @apply p-5;
        @apply text-center;
        @apply transition-all duration-200;
        @apply hover:shadow-md hover:border-primary-300 dark:hover:border-primary-700;
        @apply hover:-translate-y-0.5;
        @apply relative;
        @apply flex flex-col;
        @apply min-h-[200px];
    }

    .home-card-pro-avatar {
        @apply w-16 h-16 rounded-full mx-auto mb-3;
        @apply border-2 border-gray-200 dark:border-gray-700;
        @apply group-hover:border-primary-500;
        @apply transition-colors duration-200;
        @apply object-cover;
    }

    .home-card-pro-avatar-placeholder {
        @apply w-16 h-16 rounded-full mx-auto mb-3;
        @apply bg-gradient-to-br from-primary-400 to-primary-600;
        @apply flex items-center justify-center;
        @apply text-white font-bold text-xl;
    }

    .home-card-pro-name {
        @apply text-sm font-semibold text-gray-900 dark:text-white;
        @apply group-hover:text-primary-600 dark:group-hover:text-primary-400;
        @apply transition-colors duration-200;
        @apply line-clamp-1;
    }

    .home-card-pro-category {
        @apply text-xs text-gray-500 dark:text-gray-400 mt-0.5;
        @apply line-clamp-1;
    }

    .home-card-pro-rating {
        @apply flex items-center justify-center gap-1 mt-2;
        @apply text-sm text-gray-700 dark:text-gray-300;
    }

    .home-card-pro-price {
        @apply text-xs font-semibold text-primary-600 dark:text-primary-400;
        @apply mt-auto pt-3;
    }

    /* Nearby Service Card */
    .home-card-nearby {
        @apply bg-white dark:bg-gray-900;
        @apply border border-gray-200 dark:border-gray-800;
        @apply rounded-xl shadow-sm;
        @apply p-4;
        @apply transition-all duration-200;
        @apply hover:shadow-md hover:border-primary-300 dark:hover:border-primary-700;
    }

    /* Quick Nav Card */
    .home-card-nav {
        @apply bg-white dark:bg-gray-900;
        @apply border border-gray-200 dark:border-gray-800;
        @apply rounded-xl shadow-sm;
        @apply p-5;
        @apply text-center;
        @apply transition-all duration-200;
        @apply hover:shadow-md hover:border-primary-300 dark:hover:border-primary-700;
        @apply hover:-translate-y-0.5;
        @apply flex flex-col items-center justify-center;
        @apply min-h-[120px];
    }

    .home-card-nav-icon {
        @apply w-12 h-12 rounded-xl;
        @apply flex items-center justify-center;
        @apply mb-3;
        @apply transition-transform duration-200;
        @apply group-hover:scale-110;
    }

    .home-card-nav-title {
        @apply text-sm font-semibold text-gray-900 dark:text-white;
        @apply group-hover:text-primary-600 dark:group-hover:text-primary-400;
        @apply transition-colors duration-200;
    }

    .home-card-nav-meta {
        @apply text-xs text-gray-500 dark:text-gray-400 mt-1;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       HERO BANNER
       ───────────────────────────────────────────────────────────────────────────── */

    .home-hero-banner {
        @apply relative overflow-hidden rounded-2xl;
        @apply bg-gradient-to-r from-primary-600 to-primary-500;
        @apply dark:from-primary-700 dark:to-primary-600;
        @apply p-6 md:p-8;
        @apply shadow-lg;
    }

    .home-hero-decoration {
        @apply absolute rounded-full bg-white/10 blur-2xl;
    }

    .home-hero-content {
        @apply relative flex flex-col md:flex-row md:items-center md:justify-between gap-4;
    }

    .home-hero-icon {
        @apply flex-shrink-0 w-14 h-14;
        @apply bg-white/20 rounded-xl;
        @apply flex items-center justify-center;
        @apply backdrop-blur-sm;
    }

    .home-hero-title {
        @apply text-xl md:text-2xl font-bold text-white;
    }

    .home-hero-subtitle {
        @apply text-white/80 text-sm mt-1;
    }

    .home-hero-cta {
        @apply inline-flex items-center gap-2;
        @apply px-5 py-2.5;
        @apply bg-white text-primary-600;
        @apply font-semibold text-sm;
        @apply rounded-lg shadow-md;
        @apply hover:bg-gray-50;
        @apply transition-colors duration-200;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       SEARCH BAR
       ───────────────────────────────────────────────────────────────────────────── */

    .home-search-bar {
        @apply w-full;
        @apply pl-12 pr-4 py-4;
        @apply bg-white dark:bg-gray-800;
        @apply border border-gray-200 dark:border-gray-700;
        @apply rounded-xl shadow-sm;
        @apply text-gray-900 dark:text-white;
        @apply placeholder-gray-400 dark:placeholder-gray-500;
        @apply text-base;
        @apply transition-all duration-200;
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
        @apply focus:shadow-md;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       BADGES
       ───────────────────────────────────────────────────────────────────────────── */

    .home-badge-urgency {
        @apply absolute top-0 right-0;
        @apply bg-red-500 text-white;
        @apply text-xs font-bold;
        @apply px-3 py-1;
        @apply rounded-bl-xl rounded-tr-xl;
    }

    .home-badge-discount {
        @apply inline-flex items-center;
        @apply bg-yellow-400 text-yellow-900;
        @apply text-xs font-bold;
        @apply px-2.5 py-1;
        @apply rounded-lg;
    }

    .home-badge-verified {
        @apply absolute -bottom-0.5 right-0;
        @apply w-5 h-5 rounded-full;
        @apply bg-blue-500;
        @apply flex items-center justify-center;
        @apply border-2 border-white dark:border-gray-900;
    }

    .home-badge-reason {
        @apply absolute top-2 right-2;
        @apply text-xs font-medium;
        @apply bg-primary-50 dark:bg-primary-900/30;
        @apply text-primary-600 dark:text-primary-400;
        @apply px-2 py-0.5;
        @apply rounded-full;
    }

    .home-badge-available {
        @apply inline-flex items-center gap-1;
        @apply text-xs text-emerald-600 dark:text-emerald-400;
    }

    .home-badge-available-dot {
        @apply w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       SMALL BUTTON
       ───────────────────────────────────────────────────────────────────────────── */

    .btn-primary-sm {
        @apply inline-flex items-center justify-center;
        @apply px-3 py-1.5;
        @apply bg-primary-500 hover:bg-primary-600;
        @apply text-white font-medium text-xs;
        @apply rounded-lg;
        @apply transition-colors duration-200;
    }

    /* ─────────────────────────────────────────────────────────────────────────────
       AVATAR UTILITIES
       ───────────────────────────────────────────────────────────────────────────── */

    .home-avatar-sm {
        @apply w-10 h-10 rounded-lg object-cover;
    }

    .home-avatar-md {
        @apply w-12 h-12 rounded-lg object-cover;
    }

    .home-avatar-lg {
        @apply w-14 h-14 rounded-full object-cover;
    }
}