@import url(https://fonts.googleapis.com/css?family=Sanchez);
        *{
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(180deg, rgba(3, 116, 211, 0.9), rgba(0, 89, 171, 0.3)) no-repeat;
            background-size: cover;
            font-family: Arial, sans-serif;
        }


        .switch input {
            display: none; /* Скрывает исходный checkbox */
        }

        .input-checkbox:checked + .slider {
            background-color: #2196F3;
        }

        .input-checkbox:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }
        .promo-banner{
            display:flex;
            gap:12px;
            padding:14px 14px;
            border-radius:14px;
            border:1px solid rgba(0,0,0,.08);
            background:linear-gradient(135deg, rgba(0,123,255,.10), rgba(0,123,255,.03));
            box-shadow:0 6px 18px rgba(0,0,0,.06);
            margin: 10px 0 16px;
        }
        .promo-banner__icon{
            width:42px;height:42px;
            border-radius:12px;
            display:flex;align-items:center;justify-content:center;
            background: rgba(0,123,255,.15);
            color:#007BFF;
            flex:0 0 42px;
        }
        .promo-banner__title{
            display:flex;
            align-items:center;
            gap:10px;
            font-weight:800;
            font-size:0.95rem;
            color:#1f2a37;
            line-height:1.2;
        }
        .promo-banner__badge{
            font-size:0.72rem;
            font-weight:800;
            padding:4px 8px;
            border-radius:999px;
            background:#007BFF;
            color:#fff;
        }
        .promo-banner__desc{
            font-size:0.85rem;
            color:#4b5563;
            margin-top:2px;
        }
        .promo-banner__meta{
            margin-top:8px;
            font-size:0.85rem;
            color:#111827;
            display:flex;
            gap:8px;
            flex-wrap:wrap;
            align-items:center;
        }
        .promo-banner__dot{ opacity:.5; }



        .input-checkbox:checked ~ .custom-div .custom-label::before {
            height: 50px;
            top: calc(55% - 25px);
            left: calc(60% - 2.5px);
            background: rgba(73,168,68,1);
        }

        .input-checkbox:checked ~ .custom-div .custom-label::after {
            width: 20px;
            top: calc(95% - 25px);
            left: calc(22.5% - 2.5px);
            background: rgba(73,168,68,1);
        }

        .form-container {
            background-color: #ffffff;
            max-width: 600px;
            margin: 40px auto;
            display: block;
            padding: 30px 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #333333;
        }

        label {
            display: block;
            margin-bottom: 10px;
            color: #666666;
        }

        select {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #f2f2f2;
        }

        input:disabled {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #f2f2f2;
            color: black;
        }

        .card img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .green_bt {
            padding: 0.6em 2em;
            border-radius: 8px;
            color: #fff;
            background-color: #19d21c;
            font-size: 1.1em;
            border: 0;
            cursor: pointer;
        }

        .payment-method label {
            flex-basis: 50%;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            color: #666666;
        }

        .payment-method input[type="radio"] {
            margin-right: 10px;
        }

        .next-btn {
            margin-left: auto;
            display: flex;
            justify-content: flex-end;
            float: right;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .prev-btn {
            width: 100%;
            background-color: #ff2c2c;
            border: none;
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            display: inline-block;
            line-height: 1.5;
            vertical-align: middle;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
        }

        .prev-btn:hover {
            background-color: #8c3a43;
        }

        .next-btn-2 {
            width: 100%;
            background-color: #28a745;
            border: none;
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            display: inline-block;
            line-height: 1.5;
            vertical-align: middle;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
        }
        .next-btn-2:hover {
            background-color: #388e3c;
        }
        @media screen and (max-width: 768px) {
            .prev-btn, .next-btn-2 {
                font-size: 14px;
                padding: 8px 16px;
            }
        }

        .footer-btn {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }

        .button:hover {
            background-color: #3e8e41;
        }

        .services-container {
            display: grid;
            grid-template-columns: repeat(3, calc((100% - 40px) / 3));
            justify-content: space-between;
        }

        #payment option {
            padding: 5px;
        }

        #payment:focus + .card-fields {
            display: block;
        }

        .service-card {
            min-width: 185px;
            display: flex;
            flex-direction: column;
            margin-bottom: 1rem;
            padding: 1.5rem;
            background-color: #fff;
            box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: all 0.3s ease;
            border-radius: 8px;
            justify-content: flex-end;
        }

        .service-card:hover {
            transform: translateY(-5px);
        }


        .service-card img {
            width: 80px;
            height: 80px;
            display: block;
            margin: 0 auto;
        }
        .service-price-duration {
            font-size: 16px;
            font-weight: bold;
            color: #232323;
            margin-top: 1rem;
        }
        .step {
            display: none;
        }

        .step.active {
            display: block;
        }
        .service-quantity {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 1rem;
            gap: 10px;
        }

        .service-quantity span {
            font-weight: bold;
            font-size: 18px;
        }

        .service-quantity button {
            background-color: transparent;
            border: 2px solid #555;
            color: #555;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
            padding: 5px;
            outline: none;
            width: 40px; /* Квадратная кнопка */
            height: 40px; /* Квадратная кнопка */
        }

        .service-quantity button:hover:not(:disabled) {
            background-color: #2ecc71;
            border-color: #2ecc71;
            color: white;
        }

        .service-quantity button:disabled {
            color: #bbb;
            border-color: #bbb;
            cursor: default;
        }

        .service-card label {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            line-height: 1.5;
            font-weight: bold;
            flex: 1;
        }


        .service-card input[type="checkbox"] {
            position: absolute;
            opacity: 0;
        }

        .service-card input[type="checkbox"] + span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #ddd;
            margin: 0 auto 1rem;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .service-card input[type="checkbox"]:checked + span {
            border-color: #00c853;
            background-color: #00c853;
            color: #fff;
        }

        .service-card .service-price {
            font-size: 18px;
            font-weight: bold;
            color: #232323;
            /* margin-top: 1rem; */
        }


        .service-card.selected {
            background-color: #f5f5f5;
        }

        .service-card.selected label span {
            color: #2ecc71;
        }

        .service-card.selected input[type="checkbox"] + span {
            border-color: #2ecc71;
        }

        .step-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%; /* Ensures that the step-content does not exceed its parent's width */
            overflow: hidden; /* Hides any overflowing content */
        }
        .custom-checkbox {
            margin-top: 2rem;
            position: relative;
            padding-left: 35px;
            cursor: pointer;
            user-select: none;
            color: black;
            display: inline-block;
        }

        .custom-checkbox input[type="checkbox"] {
            display: none;
        }

        .custom-checkbox::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            border: 2px solid black;
            background-color: transparent;
        }

        .custom-checkbox input[type="checkbox"]:checked + span::before {
            content: '✔︎';
            position: absolute;
            left: 4px;
            color: #00ff04;
        }

        .custom-checkbox a {
            color: blue;
            text-decoration: underline;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
            width: 100%;
        }

        .form-group-2 {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }

        .form-group-2 label {
            margin-bottom: 5px;
        }

        .step-2-input, .step-3-input {
            padding: 10px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            font-size: 14px;
        }
        .toggle {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 24px;
            margin-left: 10px;
        }

        .toggle__input {
            display: none;
        }

        .toggle__control {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ccc;
            border-radius: 12px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .toggle__control::before {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            transition: transform 0.3s ease;
        }

        .toggle__input:checked + .toggle__control {
            background-color: #2196F3;
        }

        .toggle__input:checked + .toggle__control::before {
            transform: translateX(24px);
        }
        .form-group label {
            font-weight: bold;
            margin-bottom: 10px;
        }

        .select-wrapper {
            position: relative;
        }

        .select-wrapper select {
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #f1f1f1;
            font-size: 16px;
            width: 100%;
            margin-bottom: 10px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .select-wrapper .select-arrow {
            position: absolute;
            top: 16px;
            right: 15px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid #000;
            pointer-events: none;
        }

        .select-wrapper .price {
            position: absolute;
            top: 0;
            right: 0;
            padding: 10px;
            font-size: 14px;
            /* background-color: #a0cbfd; */
            /* color: #000; */
            color: white;
            border-radius: 0 5px 5px 0;
        }

        select:focus, input:focus {
            outline: none;
        }

        select {
            cursor: pointer;
        }

        .form-navigation {
            cursor: default;
        }

        .form-navigation ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .form-navigation li {
            margin-right: 30px;
            font-size: 20px;
            font-weight: bold;
            color: #ccc;
            position: relative;
            transition: color 0.3s ease-in-out;
        }

        .form-navigation li.active {
            color: #000;
        }

        .form-navigation li.active::before {
            content: '';
            width: 100%;
            height: 3px;
            background-color: #000;
            position: absolute;
            bottom: -10px;
            left: 0;
            transform-origin: bottom center;
            transform: scaleX(0);
            transition: transform 0.3s ease-in-out;
        }

        .form-navigation li.active ~ li::before {
            content: '';
            width: 100%;
            height: 3px;
            background-color: #ccc;
            position: absolute;
            bottom: -10px;
            left: 0;
            transform-origin: bottom center;
            transform: scaleX(0);
            transition: transform 0.3s ease-in-out;
        }

        .form-navigation li.active ~ li:hover::before {
            transform: scaleX(1);
        }

        .form-navigation li.active::after {
            content: '';
            width: 100%;
            height: 3px;
            background-color: #000;
            position: absolute;
            bottom: -10px;
            left: 0;
            transform-origin: bottom center;
            transform: scaleX(1);
            transition: transform 0.3s ease-in-out;
        }

        .form-navigation li.active:hover::after {
            transform: scaleX(0);
        }


        .total-price span, .approximate-time span {
            margin-left: 10px;
            font-weight: normal;
        }

        .address-group {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }

        .address-group-item {
            flex: 1 0 50%;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
        }

        .address-group-item label {
            margin-bottom: 5px;
        }

        .address-group-item input,
        .address-group-item select {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
        }


        .text-help {
            color: #dc1d34;
            font-size: 0.75rem;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            text-align: center;
        }

        .modal-button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .btn-rounded {
            border-radius: 20px;
            padding: 10px 20px;
            color: white;
            font-size: 14px;
            border: none;
            cursor: pointer;
            flex: 0 0 auto;
            margin-left: 10px;
        }

        .btn-primary {
            margin-left: 0;
        }

        .input-rounded {
            flex: 1;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            font-size: 14px;
            margin-right: 10px;
        }


        .apply-btn {
            background-color: #FF9800;
        }

        .apply-btn:hover {
            background-color: #F57C00;
        }

        .input-group {
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .input-rounded {
            flex: 1;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            font-size: 14px;
            margin-right: 10px;
        }


        .card-option input[type="radio"] {
            display: none;
        }

        .card-option input[type="radio"]:checked + label {
            background-color: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }

        .promo-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .promo-modal-content {
            border-radius: 20px;
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 1px solid #888;
            width: 40%; /* Уменьшено в 2 раза */
            text-align: center; /* Выравнивание текста по центру */

        }

        .promo-modal-close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            margin: -50px -20px 0 0;
        }

        .promo-modal-close:hover,
        .promo-modal-close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .promo-card {
            border: 1px solid #eee;
            margin-bottom: 10px;
            padding: 20px;
            border-radius: 15px; /* Более круглая карточка */
            background-color: #f9f9f9;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Более выраженная тень */
            list-style-type: none; /* Убраны точки */
        }

        .promo-card span {
            display: block; /* Переносим текст на новую строку */
            margin-bottom: 10px; /* Добавляем отступ снизу */
            font-size: 18px; /* Увеличиваем размер шрифта */
            font-weight: bold; /* Жирный текст */
        }

        @media screen and (max-width: 600px) {
            .promo-modal-content {
                width: 90%; /* Збільшити ширину на мобільних пристроях */
                margin: 10% auto; /* Зменшити верхній відступ */
            }
            .promo-card button {
                width: 100%; /* Розтягнути кнопку на всю ширину блоку */
                margin-top: 10px; /* Додати відступ зверху */
            }

            .promo-card span {
                font-size: 16px; /* Поменшити розмір шрифту */
            }
        }

        @media only screen and (max-width: 600px) {

            .form-navigation ul {
                flex-direction: row;
            }

            .form-navigation li {
                margin-right: 20px;
            }

            .form-container {
                padding: 15px 10px;
                width: 90%;
                margin: 20px auto;
            }

            .step-content {
                width: 100%;
            }

            .form-group {
                margin-bottom: 5px;
            }

            .form-group-2 {
                margin-bottom: 5px;
            }

            .services-container {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .service-card {
                flex-basis: calc(50% - 1rem); /* Adjusts the base width considering the margins */
                margin: 0.5rem;
                padding: 1rem;
                text-align: center;
                transition: all 0.3s ease;
                box-sizing: border-box; /* Includes padding and border in the element's total width and height */
            }
        }
        @media only screen and (max-width: 470px) {
            .services-container {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .service-card {
                flex-basis: auto;
                width: 100%;
                max-width: 320px; /* You can adjust this to set a max width for the card */
                margin: 1rem 0;
            }
        }
        .card-container {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: space-between !important;
        }

        /* Карточка */
        .cardd {
            background-color: #f8f8f8;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            width: 100%;
        }

        @media (min-width: 395px) {
            .cardd {
                width: 100%!important;
            }
        }

        @media (min-width: 768px) {
            .cardd {
                width: calc(50% - 20px)!important;
                margin: 10px;
            }
        }

        @media (min-width: 777px) {
            .card-container {
                justify-content: center!important;
            }

            .cardd {
                width: calc(50% - 20px)!important;
            }
        }

        @media (max-width: 770px) {
            .card-container {
                justify-content: flex-start!important;
            }

            .cardd {
                width: 100%!important;
                margin-bottom: 20px;
            }
            .services-container {
                justify-content: flex-start!important;
            }

            .service-card {
                width: 100%!important; /* Карточки на всю ширину */
                margin-bottom: 20px; /* Добавить отступ внизу между карточками */
            }
        }

        .additional-services {
            margin: 20px 0;
        }

        .service-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 20px;
        }

        .category-btn {
            background-color: #f8f8f8;
            border: none;
            padding: 10px 15px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: calc(25% - 10px);
            min-width: 80px;
            text-align: center;
        }

        .category-btn.active[data-category="ALL"] {
            background-color: #28a745;
            color: white;
        }

        .category-btn.active[data-category="HOT"] {
            background-color: #ffbf00;
            color: white;
        }

        .category-btn.active[data-category="KITCHEN"] {
            background-color: #ff5722;
            color: white;
        }

        .category-btn.active[data-category="WINDOWS"] {
            background-color: #007BFF;
            color: white;
        }

        .category-btn.active[data-category="ALL"] i,
        .category-btn.active[data-category="HOT"] i,
        .category-btn.active[data-category="KITCHEN"] i,
        .category-btn.active[data-category="WINDOWS"] i {
            color: white;
        }

        .category-btn[data-category="ALL"] i {
            color: #28a745;
        }

        .category-btn[data-category="HOT"] i {
            color: #ffbf00;
        }

        .category-btn[data-category="KITCHEN"] i {
            color: #ff5722;
        }

        .category-btn[data-category="WINDOWS"] i {
            color: #007BFF;
        }
        .category-btn[data-category="DRY"] i {
            color: #dd00ff;
        }

        @media screen and (max-width: 768px) {
            .category-btn {
                width: calc(50% - 5px);
                padding: 15px;
                aspect-ratio: 1 / 1; /* Квадратное соотношение сторон */
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            .category-btn i {
                font-size: 36px; /* Увеличиваем иконку */
            }
            .category-btn span {
                margin-top: 5px;
                font-size: 14px; /* Добавляем текст под иконкой */
            }

            .service-card {
                width: calc(50% - 5px);
                margin: 0;
            }
        }

        /* Контейнер сервисов */
        .services-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        /* Карточка сервиса */
        .service-card {
            background-color: #f8f8f8;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: calc(50% - 10px);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .footer-btn {
            text-align: center;
        }
        .summary-block {
            background-color: rgba(0, 128, 255, 0.1);
            padding: 20px;
            margin-top: 20px;
            border-radius: 8px;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
        }

        .summary-row-title {
            font-size: 18px; /* Увеличенный размер текста для заголовка */
            font-weight: bold;
            color: #333; /* Цвет для заголовка */
            margin-bottom: 5px;
        }

        .approximate-time-value {
            color: #0000ff;
            font-size: 36px; /* Увеличенный размер шрифта */
            font-weight: bold;
        }

        .total-price-value {
            color: #2ecc71;
            font-size: 36px; /* Увеличенный размер шрифта */
            font-weight: bold;
        }

        .zloty-symbol {
            color: #2ecc71;
            font-size: 36px; /* Размер символа валюты */
            font-weight: bold;
        }

        .time-unit {
            color: #0000ff;
            font-size: 30px; /* Размер единицы измерения времени */
            font-weight: bold;
        }

        .divider {
            border: none;
            border-top: 3px solid rgba(0, 128, 255, 0.5); /* Более явный разделитель */
            margin: 15px 0;
        }

        .next-btn {
            width: 100%;
            background-color: #28a745;
            border: none;
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 20px;
            text-align: center;
            display: inline-block;
            line-height: 1.5;
            vertical-align: middle;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
        }


        .next-btn:hover {
            background-color: #218838;
        }

        /* Адаптивный дизайн */
        @media screen and (max-width: 768px) {
            .summary-block {
                width: 90%;
                margin: 20px auto;
            }

            .next-btn {
                font-size: 14px;
            }
        }
        .additional-services h3 {
            text-align: center;
        }
        .address-group-item select, .address-group-item input {
            width: 100%;
            height: 38px;
            padding: 9px 12px;
            border-radius: 10px;
            font-size: 14px;
            box-sizing: border-box;
            border: 1px solid #dde4f2;
        }


        .apply-btn {
            background-color: #FF9800;
        }

        .apply-btn:hover {
            background-color: #F57C00;
        }

        .select-btn i, .apply-btn i {
            margin-right: 5px;
        }

        .old-price {
            color: #e74c3c;
            text-decoration: line-through;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            margin-left: 10px;
        }
        .promo-codes-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .promo-code-card {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border: 2px solid #4CAF50; /* Change border color to fit the theme */
            border-radius: 10px;
            padding: 15px;
            width: 150px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s, background-color 0.3s;
            background-color: #f9f9f9; /* Light background color */
        }

        .promo-code-card:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            background-color: #e8f5e9; /* Slightly different background on hover */
        }

        .promo-code-text {
            font-size: 1.2em;
            font-weight: bold;
            color: #388E3C; /* Text color to fit the theme */
        }

        .promo-code-discount {
            font-size: 0.9em;
            color: #666;
        }

        .apply-btn {
            margin-left: 10px;
            height: 40px;
        }

        .promo-icon {
            font-size: 2em;
            color: #4CAF50; /* Icon color to fit the theme */
            margin-bottom: 5px;
        }

        @media (max-width: 768px) {
            .promo-code-card {
                width: 100%;
            }
        }
        .seo-text {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            font-size: 1rem;
            line-height: 1.5;
            color: #333;
        }

        @media (max-width: 768px) {
            .seo-text {
                padding: 15px;
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .seo-text {
                padding: 10px;
                font-size: 0.8rem;
            }
        }
        .summary-list {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

        .summary-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            border-bottom: 1px solid #e0e0e0;
            transition: background-color 0.3s;
        }

        .summary-list li:last-child {
            border-bottom: none;
        }

        .summary-list li:hover {
            background-color: #f9f9f9;
        }

        .summary-item-title {
            font-weight: 600;
            color: #333;
        }

        .summary-item-value {
            font-weight: 500;
            color: #007BFF; /* Синий цвет для суммы */
        }

        .summary-item-title {
            font-weight: 600;
            color: #333;
            display: flex;
            align-items: center;
        }

        .summary-item-title i {
            margin-right: 10px;
            color: #007BFF; /* Можно настроить цвет иконок */
        }
        .custom-dropdown {
            position: relative;
            width: 250px;
            font-family: Arial, sans-serif;
        }

        .selected-option {
            padding: 12px 16px;
            border: 2px solid #2b7fc2;
            border-radius: 5px;
            background-color: #fff;
            color: #2b7fc2;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }


        .dropdown-options {
            list-style: none;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: white;
            border: 2px solid #2b7fc2;
            border-radius: 5px;
            overflow: hidden;
            display: none;
            z-index: 10;
        }

        .dropdown-options li {
            padding: 10px;
            text-align: center;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
        }

        .dropdown-options li:hover {
            background: #004cff;
            color: white;
        }
        .custom-dropdown.active .dropdown-options {
            display: block;
        }


        /* ===== Общий фон и базовый контейнер ===== */

        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }


        /* Главный белый блок калькулятора (ПК) */
        .form-container {
            max-width: 920px;
            width: 100%;
            margin: 40px auto 50px;
            background: #ffffff;
            border-radius: 30px;
            padding: 28px 36px 32px;
            box-shadow: 0 26px 60px rgba(0, 0, 0, 0.18);
            box-sizing: border-box;
        }

        /* Поле fieldset без рамки */
        .form-container fieldset {
            border: none;
            margin: 0;
            padding: 0;
        }

        /* Внутри шага – в колонку с красивыми отступами */
        .form-container .step-content {
            display: flex !important;
            flex-direction: column;
            gap: 24px;
        }

        /* ===== Заголовок ===== */

        .form-container h2 {
            border: none !important;
            padding: 0 0 8px 0 !important;
            margin: 0;
            font-size: 28px;
            font-weight: 650;
            color: #1f2933 !important;
            border-bottom: 3px solid #3498db !important;
        }

        /* ===== Выбор города (структуру не трогаем) ===== */

        .city-selection-container {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 4px;
        }

        .city-label {
            font-size: 13px;
            font-weight: 500;
            color: #5b6470;
        }

        /* Контейнер селекта города */
        .city-selection-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: 4px;
        }

        .city-label {
            font-size: 13px;
            font-weight: 500;
            color: #5b6470;
        }

        /* Красивый «селект» города */
        .custom-dropdown {
            position: relative;
            border-radius: 10px;
            background: #f7f9ff;
            border: 1px solid #d6e4ff;
            box-shadow: 0 0 0 1px rgba(52, 152, 219, 0.08) inset;
            cursor: pointer;
        }

        /* Текст выбранного города */
        .selected-option {
            padding: 8px 20px;
            font-size: 14px;
            font-weight: 500;
            color: #1f2933;
        }

        /* ОДНА стрелка справа */
        .custom-dropdown::after {
            content: "\f078"; /* маленький треугольник вниз */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 11px;
            color: #3498db;
        }

        /* Выпадающий список городов */
        .dropdown-options {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(100% + 4px);
            list-style: none;
            margin: 0;
            padding: 6px 0;
            background: #ffffff;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
            max-height: 230px;
            overflow-y: auto;
            z-index: 20;
            display: none; /* как и раньше, открывается твоим JS */
        }

        .dropdown-options li {
            padding: 8px 12px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.12s;
        }




        /* ===== Карточки 2×2: комнаты/ванные/кухня/балкон ===== */

        .card-container {
            display: flex;
            flex-direction: column;
            gap: 18px;
            width: 100%;
        }

        .card-row {
            display: flex;
            gap: 18px;
            align-items: flex-start; /* чтобы только балкон мог быть выше */
        }

        .card-row .cardd {
            flex: 1;
        }

        /* Общий стиль карточки */
        .cardd {
            background-color: #f7f9ff !important;
            padding: 16px 14px 12px !important;
            border-radius: 18px !important;
            border: 1px solid #e1e8ff;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
            display: flex;
            flex-direction: column;
        }

        /* Заголовок карточки */
        .cardd h3 {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            font-weight: 600;
            margin: 0 0 8px;
            color: #1f2933;
        }

        .cardd h3 i {
            font-size: 18px;
        }

        /* Комнаты / Ванные / Кухня / Балкон — цветные иконки */
        .card-row:first-child .cardd:first-child h3 i { color: #007bff !important; } /* rooms */
        .card-row:first-child .cardd:last-child h3 i { color: #28a745 !important; } /* baths */
        .card-row:last-child  .cardd:first-child h3 i { color: #ff5722 !important; } /* kitchen */
        .card-row:last-child  .cardd:last-child  h3 i { color: #6a1b9a !important; } /* balcony */

        /* Селекты и number в карточках */
        .cardd select,
        .cardd input[type="number"] {
            width: 100%;
            padding: 8px 10px !important;
            border-radius: 10px;
            border: 1px solid #dfe6f5 !important;
            background-color: #ffffff !important;
            font-size: 14px;
            outline: none;
            box-shadow: none;
            appearance: none;
        }

        .cardd select:focus,
        .cardd input[type="number"]:focus {
            border-color: #3498db !important;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
        }

        /* Лейблы с чекбоксами в карточках */
        .cardd label {
            font-size: 13px;
            color: #4b5563;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cardd input[type="checkbox"] {
            transform: scale(1.1);
        }

        /* Бейдж цены вместо прямоугольника */
        .cardd .price {
            margin-top: 8px;
            padding: 6px 14px !important;
            border-radius: 999px !important;
            font-size: 13px;
            font-weight: 600;
            color: #ffffff !important;
            display: inline-block;
        }

        /* Цвета бейджей перекрываем независимо от inline */
        #roomsPrice       { background-color: #007bff !important; }
        #bathroomsPrice   { background-color: #28a745 !important; }
        #kitchenPrice     { background-color: #ff5722 !important; }
        #balconyPrice     { background-color: #6a1b9a !important; }

        /* Балкон: доп. параметры плотнее */
        #balconyDimensions label,
        #balconyExtras label {
            margin-top: 6px;
        }

        /* ===== Дополнительные услуги (структуру не меняем, только стиль) ===== */

        .additional-services {
            margin-top: 10px;
            padding: 14px 14px 16px;
            border-radius: 22px;
            background: #f8faff;
            border: 1px solid #dde6ff;
        }

        .additional-services > h3 {
            margin: 0 0 10px;
            font-size: 16px;
            font-weight: 600;
            color: #1f2933;
        }

        /* Кнопки категорий */
        .service-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }

        .category-btn {
            border: none;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 500;
            background: #eef2ff;
            color: #1f2933;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }

        .category-btn i {
            font-size: 13px;
        }

        .category-btn.active {
            background: #2563eb;
            color: #ffffff;
        }

        /* Карточки услуг оставляем как есть, только немного воздуха */
        .services-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        /* ===== Summary: время и цена ===== */

        .summary-block {
            margin-top: 18px;
            padding: 16px 18px 18px;
            border-radius: 20px;
            background: #f5f9ff;
            border: 1px solid #dde6ff;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
        }

        /* Каждая строка – отдельный блок по центру */
        .summary-row {
            display: block;
            text-align: center;
            margin-bottom: 8px;
        }

        .summary-row-title {
            display: block;
            margin-bottom: 4px;
            font-size: 14px;
            font-weight: 500;
            color: #2c3e50;
        }

        /* Время */
        .approximate-time-value {
            font-weight: 700;
            font-size: 28px;
            color: #0057ff;
        }

        .time-unit {
            display: inline-block;
            margin-left: 4px;
            font-size: 15px;
            color: #3498db;
        }

        /* Цена */
        .total-price-value {
            font-weight: 700;
            font-size: 30px;
            color: #00a843;
        }

        .zloty-symbol {
            display: inline-block;
            margin-left: 4px;
            font-size: 18px;
            font-weight: 600;
            color: #00a843;
        }

        /* Старая цена */
        .old-price {
            margin-left: 6px;
            font-size: 13px;
            color: #b0b0b0;
            text-decoration: line-through;
        }

        /* Разделитель между временем и ценой */
        .summary-block .divider {
            margin: 10px auto 10px;
            border: none;
            border-top: 1px solid #d6e0ff;
            width: 100%;
        }

        /* Кнопка "Далее" */
        .next-btn {
            margin-top: 10px;
            margin-bottom: 40px;
            width: 100%;
            border: none;
            border-radius: 999px;
            padding: 10px 0;
            font-size: 15px;
            font-weight: 600;
            color: #ffffff;
            background: linear-gradient(135deg, #00c853, #00a843);
            cursor: pointer;
            box-shadow: 0 8px 16px rgba(0, 168, 67, 0.45);
        }

        /* ===== Текст минимального заказа ===== */

        .form-cllontainer .fas.fa-info-circle {
            color: #2196f3 !important;
        }



        .summary-of-step1 {
            max-height: none !important;
        }

        .summary-of-step1 .summary-list {
            max-height: 260px !important;   /* или другое значение */
            overflow-y: auto !important;
            margin: 0;
            padding-right: 6px;
        }

        /* ===== Мобильная версия ===== */

        @media (max-width: 768px) {

            .form-container {
                max-width: 100%;
                width: auto;
                margin: 12px 10px 24px;
                border-radius: 20px;
                padding: 16px 14px 22px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
            }

            .form-container h2 {
                font-size: 22px;
                text-align: center;
                padding-bottom: 6px !important;
                margin-bottom: 2px;
            }

            .card-container {
                gap: 12px;
            }

            .card-row {
                flex-direction: column;
                gap: 12px;
                align-items: stretch;
            }

            .cardd {
                padding: 14px 12px 10px !important;
                border-radius: 16px !important;
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
            }

            .cardd h3 {
                font-size: 14px;
                margin-bottom: 6px;
            }

            .cardd h3 i {
                font-size: 16px;
            }

            .cardd select,
            .cardd input[type="number"] {
                font-size: 13px;
                padding: 7px 9px !important;
            }

            .cardd label {
                font-size: 12px;
            }

            .cardd .price {
                font-size: 12px;
                padding: 5px 10px !important;
                margin-top: 6px;
            }

            #balconyDimensions label,
            #balconyExtras label {
                margin-top: 4px;
            }

            .additional-services {
                margin-top: 10px;
                padding: 12px 10px 14px;
                border-radius: 18px;
            }

            .summary-block {
                margin-top: 10px;
                padding: 12px 12px 14px;
                border-radius: 16px;
            }

            .approximate-time-value {
                font-size: 22px;
            }

            .time-unit {
                font-size: 13px;
            }

            .total-price-value {
                font-size: 24px;
            }

            .zloty-symbol {
                font-size: 16px;
            }

            .next-btn {
                margin-top: 8px;
                padding: 9px 0;
                font-size: 14px;
            }
        }

        /* ===== ДЕСКТОП: широкая панель, понятное разделение блоков ===== */

            /* Широкий основной контейнер */
            .form-container {
                max-width: 1180px;
                width: 100%;
                margin: 24px auto 32px;
                padding: 20px 28px 22px;
                border-radius: 26px;
                background: #ffffff;
                box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
                box-sizing: border-box;
            }

            .form-container fieldset {
                border: none;
                margin: 0;
                padding: 0;
            }

            /* Сетка: слева услуги, справа город + summary */


            /* Заголовок */
            .step.step-1 .step-content > h2 {
                grid-column: 1 / -1;
                margin: 0;
                padding-bottom: 6px !important;
                border-bottom: 3px solid #3498db !important;
                font-size: 26px;
                font-weight: 650;
                color: #1f2933 !important;
            }

            /* ===== ОСНОВНЫЕ УСЛУГИ (слева, row 2) ===== */
            .step.step-1 .step-content > .card-container {
                grid-column: 1;
                grid-row: 2;
                background: #f9fbff;
                border-radius: 20px;
                border: 1px solid #dde6ff;
                padding: 14px 16px 16px;
                box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
            }



            .card-container .card-row {
                display: flex;
                gap: 14px;
                align-items: flex-start;
                margin-bottom: 8px;
            }

            .card-container .card-row:last-child {
                margin-bottom: 0;
            }

            .card-container .card-row .cardd {
                flex: 1;
                background-color: #f7f9ff !important;
                padding: 14px 12px 10px !important;
                border-radius: 16px !important;
                border: 1px solid #e1e8ff;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
                display: flex;
                flex-direction: column;
            }

            .card-container .cardd h3 {
                display: flex;
                align-items: center;
                gap: 8px;
                margin: 0 0 6px;
                font-size: 15px;
                font-weight: 600;
                color: #111827;
            }

            .card-container .cardd select,
            .card-container .cardd input[type="number"] {
                width: 100%;
                padding: 7px 9px !important;
                border-radius: 10px;
                border: 1px solid #dfe6f5 !important;
                background: #ffffff !important;
                font-size: 14px;
                outline: none;
            }

            .card-container .cardd select:focus,
            .card-container .cardd input[type="number"]:focus {
                border-color: #3498db !important;
                box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
            }

            .card-container .cardd label {
                font-size: 13px;
                color: #4b5563;
                gap: 8px;
            }

            .card-container .cardd .price {
                margin-top: 6px;
                padding: 5px 12px !important;
                border-radius: 999px !important;
                font-size: 12px;
                font-weight: 600;
                color: #ffffff !important;
                display: inline-block;
            }

            #roomsPrice     { background-color: #007bff !important; }
            #bathroomsPrice { background-color: #28a745 !important; }
            #kitchenPrice   { background-color: #ff5722 !important; }
            #balconyPrice   { background-color: #6a1b9a !important; }

            #balconyDimensions label,
            #balconyExtras label {
                margin-top: 4px;
            }

            /* ===== ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ – СЛЕВА НИЖЕ, ГОРИЗОНТАЛЬНАЯ СЕТКА ===== */
            .step.step-1 .step-content > .additional-services {
                grid-column: 1;
                grid-row: 3;
                margin-top: 20px;
                width: 100%;
                padding: 14px 16px 16px;
                border-radius: 20px;
                background: #ffffff;
                border: 1px solid #e4e7f5;
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
            }



            .additional-services > h3 {
                margin-top: 0;
                margin-bottom: 8px;
                font-size: 16px;
                font-weight: 600;
                color: #111827;
            }

            /* Горизонтальная сетка доп-услуг, стиль карточек не трогаем */
            .additional-services .services-container {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }

            .additional-services .service-card {
                flex: 0 1 calc(33.33% - 10px); /* 3 карточки в ряд */

            }

            /* ===== МАЛЕНЬКИЙ БЛОК "ЦЕНА + ВРЕМЯ" СПРАВА ВЫСОКО ===== */
            .step.step-1 .step-content > .summary-block {
                grid-column: 2;
                grid-row: 2;
                align-self: flex-start;

                width: 100%;
                max-width: 360px;

                padding: 14px 16px 14px;
                border-radius: 18px;
                background: #f5f9ff;
                border: 1px solid #dde6ff;
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);

                display: flex;
                flex-direction: column;
                gap: 8px;
            }



            .summary-row {
                text-align: center;
                margin-bottom: 4px;
            }

            .summary-row-title {
                display: block;
                margin-bottom: 3px;
                font-size: 14px;
                font-weight: 500;
                color: #2c3e50;
            }

            .approximate-time-value {
                font-weight: 700;
                font-size: 24px;
                color: #0057ff;
            }

            .time-unit {
                margin-left: 4px;
                font-size: 14px;
                color: #3498db;
            }

            .total-price-value {
                font-weight: 700;
                font-size: 26px;
                color: #00a843;
            }

            .zloty-symbol {
                margin-left: 4px;
                font-size: 16px;
                font-weight: 600;
                color: #00a843;
            }

            .next-btn {
                margin-top: 6px;
                width: 100%;
                border: none;
                border-radius: 999px;
                padding: 9px 0;
                font-size: 15px;
                font-weight: 600;
                color: #ffffff;
                background: linear-gradient(135deg, #00c853, #00a843);
                cursor: pointer;
                box-shadow: 0 8px 16px rgba(0, 168, 67, 0.45);
            }

            /* ===== ГОРОД: КРАСИВАЯ КАРТОЧКА СПРАВА НИЖЕ SUMMARY ===== */
        .step.step-1 .step-content > .city-selection-container {
            grid-column: 2;
            grid-row: 3;
            width: 100%;
            text-align: center;
            align-items: center;
            max-width: 360px;
            padding: 10px 14px 12px;
            border-radius: 18px;
            background: #ffffff;
            border: 1px solid #e4e7f5;
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
        }



            .city-label {
                font-size: 13px;
                font-weight: 500;
                color: #4b5563;
                margin-bottom: 2px;
            }

            .custom-dropdown {
                position: relative;
                border-radius: 10px;
                background: #f7f9ff;
                border: 1px solid #d6e4ff;
                cursor: pointer;
                padding: 0; /* убираем старые паддинги контейнера */
            }

            .selected-option {
                padding: 8px 34px 8px 12px;
                font-size: 14px;
                font-weight: 500;
                color: #1f2933;
            }

            .custom-dropdown::after {
                content: "\f078";
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                position: absolute;
                right: 12px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 11px;
                color: #3498db;
            }

            .dropdown-options {
                left: 0;
                right: 0;
                top: calc(100% + 4px);
                border-radius: 10px;
                border: 1px solid rgba(0, 0, 0, 0.06);
                box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
                background: #ffffff;
                max-height: 230px;
                overflow-y: auto;
                list-style: none;
                margin: 0;
                padding: 6px 0;
                z-index: 20;
            }

            .dropdown-options li {
                padding: 8px 12px;
                font-size: 14px;
                cursor: pointer;
                transition: background 0.12s;
            }



            /* ===== Информация о минимальном заказе – внизу на всю ширину ===== */
            .step.step-1 .step-content > div:last-child {
                grid-column: 1 / -1;
                margin-top: 6px !important;
                font-size: 13px !important;
            }
        }
        /* ===== ДЕСКТОП: под большой монитор, город сверху, цена под ним ===== */
        @media (min-width: 992px) {

            /* Очень широкий контейнер */
            .form-container {
                max-width: 1720px;                 /* реально под монитор */
                width: 100%;
                margin: 24px auto 32px;
                padding: 24px 60px 26px;
                border-radius: 26px;
                background: #ffffff;
                box-shadow: 0 22px 55px rgba(0, 0, 0, 0.20);
                box-sizing: border-box;
            }

            .form-container fieldset {
                border: none;
                margin: 0;
                padding: 0;
            }

            /* Сетка: слева услуги, справа колонка город + подытог */


            /* Главный заголовок */
            .step.step-1 .step-content > h2 {
                grid-column: 1 / -1;
                margin: 0;
                padding-bottom: 8px !important;
                border-bottom: 3px solid #3498db !important;
                font-size: 28px;
                font-weight: 650;
                color: #1f2933 !important;
            }

            /* ===== ОСНОВНЫЕ УСЛУГИ (комнаты/ванны/кухня/балкон) ===== */

            .step.step-1 .step-content > .card-container {
                grid-column: 1;
                grid-row: 2;
                background: #f9fbff;
                border-radius: 22px;
                border: 1px solid #dde6ff;
                padding: 18px 20px 18px;
                box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
            }

            /* Внутри 2×2, с хорошим разлётом на широком экране */
            .card-container .card-row {
                display: flex;
                gap: 22px;
                align-items: flex-start;
                margin-bottom: 12px;
            }

            .card-container .card-row:last-child {
                margin-bottom: 0;
            }

            .card-container .card-row .cardd {
                flex: 1;
                background-color: #f7f9ff !important;
                padding: 16px 14px 12px !important;
                border-radius: 18px !important;
                border: 1px solid #e1e8ff;
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
                display: flex;
                flex-direction: column;
                min-height: 160px;
            }

            .card-container .cardd h3 {
                display: flex;
                align-items: center;
                gap: 8px;
                margin: 0 0 8px;
                font-size: 16px;
                font-weight: 600;
                color: #111827;
            }

            .card-container .cardd h3 i {
                font-size: 20px;
            }

            .card-container .cardd select,
            .card-container .cardd input[type="number"] {
                width: 100%;
                padding: 8px 10px !important;
                border-radius: 10px;
                border: 1px solid #dfe6f5 !important;
                background: #ffffff !important;
                font-size: 14px;
                outline: none;
            }

            .card-container .cardd select:focus,
            .card-container .cardd input[type="number"]:focus {
                border-color: #3498db !important;
                box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
            }

            .card-container .cardd label {
                font-size: 13px;
                color: #4b5563;
                gap: 8px;
            }

            .card-container .cardd .price {
                margin-top: 8px;
                padding: 6px 14px !important;
                border-radius: 999px !important;
                font-size: 13px;
                font-weight: 600;
                color: #ffffff !important;
                display: inline-block;
            }

            #roomsPrice     { background-color: #007bff !important; }
            #bathroomsPrice { background-color: #28a745 !important; }
            #kitchenPrice   { background-color: #ff5722 !important; }
            #balconyPrice   { background-color: #6a1b9a !important; }

            #balconyDimensions label,
            #balconyExtras label {
                margin-top: 4px;
            }

            /* ===== ДОП. УСЛУГИ – отдельный блок, горизонтальная сетка ===== */

            .step.step-1 .step-content > .additional-services {
                grid-column: 1;
                grid-row: 3;
                margin-top: 20px;
                padding: 16px 20px 18px;
                border-radius: 22px;
                background: #ffffff;
                border: 1px solid #e4e7f5;
                box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
                margin-top: 30px;
            }

            /* Заголовок доп. услуг — тот, что у тебя в HTML (additionalServices.title) */
            .additional-services > h3 {
                margin-top: 0;
                margin-bottom: 10px;
                font-size: 16px;
                font-weight: 600;
                color: #c05621; /* тёплый, чтобы отличался от других секций */
            }

            .additional-services .service-categories {
                margin-bottom: 10px;
            }

            .additional-services .services-container {
                display: flex;
                flex-wrap: wrap;
                gap: 10px 16px;
            }

            /* до 4 карточек в ряд, но не огромные */
            .additional-services .service-card {
                flex: 0 1 calc(25% - 16px);
                max-width: calc(25% - 16px);
            }

            /* ===== ГОРОД — СПРАВА СВЕРХУ ===== */

            .step.step-1 .step-content > .city-selection-container {
                grid-column: 2;
                grid-row: 2;
                width: 100%;
                max-width: 290px;

                padding: 12px 16px 14px;
                border-radius: 20px;
                background: #ffffff;
                border: 1px solid #e4e7f5;
                box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
            }

            /* Заголовок города (label из HTML) */
            .city-label {
                display: block;
                margin-bottom: 6px;
                font-size: 16px;
                font-weight: 600;
                color: #4338ca; /* фиолетовый – цвет для блока города */
            }

            .custom-dropdown {
                position: relative;
                border-radius: 10px;
                background: #f7f9ff;
                border: 1px solid #d6e4ff;
                cursor: pointer;
                padding: 0;
            }

            .selected-option {
                padding: 8px 34px 8px 12px;
                font-size: 14px;
                font-weight: 500;
                color: #1f2933;
            }

            /* стрелку можно оставить псевдоэлементом, это не заголовок :) */
            .custom-dropdown::after {
                content: "\f078";
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                position: absolute;
                right: 12px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 11px;
                color: #3498db;
            }

            .dropdown-options {
                left: 0;
                right: 0;
                top: calc(100% + 4px);
                border-radius: 10px;
                border: 1px solid rgba(0, 0, 0, 0.06);
                box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
                background: #ffffff;
                max-height: 230px;
                overflow-y: auto;
                list-style: none;
                margin: 0;
                padding: 6px 0;
                z-index: 20;
            }

            .dropdown-options li {
                padding: 8px 12px;
                font-size: 14px;
                cursor: pointer;
                transition: background 0.12s;
            }



            /* ===== ЦЕНА + ВРЕМЯ — ПОД ГОРОДОМ ===== */

            .step.step-1 .step-content > .summary-block {
                grid-column: 2;
                grid-row: 3;                 /* именно ПОД городом */
                align-self: flex-start;

                width: 100%;
                max-width: 420px;

                padding: 16px 18px 16px;
                border-radius: 20px;
                background: #f5f9ff;
                border: 1px solid #dde6ff;
                box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);

                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            /* Заголовки внутри summary (оба) — как подзаголовки одинакового размера */
            .summary-row-title {
                display: block;
                margin-bottom: 3px;
                font-size: 16px;
                font-weight: 600;
                color: #1f2937; /* тёмно-серый для подитога */
                text-align: center;
            }

            .summary-row {
                text-align: center;
                margin-bottom: 4px;
            }

            .approximate-time-value {
                font-weight: 700;
                font-size: 26px;
                color: #0057ff;
            }

            .time-unit {
                margin-left: 4px;
                font-size: 14px;
                color: #3498db;
            }

            .total-price-value {
                font-weight: 700;
                font-size: 28px;
                color: #00a843;
            }

            .zloty-symbol {
                margin-left: 4px;
                font-size: 16px;
                font-weight: 600;
                color: #00a843;
            }

            .next-btn {
                margin-top: 8px;
                margin-bottom: 15px;
                width: 100%;
                border: none;
                border-radius: 999px;
                padding: 9px 0;
                font-size: 15px;
                font-weight: 600;
                color: #ffffff;
                background: linear-gradient(135deg, #00c853, #00a843);
                cursor: pointer;
                box-shadow: 0 8px 16px rgba(0, 168, 67, 0.45);
            }

            /* ===== ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ «ЗАГОЛОВКОВ» БЛОКОВ ===== */

            /* Доп. услуги — заголовок уже h3 */
            .additional-services > h3,
                /* Город — city-label */
            .city-label,
                /* Заголовки строк в summary */
            .summary-row-title {
                font-size: 16px;
                font-weight: 600;
            }

            /* Цвета по блокам */
            .additional-services > h3 { color: #c05621; }  /* тёплый */
            .city-label               { color: #4338ca; }  /* фиолетовый */
            .summary-row-title        { color: #1f2937; }  /* нейтральный тёмный */

            /* ===== Инфо о минимальном заказе – внизу на всю ширину ===== */
            .step.step-1 .step-content > div:last-child {
                grid-column: 1 / -1;
                margin-top: 8px !important;
                font-size: 13px !important;
            }
        }

        /* Общий стиль для всех заголовков секций */
        .section-title {
            margin: 0 0 10px;
            font-size: 16px;
            font-weight: 600;
        }

        /* Основные услуги (Usługi podstawowe) */
        .main-services-title {
            color: #0369a1; /* холодно-синий */
        }

        /* Доп. услуги – уже есть h3, просто выровняем под общий стиль */
        .additional-services > h3 {
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 600;
            color: #c05621; /* тёплый оранжево-коричневый */
        }

        /* Подсумовання (Podsumowanie) */
        .summary-title {
            color: #1f2937; /* нейтральный тёмный */
        }

        /* Город – тоже как заголовок секции */
        .city-label {
            display: block;
            margin-bottom: 6px;
            font-size: 16px;
            font-weight: 600;
            color: #4338ca; /* фиолетовый */
        }

        /* ДЕСКТОП: раскладываем всё в сетку 2 колонки */
        @media (min-width: 992px) {



            /* Заголовок на всю ширину */
            .step.step-1 .step-content > h2 {
                grid-column: 1 / -1;
                grid-row: 1;
            }

            /* Главные услуги слева – занимают две строки по высоте */
            .step.step-1 .step-content > .card-container {
                grid-column: 1;
                grid-row: 2 / span 2;   /* строки 2 и 3 */
            }

            /* Доп. услуги слева – под главными */
            .step.step-1 .step-content > .additional-services {
                grid-column: 1;
                grid-row: 4;
            }

            /* ГОРОД справа, вверху (та же «зона», что и card-container слева) */
            .step.step-1 .step-content > .city-selection-container {
                grid-column: 2;
                grid-row: 2;
                margin-right: 0;
            }

            /* БЛОК С ЦЕНОЙ И ВРЕМЕНЕМ – СРАЗУ ПОД ГОРОДОМ */
            .step.step-1 .step-content > .summary-block {
                grid-column: 2;
                grid-row: 3;   /* прямо под городом, внутри высоты card-container */
                margin: 0;
            }

            /* Информация "Минимальное замówienie…" – внизу на всю ширину */
            .step.step-1 .step-content > div:last-child {
                grid-column: 1 / -1;
                grid-row: 5;
                margin-top: 10px;
            }
        }
        @media (min-width: 992px) {

            /* Контейнер формы – опорный для абсолютного позиционирования справа */
            .form-container {
                position: relative;
                max-width: 1720px;
                margin: 24px auto 32px;
            }

            /* Внутри просто блочная верстка, без flex */
            .step.step-1 .step-content {
                display: block !important;      /* перебиваем inline flex */
                padding-right: 420px;           /* место справа под город + summary */
            }

            /* ---------- ПРАВАЯ КОЛОНКА (ГОРОД + ЦЕНА/ВРЕМЯ/СПИСОК) ---------- */

            /* Город закрепляем в правом верхнем углу формы */
            .city-selection-container {
                position: absolute;
                top: 80px;                      /* под заголовком, подгони по вкусу */
                right: 60px;
                width: 360px;
                z-index: 2;
                margin: 0;
            }

            /* Блок с ценой/временем и списком – строго ПОД городом, тоже абсолютно */
            .summary-block {
                position: absolute;
                top: 80px + 130px;              /* чуть ниже города (примерно его высота) */
                top: 220px;                     /* конкретное число, можно подправить */
                right: 60px;
                width: 360px;
                z-index: 2;
                margin: 0;
            }

            /* Можно чуть поджать карточки слева, чтобы всё красиво влезало */
            .card-container,
            .additional-services {
                max-width: 1050px;
            }
        }

        @media (min-width: 992px) {

            /* форма – опорный контейнер для absolute */
            .form-container {
                position: relative;
                margin: 24px auto 32px;
                max-width: 1720px;
                padding: 24px 60px 30px;
                box-sizing: border-box;
            }

            /* контент – блок, справа резервируем место под город+summary */
            .step.step-1 .step-content {
                display: block !important;      /* перебиваем inline flex */
                padding-right: 420px;           /* запас справа под правую колонку */
            }

            /* ЛЕВЫЕ блоки (основные + доп. услуги) – ничего не меняем,
               они сами займут доступную ширину слева */
            .card-container,
            .additional-services {
                max-width: 1100px;
                margin-right: 0;
            }

            /* ГОРОД – закреплён в правом верхнем углу */
            .city-selection-container {
                position: absolute;
                top: 80px;
                right: 60px;
                width: 360px;
                margin: 0;
                z-index: 3;
            }

            /* ЦЕНА + ВРЕМЯ + ВЫБОР – строго под городом */
            .summary-block {
                position: absolute;
                top: 230px;      /* подгони по высоте под свой заголовок */
                right: 60px;
                width: 360px;
                margin: 0;
                z-index: 2;
            }
        }
        .step-title {
            text-align: center;
            margin: 0 0 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #3498db;
            color: #2c3e50;
            font-size: 26px;
            font-weight: 700;
        }

        /* Десктоп, мобильные и планшет не трогаем */
        @media (min-width: 992px) {

            /* Форма просто центрируется, БЕЗ position: relative */
            .form-container {
                max-width: 1720px;
                margin: 24px auto 32px;
                padding: 24px 60px 30px;
                box-sizing: border-box;
            }

            /* Опорный контейнер – step-content */
            .step.step-1 .step-content {
                position: relative;          /* <-- сюда вешаем relative */
                display: block !important;   /* перебиваем старый flex */
                padding-right: 450px;        /* место под правую колонку */
                margin-top: 16px;            /* общий отступ под заголовком */
            }

            /* ЛЕВАЯ часть (основные и доп. услуги) остаётся как есть */
            .card-container,
            .additional-services {
                max-width: 1100px;
                margin-right: 0;
            }

            /* ГОРОД – привязан к ВЕРХУ step-content */
            .city-selection-container {
                position: absolute;
                top: 0;              /* тот же уровень, что и первая карточка слева */
                right: 60px;
                width: 360px;
                margin: 0;
                z-index: 3;
            }

            /* ЦЕНА/ВРЕМЯ – под городом, но тоже от step-content */
            .summary-block {
                position: absolute;
                top: 150px;          /* подгони под высоту карточки города */
                right: 60px;
                width: 360px;
                margin: 0;
                z-index: 2;
            }
        }

        @media (min-width: 992px) {
            .summary-of-step1 {
                max-height: none !important;
            }

            .summary-of-step1 .summary-list {
                max-height: 260px !important;   /* или другое значение */
                overflow-y: auto !important;
                margin: 0;
                padding-right: 6px;
            }
        }
        @media (max-width: 991px) {
            .step.step-1 .step-content > .summary-block {
                width: 100%;
                max-width: none;
            }

            .step.step-1 .step-content > .city-selection-container
            Specificity:

        (0,4,0) {
            margin-right: 0;
        }
            .step.step-1 .step-content > .additional-services
            Specificity: (0,4,0) {
            grid-column: 1;
            grid-row: 3;
            margin-top: 20px;
            padding: 14px 16px 16px;
            border-radius: 20px;
            background: #ffffff;
            border: 1px solid #e4e7f5;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
            width: 100%;
        }
            .step.step-1 .step-content > .city-selection-container {
                grid-column: 2;
                grid-row: 3;
                width: 100%;
                text-align: center;
                align-items: center;
                max-width: 360px;
                padding: 10px 14px 12px;
                border-radius: 18px;
                background: none;
                border: none;
                box-shadow: none;
            }
            .category-btn i {
                font-size: 37px;
            }

        }

            @media (max-width: 768px) {
                .additional-services .services-container {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px;
                    flex-direction: column;
                    align-items: center;
                }

            }

        /* Общий контейнер шага 2 */
        .step2-content {
            padding-top: 10px;
        }

        /* Две колонки: календарь слева, форма справа */
        .step2-layout {
            display: flex;
            gap: 40px;
            width: 100%;
            align-items: stretch;
        }

        /* Левая и правая колонка */
        .step2-calendar-column {
            flex: 0 0 560px;
        }

        .step2-form-column {
            flex: 1 1 auto;
        }

        /* Карточки */
        .calendar-card,
        .form-card {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 12px 30px rgba(15, 52, 96, 0.08);
            padding: 24px 28px 28px;
        }

        /* Календарь визуально центрируем */
        .calendar-card {
            margin: 0 auto;
        }

        /* Шапка календаря */
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .calendar-header .current-date {
            font-size: 16px;
            color: #2c3e50;
        }

        .calendar-header .btn-group .btn {
            padding: 4px 10px;
            font-size: 14px;
        }

        /* Группа дата + время */
        .row-two {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px 20px;
            margin-bottom: 22px;
        }

        /* Сетка для адреса */
        .address-group {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px 20px;
            margin-top: 10px;
        }

        .address-group-item label,
        .form-group-2 > .row-two label,
        .form-group > label {
            font-size: 13px;
            font-weight: 600;
            color: #4a4a4a;
            margin-bottom: 4px;
        }

        /* Инпуты шага 2 */
        .step-2-input {
            width: 100%;
            border-radius: 10px;
            border: 1px solid #dde4f2;
            padding: 9px 12px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
            background-color: #fbfcff;
        }

        .step-2-input:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            background-color: #ffffff;
        }

        /* Кнопки внизу справа */
        .step2-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 14px;
            margin-top: 24px;
        }

        /* "Далее" — зелёная, как в шаге 1 */
        .next-btn-2 {
            min-width: 160px;
            border: none;
            border-radius: 999px;
            padding: 10px 24px;
            background: linear-gradient(90deg, #00b341, #00a33a);
            color: #ffffff;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(0, 179, 65, 0.35);
            transition: transform 0.1s ease, box-shadow 0.1s ease;
        }

        .next-btn-2:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 24px rgba(0, 179, 65, 0.4);
        }

        /* "Назад" — лёгкая, вторичная кнопка */
        .prev-btn {
            min-width: 130px;
            border-radius: 999px;
            padding: 9px 22px;
            border: 1px solid #e0e6f0;
            background: #ffffff;
            color: #555;
            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.1s ease, border-color 0.1s ease;
        }

        .prev-btn:hover {
            background-color: #f5f7fb;
            border-color: #c5d0e3;
        }

        /* ТОЛЬКО ДЕСКТОП: делаем контейнер ниже */
        @media (min-width: 1140px) {

            /* общий контейнер шага 2 – вытягиваем вниз */
            .step2-content {
                min-height: 650px;        /* подбери число: 600–750, как тебе нравится */
                padding-bottom: 40px;     /* чуть больше воздуха снизу */
            }

            /* чтобы левая и правая карточки равномерно тянулись по высоте */
            .step2-layout {
                align-items: stretch;
            }

            .calendar-card,
            .form-card {
                height: 100%;
            }
            .form-container .step-content {
                display: flex !important;
                flex-direction: column;
                gap: 0px;
            }
            .address-group {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 16px 20px;
                margin-top: 10px;
            }
            .step2-buttons {
                display: flex;
                justify-content: flex-end;
                gap: 14px;
                margin-top: 40px;
                flex-direction: column;
            }
            .address-group-item select, .address-group-item input {
                width: 100%;
                height: 50px;
                padding: 9px 12px;
                border-radius: 10px;
                font-size: 15px;
                box-sizing: border-box;
                border: 1px solid #dde4f2;
            }
        }

        @media(max-width: 1140px){
            .step2-calendar-column {
                flex: 0 0 400px;
            }

        }

        /* Адаптив: на планшете/телефоне всё в одну колонку */
        @media (max-width: 991px) {
            .step2-layout {
                display: flex;
                gap: 40px;
                width: 100%;
                flex-direction: column;
            }

            .step2-calendar-column,
            .step2-form-column {
                flex: 1 1 100%;
            }

            .calendar-card,
            .form-card {
                border-radius: 16px;
                padding: 18px 16px 20px;
            }

            .row-two,
            .address-group {
                grid-template-columns: 1fr;
            }
            .step2-calendar-column {
                flex: 0;!important;
            }
            .form-container {
                max-width: 1180px;
                width: 100%;
                margin: 24px auto 32px;
                padding: 0;
                border-radius: 26px;
                background: #ffffff;
                box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
                box-sizing: border-box;
            }

        }

        @media(max-width: 600px){
            .step2-buttons {
                display: flex;
                justify-content: flex-end;
                gap: 14px;
                margin-top: 24px;
                flex-direction: column;
            }
        }

        /* ===== ЛЕЙАУТ ШАГА 3 – левая/правая колонка ===== */
        .step3-layout {
            display: flex;
            gap: 32px;
            align-items: flex-start;
            margin-top: 20px;
        }

        .step3-left {
            flex: 1 1 auto;
            min-width: 0;
        }

        .step3-right {
            flex: 0 0 340px;     /* ширина правой карточки как в калькуляторе */
            max-width: 360px;
        }

        /* ===== КАРТОЧКА ВРЕМЕНИ И ЦЕНЫ (как на скрине) ===== */
        .summary-block1 {
            background: #ffffff;
            border-radius: 20px;
            padding: 24px 26px;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
            border: 1px solid #e2e7f4;
            margin-bottom: 22px;
        }

        .summary-block1 .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 8px;
        }

        .summary-block1 .summary-row-title {
            font-size: 13px;
            font-weight: 600;
            color: #8a94aa;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        /* Приблизительное время – число синее */
        .summary-block1 .approximate-time-value {
            font-size: 30px;
            font-weight: 800;
            color: #0c6dff;
        }

        .summary-block1 .time-unit {
            margin-left: 4px;
            font-size: 14px;
            font-weight: 600;
            color: #8a94aa;
        }

        /* Цена – число зелёное, zł – зелёный текст рядом */
        .summary-block1 .total-price-value {
            font-size: 32px;
            font-weight: 800;
            color: #00b341;
        }

        .summary-block1 .zloty-symbol {
            margin-left: 4px;
            font-size: 16px;
            font-weight: 700;
            color: #00b341;
        }

        /* старая цена – перечёркнутая серая справа от цифры */
        .summary-block1 .old-price {
            margin-left: 8px;
            font-size: 13px;
            color: #c0c4d4;
            text-decoration: line-through;
        }

        /* линия между временем и ценой */
        .summary-block1 .divider {
            border: none;
            border-top: 1px solid #edf0fb;
            margin: 14px 0 16px;
        }

        /* ===== КАРТОЧКА "ВЫБОР УСЛУГ" СПРАВА ===== */
        .step3-right .summary-of-step1 {
            background: #f8f9ff;
            padding: 18px 20px;
            border-radius: 18px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
            border: 1px solid #e2e7f4;
            margin-bottom: 18px;
        }

        .step3-right .summary-of-step1 h2 {
            font-size: 15px;
            font-weight: 700;
            color: #2c3e50;
            text-align: left;
            margin-bottom: 12px;
        }

        /* список выбранных услуг – аккуратный текст */
        .step3-right .summary-list {
            list-style: none;
            padding-left: 0;
            margin: 0;
            font-size: 14px;
            color: #4a4f63;
            height: 120px;
        }

        .step3-right .summary-list li + li {
            margin-top: 4px;
        }

        /* ===== КНОПКИ ВНИЗУ ПРАВОГО БЛОКА ===== */
        .footer-btn {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* зелёная кнопка "Дальше/Отправить" – как на калькуляторе */
        .footer-btn #submit-btn.green_bt {
            width: 100%;
            border-radius: 999px;
            padding: 13px 0;
            font-size: 15px;
            font-weight: 700;
            border: none;
            color: #ffffff;
            background: linear-gradient(135deg, #00c853, #00b341);
            box-shadow: 0 10px 20px rgba(0, 184, 67, 0.35);
            cursor: pointer;
            transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
        }

        .footer-btn #submit-btn.green_bt:hover {
            background: linear-gradient(135deg, #00b341, #009b36);
            box-shadow: 0 8px 18px rgba(0, 150, 57, 0.4);
            transform: translateY(-1px);
        }

        .footer-btn #submit-btn.green_bt:active {
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(0, 150, 57, 0.35);
        }

        /* серая кнопка "Назад" */
        .footer-btn .prev-btn {
            width: 100%;
            border-radius: 999px;
            padding: 11px 0;
            font-size: 14px;
            font-weight: 600;
            background-color: #ffffff;
            border: 1px solid #d0d5e4;
            color: #5a647c;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }

        .footer-btn .prev-btn:hover {
            background-color: #f3f5fb;
            border-color: #c2c8dd;
        }

        /* ===== АДАПТИВ: на мобильных колонки одна под другой ===== */
        @media (max-width: 992px) {
            .step3-layout {
                flex-direction: column;
            }

            .step3-left,
            .step3-right {
                flex: 1 1 100%;
                max-width: 100%;
            }

            /* как в калькуляторе – на мобиле блок с ценой/временем сверху */
            .step3-right {
                order: -1;
            }
        }
        /* ===== ЛЕЙАУТ ШАГА 3: левая/правая колонка ===== */

        .step3-layout {
            display: flex;
            gap: 32px;
            align-items: flex-start;
            margin-top: 20px;
        }

        .step3-left {
            flex: 1 1 auto;
            min-width: 0;
        }

        /* правая колонка – фиксированная ширина как у калькулятора */
        .step3-sidebar {
            flex: 0 0 340px;
            max-width: 360px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        /* ===== ОБЩАЯ КАРТОЧКА СПРАВА (белый прямоугольник с тенью) ===== */

        .sidebar-box {
            background: #ffffff;
            border-radius: 20px;
            padding: 22px 24px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
            border: 1px solid #e2e7f4;
        }

        /* расстояния между карточками */
        .sidebar-box + .sidebar-box {
            margin-top: 18px;
        }

        /* заголовок в верхней карточке */
        .sidebar-main .sidebar-header {
            font-size: 13px;
            font-weight: 600;
            color: #8a94aa;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            margin-bottom: 8px;
        }

        /* строка с временем */
        .sidebar-time-row {
            display: flex;
            align-items: baseline;
            gap: 6px;
        }

        .sidebar-time-value {
            font-size: 30px;
            font-weight: 800;
            color: #0c6dff;
        }

        .sidebar-time-unit {
            font-size: 14px;
            font-weight: 600;
            color: #3498db;
        }

        /* разделитель */
        .sidebar-divider {
            border: none;
            border-top: 1px solid #edf0fb;
            margin: 14px 0 16px;
        }

        /* строка с ценой */
        .sidebar-price-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 18px;
        }

        .sidebar-price-label {
            font-size: 13px;
            font-weight: 600;
            color: #8a94aa;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .sidebar-price-values {
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .sidebar-price-value {
            font-size: 32px;
            font-weight: 800;
            color: #00b341;
        }

        .sidebar-price-currency {
            font-size: 16px;
            font-weight: 700;
            color: #00b341;
        }

        .sidebar-price-old {
            font-size: 13px;
            color: #c0c4d4;
            text-decoration: line-through;
            margin-left: 6px;
        }

        /* ===== ЗЕЛЁНАЯ КНОПКА ВНУТРИ КАРТОЧКИ ===== */

        .sidebar-primary-btn {
            margin-top: 14px;
            width: 100%;
            border-radius: 999px;
            padding: 13px 0;
            font-size: 15px;
            font-weight: 700;
            border: none;
            color: #ffffff;
            background: linear-gradient(135deg, #00c853, #00b341);
            box-shadow: 0 10px 20px rgba(0, 184, 67, 0.35);
            cursor: pointer;
            transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
        }

        .sidebar-primary-btn:hover {
            background: linear-gradient(135deg, #00b341, #009b36);
            box-shadow: 0 8px 18px rgba(0, 150, 57, 0.4);
            transform: translateY(-1px);
        }

        .sidebar-primary-btn:active {
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(0, 150, 57, 0.35);
        }

        /* ===== КАРТОЧКА "ВЫБОР УСЛУГ" ===== */

        .sidebar-services-title {
            font-size: 15px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 10px;
            border-bottom: 1px solid #e2e7f4;
            padding-bottom: 6px;
        }

        .sidebar-services-list {
            list-style: none;
            padding-left: 0;
            margin: 0;
            font-size: 14px;
            color: #4a4f63;
        }

        .sidebar-services-list li + li {
            margin-top: 4px;
        }

        /* ===== НИЖНЯЯ КНОПКА "НАЗАД" ===== */

        .sidebar-bottom-buttons {
            margin-top: 16px;
        }

        .sidebar-secondary-btn {
            width: 100%;
            border-radius: 999px;
            padding: 11px 0;
            font-size: 14px;
            font-weight: 600;
            background-color: #ffffff;
            border: 1px solid #d0d5e4;
            color: #5a647c;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }

        .sidebar-secondary-btn:hover {
            background-color: #f3f5fb;
            border-color: #c2c8dd;
        }

        /* ===== АДАПТИВ: на мобильных правая колонка уходит наверх ===== */

        @media (max-width: 992px) {
            .step3-layout {
                flex-direction: column;
            }

            .step3-left,
            .step3-sidebar {
                flex: 1 1 100%;
                max-width: 100%;
            }

            /* как в первом шаге – на мобиле сначала цена/время, потом формы */
            .step3-sidebar {
                order: -1;
            }
        }

        /* ===== ОБЩИЙ ЛЕЙАУТ ПРАВОЙ КОЛОНКИ ===== */

        .step3-right {
            flex: 0 0 360px;
            max-width: 380px;
            display: flex;
            justify-content: flex-start;
        }

        .sidebar-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        /* ===== ГОЛУБОЙ БОЛЬШОЙ КОНТЕЙНЕР ===== */

        .sidebar-main-card {
            background: #f4f8ff; /* светло-голубой фон как на скрине */
            border-radius: 26px;
            padding: 24px 28px 28px;
            box-shadow: 0 10px 30px rgba(0, 90, 200, 0.12);
            border: 1px solid #e0ebff;
            text-align: center;
        }

        /* маленькие серые подписи сверху и перед ценой */
        .sidebar-caption {
            display: block;
            margin-bottom: 3px;
            font-size: 14px;
            font-weight: 500;
            color: #2c3e50;
        }

        /* время */
        .sidebar-time-row {
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 4px;
            margin-bottom: 14px;
        }

        .sidebar-time-value {
            font-weight: 700;
            font-size: 24px;
            color: #0057ff;
        }

        .sidebar-time-unit {
            font-size: 14px;
            font-weight: 600;
            color: #3498db;
        }

        /* разделитель */
        .sidebar-separator {
            border: none;
            border-top: 1px solid #e6ecfa;
            margin: 14px 0 16px;
        }

        /* цена */
        .sidebar-price-row {
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 4px;
            margin-bottom: 18px;
        }

        .sidebar-price-value {
            font-weight: 700;
            font-size: 24px;
            color: #00a843;
        }

        .sidebar-price-currency {
            font-size: 16px;
            font-weight: 700;
            color: #00b341;
        }

        .sidebar-price-old {
            font-size: 13px;
            color: #b3b8c8;
            text-decoration: line-through;
            margin-left: 6px;
        }

        /* зелёная кнопка "Dalej" внутри контейнера */
        .sidebar-primary-btn {
            margin-top: 4px;
            width: 100%;
            border-radius: 999px;
            padding: 12px 0;
            font-size: 15px;
            font-weight: 700;
            border: none;
            color: #ffffff;
            background: #00b341;
            box-shadow: 0 12px 22px rgba(0, 179, 65, 0.35);
            cursor: pointer;
            transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
        }

        .sidebar-primary-btn:hover {
            background: #009336;
            box-shadow: 0 10px 18px rgba(0, 147, 54, 0.4);
            transform: translateY(-1px);
        }

        .sidebar-primary-btn:active {
            transform: translateY(0);
            box-shadow: 0 6px 12px rgba(0, 147, 54, 0.35);
        }

        /* ===== КАРТОЧКА "WYBÓR USŁUG" ===== */

        .sidebar-services-card {
            background: #fffaf3; /* тёплый светлый как на скрине */
            border-radius: 20px;
            padding: 18px 20px 16px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
            border: 1px solid #f0e0cf;
        }

        .sidebar-services-title {
            margin: 0;
            text-align: center;
            font-size: 18px;
            font-weight: 800;
            color: #222b3c;
        }

        /* синяя полоска под заголовком */
        .sidebar-services-underline {
            margin: 10px auto 14px;
            height: 3px;
            width: 70%;
            border-radius: 999px;
            background: #0086ff;
        }

        /* список выбранных услуг */
        .sidebar-services-list {
            list-style: none;
            margin: 0;
            padding: 0;
            font-size: 14px;
            color: #364055;
        }

        /* примерный вид элементов: слева иконка/название, справа цена */
        .sidebar-services-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 0;
        }

        .sidebar-services-list li i {
            margin-right: 6px;
            color: #0086ff;
        }

        /* ===== КНОПКА "НАЗАД" СНИЗУ ===== */

        .sidebar-bottom {
            margin-top: 4px;
        }

        .sidebar-secondary-btn {
            width: 100%;
            border-radius: 999px;
            padding: 12px 0;
            font-size: 15px;
            font-weight: 600;
            background-color: #ff0000;
            border: 1px solid #d0d5e4;
            color: #ffffff;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .sidebar-secondary-btn:hover {
            background-color: #990000;
        }

        /* ===== АДАПТИВ ===== */

        @media (max-width: 992px) {
            .step3-right {
                flex: 1 1 100%;
                max-width: 100%;
                order: -1; /* на мобиле – как в шаге 1: сначала цена/время */
            }
        }


        <style>
             /* Общий layout step 3 */
         .step3-layout {
             display: flex;
             gap: 24px;
             align-items: flex-start;
         }

        .step3-left {
            flex: 1.4;
        }

        .step3-right {
            flex: 1;
        }

        @media (max-width: 992px) {
            .step3-layout {
                flex-direction: column;
            }
        }

        /* Карточка формы слева */
        .step3-left-card {
            background: #ffffff;
            border-radius: 18px;
            padding: 22px 24px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
        }

        .step3-left-card h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 16px;
            color: #111827;
        }

        .form-grid .row {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

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

        .form-group.form-validation {
            position: relative;
        }

        .form-group label {
            display: block;
            font-size: 0.9rem;
            font-weight: 500;
            margin-bottom: 6px;
            color: #374151;
        }

        /* Инпуты */
        .step-3-input,
        .input-rounded {
            width: 100%;
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid #d1d5db;
            background-color: #f9fafb;
            font-size: 0.95rem;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.08s ease;
        }

        .step-3-input:focus,
        .input-rounded:focus {
            outline: none;
            border-color: #06b6d4;
            box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
            background-color: #ffffff;
        }

        .step-3-input::placeholder,
        .input-rounded::placeholder {
            color: #9ca3af;
        }

        /* Делим поля пополам на десктопе */
        .half-width {
            flex: 1 0 48%;
        }

        @media (max-width: 768px) {
            .half-width {
                flex: 1 0 100%;
            }
        }

        /* Карточки пылесос + животные */
        .extras-row {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .extra-card {
            flex: 1 1 240px;
            display: flex;
            align-items: center;
            padding: 16px 18px;
            border-radius: 14px;
            border: 2px solid #e5e7eb;
            background-color: #ffffff;
            box-shadow: 0 4px 8px rgba(15, 23, 42, 0.05);
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s, transform 0.08s;
        }

        .extra-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
        }

        .extra-card img {
            width: 48px;
            height: 48px;
            margin-right: 14px;
        }

        .extra-card input[type="checkbox"] {
            transform: scale(1.4);
            margin-right: 14px;
            cursor: pointer;
        }

        .extra-card-title {
            font-size: 1rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 4px;
        }

        .extra-card-price {
            font-size: 1.05rem;
            font-weight: 600;
            border-radius: 999px;
            padding: 4px 10px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 4px;
        }

        .extra-card-price i {
            font-size: 0.9rem;
        }

        .extra-card-price.vacuum {
            color: #0369a1;
            border: 1px solid #0ea5e9;
            background: #eff6ff;
        }

        .extra-card-price.pets {
            color: #15803d;
            border: 1px solid #22c55e;
            background: #ecfdf3;
        }

        /* Состояние выбранной карточки (меняется JS через inline-стили, но подстрахуемся классом) */
        .extra-card.selected {
            border-color: #0ea5e9;
            background-color: #f0f9ff;
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
        }

        @media (max-width: 768px) {
            .extras-row {
                flex-direction: column;
            }
        }

        /* Оплата – карточки */
        .payment-label {
            font-size: 1rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 8px;
            display: block;
        }

        .payment-method-cards {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 6px;
        }

        @media (min-width: 768px) {
            .payment-method-cards {
                flex-direction: row;
            }
        }

        .payment-card {
            display: flex;
            align-items: center;
            padding: 16px 18px;
            border-radius: 16px;
            border: 1.5px solid #e5e7eb;
            background-color: #ffffff;
            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s, transform 0.08s;
            flex: 1 1 0;
        }

        .payment-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
        }

        .payment-card input[type="radio"] {
            display: none;
        }

        .payment-card .icon-container {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            color: #ffffff;
            font-size: 26px;
        }

        .payment-card.cash .icon-container {
            background: linear-gradient(135deg, #22c55e, #16a34a);
        }

        .payment-card.card .icon-container {
            background: linear-gradient(135deg, #f97316, #facc15);
        }

        .payment-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .payment-title {
            font-size: 1rem;
            font-weight: 600;
            color: #111827;
        }

        .payment-support-icons i {
            font-size: 1.6rem;
        }

        /* Селектed по radio (input:checked + .icon-container ...) */
        .payment-card input[type="radio"]:checked + .icon-container {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
        }

        .payment-card input[type="radio"]:checked + .icon-container + .payment-details .payment-title {
            color: #1d4ed8;
        }

        .payment-card input[type="radio"]:checked ~ .payment-details {
            color: #1d4ed8;
        }

        .payment-card input[type="radio"]:checked ~ .payment-details .payment-support-icons i {
            color: #1f2937;
        }

        /* Промокод красивый */
        #promocodeFormGroup {
            margin-top: 20px;
        }

        .promocode-label {
            font-size: 1rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 8px;
            display: block;
        }

        .promocode-group {
            display: flex;
            gap: 8px;
            align-items: stretch;
        }

        @media (max-width: 576px) {
            .promocode-group {
                flex-direction: column;
            }
        }

        .promocode-input {
            flex: 1;
        }

        .promocode-input input {
            width: 100%;
            padding: 10px 14px;
            border-radius: 999px;
            border: 1px solid #d1d5db;
            background: #f9fafb;
            font-size: 0.95rem;
            transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
        }

        .promocode-input input:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
            background: #ffffff;
        }

        .promocode-apply-btn {
            padding: 0 18px;
            border-radius: 999px;
            border: none;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            background: linear-gradient(135deg, #4f46e5, #06b6d4);
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            transition: opacity 0.15s, transform 0.08s, box-shadow 0.15s;
            box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
        }

        .promocode-apply-btn:hover {
            opacity: 0.95;
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(79, 70, 229, 0.45);
        }

        .promocode-apply-btn:active {
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
        }

        .promo-codes-container {
            margin-top: 14px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .promo-code-card {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px dashed #c4b5fd;
            background: #f5f3ff;
            cursor: pointer;
            transition: background-color 0.18s, border-color 0.18s, transform 0.08s;
        }

        .promo-code-card:hover {
            background-color: #ede9fe;
            border-color: #8b5cf6;
            transform: translateY(-1px);
        }

        .promo-code-card .promo-icon {
            margin-right: 8px;
        }

        .promo-code-text {
            font-weight: 600;
            color: #4c1d95;
            font-size: 0.9rem;
        }

        .promo-code-discount {
            font-size: 0.78rem;
            color: #6b21a8;


        }



        /* Мобильная / планшетная версия – блок с ценой снизу */
        @media (max-width: 992px) {
            .step3-layout {
                display: flex;
                flex-direction: column; /* одна колонка под другой */
            }

            .step3-left {
                order: 1;              /* сначала формы */
            }

            .step3-right {
                order: 2;              /* потом блок с ценой */
                margin-top: 20px;
                width: 100%;/* небольшой отступ сверху */
            }
            .extra-card {
                flex: 0;
                display: flex;
                align-items: center;
                padding: 16px 18px;
                border-radius: 14px;
                border: 2px solid #e5e7eb;
                background-color: #ffffff;
                box-shadow: 0 4px 8px rgba(15, 23, 42, 0.05);
                cursor: pointer;
                transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s, transform 0.08s;
            }
            .payment-method-cards {
                display: flex;
                flex-direction: row;
                gap: 12px;
                margin-top: 6px;
            }
            .step3-layout {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0;
            }
            .sidebar-main-card {
                background: #f4f8ff;
                border-radius: 26px;
                padding: 24px 28px 28px;
                box-shadow: 0 10px 30px rgba(0, 90, 200, 0.12);
                border: 1px solid #e0ebff;
                text-align: center;
                margin-bottom: 30px;
            }
        }
        /* layout внутри карточки */
        .payment-card{
            justify-content: space-between;
            padding: 16px 16px;
            min-height: 72px;
        }

        .pm-left{
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .pm-text{
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .pm-title{
            font-weight: 800;
            font-size: 0.98rem;
            color: #141414;
            line-height: 1.1;
        }

        .pm-subtitle{
            font-size: 0.85rem;
            color: #6b7280;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pm-right{
            display: flex;
            align-items: baseline;
            gap: 10px;
            flex-shrink: 0;
        }

        /* красивая иконка: “стеклянный” круг + блик */
        .pm-icon{
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            position: relative;
            overflow: hidden;

            background: rgba(245, 246, 248, 1);
            border: 1px solid rgba(232, 234, 238, 1);
            box-shadow: 0 10px 22px rgba(16, 24, 40, 0.10);
            transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
        }

        .pm-icon::before{
            content:"";
            position:absolute;
            inset: -40%;
            background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 45%);
            transform: rotate(25deg);
        }

        .pm-icon i{
            font-size: 20px;
            line-height: 1;
        }

        /* плашки-иконки (Visa/MC/ApplePay/GooglePay) */
        .pm-support{
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
            justify-content: center;
        }

        .pm-pill{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;

            height: 24px;          /* ✅ фикс высоты как у маленьких бейджей */
            padding: 0 8px;        /* ✅ вместо больших вертикальных паддингов */

            border-radius: 999px;
            background: #f5f6f8;
            border: 1px solid #e8eaee;

            font-size: 0.75rem;
            font-weight: 700;
            color: #374151;

            line-height: 1;        /* ✅ чтобы ничего не раздувало */
        }

        .pm-pill i{
            font-size: 18px;
        }



        /* бейдж справа */
        .pm-badge{
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 800;
            background: rgba(0,123,255,.10);
            color: #007BFF;
            border: 1px solid rgba(0,123,255,.18);
            margin-top: 8px;
        }

        .pm-badge--muted{
            background: #f5f6f8;
            border: 1px solid #e8eaee;
            color: #6b7280;
        }

        /* галочка справа появляется только на active */
        .pm-check{
            width: 26px;
            height: 26px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            border: 1px solid #e8eaee;
            background: #fff;
            color: #9ca3af;
            transition: transform .12s ease, opacity .12s ease, background .12s ease, color .12s ease;
            opacity: .0;
            transform: scale(.9);
        }

        .payment-card.active .pm-check{
            opacity: 1;
            transform: scale(1);
            background: rgba(0,123,255,.12);
            border-color: rgba(0,123,255,.22);
            color: #007BFF;
        }

        /* цветовые темы иконок по типу */
        .payment-card.cash .pm-icon{ background: rgba(40,167,69,.10); border-color: rgba(40,167,69,.18); }
        .payment-card.cash .pm-icon i{ color: #28a745; }

        .payment-card.card .pm-icon{ background: rgba(0,123,255,.10); border-color: rgba(0,123,255,.18); }
        .payment-card.card .pm-icon i{ color: #007BFF; }

        .payment-card.crypto .pm-icon{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.22); }
        .payment-card.crypto .pm-icon i{ color: #f59e0b; }

        /* hover — чуть более “дорого” */
        .payment-card:hover .pm-icon{
            transform: translateY(-1px);
            box-shadow: 0 14px 28px rgba(16, 24, 40, 0.14);
        }
        .pm-pill--blik{
            padding: 0 8px;      /* такой же как остальные */
        }

        .pm-blik-logo{
            height: 16px!important;        /* ✅ маленький как текст “Visa” */
            width: 34px!important;         /* ✅ фикс ширины */
            display: block;
            object-fit: contain;
        }
        /* мобилка: переносим subtitle на 2 строки и делаем компактнее */
        @media (max-width: 420px){
            .payment-card{ padding: 14px; min-height: 70px; }
            .pm-subtitle{ white-space: normal; }
        }
        @media(max-width: 991px){
            .extras-row{
                flex-direction: column;
            }
        }
        /* container */
        .payment-method-cards{
            display: grid;
            gap: 12px;
        }

        /* card base */
        .payment-card{
            position: relative;
            display: block;
            border: 1px solid rgba(17, 24, 39, 0.10);
            border-radius: 14px;
            background: #fff;
            cursor: pointer;
            user-select: none;
            transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
            overflow: hidden;
        }

        /* hover/active feel */
        .payment-card:hover{
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
            border-color: rgba(17, 24, 39, 0.18);
        }
        .payment-card:active{
            transform: translateY(0);
        }

        /* hide native radio but keep accessible */
        .payment-card > input[type="radio"]{
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: none;
        }

        /* inner clickable area */
        .pm-btn{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 14px 14px;
            min-height: 74px;
        }

        /* left side */
        .pm-left{
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        /* icon block */
        .pm-icon{
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            background: rgba(17, 24, 39, 0.04);
            border: 1px solid rgba(17, 24, 39, 0.06);
        }
        .pm-icon i{
            font-size: 18px;
            color: #111827;
        }

        /* text */
        .pm-text{
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .pm-title{
            font-weight: 800;
            font-size: 0.98rem;
            color: #111827;
            line-height: 1.15;
        }
        .pm-subtitle{
            font-size: 0.86rem;
            color: #6b7280;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* right side */
        .pm-right{
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 0 0 auto;
        }

        /* badges */
        .pm-badge{
            font-size: 0.78rem;
            font-weight: 700;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(17, 24, 39, 0.10);
            background: rgba(17, 24, 39, 0.03);
            color: #111827;
            white-space: nowrap;
        }
        .pm-badge--muted{
            background: rgba(107, 114, 128, 0.08);
            border-color: rgba(107, 114, 128, 0.18);
            color: #374151;
        }

        /* check */
        .pm-check{
            width: 26px;
            height: 26px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(17, 24, 39, 0.14);
            background: rgba(17, 24, 39, 0.02);
            color: transparent; /* hidden until selected */
            transition: background .12s ease, border-color .12s ease, color .12s ease;
        }
        .pm-check i{
            font-size: 13px;
        }

        /* selected state */
        .payment-card > input[type="radio"]:checked + .pm-btn{
            box-shadow: inset 0 0 0 2px rgba(17, 24, 39, 0.75);
        }
        .payment-card > input[type="radio"]:checked + .pm-btn .pm-check{
            background: rgba(17, 24, 39, 0.92);
            border-color: rgba(17, 24, 39, 0.92);
            color: #fff;
        }

        /* keyboard focus */
        .payment-card > input[type="radio"]:focus-visible + .pm-btn{
            outline: 3px solid rgba(59, 130, 246, 0.35);
            outline-offset: 2px;
            border-radius: 14px;
        }

        /* support pills row (Visa/Mastercard/ApplePay/BLIK) */
        .pm-support{
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }
        .pm-pill{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 22px;
            padding: 0 8px;
            border-radius: 999px;
            font-size: 0.74rem;
            font-weight: 700;
            color: #111827;
            background: rgba(17, 24, 39, 0.04);
            border: 1px solid rgba(17, 24, 39, 0.08);
        }
        .pm-pill--blik{
            padding: 0 6px;
        }
        .pm-blik-logo{
            height: 14px;
            width: auto;
            display: block;
        }

        /* ====== Responsive ====== */

        /* phones: stack right part under title, allow subtitle wrap */
        @media (max-width: 520px){
            .pm-btn{
                align-items: flex-start;
                padding: 12px 12px;
                min-height: 78px;
            }
            .pm-right{
                margin-left: 56px;          /* aligns under text after icon */
                margin-top: 8px;
                width: calc(100% - 56px);
                justify-content: space-between;
            }
            .pm-subtitle{
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
            }
        }

        /* very small phones */
        @media (max-width: 380px){
            .pm-icon{
                width: 40px;
                height: 40px;
                border-radius: 11px;
            }
            .pm-title{ font-size: 0.95rem; }
            .pm-badge{ font-size: 0.76rem; padding: 6px 9px; }
        }

        /* выделение выбранной карты (обводка) */
        .payment-card > input[type="radio"]:checked + .pm-btn{
            box-shadow: inset 0 0 0 2px var(--pm-accent);
        }

        /* чек-кнопка справа (в выбранном состоянии) */
        .payment-card > input[type="radio"]:checked + .pm-btn .pm-check{
            background: var(--pm-accent);
            border-color: var(--pm-accent);
            color: #fff;
        }

        /* можно чуть подсветить ховер тоже в синеву */
        .payment-card:hover{
            border-color: rgba(106,174,255,.45);
            box-shadow: 0 10px 24px rgba(106,174,255,.12);
        }

        /* фокус с клавиатуры */
        .payment-card > input[type="radio"]:focus-visible + .pm-btn{
            outline: 3px solid var(--pm-accent-soft);
            outline-offset: 2px;
        }

        /* ===== FIX mobile layout (исправляет “вертикальный” текст как на фото) ===== */
        @media (max-width: 520px){
            .pm-btn{
                flex-direction: column;
                align-items: stretch;
            }

            .pm-left{
                width: 100%;
                flex: 1 1 auto;     /* не даём сжимать левую часть до нуля */
                min-width: 0;
            }

            .pm-text{
                flex: 1 1 auto;
                min-width: 0;
            }

            .pm-right{
                width: 100%;
                margin: 10px 0 0 0; /* убираем margin-left из старой версии */
                justify-content: space-between;
            }

            .pm-subtitle{
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
            }
        }
        /* ✅ Галочка (pm-check) всегда видима */
        .pm-check{
            width: 28px;
            height: 28px;
            border-radius: 999px;
            display: grid;
            place-items: center;

            /* всегда видимый круг */
            border: 2px solid rgba(106, 174, 255, 0.55);
            background: #fff;

            /* иконка по умолчанию видна */
            color: rgba(106, 174, 255, 0.9);
        }

        .pm-check i{
            font-size: 13px;
            line-height: 1;
        }

        /* выбранное состояние — заливка + белая галочка */
        .payment-card > input[type="radio"]:checked + .pm-btn .pm-check{
            background: #6aaeff;
            border-color: #6aaeff;
            color: #fff;
        }

        /* чуть усилим видимость на hover */
        .payment-card:hover .pm-check{
            border-color: rgba(106, 174, 255, 0.8);
        }

        /* ✅ принудительно меняем layout на grid (перебивает старое) */
        .service-categories.service-categories--grid{
            display:grid !important;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap:12px;
            justify-items:stretch;
            align-items:center;

            padding:10px 14px;
            background:#fff;
            border:1px solid rgba(0,0,0,.08);
            border-radius:16px;
        }

        /* кнопки ровные, одинаковые */
        .service-categories--grid .category-btn{
            width:100% !important;
            height:40px;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;

            padding:0 14px;
            border:0;
            border-radius:999px;

            background:#f2f5fb;
            color:#1f2d3d;
            font-weight:600;
            font-size:14px;
            cursor:pointer;

            box-shadow:0 2px 8px rgba(0,0,0,.06);
        }

        /* TOP как на скрине */
        .service-categories--grid .category-btn.is-hot.active{
            background:#ffb400;
            color:#1b1b1b;
        }

        /* ✅ “DRY / Pranie…” переносим на 2 строку и центрируем */
        .service-categories--grid .category-btn--second-row{
            grid-column: 2 / 4;         /* занимает 2 колонки по центру */
            justify-self:center;
            max-width:320px;
        }

        /* адаптив */
        @media (max-width: 760px){
            .service-categories.service-categories--grid{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .service-categories--grid .category-btn--second-row{
                grid-column: 1 / -1;     /* на мобилке — вся строка */
                max-width:100%;
            }
        }
        .promo-banner{
            display:flex;
            align-items:stretch;
            gap:14px;

            width:100%;
            padding:14px 16px;
            border-radius:14px;

            background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(99,102,241,.08));
            border: 1px solid rgba(15, 23, 42, 0.10);
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);

            color:#0f172a;
        }

        /* icon */
        .promo-banner__icon{
            width:44px;
            height:44px;
            border-radius:12px;

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

            background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(99,102,241,.18));
            border: 1px solid rgba(15, 23, 42, 0.10);
            flex: 0 0 auto;
            margin-top:1px;
        }

        .promo-banner__icon i{
            font-size:18px;
            opacity:.9;
        }

        /* main row */
        .promo-banner__row{
            flex:1;
            min-width:0;

            display:grid;
            grid-template-columns: 1fr auto;  /* LEFT grows, RIGHT fixed */
            column-gap:16px;
            align-items:center;
        }

        /* left */
        .promo-banner__left{
            min-width:0;
            display:flex;
            flex-direction:column;
            gap:6px;
        }

        .promo-banner__titleLine{
            display:flex;
            align-items:center;
            justify-content:flex-start;
            gap:10px;
            min-width:0;
        }

        .promo-banner__name{
            font-weight:850;
            font-size:15px;
            line-height:1.2;
            letter-spacing:.2px;

            min-width:0;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }

        .promo-banner__badge{
            background: rgba(37, 99, 235, 0.12);   /* мягкий синий фон */
            color: #1d4ed8;                        /* насыщенный синий текст */
            border: 1px solid rgba(37, 99, 235, 0.25);

            font-size:11px;
            font-weight:800;
            letter-spacing:.6px;
            text-transform:uppercase;

            padding:5px 9px;
            border-radius:999px;
        }


        .promo-banner__desc{
            font-size:13px;
            line-height:1.35;
            color: rgba(15, 23, 42, 0.78);

            display:-webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow:hidden;
        }

        .promo-banner__min{
            font-size:12px;
            color: rgba(15, 23, 42, 0.85);
        }

        /* right discount (fixed column, perfect alignment) */
        .promo-banner__right{
            justify-self:end;
            text-align:right;
            white-space:nowrap;

            display:flex;
            align-items:baseline;
            gap:2px;
            font-size: 19px;
            padding-left:16px;
            border-left: 1px solid rgba(15, 23, 42, 0.10);
            color: #2563eb;
        }

        .promo-banner__minus{
            font-weight:900;
            font-size:16px;
            opacity:.85;
        }

        .promo-banner__num{
            font-weight:950;
            font-size:22px;
            letter-spacing:.2px;
        }

        .promo-banner__unit{
            font-weight:850;
            font-size:12px;
            opacity:.8;
            margin-left:2px;
        }

        /* hover */
        .promo-banner:hover{
            border-color: rgba(15, 23, 42, 0.16);
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
        }

        /* Mobile: discount stays right but goes to next row (no ломается) */
        @media (max-width: 520px){
            .promo-banner{
                padding:12px 12px;
                gap:12px;
                border-radius:12px;
            }

            .promo-banner__icon{
                width:40px;
                height:40px;
                border-radius:11px;
            }

            .promo-banner__row{
                grid-template-columns: 1fr;   /* stack */
                row-gap:10px;
                align-items:start;
            }

            .promo-banner__right{
                border-left:none;
                padding-left:0;
                justify-self:end;            /* still right aligned */
            }

            .promo-banner__num{
                font-size:20px;
            }
        }

        /* ===== Mobile optimization ===== */
        @media (max-width: 520px){

            .promo-banner{
                padding:12px 12px;
                gap:10px;
                border-radius:12px;
            }

            .promo-banner__icon{
                width:38px;
                height:38px;
                border-radius:11px;
                margin-top:2px;
            }

            /* вместо 1fr auto делаем полноценную сетку с 2 строками */
            .promo-banner__row{
                display:grid;
                grid-template-columns: 1fr auto;   /* скидка справа */
                grid-template-rows: auto auto auto;
                column-gap:10px;
                row-gap:6px;
                align-items:start;
            }

            /* Левый блок не "центруется", а нормально занимает место */
            .promo-banner__left{
                grid-column: 1 / 2;
                grid-row: 1 / 4;
                gap:6px;
            }

            /* Скидка справа, но внизу — так красивее и не давит на заголовок */
            .promo-banner__right{
                grid-column: 2 / 3;
                grid-row: 3 / 4;
                align-self:end;
                justify-self:end;

                border-left:none;
                padding-left:0;
            }

            /* Заголовок: разрешаем перенос названия (иначе на узких экранах режется) */
            .promo-banner__titleLine{
                flex-wrap:wrap;
                gap:8px;
            }

            .promo-banner__name{
                white-space:normal;   /* важно */
                overflow:visible;
                text-overflow:unset;
                max-width:100%;
                line-height:1.15;
            }

            .promo-banner__desc{
                -webkit-line-clamp: 2;
                font-size:13px;
            }

            .promo-banner__min{
                font-size:12px;
                margin-top:2px;
            }

            .promo-banner__num{
                font-size:20px;
            }
        }

        /* очень узкие телефоны */
        @media (max-width: 360px){
            .promo-banner{ padding:10px 10px; }
            .promo-banner__num{ font-size:18px; }
            .promo-banner__badge{ padding:4px 8px; }
        }

        /* =========================
   PROMO BANNER (ONLY THIS BLOCK)
   ========================= */

        .promo-banner{
            display:flex;
            align-items:stretch;
            gap:14px;

            width:100%;
            padding:14px 16px;
            border-radius:14px;

            background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(99,102,241,.08));
            border: 1px solid rgba(15, 23, 42, 0.10);
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);

            color:#0f172a;
        }

        /* icon */
        .promo-banner__icon{
            width:44px;
            height:44px;
            border-radius:12px;

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

            background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(99,102,241,.18));
            border: 1px solid rgba(15, 23, 42, 0.10);

            flex: 0 0 auto;
            margin-top:1px;
        }

        .promo-banner__icon i{
            font-size:18px;
            opacity:.9;
        }

        /* content area */
        .promo-banner__content{
            flex:1;
            min-width:0;

            display:grid;
            grid-template-columns: 1fr auto;   /* left text + right meta */
            grid-template-rows: auto auto;
            column-gap:16px;
            row-gap:6px;
            align-items:start;
        }

        /* title row: left column */
        .promo-banner__title{
            grid-column: 1 / 2;
            grid-row: 1 / 2;

            display:flex;
            align-items:center;
            gap:10px;
            min-width:0;
        }

        .promo-banner__title > span:first-child{
            font-weight:850;
            font-size:15px;
            line-height:1.2;
            letter-spacing:.2px;

            min-width:0;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }

        /* badge: blue */
        .promo-banner__badge{
            font-size:11px;
            font-weight:800;
            letter-spacing:.6px;
            text-transform:uppercase;

            padding:5px 9px;
            border-radius:999px;

            background: rgba(37, 99, 235, 0.12);
            color: #1d4ed8;
            border: 1px solid rgba(37, 99, 235, 0.25);

            flex: 0 0 auto;
        }

        /* desc: left column, second row */
        .promo-banner__desc{
            grid-column: 1 / 2;
            grid-row: 2 / 3;

            font-size:13px;
            line-height:1.35;
            color: rgba(15, 23, 42, 0.78);

            display:-webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow:hidden;

            min-width:0;
        }

        /* meta: right column spans rows -> discount always right */
        .promo-banner__meta{
            grid-column: 2 / 3;
            grid-row: 1 / 3;

            justify-self:end;
            align-self:center;
            text-align:right;
            white-space:nowrap;

            display:flex;
            align-items:baseline;
            gap:6px;

            padding-left:16px;
            border-left: 1px solid rgba(15, 23, 42, 0.10);

            font-size: 19px;!important;
            color: #2563eb;
        }

        /* make the discount number larger */
        .promo-banner__meta b {
            font-size: 19px;
            font-weight: 700;
            letter-spacing: .2px;
        }

        /* percent / currency text slightly smaller */
        .promo-banner__meta span{
            font-size:16px;
            line-height:1;
        }

        /* dot as a subtle separator inside meta */
        .promo-banner__dot{
            opacity:.55;
            font-weight:700;
        }

        /* hover */
        .promo-banner:hover{
            border-color: rgba(15, 23, 42, 0.16);
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
        }

        /* =========================
           MOBILE OPTIMIZATION
           ========================= */
        @media (max-width: 520px){

            .promo-banner{
                padding:12px 12px;
                gap:10px;
                border-radius:12px;
            }

            .promo-banner__icon{
                width:40px;
                height:40px;
                border-radius:11px;
                margin-top:2px;
            }

            .promo-banner__content{
                grid-template-columns: 1fr auto;
                grid-template-rows: auto auto auto; /* title, desc, meta */
                column-gap:10px;
                row-gap:6px;
            }

            /* allow title to wrap nicely */
            .promo-banner__title{
                grid-column: 1 / 3;
                grid-row: 1 / 2;
                flex-wrap:wrap;
                gap:8px;
            }

            .promo-banner__title > span:first-child{
                white-space:normal;
                overflow:visible;
                text-overflow:unset;
            }

            .promo-banner__desc{
                grid-column: 1 / 3;
                grid-row: 2 / 3;
            }

            /* meta goes bottom-right, no vertical divider on mobile */
            .promo-banner__meta{
                grid-column: 2 / 3;
                grid-row: 3 / 4;

                border-left:none;
                padding-left:0;

                align-self:end;
                justify-self:end;
            }

            .promo-banner__meta span{
                font-size:15px;
            }

            .promo-banner__meta b{
                font-size:20px;
            }
        }

        /* very small phones */
        @media (max-width: 360px){
            .promo-banner{ padding:10px 10px; }
            .promo-banner__meta b{ font-size:18px; }
            .promo-banner__badge{ padding:4px 8px; }
        }

        /* === Better layout for category buttons === */
        .service-categories{
            display:grid;
            grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 ровных кнопок в ряд */
            gap:12px;
            align-items:stretch;
            width:100%;
        }

        /* кнопка занимает всю ячейку и выглядит одинаково */
        .service-categories .category-btn{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:8px;

            padding:10px 12px;
            border-radius:12px;
            white-space:nowrap;
        }

        /* иконка фиксированной ширины -> текст ровно */
        .service-categories .category-btn i{
            width:18px;
            text-align:center;
        }

        /* Если не влазит по ширине (обычно ноут/планшет) */
        @media (max-width: 1050px){
            .service-categories{
                grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 в ряд */
            }
        }

        /* Телефон: 2 колонки, все ровно, без “одиноких” */
        @media (max-width: 560px){
            .service-categories{
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap:10px;
            }

            .service-categories .category-btn{
                padding:11px 10px;
                font-size:14px;
            }
        }

        /* Очень узкие телефоны: 1 колонка (если нужно) */
        @media (max-width: 360px){
            .service-categories{
                grid-template-columns: 1fr;
            }
        }

        /* ===== Categories layout: ровно, без налазов ===== */

        .service-categories{
            display:grid;
            gap:12px;
            width:100%;
            align-items:stretch;
        }

        /* кнопки одинаковые */
        .service-categories .category-btn{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;

            padding:12px 14px;
            min-height:46px;
            border-radius:12px;

            /* чтобы текст НЕ вылазил */
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            min-width:0;
        }

        /* иконка фикс ширины, чтобы ничего не прыгало */
        .service-categories .category-btn i{
            width:18px;
            min-width:18px;
            text-align:center;
            font-size:16px;
            line-height:1;
        }

        /* текст тоже умеет ужиматься */
        .service-categories .category-btn span{
            min-width:0;
            overflow:hidden;
            text-overflow:ellipsis;
        }

        /* ===== Desktop/tablet: 3 сверху + 2 снизу (2 по центру) ===== */
        @media (min-width: 901px){
            .service-categories{
                grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 колонок для точного центрирования */
            }

            /* первые три занимают по 2 колонки = 3 в ряд */
            .service-categories .category-btn:nth-child(1),
            .service-categories .category-btn:nth-child(2),
            .service-categories .category-btn:nth-child(3){
                grid-column: span 2;
            }

            /* последние две по центру: (2..3) и (4..5) */
            .service-categories .category-btn:nth-child(4){
                grid-column: 2 / span 2;
            }
            .service-categories .category-btn:nth-child(5){
                grid-column: 4 / span 2;
            }
        }

        /* ===== Mobile: 2 + 2 + 1 (последняя по центру) ===== */
        @media (max-width: 900px){
            .service-categories{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            /* последняя на всю строку и центр */
            .service-categories .category-btn:nth-child(5){
                grid-column: 1 / -1;
                justify-self:center;
                width: calc(50% - 6px); /* выглядит как две колонки, но по центру */
            }
        }

        /* =========================================
   RESPONSIVE: <=900px => 2-2-1 (last centered)
   <=520px  => 1 column
   (place this at the END of your CSS)
   ========================================= */

        /* <= 900px: 2 columns, last item centered */
        @media (max-width: 900px){
            .service-categories{
                display:grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap:12px;
            }

            .service-categories .category-btn{
                width:100%;
                min-height:64px;                 /* нормальная высота, не огромные */
                display:flex;
                align-items:center;
                justify-content:center;
                flex-direction:column;           /* иконка сверху, текст снизу */
                text-align:center;
                padding:14px 12px;
                gap:8px;

                white-space:normal;              /* чтобы текст не вылазил */
                overflow:hidden;
            }

            .service-categories .category-btn i{
                width:auto;
                min-width:0;
                font-size:22px;
                line-height:1;
            }

            .service-categories .category-btn span{
                max-width:100%;
                overflow:hidden;
                text-overflow:ellipsis;
            }

            /* 5-я кнопка: на всю строку и по центру, но НЕ огромная */
            .service-categories .category-btn:nth-child(5){
                grid-column: 1 / -1;
                justify-self:center;
                width: calc(50% - 6px);          /* ровно как одна колонка из двух */
            }
        }

        /* <= 520px: 1 column, all full width */
        @media (max-width: 520px){
            .service-categories{
                grid-template-columns: 1fr;
            }

            .service-categories .category-btn{
                flex-direction:row;              /* компактнее на телефоне */
                justify-content: center;
                text-align:left;
                min-height:52px;
                padding:14px 16px;
                gap:12px;

                white-space:nowrap;              /* как список */
                text-overflow:ellipsis;
            }

            .service-categories .category-btn i{
                font-size:18px;
                width:20px;
                min-width:20px;
                text-align:center;
            }

            .service-categories .category-btn:nth-child(5){
                grid-column:auto;
                justify-self:stretch;
                width:100%;
            }
        }


        /* Pranie tapicerki active state */
        .service-categories .category-btn[data-category="DRY"].active{
            background: #e11dff;          /* розовый */
            color: #ffffff;               /* белый текст */
            border-color: #e11dff;
        }

        /* иконка тоже белая */
        .service-categories .category-btn[data-category="DRY"].active i{
            color: #ffffff;
        }

        /* ===== Dirt level selection ===== */
        .dirt-level-section {
            margin: 10px 0 22px;
            padding: 14px;
            background: #ffffff;
            border-radius: 14px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.06);
        }

        .dirt-level-title {
            margin: 0 0 14px;
            font-size: 20px;
            font-weight: 700;
            color: #2b2b2b;
            text-align: center;
        }

        .dirt-level-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }

        .dirt-card {
            border: 2px solid #e8e8e8;
            background: #fff;
            border-radius: 14px;
            padding: 0;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s ease;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .dirt-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(0,0,0,0.08);
            border-color: #cfd8dc;
        }

        .dirt-card.active {
            border-color: #2b7fc2;
            box-shadow: 0 0 0 3px rgba(43,127,194,0.14);
        }

        .dirt-card-image-wrap {
            width: 100%;
            height: 140px;
            background: #f6f8fa;
            overflow: hidden;
        }

        .dirt-card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .dirt-card-content {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-height: 110px;
        }

        .dirt-card-title {
            font-size: 15px;
            font-weight: 700;
            color: #1f1f1f;
            line-height: 1.25;
        }

        .dirt-card-desc {
            font-size: 13px;
            color: #666;
            line-height: 1.3;
        }

        .dirt-card-badge {
            margin-top: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: flex-start;
            min-width: 56px;
            padding: 4px 10px;
            border-radius: 999px;
            background: #eef6ff;
            color: #2b7fc2;
            font-weight: 700;
            font-size: 13px;
        }

        /* Tablet */
        @media (max-width: 992px) {
            .dirt-level-cards {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Mobile */
        @media (max-width: 640px) {
            .dirt-level-section {
                padding: 12px;
                margin-bottom: 16px;
            }

            .dirt-level-title {
                font-size: 18px;
                margin-bottom: 12px;
            }

            .dirt-level-cards {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .dirt-card {
                flex-direction: row;
                align-items: stretch;
            }

            .dirt-card-image-wrap {
                width: 110px;
                min-width: 110px;
                height: auto;
            }

            .dirt-card-content {
                min-height: auto;
                padding: 10px;
            }

            .dirt-card-title {
                font-size: 14px;
            }

            .dirt-card-desc {
                font-size: 12px;
            }
        }
        /* Карточка */
        .dirt-card {
            display: flex;
            flex-direction: column;
            align-items: center; /* центрируем всё содержимое */
            text-align: left; /* текст можно оставить слева */
            padding: 0;
            overflow: hidden;
        }

        /* Верхняя зона с картинкой */
        .dirt-card-image-wrap {
            width: 100%;
            height: 110px;              /* уменьшаем высоту блока с картинкой */
            display: flex;
            align-items: center;
            justify-content: center;    /* центр по горизонтали */
            background: #f2f4f7;        /* если нужен светлый фон как на скрине */
            padding: 8px;
            box-sizing: border-box;
        }

        /* Сама картинка */
        .dirt-card-image {
            max-width: 70%;             /* уменьшаем размер */
            max-height: 80px;           /* ограничение по высоте */
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
            margin: 0 auto;             /* дополнительная центровка */
        }

        /* Контент снизу */
        .dirt-card-content {
            width: 100%;
            padding: 14px 16px 16px;
            box-sizing: border-box;
        }
        .dirt-card-image {
            width: 100%;
            height: 200%;
            object-fit: cover;
            display: block;
            margin: 100px 0 0 0;
            max-width: 100%;
            max-height: 200%;
            border-radius: 10px;
        }
        .promo-banner__desc {
            max-height: 48px;      /* ~2-3 строки, подбери */
            overflow-y: auto;
            padding-right: 4px;    /* чтобы текст не прилипал к скроллу */
        }

        /* необязательно: аккуратный скролл */
        .promo-banner__desc::-webkit-scrollbar {
            width: 4px;
        }

        .promo-banner__desc::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.25);
            border-radius: 10px;
        }

        .dirt-card-image-wrap {
            width: 100%;
            height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f2f4f7;
            padding: 8px;
            box-sizing: border-box;
        }
        .dirt-card-image {
            width: 90%;
            height: 100%;
            object-fit: cover;
            display: block;
            margin: -40px 0 0 0;
            max-width: 100%;
            max-height: 200%;
            border-radius: 12px;
            margin-top: 7px;
        }

        /* ===== Floating help button ===== */
        .help-fab{
            position:fixed;
            left:24px;
            right:auto;
            bottom:max(24px, env(safe-area-inset-bottom));
            z-index:9998;
            border:none;
            border-radius:999px;
            padding:14px 18px;
            font-weight:800;
            background:linear-gradient(135deg, #0b47d4 0%, #2b63f1 100%);
            color:#fff;
            cursor:pointer;
            box-shadow:0 18px 38px rgba(11,71,212,.24);
            display:inline-flex;
            align-items:center;
            gap:10px;
            backdrop-filter:blur(10px);
            transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
        }
        .help-fab:hover{
            transform:translateY(-2px);
            box-shadow:0 24px 46px rgba(11,71,212,.28);
        }
        .help-fab i{
            font-size:18px;
        }
        @media (max-width:520px){
            .help-fab{
                left:16px;
                bottom:max(16px, env(safe-area-inset-bottom));
                width:56px;
                height:56px;
                padding:0;
                border-radius:20px;
                justify-content:center;
            }
            .help-fab span{ display:none; }
        }

        /* ===== Modal ===== */
        .help-modal{ display:none; position:fixed; inset:0; z-index:9999; }
        .help-modal.is-open{ display:block; }
        .help-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }

        .help-modal__dialog{
            position:relative;
            width:min(720px, calc(100% - 24px));
            margin:8vh auto;
            background:#fff;
            border-radius:18px;
            overflow:hidden;
            box-shadow:0 22px 55px rgba(0,0,0,.22);
        }
        @media (max-width:620px){
            .help-modal__dialog{
                width:100%;
                margin:0;
                position:absolute;
                left:0; right:0; bottom:0;
                border-radius:18px 18px 0 0;
                max-height:92vh;
                overflow:auto;
            }
        }

        .help-modal__header{
            padding:16px;
            display:flex;
            justify-content:space-between;
            gap:12px;
            border-bottom:1px solid rgba(0,0,0,.08);
        }
        .help-modal__title{ font-weight:900; font-size:18px; }
        .help-modal__subtitle{ margin-top:4px; font-size:13px; color:#6b7280; }
        .help-modal__close{
            border:none; background:transparent;
            width:40px; height:40px;
            border-radius:12px;
            cursor:pointer;
        }

        .help-form{ padding:16px; }
        .help-row{ display:flex; gap:12px; flex-wrap:wrap; }
        .help-label{ display:flex; flex-direction:column; gap:6px; flex:1 1 260px; margin-bottom:12px; }
        .help-label span{ font-size:13px; font-weight:800; color:#374151; }

        .help-label input, .help-label textarea{
            border:1px solid rgba(17,24,39,.14);
            background:#f9fafb;
            border-radius:12px;
            padding:12px;
            font-size:16px; /* iOS no zoom */
            min-height:46px;
            outline:none;
        }
        .help-label textarea{ min-height:140px; resize:vertical; }

        .help-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
        .help-btn{ border:none; border-radius:999px; padding:12px 14px; font-weight:900; cursor:pointer; min-height:44px; }
        .help-btn.ghost{ background:#fff; border:1px solid rgba(17,24,39,.14); color:#374151; }
        .help-btn.primary{ background:linear-gradient(135deg,#00c853,#00a843); color:#fff; }

        @media (max-width:620px){
            .help-actions{ justify-content:stretch; }
            .help-actions .help-btn{ width:100%; }
        }

        .help-hint{
            margin-top:10px;
            padding:10px 12px;
            border-radius:12px;
            font-weight:800;
            font-size:13px;
        }
        .help-hint.ok{ background:rgba(46,204,113,.14); border:1px solid rgba(46,204,113,.25); color:#1e7e34; }
        .help-hint.err{ background:rgba(231,76,60,.12); border:1px solid rgba(231,76,60,.22); color:#b42318; }

        body.help-modal-open{ overflow:hidden !important; }


        box-sizing: border-box;
    }

    .seo-text {
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 1rem;
        line-height: 1.8;
        color: #333;
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        background-color: #fff;
        border: 8px solid transparent;
        border-image: linear-gradient(90deg, rgba(72, 71, 153, 0.64) 0%, #2b7fc2 52%, #00d4ff 100%);
        border-image-slice: 1;
    }

    .seo-text h3, .seo-text h2 {
        color: #2b7fc2;
    }

    @media (max-width: 768px) {
        .seo-text {
            max-width: 85%;
            padding: 20px 10px; /* Minimal padding on the sides */
            font-size: 0.9rem;
        }
        .seo-text h3, .seo-text h2 {
            font-size: 1.2rem;
        }
        .seo-text ul {
            padding-left: 15px;
        }
    }

    @media (min-width: 769px) and (max-width: 1200px) {
        .seo-text {
            max-width: 80%;
            padding: 25px;
        }
    }

    .seo-text {
        background-color: #fff;
        border: 8px solid transparent;
        border-image: linear-gradient(90deg, rgba(72, 71, 153, 0.64) 0%, #2b7fc2 52%, #00d4ff 100%);
        border-image-slice: 1;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 70%;
        margin: 20px auto;
        padding: 30px;
        line-height: 1.8;
        position: relative;
        overflow: hidden;
    }

    .seo-text h2,
    .seo-text h3 {
        color: #2b7fc2;
        text-align: left;
    }

    .seo-text p,
    .seo-text ul {
        margin-bottom: 14px;
    }

    .seo-text ul:last-child,
    .seo-text p:last-child {
        margin-bottom: 0;
    }

    @media (max-width: 768px) {
        .seo-text {
            max-width: 85%;
            padding: 20px 10px;
            font-size: 0.9rem;
        }

        .seo-text h2,
        .seo-text h3 {
            font-size: 1.2rem;
        }

        .seo-text ul {
            padding-left: 15px;
        }
    }

    .dirt-card-image-wrap {
        width: 100%;
        height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f2f4f7;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .dirt-card-image {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        margin: 0 auto;
        border-radius: 0;
    }

    .dirt-card-content {
        width: 100%;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-height: 110px;
        box-sizing: border-box;
    }

    @media (max-width: 640px) {
        .dirt-card {
            flex-direction: column;
            align-items: stretch;
        }

        .dirt-card-image-wrap {
            width: 100%;
            min-width: 0;
            height: 180px;
        }

        .dirt-card-content {
            min-height: auto;
            padding: 12px;
        }
    }

.dry-addon-limit-note {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(13, 110, 253, 0.16);
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(23, 162, 184, 0.1));
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.dry-addon-limit-note__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.86);
    color: #0b5ed7;
    font-size: 18px;
}

.dry-addon-limit-note__title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b5ed7;
}

.dry-addon-limit-note__text {
    margin-top: 4px;
    color: #334155;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .dry-addon-limit-note {
        padding: 12px 14px;
        border-radius: 14px;
    }
}