/* ==========================================
   TDOGSPH BOOKING UI SYSTEM
   Version 1.0
========================================== */

/* =========================
   BOOKING CARD
========================= */

.booking-card{

    background:var(--surface);

    border-radius:32px;

    padding:36px 42px;

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

    transition:all .35s ease;

}

.booking-card:hover{
    .booking-card .text-center{

    margin-bottom:40px !important;

}

.booking-card h2{

    margin:10px 0 14px;

}

.booking-card .section-description{

    max-width:700px;

    margin:0 auto;

}

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

}

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

.booking-label{

    display:block;

    margin-bottom:12px;

    color:var(--primary);

    font-size:15px;

    font-weight:700;

}

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

.booking-input,
.booking-select,
.booking-textarea{

    border:none !important;

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

    background-image:var(--input-frame);

    background-repeat:no-repeat;

    background-position:center;

    background-size:100% 100%;

    background-color:transparent;

    color:var(--text-primary);

    box-shadow:none;

    transition:var(--transition);

}

.booking-input{

    min-height:var(--form-height);

    padding:18px 26px;

}

.booking-select{

    min-height:var(--form-height);

    padding:18px 60px 18px 26px;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

}

.booking-textarea{

    min-height:180px;

    padding:22px 26px;

    resize:vertical;

}

.booking-input:focus,
.booking-select:focus,
.booking-textarea:focus{

    outline:none;

    background-image:var(--input-frame);

    background-repeat:no-repeat;

    background-position:center;

    background-size:100% 100%;

    background-color:transparent;

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

}
/* ==========================================
   BOOKING SUMMARY
========================================== */

.booking-summary{

    position:sticky;

    top:120px;

}

.summary-card{

    background:beige;

    border-radius:28px;

    padding:32px;

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

    border:1px solid rgba(0,0,0,.05);

}

.summary-card h3{

    color:var(--primary);

    font-size:30px;

    font-weight:800;

    margin-bottom:8px;

}

.summary-subtitle{

    color:var(--text-secondary);

    line-height:1.7;

    margin-bottom:24px;

}

.summary-divider{

    height:1px;

    background:#EFEFEF;

    margin:22px 0;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:14px 0;

}

.summary-item span{

    color:var(--text-secondary);

}

.summary-item strong{

    color:var(--primary);

    text-align:right;

}

.summary-note{

    display:flex;

    gap:16px;

    align-items:flex-start;

    margin-top:20px;

}

.summary-note i{

    color:var(--sand);

    font-size:26px;

}

.summary-note p{

    margin:0;

    color:var(--text-secondary);

    line-height:1.7;

}

@media(max-width:991px){

    .booking-summary{

        position:static;

        margin-top:40px;

    }

}
/* ==========================================
   REVIEW SECTION
========================================== */

.review-box{

    background:#FFFFFF;

    border-radius:24px;

    padding:30px;

    height:100%;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:0 12px 30px rgba(0,0,0,.05);

    transition:all .35s ease;

}

.review-box:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.review-box h4{

    color:var(--primary);

    font-size:24px;

    font-weight:700;

    margin-bottom:24px;

}

.review-list{

    list-style:none;

    margin:0;

    padding:0;

}

.review-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid rgba(0,0,0,.06);

}

.review-list li:last-child{

    border-bottom:none;

}

.review-list span{

    color:var(--text-secondary);

}

.review-list strong{

    color:var(--primary);

    font-weight:700;

}

.form-check{

    background-image:url("../../images/ui/input/gold-luxury6.png");

    background-repeat:no-repeat;

    background-position:center;

    background-size:100% 100%;

    background-color:transparent;

    border:1px solid rgba(212,170,89,.20);

    border-radius:20px;

    padding:22px 24px;

}

.form-check-input{

    cursor:pointer;

}

.form-check-label{

    margin-left:10px;

    color:var(--primary);

    line-height:1.8;

}

.booking-review .btn-primary-custom{

    min-width:240px;

}

.booking-review .btn-outline-custom{

    min-width:180px;

    margin-left:0;

}
.booking-section{

    padding:40px 0;

}

.booking-section:first-of-type{

    padding-top:80px;

}
/* ==========================================
   STEP 2 - STEP 6 ONLY
========================================== */

.booking-step:not([data-step="1"]) .booking-card{

    background:var(--background)!important;

}

/* ==========================================
   GOLD BUTTONS (STEP 2-6)
========================================== */

.booking-step:not([data-step="1"]) .btn-primary,
.booking-step:not([data-step="1"]) .btn-next,
.booking-step:not([data-step="1"]) .btn-submit,
.booking-step:not([data-step="1"]) button[type="submit"]{

    background:var(--yellow)!important;

    color:var(--primary)!important;

    border:none!important;

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

}

.booking-step:not([data-step="1"]) .btn-primary:hover,
.booking-step:not([data-step="1"]) .btn-next:hover,
.booking-step:not([data-step="1"]) .btn-submit:hover,
.booking-step:not([data-step="1"]) button[type="submit"]:hover{

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

    transform:translateY(-2px);

}

/* ==========================================
   STEP 6 SUMMARY CARDS
========================================== */

.booking-step[data-step="6"] .summary-card,
.booking-step[data-step="6"] .review-card,
.booking-step[data-step="6"] .booking-summary-card,
.booking-step[data-step="6"] .summary-item{

    background:var(--yellow)!important;

    color:var(--primary)!important;

    border:none!important;

}
/* ==========================================
   BEIGE CARDS (STEP 2-6)
========================================== */

.booking-card-beige{

    background:var(--background)!important;

}

/* ==========================================
   STEP 6 GOLD CARDS
========================================== */

#booking-review .review-card,
#booking-review .summary-card,
#booking-review .booking-summary-card,
#booking-review .appointment-card,
#booking-review .pet-card,
#booking-review .owner-card,
#booking-review .additional-card{

    background:var(--yellow)!important;

    border:none!important;

    color:var(--primary);

}

/* ==========================================
   GOLD BUTTONS
========================================== */

.btn-next,
.btn-submit,
.btn-confirm,
button[type="submit"]{

    background:var(--yellow)!important;

    color:var(--primary)!important;

    border:none!important;

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

}

.btn-next:hover,
.btn-submit:hover,
.btn-confirm:hover,
button[type="submit"]:hover{

    transform:translateY(-2px);

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

}
/* ==========================================
   STEP 6 PREMIUM REVIEW CARDS
========================================== */

#booking-review .review-box{

    background-image:url("../../images/ui/input/gold-luxury6.png");

    background-repeat:no-repeat;

    background-position:center;

    background-size:100% 100%;

    background-color:transparent;

    border:none;

    border-radius:28px;

    overflow:hidden;

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

    color:var(--primary);

    transition:.35s ease;

}

#booking-review .review-box:hover{

    transform:translateY(-4px);

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

}

#booking-review .review-box h4{

    color:var(--primary);

    font-weight:800;

}

#booking-review .review-box li{

    border-bottom:1px solid rgba(81,50,41,.15);

}

#booking-review .review-box li:last-child{

    border-bottom:none;

}