/* =========================================================
   ARCHER PRASANTA
   CUSTOM BOOKING SYSTEM
========================================================= */

.apb-booking{

    width:100%;

    padding:120px 0 130px;

    background:#05090b;

    color:#fff;

    box-sizing:border-box;

    font-family:Arial, Helvetica, sans-serif;

}


.apb-booking *,
.apb-booking *::before,
.apb-booking *::after{

    box-sizing:border-box;

}


/* =========================================================
   CONTAINER
========================================================= */

.apb-container{

    width:calc(100% - 84px);

    max-width:1200px;

    margin:0 auto;

}


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

.apb-header{

    display:grid;

    grid-template-columns:1.45fr .65fr;

    gap:80px;

    align-items:end;

    margin-bottom:80px;

}


.apb-eyebrow{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

    font-size:9px;

    font-weight:800;

    letter-spacing:2.6px;

    color:rgba(255,255,255,.42);

}


.apb-eyebrow span{

    width:35px;

    height:1px;

    background:#6FEFFF;

}


.apb-header h1{

    margin:0;

    font-size:clamp(55px,6.2vw,84px);

    line-height:.84;

    letter-spacing:-4px;

    font-weight:900;

}


.apb-header h1 strong{

    display:block;

    color:#6FEFFF;

}


.apb-header > p{

    margin:0;

    max-width:380px;

    font-size:11px;

    line-height:1.8;

    color:rgba(255,255,255,.48);

}


/* =========================================================
   FORM
========================================================= */

.apb-form{

    border-top:1px solid rgba(111,239,255,.25);

}


.apb-step{

    display:grid;

    grid-template-columns:70px 1fr;

    gap:35px;

    padding:55px 0;

    border-bottom:1px solid rgba(255,255,255,.10);

}


.apb-step-number{

    font-size:10px;

    font-weight:900;

    letter-spacing:2px;

    color:#6FEFFF;

}


.apb-step-title{

    margin-bottom:28px;

    font-size:9px;

    font-weight:900;

    letter-spacing:2.5px;

    color:rgba(255,255,255,.55);

}


/* =========================================================
   SERVICES
========================================================= */

.apb-services{

    display:grid;

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

    gap:10px;

}


.apb-service{

    cursor:pointer;

}


.apb-service input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}


.apb-service-inner{

    min-height:62px;

    padding:0 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.015);

    transition:
        border-color .3s ease,
        background .3s ease;

}


.apb-service-inner span{

    font-size:11px;

    font-weight:700;

    color:rgba(255,255,255,.72);

}


.apb-service-inner b{

    font-size:18px;

    font-weight:300;

    color:rgba(111,239,255,.55);

}


.apb-service input:checked + .apb-service-inner{

    border-color:#6FEFFF;

    background:rgba(111,239,255,.07);

}


.apb-service input:checked + .apb-service-inner span{

    color:#fff;

}


.apb-service:hover .apb-service-inner{

    border-color:rgba(111,239,255,.55);

}


/* =========================================================
   FIELDS
========================================================= */

.apb-fields{

    display:grid;

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

    gap:25px 20px;

}


.apb-field{

    width:100%;

}


.apb-field label{

    display:block;

    margin-bottom:9px;

    font-size:7px;

    font-weight:900;

    letter-spacing:2px;

    color:rgba(255,255,255,.36);

}


.apb-field input,
.apb-field textarea{

    width:100%;

    border:0;

    border-bottom:1px solid rgba(255,255,255,.17);

    border-radius:0;

    outline:none;

    background:transparent;

    padding:13px 0;

    color:#fff;

    font-family:Arial, Helvetica, sans-serif;

    font-size:13px;

    transition:border-color .3s ease;

}


.apb-field input:focus,
.apb-field textarea:focus{

    border-bottom-color:#6FEFFF;

}


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

    color:rgba(255,255,255,.20);

}


.apb-field textarea{

    resize:vertical;

    min-height:120px;

}


/* =========================================================
   DATE
========================================================= */

.apb-date-area{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:45px;

}


.apb-field input[type="date"]{

    color-scheme:dark;

}


/* =========================================================
   SLOTS
========================================================= */

.apb-slot-area > label{

    display:block;

    margin-bottom:9px;

    font-size:7px;

    font-weight:900;

    letter-spacing:2px;

    color:rgba(255,255,255,.36);

}


.apb-slots{

    display:grid;

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

    gap:10px;

}


.apb-slot{

    min-height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.13);

    background:rgba(255,255,255,.015);

    color:rgba(255,255,255,.65);

    cursor:pointer;

    font-size:9px;

    font-weight:800;

    letter-spacing:1px;

    transition:
        border-color .3s ease,
        background .3s ease,
        color .3s ease;

}


.apb-slot:hover{

    border-color:#6FEFFF;

    color:#fff;

}


.apb-slot.active{

    border-color:#6FEFFF;

    background:rgba(111,239,255,.09);

    color:#6FEFFF;

}


.apb-slot-placeholder{

    grid-column:1 / -1;

    padding:18px;

    border:1px dashed rgba(255,255,255,.12);

    color:rgba(255,255,255,.28);

    font-size:10px;

}


/* =========================================================
   SUBMIT
========================================================= */

.apb-submit-area{

    padding-top:38px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


.apb-note{

    font-size:9px;

    color:rgba(255,255,255,.32);

}


.apb-note span{

    color:#6FEFFF;

    margin-right:6px;

}


#apb-submit{

    min-width:240px;

    height:58px;

    padding:0 20px;

    border:1px solid #6FEFFF;

    background:#6FEFFF;

    color:#041015;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    font-size:8px;

    font-weight:900;

    letter-spacing:1.8px;

    transition:
        background .3s ease,
        color .3s ease;

}


#apb-submit i{

    font-size:18px;

    font-style:normal;

}


#apb-submit:hover{

    background:transparent;

    color:#6FEFFF;

}


#apb-submit.loading{

    opacity:.55;

    pointer-events:none;

}


/* =========================================================
   RESPONSE
========================================================= */

.apb-response{

    display:none;

    margin-top:30px;

    padding:25px;

    border:1px solid rgba(111,239,255,.35);

    background:rgba(111,239,255,.04);

}


.apb-response.show{

    display:block;

}


.apb-response.success{

    color:#6FEFFF;

}


.apb-response.error{

    color:#ff7777;

}


.apb-booking-id{

    display:block;

    margin-top:10px;

    font-size:20px;

    font-weight:900;

    letter-spacing:2px;

}


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

@media(max-width:760px){

    .apb-booking{

        padding:70px 0 80px;

    }


    .apb-container{

        width:calc(100% - 34px);

        max-width:none;

    }


    .apb-header{

        display:block;

        margin-bottom:55px;

    }


    .apb-header h1{

        font-size:48px;

        letter-spacing:-3px;

    }


    .apb-header > p{

        margin-top:30px;

        font-size:10px;

    }


    .apb-step{

        grid-template-columns:35px 1fr;

        gap:15px;

        padding:42px 0;

    }


    .apb-services{

        grid-template-columns:1fr;

    }


    .apb-fields{

        grid-template-columns:1fr;

        gap:22px;

    }


    .apb-date-area{

        grid-template-columns:1fr;

        gap:30px;

    }


    .apb-slots{

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

    }


    .apb-submit-area{

        flex-direction:column;

        align-items:stretch;

    }


    #apb-submit{

        width:100%;

    }

}


@media(max-width:390px){

    .apb-container{

        width:calc(100% - 28px);

    }


    .apb-header h1{

        font-size:43px;

    }

}