/* ==========================
   COMPACT APPLE STYLE
========================== */

*{
    box-sizing:border-box;
}

body {
    margin: 0;
    padding: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    background: #f5f5f7;
    color: #1d1d1f;
    font-size: 15px;
    background: linear-gradient(21deg, rgb(255 128 244) 0%, rgb(255 255 255) 100%);
    /* color: #fff; */
}
/* Блок управления */

.controls{
    max-width:700px;
    margin:0 auto 15px;
    padding:15px;
    background:#fff;
    border:1px solid #e5e5e7;
    border-radius:16px;

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    display:none;
}
.control_2 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}


.control_2 h4 {
    margin: 0px;
    padding: 0px;
    padding-bottom: 16px;
    padding-top: 10px;
    text-align: center;
    font-weight: 300;
    font-size: 15px;
}
.control_2 h4 b{font-style: italic;}


/* поля времени */

.controls > div:not(.weekend-box){
    flex:1;
    min-width:140px;
}

.controls label{
    display:block;
    margin-bottom:5px;
    font-size:13px;
    font-weight:600;
    color:#6e6e73;
}

select{
    width:100%;
    height:42px;
    padding:0 12px;

    border:1px solid #d2d2d7;
    border-radius:10px;

    background:#fff;
    font-size:15px;

    outline:none;
}

select:focus{
    border-color:#0071e3;
}

/* выходной */










.weekend-box {
    width: fit-content;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    align-items: center;
    margin-top: 0px;
}

/* Скрываем radio */
.weekend-box input[type="radio"]{
    display:none;
}

/* Все кнопки */
.weekend-box label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid #dadce0;
    border-radius: 32px;
    background: #fff;
    color: #5f6368;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all .2s ease;
}

/* Наведение */
.weekend-box label:hover{
    background:#f8f9fa;
    border-color:#1a73e8;
}

/* Выбранный день */
.weekend-box input[type="radio"]:checked + label{
    background:#e8f0fe;
    border-color:#1a73e8;
    color:#1a73e8;
    font-weight:600;
}

/* Суббота и воскресенье */
label[for="d6"],
label[for="d7"]{
    color:#e67e22;
    border-color:#f5cba7;
}

/* Наведение на выходные */
label[for="d6"]:hover,
label[for="d7"]:hover{
    background:#fff8f0;
    border-color:#e67e22;
}

/* Выбранные выходные */
#d6:checked + label,
#d7:checked + label{
    background:#fff3e0;
    border-color:#e67e22;
    color:#d35400;
    font-weight:700;
}

/* Текст процентов */
#weekendPercentText{
    margin-left:8px;
    color:#5f6368;
    font-size:14px;
}

@media (max-width:768px){

    .weekend-box{
        width:100%;
        padding:0 10px;
    }

    .weekend-box label{
        flex:1;
        min-width:40px;
        padding:0;
    }

}













/* подсказка */

.controls::before{
    content:"Выберите время «С» и «До». Для выходного дня включите галочку.";
    width:100%;

    padding:10px 12px;

    background:#f6f8fa;
    border:1px solid #e6e8eb;
    border-radius:10px;

    font-size:13px;
    color:#555;
}

/* таблица */

#result{
    max-width:700px;
    margin:auto;
}

#result table{
    width:100%;
    border-collapse:collapse;

    background:#fff;
    border:1px solid #e5e5e7;
    border-radius:16px;
    overflow:hidden;
}

#result table b{color: #118a43;}
#result th{
    background:#fafafa;
    color:#6e6e73;
    font-size:13px;
    font-weight:600;
    text-align:left;

    padding: 6px;
    border-bottom:1px solid #e5e5e7;
}

#result td{
    padding:12px;
    border-bottom:1px solid #efefef;
}

#result tr:last-child td{
    border-bottom:none;
}

/* цена */

.total{
    display:inline-block;

    margin:0;
    padding:5px 10px;

    border-radius:20px;

    background:#f2faf4;
    color:#118a43;

    font-size:14px;
    font-weight:700;
}

/* информация */

 


/* ==========================
   MOBILE
========================== */

@media (max-width:600px){

    body{
        padding:10px;
    }

    .controls{
        padding:12px;
        gap:8px;
    }

    .controls > div:not(.weekend-box){
        width:100%;
        min-width:100%;
    }

    select{
        height:40px;
        font-size:16px; /* чтобы iPhone не зумил */
    }

    #result table{
        font-size:13px;
    }

    #result th,
    #result td{
        padding:10px 8px;
    }

    .summary{
        padding:12px;
        font-size:13px;
    }



    .total{
        font-size:13px;
        padding:4px 8px;
    }
}



.timeline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 3px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 14px;
}

.time-slot {
    /* height: 42px; */
    border: none;
    border-radius: 19px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    /* margin: 0px; */
    /* display: block; */
    /* float: left; */
    padding-top: 5px;
    padding-bottom: 5px;
}

.time-slot.active{
    background: #d2ffd4;
    border-color: #49d735;
}

.time-slot.start,
.time-slot.end{
    background: #51be3c;
    color: #fff;
    border-color: #28981d;
}

footer,.top {
    width: 100%;
    padding-top: 25px;
    padding-bottom: 22px;
    text-align: center;
    color: #ffffff;
    font-size: 11px;
    position: relative;
    z-index: 1999;
    font-weight: 100;
}
footer a,.top a{color: #ffffff;}

.tab_list {
    overflow: auto;
    border: 1px solid #ccc;
}

.logo {
    text-align: center;
    margin: 0 auto 14px;
}

.time-slot.evening.active{
    background:#dfb3ff;
    
}

.time-slot.evening.start,
.time-slot.evening.end{
    background:#950fff;;
    color:#fff;
}


.style_bt1 {
    /* width: 100%; */
    padding: 18px 0;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(214deg, rgb(231 229 48) 21%, rgb(255 0 251) 100%);
    border: none;
    cursor: pointer;
    animation: morphUnique 5s ease-in-out infinite;
    transition: 0.3s ease;
    border-radius: 0px;
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
  }
  
 

  
  /* Ломаная форма с разными углами, но не перегружено */
  @keyframes morphUnique {
    0% {
        clip-path: polygon(
            0% 25%, 10% 10%, 25% 4%, 40% 15%, 55% 5%, 70% 18%, 85% 8%, 100% 20%,
            100% 80%, 85% 90%, 70% 95%, 55% 88%, 40% 98%, 25% 90%, 10% 95%, 0% 75%
        );
    }
  
    50% {
        clip-path: polygon(
            0% 30%, 12% 5%, 28% 12%, 42% 3%, 57% 15%, 72% 2%, 88% 18%, 100% 25%,
            100% 70%, 88% 88%, 72% 92%, 57% 85%, 42% 95%, 28% 90%, 12% 100%, 0% 65%
        );
    }
  
    100% {
        clip-path: polygon(
            0% 25%, 10% 10%, 25% 4%, 40% 15%, 55% 5%, 70% 18%, 85% 8%, 100% 20%,
            100% 80%, 85% 90%, 70% 95%, 55% 88%, 40% 98%, 25% 90%, 10% 95%, 0% 75%
        );
    }
  }





  .loading-overlay{
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(2px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999;
}

.loading-overlay.show{
    display:flex;
}

.loading-box{
    padding:15px 25px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
    font-size:18px;
    font-weight:bold;
}








.contact-error{
    margin-top:5px;
    color:red;
    font-size:14px;
}
  



/* ==========================================
   БЛОК РЕЗУЛЬТАТА
========================================== */

.summary {
    /* background: #fff; */
    border-radius: 16px;
    padding: 20px;
    margin: 20px 0;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .06); */
    padding-top: 0px;
}

/* ==========================================
   ИНФОРМАЦИЯ О ВРЕМЕНИ
========================================== */

.time-preview {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 0px;
}

.time-field label{
    display:block;
    margin-bottom:6px;
    font-size:13px;
    color:#5f6368;
    font-weight:500;
}

.fake-input {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    /* border: 1px solid #dadce0; */
    border-radius: 8px;
    background: #0000001c;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    box-sizing: border-box;
}
/* ==========================================
   СТРОКА КОНТАКТА И КНОПКИ
========================================== */

.contact-row{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.contact-box{
    flex:1;
}

/* ==========================================
   ПОЛЕ ВВОДА
========================================== */

.contact-box input{
    width:100%;
    height:48px;
    padding:0 15px;
    border:1px solid #dadce0;
    border-radius:8px;
    background:#fff;
    color:#202124;
    font-size:16px;
    box-sizing:border-box;
    transition:.2s;
}

.contact-box input::placeholder{
    color:#80868b;
}

.contact-box input:focus{
    outline:none;
    border-color:#1a73e8;
    box-shadow:
        0 0 0 3px rgba(26,115,232,.15);
}

/* ==========================================
   КНОПКА
========================================== */

#sendRequest{
    height:48px;
    min-width:140px;
    padding:0 24px;
    border:none;
    border-radius:8px;
    background:#1a73e8;
    color:#fff;
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:.2s;
}

#sendRequest:hover{
    background:#1557b0;
}

#sendRequest:active{
    transform:translateY(1px);
}

/* ==========================================
   ОШИБКИ
========================================== */

.contact-error{
    margin-top:6px;
    font-size:13px;
    color:#d93025;
}

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

#sendResult{
    margin-top:15px;
}

.success{
    padding:12px 15px;
    border-radius:8px;
    background:#e6f4ea;
    color:#137333;
}

.error{
    padding:12px 15px;
    border-radius:8px;
    background:#fce8e6;
    color:#c5221f;
}

.summary-info {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin: 6px 0 8px;
    font-size: 13px;
    /* color: #5f6368; */
}

.summary-day, .summary-duration {
    padding: 6px 12px;
    /* border-radius: 20px; */
    /* background: #f1f3f4; */
    font-weight: 500;
}


/* ==========================================
   МОБИЛЬНАЯ ВЕРСИЯ
========================================== */

@media (max-width:768px){

    .summary{
        padding:15px;
        border-radius:12px;
    }

    .time-preview{
        grid-template-columns:1fr;
    }

    .contact-row{
        flex-direction:column;
    }

    .contact-box{
        width:100%;
    }

    #sendRequest{
        width:100%;
    }

}


@media (max-width:768px){

    .summary-info{
        flex-direction:column;
        align-items:center;
        gap:8px;
    }

}