/* Base styles */
    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', 'Arial', sans-serif; background: #f9fafb; color: #222; }
    .fa-star { color: #fbbf24; }

    /* Table styles */
    .table-fixed thead { background: #c7f9cc; }
    .table-fixed th { cursor: pointer; }
    .table-fixed tr:nth-child(even) { background-color: #e7f7ef; }

    /* Utility styles */
    ::-webkit-scrollbar { display: none; }
    [x-cloak] { display: none !important; }
    .overflow-x-auto, .overflow-y-auto { overflow: visible !important; }

    /* FAQ accordion styles */
    .faq-item input[type="checkbox"] { display: none; }
    .faq-item label { 
    cursor: pointer; 
    display: block; 
    padding: 0.75rem 1rem; 
    font-weight: 600; 
    background: #c7f9cc; 
    border-radius: 8px; 
    transition: background 0.2s;
    }
    .faq-item label:hover { background: #bdf2bf; }
    .faq-answer { 
    max-height: 0; 
    overflow: hidden; 
        transition: max-height 0.3s cubic-bezier(0.45,0,0.55,1);
    }
    .faq-item input[type="checkbox"]:checked ~ .faq-answer { 
        max-height: 1200px; 
        padding-bottom: 0.75rem;
    }

    /* Button styles */
    .btn { 
        @apply py-2 px-4 rounded bg-green-600 text-white font-bold shadow hover:bg-green-700; 
    }
    .btn-outline { 
        @apply py-2 px-4 rounded border border-green-600 text-green-700 bg-white hover:bg-green-600 hover:text-white font-semibold; 
    }

    /* Pagination styles */
    .pagination {
        display: inline-block;
    }
    .pagination a {
        color: black;
        float: left;
        margin-top: 10px;
        padding: 3px 10px 0px 10px;
        text-decoration: none;
    }
    .pagination a.active {
        background-color: #4CAF50;
        color: white;
        border-radius: 3px;
    }
    .pagination a:hover:not(.active) {
        background-color: #ddd;
        border-radius: 3px;
    }

    /* Form input width overrides */
    #name, #email, #featurePackage, #businessName, #businessWebsite, #businessAddress,
    #businessCity, #businessEmail, #businessPhone, #businessType, #businessMessage {
        width: 50% !important;
    }

    /* Responsive adjustments */
    
    @media (max-width: 1024px) {
        .directory-table th, .directory-table td { 
            font-size: 0.92rem; 
            padding: 0.2rem 0.45rem;
        }
    }

    @media (max-width: 600px) {
        .directory-table, 
        .directory-table thead, 
        .directory-table tbody, 
        .directory-table th, 
        .directory-table td, 
        .directory-table tr {
            display: block;
        }
        .directory-table tr { 
            border-bottom: 1px solid #d9f99d; 
            margin-bottom: 1rem; 
        }
        .directory-table th { 
            position: absolute; 
            left: -9999px;
        }
        .directory-table td {
            position: relative;
            padding-left: 40%;
            min-height: 2.5rem;
            border: none;
            border-bottom: 1px solid #bfdbfe;
        }
        .directory-table td:before {
            position: absolute;
            left: 0.5rem;
            top: 0.2rem;
            width: 35%;
            white-space: nowrap;
            font-weight: bold;
            color: #047857;
            content: attr(data-label);
        }
    }

    @media (max-width: 768px) {
        #modal {
            position: fixed !important;
            top: 15% !important;
            left: 2px !important;
            right: 2px !important;
            width: auto !important;
            max-width: 95% !important;
            height: auto !important;
            max-height: 80% !important;
            overflow-y: auto !important;
        }

        #modalContent {
            overflow-wrap: break-word;
        }

        .flex.items-center.ml-0.md\:ml-4 {
            flex-direction: column;
            align-items: flex-start;
        }

        .flex.items-center.ml-0.md\:ml-4 > label {
            margin-bottom: 5px;
            margin-right: 0 !important;
        }

        .flex.items-center.ml-0.md\:ml-4 > input[type="text"] {
            width: 100%;
            margin-bottom: 10px;
            margin-left: 0 !important;
        }
    }