/*
|--------------------------------------------------------------------------
| Royal Servicess LLC
| Booking Check Circles v1
|--------------------------------------------------------------------------
|
| Normalizes the visual geometry of confirmed/success check icons throughout
| the authenticated booking journey.
|
| Existing component colors, borders and semantic states remain untouched.
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   COMMON CIRCLE GEOMETRY
   ========================================================================== */

.booking-flow-status__mark,
.booking-guided-hold-note__icon,
.checkout-prepared-card__icon,
.booking-flow-step.is-complete
.booking-flow-step__number,
.guided-review-global-progress__step.is-complete
> span:first-child {
    position: relative !important;

    display: inline-grid !important;

    place-items: center !important;

    align-items: center !important;
    justify-items: center !important;

    flex:
        0
        0
        auto !important;

    padding:
        0 !important;

    border-radius:
        999px !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden;

    color:
        inherit;

    /*
     * Remove browser/font-specific positioning of the literal Unicode
     * checkmark. A consistent CSS check is drawn below instead.
     */
    font-size:
        0 !important;

    font-family:
        sans-serif !important;

    font-style:
        normal !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;

    text-align:
        center !important;

    text-indent:
        0 !important;

    vertical-align:
        middle !important;

    transform:
        none !important;
}


/* ==========================================================================
   CONSISTENT DRAWN CHECK
   ========================================================================== */

.booking-flow-status__mark::before,
.booking-guided-hold-note__icon::before,
.checkout-prepared-card__icon::before,
.booking-flow-step.is-complete
.booking-flow-step__number::before,
.guided-review-global-progress__step.is-complete
> span:first-child::before {
    content: "";

    display: block;

    width:
        9px;

    height:
        5px;

    box-sizing:
        border-box;

    border-left:
        2px solid currentColor;

    border-bottom:
        2px solid currentColor;

    transform:
        translateY(-1px)
        rotate(-45deg);

    transform-origin:
        center;
}


/* ==========================================================================
   COMPONENT SIZES
   ========================================================================== */

/*
 * Primary status:
 * Vehicle available / Vehicle temporarily protected.
 */

.booking-flow-status__mark {
    width:
        34px !important;

    height:
        34px !important;

    min-width:
        34px !important;

    min-height:
        34px !important;
}


/*
 * Protected-hold information icon.
 */

.booking-guided-hold-note__icon {
    width:
        30px !important;

    height:
        30px !important;

    min-width:
        30px !important;

    min-height:
        30px !important;
}


/*
 * Secure-checkout prepared state.
 */

.checkout-prepared-card__icon {
    width:
        36px !important;

    height:
        36px !important;

    min-width:
        36px !important;

    min-height:
        36px !important;
}


/*
 * Five-stage booking progress circles.
 */

.booking-flow-step.is-complete
.booking-flow-step__number {
    width:
        28px !important;

    height:
        28px !important;

    min-width:
        28px !important;

    min-height:
        28px !important;
}


/*
 * Step 4 global booking progress.
 */

.guided-review-global-progress__step.is-complete
> span:first-child {
    width:
        28px !important;

    height:
        28px !important;

    min-width:
        28px !important;

    min-height:
        28px !important;
}


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

@media (max-width: 620px) {
    .booking-flow-status__mark {
        width:
            32px !important;

        height:
            32px !important;

        min-width:
            32px !important;

        min-height:
            32px !important;
    }

    .booking-guided-hold-note__icon {
        width:
            28px !important;

        height:
            28px !important;

        min-width:
            28px !important;

        min-height:
            28px !important;
    }

    .checkout-prepared-card__icon {
        width:
            34px !important;

        height:
            34px !important;

        min-width:
            34px !important;

        min-height:
            34px !important;
    }

    .booking-flow-step.is-complete
    .booking-flow-step__number,
    .guided-review-global-progress__step.is-complete
    > span:first-child {
        width:
            27px !important;

        height:
            27px !important;

        min-width:
            27px !important;

        min-height:
            27px !important;
    }


    /*
     * Keep the drawn check proportional on smaller circles.
     */

    .booking-flow-status__mark::before,
    .booking-guided-hold-note__icon::before,
    .checkout-prepared-card__icon::before,
    .booking-flow-step.is-complete
    .booking-flow-step__number::before,
    .guided-review-global-progress__step.is-complete
    > span:first-child::before {
        width:
            8px;

        height:
            5px;
    }
}


/* ROYAL V282 SINGLE PROTECTED HOLD CHECK */
.booking-guided-hold-note__icon {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-shadow: none !important;
}

/* Suppress a second pseudo icon. */
.booking-guided-hold-note__icon::after {
    content: none !important;
    display: none !important;
}

/* Suppress any nested original icon. */
.booking-guided-hold-note__icon > * {
    display: none !important;
}

/* Draw exactly one centered checkmark. */
.booking-guided-hold-note__icon::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 10px !important;
    height: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -65%) rotate(-45deg) !important;
    transform-origin: center !important;
}


/* ROYAL V283 FINAL SINGLE HOLD CHECK */
.booking-guided-hold-note__icon {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-indent: 200% !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Hide any extra generated mark */
.booking-guided-hold-note__icon::after {
    content: none !important;
    display: none !important;
}

/* Hide nested icon elements if present */
.booking-guided-hold-note__icon > * {
    display: none !important;
}

/* Draw exactly one centered checkmark */
.booking-guided-hold-note__icon::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 10px !important;
    height: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 2px solid #d8d1bf !important;
    border-bottom: 2px solid #d8d1bf !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -65%) rotate(-45deg) !important;
    transform-origin: center !important;
    text-indent: 0 !important;
}