/* ============================================
   RESPONSIVE DESIGN STYLES
   Clean mobile implementation
   ============================================ */

/* ========== PREVENT HORIZONTAL SCROLL ========== */

html {
    overflow-x: hidden;
}

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

/* ========== DESKTOP - ENSURE MENU VISIBLE ========== */

@media (min-width: 769px) {
    /* Ensure desktop menu is always visible */
    .section-header__main-menu {
        display: block !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        right: auto !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
    }

    /* Hide mobile menu elements on desktop */
    .mobile-menu-toggle,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ========== MOBILE DEVICES (≤768px) ========== */

@media (max-width: 768px) {

    /* === PREVENT HORIZONTAL OVERFLOW === */
    * {
        max-width: 100%;
    }

    html,
    body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* === CONTAINERS - ALL SAME WIDTH === */
    .container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        overflow-x: hidden !important;
        max-width: calc(100% - 30px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .row > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* All main content blocks */
    .content-section,
    .info-section,
    article,
    main,
    #content,
    .main-content {
        max-width: 100%;
    }

    /* === TYPOGRAPHY === */
    body {
        font-size: 14px;
        line-height: 1.6;
    }

    h1 {
        font-size: 1.75rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 0.875rem;
    }

    h3 {
        font-size: 1.25rem;
        line-height: 1.3;
        margin-bottom: 0.75rem;
    }

    p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    /* === HEADER & NAVIGATION === */
    .section-header {
        padding: 0.75rem 0;
        position: relative;
    }

    .section-header__logo img {
        max-height: 40px;
    }

    .section-header__inner {
        padding-left: 15px;
        padding-right: 15px;
    }

    .section-header__row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }

    .section-header__logo {
        flex-shrink: 0;
    }

    .section-header__right {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        background: none;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        margin-left: auto;
        margin-right: 0;
        position: relative;
        z-index: 10000;
        min-width: 44px;
        min-height: 44px;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background: #2d3748;
        border-radius: 2px;
        transition: all 0.3s;
    }

    /* === NEW MOBILE MENU - SEPARATE OVERLAY === */

    /* Hide desktop menu on mobile */
    .section-header__main-menu {
        display: none;
    }

    /* Mobile menu overlay - hidden by default */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile menu container - slides from right */
    .mobile-menu-container {
        position: absolute;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 360px;
        height: 100%;
        background: #ffffff;
        box-shadow: -2px 0 20px rgba(0, 0, 0, 0.15);
        transition: right 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
    }

    .mobile-menu-overlay.active .mobile-menu-container {
        right: 0;
    }

    /* Menu header */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #e2e8f0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .mobile-menu-logo {
        height: 32px;
        width: auto;
    }

    .mobile-menu-close {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        cursor: pointer;
        transition: background 0.2s;
    }

    .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    /* Menu navigation */
    .mobile-menu-nav {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-menu-list > li {
        border-bottom: 1px solid #e2e8f0;
    }

    .mobile-menu-list > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        color: #2d3748;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s, color 0.2s;
    }

    .mobile-menu-list > li > a:hover {
        background: #f7fafc;
        color: #667eea;
    }

    /* Submenu */
    .mobile-menu-list .has-submenu > a svg {
        transition: transform 0.3s;
    }

    .mobile-menu-list .has-submenu.active > a svg {
        transform: rotate(180deg);
    }

    .mobile-submenu {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        background: #f7fafc;
        transition: max-height 0.3s ease;
    }

    .mobile-menu-list .has-submenu.active .mobile-submenu {
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide scrollbar for submenu */
    .mobile-submenu::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    .mobile-submenu {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    /* Scroll indicators for submenu */
    .mobile-submenu {
        position: relative;
    }

    .mobile-submenu::before {
        content: '';
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(to bottom, #f7fafc 0%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        display: none;
    }

    .mobile-submenu::after {
        content: '';
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(to top, #f7fafc 0%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        display: none;
    }

    .mobile-submenu.has-scroll::before,
    .mobile-submenu.has-scroll::after {
        display: block;
    }

    .mobile-submenu li {
        border-bottom: 1px solid #e2e8f0;
    }

    .mobile-submenu li:last-child {
        border-bottom: none;
    }

    .mobile-submenu a {
        display: block;
        padding: 0.875rem 1.25rem 0.875rem 2.5rem;
        color: #4a5568;
        font-size: 14px;
        text-decoration: none;
        transition: background 0.2s, color 0.2s;
    }

    .mobile-submenu a:hover {
        background: #edf2f7;
        color: #667eea;
    }

    /* Nested submenu (3rd level - Services under Categories) */
    .has-nested-submenu > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0.875rem 1.25rem 0.875rem 2.5rem !important;
    }

    .mobile-category-icon,
    .mobile-network-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-right: 0.5rem;
    }

    .mobile-category-name,
    .mobile-network-name {
        flex: 1;
    }

    /* Category and Network counters */
    .mobile-category-count,
    .mobile-network-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 20px;
        padding: 0 0.4rem;
        background: rgba(102, 126, 234, 0.15);
        color: #667eea;
        font-size: 11px;
        font-weight: 700;
        border-radius: 10px;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

    .mobile-submenu-arrow {
        margin-left: 0;
        transition: transform 0.3s;
        flex-shrink: 0;
    }

    .has-nested-submenu.active > a .mobile-submenu-arrow {
        transform: rotate(180deg);
    }

    .mobile-nested-submenu {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        background: #e2e8f0;
        transition: max-height 0.3s ease;
    }

    .has-nested-submenu.active .mobile-nested-submenu {
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide scrollbar for nested submenu */
    .mobile-nested-submenu::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    .mobile-nested-submenu {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    /* Scroll indicators for nested submenu */
    .mobile-nested-submenu {
        position: relative;
    }

    .mobile-nested-submenu::before {
        content: '';
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 15px;
        background: linear-gradient(to bottom, #e2e8f0 0%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .mobile-nested-submenu::after {
        content: '';
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        height: 15px;
        background: linear-gradient(to top, #e2e8f0 0%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
    }

    /* Show scroll indicators when scrollable */
    .has-nested-submenu.active .mobile-nested-submenu:hover::before,
    .has-nested-submenu.active .mobile-nested-submenu:hover::after {
        opacity: 1;
    }

    .mobile-nested-submenu li {
        border-bottom: 1px solid #cbd5e0;
    }

    .mobile-nested-submenu li:last-child {
        border-bottom: none;
    }

    .mobile-nested-submenu a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        color: #2d3748;
        font-size: 13px;
        text-decoration: none;
        transition: background 0.2s;
        min-height: 44px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #667eea #e2e8f0;
    }

    /* Hide horizontal scrollbar for service names */
    .mobile-nested-submenu a::-webkit-scrollbar {
        display: none;
        height: 0;
    }

    .mobile-nested-submenu a {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    .mobile-nested-submenu a:hover {
        background: #cbd5e0;
        color: #667eea;
    }

    /* Service icon */
    .mobile-service-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-right: 0.25rem;
    }

    .mobile-service-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 3px;
    }

    .mobile-service-icon i {
        font-size: 14px;
        color: #667eea;
    }

    /* Service name - full text with horizontal scroll */
    .mobile-service-name {
        flex: 1;
        min-width: 0;
        display: block;
        white-space: nowrap;
        overflow: visible;
    }

    .mobile-service-price {
        font-size: 12px;
        color: #667eea;
        font-weight: 600;
        background: rgba(102, 126, 234, 0.1);
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        flex-shrink: 0;
        white-space: nowrap;
        margin-left: auto;
    }

    .mobile-view-all {
        font-weight: 600 !important;
        color: #667eea !important;
        background: rgba(102, 126, 234, 0.05);
    }

    .mobile-view-all:hover {
        background: rgba(102, 126, 234, 0.15) !important;
    }

    .mobile-view-all .badge {
        font-size: 11px;
    }

    .section-header__main-menu .mobileMenu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        font-size: 15px;
        font-weight: 500;
        color: #2d3748;
        transition: all 0.2s;
    }

    .section-header__main-menu .mobileMenu > li > a:hover {
        background: #f7fafc;
        color: #667eea;
    }

    /* Megamenu and dropdown indicators */
    .section-header__main-menu .megamenu > a::after,
    .section-header__main-menu .dropdown-arrow > a::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 12px;
        margin-left: auto;
        transition: transform 0.3s;
    }

    .section-header__main-menu .megamenu.active > a::after,
    .section-header__main-menu .dropdown-arrow.active > a::after {
        transform: rotate(180deg);
    }

    /* Hide login/register buttons on mobile */
    .section-header__right-bg > div {
        display: none;
    }

    /* === MEGAMENU ON MOBILE === */

    /* Submenu container */
    .section-header__main-menu .megamenu > ul,
    .section-header__main-menu .dropdown-arrow > ul {
        display: none;
        position: static;
        box-shadow: none;
        padding: 0;
        background: #f7fafc;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .section-header__main-menu .megamenu.active > ul,
    .section-header__main-menu .dropdown-arrow.active > ul {
        display: block;
        max-height: 2000px;
    }

    /* Regular dropdown items */
    .section-header__main-menu .dropdown-arrow > ul > li {
        border-bottom: 1px solid #e2e8f0;
    }

    .section-header__main-menu .dropdown-arrow > ul > li:last-child {
        border-bottom: none;
    }

    .section-header__main-menu .dropdown-arrow > ul > li > a {
        display: block;
        padding: 0.875rem 1.5rem 0.875rem 2.5rem;
        color: #4a5568;
        font-size: 14px;
        transition: all 0.2s;
    }

    .section-header__main-menu .dropdown-arrow > ul > li > a:hover {
        background: #edf2f7;
        color: #667eea;
    }

    /* Megamenu dropdowns - Categories and Social Networks */
    .categories-mega-dropdown,
    .social-networks-mega-dropdown {
        box-shadow: none;
        border-radius: 0;
        padding: 1rem;
        background: #f7fafc;
    }

    /* Mobile megamenu layout */
    .categories-tabs-wrapper,
    .social-networks-tabs-wrapper {
        display: block;
        grid-template-columns: 1fr;
    }

    /* Hide tabs navigation on mobile - show all items */
    .categories-tabs-nav,
    .social-networks-tabs-nav {
        display: none;
    }

    /* Show all tab content on mobile */
    .categories-tab-content,
    .social-networks-tab-content {
        display: block !important;
        padding: 0;
    }

    .category-tab-pane,
    .social-network-tab-pane {
        display: block !important;
        opacity: 1 !important;
    }

    /* Mobile category/network header */
    .category-tab-header,
    .social-network-tab-header {
        background: #ffffff;
        padding: 1rem;
        margin-bottom: 0.75rem;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    .category-tab-header h4,
    .social-network-tab-header h4 {
        font-size: 16px;
        font-weight: 600;
        color: #2d3748;
        margin: 0 0 0.5rem 0;
    }

    .category-tab-desc,
    .network-tab-desc {
        font-size: 13px;
        color: #718096;
        line-height: 1.5;
        margin: 0;
    }

    /* Services list in mobile menu */
    .category-services-list,
    .network-services-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .category-services-list li,
    .network-services-list li {
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        transition: all 0.2s;
    }

    .category-services-list li:hover,
    .network-services-list li:hover {
        border-color: #667eea;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
    }

    .category-services-list li a,
    .network-services-list li a {
        display: block;
        padding: 0.75rem;
        color: #2d3748;
        font-size: 13px;
        font-weight: 500;
    }

    .service-price {
        display: block;
        margin-top: 0.25rem;
        font-size: 11px;
    }

    .service-price .price-value {
        color: #667eea;
        font-weight: 600;
    }

    /* === BREADCRUMBS === */
    .breadcrumb {
        font-size: 12px;
        padding: 0.75rem 15px;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }

    /* === PAGE SECTIONS === */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-section,
    .page-hero {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-height: auto;
    }

    /* Content sections */
    .description-section,
    .pb-40,
    .pb-60 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* === CARDS === */
    .card {
        border-radius: 12px;
        margin-bottom: 1rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .card-body {
        padding: 1rem;
    }

    .card-modern {
        margin-bottom: 1rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .card-header-custom {
        padding: 1rem 1.25rem;
    }

    /* Text containers with reduced padding */
    .card-body-custom p,
    .content-section,
    .info-section p {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Specific text blocks */
    .card-modern .card-body-custom {
        padding: 1rem 1.25rem !important;
    }

    .card-modern:not(:has(.info-item)) .card-body-custom {
        padding: 1.25rem !important;
    }

    /* === RELATED CATEGORIES & POPULAR SERVICES === */

    /* Horizontal scroll for services/categories lists */
    .card-body-custom {
        padding: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .card-body-custom .info-item {
        display: flex;
        align-items: center;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f0f0f0;
        min-width: max-content;
        white-space: nowrap;
        gap: 1rem;
    }

    .card-body-custom .info-item:last-child {
        border-bottom: none;
    }

    .card-body-custom .info-value {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
    }

    .card-body-custom .info-value a {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        font-size: 14px;
    }

    .card-body-custom .badge-custom {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        font-size: 13px;
    }

    .card-body-custom .d-flex.gap-2 {
        gap: 0.75rem;
    }

    /* === SERVICES TABLE PAGE === */

    /* Page header */
    .page-title-section,
    .services-header {
        padding: 1.5rem 15px;
        margin-bottom: 1rem;
    }

    /* Filters - with proper spacing */
    .filter-sorting {
        margin: 0 15px 1rem;
        border-radius: 12px;
        width: calc(100% - 30px);
    }

    .filter-sorting .card-body {
        padding: 1rem;
    }

    .filter-sorting .row {
        row-gap: 0.75rem;
        margin-left: -8px;
        margin-right: -8px;
    }

    .filter-sorting .row > * {
        padding-left: 8px;
        padding-right: 8px;
    }

    .filter-sorting .col-md-3,
    .filter-sorting .col-md-2,
    .filter-sorting .col-md-1 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
    }

    .filter-sorting .form-label {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .filter-sorting .form-control,
    .filter-sorting .form-select {
        font-size: 13px;
        padding: 0.5rem 0.75rem;
        height: 38px;
        border-radius: 8px;
        width: 100%;
    }

    .filter-sorting .btn {
        font-size: 13px;
        padding: 0.5rem 1rem;
        width: 100%;
    }

    /* Services info */
    #servicesInfo {
        font-size: 12px;
    }

    /* Table container - NATIVE HORIZONTAL SCROLL */
    .service-table {
        margin: 0 0 1rem 0;
        border-radius: 12px;
        width: 100%;
        overflow: hidden;
    }

    .service-table .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Native smooth scrolling */
        scroll-behavior: smooth;
        width: 100%;
    }

    /* Remove scroll hint that was causing lag */
    .table-responsive::after {
        display: none;
    }

    /* Table styling */
    #servicesTable {
        font-size: 12px;
        min-width: 700px;
        margin-bottom: 0;
    }

    #servicesTable thead th {
        font-size: 11px;
        font-weight: 600;
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
        background-color: #f8fafc;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    #servicesTable tbody td {
        font-size: 12px;
        padding: 0.75rem 0.5rem;
        vertical-align: middle;
    }

    #servicesTable .btn {
        font-size: 11px;
        padding: 0.4rem 0.75rem;
        white-space: nowrap;
    }

    /* Pagination */
    .pagination-custom {
        justify-content: center;
        gap: 4px;
        flex-wrap: wrap;
        padding: 0 15px;
    }

    .pagination-custom .page-link {
        font-size: 12px;
        padding: 0.4rem 0.75rem;
        min-width: 36px;
    }

    #paginationControlsTop,
    #paginationControlsBottom {
        padding: 0.75rem 0;
        margin: 0 15px;
    }

    /* Show more button */
    #showMoreContainer {
        padding: 0 15px;
    }

    #showMoreBtn {
        font-size: 13px;
        padding: 0.75rem 1.5rem;
    }

    /* === CATEGORY PAGES === */
    .category-header,
    .page-header {
        padding: 1.5rem 15px;
        margin-bottom: 1.5rem;
    }

    .category-card,
    .service-card,
    .network-card {
        margin-bottom: 1rem;
        border-radius: 12px;
    }

    /* === BUTTONS === */
    .btn {
        font-size: 14px;
        padding: 0.75rem 1.25rem;
        border-radius: 8px;
    }

    .btn-lg {
        font-size: 15px;
        padding: 0.875rem 1.5rem;
    }

    .btn-sm {
        font-size: 12px;
        padding: 0.5rem 1rem;
    }

    /* === MODALS === */
    .service-modal-overlay {
        padding: 0.5rem;
    }

    .service-modal-container {
        max-width: calc(100% - 1rem);
        margin: 0.5rem;
        border-radius: 12px;
        width: calc(100% - 1rem);
    }

    .service-modal-content {
        padding: 1.25rem;
    }

    .modal-title {
        font-size: 18px;
    }

    .service-info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .pricing-tiers {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .modal-footer-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-btn {
        width: 100%;
        font-size: 14px;
        padding: 0.75rem 1rem;
    }

    /* === FOOTER === */
    footer {
        padding: 2rem 15px;
        font-size: 14px;
    }

    footer .row {
        margin-left: -15px;
        margin-right: -15px;
    }

    footer .row > div {
        margin-bottom: 2rem;
        padding-left: 15px;
        padding-right: 15px;
    }

    footer h3,
    footer h4,
    footer h5 {
        font-size: 16px;
        margin-bottom: 1rem;
    }

    footer a {
        font-size: 14px;
        padding: 0.25rem 0;
    }

    footer p {
        font-size: 13px;
    }

    footer .logo img {
        max-width: 140px;
    }

    /* === SPACING === */
    .mb-4 {
        margin-bottom: 1rem;
    }

    .mb-5 {
        margin-bottom: 1.5rem;
    }

    .mt-4 {
        margin-top: 1rem;
    }

    .mt-5 {
        margin-top: 1.5rem;
    }

    /* === GRID === */
    .row.g-3,
    .row.g-4 {
        margin-left: -8px;
        margin-right: -8px;
    }

    .row.g-3 > *,
    .row.g-4 > * {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Full width columns on mobile */
    .col-xl-2,
    .col-lg-3,
    .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ========== SMALL MOBILE (≤576px) ========== */

@media (max-width: 576px) {

    /* Even more compact */
    .container,
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    section {
        padding: 1.5rem 10px;
    }

    .filter-sorting {
        margin: 0 10px 1rem;
        width: calc(100% - 20px);
    }

    .service-table {
        margin: 0 0 1rem 0;
        width: 100%;
        padding: 0;
    }

    /* Table even smaller */
    #servicesTable {
        font-size: 11px;
        min-width: 650px;
    }

    #servicesTable thead th,
    #servicesTable tbody td {
        padding: 0.5rem 0.35rem;
    }

    /* Pagination - hide middle items */
    .pagination-custom .page-item:not(.active):not(:first-child):not(:last-child):not(.disabled) {
        display: none;
    }

    .pagination-custom .page-item.active,
    .pagination-custom .page-item:first-child,
    .pagination-custom .page-item:last-child {
        display: inline-block;
    }
}

/* ========== TABLET (769px - 992px) ========== */

@media (min-width: 769px) and (max-width: 992px) {

    /* Megamenu adjustments */
    .categories-tabs-wrapper,
    .social-networks-tabs-wrapper {
        grid-template-columns: 1fr;
    }

    .categories-tabs-nav,
    .social-networks-tabs-nav {
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        max-height: 200px;
    }
}

/* ========== TOUCH DEVICE OPTIMIZATIONS ========== */

@media (pointer: coarse) {

    /* Larger tap targets */
    button,
    a,
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Form inputs */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Table rows */
    .service-table tbody tr {
        cursor: pointer;
    }

    .service-table tbody tr:active {
        background-color: rgba(102, 126, 234, 0.1);
    }
}

/* ========== LANDSCAPE ORIENTATION ========== */

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

    .section-header {
        padding: 0.5rem 0;
    }

    .section-header__logo img {
        max-height: 35px;
    }

    .section-header__main-menu {
        top: 60px;
    }
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* ========== PRINT STYLES ========== */

@media print {
    .section-header,
    footer,
    .mobile-menu-toggle,
    .pagination-custom,
    #showMoreBtn,
    .filter-sorting {
        display: none;
    }

    .service-table {
        box-shadow: none;
        border: 1px solid #000;
    }
}