/* ==========================
   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;
}















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

.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 {
    border-radius: 16px;
    /* padding: 20px; */
    /* margin: 20px 0; */
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    /* background: #00000052; */
    padding: 14px;
    box-shadow: 10px 14px 21px #db31ff69;
    background: linear-gradient(277deg, rgb(255 128 244) 0%, rgb(255 255 255 / 20%) 100%);
}

.summary h3 {
    color: #fff;
    font-size: 24px;
    padding: 0px;
    margin: 0px;
    padding-bottom: 27px;
    text-align: center;
    padding-top: 13px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 100;
}
.summary h3 b{font-style: italic;}


.summary .info_send{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #fff;
    background: #ccc;
    border-radius: 9px;

}
/* ==========================================
   БЛОК ВРЕМЕНИ (ОСТАВЛЯЕМ КАК ЕСТЬ)
========================================== */

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

.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-radius: 8px;
    background: #0000001c;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    box-sizing: border-box;
}

.summary-info {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin: 6px 0 20px;
    font-size: 13px;
}

.summary-day,
.summary-duration {
    padding: 6px 12px;
    font-weight: 500;
}

/* ==========================================
   ФОРМА
========================================== */

#myForm p {
    margin: 0 0 16px;
}

#myForm label {
    display: block;
    font-size: 14px;
    color: #fff;
}

#myForm input[type="text"],
#myForm textarea {
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
}

#myForm textarea {
    min-height: 120px;
    resize: vertical;
}

#myForm button[type="submit"] {
    height: 48px;
    padding: 0 24px;
    border: none;
    border-radius: 36px;
    background: #1a73e8;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 50%;
}
#myForm button[type="submit"]:hover{
 
    width: 70%;
}

/* ==========================================
   ЧЕКБОКС
========================================== */

#myForm p:last-of-type label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
   
}

#myForm p:last-of-type input[type="checkbox"] {
    margin: 3px 0 0;
    flex-shrink: 0;
}

 



.summary-result {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    
}

.summary-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #0000005c;
}

.summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #3b3b3b;
}

 





.piso-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    justify-content: center;
}

.piso-btn {
    padding: 12px 20px;
    border-radius: 29px;
    background: #0000001a;
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
    text-align: center;
}

.piso-btn:hover {
    background: #555;
}

.piso-btn.active {
    background: #16a34a;
}

.piso-error {
    color: #ff6b6b;
    font-size: 14px;
    margin-top: 8px;
}











@media (max-width:768px){

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

    .weekend-box label {
        flex: 1;
        width: auto;
        padding: 7px;
        height: 30px;
        min-width: auto;
        font-size: 10px;
   
    }

    #result {
        max-width: 90%;
        margin: auto;
        overflow: overlay;
    }

    .summary-result {
  
        gap: 0px;
        margin-bottom: 16px;
 
    }


    .summary-item {
  
        padding: 1px 12px;
    
    }




    .weekend-box {
        
 
        
        gap: 2px;
        
    }





    .summary {
        padding: 15px;
        width: 90%;
    }

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

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

    #myForm button[type="submit"] {
        width: 100%;
    }

}