/* =========================================
   READY SECTION
========================================= */

.ready-section{
    max-width:1152px;
    margin:0 auto;
    padding:63px 0;
   display: flex;
    justify-content: space-between;
    align-items: center;
    gap:64px;
}

.ready-left{
    flex:1;
    max-width:520px;
}



.ready-left h2{
    margin:0 0 10px;
    font-family:Montserrat,sans-serif;
    font-size:60px;
    font-weight:500;
    line-height:1.1;
    color:#111;
}

.ready-left p{
    margin:0;
    font-family:Montserrat,sans-serif;
    font-size:24px;
    font-weight:500;
    color:#222;
    line-height:1.45;
}

/* =========================================
   BOOK BUTTON
========================================= */

.booking-start-card{
    width:320px;
    display:flex;
    justify-content:flex-end;
}

.booking-start-btn{
    width:220px;
    height:56px;
    border:none;
    border-radius:6px;
    background:#2B1611;
    color:#fff;
    font-family:Montserrat,sans-serif;
    font-size:17px;
    font-weight:500;
    cursor:pointer;
    transition:.25s;
}

.booking-start-btn:hover{
    background:#f7f1eb;
    color:#2B1611;
}

/* =========================================
   MODAL
========================================= */

.booking-modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:flex-end;
    align-items:stretch;
    background:rgba(0,0,0,.45);
    z-index:99999;
    padding:0;
}

.booking-modal.active{
    display:flex;
}

.booking-modal-window{
    position:relative;

    width:560px;
    max-width:100%;

    height:100vh;

    margin:0;

    background:#fff;

   border-radius:14px 0 0 14px;

    overflow-y:auto;
    overflow-x:hidden;

    box-shadow:-12px 0 40px rgba(0,0,0,.18);

    animation:bookingSlide .25s ease;

    scrollbar-width:thin;
      scrollbar-color: #e5d9ca #F6F2ED;
}

.booking-modal-window::-webkit-scrollbar{
    width:8px;
}

.booking-modal-window::-webkit-scrollbar-track{
    background:#F6F2ED;
}

.booking-modal-window::-webkit-scrollbar-thumb{
    background:#D8C2A7;
    border-radius:20px;
}

@keyframes bookingFade{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

/* =========================================
   CLOSE
========================================= */

.booking-close{
    position:absolute;
    top:22px;
    right:22px;
    width:28px;
    height:28px;
    padding:0;
    border-radius:24px;
    border: 1px solid #E0CFB6;
    background:none;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:20;
}

/* =========================================
   HEADER
========================================= */

.booking-modal-header{
    padding:28px 28px 22px;
    background:#FAEEDC80;
    border-bottom:1px solid #EFE6DA;
}

.booking-modal-header h2{
    margin:0;
    color:#2B1611;
    font-family:Montserrat,sans-serif;
    font-size:26px;
    font-weight:500;
    line-height:1.2;
}

.booking-modal-header p{
    margin:10px 0 0;
    font-family:Montserrat,sans-serif;
    font-size:14px;
    line-height:1.6;
    color:#726C68;
}

/* =========================================
   BODY
========================================= */

.booking-modal-body{
    padding:24px 28px 30px;
}

/* =========================================
   LOCATION
========================================= */

.booking-location-title{
    margin-bottom:22px;
}

.booking-location-title h3{
    margin:0;
    font-family:Montserrat,sans-serif;
    font-size:19px;
    font-weight:500;
    color:#2B1611;
}

.booking-location-title span{
    display:block;
    margin-top:8px;
    font-family:Montserrat,sans-serif;
    font-size:14px;
    line-height:1.6;
    color:#7B756F;
}

/* =========================================
   LOCATION BUTTONS
========================================= */

.booking-location-buttons{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:28px;
}

.booking-location{
    width:100%;
  min-height: 45px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:14px;
    border:1px solid #DDCCB8;
    border-radius:999px;
    background:#fff;
    color:#2B1611;
    cursor:pointer;
    transition:.25s;
    font-family:Montserrat,sans-serif;
    text-align:left;
}

.booking-location svg{
    width:16px;
    height:16px;
    flex-shrink:0;
}

.booking-location span{
    display:block;
    font-size:15px;
    line-height:1.35;
    font-family:Montserrat,sans-serif;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.booking-location.active{
    background:#2B1611;
    color:#fff;
    border-color:#2B1611;
}

.booking-location:hover{
    border-color:#2B1611;
}

/* =========================================
   COURSE LIST
========================================= */

#courseContainer{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* =========================================
   COURSE CARD
========================================= */

.course-card{
    background:#FAEEDC80;
    border:1px solid #E7D8C7;
    border-radius:10px;
   padding: 15px 16px;
    cursor:pointer;
    transition:.25s;
}

.course-card:hover{
    transform:translateY(-2px);
    border-color:#C9A881;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.course-card.active{
    border-color:#2B1611;
    background:#F7EEE2;
}

.course-card h4{
    margin:0 0 10px;
    font-family:Montserrat,sans-serif;
    font-size:18px;
    font-weight:500;
    color:#2B1611;
    line-height:1.3;
}

.course-card p{
    margin:0;
    font-family:Montserrat,sans-serif;
    font-size:14px;
    line-height:1.7;
    color:#6A6764;
}

/* =========================================
   COURSE ICON (на майбутнє)
========================================= */

.course-card-icon{
    width:44px;
    height:44px;
    border-radius:10px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border:1px solid #E8DACA;
}


.heels-box,
.heels-date{

    background:#FAEEDC80;

    border:1px solid #E6D8C8;

    border-radius:10px;

    padding:18px;

    margin-bottom:18px;

}

.heels-box h3,
.heels-date h3{

    margin:0 0 18px;

    font-size:18px;

    font-weight:500;
 font-family:Montserrat,sans-serif;
}

.heels-level{

    height:48px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border:1px solid #2B1611;

    border-radius:10px;

    padding:0 16px;

    margin-bottom:10px;
    

    cursor:pointer;

    transition:.2s;

 

}

.heels-level.active{

    background:#2B1611;

    color:#fff;

    border-color:#2B1611;

}

.heels-level:hover{

    border-color:#2B1611;

}

.heels-info{

    padding:14px;

    background:#FAEEDC;

    border:1px solid #F0DEC9;

    border-radius:8px;

    font-size:14px;
     font-family:Montserrat,sans-serif;

    line-height:1.6;

    margin-bottom:14px;

}

.heels-select{

    height:48px;

    border:1px solid #2B1611;

    border-radius:4px;

    display:flex;

    align-items:center;

    padding:0 14px;

    background:#fff;

    margin-bottom:12px;

}

.heels-spots{

    display:inline-flex;

    padding:6px 12px;

    border-radius:20px;

    background:#FAEEDC;

    font-size:14px;
     font-family:Montserrat,sans-serif;

}

.booking-next{

    width:100%;

    height:50px;

    border:none;

    border-radius:4px;

    background:#2B1611;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    margin-top:12px;
     font-family:Montserrat,sans-serif;


}

.ready-section strong {
    font-weight: 500;
    font-size: 17px;
     font-family:Montserrat,sans-serif;
}


.review-course{

padding:18px;

border:1px solid #E5D7C6;

border-radius:10px;

background:#FBF6EF;

margin-bottom:18px;

}

.review-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:10px;

}

.review-top h3{

margin:0;
 font-family:Montserrat,sans-serif;
font-size:20px;

font-weight:500;

}

.review-date{

margin-bottom:12px;
 font-family:Montserrat,sans-serif;
font-size:15px;

}

.review-address{

font-size:14px;
 font-family:Montserrat,sans-serif;
color:#555;

}

.review-form{

padding:18px;

border:1px solid #E5D7C6;

border-radius:10px;

background:#FBF6EF;

margin-bottom:18px;

}

.review-form h3{

margin:0 0 18px;
 font-family:Montserrat,sans-serif;
 font-size: 21px;

}

.review-form input{

width:100%;

height:46px;

margin-bottom:12px;

padding: 0 20px;

border:1px solid #DDD;

border-radius:4px;

box-sizing:border-box;

}

.review-form textarea{

width:100%;

height:90px;

padding:12px 20px;

border:1px solid #DDD;

border-radius:4px;

resize:none;

box-sizing:border-box;

}

.review-note{

padding:16px;

border:1px solid #E5D7C6;

border-radius:10px;

background:#FBF6EF;

text-align:center;

font-size:14px;
 font-family:Montserrat,sans-serif;

line-height:1.6;

margin-bottom:20px;

}

.review-address{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:10px;

    font-size:14px;

    color:#4D4D4D;
 font-family:Montserrat,sans-serif;
    line-height:1.5;

}

.review-address svg{

    flex-shrink:0;

    width:14px;

    height:18px;

}

.review-address span{

    display:block;

}

.ready-section .input-error{

    border:1px solid #D93025 !important;

    background:#FFF7F7 !important;

}

.ready-section .field-error{

    margin:-6px 0 12px;

    color:#D93025;

    font-size:12px;

    font-family:Montserrat,sans-serif;

}

.review-form input:focus,
.review-form textarea:focus{

    outline:none;

    border-color:#2B1611;

}



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

@media (max-width:768px){

.ready-section{

    padding:40px 18px;

    display:block;

}

.ready-left{

    max-width:100%;

    text-align:center;

    margin-bottom:26px;

}

.ready-left h2{

    font-size:28px;

    margin-bottom:6px;

}

.ready-left p{

    font-size:16px;

    line-height:1.5;

}

.booking-start-card{

    width:100%;

}

.booking-start-btn{

    width:100%;

    height:52px;

    font-size:17px;

}

.booking-modal{

    align-items:flex-end;

    justify-content:center;

    padding:0;

}

.booking-modal-window{

    width:100%;

    height:92vh;

    border-radius:24px 24px 0 0;

    overflow-y:auto;

}

.booking-modal-header{

    padding:22px 18px 18px;

}

.booking-modal-header h2{

    font-size:18px;

}

.booking-modal-header p{

    font-size:14px;

    margin-top:8px;

}

.booking-close{

    top:14px;

    right:14px;

    width:28px;

    height:28px;

}

.booking-modal-body{

    padding:18px;

}

.booking-location-title h3{

    font-size:16px;

}

.booking-location-title span{

    font-size:13px;

}

.booking-location{

    min-height:48px;

    padding:0 16px;

}

.booking-location span{

    font-size:13px;

    line-height:1.4;

}

.course-card{

    padding:16px;

}

.course-card h4{

    font-size:16px;

}

.course-card p{

    font-size:14px;

    line-height:1.55;

}

.heels-box,
.heels-date{

    padding:14px;

    margin-bottom:14px;

}

.heels-box h3,
.heels-date h3{

    font-size:18px;

    margin-bottom:14px;

}

.heels-level{

    min-height:44px;

    padding:0 12px;

}

.heels-level span{

    font-size:13px;

}

.heels-level strong{

    font-size:14px;

}

.heels-info{

    font-size:13px;

    padding:12px;

}

.heels-select{

    width:100%;

    height:44px;

    font-size:13px;

}

.heels-spots{

    font-size:12px;

}

.private-message{

    width:100%;

    min-height:80px;

    padding:12px;

    box-sizing:border-box;

}

.booking-next{

    height:50px;

    font-size:16px;

}

.review-course{

    padding:16px;

}

.review-top h3{

    font-size:18px;

}

.review-top strong{

    font-size:16px;

}

.review-date{

    font-size:14px;

}

.review-address{

    font-size:13px;

}

.review-form{

    padding:16px;

}

.review-form h3{

    font-size:18px;

}

.review-form input{

    height:46px;

    font-size:14px;

    padding:0 16px;

}

.review-form textarea{

    min-height:90px;

    font-size:14px;

    padding:12px 16px;

}

.review-note{

    font-size:13px;

    line-height:1.6;

}

}


#heelsDateSelect{
    width:100%;
    height:48px;
    border:1px solid #2B1611;
    border-radius:4px;
    padding:0 14px;
    font-family:Montserrat,sans-serif;
    font-size:15px;
    color:#2B1611;
    background:#fff;
}

.heels-select{
    border:1px solid #2B1611;
    border-radius:4px;
    background:#fff;
    margin-bottom:12px;
    overflow:hidden;
    padding:0;
}

.heels-select select{
    width:100%;
    height:48px;
    border:none;
    outline:none;
    background:transparent;
   
    font-family:Montserrat,sans-serif;
    font-size:15px;
    color:#2B1611;
    padding:0 40px 0 14px; /* відступ справа для стрілки */
    cursor:pointer;
}

/* Keep the call-to-action buttons consistent when Elementor adds theme button styles. */
.ready-section button.booking-start-btn,
.ready-section button.booking-next{
    background:#2B1611;
    border-color:#2B1611;
    color:#fff;
}

.ready-section button.booking-start-btn:hover,
.ready-section button.booking-start-btn:focus-visible,
.ready-section button.booking-next:hover,
.ready-section button.booking-next:focus-visible{
    background:#f7f1eb;
    border-color:#2B1611;
    color:#2B1611;
}

.ready-section button.booking-close:hover,
.ready-section button.booking-close:focus-visible{
    background:#f7f1eb;
}

@keyframes bookingSlide{
    from{
        opacity:0;
        transform:translateX(28px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}