/* ==========================================================
   CourseMinute - Booking Form Premium
========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

.cm-booking-container{
    width:100%;
}

.cm-booking-form{

    display:flex;
    flex-direction:column;
    gap:30px;

}

/* ==========================================================
   CARTES
========================================================== */

.cm-card{

    background:#ffffff;

    border:1px solid #e8eef5;

    border-radius:24px;

    padding:35px;

    box-shadow:0 15px 40px rgba(15,23,42,.05);

    transition:.30s ease;

}

.cm-card:hover{

    transform:translateY(-4px);

    box-shadow:0 22px 50px rgba(15,23,42,.08);

}

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

.cm-card-header{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

}

.cm-card-number{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#2563eb;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;

    flex-shrink:0;

    box-shadow:0 10px 20px rgba(37,99,235,.20);

}

.cm-card-header h2{

    margin:0;

    color:#0f172a;

    font-size:28px;

    font-weight:700;

}

.cm-card-header p{

    margin-top:8px;

    color:#64748b;

    font-size:15px;

    line-height:1.7;

}

/* ==========================================================
   GRID
========================================================== */

.cm-form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.cm-field{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.cm-field label{

    font-size:15px;

    font-weight:600;

    color:#334155;

}

/* ==========================================================
   INPUT
========================================================== */

.cm-input{

    display:flex;

    align-items:center;

    gap:15px;

    height:60px;

    border:2px solid #e2e8f0;

    border-radius:16px;

    padding:0 18px;

    background:#ffffff;

    transition:.25s;

}

.cm-input:hover{

    border-color:#cbd5e1;

}

.cm-input:focus-within{

    border-color:#2563eb;

    box-shadow:0 0 0 5px rgba(37,99,235,.10);

}

.cm-input i{

    width:20px;

    text-align:center;

    color:#2563eb;

    font-size:18px;

}

.cm-input input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:16px;

    color:#1e293b;

}

.cm-input input::placeholder{

    color:#94a3b8;

}

/* ==========================================================
   TEXTAREA
========================================================== */

.cm-field textarea{

    width:100%;

    min-height:150px;

    padding:18px;

    border:2px solid #e2e8f0;

    border-radius:16px;

    resize:vertical;

    font-size:15px;

    transition:.25s;

}

.cm-field textarea:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 5px rgba(37,99,235,.10);

}

/* ==========================================================
   BOUTON LOCALISATION
========================================================== */

.cm-location-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:20px;

    height:58px;

    padding:0 26px;

    border:none;

    border-radius:16px;

    background:#2563eb;

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.cm-location-btn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

.cm-location-btn i{

    font-size:17px;

}

/* ==========================================================
   TYPE DE LIVRAISON
========================================================== */

.cm-type-label{

    display:block;

    margin:25px 0 15px;

    font-size:15px;

    font-weight:600;

    color:#334155;

}

.cm-type-buttons{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-bottom:30px;

}

.cm-type-btn{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:110px;

    background:#ffffff;

    border:2px solid #e2e8f0;

    border-radius:18px;

    cursor:pointer;

    transition:.25s;

    color:#334155;

}

.cm-type-btn:hover{

    border-color:#2563eb;

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(37,99,235,.10);

}

.cm-type-btn.active{

    background:#2563eb;

    border-color:#2563eb;

    color:#ffffff;

}

.cm-type-btn i{

    font-size:28px;

    transition:.25s;

}

.cm-type-btn.active i{

    color:#ffffff;

}

.cm-type-btn span{

    font-size:15px;

    font-weight:700;

}

.cm-type-btn::after{

    content:"✓";

    position:absolute;

    top:12px;

    right:12px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#22c55e;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    font-weight:700;

    opacity:0;

    transform:scale(.5);

    transition:.25s;

}

.cm-type-btn.active::after{

    opacity:1;

    transform:scale(1);

}

/* ==========================================================
   RÉSUMÉ
========================================================== */

.cm-summary{

    display:none;

    background:#ffffff;

    border:2px solid #2563eb;

    border-radius:20px;

    padding:28px;

    margin-top:10px;

}

.cm-summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #edf2f7;

    font-size:16px;

    color:#475569;

}

.cm-summary-row:last-child{

    border-bottom:none;

}

.cm-summary-row strong{

    color:#0f172a;

}

.cm-total{

    margin-top:8px;

    padding-top:20px;

    border-top:2px solid #e2e8f0;

    font-size:22px;

    font-weight:700;

}

.cm-total strong{

    color:#2563eb;

    font-size:28px;

}

/* ==========================================================
   BOUTON PRINCIPAL
========================================================== */

.cm-submit-btn{

    width:100%;

    height:64px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 18px 35px rgba(37,99,235,.25);

}

.cm-submit-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 25px 45px rgba(37,99,235,.35);

}

.cm-submit-btn:active{

    transform:scale(.98);

}

.cm-submit-btn i{

    font-size:18px;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes cmFadeUp{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.cm-card{

    animation:cmFadeUp .5s ease;

}

/* ==========================================================
   PLACEHOLDER
========================================================== */

.cm-input input::placeholder,
.cm-field textarea::placeholder{

    color:#94a3b8;

    opacity:1;

}

/* ==========================================================
   AUTOFILL
========================================================== */

.cm-input input:-webkit-autofill,
.cm-input input:-webkit-autofill:hover,
.cm-input input:-webkit-autofill:focus{

    -webkit-box-shadow:0 0 0px 1000px #ffffff inset;
    -webkit-text-fill-color:#0f172a;
    transition:background-color 9999s ease-out 0s;

}

/* ==========================================================
   INPUTS DISABLED
========================================================== */

.cm-input input:disabled,
.cm-field textarea:disabled{

    background:#f8fafc;

    cursor:not-allowed;

    opacity:.75;

}

/* ==========================================================
   SCROLLBAR
========================================================== */

.cm-field textarea::-webkit-scrollbar{

    width:8px;

}

.cm-field textarea::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

.cm-field textarea::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

    .cm-form-grid{

        grid-template-columns:1fr;

    }

    .cm-type-buttons{

        grid-template-columns:1fr;

    }

    .cm-card{

        padding:28px;

    }

    .cm-card-header{

        gap:15px;

    }

    .cm-card-header h2{

        font-size:24px;

    }

}

@media (max-width:768px){

    .cm-card{

        padding:22px;

        border-radius:18px;

    }

    .cm-card-number{

        width:46px;
        height:46px;
        font-size:18px;

    }

    .cm-card-header h2{

        font-size:22px;

    }

    .cm-card-header p{

        font-size:14px;

    }

    .cm-input{

        height:54px;

    }

    .cm-input input{

        font-size:15px;

    }

    .cm-field textarea{

        min-height:120px;

    }

    .cm-location-btn{

        width:100%;

    }

    .cm-submit-btn{

        height:58px;

        font-size:17px;

    }

}

@media (max-width:576px){

    .cm-card{

        padding:18px;

    }

    .cm-card-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .cm-card-number{

        margin-bottom:5px;

    }

    .cm-summary{

        padding:20px;

    }

    .cm-summary-row{

        font-size:15px;

    }

    .cm-total{

        font-size:18px;

    }

    .cm-total strong{

        font-size:24px;

    }

}

/* ==========================================================
   ACCESSIBILITÉ
========================================================== */

.cm-input input:focus-visible,
.cm-field textarea:focus-visible,
.cm-location-btn:focus-visible,
.cm-submit-btn:focus-visible,
.cm-type-btn:focus-visible{

    outline:3px solid rgba(37,99,235,.25);
    outline-offset:2px;

}

/* ==========================================================
   FIN
========================================================== */