/* ===========================================================
   BOOKING / CHECKOUT PAGE
=========================================================== */

.bk-page{

    padding:50px 0 100px;

}

.bk-back-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--red);

    font-weight:600;

    font-size:14px;

    margin-bottom:24px;

}

.bk-back-link:hover{

    color:var(--red-dark);

}

.bk-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:start;

}

/* ===========================
   ALERTS
============================ */

.bk-alert{

    padding:16px 20px;

    border-radius:var(--radius-md);

    font-size:14px;

    margin-bottom:20px;

}

.bk-alert-success{

    background:var(--red-soft);

    color:var(--red-dark);

    font-weight:600;

}

.bk-alert-error{

    background:#fdeceb;

    color:#c0392b;

}

.bk-alert-error ul{

    margin:0 0 10px;

    padding-left:20px;

}

.bk-alert-error a{

    color:#c0392b;

    font-weight:600;

    text-decoration:underline;

}

.bk-alert-info{

    background:#fff4e0;

    color:#8a5a00;

}

.bk-alert-info a{

    color:#8a5a00;

    font-weight:600;

    word-break:break-all;

}

/* ===========================
   DETAILS CARD
============================ */

.bk-card{

    background:var(--white);

    border:1px solid var(--line);

    border-radius:var(--radius-lg);

    overflow:hidden;

}

.bk-card-header{

    display:flex;

    align-items:center;

    gap:14px;

    padding:20px 26px;

    background:var(--cream);

    border-bottom:1px solid var(--line);

}

.bk-step-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:26px;

    height:26px;

    border-radius:50%;

    background:var(--ink);

    color:#fff;

    font-size:13px;

    font-weight:700;

    flex-shrink:0;

}

.bk-card-header h2{

    font-family:'Fraunces',serif;

    font-size:19px;

    font-weight:600;

    color:var(--ink);

}

.bk-card-body{

    padding:26px;

}

.bk-card-subtitle{

    color:var(--ink-soft);

    font-size:14px;

    margin-bottom:14px;

}

.bk-login-prompt{

    font-size:14px;

    color:var(--ink-soft);

    margin-bottom:24px;

    padding-bottom:20px;

    border-bottom:1px solid var(--line);

}

.bk-login-prompt a{

    color:var(--red);

    font-weight:600;

}

.bk-login-prompt.bk-no-border{

    border-bottom:none;

    padding-bottom:0;

    margin-bottom:0;

    margin-top:20px;

    padding-top:20px;

    border-top:1px solid var(--line);

}

/* ===========================
   AUTH PAGES (login / forgot password)
============================ */

.bk-auth-wrap{

    max-width:460px;

    margin:0 auto;

}

.bk-forgot-link{
    text-align:right;
    margin:8px 0 20px;
    font-size:13px;
    line-height:1.4;
}

.bk-forgot-link a{

    color:var(--red);

    font-weight:600;

}

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

.bk-form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;

}

.bk-form-group{
    margin-bottom:20px;
}

.bk-form-group label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:10px;
}

.bk-form-group input{

    width:100%;

    padding:13px 15px;

    border:1px solid var(--line);

    border-radius:8px;

    font-size:14px;

    font-family:'Inter',sans-serif;

    color:var(--ink);

    outline:none;

}

.bk-form-group input:focus{

    border-color:var(--red);

}

.bk-phone-group{

    display:flex;

    align-items:center;

    border:1px solid var(--line);

    border-radius:8px;

    overflow:hidden;

}

.bk-phone-group:focus-within{

    border-color:var(--red);

}

.bk-phone-prefix{

    padding:13px 14px;

    background:var(--cream);

    color:var(--ink-soft);

    font-size:14px;

    font-weight:600;

    border-right:1px solid var(--line);

}

.bk-phone-group input{

    border:none;

    border-radius:0;

    flex:1;

}

.bk-hint{

    display:block;

    color:var(--ink-soft);

    font-size:12px;

    margin-top:6px;

}

.bk-submit-btn{

    width:100%;

    padding:16px;

    background:var(--red);

    color:#fff;

    border:none;

    border-radius:8px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    margin-top:10px;

    transition:.2s;

}

.bk-submit-btn:hover{

    background:var(--red-dark);

}

.bk-submit-btn:disabled{

    background:var(--line);

    color:var(--ink-soft);

    cursor:not-allowed;

}

/* ===========================
   BOOKING SUMMARY SIDEBAR
============================ */

.bk-sidebar{

    position:sticky;

    top:20px;

}

.bk-summary-box{

    background:var(--white);

    border:1px solid var(--line);

    border-radius:var(--radius-lg);

    padding:24px;

    box-shadow:var(--shadow-md);

}

.bk-summary-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:14px;

    margin-bottom:16px;

}

.bk-summary-header h3{

    font-family:'Fraunces',serif;

    font-size:18px;

    font-weight:600;

    color:var(--ink);

    margin-bottom:6px;

}

.bk-nights{

    font-size:13px;

    color:var(--ink-soft);

    font-weight:600;

}

.bk-summary-header img{

    width:64px;

    height:64px;

    object-fit:cover;

    border-radius:8px;

    flex-shrink:0;

}

.bk-summary-row{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    color:var(--ink-soft);

    padding:10px 0;

    border-top:1px solid var(--line);

}

.bk-summary-row i{

    color:var(--red);

    width:16px;

}

.bk-summary-divider{

    color:var(--line);

    margin:0 4px;

}

.bk-price-breakdown{

    margin-top:14px;

    padding-top:14px;

    border-top:1px solid var(--line);

}

.bk-price-row{

    display:flex;

    justify-content:space-between;

    font-size:14px;

    color:var(--ink);

    padding:6px 0;

}

.bk-price-discount{

    color:#1e7e42;

}

.bk-payable-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:14px;

    padding-top:14px;

    border-top:1px solid var(--line);

    font-family:'Fraunces',serif;

    font-size:20px;

    font-weight:600;

    color:var(--ink);

}

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

@media(max-width:992px){

    .bk-layout{

        grid-template-columns:1fr;

    }

    .bk-sidebar{

        position:static;

    }

}

@media(max-width:600px){

    .bk-page{

        padding:30px 0 60px;

    }

    .bk-form-row{

        grid-template-columns:1fr;

        gap:0;

    }

    .bk-card-body{

        padding:20px;

    }
}

/* ===========================================================
   LEGAL PAGES (Privacy Policy, Terms & Conditions)
=========================================================== */

.legal-content{

    color:var(--ink-soft);

    font-size:14px;

    line-height:1.8;

}

.legal-updated{

    font-size:13px;

    color:var(--ink-soft);

    font-style:italic;

    margin-bottom:24px;

}

.legal-content h3{

    font-family:'Fraunces',serif;

    font-size:17px;

    font-weight:600;

    color:var(--ink);

    margin-top:28px;

    margin-bottom:10px;

}

.legal-content h3:first-of-type{

    margin-top:0;

}

.legal-content ul{

    margin:10px 0 16px 22px;

}

.legal-content li{

    margin-bottom:6px;

}

.legal-content a{

    color:var(--red);

    font-weight:600;

}