/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE
   TABLET RESPONSIVE CSS
   --------------------------------------------------------------------------
   Breakpoint:
   768px - 1023px

   Data policy:
   This file contains presentation/layout only.
   No fake/demo/sample marketplace data is generated here.
   All Business/Vendor/Service/Product/Lead/Enquiry data must come
   from the application's live API/database layer.
   ========================================================================== */


/* ==========================================================================
   1. TABLET BASE
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

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

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

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

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


    /* ======================================================================
       2. CONTAINERS
       ====================================================================== */

    .container,
    .page-container,
    .search-container,
    .account-container {
        width: min(100% - 40px, 960px);
        max-width: 960px;
        margin-inline: auto;
    }

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


    /* ======================================================================
       3. GLOBAL SECTIONS
       ====================================================================== */

    .section {
        padding-block: 42px;
    }

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

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

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

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


    /* ======================================================================
       4. TOPBAR
       ====================================================================== */

    .topbar-inner {
        min-height: 40px;
        padding-inline: 20px;
        gap: 14px;
    }

    .topbar-left,
    .topbar-right {
        gap: 12px;
    }

    .topbar-item {
        font-size: 0.82rem;
    }


    /* ======================================================================
       5. HEADER
       ====================================================================== */

    .header-inner,
    .site-header-inner {
        min-height: 68px;
        padding-inline: 20px;
        gap: 16px;
    }

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

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

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

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

    .header-navigation {
        display: none;
    }


    /* ======================================================================
       6. TABLET MOBILE NAVIGATION
       ====================================================================== */

    .mobile-navigation {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1100;
        min-height: 64px;
        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(5, minmax(0, 1fr));
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-navigation-link {
        min-height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 5px 8px;
        text-decoration: none;
    }

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

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

    body {
        padding-bottom: 70px;
    }


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

    .search-box {
        width: 100%;
    }

    .search-box-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 220px auto;
        align-items: stretch;
        gap: 8px;
    }

    .search-box-main {
        min-width: 0;
    }

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

    .search-location {
        min-width: 0;
    }

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

    .search-button,
    .search-submit {
        min-height: 48px;
    }

    .search-button {
        min-width: 110px;
    }


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

    .search-autocomplete,
    .autocomplete-panel {
        max-height: 55vh;
        overflow-y: auto;
    }

    .search-autocomplete-item {
        min-height: 50px;
        padding: 10px 14px;
    }


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

    .location-selector-panel {
        width: min(92vw, 620px);
        max-height: 80vh;
        overflow-y: auto;
    }

    .location-selector-list {
        max-height: 55vh;
        overflow-y: auto;
    }

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


    /* ======================================================================
       10. HERO
       ====================================================================== */

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

    .hero-content {
        max-width: 820px;
        margin-inline: auto;
    }

    .hero-title {
        font-size: clamp(2rem, 5vw, 3rem);
        line-height: 1.2;
    }

    .hero-subtitle {
        max-width: 720px;
        margin-inline: auto;
        font-size: 1rem;
        line-height: 1.6;
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .hero-actions .btn,
    .hero-actions button,
    .hero-actions a {
        min-width: 150px;
    }


    /* ======================================================================
       11. GRID
       ====================================================================== */

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

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

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

    .cards-grid,
    .business-grid,
    .vendor-grid,
    .service-grid,
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }


    /* ======================================================================
       12. CARDS
       ====================================================================== */

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

    .card-body {
        padding: 16px;
    }

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


    /* ======================================================================
       13. BUSINESS / VENDOR CARDS
       ====================================================================== */

    .business-card-header,
    .vendor-card-header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

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

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

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

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


    /* ======================================================================
       14. SERVICE / PRODUCT
       ====================================================================== */

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

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

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


    /* ======================================================================
       15. SEARCH RESULT LAYOUT
       ====================================================================== */

    .search-results-layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .search-sidebar {
        min-width: 0;
    }

    .search-results-main {
        min-width: 0;
    }

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


    /* ======================================================================
       16. FILTERS
       ====================================================================== */

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

    .filter-chip,
    .filter-button {
        min-height: 42px;
    }

    .filter-panel {
        width: 100%;
    }


    /* ======================================================================
       17. TOOLBAR
       ====================================================================== */

    .search-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .search-toolbar-left,
    .search-toolbar-right {
        min-width: 0;
    }


    /* ======================================================================
       18. MAP
       ====================================================================== */

    .map-container,
    .search-map,
    .location-map {
        width: 100%;
        height: 500px;
        min-height: 400px;
    }

    .map-sidebar {
        width: 280px;
    }

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


    /* ======================================================================
       19. DETAIL LAYOUT
       ====================================================================== */

    .detail-layout,
    .business-detail-layout,
    .vendor-detail-layout,
    .service-detail-layout,
    .product-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 20px;
        align-items: start;
    }

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

    .detail-sidebar {
        position: sticky;
        top: 84px;
    }

    .detail-title {
        font-size: 1.75rem;
    }

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


    /* ======================================================================
       20. PROFILE HEADER
       ====================================================================== */

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

    .business-profile-logo,
    .vendor-profile-logo {
        width: 96px;
        height: 96px;
        flex: 0 0 96px;
    }

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

    .business-profile-actions,
    .vendor-profile-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }


    /* ======================================================================
       21. TABS
       ====================================================================== */

    .tabs,
    .detail-tabs,
    .profile-tabs {
        display: flex;
        overflow-x: auto;
        gap: 4px;
        scrollbar-width: none;
    }

    .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;
        white-space: nowrap;
    }


    /* ======================================================================
       22. ENQUIRY
       ====================================================================== */

    .enquiry-form-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .enquiry-form-group {
        min-width: 0;
    }

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

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

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

    .enquiry-modal .modal-dialog {
        width: min(92vw, 680px);
        max-height: 90vh;
    }


    /* ======================================================================
       23. QUOTE
       ====================================================================== */

    .quote-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 20px;
    }

    .quote-form,
    .quote-results {
        min-width: 0;
    }

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

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


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

    .cart-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 20px;
        align-items: start;
    }

    .cart-items,
    .cart-summary {
        min-width: 0;
    }

    .cart-summary {
        position: sticky;
        top: 84px;
    }

    .cart-item {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
    }

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

    .cart-item-actions {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }


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

    .checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 20px;
        align-items: start;
    }

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

    .checkout-sidebar {
        position: sticky;
        top: 84px;
    }

    .checkout-actions {
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }


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

    .order-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }

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

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


    /* ======================================================================
       27. PAYMENTS
       ====================================================================== */

    .payment-methods {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .payment-method {
        min-height: 54px;
    }

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

    .payment-status-card {
        max-width: 620px;
        margin-inline: auto;
    }


    /* ======================================================================
       28. LOCATIONS
       ====================================================================== */

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

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


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

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

    .pricing-card {
        min-width: 0;
    }

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

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

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

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


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

    .review-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .review-card {
        min-width: 0;
    }

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


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

    .messages-layout,
    .chat-layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        min-height: 600px;
    }

    .conversation-list {
        max-height: 600px;
        overflow-y: auto;
    }

    .chat-window {
        min-width: 0;
        min-height: 600px;
    }


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

    .notification-panel {
        width: min(92vw, 420px);
        max-height: 70vh;
        overflow-y: auto;
    }


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

    .account-layout {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

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

    .account-sidebar {
        position: sticky;
        top: 84px;
    }

    .account-profile {
        padding: 14px;
    }

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

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

    .account-nav-list {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .account-nav-link {
        min-height: 44px;
    }

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

    .account-field-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .account-field {
        min-width: 0;
    }

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

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

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


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

    .account-security-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .account-session,
    .account-device {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .account-session-actions,
    .account-device-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }


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

    .account-location-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }


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

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

    .account-enquiry-actions,
    .account-lead-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }


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

    .account-order-header,
    .account-quote-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }


    /* ======================================================================
       38. ACCOUNT BUSINESSES
       ====================================================================== */

    .account-businesses {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }


    /* ======================================================================
       39. ONBOARDING
       ====================================================================== */

    .onboarding-layout {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .onboarding-sidebar {
        min-width: 0;
    }

    .onboarding-main {
        min-width: 0;
    }

    .onboarding-progress-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .onboarding-actions {
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }


    /* ======================================================================
       40. FORMS
       ====================================================================== */

    .form-row,
    .form-two-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .form-three-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .form-group {
        min-width: 0;
    }

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

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

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


    /* ======================================================================
       41. BUTTONS
       ====================================================================== */

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

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


    /* ======================================================================
       42. MODAL
       ====================================================================== */

    .modal {
        padding: 20px;
    }

    .modal-dialog {
        width: min(92vw, 680px);
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-footer {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }


    /* ======================================================================
       43. DRAWER
       ====================================================================== */

    .drawer {
        width: min(85vw, 420px);
        max-width: 420px;
    }


    /* ======================================================================
       44. PAGINATION
       ====================================================================== */

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

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


    /* ======================================================================
       45. BREADCRUMB
       ====================================================================== */

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

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


    /* ======================================================================
       46. MEDIA GALLERY
       ====================================================================== */

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

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


    /* ======================================================================
       47. FOOTER
       ====================================================================== */

    .footer {
        padding-bottom: 82px;
    }

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

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }


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

    .cookie-banner,
    .consent-banner {
        inset-inline: 16px;
        bottom: 76px;
        width: auto;
    }

    .cookie-actions,
    .consent-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }


    /* ======================================================================
       49. CHAT WIDGET
       ====================================================================== */

    .chat-widget {
        inset-inline-end: 16px;
        bottom: 78px;
        width: min(390px, calc(100vw - 32px));
    }

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


    /* ======================================================================
       50. SHARE / REPORT
       ====================================================================== */

    .share-panel,
    .report-panel {
        width: min(100%, 520px);
    }

    .share-options,
    .report-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }


    /* ======================================================================
       51. TABLES
       ====================================================================== */

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

    table {
        min-width: 680px;
    }


    /* ======================================================================
       52. EMPTY / ERROR / LOADING
       ====================================================================== */

    .empty-state,
    .error-state,
    .loading-state {
        padding: 40px 24px;
        text-align: center;
    }

    .empty-state-actions,
    .error-state-actions {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 18px;
    }


    /* ======================================================================
       53. STATUS
       ====================================================================== */

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


    /* ======================================================================
       54. STICKY ACTIONS
       ====================================================================== */

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


    /* ======================================================================
       55. RTL
       ====================================================================== */

    [dir="rtl"] .account-layout,
    [dir="rtl"] .detail-layout,
    [dir="rtl"] .checkout-layout,
    [dir="rtl"] .cart-layout {
        direction: rtl;
    }


    /* ======================================================================
       56. ACCESSIBILITY
       ====================================================================== */

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


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


    /* ======================================================================
       58. FORCED COLORS
       ====================================================================== */

    @media (forced-colors: active) {

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


/* ==========================================================================
   59. TABLET LANDSCAPE
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px)
       and (orientation: landscape) {

    .container,
    .page-container,
    .search-container,
    .account-container {
        width: min(100% - 48px, 1000px);
    }

    .search-results-layout {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .detail-layout,
    .business-detail-layout,
    .vendor-detail-layout,
    .service-detail-layout,
    .product-detail-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

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

    .map-container,
    .search-map,
    .location-map {
        height: 540px;
    }
}


/* ==========================================================================
   60. TABLET PORTRAIT
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px)
       and (orientation: portrait) {

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

    .search-results-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 16px;
    }

    .detail-layout,
    .business-detail-layout,
    .vendor-detail-layout,
    .service-detail-layout,
    .product-detail-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 16px;
    }

    .account-layout {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 16px;
    }
}


/* ==========================================================================
   61. TABLET DARK THEME COMPATIBILITY
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

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


/* ==========================================================================
   62. TABLET PRINT
   ========================================================================== */

@media print {

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

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