@import "runtime.fonts.css";
@import "runtime.theme.css";

:root {
    background: var(--bg-900-ff);
    font: normal var(--fz-200) / 1.25 "Noto Sans Arabic";
    scroll-behavior: smooth;
    /* scrollbar-width: none; */
    user-select: none;

    body {
        margin: initial;
        /* min-width: 360px; */
        padding: var(--sp-400);

        * {
            box-sizing: border-box;

            &::selection {
                background: var(--bg-100-c0);
            }
        }

        a, h1, h2, h3, h4, h5, h6, p, small {
            color: inherit;
            margin: initial;
            text-decoration: initial;
        }

        a:hover {
            color: var(--ac-500);
        }

        h1, h2, h3 {
            font-weight: 500;
        }

        h1 {
            font-size: var(--fz-500);
        }

        h2 {
            font-size: var(--fz-400);
        }

        h3 {
            font-size: var(--fz-300);
        }

        p {
            font-size: var(--fz-200);
            hyphens: auto;
            line-height: 1.75;
        }

        small {
            font-size: var(--fz-100);
        }

        input {
            font: inherit;
        }

        select {
            appearance: none;
            background: initial;
            border: initial;
            border-radius: var(--sp-200);
            font: inherit;
            outline: initial;
            padding: var(--sp-300) var(--sp-300);
            
            option
            {
                font: inherit;
            }
        }

        section {
            margin-bottom: var(--sp-500);
            max-width: 1080px;
            /* max-width: var(--pw-400); */
            scroll-margin-top: var(--sp-500);
            width: stretch;
            width: -webkit-fill-available;

            &:not(#spotlight) {
                padding-inline: var(--sp-400);
            }

            &.wide {
                max-width: stretch;
                max-width: -webkit-fill-available;
                padding: var(--sp-500);
            }
        }
    }

    &[dir="rtl"] {
        font-family: "Noto Naskh Arabic";
    }
}

& /* Global Class */
{
    .button {
        /* height: 56px; */
        border-radius: var(--sp-300);
        cursor: pointer;
        display: inline-grid;
        inline-size: stretch;
        inline-size: -webkit-fill-available;
        padding: 14px var(--sp-400);
        place-items: center;
        text-align: center;
        transition-duration: var(--td-100);
        white-space: nowrap;

        &.primary {
            background: var(--bg-900-ff);
            color: var(--fg-100-ff) !important;

            &:hover {
                background: var(--bg-900-c0);
            }
        }

        &.secondary {
            background: var(--bg-900-10);
            border: thin solid var(--bg-900-20);

            &:hover {
                background: var(--fg-100-ff);
            }
        }
    }

    .conversion-zone {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: var(--sp-400);
        padding-block: var(--sp-500);

        .cta-buttons {
            display: grid;
            gap: var(--sp-300);
            grid-template-columns: repeat(auto-fit, minmax(259px, 1fr));
            inline-size: stretch;
            inline-size: -webkit-fill-available;
            justify-items: center;
            max-inline-size: var(--pw-200);

            .button {
                padding-block: 18px;
            }
        }

        small {
            color: var(--bg-900-a0);
            line-height: 1.875;
            text-align: center;
        }
    }

    .highlight {
        color: var(--ac-500) !important;
    }

    .outlined {
        background: var(--background-image) center / cover;
        border-radius: var(--sp-400);
        --background-image: unset;
        overflow: hidden;
        position: relative;
        z-index: 1;

        &::after, &::before {
            background: inherit;
            content: "";
            display: block;
            inset: -12px;
            position: absolute;
            z-index: -1;
        }

        &::after {
            background-clip: padding-box;
            background-origin: border-box;
            border: 24px solid transparent;
            border-radius: 36px;
            box-sizing: border-box;
        }

        &::before {
            filter: brightness(.75) saturate(1.5) blur(6px);
        }
    }

    .page {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: var(--sp-400);
        width: stretch;
        width: -webkit-fill-available;
    }

    .separator {
        background: var(--bg-900-40);
    }

    .global-error-page {
        align-items: center;
        background: var(--bg-900-ff);
        color: var(--fg-100-ff);
        display: flex;
        justify-content: center;
        min-height: 100vh;
        padding: var(--sp-500);
        width: 100%;

        .error-card {
            background: linear-gradient(135deg, var(--bg-100-10), var(--bg-900-20));
            backdrop-filter: blur(24px);
            border: 1px solid var(--fg-100-20);
            border-radius: var(--sp-400);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--sp-400);
            max-width: 540px;
            padding: var(--sp-600) var(--sp-500);
            text-align: center;
            width: 100%;

            .icon {
                color: var(--ac-500);
                font-size: 80px;
            }

            h1 {
                font-size: var(--fz-600);
                font-weight: 600;
                margin: 0;
            }

            .description {
                color: var(--fg-100-80);
                font-size: var(--fz-300);
                font-weight: 300;
                line-height: 1.6;
                margin: 0;
            }

            .actions {
                display: flex;
                gap: var(--sp-300);
                margin-top: var(--sp-300);
                width: 100%;

                button {
                    align-items: center;
                    border: none;
                    border-radius: var(--sp-300);
                    cursor: pointer;
                    display: flex;
                    flex: 1;
                    font-size: var(--fz-300);
                    font-weight: 500;
                    gap: var(--sp-200);
                    justify-content: center;
                    padding: var(--sp-300) var(--sp-400);
                    transition: transform var(--td-100), background var(--td-100);

                    &.btn-reload {
                        background: var(--fg-100-ff);
                        color: var(--bg-900-ff);

                        &:hover {
                            background: var(--fg-100-c0);
                            transform: scale(1.02);
                        }
                    }

                    &.btn-home {
                        background: var(--bg-100-20);
                        border: 1px solid var(--fg-100-40);
                        color: var(--fg-100-ff);

                        &:hover {
                            background: var(--bg-100-40);
                            transform: scale(1.02);
                        }
                    }

                    &:active {
                        transform: scale(0.98);
                    }
                }
            }

            .technical-details {
                margin-top: var(--sp-400);
                text-align: left;
                width: 100%;

                summary {
                    color: var(--fg-100-60);
                    cursor: pointer;
                    font-size: var(--fz-200);
                    outline: none;
                    user-select: none;

                    &:hover {
                        color: var(--fg-100-80);
                    }
                }

                pre {
                    background: rgba(0, 0, 0, 0.4);
                    border: 1px solid var(--fg-100-20);
                    border-radius: var(--sp-200);
                    color: #ff6b6b;
                    font-family: monospace;
                    font-size: var(--fz-100);
                    margin: var(--sp-200) 0 0 0;
                    overflow-x: auto;
                    padding: var(--sp-300);
                    white-space: pre-wrap;
                    word-break: break-all;
                }
            }
        }
    }
}

@media (width <= 1280px) {
    :root {
        body {
            padding: initial;
        }
    }
}