/*--  fonts  --*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sora:wght@100..800&display=swap');


/*--  components  --*/
@import './components/advertisers.css';
@import './components/bottom-menu.css';
@import './components/contact-template.css';
@import './components/fixed-sidebar.css';
@import './components/footer.css';
@import './components/header.css';
@import './components/hero.css';
@import './components/index-template.css';
@import './components/lotteries.css';
@import './components/payment-methods.css';
@import './components/responsible-gaming.css';
@import './components/restricted-access.css';
@import './components/sidebar.css';
@import './components/subscription.css';


/*--  layouts  --*/
@import './layouts/advertisers-geographical-areas.css';
@import './layouts/forms.css';
@import './layouts/lotteries.css';
@import './layouts/payment-methods.css';
@import './layouts/pop-ups.css';
@import './layouts/social-casino-games.css';
@import './layouts/wp-posts.css';


/*--  templates  --*/
@import './templates/betting.css';
@import './templates/my-account.css';
@import './templates/social-casino.css';



/*--  defaults  --*/
:root {
    --font-family-body: 'Inter', sans-serif;
    --font-family-heading: 'Sora', sans-serif;

    --pallets-primary: #f07d36;
    --pallets-secondary: #309a4c;

    --background-default: #ffffff;
    --background-medium: #f7f7f7;
    --background-small: #f7f7f7;

    --foreground-default: #242526;
    --foreground-medium: #383a3d;
    --foreground-small: #63636e;

    --buttons-cta-default: #f07d36;
    --buttons-cta-hover: #f46535;
    --buttons-cta-text: #ffffff;

    --buttons-promocode-default: #087F5B;
    --buttons-promocode-hover: #0CA678;

    --forms-error: #cb1515;
    --forms-success: #00af63;

    --aux-border: #ebecef;
    --aux-terms-conditions: #f2f2f2;
    --aux-rank-background: #aaa9b0;
    --aux-rank-text: #ffffff;
    --aux-tag-background: #f07d36;
    --aux-tag-text: #ffffff;

    --neutral-white: #ffffff;
    --neutral-white-medium: rgba(255, 255, 255, 0.8);

    --neutral-dark-medium: rgba(0, 0, 0, 0.8);

    --sidebar-logo-backrgound: var(--pallets-secondary);
    --sidebar-close-backrgound: #dd3333;
    --sidebar-close-text: #ffffff;
}


/*--  reset css  --*/
* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-body);
    font-size: 16px;
    line-height: 150%;
    color: var(--foreground-medium);
    background-color: var(--background-default);
    overflow-x: hidden;
    position: relative;
    counter-reset: x;
    scroll-behavior: smooth;
}

body:is(.pop-up) {
    overflow: hidden;
}

body:not(.fixed-sidebar) section.fixed-sidebar {
    height: 0;
    opacity: 0;
    visibility: hidden;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
    transition: .3s;
}

a {
    text-decoration: none;
    color: inherit;
    transition: .3s;
    position: relative;
}

ul,
ol {
    padding-left: 0;
    list-style: none;
    margin: 0;
}

ol[type="A"] {
    list-style: upper-alpha;
}

p:not(:last-child) {
    margin: 0 0 16px 0;
}

.area-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


/*--  headings  -*/
h1,
h2,
h3,
h4 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    color: var(--foreground-default);
    margin-bottom: 12px;
}

h1 {
    font-size: 2rem;
    line-height: 130%;
}

h2 {
    font-size: 1.25rem;
    line-height: 125%;
}

h3 {
    font-size: 1.125rem;
}


@media screen and (max-width:1199px) {
    h1 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1rem;
    }
}


/*--  show more/less  --*/
.show-more-less-content {
    >div:is(.show-more-content, .show-less-content) {
        display: none;
        width: fit-content;
        cursor: pointer;

        .title {
            display: flex;
            align-items: center;
            gap: 0 4px;
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;

            img {
                display: block;
                height: 24px;
                width: auto;
                transition: .3s ease;
            }
        }
    }

    .show-more-content {
        .title img {
            transform: rotate(180deg);
        }
    }

    .show-less-content {
        margin-top: 16px;
    }


    @media screen and (max-width: 1199px) {
        >div:is(.show-more-content, .show-less-content) {
            display: block;
        }

        .hide {
            height: 0;
            opacity: 0;
            display: none !important;
        }
    }
}


/*--  loader  --*/
@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.loader {
    display: none;
    align-items: center;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: hsla(0, 0%, 100%, .6);
    z-index: 1;

    &::before {
        animation: spin 1s linear infinite;
        border: 3px solid transparent;
        border-radius: 50%;
        border-top-color: var(--pallets-primary);
        content: "";
        height: 40px;
        width: 40px;
    }
}


/*--  block-content  --*/
section.block-content {
    margin: 64px 0;

    .content-block:nth-child(n+2) {
        margin-top: 32px;
    }

    .content-block {
        ul, ol {
            display: grid;
            gap: 8px;
            margin: 16px 0;
        }

        ul {
            li {
                position: relative;
                padding-left: 16px;

                &::before {
                    content: '';
                    position: absolute;
                    top: 10px;
                    left: 0;
                    height: 5px;
                    width: 5px;
                    border-radius: 50%;
                    background: var(--pallets-primary);
                }
            }
        }

        ol {
            list-style: decimal;
            padding-left: 20px;
        }
    }


    /*  */
    .embed-content {
        display: flex;
        justify-content: center;
        border-radius: 8px;
        padding: 32px 16px;
        margin: 16px 0;
        background: var(--background-medium);

        iframe {
            border-radius: 8px !important;
            overflow: hidden !important;
            margin: 0 !important;
        }

        &.twitter {
            >.twitter-tweet {
                margin: 0 !important;
                align-items: center !important;
                width: 100% !important;
                max-width: 496px !important;
            }
        }

        &.instagram {
            >iframe {
                max-width: 100%;
                max-height: 546px !important;
                overflow: hidden !important;

            }
        }

        &.youtube {
            >iframe {
                aspect-ratio: 16/9;
            }
        }
    }


    @media screen and (max-width: 1199px) {
        margin: 56px 0;
    }

    @media screen and (max-width: 767px) {
        margin: 48px 0;

        .embed-content {
            padding: 0;
            background: transparent;

            &.youtube {
                >iframe {
                    width: 100%;
                }
            }
        }
    }

    @media screen and (max-width: 375px) {
        .embed-content {
            &.instagram {
                >iframe {
                    min-width: 314px !important;
                    max-height: 534px !important;
                }
            }
        }
    }
}


/*--  404  --*/
body.template-404 {
    section.hero.layout-default {
        padding: 56px 0;
        text-align: center;

        a {
            font-weight: 500;
            text-decoration: underline;
            transition: .3s ease;

            &:hover {
                color: var(--neutral-white);
            }
        }
    }


    @media screen and (max-width: 1199px) {
        section.hero.layout-default {
            padding: 48px 0;
        }
    }
}


/*--  homepage-redirect  --*/
body.homepage-redirect-template {
    header {
        background: var(--pallets-secondary);

        .wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 0;
        }

        .responsible-gaming span {
            color: var(--neutral-white);
        }
    }


    /*  */
    section.hero {
        padding: 56px 0;
        text-align: center !important;

        .buttons {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 48px;
        }

        .button a {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            padding: 0 24px;
            font-family: var(--font-family-heading);
            font-size: 14px;
            font-weight: 600;
            color: var(--buttons-cta-text);
            background: var(--buttons-cta-default);
            border-radius: 6px;
            transition: .3s ease;

            &:hover {
                background: var(--buttons-cta-hover);
            }
        }
    }


    @media screen and (min-width: 768px) {
        section.hero .container {
            max-width: 576px !important;
        }
    }


    @media screen and (max-width: 1199px) {
        section.hero {
            padding: 48px 0;

            .buttons {
                margin-top: 32px;
            }
        }
    }

    @media screen and (max-width: 767px) {
        header {
            .wrapper {
                flex-wrap: nowrap;
                flex-direction: column;
                gap: 8px;
                align-items: center;
            }
        }


        /*  */
        section.hero {
            padding: 40px 0;
        }
    }
}