/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   DEFAULT THEME
   ==========================================================================

   File:
   /public_html/assets/css/themes/default.css

   PURPOSE:
   - Default public marketplace visual theme
   - Colors
   - Surfaces
   - Borders
   - Buttons
   - Links
   - Cards
   - Forms
   - Navigation
   - Search
   - Alerts
   - Badges
   - Tables
   - Modals
   - Marketplace UI

   IMPORTANT:
   This file contains NO marketplace data.

   LIVE DATA MUST ALWAYS COME THROUGH:

   Frontend
      ↓
   JavaScript
      ↓
   API
      ↓
   Backend Controller
      ↓
   Service
      ↓
   Repository
      ↓
   LIVE DATABASE

   ========================================================================== */


/* ==========================================================================
   1. THEME ROOT
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Brand
       ---------------------------------------------------------------------- */

    --theme-primary: #0b5ed7;
    --theme-primary-hover: #084db2;
    --theme-primary-active: #063d91;
    --theme-primary-soft: #eaf2ff;

    --theme-secondary: #475569;
    --theme-secondary-hover: #334155;
    --theme-secondary-active: #1e293b;
    --theme-secondary-soft: #f1f5f9;

    --theme-accent: #f59e0b;
    --theme-accent-hover: #d97706;
    --theme-accent-soft: #fff7e6;


    /* ----------------------------------------------------------------------
       Semantic Colors
       ---------------------------------------------------------------------- */

    --theme-success: #198754;
    --theme-success-hover: #146c43;
    --theme-success-soft: #eaf7ef;

    --theme-danger: #dc3545;
    --theme-danger-hover: #b02a37;
    --theme-danger-soft: #fff0f1;

    --theme-warning: #ffc107;
    --theme-warning-hover: #d39e00;
    --theme-warning-soft: #fff8df;

    --theme-info: #0dcaf0;
    --theme-info-hover: #0aa2c0;
    --theme-info-soft: #e9fbff;


    /* ----------------------------------------------------------------------
       Backgrounds
       ---------------------------------------------------------------------- */

    --theme-body-bg: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f8fafc;
    --theme-surface-muted: #f1f5f9;
    --theme-surface-hover: #f8fafc;

    --theme-header-bg: #ffffff;
    --theme-topbar-bg: #0f172a;
    --theme-navigation-bg: #ffffff;
    --theme-footer-bg: #0f172a;


    /* ----------------------------------------------------------------------
       Text
       ---------------------------------------------------------------------- */

    --theme-text: #111827;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-text-light: #94a3b8;
    --theme-text-white: #ffffff;

    --theme-heading: #0f172a;

    --theme-link: #0b5ed7;
    --theme-link-hover: #084db2;


    /* ----------------------------------------------------------------------
       Borders
       ---------------------------------------------------------------------- */

    --theme-border: #e2e8f0;
    --theme-border-light: #edf2f7;
    --theme-border-dark: #cbd5e1;

    --theme-divider: #e5e7eb;


    /* ----------------------------------------------------------------------
       Inputs
       ---------------------------------------------------------------------- */

    --theme-input-bg: #ffffff;
    --theme-input-border: #cbd5e1;
    --theme-input-text: #111827;
    --theme-input-placeholder: #94a3b8;

    --theme-input-focus-border: #0b5ed7;
    --theme-input-focus-shadow:
        0 0 0 3px rgba(11, 94, 215, 0.12);


    /* ----------------------------------------------------------------------
       Cards
       ---------------------------------------------------------------------- */

    --theme-card-bg: #ffffff;
    --theme-card-border: #e2e8f0;
    --theme-card-shadow:
        0 4px 18px rgba(15, 23, 42, 0.06);

    --theme-card-shadow-hover:
        0 12px 30px rgba(15, 23, 42, 0.12);


    /* ----------------------------------------------------------------------
       Shadows
       ---------------------------------------------------------------------- */

    --theme-shadow-xs:
        0 1px 2px rgba(15, 23, 42, 0.05);

    --theme-shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.06);

    --theme-shadow-md:
        0 6px 20px rgba(15, 23, 42, 0.08);

    --theme-shadow-lg:
        0 14px 40px rgba(15, 23, 42, 0.12);

    --theme-shadow-xl:
        0 24px 70px rgba(15, 23, 42, 0.16);


    /* ----------------------------------------------------------------------
       Radius
       ---------------------------------------------------------------------- */

    --theme-radius-xs: 4px;
    --theme-radius-sm: 6px;
    --theme-radius-md: 8px;
    --theme-radius-lg: 12px;
    --theme-radius-xl: 16px;
    --theme-radius-2xl: 20px;
    --theme-radius-pill: 9999px;


    /* ----------------------------------------------------------------------
       Spacing
       ---------------------------------------------------------------------- */

    --theme-space-1: 4px;
    --theme-space-2: 8px;
    --theme-space-3: 12px;
    --theme-space-4: 16px;
    --theme-space-5: 20px;
    --theme-space-6: 24px;
    --theme-space-7: 28px;
    --theme-space-8: 32px;
    --theme-space-10: 40px;
    --theme-space-12: 48px;
    --theme-space-16: 64px;


    /* ----------------------------------------------------------------------
       Transitions
       ---------------------------------------------------------------------- */

    --theme-transition-fast: 120ms ease;
    --theme-transition-normal: 200ms ease;
    --theme-transition-slow: 320ms ease;


    /* ----------------------------------------------------------------------
       Z-index
       ---------------------------------------------------------------------- */

    --theme-z-header: 1000;
    --theme-z-dropdown: 1100;
    --theme-z-sticky: 1200;
    --theme-z-modal: 2000;
    --theme-z-toast: 3000;
    --theme-z-cookie: 4000;
}


/* ==========================================================================
   2. BODY
   ========================================================================== */

body {
    background: var(--theme-body-bg);
    color: var(--theme-text);
}


/* ==========================================================================
   3. HEADINGS
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--theme-heading);
}

h1,
h2,
h3 {
    font-weight: 700;
}

h4,
h5,
h6 {
    font-weight: 600;
}


/* ==========================================================================
   4. LINKS
   ========================================================================== */

a {
    color: var(--theme-link);
    text-decoration: none;
    transition:
        color var(--theme-transition-normal),
        background-color var(--theme-transition-normal);
}

a:hover {
    color: var(--theme-link-hover);
}


/* ==========================================================================
   5. TOPBAR
   ========================================================================== */

.topbar {
    background: var(--theme-topbar-bg);
    color: var(--theme-text-white);
}

.topbar a {
    color: rgba(255, 255, 255, 0.9);
}

.topbar a:hover {
    color: #ffffff;
}


/* ==========================================================================
   6. HEADER
   ========================================================================== */

.site-header {
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-xs);
}

.site-logo a {
    color: var(--theme-heading);
}


/* ==========================================================================
   7. NAVIGATION
   ========================================================================== */

.main-navigation {
    background: var(--theme-navigation-bg);
    border-bottom: 1px solid var(--theme-border);
}

.main-navigation .nav-link {
    color: var(--theme-text-secondary);
}

.main-navigation .nav-link:hover,
.main-navigation .nav-link.active {
    color: var(--theme-primary);
    background: var(--theme-primary-soft);
}

.main-navigation .dropdown-menu {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-lg);
}

.main-navigation .dropdown-menu a {
    color: var(--theme-text-secondary);
}

.main-navigation .dropdown-menu a:hover {
    color: var(--theme-primary);
    background: var(--theme-surface-soft);
}


/* ==========================================================================
   8. SEARCH
   ========================================================================== */

.search-box {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
    box-shadow: var(--theme-shadow-md);
}

.search-box:focus-within {
    border-color: var(--theme-primary);
    box-shadow: var(--theme-input-focus-shadow);
}

.search-input,
.search-box input,
.search-box select {
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    border-color: var(--theme-input-border);
}

.search-input::placeholder,
.search-box input::placeholder {
    color: var(--theme-input-placeholder);
}

.search-button {
    background: var(--theme-primary);
    color: #ffffff;
    border-color: var(--theme-primary);
}

.search-button:hover {
    background: var(--theme-primary-hover);
    border-color: var(--theme-primary-hover);
}


/* ==========================================================================
   9. LOCATION SELECTOR
   ========================================================================== */

.location-selector {
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-input-border);
    color: var(--theme-input-text);
}

.location-selector:hover {
    border-color: var(--theme-primary);
}

.location-selector:focus,
.location-selector:focus-within {
    border-color: var(--theme-input-focus-border);
    box-shadow: var(--theme-input-focus-shadow);
}


/* ==========================================================================
   10. BUTTON BASE
   ========================================================================== */

.btn {
    border-radius: var(--theme-radius-md);
    transition:
        background-color var(--theme-transition-normal),
        border-color var(--theme-transition-normal),
        color var(--theme-transition-normal),
        box-shadow var(--theme-transition-normal),
        transform var(--theme-transition-fast);
}


/* ==========================================================================
   11. PRIMARY BUTTON
   ========================================================================== */

.btn-primary {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--theme-primary-hover);
    border-color: var(--theme-primary-hover);
    color: #ffffff;
}

.btn-primary:active {
    background: var(--theme-primary-active);
    border-color: var(--theme-primary-active);
}


/* ==========================================================================
   12. SECONDARY BUTTON
   ========================================================================== */

.btn-secondary {
    background: var(--theme-secondary);
    border-color: var(--theme-secondary);
    color: #ffffff;
}

.btn-secondary:hover {
    background: var(--theme-secondary-hover);
    border-color: var(--theme-secondary-hover);
    color: #ffffff;
}


/* ==========================================================================
   13. SUCCESS BUTTON
   ========================================================================== */

.btn-success {
    background: var(--theme-success);
    border-color: var(--theme-success);
    color: #ffffff;
}

.btn-success:hover {
    background: var(--theme-success-hover);
    border-color: var(--theme-success-hover);
}


/* ==========================================================================
   14. DANGER BUTTON
   ========================================================================== */

.btn-danger {
    background: var(--theme-danger);
    border-color: var(--theme-danger);
    color: #ffffff;
}

.btn-danger:hover {
    background: var(--theme-danger-hover);
    border-color: var(--theme-danger-hover);
}


/* ==========================================================================
   15. WARNING BUTTON
   ========================================================================== */

.btn-warning {
    background: var(--theme-warning);
    border-color: var(--theme-warning);
    color: #111827;
}

.btn-warning:hover {
    background: var(--theme-warning-hover);
    border-color: var(--theme-warning-hover);
}


/* ==========================================================================
   16. INFO BUTTON
   ========================================================================== */

.btn-info {
    background: var(--theme-info);
    border-color: var(--theme-info);
    color: #062b33;
}

.btn-info:hover {
    background: var(--theme-info-hover);
    border-color: var(--theme-info-hover);
}


/* ==========================================================================
   17. OUTLINE BUTTONS
   ========================================================================== */

.btn-outline-primary {
    background: transparent;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
}

.btn-outline-primary:hover {
    background: var(--theme-primary);
    color: #ffffff;
}

.btn-outline-secondary {
    background: transparent;
    color: var(--theme-secondary);
    border: 1px solid var(--theme-secondary);
}

.btn-outline-secondary:hover {
    background: var(--theme-secondary);
    color: #ffffff;
}


/* ==========================================================================
   18. CARDS
   ========================================================================== */

.card,
.business-card,
.vendor-card,
.service-card,
.product-card,
.category-card,
.review-card,
.quote-card,
.offer-card,
.price-card {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: var(--theme-radius-lg);
    box-shadow: var(--theme-card-shadow);
}

.card:hover,
.business-card:hover,
.vendor-card:hover,
.service-card:hover,
.product-card:hover,
.category-card:hover {
    box-shadow: var(--theme-card-shadow-hover);
}


/* ==========================================================================
   19. CARD LINKS
   ========================================================================== */

.business-card a,
.vendor-card a,
.service-card a,
.product-card a,
.category-card a {
    color: inherit;
}

.business-card a:hover,
.vendor-card a:hover,
.service-card a:hover,
.product-card a:hover,
.category-card a:hover {
    color: inherit;
}


/* ==========================================================================
   20. VERIFICATION
   ========================================================================== */

.verification-badge {
    background: var(--theme-success-soft);
    color: var(--theme-success);
    border: 1px solid rgba(25, 135, 84, 0.2);
}

.verification-badge.verified {
    color: var(--theme-success);
}

.verification-badge.pending {
    background: var(--theme-warning-soft);
    color: #8a6500;
}

.verification-badge.rejected {
    background: var(--theme-danger-soft);
    color: var(--theme-danger);
}


/* ==========================================================================
   21. FORMS
   ========================================================================== */

input,
select,
textarea {
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    border: 1px solid var(--theme-input-border);
    border-radius: var(--theme-radius-md);
}

input::placeholder,
textarea::placeholder {
    color: var(--theme-input-placeholder);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--theme-border-dark);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--theme-input-focus-border);
    box-shadow: var(--theme-input-focus-shadow);
    outline: none;
}


/* ==========================================================================
   22. CHECKBOX / RADIO
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--theme-primary);
}


/* ==========================================================================
   23. FORM LABEL
   ========================================================================== */

label,
.form-label {
    color: var(--theme-text);
    font-weight: 600;
}


/* ==========================================================================
   24. FORM HELP TEXT
   ========================================================================== */

.form-help,
.form-text,
.field-help {
    color: var(--theme-text-muted);
}


/* ==========================================================================
   25. ERROR FIELD
   ========================================================================== */

.form-field-error input,
.form-field-error select,
.form-field-error textarea {
    border-color: var(--theme-danger);
}

.form-error,
.field-error {
    color: var(--theme-danger);
}


/* ==========================================================================
   26. SUCCESS FIELD
   ========================================================================== */

.form-field-success input,
.form-field-success select,
.form-field-success textarea {
    border-color: var(--theme-success);
}

.form-success {
    color: var(--theme-success);
}


/* ==========================================================================
   27. FILTER PANEL
   ========================================================================== */

.filter-panel {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
}

.filter-group {
    border-bottom: 1px solid var(--theme-divider);
}

.filter-group:last-child {
    border-bottom: 0;
}

.filter-title {
    color: var(--theme-heading);
}

.filter-option {
    color: var(--theme-text-secondary);
}

.filter-option:hover {
    color: var(--theme-primary);
}


/* ==========================================================================
   28. SORT PANEL
   ========================================================================== */

.sort-panel {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
}


/* ==========================================================================
   29. PAGINATION
   ========================================================================== */

.pagination-item,
.pagination-button {
    background: var(--theme-surface);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
}

.pagination-item:hover,
.pagination-button:hover {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
    background: var(--theme-primary-soft);
}

.pagination-item.active,
.pagination-button.active {
    background: var(--theme-primary);
    color: #ffffff;
    border-color: var(--theme-primary);
}


/* ==========================================================================
   30. BREADCRUMB
   ========================================================================== */

.breadcrumb {
    color: var(--theme-text-muted);
}

.breadcrumb a {
    color: var(--theme-link);
}

.breadcrumb-separator {
    color: var(--theme-text-light);
}


/* ==========================================================================
   31. BADGES
   ========================================================================== */

.badge {
    border-radius: var(--theme-radius-pill);
}

.badge-primary {
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
}

.badge-success {
    background: var(--theme-success-soft);
    color: var(--theme-success);
}

.badge-danger {
    background: var(--theme-danger-soft);
    color: var(--theme-danger);
}

.badge-warning {
    background: var(--theme-warning-soft);
    color: #856404;
}

.badge-info {
    background: var(--theme-info-soft);
    color: #087990;
}


/* ==========================================================================
   32. PRICE
   ========================================================================== */

.price {
    color: var(--theme-heading);
    font-weight: 700;
}

.price-current {
    color: var(--theme-primary);
}

.price-old {
    color: var(--theme-text-muted);
    text-decoration: line-through;
}

.price-discount {
    color: var(--theme-success);
}


/* ==========================================================================
   33. REVIEWS
   ========================================================================== */

.rating {
    color: var(--theme-accent);
}

.rating-empty {
    color: var(--theme-border-dark);
}

.review-card {
    background: var(--theme-card-bg);
}


/* ==========================================================================
   34. ENQUIRY
   ========================================================================== */

.enquiry-panel {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
    box-shadow: var(--theme-shadow-md);
}

.enquiry-success {
    background: var(--theme-success-soft);
    border: 1px solid rgba(25, 135, 84, 0.2);
    color: var(--theme-success);
}

.enquiry-error {
    background: var(--theme-danger-soft);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: var(--theme-danger);
}


/* ==========================================================================
   35. QUOTE
   ========================================================================== */

.quote-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
}

.quote-card:hover {
    border-color: var(--theme-primary);
}


/* ==========================================================================
   36. LEAD STATUS
   ========================================================================== */

.lead-status-new {
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
}

.lead-status-pending {
    background: var(--theme-warning-soft);
    color: #856404;
}

.lead-status-active {
    background: var(--theme-info-soft);
    color: #087990;
}

.lead-status-success {
    background: var(--theme-success-soft);
    color: var(--theme-success);
}

.lead-status-closed {
    background: var(--theme-secondary-soft);
    color: var(--theme-secondary);
}

.lead-status-rejected {
    background: var(--theme-danger-soft);
    color: var(--theme-danger);
}


/* ==========================================================================
   37. MODAL
   ========================================================================== */

.modal-overlay {
    background: rgba(15, 23, 42, 0.65);
}

.modal-dialog {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-xl);
    box-shadow: var(--theme-shadow-xl);
}

.modal-header {
    border-bottom: 1px solid var(--theme-divider);
}

.modal-footer {
    border-top: 1px solid var(--theme-divider);
}

.modal-title {
    color: var(--theme-heading);
}


/* ==========================================================================
   38. DROPDOWN
   ========================================================================== */

.dropdown-menu {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-lg);
}

.dropdown-item {
    color: var(--theme-text-secondary);
}

.dropdown-item:hover,
.dropdown-item.active {
    color: var(--theme-primary);
    background: var(--theme-primary-soft);
}


/* ==========================================================================
   39. ALERTS
   ========================================================================== */

.alert {
    border-radius: var(--theme-radius-md);
}

.alert-primary {
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
    border: 1px solid rgba(11, 94, 215, 0.15);
}

.alert-success {
    background: var(--theme-success-soft);
    color: var(--theme-success);
    border: 1px solid rgba(25, 135, 84, 0.15);
}

.alert-danger {
    background: var(--theme-danger-soft);
    color: var(--theme-danger);
    border: 1px solid rgba(220, 53, 69, 0.15);
}

.alert-warning {
    background: var(--theme-warning-soft);
    color: #856404;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.alert-info {
    background: var(--theme-info-soft);
    color: #087990;
    border: 1px solid rgba(13, 202, 240, 0.18);
}


/* ==========================================================================
   40. EMPTY STATE
   ========================================================================== */

.empty-state {
    background: var(--theme-surface-soft);
    border: 1px dashed var(--theme-border-dark);
    border-radius: var(--theme-radius-lg);
    color: var(--theme-text-secondary);
}

.empty-state-title {
    color: var(--theme-heading);
}

.empty-state-description {
    color: var(--theme-text-muted);
}


/* ==========================================================================
   41. ERROR STATE
   ========================================================================== */

.error-state {
    background: var(--theme-danger-soft);
    border: 1px solid rgba(220, 53, 69, 0.15);
    color: var(--theme-danger);
    border-radius: var(--theme-radius-lg);
}


/* ==========================================================================
   42. LOADER
   ========================================================================== */

.loader-spinner {
    border-color: var(--theme-border);
    border-top-color: var(--theme-primary);
}

.loading-overlay {
    background: rgba(255, 255, 255, 0.86);
}


/* ==========================================================================
   43. NOTIFICATION
   ========================================================================== */

.notification-panel {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-lg);
}

.notification-item {
    border-bottom: 1px solid var(--theme-divider);
}

.notification-item:hover {
    background: var(--theme-surface-soft);
}

.notification-item.unread {
    background: var(--theme-primary-soft);
}


/* ==========================================================================
   44. CHAT
   ========================================================================== */

.chat-widget,
.chat-window {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-xl);
}

.chat-header {
    background: var(--theme-primary);
    color: #ffffff;
}

.chat-message-user {
    background: var(--theme-primary);
    color: #ffffff;
}

.chat-message-system {
    background: var(--theme-surface-muted);
    color: var(--theme-text-secondary);
}

.chat-message-vendor {
    background: var(--theme-primary-soft);
    color: var(--theme-text);
}


/* ==========================================================================
   45. TABLE
   ========================================================================== */

.data-table {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
}

.data-table th {
    background: var(--theme-surface-muted);
    color: var(--theme-heading);
    border-bottom: 1px solid var(--theme-border-dark);
}

.data-table td {
    color: var(--theme-text-secondary);
    border-bottom: 1px solid var(--theme-divider);
}

.data-table tbody tr:hover {
    background: var(--theme-surface-soft);
}


/* ==========================================================================
   46. PROFILE MENU
   ========================================================================== */

.profile-menu,
.account-menu {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-lg);
}

.profile-menu a,
.account-menu a {
    color: var(--theme-text-secondary);
}

.profile-menu a:hover,
.account-menu a:hover {
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
}


/* ==========================================================================
   47. COMPARE PANEL
   ========================================================================== */

.compare-panel {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-lg);
}

.compare-panel-header {
    background: var(--theme-surface-muted);
    border-bottom: 1px solid var(--theme-divider);
}


/* ==========================================================================
   48. COOKIE / CONSENT
   ========================================================================== */

.cookie-banner {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-top: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-xl);
}


/* ==========================================================================
   49. FOOTER
   ========================================================================== */

.site-footer {
    background: var(--theme-footer-bg);
    color: rgba(255, 255, 255, 0.78);
}

.site-footer h3,
.site-footer h4,
.site-footer h5 {
    color: #ffffff;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.78);
}

.site-footer a:hover {
    color: #ffffff;
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.12);
}


/* ==========================================================================
   50. HERO
   ========================================================================== */

.hero-section {
    background:
        linear-gradient(
            135deg,
            var(--theme-primary-soft),
            var(--theme-surface)
        );
}

.hero-title {
    color: var(--theme-heading);
}

.hero-description {
    color: var(--theme-text-secondary);
}


/* ==========================================================================
   51. SECTION
   ========================================================================== */

.section-title {
    color: var(--theme-heading);
}

.section-description {
    color: var(--theme-text-secondary);
}


/* ==========================================================================
   52. PRODUCT / BUSINESS IMAGE
   ========================================================================== */

.card-image,
.product-image,
.business-image,
.vendor-image {
    background: var(--theme-surface-muted);
}


/* ==========================================================================
   53. SKELETON LOADING
   ========================================================================== */

.skeleton {
    background:
        linear-gradient(
            90deg,
            var(--theme-surface-muted) 25%,
            #e8edf3 37%,
            var(--theme-surface-muted) 63%
        );
    background-size: 400% 100%;
}


/* ==========================================================================
   54. DIVIDER
   ========================================================================== */

.divider {
    border-color: var(--theme-divider);
}

hr {
    border-color: var(--theme-divider);
}


/* ==========================================================================
   55. SELECTION
   ========================================================================== */

::selection {
    background: var(--theme-primary);
    color: #ffffff;
}


/* ==========================================================================
   56. SCROLLBAR
   ========================================================================== */

* {
    scrollbar-color:
        var(--theme-border-dark)
        var(--theme-surface-soft);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--theme-surface-soft);
}

*::-webkit-scrollbar-thumb {
    background: var(--theme-border-dark);
    border-radius: var(--theme-radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--theme-secondary);
}


/* ==========================================================================
   57. FOCUS ACCESSIBILITY
   ========================================================================== */

:focus-visible {
    outline: 3px solid rgba(11, 94, 215, 0.35);
    outline-offset: 2px;
}


/* ==========================================================================
   58. DISABLED
   ========================================================================== */

button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ==========================================================================
   59. READ ONLY
   ========================================================================== */

input[readonly],
textarea[readonly],
select[readonly] {
    background: var(--theme-surface-muted);
    color: var(--theme-text-secondary);
}


/* ==========================================================================
   60. HIGH PRIORITY SYSTEM STATES
   ========================================================================== */

.is-loading {
    cursor: progress;
}

.is-disabled {
    pointer-events: none;
    opacity: 0.6;
}

.is-hidden {
    display: none !important;
}

.is-visible {
    display: block !important;
}


/* ==========================================================================
   61. LIVE DATA EMPTY RESULT
   ========================================================================== */

/*
   IMPORTANT:

   जब API से:

   {
       "data": []
   }

   आएगा, तो UI fake business/vendor/product नहीं बनाएगा।

   इसके बजाय:

   .empty-state

   component दिखाई जाएगा।
*/

[data-state="empty"] {
    background: var(--theme-surface-soft);
    color: var(--theme-text-secondary);
}


/* ==========================================================================
   62. API ERROR STATE
   ========================================================================== */

[data-state="error"] {
    background: var(--theme-danger-soft);
    color: var(--theme-danger);
}


/* ==========================================================================
   63. API LOADING STATE
   ========================================================================== */

[data-state="loading"] {
    background: transparent;
}


/* ==========================================================================
   64. RESPONSIVE THEME SAFETY
   ========================================================================== */

@media (max-width: 767px) {

    .site-header {
        box-shadow: var(--theme-shadow-xs);
    }

    .card,
    .business-card,
    .vendor-card,
    .service-card,
    .product-card {
        border-radius: var(--theme-radius-md);
    }
}


/* ==========================================================================
   65. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================================
   END OF DEFAULT THEME
   ========================================================================== */