/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE
   MOBILE RESPONSIVE CSS
   --------------------------------------------------------------------------
   File:
   /public_html/assets/css/responsive/mobile.css

   Purpose:
   - Mobile-first responsive behaviour
   - Public marketplace pages
   - Search / location / business / vendor / service / product
   - Enquiry / quote / cart / checkout / orders / payments
   - Account / onboarding / reviews / messages / notifications
   - Live API-rendered content only
   - No fake/demo/sample marketplace data
   ========================================================================== */


/* ==========================================================================
   1. MOBILE BASE
   ========================================================================== */

@media (max-width: 767px) {

    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    img,
    video,
    iframe,
    svg {
        max-width: 100%;
        height: auto;
    }

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

    button,
    a,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }

    a {
        word-break: break-word;
    }

    .container,
    .account-container,
    .page-container,
    .search-container {
        width: 100%;
        max-width: none;
        margin-inline: auto;
        padding-inline: 16px;
    }

    .container-fluid {
        width: 100%;
        padding-inline: 16px;
    }


    /* ======================================================================
       2. GLOBAL LAYOUT
       ====================================================================== */

    .page,
    .page-wrapper,
    .site-wrapper,
    .main-wrapper {
        width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .section {
        padding-block: 32px;
    }

    .section-sm {
        padding-block: 24px;
    }

    .section-lg {
        padding-block: 40px;
    }

    .section-header {
        margin-bottom: 20px;
    }

    .section-title {
        font-size: 1.35rem;
        line-height: 1.3;
    }

    .section-subtitle {
        font-size: 0.92rem;
        line-height: 1.55;
    }


    /* ======================================================================
       3. TOPBAR
       ====================================================================== */

    .topbar {
        min-height: 38px;
        overflow: hidden;
    }

    .topbar-inner {
        min-height: 38px;
        padding-inline: 12px;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .topbar-inner::-webkit-scrollbar {
        display: none;
    }

    .topbar-left,
    .topbar-right {
        flex: 0 0 auto;
        gap: 8px;
    }

    .topbar-item {
        white-space: nowrap;
        font-size: 0.75rem;
    }


    /* ======================================================================
       4. HEADER
       ====================================================================== */

    .header,
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .header-inner,
    .site-header-inner {
        min-height: 60px;
        padding-inline: 12px;
        gap: 8px;
    }

    .header-logo,
    .site-logo {
        max-width: 150px;
        flex: 0 0 auto;
    }

    .header-logo img,
    .site-logo img {
        max-height: 42px;
        width: auto;
    }

    .header-actions {
        gap: 4px;
        margin-inline-start: auto;
    }

    .header-action {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    .header-action-label {
        display: none;
    }

    .header-account,
    .header-profile {
        max-width: 44px;
    }

    .header-navigation {
        display: none;
    }


    /* ======================================================================
       5. MOBILE NAVIGATION
       ====================================================================== */

    .mobile-navigation {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1100;
        min-height: 62px;
        padding-block: 6px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        background: var(--surface-color, #fff);
        border-top: 1px solid var(--border-color, #e5e7eb);
    }

    .mobile-navigation-list {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-navigation-item,
    .mobile-navigation-link {
        min-width: 0;
    }

    .mobile-navigation-link {
        min-height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 5px 3px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 0.68rem;
        line-height: 1.2;
    }

    .mobile-navigation-icon {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
    }

    .mobile-navigation-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body {
        padding-bottom: 68px;
    }


    /* ======================================================================
       6. SEARCH BOX
       ====================================================================== */

    .search-box {
        width: 100%;
    }

    .search-box-inner {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .search-box-main {
        width: 100%;
    }

    .search-input {
        min-height: 48px;
        width: 100%;
        padding-inline: 44px 44px;
        font-size: 16px;
    }

    .search-submit {
        min-width: 44px;
        min-height: 44px;
    }

    .search-location {
        width: 100%;
    }

    .search-location-select {
        width: 100%;
        min-height: 46px;
    }

    .search-button {
        width: 100%;
        min-height: 48px;
    }

    .search-box-inline {
        display: flex;
        flex-direction: column;
    }


    /* ======================================================================
       7. SEARCH AUTOCOMPLETE
       ====================================================================== */

    .search-autocomplete,
    .autocomplete-panel {
        position: absolute;
        inset-inline: 0;
        top: calc(100% + 4px);
        width: 100%;
        max-height: 65vh;
        overflow-y: auto;
        border-radius: 10px;
    }

    .search-autocomplete-item {
        min-height: 52px;
        padding: 10px 12px;
    }


    /* ======================================================================
       8. LOCATION SELECTOR
       ====================================================================== */

    .location-selector {
        width: 100%;
    }

    .location-selector-button {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
        padding-inline: 12px;
    }

    .location-selector-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        max-height: 100dvh;
        border-radius: 0;
        overflow-y: auto;
        z-index: 2000;
    }

    .location-selector-header {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 14px 16px;
    }

    .location-selector-search {
        min-height: 46px;
    }

    .location-selector-list {
        padding: 8px 16px;
    }

    .location-selector-item {
        min-height: 48px;
    }


    /* ======================================================================
       9. HERO
       ====================================================================== */

    .hero,
    .home-hero {
        padding-block: 32px;
    }

    .hero-content {
        width: 100%;
        text-align: center;
    }

    .hero-title {
        font-size: clamp(1.65rem, 7vw, 2.25rem);
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .hero-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .hero-actions .btn,
    .hero-actions a,
    .hero-actions button {
        width: 100%;
    }


    /* ======================================================================
       10. GRID SYSTEM
       ====================================================================== */

    .grid,
    .cards-grid,
    .business-grid,
    .vendor-grid,
    .service-grid,
    .product-grid,
    .category-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .two-column,
    .three-column,
    .four-column {
        grid-template-columns: 1fr;
    }


    /* ======================================================================
       11. CARDS
       ====================================================================== */

    .card,
    .business-card,
    .vendor-card,
    .service-card,
    .product-card,
    .category-card,
    .review-card,
    .quote-card,
    .offer-card,
    .price-card {
        width: 100%;
        min-width: 0;
    }

    .card-body {
        padding: 14px;
    }

    .card-title {
        font-size: 1rem;
        line-height: 1.4;
    }

    .card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-actions > * {
        min-height: 44px;
    }


    /* ======================================================================
       12. BUSINESS / VENDOR CARDS
       ====================================================================== */

    .business-card-header,
    .vendor-card-header {
        gap: 10px;
    }

    .business-card-logo,
    .vendor-card-logo {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }

    .business-card-content,
    .vendor-card-content {
        min-width: 0;
    }

    .business-card-title,
    .vendor-card-title {
        font-size: 1rem;
    }

    .business-card-meta,
    .vendor-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .business-card-actions,
    .vendor-card-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       13. SERVICE / PRODUCT CARDS
       ====================================================================== */

    .service-card-image,
    .product-card-image {
        aspect-ratio: 16 / 10;
        width: 100%;
        overflow: hidden;
    }

    .service-card-image img,
    .product-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .service-card-actions,
    .product-card-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       14. FILTERS
       ====================================================================== */

    .filter-panel {
        width: 100%;
    }

    .filter-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .filter-panel-content {
        display: none;
    }

    .filter-panel.is-open .filter-panel-content {
        display: block;
    }

    .filters {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .filters::-webkit-scrollbar {
        display: none;
    }

    .filter-chip,
    .filter-button {
        flex: 0 0 auto;
        min-height: 42px;
        white-space: nowrap;
    }


    /* ======================================================================
       15. SORTING
       ========================================================================== */

    .sort-panel {
        width: 100%;
    }

    .sort-select {
        width: 100%;
        min-height: 44px;
    }

    .search-toolbar {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .search-toolbar-left,
    .search-toolbar-right {
        width: 100%;
    }


    /* ======================================================================
       16. SEARCH RESULTS
       ========================================================================== */

    .search-results-layout {
        display: block;
    }

    .search-sidebar {
        display: none;
    }

    .search-results-main {
        width: 100%;
    }

    .search-result {
        width: 100%;
    }

    .search-result-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .search-result-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       17. MAP
       ========================================================================== */

    .map-container,
    .search-map,
    .location-map {
        width: 100%;
        min-height: 320px;
        height: 55vh;
        max-height: 520px;
    }

    .map-sidebar {
        display: none;
    }

    .map-controls {
        gap: 6px;
    }

    .map-control {
        min-width: 44px;
        min-height: 44px;
    }


    /* ======================================================================
       18. DETAIL PAGES
       ========================================================================== */

    .detail-layout,
    .business-detail-layout,
    .vendor-detail-layout,
    .service-detail-layout,
    .product-detail-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .detail-main,
    .detail-sidebar {
        width: 100%;
    }

    .detail-sidebar {
        order: 2;
    }

    .detail-main {
        order: 1;
    }

    .detail-header {
        padding: 16px;
    }

    .detail-title {
        font-size: 1.45rem;
        line-height: 1.3;
    }

    .detail-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       19. BUSINESS / VENDOR PROFILE
       ========================================================================== */

    .business-profile-header,
    .vendor-profile-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .business-profile-logo,
    .vendor-profile-logo {
        width: 88px;
        height: 88px;
    }

    .business-profile-actions,
    .vendor-profile-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .business-contact-actions,
    .vendor-contact-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       20. TABS
       ========================================================================== */

    .tabs,
    .detail-tabs,
    .profile-tabs {
        display: flex;
        overflow-x: auto;
        gap: 4px;
        scrollbar-width: none;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
    }

    .tabs::-webkit-scrollbar,
    .detail-tabs::-webkit-scrollbar,
    .profile-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab,
    .tabs a,
    .detail-tabs a,
    .profile-tabs a {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 10px 12px;
        white-space: nowrap;
    }


    /* ======================================================================
       21. ENQUIRY
       ========================================================================== */

    .enquiry-form,
    .enquiry-panel {
        width: 100%;
    }

    .enquiry-form-row {
        display: block;
    }

    .enquiry-form-group {
        width: 100%;
        margin-bottom: 12px;
    }

    .enquiry-input,
    .enquiry-select,
    .enquiry-textarea {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
    }

    .enquiry-textarea {
        min-height: 120px;
    }

    .enquiry-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .enquiry-modal {
        align-items: flex-end;
    }

    .enquiry-modal .modal-dialog {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        margin: 0;
        border-radius: 18px 18px 0 0;
        overflow-y: auto;
    }


    /* ======================================================================
       22. QUOTE
       ========================================================================== */

    .quote-layout {
        display: block;
    }

    .quote-form {
        width: 100%;
    }

    .quote-results {
        width: 100%;
    }

    .quote-card {
        width: 100%;
    }

    .quote-card-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .quote-compare {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* ======================================================================
       23. COMPARE
       ========================================================================== */

    .compare-panel {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .compare-table {
        min-width: 680px;
    }


    /* ======================================================================
       24. CART
       ========================================================================== */

    .cart-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cart-items,
    .cart-summary {
        width: 100%;
    }

    .cart-item {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
        padding-block: 12px;
    }

    .cart-item-image {
        width: 64px;
        height: 64px;
    }

    .cart-item-content {
        min-width: 0;
    }

    .cart-item-actions {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cart-summary {
        position: static;
    }

    .cart-checkout-button {
        width: 100%;
        min-height: 48px;
    }


    /* ======================================================================
       25. CHECKOUT
       ========================================================================== */

    .checkout-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .checkout-main,
    .checkout-sidebar {
        width: 100%;
    }

    .checkout-step {
        padding: 14px;
    }

    .checkout-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       26. ORDERS
       ========================================================================== */

    .orders-list {
        width: 100%;
    }

    .order-card {
        width: 100%;
        padding: 14px;
    }

    .order-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .order-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .order-items {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* ======================================================================
       27. PAYMENT
       ========================================================================== */

    .payment-methods {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .payment-method {
        min-height: 52px;
        padding: 12px;
    }

    .payment-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .payment-status-card {
        width: 100%;
        padding: 20px 16px;
        text-align: center;
    }


    /* ======================================================================
       28. LOCATION PAGES
       ========================================================================== */

    .location-grid {
        grid-template-columns: 1fr;
    }

    .location-card {
        min-height: 0;
    }

    .location-breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .location-breadcrumb::-webkit-scrollbar {
        display: none;
    }


    /* ======================================================================
       29. PRICING
       ========================================================================== */

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .pricing-card {
        width: 100%;
    }

    .pricing-card.featured {
        transform: none;
    }

    .pricing-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pricing-compare {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pricing-compare table {
        min-width: 700px;
    }


    /* ======================================================================
       30. REVIEWS
       ========================================================================== */

    .review-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .review-card {
        width: 100%;
    }

    .review-header {
        gap: 10px;
    }

    .review-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }


    /* ======================================================================
       31. MESSAGES / CHAT
       ========================================================================== */

    .messages-layout,
    .chat-layout {
        display: block;
        height: auto;
    }

    .conversations {
        width: 100%;
        max-height: none;
    }

    .conversation-list {
        max-height: 50vh;
        overflow-y: auto;
    }

    .conversation {
        width: 100%;
    }

    .chat-window {
        min-height: 60vh;
        max-height: 70vh;
    }

    .chat-input {
        min-height: 46px;
        padding-inline: 12px;
    }

    .chat-actions {
        gap: 4px;
    }

    .chat-action {
        min-width: 44px;
        min-height: 44px;
    }


    /* ======================================================================
       32. NOTIFICATIONS
       ========================================================================== */

    .notification-panel {
        position: fixed;
        inset-inline: 8px;
        top: 64px;
        width: auto;
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
    }

    .notification-item {
        padding: 12px;
    }


    /* ======================================================================
       33. ACCOUNT
       ========================================================================== */

    .account-layout {
        display: block;
    }

    .account-sidebar {
        width: 100%;
        margin-bottom: 16px;
    }

    .account-main {
        width: 100%;
    }

    .account-profile {
        padding: 14px;
    }

    .account-profile-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .account-avatar,
    .account-avatar-image,
    .account-avatar-fallback {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }

    .account-profile-name {
        font-size: 1.05rem;
    }

    .account-nav-list {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .account-nav-list::-webkit-scrollbar {
        display: none;
    }

    .account-nav-item {
        flex: 0 0 auto;
    }

    .account-nav-link {
        min-height: 44px;
        padding: 9px 12px;
        white-space: nowrap;
    }

    .account-grid {
        grid-template-columns: 1fr;
    }

    .account-stat {
        width: 100%;
    }

    .account-form-row,
    .account-field-row,
    .account-field-grid {
        display: block;
    }

    .account-form-group,
    .account-field {
        width: 100%;
        margin-bottom: 12px;
    }

    .account-input,
    .account-select,
    .account-textarea {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
    }

    .account-textarea {
        min-height: 120px;
    }

    .account-actions,
    .account-sticky-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .account-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .account-table {
        min-width: 680px;
    }


    /* ======================================================================
       34. ACCOUNT SECURITY
       ========================================================================== */

    .account-security-grid {
        grid-template-columns: 1fr;
    }

    .account-session,
    .account-device {
        display: block;
    }

    .account-session-actions,
    .account-device-actions {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       35. ACCOUNT LOCATIONS
       ========================================================================== */

    .account-location-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .account-location-card {
        width: 100%;
    }


    /* ======================================================================
       36. ACCOUNT ENQUIRIES / LEADS
       ========================================================================== */

    .account-enquiry-list,
    .account-leads {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .account-enquiry,
    .account-lead {
        width: 100%;
    }

    .account-enquiry-actions,
    .account-lead-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       37. ACCOUNT ORDERS / QUOTES
       ========================================================================== */

    .account-orders,
    .account-quotes {
        width: 100%;
    }

    .account-order,
    .account-quote {
        width: 100%;
        padding: 14px;
    }

    .account-order-header,
    .account-quote-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }


    /* ======================================================================
       38. ACCOUNT CART
       ========================================================================== */

    .account-cart {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .account-cart-item {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .account-cart-summary {
        width: 100%;
    }


    /* ======================================================================
       39. ACCOUNT BUSINESS / VENDOR
       ========================================================================== */

    .account-businesses {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .account-business {
        width: 100%;
    }

    .account-vendor-application,
    .account-vendor-status,
    .account-vendor-verification {
        width: 100%;
    }


    /* ======================================================================
       40. ONBOARDING
       ========================================================================== */

    .onboarding-layout {
        display: block;
    }

    .onboarding-sidebar {
        display: none;
    }

    .onboarding-main {
        width: 100%;
    }

    .onboarding-step {
        padding: 14px;
    }

    .onboarding-progress {
        overflow-x: auto;
    }

    .onboarding-progress-list {
        min-width: 520px;
    }

    .onboarding-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       41. FORMS
       ========================================================================== */

    .form-row,
    .form-grid,
    .form-two-column,
    .form-three-column {
        display: block;
    }

    .form-group {
        width: 100%;
        margin-bottom: 14px;
    }

    .form-control,
    .form-select,
    .form-input,
    .form-textarea {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
    }

    .form-textarea {
        min-height: 120px;
    }

    .form-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    input[type="file"] {
        width: 100%;
        min-height: 46px;
    }


    /* ======================================================================
       42. BUTTONS
       ========================================================================== */

    .btn,
    button,
    .button {
        min-height: 44px;
    }

    .btn-block,
    .button-block {
        width: 100%;
    }

    .btn-group {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .btn-group-inline {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }


    /* ======================================================================
       43. MODAL
       ========================================================================== */

    .modal {
        align-items: flex-end;
        padding: 0;
    }

    .modal-dialog {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        margin: 0;
        border-radius: 18px 18px 0 0;
        overflow-y: auto;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-inline: 16px;
    }

    .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       44. DRAWER
       ========================================================================== */

    .drawer {
        width: 100%;
        max-width: none;
    }

    .drawer-left,
    .drawer-right {
        inset-inline: 0;
    }


    /* ======================================================================
       45. PAGINATION
       ========================================================================== */

    .pagination {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    .pagination-item,
    .pagination-link {
        min-width: 42px;
        min-height: 42px;
    }


    /* ======================================================================
       46. BREADCRUMB
       ========================================================================== */

    .breadcrumb {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }


    /* ======================================================================
       47. EMPTY / ERROR / LOADING
       ========================================================================== */

    .empty-state,
    .error-state,
    .loading-state {
        width: 100%;
        padding: 32px 16px;
        text-align: center;
    }

    .empty-state-actions,
    .error-state-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 16px;
    }

    .skeleton-grid {
        grid-template-columns: 1fr;
    }


    /* ======================================================================
       48. STATUS
       ========================================================================== */

    .status-group,
    .status-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .status-badge,
    .account-status-badge {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }


    /* ======================================================================
       49. MEDIA GALLERY
       ========================================================================== */

    .media-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .media-gallery-item {
        aspect-ratio: 1 / 1;
    }

    .image-viewer {
        padding: 8px;
    }

    .image-viewer-image {
        max-width: 100%;
        max-height: 80dvh;
        object-fit: contain;
    }


    /* ======================================================================
       50. VIDEO / EMBED
       ========================================================================== */

    .video-wrapper,
    .embed-wrapper {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .video-wrapper iframe,
    .embed-wrapper iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }


    /* ======================================================================
       51. FOOTER
       ========================================================================== */

    .footer {
        padding-bottom: 82px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-column {
        width: 100%;
    }

    .footer-links {
        display: grid;
        gap: 8px;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }


    /* ======================================================================
       52. COOKIE / CONSENT
       ========================================================================== */

    .cookie-banner,
    .consent-banner {
        position: fixed;
        inset-inline: 8px;
        bottom: 72px;
        width: auto;
        max-width: none;
        z-index: 1500;
    }

    .cookie-actions,
    .consent-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       53. CHAT WIDGET
       ========================================================================== */

    .chat-widget {
        inset-inline: 10px;
        bottom: 74px;
        width: auto;
        max-width: none;
    }

    .chat-widget-window {
        width: 100%;
        max-height: 70dvh;
    }

    .chat-widget-toggle {
        min-width: 50px;
        min-height: 50px;
    }


    /* ======================================================================
       54. SHARE / REPORT
       ========================================================================== */

    .share-panel,
    .report-panel {
        width: 100%;
    }

    .share-options,
    .report-options {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* ======================================================================
       55. CAPTCHA
       ========================================================================== */

    .captcha {
        width: 100%;
        overflow-x: auto;
    }


    /* ======================================================================
       56. NOTIFICATION BADGES
       ========================================================================== */

    .notification-badge,
    .account-nav-badge {
        min-width: 18px;
        min-height: 18px;
        padding-inline: 4px;
        font-size: 0.68rem;
    }


    /* ======================================================================
       57. STICKY ACTIONS
       ========================================================================== */

    .sticky-actions,
    .account-sticky-actions {
        position: sticky;
        bottom: 68px;
        z-index: 900;
        width: 100%;
        padding: 10px;
        background: var(--surface-color, #fff);
        border-top: 1px solid var(--border-color, #e5e7eb);
    }


    /* ======================================================================
       58. TABLES
       ========================================================================== */

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 640px;
    }


    /* ======================================================================
       59. TEXT / TYPOGRAPHY
       ========================================================================== */

    .display-1,
    .display-2,
    .display-3 {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.45rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    h4 {
        font-size: 1.05rem;
    }

    p {
        line-height: 1.6;
    }


    /* ======================================================================
       60. RTL
       ========================================================================== */

    [dir="rtl"] .header-actions {
        margin-inline-start: 0;
        margin-inline-end: auto;
    }

    [dir="rtl"] .account-profile-header {
        direction: rtl;
    }

    [dir="rtl"] .search-input {
        padding-inline: 44px 44px;
    }


    /* ======================================================================
       61. SAFE AREA
       ========================================================================== */

    .mobile-navigation,
    .sticky-actions {
        padding-bottom: max(
            6px,
            env(safe-area-inset-bottom)
        );
    }


    /* ======================================================================
       62. ACCESSIBILITY
       ========================================================================== */

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

    .visually-hidden-mobile {
        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;
    }


    /* ======================================================================
       63. 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;
        }
    }


    /* ======================================================================
       64. DARK MODE COMPATIBILITY
       ========================================================================== */

    [data-theme="dark"] .mobile-navigation,
    [data-theme="dark"] .sticky-actions {
        background: var(--surface-color, #111827);
        border-color: var(--border-color, #374151);
    }


    /* ======================================================================
       65. FORCED COLORS
       ========================================================================== */

    @media (forced-colors: active) {

        .mobile-navigation,
        .sticky-actions,
        .card,
        .business-card,
        .vendor-card,
        .service-card,
        .product-card {
            border: 1px solid CanvasText;
        }

        .btn,
        button,
        a {
            forced-color-adjust: auto;
        }
    }
}


/* ==========================================================================
   66. VERY SMALL DEVICES
   ========================================================================== */

@media (max-width: 374px) {

    .container,
    .account-container,
    .page-container,
    .search-container {
        padding-inline: 12px;
    }

    .header-inner,
    .site-header-inner {
        padding-inline: 8px;
    }

    .header-logo,
    .site-logo {
        max-width: 125px;
    }

    .hero {
        padding-block: 24px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .section {
        padding-block: 26px;
    }

    .card-body {
        padding: 12px;
    }

    .mobile-navigation-link {
        font-size: 0.62rem;
    }

    .mobile-navigation-icon {
        width: 20px;
        height: 20px;
    }

    .account-profile-header {
        align-items: flex-start;
    }

    .account-avatar,
    .account-avatar-image,
    .account-avatar-fallback {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }
}


/* ==========================================================================
   67. LANDSCAPE MOBILE
   ========================================================================== */

@media (max-width: 767px) and (orientation: landscape) {

    .hero {
        padding-block: 24px;
    }

    .location-selector-panel,
    .modal-dialog {
        max-height: 96dvh;
    }

    .map-container,
    .search-map {
        height: 70vh;
    }

    .chat-window {
        max-height: 78vh;
    }
}


/* ==========================================================================
   68. PRINT SAFETY
   ========================================================================== */

@media print {

    .mobile-navigation,
    .sticky-actions,
    .chat-widget,
    .notification-panel,
    .cookie-banner,
    .consent-banner {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }
}