/* Global responsive overrides for tablet/mobile.
   Loaded after page styles to override fixed desktop layout. */

:root {
    --container-max: 1440px;
    --header-height: 70px;
}

/* Media elements should never overflow viewport */
img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal scroll on all pages */
html {
    overflow-x: hidden;
    max-width: 100%;
}

/* Better sizing for long words/urls */
body {
    overflow-wrap: anywhere;
    word-break: normal;
    overflow-x: hidden;
    max-width: 100%;
}

/* Common container padding (many pages redefine .container) */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

/* --- Breakpoints --- */

/* <= 1400px: hide city text, keep icon */
@media (max-width: 1400px) {
    .city-selector span {
        display: none !important;
    }
}

/* <= 1199px: reduce huge desktop paddings */
@media (max-width: 1199px) {
    .container {
        padding-left: 64px !important;
        padding-right: 64px !important;
    }

    .menu-content {
        padding-left: 64px !important;
        padding-right: 64px !important;
    }

    /* Steps: disable desktop flex-basis on tablet/mobile ranges */
    .step-1,
    .step-2,
    .step-3 {
        flex: 0 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Tablet menu: switch to hamburger earlier (<=1199) */
    .hamburger-menu {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 101;
        flex-shrink: 0;
        margin-left: 12px;
    }

    .hamburger-menu span {
        display: block;
        width: 100%;
        height: 2px;
        background: #000;
        transition: 0.3s;
    }

    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .navigation {
        display: none !important;
        position: fixed !important;
        top: var(--header-height);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-height));
        overflow: auto;
        background: linear-gradient(
            90deg,
            rgba(196, 196, 201, 0.98) 0%,
            rgba(198, 198, 204, 0.98) 12.1%,
            rgba(202, 202, 207, 0.98) 25.42%,
            rgba(200, 201, 207, 0.98) 38.15%,
            rgba(198, 198, 203, 0.98) 49.57%,
            rgba(195, 195, 199, 0.98) 61.29%,
            rgba(189, 190, 194, 0.98) 70.61%,
            rgba(174, 174, 180, 0.98) 83.73%,
            rgba(141, 142, 147, 0.98) 97.96%
        );
        backdrop-filter: blur(10px);
        z-index: 1000;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 18px 20px !important;
        margin: 0 !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .navigation.active {
        display: flex !important;
    }

    .navigation .nav-item {
        font-size: 16px !important;
    }

    /* In mobile burger menu show city name back */
    .navigation .city-selector span {
        display: inline !important;
    }

    .phone-number {
        display: none !important;
    }

    /* Some pages (where) hard-lock min width — allow narrow viewport */
    body {
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    /* Where page: fixed header + content like other pages, no horizontal scroll */
    .menu-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 1500 !important;
        box-sizing: border-box !important;
    }

    .menu-content {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Where-only: content wrapper = one column, fits viewport */
    .content-wrapper {
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: calc(var(--header-height) + 18px) 20px 24px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .background-container {
        position: fixed !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw !important;
        z-index: 0 !important;
        overflow: hidden !important;
    }
    .background-container .background-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
    }

    .main-block,
    .map-container,
    .block-why,
    .block-licensed,
    .block-solution,
    .block-where,
    .block-benefits {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 18px !important;
        box-sizing: border-box !important;
    }

    .main-block {
        margin-top: 0 !important;
    }

    .map-container {
        height: 320px !important;
    }

    /* Where page: all text blocks must not overflow */
    .content-wrapper .main-title,
    .content-wrapper .main-description,
    .content-wrapper .block-why h2,
    .content-wrapper .block-why h3,
    .content-wrapper .block-why-text,
    .content-wrapper .why-feature-item span,
    .content-wrapper .block-why-additional,
    .content-wrapper .block-licensed h3,
    .content-wrapper .block-licensed-text,
    .content-wrapper .block-licensed-warning,
    .content-wrapper .block-solution h2,
    .content-wrapper .block-solution h3,
    .content-wrapper .block-solution-text,
    .content-wrapper .solution-feature-item span,
    .content-wrapper .block-where h3,
    .content-wrapper .block-where-text,
    .content-wrapper .where-feature-item span,
    .content-wrapper .block-benefits h3,
    .content-wrapper .block-benefits-text,
    .content-wrapper .benefits-feature-item span {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Where footer: full width bar, content padded like other pages */
    .footer {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 0 !important;
        box-sizing: border-box !important;
    }
    .footer-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
        position: relative !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }
    .footer-contacts {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    .contact-item {
        position: static !important;
        left: auto !important;
    }

    /* Headings clamp down a bit */
    .main-title,
    .prices-title,
    .work-principle-title,
    .recycling-title,
    .about-title,
    .what-title,
    .articles-main-title,
    .article-title-main,
    .prices-main-title,
    .batteries-main-title,
    .wholesale-main-title,
    .block-why h2,
    .block-solution h2 {
        font-size: 34px !important;
        line-height: 1.15 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* <= 1023px: tablet + mobile menu, wrap layouts */
@media (max-width: 1023px) {
    .container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .menu-content {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    /* Hamburger menu (all pages have markup, desktop CSS often hides it) */
    .hamburger-menu {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 101;
        flex-shrink: 0;
        margin-left: 12px;
    }

    .hamburger-menu span {
        display: block;
        width: 100%;
        height: 2px;
        background: #000;
        transition: 0.3s;
    }

    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .navigation {
        display: none !important;
        position: fixed !important;
        top: var(--header-height);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-height));
        overflow: auto;
        background: linear-gradient(
            90deg,
            rgba(196, 196, 201, 0.98) 0%,
            rgba(198, 198, 204, 0.98) 12.1%,
            rgba(202, 202, 207, 0.98) 25.42%,
            rgba(200, 201, 207, 0.98) 38.15%,
            rgba(198, 198, 203, 0.98) 49.57%,
            rgba(195, 195, 199, 0.98) 61.29%,
            rgba(189, 190, 194, 0.98) 70.61%,
            rgba(174, 174, 180, 0.98) 83.73%,
            rgba(141, 142, 147, 0.98) 97.96%
        );
        backdrop-filter: blur(10px);
        z-index: 1000;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 18px 20px !important;
        margin: 0 !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .navigation.active {
        display: flex !important;
    }

    .navigation .nav-item {
        font-size: 16px !important;
    }

    .phone-number {
        display: none !important;
    }

    .logo-text {
        width: auto !important;
        max-width: 240px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    /* Common “fixed width” text blocks */
    .paragraph,
    .second-left,
    .second-title,
    .second-description,
    .recycling-text,
    .prices-subtitle,
    .batteries-description,
    .batteries-service-text,
    .batteries-replacement-text,
    .wholesale-special-offer,
    .wholesale-subtitle,
    .after-divider-text,
    .about-text,
    .license-info,
    .what-text,
    .section-text {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Cards and grids should wrap */
    .price-cards {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    .price-card {
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .advantages {
        flex-wrap: wrap !important;
        gap: 24px !important;
        height: auto !important;
        padding-bottom: 24px !important;
    }

    .advantage-item {
        width: calc(50% - 12px) !important;
        min-width: 240px;
    }

    /* Steps (home page) */
    .work-step-row {
        flex-direction: column !important;
        gap: 24px !important;
        margin-bottom: 24px !important;
    }

    .step-1,
    .step-2,
    .step-3 {
        width: 100% !important;
        height: auto !important;
        min-height: 220px;
        margin: 0 !important;
    }

    .work-step .step-number {
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }

    .work-step .step-content {
        top: auto !important;
        padding: 0 !important;
    }

    .work-step .step-title,
    .work-step .step-description {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        text-align: left !important;
    }

    /* Footers: switch to column layout */
    .footer {
        height: auto !important;
        padding: 16px 0 !important;
    }

    .footer-content {
        height: auto !important;
        gap: 12px;
    }

    .copyright {
        margin: 0 !important;
    }

    .footer-contacts {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .contact-text {
        white-space: normal !important;
        width: auto !important;
        line-height: 1.35 !important;
    }

    /* City dropdowns should fit small screens */
    .city-dropdown {
        width: auto !important;
        height: auto !important;
    }
    .cities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 18px !important;
    }

    /* Prices page controls */
    .weight-selection,
    .city-selection,
    .price-table,
    .delivery-tabs,
    .weight-tabs {
        width: 100% !important;
        max-width: 100% !important;
    }

    .prices-city-dropdown {
        width: 100% !important;
        max-width: 420px;
    }

    .weight-tabs,
    .delivery-tabs {
        height: auto !important;
        flex-wrap: wrap !important;
        border-radius: 24px !important;
        overflow: hidden;
    }

    .weight-tab,
    .delivery-tab {
        flex: 1 1 50% !important;
        min-width: 140px;
        height: 40px;
    }

    .weight-tab span,
    .delivery-tab span {
        font-size: 16px !important;
    }

    .calculation-form {
        padding: 0 !important;
    }

    .form-fields {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
    }

    .form-group,
    .form-button-container {
        width: 100% !important;
        max-width: 420px;
        margin: 0 auto;
        z-index: 2;
        align-items: stretch !important; 
    }
    span.wpcf7-form-control-wrap {
        z-index: 2;
    }
    .checkbox-label {
        width: auto !important;
    }

    /* About page: make top content flow (it is absolutely positioned on desktop) */
    .about-content,
    .what-content {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 32px;
    }

    .top-section {
        height: auto !important;
        min-height: 420px;
    }

    .top-section .container {
        position: relative;
        padding-top: 96px !important;
        padding-bottom: 28px !important;
    }

    .main-content {
        position: relative !important;
        padding-top: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .text-content {
        gap: 16px !important;
    }

    .fifth-section,
    .sixth-section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
        height: auto !important;
    }

    /* Services grid: 2 columns on tablet */
    .services-section {
        height: auto !important;
        padding: 56px 0 !important;
    }
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .service-card {
        width: 100% !important;
        height: auto !important;
        min-height: 120px;
    }

    /* Articles grid */
    .articles-header {
        width: 100% !important;
        top: 110px !important;
    }
    .articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
    .article-card {
        width: 100% !important;
        height: auto !important;
    }
    .article-image {
        width: auto !important;
        height: auto !important;
        aspect-ratio: 204 / 141;
        margin: 16px 16px 12px !important;
    }
    .first-row {
        margin-top: 140px !important;
    }

    /* Article page: large image & grids */
    .article-image-large {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1016 / 369;
    }
    .article-navigation {
        max-width: 100% !important;
    }
    .emergency-methods {
        grid-template-columns: 1fr !important;
    }

    /* New batteries: partner logos wrap */
    .partners-section {
        flex-wrap: wrap !important;
        gap: 28px !important;
    }
    .logo-row {
        gap: 20px !important;
        flex-wrap: wrap !important;
    }

    /* Wholesale: stack sections */
    .benefits-grid {
        width: 100% !important;
    }
    .benefit-item {
        width: calc(50% - 11px) !important;
        height: auto !important;
    }
    .benefit-card {
        height: 128px;
    }
    .company-info-block {
        height: auto !important;
        padding: 24px 0;
    }
    .company-info-content {
        flex-direction: column !important;
        gap: 18px;
    }
    .company-photo {
        margin-left: 0 !important;
    }
    .company-text-wrapper {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 620px;
    }
    .cities-and-map {
        flex-direction: column !important;
        gap: 28px;
        padding: 48px 0 56px !important;
        max-width: 100% !important;
    }
    .cities-block,
    .documents-list,
    .map-block {
        width: 100% !important;
        max-width: 640px;
        margin: 0 auto !important;
    }
    .map-block {
        height: 280px !important;
        margin-top: 0 !important;
    }

    /* Background blocks with fixed desktop heights should stretch with content */
    .prices-background,
    .batteries-background,
    .wholesale-background {
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
    }

    .articles-page .background-image {
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
    }

    /* Where page: remove min-width desktop lock and absolute positioning */
    body {
        min-width: 0 !important;
    }

    /* Where page: handled at <=1199px (kept here empty intentionally) */
}

/* <= 767px: phone portrait-ish */
@media (max-width: 767px) {
    /* Mobile: all key blocks grow strictly by content */
    .top-section,
    .second-section,
    .third-section,
    .fourth-section,
    .fifth-section,
    .sixth-section,
    .footer,
    .second-content,
    .advantages,
    .work-steps,
    .work-step-row,
    .work-step,
    .price-cards,
    .price-card,
    .advantage-item,
    .recycling-content {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .menu-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .content-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .footer > .footer-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .logo-text {
        max-width: 200px !important;
    }

    .main-title,
    .prices-title,
    .work-principle-title,
    .recycling-title,
    .about-title,
    .what-title,
    .articles-main-title,
    .article-title-main,
    .prices-main-title,
    .batteries-main-title,
    .wholesale-main-title,
    .block-why h2,
    .block-solution h2 {
        font-size: 28px !important;
    }

    .second-content {
        flex-direction: column !important;
        height: auto !important;
        padding: 24px 0 !important;
        gap: 18px !important;
        align-items: stretch !important;
    }

    .top-section {
        min-height: 0 !important;
    }

    .top-section .container {
        padding-top: 92px !important;
        padding-bottom: 24px !important;
    }

    .main-title {
        line-height: 1.2 !important;
    }

    .paragraph,
    .paragraph:last-child {
        width: 100% !important;
    }

    .second-section,
    .fourth-section,
    .sixth-section {
        height: auto !important;
    }

    .second-title {
        margin-bottom: 14px !important;
    }

    .second-notice {
        width: 100% !important;
        text-align: left !important;
    }

    .second-right {
        width: 100% !important;
        align-items: flex-start !important;
    }

    .request-button,
    .show-prices-button {
        width: 100% !important;
        max-width: 360px;
    }

    .advantage-item {
        width: 100% !important;
        min-width: 0;
    }

    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .articles-grid {
        grid-template-columns: 1fr !important;
    }

    .first-row {
        margin-top: 120px !important;
    }

    .city-dropdown {
        width: min(92vw, 420px) !important;
    }

    .cities-grid {
        grid-template-columns: 1fr !important;
    }

    .map-container {
        height: 280px !important;
    }

    .benefit-item {
        width: 100% !important;
    }
}

/* <= 480px: compact phones */
@media (max-width: 480px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .menu-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .content-wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .footer > .footer-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .logo-text {
        display: none !important;
    }

    .prices-content,
    .batteries-content,
    .wholesale-content {
        padding-top: 48px !important;
    }

    .table-row {
        flex-direction: row;
        gap: 8px !important;
    }
    .price {
        width: auto !important;
        text-align: left !important;
    }

    .modal-container {
        width: min(92vw, 500px) !important;
        height: auto !important;
    }
    .request-form {
        padding: 0 24px !important;
    }

    .step-title {
        font-size: 20px !important;
    }
}