/* =========================================================
   BOOKING SUCCESS PAGE
========================================================= */

.booking-success-page {
    min-height: 100vh;
    padding: 1.25rem 1.25rem 5rem;
}

.booking-success-container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}


/* =========================================================
   CONTENT
========================================================= */

.booking-success-content {
    width: min(100%, 620px);
    margin: 0 auto;
}


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

.booking-success-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 4.2rem auto 2.2rem;
}


/* =========================================================
   CHECK
========================================================= */

.success-check {
    width: 58px;
    height: 58px;
    margin-bottom: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
    border-radius: 50%;
    font-size: 1.05rem;
}

    .success-check i {
        transform: translateY(1px);
    }


/* =========================================================
   EYEBROW
========================================================= */

.success-eyebrow {
    margin-bottom: .7rem;
    color: var(--color-accent);
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .15em;
    text-transform: uppercase;
}


/* =========================================================
   HEADING
========================================================= */

.booking-success-header h1 {
    margin: 0;
    color: var(--color-primary);
    font-size: clamp(2.45rem, 5vw, 3.45rem);
    font-weight: 800;
    letter-spacing: -.065em;
    line-height: .98;
}

.booking-success-header p {
    max-width: 500px;
    margin: .85rem auto 0;
    color: var(--color-text-soft);
    font-size: .92rem;
    line-height: 1.55;
}


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

.success-booking-card {
    width: 100%;
    padding: 1.4rem;
    background: var(--color-surface);
    border: 1px solid rgba(23, 22, 20, .075);
    border-radius: 15px;
    box-shadow: 0 18px 50px rgba(23, 22, 20, .045);
}


/* =========================================================
   BOOKING REFERENCE
========================================================= */

.success-booking-reference {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

    .success-booking-reference span {
        color: var(--color-text-soft);
        font-size: .65rem;
        font-weight: 600;
    }

    .success-booking-reference strong {
        color: var(--color-primary);
        font-size: .72rem;
        font-weight: 750;
        letter-spacing: .04em;
    }


/* =========================================================
   DIVIDER
========================================================= */

.success-card-divider {
    width: 100%;
    height: 1px;
    margin: 1.25rem 0;
    background: var(--color-border);
}


/* =========================================================
   SERVICE
========================================================= */

.success-service {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.success-service-image {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    overflow: hidden;
    border-radius: 9px;
    background: #f7f5f1;
}

    .success-service-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.success-service-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.success-label {
    margin-bottom: .25rem;
    color: var(--color-text-soft);
    font-size: .61rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.success-service-info h2 {
    margin: 0;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

.success-service-info > span:last-child {
    margin-top: .25rem;
    color: var(--color-text-soft);
    font-size: .7rem;
}


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

.success-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.success-detail {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.success-detail-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    background: rgba(209, 173, 120, .075);
    border-radius: 50%;
    font-size: .72rem;
}

.success-detail > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .16rem;
}

.success-detail span {
    color: var(--color-text-soft);
    font-size: .6rem;
}

.success-detail strong {
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.35;
}


/* =========================================================
   PAYMENT
========================================================= */

.success-payment {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

    .success-payment > div {
        display: flex;
        flex-direction: column;
        gap: .2rem;
    }

        .success-payment > div:last-child {
            text-align: right;
        }

    .success-payment span {
        color: var(--color-text-soft);
        font-size: .62rem;
    }

    .success-payment strong {
        color: var(--color-primary);
        font-size: .82rem;
        font-weight: 700;
    }

    .success-payment > div:first-child strong {
        color: var(--color-accent);
    }


/* =========================================================
   SAVE / SCREENSHOT NOTE
========================================================= */

.success-save-note {
    width: 100%;
    margin-top: 1rem;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    color: var(--color-text-soft);
    background: rgba(209, 173, 120, .045);
    border: 1px solid rgba(209, 173, 120, .12);
    border-radius: 9px;
}

    .success-save-note > i {
        flex: 0 0 auto;
        color: var(--color-accent);
        font-size: .82rem;
    }

    .success-save-note > div {
        display: flex;
        flex-direction: column;
        gap: .12rem;
    }

    .success-save-note strong {
        color: var(--color-primary);
        font-size: .68rem;
        font-weight: 700;
    }

    .success-save-note span {
        font-size: .64rem;
        line-height: 1.4;
    }


/* =========================================================
   HOME BUTTON
========================================================= */

.success-home-button {
    width: min(100%, 420px);
    min-height: 50px;
    margin: 1rem auto 0;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    color: #fff;
    background: var(--color-primary);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease;
}

    .success-home-button:hover {
        color: #fff;
        box-shadow: 0 9px 22px rgba(23, 22, 20, .12);
    }

    .success-home-button i {
        font-size: .7rem;
        transition: transform .2s ease;
    }

    .success-home-button:hover i {
        transform: translateX(3px);
    }


/* =========================================================
   FOOTER NOTE
========================================================= */

.success-footer-note {
    margin: .9rem 0 0;
    color: var(--color-text-soft);
    font-size: .62rem;
    line-height: 1.4;
    text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

    .booking-success-header {
        margin-top: 3rem;
    }

    .success-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .success-detail:last-child {
        grid-column: 1 / -1;
    }
}


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

@media (max-width: 600px) {

    .booking-success-page {
        padding: 1rem .9rem 3.5rem;
    }

    .booking-success-content {
        width: min(100%, 520px);
    }

    .booking-success-header {
        margin: 2.35rem auto 1.8rem;
    }

    .success-check {
        width: 52px;
        height: 52px;
        margin-bottom: 1rem;
        font-size: .95rem;
    }

    .success-eyebrow {
        margin-bottom: .6rem;
        font-size: .6rem;
    }

    .booking-success-header h1 {
        font-size: 2.15rem;
        letter-spacing: -.055em;
    }

    .booking-success-header p {
        margin-top: .65rem;
        font-size: .86rem;
    }


    /* Card */

    .success-booking-card {
        padding: 1.1rem;
        border-radius: 13px;
    }


    /* Service */

    .success-service-image {
        width: 74px;
        height: 74px;
        flex-basis: 74px;
    }


    /* Details */

    .success-details-grid {
        grid-template-columns: 1fr;
        gap: .85rem;
    }

    .success-detail:last-child {
        grid-column: auto;
    }


    /* Payment */

    .success-payment {
        gap: 1rem;
    }

        .success-payment span {
            font-size: .59rem;
        }

        .success-payment strong {
            font-size: .78rem;
        }


    /* Screenshot */

    .success-save-note {
        align-items: flex-start;
        justify-content: flex-start;
        padding: .8rem .9rem;
    }


    /* Button */

    .success-home-button {
        width: 100%;
        min-height: 49px;
    }
}


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

@media (max-width: 380px) {

    .booking-success-header {
        margin-top: 2rem;
    }

        .booking-success-header h1 {
            font-size: 1.95rem;
        }

    .success-booking-card {
        padding: 1rem;
    }

    .success-service-image {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }
}