/*
Theme Name: Kurdify
Theme URI: https://kurdify.net
Author: the Dahatu team
Author URI: https://dahatu.net
Description: Official kurdify wordpress theme
Requires at least: 6.1
Tested up to: 7.0
Requires PHP: 5.6
Version: 1.1
License: MIT
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: kurdify
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

@font-face {
    font-family: "Estedad";
    src: url("assets/fonts/Estedad.ttf");
}

@view-transition {
    navigation: auto;
}


:root {
    color-scheme: light dark;
    --background-color: light-dark(#ffffff, #000000);
    --background-hover-color: light-dark(#eeeeee, #111111);
    --foreground-color: light-dark(#0d0d0d, #dddddd);
    --foreground-hover-color: light-dark(#111111, #cccccc);
    --accent-color: light-dark(#EA4335, #FBBC05);
}

html,
body {
    font-family: "Estedad";
    font-size: 1rem;
    color-scheme: light dark;
    background-color: var(--background-color);
    color: var(--foreground-color);

    background-image: radial-gradient(var(--background-hover-color) 15%, transparent 16%);
    background-size: 10px 10px;
    background-position: 0 0;
}

@media (pointer:none),
(pointer:coarse) {

    html,
    body {
        font-size: 1.2rem;
    }
}

a {
    color: var(--accent-color);
    text-underline-offset: 5px;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

button {
    font-family: inherit;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--background-color) inset !important;
  box-shadow: 0 0 0 30px var(--background-color) inset !important;
  -webkit-text-fill-color: var(--foreground-color) !important; /* keeps text color visible */
  transition: background-color 5000s ease-in-out 0s; /* delays Chrome's re-application */
}

input[type=text],
input[type=number],
input[type=email],
textarea,
select {
    font-family: inherit;
    border: 1px solid rgb(from var(--foreground-color) r g b / 0.5);
    background-color: var(--background-color);
    border-radius: 8px;
    padding: 10px 20px;
    outline: none;
    position: relative;
    box-sizing: border-box;
    resize: vertical;
}

select {
    padding: 12px 20px;
}

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus,
select:focus {
    border-color: rgb(from var(--foreground-color) r g b / 0.8);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center; /* increase this value for more right padding */
    background-size: 12px 8px;
    padding-left: 40px; /* extra space so text doesn't overlap the arrow */
}

::placeholder {
    color: rgb(from var(--foreground-color) r g b / 0.4);
}

label {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.9rem;
    font-weight: 600;
}

label.required span::after {
    content: '*';
    color: orangered;
    position: relative;
    inset-inline-start: 5px;
}

input.wide {
    width: 100%;
}

input.numeric {
    direction: ltr;
    text-align: right;
}

input.phone:after {
    content: "+";
    /* position: absolute; */
    /* left: 10px; */
    /* top: 10px;; */
}

.button {
    display: flex;
    gap: 10px;
    align-items: center;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    background-color: var(--foreground-color);
    color: var(--background-color);
    padding: 5px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    text-align: center;

    &:hover {
        background-color: var(--foreground-hover-color);
        text-decoration: none;
    }
}

.app-container {
    width: 100%;
    height: 100dvh;
    background-image: -webkit-linear-gradient(top, transparent, var(--button-background-color));
    overflow: scroll;
    display: flex;
    flex-flow: column;
    flex-direction: column;
    justify-content: safe center;
    align-items: safe center;

    & .inner {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;

        & .header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;


            & .logo {
                width: 100px;
                height: 100px;
                border-radius: 100px;
            }

            & .app-meta-info {
                display: flex;
                flex-direction: column;
                align-items: center;

                & .app-name {
                    font-weight: bold;
                    font-size: 1.1rem;
                }

                & .app-version {
                    font-size: 0.8rem;
                    font-weight:bold;
                    opacity: 0.6;
                }
            }

        }


        & .app-download-links {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;

            & .button {
                width: 100%;
            }
        }
    }


    & .ad-contact-form-inner {
        display: flex;
        flex-direction: column;
        padding: 50px 20px;
        box-sizing: border-box;
        width: 100%;
        max-width: 500px;
        align-items: stretch;
        /* justify-content: stretch; */

        & .ad-contact-header {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 20px;

            & .ad-contact-title {
                font-weight: bold;
                font-size: 1.2rem;
            }

            & .ad-contact-subtitle {
                opacity: 0.6;
                font-size: 0.7rem;
            }
        }

        & .ad-contact-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
    }
}



.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
    margin-bottom: 10px;
}

.app-copyright {
    width: 100%;
    opacity: 0.3;
    font-size: 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


    & .devices-icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .copyright-years {
        margin-top: -4px;
        font-size: 0.6rem;
    }
}


.page {
    & img {
        width: 100%;
    }
}


.spin {
    display: inline-flex;
    position: relative;
    animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}