html:lang(ar) {
    .aegov-tour {
        * {
            font-family: "Noto Kufi Arabic",sans-serif;
        }
    }
}

/*Omar: will check it later*/
/* :not(body):has(>.driver-active-element) {
    padding: 1rem;
    margin: -1rem;
} */

.aegov-tour {
    --tour-font-family: 'Roboto',sans-serif;
    font-size: var(--aegov-font-size);
    min-width: 390px;
    border-radius: 1em;
    padding: 1.75em;

    * {
        font-family: 'Roboto',sans-serif;
    }

    .driver-popover-close-btn {
        position: absolute;
        top: 0.5em;
        inset-inline-end: 0.5em;
        right: unset;
        width: 2em;
        height: 2em;
        display: grid;
        place-items: center;
        color: var(--clr-black-400);
        font-size: 1.5em;
        border-radius: 0.5em;

        &:hover {
            color: var(--clr-black-800);
            background-color: var(--clr-black-50);
        }
    }

    &.aegov-tour-intro {
        .aegov-tour-dots {
            display: none;
        }

        .aegov-tour-intro-icon {
            width: 3.5em;
            height: 3.5em;
            display: grid;
            place-items: center;
            color: var(--clr-primary-600);
            background-color: var(--clr-primary-50);
            border: 1px solid var(--clr-primary-600);
            border-radius: 1em;

            &::before {
                font-size: 1.5em;
            }
        }

        .driver-popover-title {
            color: var(--clr-black-900);
            font-size: 1.375em;
            font-weight: 600;
            margin-top: 1em;
            margin-bottom: 0;
        }

        .driver-popover-description {
            color: var(--clr-black-500);
            margin-top: 0.25em;
            margin-bottom: 0;
        }

        .aegov-tour-intro-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5em;
            color: var(--clr-black-700);
            border-radius: 0.5em;
            background-color: var(--clr-black-50);
            padding-inline: 0.75em;
            padding-block: 0.375em;
            margin-top: 0.75em;

            span {
                font-size: 0.875em;
            }
        }

        .aegov-tour-outline {
            padding-top: 1.25em;

            .aegov-tour-outline-title {
                color: var(--clr-black-500);
                font-size: 0.875em;
                font-weight: 600;
                line-height: 1.8;
                margin: 0;
            }

            .aegov-tour-outline-list {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1em;
                padding: 0;
                margin-top: 0.5em;

                li {
                    display: flex;
                    align-items: center;
                    gap: 0.5em;
                    color: var(--clr-black-700);

                    i {
                        color: var(--clr-primary-600);
                    }

                    span {
                        font-size: 0.875em;
                    }
                }
            }
        }
    }

    .aegov-tour-header {
        display: flex;
        align-items: flex-start;
        gap: 1em;
        padding-inline-end: 3em;

        .aegov-tour-icon {
            width: 3em;
            height: 3em;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            color: var(--clr-primary-700);
            background-color: var(--clr-primary-100);
            border-radius: 50%;

            &::before {
                font-size: 1.25em;
            }
        }

        .driver-popover-progress-text {
            color: var(--clr-primary-700);
            font-size: 0.875em;
            font-weight: 500;
        }

        .driver-popover-title {
            color: var(--clr-black-900);
            font-size: 1.25em;
            font-weight: 600;
        }
    }
    
    .driver-popover-description {
        color: var(--clr-black-600);
        font-size: 1.075em;
        margin-top: 1.25em;
    }

    .aegov-tour-note {
        display: flex;
        align-items: flex-start;
        gap: 0.5em;
        color: var(--clr-primary-900);
        background-color: var(--clr-primary-50);
        border-radius: 8px;
        padding-inline: 1em;
        padding-block: 0.75em;
        margin-top: 0.75em;

        .aegov-tour-note-icon {
            font-size: 1.125em;
            color: var(--clr-primary-600);
            margin-top: 0.25em;
        }

        p {
            margin: 0;
        }
    }

    .aegov-tour-helper {
        display: flex;
        align-items: center;
        gap: 0.5em;
        color: var(--clr-success-700);
        font-size: 0.875em;
        font-weight: 500;
        margin-top: 0.75em;

        i {
            width: 1.75em;
            height: 1.75em;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            background-color: var(--clr-success-50);
            border-radius: 50%;
        }
    }

    .aegov-tour-dots {
        display: flex;
        justify-content: center;
        gap: 0.25em;
        margin-top: 1.5em;
        transition: 0.2s;

        .aegov-tour-dot {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background-color: var(--clr-black-200);

            &.is-done {
                background-color: var(--clr-primary-300);
            }

            &.is-current {
                width: 20px;
                background-color: var(--clr-primary-600);
            }
        }
    }

    .driver-popover-footer {
        border-top: 1px solid var(--clr-black-100);
        padding-top: 1em;

        .driver-popover-navigation-btns {
            display: flex;
            gap: 0.5em;

            button {
                height: 3em;
                display: inline-flex;
                flex-shrink: 0;
                flex-grow: 1;
                align-items: center;
                justify-content: center;
                gap: 0.5em;
                color: rgb(255 255 255);
                text-align: center;
                font-size: 1em;
                font-weight: 500;
                line-height: 1.5em;
                text-shadow: unset;
                background-color: var(--clr-primary-600);
                border: 2px solid transparent;
                border-radius: 0.5em;
                padding-inline: 1.5em;
                margin: 0;
                transition: 0.2s;
                transition-timing-function: cubic-bezier(.4, 0, .2, 1);

                &:first-of-type {
                    border-color: var(--clr-primary-600);
                    background-color: transparent;
                    color: var(--clr-primary-600);

                    &:hover {
                        background-color: var(--clr-primary-50);
                        color: var(--clr-primary-600);
                        box-shadow: unset;
                    }
                }
    
                &:hover {
                    background-color: var(--clr-primary-500);
                    color: var(--clr-primary-50);
                    box-shadow: 0px 0px 0px 0.375rem var(--clr-primary-100);
                }
            }
        }
    }
}

.driver-active-element {
    border-radius: 12px;
    outline: 2px solid var(--clr-primary-400);
    outline-offset: -1px;

    * {
        pointer-events: none !important;
    }
}