﻿/* Оформление для информационных страниц */

/* OL для Статей и Новостей */
ol.stat-list {
  list-style-type: none;
  list-style-type: decimal !ie; /*IE 7- hack*/
  margin: 0;
  margin-left: 1em;
  padding: 0;
  counter-reset: li-counter;
}

ol.stat-list > li {
  position: relative;
  margin-bottom: 1.5em;
  padding: 1.5em;
  background-color: #eeeeee;
}

ol.stat-list > li:before {
  position: absolute;
  top: -0.3em;
  left: -0.5em;
  width: 1.8em;
  height: 1.2em;
  font-size: 2em;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  background-color: #92d050;
  transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  z-index: 99;
  overflow: hidden;
  content: counter(li-counter);
  counter-increment: li-counter;
}

/* OL для статей и новостей */

/* Контейнер-плашка для текста с зелёным обрамлением */

.stat-container {
  width: 100%;
  border-top: 1px solid #92d050;
  border-bottom: 1px solid #92d050;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Контейнер-плашка для текста с зелёным обрамлением */


/* Оглавление для статей с привязкой справа */

.oglav {
    float: right;
    background: #ffffff;
    padding: 15px 20px;
    margin: 27px 20px;
    border: 10px solid #92d050;
    
}

/* Оглавление для статей с привязкой справа */

/* Блок с серым фоном */

.gray-note {
    padding-left: 30px;
    padding-right: 30px;
    background: #eeeeee;
    padding-bottom: 40px;
    padding-top: 40px;
    height: auto;
    width: 100%;
}

/* Блок с серым фоном */

/* Столбцы */

ul.col2 {
    -webkit-columns: 200px 2;
    columns: 200px 2;
    -webkit-column-gap: 52.5px;
    column-gap: 52.5px;
    display: block;
    width: 100%;
    
    padding-left: 30px;
    margin: 0 0 6px 0;
    position: relative;
    box-sizing: border-box;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -moz-page-break-inside: avoid;
    break-inside: avoid-column;
    
    height: auto;
    background: none;
    list-style: none;
    margin: 0 0 0 0;
    position: relative;
    padding: 0;
    
  }

/* Столбцы */

/* Цитата с полосой слева */
.quote_art {
color: #639300; text-decoration: none; border-left: 5px solid #92d050; padding: 5px 0 3px 28px;
}
/* Цитата с полосой слева */

/* Плюсы и минусы */
.pros_cons {
    width: 47.5%;
    margin-right: 5%;
    display: block;
    float: left;
    list-style-type: none;
    position: relative;
    box-sizing: border-box;
}

ul.pros li, ul.cons li {
    list-style-type: none;
    position: relative;
    margin-bottom: 12px;
    line-height: 150%;
    padding-left: 12px;
}

ul.pros li:before {
    list-style: none;
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    left: -15px;
    top: 4px;
    background-image: url(/upload/icons-pros-cons.png);
    background-position: center left;
    background-size: 30px;
}

ul.cons li:before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    left: -15px;
    top: 4px;
    background-image: url(/upload/icons-pros-cons.png);
    background-position: center right;
    background-size: 30px;
}
/* Плюсы и минусы */

/* Доработки калькулятора */
.mtop0 { margin-top: 0; }

.calc__section { position: relative; }
.calc__section h2 { margin-top: 10px; display: none; visibility: hidden; }

#mini-calculator .frame .calc__section > div:nth-child(3) > div:nth-child(2), 
#mini-calculator .frame .calc__section > div:nth-child(4), 
#mini-calculator .frame .calc__section > div:nth-child(5), 
#mini-calculator .frame .calc__section > div:nth-child(6),
.calc__section .nw,
.calc__reference-to-full { display: none; }

#mini-calculator .frame .calc__section.show > div:nth-child(3) > div:nth-child(2), 
#mini-calculator .frame .calc__section.show > div:nth-child(4), 
#mini-calculator .frame .calc__section.show > div:nth-child(5), 
#mini-calculator .frame .calc__section.show > div:nth-child(6) { display: block; }

#mini-calculator .calc__section .flex-links { display: flex!important; width: 100%; justify-content: space-between; margin-bottom: 10px; padding-top: 10px; }
#mini-calculator .calc__section .flex-links div,
#mini-calculator .calc__section .flex-links a { font-size: 16px; line-height: 26px; font-weight: 500; color: #4580B4; padding-bottom: 2px; }
#mini-calculator .calc__section .flex-links a.calc-link { display: none; }

#mini-calculator .calc__section .flex-links div { cursor: pointer; border-bottom: 1px dashed #4580B4; }
#mini-calculator .calc__section .flex-links a { text-decoration: none; border-bottom: 1px solid #4580B4; display: none; }
#mini-calculator .calc__section .flex-links div:hover,
#mini-calculator .calc__section .flex-links a:hover { color: #000; border-color: transparent; }

#mini-calculator .calc__group_result { margin-bottom: 0; }

#mini-calculator .frame .calc__section  .calc__group_submit { width: 178px; }
#mini-calculator .frame .calc__section .MainButton { width: 178px; }

#mini-calculator .open-mire { position: relative; }
#mini-calculator .open-more:after { content: ''; background-image: url(/template/site/default/images/arrow.svg); background-repeat: no-repeat; width: 10px; height: 10px; position: absolute; margin: 8px; }
#mini-calculator .show .open-more:after { transform: scaleY(-1); }

/* Для большого калькулятора */
#full-calc .calc__section .flex-links { display: none!important; }
/*
#full-calc .calc__section > div:nth-child(3) > div:nth-child(2), 
#full-calc .calc__section > div:nth-child(4), 
#full-calc .calc__section > div:nth-child(5), 
#full-calc .calc__section > div:nth-child(6) { display: block; }
*/

/* Для модалки */
.modal-body .calc__section { padding: 15px; }
.modal-body .calc__section > div:nth-child(2) > div:nth-child(2),
.modal-body .calc__section > div:nth-child(3),
.modal-body .calc__section > div:nth-child(4) { display: none!important; }
.modal-body .calc__section  .calc__group_submit { width: 130px; }
.modal-body .calc__section .MainButton { width: 130px; }

@media(max-width: 480px) {
	.frame .calc__result,
	.frame .calc__section .MainButton { margin-top: 10px; }
	.calc__form-label,
	.calc__static-info .form-label, 
	.calc__group_static>.calc__static,
	.calc__section .flex-links div, 
	.calc__section .flex-links a{ font-size: 14px; line-height: 18px; }
	.calc__control { width: 70%; }
	.calc__group_static { background-image: none; }
	.calc__inputbox { margin-top: -5px; }
	.form-control { padding: 0 10px; height: 40px; }
	.calc__inputbox { width: 25%; }
	.calc__group_static>.calc__static { text-align: right; max-width: 40%; }
}
@media(min-width: 481px) {
	.frame .calc__section  .calc__group_submit { position: absolute; right: 30px; bottom: 15px; }
	.modal-body .calc__section  .calc__group_submit { position: absolute;  right: 15px; bottom: 5px; }
}
/* END Доработки калькулятора */

.stroke {
    display: flex;
    width: 100vw;
    max-width: 3000px;
    margin: 0 auto;
    overflow: hidden;
}
 
.stroke__item {
    flex-shrink: 0;
    font-size: clamp(1.125rem, 0.8023rem + 1.2064vw, 1.55rem);
    line-height: 1.5;
    font-weight: 900;
    text-transform: uppercase;
    animation: running-animation 20s linear infinite;
    white-space: nowrap;
	background: linear-gradient(to left, #f69ec4, #f9dd94 100%);
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
margin-left:450px;
}
 
@keyframes running-animation {
    0% {
        transform: translateZ(0);
    }
 
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}
/* cookie баннер */

#cookie-consent-banner {
  display: none;
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%); max-width: 500px; width: 90%;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  border-radius: 8px;
  font-size: 14px;
  padding: 1.25rem;
  z-index: 9999;
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
  font-family: sans-serif;
}
#cookie-consent-banner .cookie-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  flex-direction: row;
  flex-wrap: wrap;
  
}
#cookie-consent-banner p {
  margin: 0;
  flex-grow: 1;
  text-align: left;
}
#cookie-consent-banner a {
  color: #ffffff;
  text-decoration: underline;
  font-weight: bold;
}
#cookie-consent-banner .cookie-buttons {
  flex-shrink: 0;
}
#cookie-consent-banner .cookie-buttons button {
  background-color: #31b950;
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
  font-size: calc(14px - 2px);
}

/* новые тарифы */


 .pricing-table {
          
            overflow: visible;
         
            margin-bottom: 40px;
        }

        .table-wrapper {
           overflow-x:hidden;
        }

        .pricing-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .pricing-table thead th {
            background: #2570b1;
            color: white;
            padding: 30px 20px;
            text-align: center;
            font-weight: 500;
            font-size: 1rem !important;
            border-right: 1px solid rgba(255,255,255,0.1);
        }

        .pricing-table thead th:first-child {
            text-align: left !important;
            background: #f4f8fb !important;
            color: #333 !important;
            font-weight: 600 !important;
            font-size: 1rem !important;
        }
		
	.pricing-table	thead th {
    background: #2570b1 !important;
    color: white !important;
    padding: 30px 20px !important;
    text-align: center !important;
    font-weight: 500 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
	font-size: 1rem !important;
	}

        .plan-name {
            font-size: 1.5rem !important;
            font-weight: 700 !important;
            margin-bottom: 8px;
        }

        .plan-desc {
            font-size: 1rem !important;
            opacity: 0.95;
            font-weight: 300 !important;
        }

        .pricing-table tbody tr {
            border-bottom: 1px solid #e8f0f7;
            transition: background 0.3s ease;
        }

        .pricing-table tbody tr:hover {
            background: #f9fbfd;
        }

.pricing-table tbody td small {font-size:85%;}

        .pricing-table tbody td {
            padding: 20px !important;
            text-align: center !important;
            color: #555 !important;
            font-size: 1rem !important;
            font-weight: 400 !important;
        }

        .pricing-table tbody td:first-child {
            text-align: left !important;
            font-weight: 400 !important;
            color: #555 !important;
            background: #f4f8fb !important;
            font-size: 1rem !important;
        }

        .cross {
            color: #ccc;
            font-size: 1.5rem;
        }

        .highlighted-col {
            background: #e8f5e9 !important;
        }

        .pricing-table .price-row td {
            padding: 30px 20px !important;
            font-size: 1.4rem !important;
            font-weight: 700 !important;
            color: #2570b1 !important;
            background: #f4f8fb !important;
            border-top: 2px solid #e8f0f7 !important;
        }

        .pricing-table .price-row td:first-child {
            background: #f4f8fb !important;
            font-weight: 700 !important;
            color: #555 !important;
        }

        .pricing-table .price-row .highlighted-col {
            background: #c8e6c9 !important;
        }

        .price-cell {
            position: relative;
            cursor: help;
        }

        .price-tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 400;
            width: 280px;
            margin-bottom: 10px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            z-index: 10;
            line-height: 1.4;
            text-align: left;
        }

        .price-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: #333;
        }

        .price-cell:hover .price-tooltip {
            opacity: 1;
        }

        .buttons-row td {
            padding: 15px 10px 30px !important;
            background: #f4f8fb !important;
        }

        .buttons-row .highlighted-col {
            background: #e8f5e9 !important;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
        }

        .pricing-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 0.9rem;
            font-family: 'Roboto', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            max-width: 200px;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .pricing-btn-primary {
            background: #2570b1;
            color: white;
        }

        .pricing-btn-primary:hover {
            background: #1d5a8f;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 112, 177, 0.3);
        }

        .pricing-btn-secondary {
            background: white;
            color: #2570b1;
            border: 2px solid #2570b1;
        }

        .pricing-btn-secondary:hover {
            background: #2570b1;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 112, 177, 0.3);
        }

        .icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            vertical-align: middle;
        }

        .icon svg {
            width: 100%;
            height: 100%;
            fill: currentColor;
        }

        .penalty-note {
            display: inline-block;
            margin-top: 8px;
            padding: 4px 10px;
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 4px;
            font-size: 0.8rem;
            color: #856404;
        }

        .features-section {
            background: white;
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }

        .features-title {
            font-size: 1.8rem;
            color: #2570b1;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px;
            background: #f4f8fb;
            border-radius: 8px;
            transition: transform 0.2s ease;
        }

        .feature-item:hover {
            transform: translateX(5px);
        }

        .feature-icon {
            color: #2570b1;
            font-size: 1.2rem;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .feature-text {
            color: #555;
            line-height: 1.5;
        }

        .note {
            text-align: center;
            margin-top: 30px;
            color: #888;
            font-style: italic;
            font-size: 0.9rem;
        }

        @media (max-width: 1024px) {
        
            .plan-name {
                font-size: 1.2rem !important;
                font-weight: 700 !important;
            }

            .plan-desc {
                font-size: 0.8rem !important;
                font-weight: 300 !important;
            }
        }

        @media (max-width: 768px) {
          
		  .table-wrapper {
           overflow-x:auto;
        }
            .pricing-table {
                border-radius: 12px;
            }

            .pricing-table thead th, .pricing-table tbody td {
                padding: 15px 10px !important;
                font-size: 0.9rem !important;
            }

            .plan-name {
                font-size: 1rem !important;
                font-weight: 700 !important;
            }

            .plan-desc {
                font-size: 0.75rem !important;
                font-weight: 300 !important;
            }

            .features-section {
                padding: 25px 20px;
            }

            .features-title {
                font-size: 1.4rem;
            }

            .features-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .pricing-table .price-row td {
                font-size: 1.1rem !important;
                padding: 20px 10px !important;
            }

            .price-tooltip {
                width: 220px;
                font-size: 0.75rem;
                padding: 10px 12px;
            }

            .pricing-btn {
                font-size: 0.85rem;
                padding: 8px 16px;
            }
        }

        @media (max-width: 480px) {
            .pricing-table thead th, .pricing-table tbody td {
                padding: 12px 8px !important;
                font-size: 0.8rem !important;
            }

            .cross {
                font-size: 1.2rem;
            }
        }