/* Подключение шрифта */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

.oc-widget *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100%}
body{font-family:"Roboto",-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;font-size:14px;color:#222;background:#f4f7f9}
.oc-widget{background:#fff;border-radius:10px;box-shadow:0 4px 28px rgba(4,96,136,.12);overflow:hidden;animation:ocFade .45s ease both;max-width:100%}
@keyframes ocFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* HEAD */
.oc-head{background:#ecf7ff;padding:18px 24px 0;border-radius:10px 10px 0 0}
.oc-head-title{font-size:18px;font-weight:700;color:#0d2f5e;margin-bottom:3px}
.oc-head-sub{font-size:12px;color:rgba(13,47,94,.6);margin-bottom:14px}

/* TABS - адаптивные, без скролла */
.oc-tabs{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-start}
@media (max-width: 640px){
    .oc-tabs{gap:4px}
    .oc-tab{flex:1 0 auto;text-align:center;padding:8px 12px;font-size:11px}
}
.oc-tab{flex-shrink:0;padding:9px 16px;font-size:12px;font-weight:600;font-family:"Roboto";border:none;border-radius:6px 6px 0 0;cursor:pointer;background:rgba(13,47,94,.12);color:rgba(13,47,94,.6);transition:background .15s,color .15s;white-space:nowrap;line-height:1}
.oc-tab:hover{background:rgba(13,47,94,.22);color:#0d2f5e}
.oc-tab.on{background:#fff;color:#0d2f5e}

/* BODY */
.oc-body{padding:20px 24px 16px}
@media (max-width: 640px){.oc-body{padding:16px}}
.oc-panel{display:none}
.oc-panel.on{display:block}

/* GRID - полностью адаптивный */
.oc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
@media (max-width: 768px){.oc-grid{gap:14px}}
@media (max-width: 640px){.oc-grid{grid-template-columns:1fr;gap:16px}}

/* FORM */
.oc-fields{display:flex;flex-direction:column;gap:11px}
.oc-lbl{display:block;font-size:11px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.oc-lbl em{color:#e05252;font-style:normal}
.oc-select,.oc-input{width:100%;height:36px;border:1.5px solid #d0dce8;border-radius:6px;padding:0 10px;font-size:13px;color:#222;font-family:"Roboto";outline:none;background:#fff;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.oc-select{background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.oc-select:focus,.oc-input:focus{border-color:#046088;box-shadow:0 0 0 2px rgba(4,96,136,.12);outline:none}

/* SEGMENTS (term) - адаптивные */
.oc-seg-group{display:flex;flex-wrap:wrap;gap:5px}
.oc-seg{flex-shrink:0;padding:6px 11px;font-size:12px;font-weight:600;font-family:"Roboto";border:1.5px solid #d0dce8;border-radius:5px;background:#f0f6fb;color:#666;cursor:pointer;transition:all .13s;line-height:1}
@media (max-width: 480px){.oc-seg{padding:8px 10px;font-size:11px;flex:1 0 auto;text-align:center}}
.oc-seg:hover{background:#ddeef8;border-color:#4998e2;color:#0d2f5e}
.oc-seg.on{background:#046088;border-color:#046088;color:#fff}

/* CHECKBOXES */
.oc-chk-list{display:flex;flex-direction:column;gap:8px}
.oc-chk{display:flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none}
.oc-chk input[type=checkbox]{display:none}
.oc-chk-box{width:16px;height:16px;flex-shrink:0;border:1.5px solid #d0dce8;border-radius:3px;background:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px;transition:all .13s}
.oc-chk input:checked~.oc-chk-box{background:#046088;border-color:#046088}
.oc-chk-box svg{display:none}
.oc-chk input:checked~.oc-chk-box svg{display:block}
.oc-chk-text strong{font-size:12px;color:#222;display:block;font-weight:600;line-height:1.3}
.oc-chk-text em{font-size:11px;color:#2a9d5c;font-style:normal;display:block;margin-top:1px}

/* BUTTONS - адаптивные */
.oc-btn-row{display:flex;gap:8px;margin-top:2px;flex-wrap:wrap}
@media (max-width: 480px){.oc-btn-row{flex-direction:column}}
.oc-calc-btn{flex:1;height:40px;background:#046088;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:700;font-family:"Roboto";cursor:pointer;transition:background .18s,transform .1s}
.oc-calc-btn:hover{background:#0d2f5e}
.oc-calc-btn:active{transform:scale(.98)}
.oc-order-btn{height:40px;padding:0 14px;background:#fff;color:#046088;border:1.5px solid #046088;border-radius:6px;font-size:13px;font-weight:600;font-family:"Roboto";cursor:pointer;transition:all .15s;white-space:nowrap}
@media (max-width: 480px){.oc-order-btn{width:100%}}
.oc-order-btn:hover{background:#046088;color:#fff}
.oc-note{font-size:10px;color:#bbb;margin-top:5px}

/* RESULT - адаптивный */
.oc-result{background:#f0f6fb;border:1.5px solid #d0dce8;border-radius:8px;padding:16px 18px;display:flex;flex-direction:column;gap:11px;min-height:160px;overflow-x:auto}
@media (max-width: 640px){.oc-result{padding:14px}}
.oc-result.empty{align-items:center;justify-content:center}
.oc-result-placeholder{text-align:center;color:#bbb;font-size:12px;line-height:1.5}
.oc-result-placeholder svg{display:block;margin:0 auto 8px}
.oc-cost-lbl{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.oc-cost-val{font-size:28px;font-weight:700;color:#0d2f5e;line-height:1;word-break:break-word}
@media (max-width: 640px){.oc-cost-val{font-size:24px}}
.oc-cost-val.pulse{animation:ocPulse .35s ease}
@keyframes ocPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.oc-compare{font-size:12px;color:#888;display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.oc-strike{text-decoration:line-through;color:#ccc}
.oc-save-badge{font-size:11px;padding:2px 8px;border-radius:3px;background:#d4f0e2;color:#1a7a48;font-weight:600;white-space:nowrap}
.oc-divider{border:none;border-top:1px solid #d4e2ed;margin:10px 0}
.oc-sect-lbl{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}

/* TABLE - адаптивная, без скролла */
.oc-comp-table{width:100%;border-collapse:collapse;font-size:12px}
.oc-comp-table th{text-align:left;color:#aaa;font-weight:600;font-size:11px;padding:0 0 4px;border-bottom:1px solid #d4e2ed}
.oc-comp-table td{padding:4px 0;border-bottom:1px solid #edf3f8;color:#333;vertical-align:middle}
.oc-comp-table td:first-child{font-size:12px;word-break:break-word}
.oc-comp-table td.u{color:#aaa;font-size:10px;width:50px}
.oc-comp-table td.qty{text-align:right;font-weight:700;color:#0d2f5e;white-space:nowrap;padding-left:8px}
@media (max-width: 480px){
    .oc-comp-table,.oc-comp-table tbody,.oc-comp-table tr,.oc-comp-table td{display:block;width:100%}
    .oc-comp-table thead{display:none}
    .oc-comp-table tr{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #d4e2ed}
    .oc-comp-table td{padding:4px 0;display:flex;justify-content:space-between;align-items:center;border:none}
    .oc-comp-table td:before{content:attr(data-label);font-weight:600;color:#666;margin-right:10px}
    .oc-comp-table td.u{width:auto}
    .oc-comp-table td.qty{text-align:right}
}
.oc-comp-table tr:last-child td{border-bottom:none}

/* LISTS */
.oc-includes{list-style:none;display:flex;flex-direction:column;gap:4px}
.oc-includes li{font-size:12px;color:#444;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.oc-includes li::before{content:'';width:13px;height:13px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6.5' cy='6.5' r='5.75' stroke='%23046088' stroke-width='1.5'/%3E%3Cpath d='M4 6.5L5.8 8.3L9.5 4.5' stroke='%23046088' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;display:block}

/* CTA FORM - адаптивная */
.oc-cta-title{font-size:13px;font-weight:700;color:#0d2f5e;margin-bottom:8px}
.oc-cta-row{display:flex;gap:7px;flex-wrap:wrap}
@media (max-width: 480px){.oc-cta-row{flex-direction:column}}
.oc-phone{flex:1;height:38px;border:1.5px solid #d0dce8;border-radius:6px;padding:0 11px;font-size:13px;font-family:"Roboto";outline:none;color:#222;min-width:0;transition:border-color .15s,box-shadow .15s}
@media (max-width: 480px){.oc-phone{width:100%}}
.oc-phone:focus{border-color:#046088;box-shadow:0 0 0 2px rgba(4,96,136,.12)}
.oc-phone.err{border-color:#e05252;animation:ocShake .3s ease}
@keyframes ocShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.oc-send-btn{height:38px;padding:0 14px;background:#046088;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;font-family:"Roboto";cursor:pointer;white-space:nowrap;transition:background .15s}
@media (max-width: 480px){.oc-send-btn{width:100%}}
.oc-send-btn:hover{background:#0d2f5e}
.oc-legal-txt{font-size:10px;color:#bbb;margin-top:5px}
.oc-success{background:#edfaf2;border:1.5px solid #2a9d5c;border-radius:6px;padding:10px 14px;font-size:12px;color:#1a7a48;font-weight:600;display:none}

/* OTHER PRODUCTS - адаптивные с исправленными попапами */
.oc-other{border-top:1px solid #edf1f5;padding:12px 24px 16px}
@media (max-width: 640px){.oc-other{padding:12px 16px}}
.oc-other-title{font-size:11px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.oc-cats{display:flex;flex-wrap:wrap;gap:6px;position:relative}
.oc-cat{position:relative}

/* Кнопка категории */
.oc-cat-btn{padding:6px 13px;font-size:12px;font-weight:600;font-family:"Roboto";border:1.5px solid #d0dce8;border-radius:20px;background:#fafcfe;color:#555;cursor:pointer;transition:all .13s;display:flex;align-items:center;gap:5px;white-space:nowrap;line-height:1}
@media (max-width: 480px){.oc-cat-btn{white-space:normal;text-align:center}}
.oc-cat-btn::after{content:'▾';font-size:9px;color:#bbb}
.oc-cat-btn:hover{background:#edf3fb;border-color:#4998e2;color:#0d2f5e}

/* Попап - всегда открывается вверх */
.oc-cat-popup{
    position:absolute;
    bottom:calc(100% + 12px);
    left:0;
    min-width:250px;
    background:#fff;
    border:1.5px solid #d0dce8;
    border-radius:9px;
    box-shadow:0 8px 28px rgba(4,96,136,.16);
    padding:8px 0;
    z-index:200;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:visibility 0.1s linear 0.1s, opacity 0.1s ease, transform 0.1s ease;
    transform:translateY(8px);
}

/* Показываем попап при наведении на кнопку И на сам попап */
.oc-cat:hover .oc-cat-popup,
.oc-cat-popup:hover {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
    transition-delay:0s;
    transition-duration:0.15s;
}

/* Для крайних попапов - выравнивание вправо */
.oc-cat:last-child .oc-cat-popup,
.oc-cat:nth-last-child(2) .oc-cat-popup {
    left: auto;
    right: 0;
}

/* Для мобильных устройств - открытие по клику */
@media (max-width: 640px){
    .oc-cat-popup{
        position:fixed;
        bottom:auto;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        width:calc(100% - 40px);
        max-width:300px;
        max-height:80vh;
        overflow-y:auto;
        visibility:hidden;
        opacity:0;
        transition:visibility 0.1s, opacity 0.1s;
    }
    
    .oc-cat-popup.active{
        visibility:visible;
        opacity:1;
        pointer-events:auto;
    }
    
    .oc-cat-btn.active{
        background:#edf3fb;
        border-color:#4998e2;
        color:#0d2f5e;
    }
}

.oc-popup-title{font-size:10px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:.5px;padding:6px 14px 5px;border-bottom:1px solid #edf1f5;margin-bottom:3px}
.oc-popup-item{display:flex;align-items:center;justify-content:space-between;padding:5px 14px;gap:10px;transition:background .1s;flex-wrap:wrap}
.oc-popup-item:hover{background:#f4f9fd}
.oc-popup-item-name{font-size:12px;color:#333;flex:1;line-height:1.3}
.oc-popup-req{font-size:11px;padding:3px 9px;background:#e8f3fb;color:#046088;font-weight:700;border:none;border-radius:3px;cursor:pointer;font-family:"Roboto";flex-shrink:0;transition:background .12s}
.oc-popup-req:hover{background:#c5dff0}

/* Дополнительные кроссбраузерные фиксы */
input,button,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}
button:focus,input:focus,select:focus,textarea:focus{outline:none}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}
::-webkit-scrollbar-thumb{background:#046088;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#0d2f5e}

/* Скрытие блока OTHER PRODUCTS на мобильных */
@media (max-width: 880px) {
    .oc-other {
        display: none !important;
    }
}

/* Увеличенная высота полей ввода телефона и кнопок ТОЛЬКО для мобильных (меньше 481px) */
@media (max-width: 480px) {
    .oc-phone-large {
        height: 48px !important;
        font-size: 15px !important;
        padding: 0 14px !important;
    }
    
    .oc-calc-btn {
        height: 48px !important;
        font-size: 14px !important;
    }
    
    .oc-send-btn-large {
        height: 48px !important;
        font-size: 14px !important;
        padding: 0 20px !important;
    }
    
    .oc-order-btn {
        height: 48px !important;
        font-size: 14px !important;
    }
}

/* Компактное отображение таблицы в одну строку */
.oc-compact-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.table-row-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    border-bottom: 1px solid #edf3f8;
}

.table-row-compact:last-child {
    border-bottom: none;
}

.row-name {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.row-qty {
    font-size: 13px;
    font-weight: 700;
    color: #0d2f5e;
    white-space: nowrap;
}

/* Адаптация для мобильных (меньше 481px) */
@media (max-width: 480px) {
    .table-row-compact {
        flex-wrap: wrap;
        gap: 4px;
        padding: 10px 0;
    }
    
    .row-name {
        font-size: 13px;
    }
    
    .row-qty {
        font-size: 14px;
    }
}

/* Для экранов от 481px до 640px - стандартные размеры */
@media (min-width: 481px) and (max-width: 640px) {
    .oc-phone-large,
    .oc-calc-btn,
    .oc-send-btn-large,
    .oc-order-btn {
        height: 40px !important;
    }
}

/* Для экранов больше 640px */
@media (min-width: 641px) {
    .oc-phone-large,
    .oc-calc-btn,
    .oc-send-btn-large,
    .oc-order-btn {
        height: 40px !important;
    }
}

/* Принудительное увеличение для мобильных */
@media (max-width: 480px) {
    input.oc-phone,
    input.oc-phone-large,
    .oc-cta-row input,
    .oc-cta-row .oc-phone {
        height: 52px !important;
        min-height: 52px !important;
        font-size: 16px !important;
        line-height: 52px !important;
    }
    
    button.oc-calc-btn,
    .oc-calc-btn,
    .oc-order-btn,
    .oc-send-btn {
        height: 52px !important;
        min-height: 52px !important;
        font-size: 16px !important;
    }
}

/* ФИКСАЦИЯ ВЫСОТЫ БЛОКА */
.oc-widget {
    transition: height 0.2s ease;
}

.oc-body {
    transition: min-height 0.2s ease;
}

@media (min-width: 641px) {
    /* Принудительная фиксация высоты виджета */
    .oc-widget {
        max-height: 920px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .oc-widget::-webkit-scrollbar {
        width: 4px;
    }

    .oc-widget::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .oc-widget::-webkit-scrollbar-thumb {
        background: #046088;
        border-radius: 4px;
    }
}

/* Фиксированная минимальная высота для десктопа */
@media (max-width: 640px) {
    .oc-widget {
        max-height: 100%;
    }
    .oc-panel {
        min-height: 450px;
    }
}

/* Для планшетов */
@media (min-width: 641px) and (max-width: 1024px) {
    .oc-grid {
        min-height: 550px;
        max-height: 920px;
    }
    
    .oc-body {
        min-height: 520px;
        max-height: 920px;
    }
}

/*микроправки*/
.main-promo__top {flex-direction: row;flex-wrap: wrap;justify-content: center;}
.service-block.diagonal .service-block__img {width: 60%;}
.main-promo .service-column {width: 240px;}
.service-block.diagonal .service-block__txt {max-width: 90%;}
.main-promo__top .service-block {height: 50%;margin: 15px 0;min-width: 240px;}
@media (max-width: 1120px) {
    .main-promo .service-column {width: 100%;display: flex;flex-direction: row;justify-content: space-between;}
    .main-promo__top .service-block {height: 100%;width: calc(50% - 15px);}
}
@media (max-width: 769px) {
    .main-promo .service-column {width: 100%;}
    .main-promo__top .service-block {height: 100%; margin: 0;}
}