/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   COMPLETE PUBLIC MARKETPLACE
   MASTER PUBLIC STYLESHEET

   File:
   /home/jqkmqvml/public_html/assets/css/public.css

   PURPOSE:
   - Master stylesheet for the public marketplace.
   - Loads CSS layers in deterministic order.
   - Provides shared public UI rules.
   - Supports live API/database-driven marketplace UI.
   - Contains NO fake/demo/sample marketplace records.
   - Presentation only; business authorization belongs to backend.

   LIVE DATA ARCHITECTURE:

   HTML
      ↓
   public.css
      ↓
   UI Components
      ↓
   JavaScript
      ↓
   API Client
      ↓
   Backend API
      ↓
   Controller
      ↓
   Service
      ↓
   Repository
      ↓
   LIVE DATABASE

   IMPORTANT:
   CSS NEVER decides:
   - user roles
   - vendor permissions
   - admin permissions
   - plan eligibility
   - lead eligibility
   - business ownership
   - product ownership
   - service ownership
   - verification authorization
   - payment authorization
   - location authorization

   Those decisions MUST be enforced by the backend/API.
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

@import url("./variables.css");


/* ==========================================================================
   02. RESET
   ========================================================================== */

@import url("./reset.css");


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

@import url("./typography.css");


/* ==========================================================================
   04. GLOBAL UTILITIES
   ========================================================================== */

@import url("./utilities.css");


/* ==========================================================================
   05. CORE
   ========================================================================== */

@import url("./core/base.css");
@import url("./core/layout.css");
@import url("./core/container.css");
@import url("./core/grid.css");
@import url("./core/forms.css");


/* ==========================================================================
   06. GLOBAL COMPONENTS
   ========================================================================== */

@import url("./components/header.css");
@import url("./components/topbar.css");
@import url("./components/navigation.css");
@import url("./components/footer.css");

@import url("./components/search-box.css");
@import url("./components/location-selector.css");

@import url("./components/cards.css");

@import url("./components/enquiry.css");
@import url("./components/quote.css");

@import url("./components/filters.css");
@import url("./components/pagination.css");

@import url("./components/modal.css");
@import url("./components/chat.css");
@import url("./components/notifications.css");
@import url("./components/verification.css");


/* ==========================================================================
   07. PAGE STYLES
   ========================================================================== */

@import url("./pages/home.css");
@import url("./pages/search.css");
@import url("./pages/category.css");

@import url("./pages/business.css");
@import url("./pages/vendor.css");

@import url("./pages/service.css");
@import url("./pages/product.css");

@import url("./pages/enquiry.css");
@import url("./pages/quote.css");

@import url("./pages/cart.css");
@import url("./pages/checkout.css");

@import url("./pages/orders.css");
@import url("./pages/payments.css");

@import url("./pages/locations.css");
@import url("./pages/pricing.css");

@import url("./pages/reviews.css");
@import url("./pages/messages.css");

@import url("./pages/onboarding.css");
@import url("./pages/account.css");


/* ==========================================================================
   08. RESPONSIVE
   ========================================================================== */

@import url("./responsive/mobile.css");
@import url("./responsive/tablet.css");
@import url("./responsive/desktop.css");
@import url("./responsive/large-screen.css");


/* ==========================================================================
   09. THEMES
   ========================================================================== */

@import url("./themes/default.css");
@import url("./themes/dark.css");
@import url("./themes/accessibility.css");


/* ==========================================================================
   10. DOCUMENT FOUNDATION
   ========================================================================== */

html {
    min-height: 100%;

    background: var(--surface-page);
    color: var(--text-primary);

    font-size: 100%;

    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    min-height: 100vh;

    margin: 0;

    background: var(--surface-page);
    color: var(--text-primary);

    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   11. APPLICATION ROOT
   ========================================================================== */

#app,
#public-app,
[data-app="public"],
[data-marketplace="public"] {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
}


/* ==========================================================================
   12. MAIN CONTENT
   ========================================================================== */

main {
    display: block;

    width: 100%;
    min-width: 0;
}

#main-content {
    width: 100%;
    min-width: 0;
    min-height: 50vh;
}


/* ==========================================================================
   13. PAGE WRAPPERS
   ========================================================================== */

.page {
    width: 100%;
    min-width: 0;
}

.page-content {
    width: 100%;
    min-width: 0;
}

.page-section {
    width: 100%;
    min-width: 0;

    padding-block: var(--section-padding-y);
}

.page-section--compact {
    padding-block: var(--section-padding-y-sm);
}

.page-section--large {
    padding-block: var(--section-padding-y-lg);
}


/* ==========================================================================
   14. CONTAINERS
   ========================================================================== */

.container,
.container-fluid {
    width: 100%;
    min-width: 0;

    margin-inline: auto;
}

.container {
    max-width: var(--container-max);

    padding-inline: var(--container-padding-mobile);
}

.container-fluid {
    padding-inline: var(--container-padding-mobile);
}


/* ==========================================================================
   15. SECTION
   ========================================================================== */

.section {
    width: 100%;
    min-width: 0;
}

.section-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-5);

    margin-bottom: var(--space-6);
}

.section-header__content {
    min-width: 0;
}

.section-header__actions {
    flex: 0 0 auto;
}

.section-title {
    margin: 0;

    color: var(--text-primary);

    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);

    line-height: var(--line-height-tight);
}

.section-description {
    max-width: var(--content-width-readable);

    margin: var(--space-2) 0 0;

    color: var(--text-secondary);

    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}


/* ==========================================================================
   16. SKIP LINK
   ========================================================================== */

.skip-link {
    position: fixed;

    top: var(--space-2);
    left: var(--space-2);

    z-index: var(--z-max);

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: var(--minimum-touch-target);

    padding: var(--space-2) var(--space-4);

    color: var(--text-on-primary);
    background: var(--brand-primary);

    border-radius: var(--radius-md);

    font-weight: var(--font-weight-semibold);
    text-decoration: none;

    transform: translateY(-200%);

    transition:
        transform var(--transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);

    outline: var(--focus-visible-outline);
    outline-offset: var(--focus-visible-outline-offset);
}


/* ==========================================================================
   17. LINKS
   ========================================================================== */

a {
    color: var(--text-link);
}

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

a:focus-visible {
    outline: var(--focus-visible-outline);
    outline-offset: var(--focus-visible-outline-offset);
}


/* ==========================================================================
   18. MEDIA
   ========================================================================== */

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

iframe {
    max-width: 100%;

    border: 0;
}

img:not([src]),
img[src=""] {
    visibility: hidden;
}


/*
   IMPORTANT:
   CSS does NOT create fake images.

   If API/database does not provide an image:
   JavaScript must show the actual unavailable/empty state.
*/


/* ==========================================================================
   19. FORM FOUNDATION
   ========================================================================== */

button,
input,
select,
textarea {
    font: inherit;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--focus-visible-outline);
    outline-offset: var(--focus-visible-outline-offset);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;

    opacity: var(--opacity-disabled);
}


/* ==========================================================================
   20. HIDDEN
   ========================================================================== */

[hidden] {
    display: none !important;
}


/* ==========================================================================
   21. LIVE DATA STATE CONTRACT
   ========================================================================== */

/*
   Supported presentation states:

   loading
   ready
   empty
   error
   unavailable
   unauthorized
   forbidden

   These states MUST be controlled by JavaScript/API responses.

   CSS never creates fake marketplace records.
*/

[data-state] {
    min-width: 0;
}

[data-state="loading"] {
    cursor: progress;
}

[data-state="ready"] {
    cursor: default;
}

[data-state="empty"] {
    min-height: 120px;
}

[data-state="error"] {
    min-height: 120px;
}

[data-state="unavailable"] {
    opacity: var(--opacity-muted);
}

[data-state="unauthorized"],
[data-state="forbidden"] {
    min-height: 120px;
}


/* ==========================================================================
   22. API LOADING STATE
   ========================================================================== */

[data-loading="true"] {
    pointer-events: none;
}

[data-loading="false"] {
    pointer-events: auto;
}


/* ==========================================================================
   23. DATA CONTAINERS
   ========================================================================== */

[data-list],
[data-results],
[data-items],
[data-pagination],
[data-total],
[data-count] {
    min-width: 0;
}


/* ==========================================================================
   24. MARKETPLACE GRID
   ========================================================================== */

.marketplace-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: var(--grid-gap-md);

    width: 100%;
}

.marketplace-grid--compact {
    gap: var(--grid-gap-sm);
}

.marketplace-grid--large {
    gap: var(--grid-gap-lg);
}


/* ==========================================================================
   25. MARKETPLACE CONTENT LAYOUT
   ========================================================================== */

.marketplace-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: var(--space-6);

    align-items: start;

    width: 100%;
}

.marketplace-main,
.marketplace-sidebar {
    min-width: 0;
}


/* ==========================================================================
   26. SURFACES
   ========================================================================== */

.surface {
    background: var(--surface-primary);
}

.surface-muted {
    background: var(--surface-secondary);
}

.surface-elevated {
    background: var(--surface-elevated);

    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   27. PANELS
   ========================================================================== */

.panel {
    min-width: 0;

    background: var(--surface-primary);

    border:
        var(--border-width-thin)
        solid
        var(--border-color);

    border-radius: var(--radius-lg);
}

.panel--padded {
    padding: var(--space-5);
}


/* ==========================================================================
   28. DIVIDER
   ========================================================================== */

.divider {
    width: 100%;
    height: var(--border-width-thin);

    margin-block: var(--space-5);

    background: var(--border-color);
}


/* ==========================================================================
   29. VISUALLY HIDDEN
   ========================================================================== */

.visually-hidden,
.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ==========================================================================
   30. TEXT
   ========================================================================== */

.text-primary {
    color: var(--text-primary);
}

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

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

.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.text-danger {
    color: var(--color-danger);
}

.text-info {
    color: var(--color-info);
}


/* ==========================================================================
   31. STATUS
   ========================================================================== */

.status-online {
    color: var(--status-online);
}

.status-offline {
    color: var(--status-offline);
}

.status-pending {
    color: var(--status-pending);
}

.status-approved {
    color: var(--status-approved);
}

.status-rejected {
    color: var(--status-rejected);
}

.status-published {
    color: var(--status-published);
}

.status-suspended {
    color: var(--status-suspended);
}

.status-expired {
    color: var(--status-expired);
}


/* ==========================================================================
   32. ALERTS
   ========================================================================== */

.alert {
    width: 100%;
    min-width: 0;

    padding: var(--space-4);

    border:
        var(--border-width-thin)
        solid
        transparent;

    border-radius: var(--radius-lg);
}

.alert--success {
    background: var(--color-success-soft);
    border-color: var(--color-success-border);
    color: var(--color-success-hover);
}

.alert--warning {
    background: var(--color-warning-soft);
    border-color: var(--color-warning-border);
    color: var(--color-warning-hover);
}

.alert--danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
    color: var(--color-danger-hover);
}

.alert--info {
    background: var(--color-info-soft);
    border-color: var(--color-info-border);
    color: var(--color-info-hover);
}


/* ==========================================================================
   33. EMPTY / ERROR / LOADER HOSTS
   ========================================================================== */

.empty-state-host,
.error-state-host,
.loader-host {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   34. MARKETPLACE CARD HOSTS
   ========================================================================== */

[data-component$="-card"],
[data-component="business-card"],
[data-component="vendor-card"],
[data-component="service-card"],
[data-component="product-card"],
[data-component="category-card"],
[data-component="review-card"],
[data-component="quote-card"],
[data-component="offer-card"],
[data-component="price-card"] {
    min-width: 0;
}


/* ==========================================================================
   35. SEARCH / LOCATION HOSTS
   ========================================================================== */

.search-host,
.location-host,
.autocomplete-host {
    min-width: 0;
}


/* ==========================================================================
   36. INTERACTIVE ELEMENTS
   ========================================================================== */

[data-action],
[data-clickable="true"],
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   37. TOUCH TARGET
   ========================================================================== */

[data-action],
button,
.button,
a.button,
input[type="submit"],
input[type="button"] {
    min-height: var(--minimum-touch-target);
}


/* ==========================================================================
   38. TABLE
   ========================================================================== */

.table-wrapper {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
    min-width: 42rem;
}


/* ==========================================================================
   39. TEXT WRAPPING
   ========================================================================== */

.text-wrap,
.break-word {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.no-overflow {
    overflow: hidden;
}


/* ==========================================================================
   40. ASPECT RATIOS
   ========================================================================== */

.aspect-square {
    aspect-ratio: var(--aspect-square);
}

.aspect-video {
    aspect-ratio: var(--aspect-video);
}

.aspect-card {
    aspect-ratio: var(--aspect-card);
}


/* ==========================================================================
   41. OBJECT FIT
   ========================================================================== */

.object-cover {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.object-contain {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================================================
   42. Z-INDEX SAFETY
   ========================================================================== */

[data-layer="header"] {
    z-index: var(--z-header);
}

[data-layer="dropdown"] {
    z-index: var(--z-dropdown);
}

[data-layer="modal"] {
    z-index: var(--z-modal);
}

[data-layer="toast"] {
    z-index: var(--z-toast);
}


/* ==========================================================================
   43. ACCESSIBILITY
   ========================================================================== */

:focus-visible {
    outline: var(--focus-visible-outline);
    outline-offset: var(--focus-visible-outline-offset);
}


/* ==========================================================================
   44. RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 39.999rem) {

    html {
        scroll-padding-top: var(--header-height-mobile);
    }

    .section-header {
        align-items: flex-start;

        flex-direction: column;

        gap: var(--space-3);
    }

    .section-header__actions {
        width: 100%;
    }

    .section-title {
        font-size: var(--font-size-xl);
    }

    .page-section {
        padding-block: var(--section-padding-y-sm);
    }

    .marketplace-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }

}


/* ==========================================================================
   45. RESPONSIVE - TABLET
   ========================================================================== */

@media (min-width: 40rem) {

    .container,
    .container-fluid {
        padding-inline:
            var(--container-padding-tablet);
    }

    .marketplace-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================================
   46. RESPONSIVE - DESKTOP
   ========================================================================== */

@media (min-width: 64rem) {

    .container,
    .container-fluid {
        padding-inline:
            var(--container-padding-desktop);
    }

    .marketplace-layout {
        grid-template-columns:
            minmax(
                15rem,
                var(--filter-width)
            )
            minmax(0, 1fr);
    }

    .marketplace-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* ==========================================================================
   47. RESPONSIVE - LARGE SCREEN
   ========================================================================== */

@media (min-width: 87.5rem) {

    .container,
    .container-fluid {
        padding-inline:
            var(--container-padding-large);
    }

    .marketplace-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


/* ==========================================================================
   48. REDUCED MOTION
   ========================================================================== */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}


/* ==========================================================================
   49. HIGH CONTRAST
   ========================================================================== */

@media (prefers-contrast: more) {

    :focus-visible {
        outline-width: 3px;
    }

    .panel,
    button,
    input,
    select,
    textarea {
        border-width: 2px;
    }

}


/* ==========================================================================
   50. FORCED COLORS
   ========================================================================== */

@media (forced-colors: active) {

    button,
    input,
    select,
    textarea,
    a {
        forced-color-adjust: auto;
    }

    :focus-visible {
        outline:
            3px solid
            Highlight;

        outline-offset: 3px;
    }

}


/* ==========================================================================
   51. PRINT
   ========================================================================== */

@media print {

    html,
    body {
        background: var(--print-background);
        color: var(--print-text);
    }

    .no-print,
    header,
    nav,
    footer,
    .chat-widget,
    .cookie-banner,
    .modal-overlay {
        display: none !important;
    }

    a {
        color: var(--print-text);
        text-decoration: underline;
    }

    .panel,
    .card {
        box-shadow: none !important;
        border-color: var(--print-border);
    }

}


/* ==========================================================================
   52. FINAL LIVE-DATA SAFETY CONTRACT
   ========================================================================== */

/*
   PUBLIC MARKETPLACE DATA RULE:

   This stylesheet MUST NEVER contain:

   - business names
   - vendor names
   - service records
   - product records
   - category records
   - location records
   - review records
   - enquiry records
   - quote records
   - order records
   - prices
   - plans
   - lead records
   - user records
   - admin records
   - fake IDs
   - fake images
   - demo statistics
   - hardcoded marketplace content

   All such data MUST come from:

   DATABASE
       ↓
   REPOSITORY
       ↓
   SERVICE
       ↓
   CONTROLLER
       ↓
   API
       ↓
   JAVASCRIPT
       ↓
   HTML/UI

   If database/API returns zero records:
       SHOW EMPTY STATE

   If API fails:
       SHOW ERROR STATE

   If loading:
       SHOW LOADING STATE

   NEVER fabricate a record in CSS/HTML/JavaScript.
*/


/* ==========================================================================
   END OF PUBLIC MASTER STYLESHEET
   ========================================================================== */