/* =========================================
   DekoKZ — запись на живой мастер-класс
   Файл: dkz-live-booking.css
   Версия: 1.1
========================================= */


/* =========================================
   1. Секция
========================================= */

.dkz-live-participation{
    width:100%;
    margin:0;
    padding:56px 36px;
    border-top:1px solid #eeeeee;
    box-sizing:border-box;
}

.dkz-live-participation--light{
    background:#ffffff;
}

.dkz-live-participation--gray{
    background:#faf8fb;
}

.dkz-live-participation--accent{
    background:#f6eef5;
}

.dkz-live-participation__inner{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

.dkz-live-participation .product-card_head{
    margin:0 0 32px;
    text-align:center;
}

.dkz-live-participation .product-card_head h2{
    margin:0;
    text-align:center;
}


/* =========================================
   2. Сетка ближайших групп
========================================= */

.dkz-live-participation__dates{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    width:100%;
    max-width:1100px;
    margin:0 auto 34px;
}


/* =========================================
   3. Карточка даты
========================================= */

.dkz-live-date-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:300px;
    padding:28px;
    background:#ffffff;
    border:1px solid #ece8f0;
    border-radius:14px;
    box-sizing:border-box;
}

.dkz-live-date-card--sold-out{
    opacity:.88;
}

.dkz-live-date-card__label{
    margin:0 0 12px;
    color:#8a6a45;
    font-size:13px;
    font-weight:700;
    line-height:1.3;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.dkz-live-date-card__date{
    margin:0 0 6px;
    font-size:24px;
    font-weight:700;
    line-height:1.2;
}

.dkz-live-date-card__time{
    margin:0 0 18px;
    font-size:18px;
    font-weight:700;
    line-height:1.35;
}

.dkz-live-date-card__price{
    margin:0 0 18px;
}

.dkz-live-date-card__price-label{
    display:block;
    margin:0 0 5px;
    color:#666666;
    font-size:14px;
    line-height:1.4;
}

.dkz-live-date-card__price-value{
    display:block;
    font-size:24px;
    font-weight:700;
    line-height:1.2;
}

.dkz-live-date-card__places{
    margin:0 0 20px;
    color:#666666;
    font-size:15px;
    line-height:1.45;
}

.dkz-live-date-card__places--last{
    color:#c43f72;
    font-weight:700;
}

.dkz-live-date-card__places--sold-out{
    color:#8a3b3b;
    font-weight:700;
}


/* =========================================
   4. Область кнопок карточки
========================================= */

.dkz-live-date-card__actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    margin-top:auto;
}

.dkz-live-date-card__booking{
    display:block;
    width:100%;
}


/* =========================================
   5. Единая геометрия кнопок
========================================= */

.dkz-live-date-card__booking .buy1click-open-button.dkz-live-date-card__button,
.dkz-live-date-card__question,
.dkz-live-date-card__notify,
.dkz-live-option-card em{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:54px !important;
    padding:0 24px !important;
    box-sizing:border-box !important;

    border-radius:999px !important;

    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    text-align:center !important;
    text-decoration:none !important;

    transition:
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .22s ease,
        box-shadow .22s ease !important;
}


/* =========================================
   6. Кнопка «Записаться»
========================================= */

.dkz-live-date-card__booking .buy1click-open-button.dkz-live-date-card__button{
    width:100% !important;
    margin:0 !important;
    gap:8px !important;

    background:#e84f8b !important;
    border:2px solid #e84f8b !important;
    border-radius:999px !important;

    color:#ffffff !important;
    cursor:pointer !important;
}

.dkz-live-date-card__booking .buy1click-open-button.dkz-live-date-card__button:hover{
    background:#d83b78 !important;
    border-color:#d83b78 !important;
    color:#ffffff !important;

    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(232,79,139,.22);
}

.dkz-live-date-card__booking .buy1click-open-button.dkz-live-date-card__button:active{
    transform:translateY(0);
    box-shadow:none;
}

.dkz-live-date-card__booking .buy1click-open-button.dkz-live-date-card__button span{
    color:#ffffff !important;
}

.dkz-live-date-card__booking .buy1click-button__loader{
    flex:0 0 auto !important;
    margin-left:8px !important;
}


/* =========================================
   7. Кнопки «Задать вопрос»
      и «Сообщить о новой группе»
========================================= */

.dkz-live-date-card__question,
.dkz-live-date-card__notify{
    width:100% !important;

    background:#ffffff !important;
    border:2px solid #777be8 !important;
    border-radius:999px !important;

    color:#777be8 !important;
}

.dkz-live-date-card__question:hover,
.dkz-live-date-card__notify:hover{
    background:#777be8 !important;
    border-color:#777be8 !important;
    color:#ffffff !important;

    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(119,123,232,.18);
}

.dkz-live-date-card__question:active,
.dkz-live-date-card__notify:active{
    transform:translateY(0);
    box-shadow:none;
}


/* =========================================
   8. Нет ближайших дат
========================================= */

.dkz-live-participation__no-dates{
    max-width:760px;
    margin:0 auto 28px;
    padding:24px 26px;

    background:#ffffff;
    border:1px solid #ece8f0;
    border-radius:14px;

    color:#666666;
    font-size:16px;
    line-height:1.6;
    text-align:center;
}


/* =========================================
   9. Альтернативные варианты участия
========================================= */

.dkz-live-participation__options{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    width:100%;
    max-width:1100px;
    margin:34px auto 0;
}

.dkz-live-option-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
    min-height:210px;
    padding:28px;

    background:#ffffff;
    border:1px solid #ece8f0;
    border-radius:14px;

    color:inherit !important;
    text-decoration:none !important;

    box-sizing:border-box;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.dkz-live-option-card:hover{
    border-color:#ddd5e5;
    transform:translateY(-3px);
    box-shadow:0 14px 32px rgba(60,45,30,.08);
}

.dkz-live-option-card strong{
    display:block;
    margin:0 0 14px;

    font-size:21px;
    font-weight:700;
    line-height:1.25;
}

.dkz-live-option-card span{
    display:block;
    margin:0 0 22px;

    color:#666666;
    font-size:15px;
    line-height:1.6;
}


/* =========================================
   10. Кнопки альтернативных вариантов
========================================= */

.dkz-live-option-card em{
    width:auto !important;
    min-width:0 !important;
    min-height:44px !important;

    margin-top:auto !important;
    padding:0 22px !important;

    background:#777be8 !important;
    border:2px solid #777be8 !important;
    border-radius:999px !important;

    color:#ffffff !important;
    font-size:15px !important;
    font-style:normal !important;
}

.dkz-live-option-card:hover em{
    background:#676bdc !important;
    border-color:#676bdc !important;
    color:#ffffff !important;
}


/* =========================================
   11. Планшет
========================================= */

@media (min-width:769px) and (max-width:1100px){

    .dkz-live-participation{
        padding:48px 28px;
    }

    .dkz-live-participation__dates{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .dkz-live-participation__options{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}


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

@media (max-width:768px){

    .dkz-live-participation{
        padding:36px 18px;
    }

    .dkz-live-participation .product-card_head{
        margin-bottom:26px;
    }

    .dkz-live-participation .product-card_head h2{
        font-size:24px;
        line-height:1.25;
    }


    /* Карточки дат */

    .dkz-live-participation__dates{
        grid-template-columns:1fr;
        gap:14px;
        margin-bottom:28px;
    }

    .dkz-live-date-card{
        min-height:0;
        padding:22px;
    }

    .dkz-live-date-card__date{
        font-size:22px;
    }

    .dkz-live-date-card__time{
        font-size:17px;
    }

    .dkz-live-date-card__price-value{
        font-size:22px;
    }


    /* Кнопки карточек дат */

    .dkz-live-date-card__booking .buy1click-open-button.dkz-live-date-card__button,
    .dkz-live-date-card__question,
    .dkz-live-date-card__notify{
        width:100% !important;
        min-height:52px !important;
        padding:0 20px !important;

        border-radius:999px !important;

        font-size:16px !important;
    }


    /* Сообщение без дат */

    .dkz-live-participation__no-dates{
        padding:20px;
        font-size:15px;
    }


    /* Альтернативные варианты */

    .dkz-live-participation__options{
        grid-template-columns:1fr;
        gap:14px;
        margin-top:28px;
    }

    .dkz-live-option-card{
        min-height:0;
        padding:22px;
    }

    .dkz-live-option-card strong{
        font-size:19px;
    }

    .dkz-live-option-card span{
        font-size:15px;
    }

    .dkz-live-option-card em{
        width:100% !important;
        min-height:48px !important;
        padding:0 20px !important;

        border-radius:999px !important;

        font-size:16px !important;
    }
}

/* =========================================
   Живой МК: плавная прокрутка к записи
========================================= */

#participation{
    scroll-margin-top:110px;
}

@media (max-width:768px){

    #participation{
        scroll-margin-top:85px;
    }

}