/* ===========================================
   Service Cards
=========================================== */

.service-grid {

    display: grid;

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

    gap: 25px;

    margin-top: 25px;

    margin-bottom: 50px;

}

.service-card {

    cursor: pointer;

    position: relative;

}

.service-card input {

    display: none;

}

.service-content {

    padding: 35px;

    border-radius: 22px;

    border: 2px solid var(--color-border);

    background: #fff;

    transition: .35s;

    height: 100%;

}

.service-content h4 {

    margin-bottom: 15px;

    color: var(--color-heading);

}

.service-content p {

    margin: 0;

}

.service-card:hover .service-content {

    transform: translateY(-5px);

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

}

.service-card input:checked+.service-content {

    border-color: var(--color-primary);

    background: #F5FAFF;

    box-shadow: 0 12px 30px rgba(11, 83, 148, .12);

}

@media(max-width:991px) {

    .service-grid {

        grid-template-columns: 1fr;

    }

}



/* ===========================================
   Step Container
=========================================== */

.step-container {

    max-width: 900px;

    margin: 0 auto;

}

.step-header {

    text-align: center;

    margin-bottom: 60px;

}

.step-number {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 40px;

    background: #EEF6FC;

    color: var(--color-primary);

    font-weight: 600;

    margin-bottom: 18px;

    letter-spacing: .08em;

    text-transform: uppercase;

    font-size: .85rem;

}

.step-header h2 {

    margin-bottom: 18px;

}

.form-group {

    margin-bottom: 30px;

}

.form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

    color: var(--color-heading);

}

.form-group label span {

    color: #C62828;

}

.form-text {

    display: block;

    margin-top: 8px;

    color: var(--color-text-light);

    font-size: .9rem;

}

.booking-actions {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 50px;

}

@media(max-width:768px) {

    .booking-actions {

        flex-direction: column-reverse;

        gap: 15px;

    }

    .booking-actions .btn-primary-brand,

    .booking-actions .btn-outline-brand {

        width: 100%;

    }

}



/* ==========================================================
   Review & Submit
========================================================== */

.review-card {

    background: #ffffff;

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

    border-radius: 24px;

    margin-bottom: 35px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);

}

.review-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 28px 35px;

    background: #F8FAFC;

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

}

.review-card-header>div {

    display: flex;

    align-items: center;

    gap: 15px;

}

.review-card-header i {

    font-size: 28px;

    color: var(--color-primary);

}

.review-card-header h4 {

    margin: 0;

}

.review-grid {

    display: grid;

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

    gap: 30px;

    padding: 35px;

}

.review-grid label {

    display: block;

    font-size: .82rem;

    font-weight: 600;

    text-transform: uppercase;

    color: var(--color-text-light);

    margin-bottom: 8px;

    letter-spacing: .08em;

}

.review-grid p {

    margin: 0;

    color: var(--color-heading);

    line-height: 1.7;

}

.full-width {

    grid-column: 1 / -1;

}

.booking-confirmation {

    background: #F8FAFC;

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

    border-radius: 20px;

    padding: 30px;

    margin-top: 40px;

}

.booking-confirmation label {

    display: block;

    margin-bottom: 18px;

    cursor: pointer;

}

.booking-confirmation label:last-child {

    margin-bottom: 0;

}

.edit-step {

    background: none;

    border: none;

    color: var(--color-primary);

    font-weight: 600;

}

@media(max-width:768px) {

    .review-grid {

        grid-template-columns: 1fr;

    }

}











/*=========================================================
    BOOKING PROGRESS
=========================================================*/

.booking-progress-wrapper {

    max-width: 1100px;

    margin: 0 auto 80px;

}

.booking-progress-header {

    text-align: center;

    margin-bottom: 60px;

}

.booking-label {

    display: inline-block;

    padding: 8px 20px;

    background: rgba(13, 76, 146, .08);

    color: var(--color-primary);

    border-radius: 50px;

    font-size: .80rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    margin-bottom: 18px;

}

.booking-progress-header h2 {

    margin-bottom: 18px;

}

.booking-progress-header p {

    max-width: 650px;

    margin: 0 auto;

    color: var(--color-text-light);

}

.booking-progress {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}

.progress-line {

    position: absolute;

    top: 28px;

    left: 8%;

    width: 84%;

    height: 4px;

    background: #E5E7EB;

    border-radius: 20px;

}

.progress-fill {

    width: 0;

    height: 100%;

    background: linear-gradient(90deg,
            var(--color-primary),
            #2A7AD7);

    border-radius: 20px;

    transition: width .45s ease;

}

.progress-step {

    position: relative;

    width: 25%;

    text-align: center;

    z-index: 2;

}

.step-circle {

    width: 58px;

    height: 58px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #ffffff;

    border: 3px solid #D8DEE8;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    transition: .35s;

}

.step-number {

    font-weight: 700;

}

.step-check {

    display: none;

}

.progress-step.active .step-circle {

    background: var(--color-primary);

    border-color: var(--color-primary);

    color: #fff;

    transform: scale(1.08);

    box-shadow: 0 10px 30px rgba(13, 76, 146, .20);

}

.progress-step.completed .step-circle {

    background: #22C55E;

    border-color: #22C55E;

    color: #fff;

}

.progress-step.completed .step-number {

    display: none;

}

.progress-step.completed .step-check {

    display: block;

}

.progress-step h6 {

    font-size: .95rem;

    margin: 0;

    color: var(--color-heading);

}

.progress-step.active h6 {

    color: var(--color-primary);

    font-weight: 700;

}



@media(max-width:768px) {

    .booking-progress {

        flex-direction: column;

        gap: 35px;

    }

    .progress-line {

        display: none;

    }

    .progress-step {

        width: 100%;

        display: flex;

        align-items: center;

        text-align: left;

        gap: 20px;

    }

    .step-circle {

        margin: 0;

        flex-shrink: 0;

    }

    .progress-step h6 {

        margin: 0;

    }

}