/* 
Theme Name : Coffe World
Theme URL : https://coffe-world.com
Author : mahan-tech.ir
Version : 1

*/
:root {
    --hover-gradient: linear-gradient(150deg, #7500ff, #ff00e0);
    --gradient1: #7500ff;
    --gradient2: #ff00e0;
    --light-text-color: white;
    --dark-text-color: black;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    text-align: center;
}

p,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6,
address,
li {
    color: var(--light-text-color);
}

img {
    width: 100% !important;
    height: 100% !important;
}

button a {
    font-size: 20px;
}

/* normalize */
/* body {
    margin-top: 50px !important;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 85%, rgba(168, 39, 110, .45) 0%, transparent 35%),
        radial-gradient(circle at 80% 25%, rgba(180, 35, 150, .35) 0%, transparent 30%),
        radial-gradient(circle at 60% 100%, rgba(120, 40, 255, .18) 0%, transparent 35%),
        linear-gradient(180deg, #14071d 0%, #0f0618 45%, #180927 70%, #09040f 100%);
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 75% 30%, rgba(255, 0, 102, .18), transparent 25%),
        radial-gradient(circle at 30% 90%, rgba(170, 0, 255, .15), transparent 30%);
    filter: blur(80px);
} */


body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 255, 255, 0.08), transparent 30%),
        radial-gradient(circle at 85% 15%, rgba(170, 0, 255, 0.10), transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(0, 100, 255, 0.08), transparent 40%),
        linear-gradient(180deg, #0a0618 0%, #090514 40%, #05030d 100%);
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);

    background-size: 80px 80px;
    mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
    opacity: .35;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 20% 30%, #00d9ff33, transparent 22%),
        radial-gradient(circle at 75% 25%, #b400ff33, transparent 22%),
        radial-gradient(circle at 60% 70%, #0055ff22, transparent 30%);

    filter: blur(120px);
}

/* custom scroll bar */
/* عرض اسکرول بار */
::-webkit-scrollbar {
    width: 8px;
}

/* پس‌زمینه اسکرول بار */
::-webkit-scrollbar-track {
    background: #111;
}

/* خود Scrollbar */
::-webkit-scrollbar-thumb {
    background: var(--hover-gradient);
    border-radius: 10px;
    transition: all 0.5s 0.1s linear;
}



a {
    text-decoration: none;
    color: white;
}

li {
    list-style: none;

}

button:hover {
    transform: scale(1.1);
}

button a {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="radio"] {
    accent-color: var(--hover-color);
}

/* FONTS */

/* thin */
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir-Thin.woff2') format("woff2"), url('/fonts/Vazir-Thin.woff') format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* light */
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir-Light.woff2') format("woff2"), url('/fonts/Vazir-Light.woff') format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* medium */
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir-Medium.woff2') format("woff2"), url('/fonts/Vazir-Medium.woff') format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* regular */
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir.woff2') format("woff2"), url('/fonts/Vazir.woff') format("woff");
    font-display: swap;

}

/* bold */
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir-Bold.woff2') format("woff2"), url('/fonts/Vazir-Bold.woff') format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* styles */

body {
    font-family: 'vazir';
}

button,
input,
select,
textarea {
    font-family: inherit;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

address {
    text-align: justify;
}

p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

button {
    width: 200px;
    height: 40px;
    background: var(--hover-gradient);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.5s 0.1s linear, box-shadow 0.1s 0s linear;
}

button:active {
    /* background-color: red; */
    box-shadow: 1px 1px 10px 10px var(--hover-color);
}

button a {
    font-size: 18px;
}



/* woocommerce messages */




.woocommerce-message {
    background-color: #ffffff00 !important;
    border-top-color: var(--hover-color) !important;
    background: radial-gradient(var(--hover-color), transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    color: var(--text-colors) !important;
    min-height: 70px;
    width: 100% !important;
}


.woocommerce-message:focus-visible {
    outline: 0px !important;
}

.woocommerce-message:focus-visible {
    border: none !important;
}

.woocommerce-error {
    background-color: #ffffff00 !important;
    border-top-color: var(--hover-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(#b81c23, transparent) !important;
    flex-direction: column;
    gap: 10px;
    min-height: 70px;
}

.woocommerce-message .button,
.woocommerce-error .button {
    background-color: var(--hover-color) !important;
    color: var(--text-colors) !important;
    border-radius: 20px !important;
}

.woocommerce-message::before,
.woocommerce-error::before {
    content: "" !important;
    width: 50px;
    height: 50px;
    background-image: url(./svg/woocommerce-message.svg);
    color: var(--hover-color) !important;
}

input::placeholder {
    color: black;
    opacity: 1 !important;
    transition: opacity 1s 0.1s ease !important;
}

/* وقتی هاور میشه، placeholder محو میشه */
input:focus::placeholder {
    opacity: 0 !important;
}


/* Tablet */
@media (min-width:768px) {
    p {
        font-size: 17px;
        line-height: 1.7;
    }

    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 36px;
    }

    h3 {
        font-size: 30px;
    }

    h4 {
        font-size: 18px;
    }
}

/* Desktop */
@media (min-width:1200px) {
    p {
        font-size: 18px;
        line-height: 1.8;
    }

    h1 {
        font-size: 56px;
    }

    h2 {
        font-size: 48px;
    }

    h3 {
        font-size: 36px;
    }

    h4 {
        font-size: 20px;
    }
}

/* mobile */
@media (max-width:768px) {
    p {
        font-size: 17px;
        line-height: 1.7;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 16px;
    }
}



















/* 




        <section class="product-gallery">

            <div class="gallery-main">
                <button class="gallery-arrow prev">‹</button>

                <div class="gallery-slider">
                    <?php foreach ($images as $index => $img) : ?>
                        <div class="gallery-slide <?php echo $index === 0 ? 'active' : ''; ?>">
                            <img src="<?php echo esc_url($img); ?>" alt="">
                        </div>
                    <?php endforeach; ?>
                </div>

                <button class="gallery-arrow next">›</button>
            </div>

            <div class="gallery-thumbs">
                <?php foreach ($images as $index => $img) : ?>
                    <div class="thumb <?php echo $index === 0 ? 'active' : ''; ?>" data-index="<?php echo esc_attr($index); ?>">
                        <img src="<?php echo esc_url($img); ?>" alt="">
                    </div>
                <?php endforeach; ?>
            </div>

        </section>


*/