@import "tailwindcss";
/* yekanbakh 500 mikhim bra hrja font-medium hst */
@custom-variant dark (&:where(.dark, .dark *));

@font-face {
    font-family: yekanbakh;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/YekanBakh/YekanBakh-Regular.ttf") format('truetype');
}

@font-face {
    font-family: yekanbakh;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../font/YekanBakh/YekanBakh-SemiBold.ttf") format('truetype');
}

@font-face {
    font-family: yekanbakh;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../font/YekanBakh/YekanBakh-Bold.ttf") format('truetype');
}

/* English */
@font-face {
    font-family: IBMPlexSans;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/IBMPlexSans/IBMPlexSans-Regular.ttf") format('truetype');
}

@font-face {
    font-family: IBMPlexSans;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../font/IBMPlexSans/IBMPlexSans-SemiBold.ttf") format('truetype');
}

@font-face {
    font-family: IBMPlexSans;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../font/IBMPlexSans/IBMPlexSans-Bold.ttf") format('truetype');
}

@theme {
    --color-gold: #9b8600;
    --color-background: #f0f0f0;
    --color-forground: #151514;

    --color-maire: #151514;
    --color-dark-gray: #838383;
    --color-dim-gray: #707070;
    --color-light-yellow: #faeaa4;
    --color-yellow: #ffc700;
    --color-error: #f1416c;
    --color-mercury: #e5e5e5;
    --color-foggy-gray: #97959543;
    --color-arsenic: #434343;
    --color-soft-gray: #a3a3a3;
    --color-deep-black: #1a1a1a;
    /* --text-2.5xl: 1.75rem; */
    /* --text-1.5xl: 1.35rem; */

    /* 992px */
    --breakpoint-ml: 62rem;

    /* dark */
    --color-gray: #808080;
    --color-karaka: #262623;
    --color-yriel-yellow: #f8d25c;
    --color-dark-olive-gray: #31312f;
    --color-philippine-silver: #b3b3b3;
    --color-dark-olive-brown: #413718;
    --color-coffee-bean: #2b2924;

    --tw-ease: ease;
    --tw-duration: .2s;


    /* highchart series gradient */
    --color-topColor: #f3e5bc;
    --color-bottomColor: rgba(243, 229, 188, 0);
}

@layer theme {
    .dark {
        --color-forground: #ffffff;
        --color-background: #151514;
        --color-gold: var(--color-yriel-yellow);


        --color-topColor: #6a5c2f;
        --color-bottomColor: #6a5c2f03;
    }
}

/* هروقت سیستم دارکه */
/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
} */

@utility container {
    margin: auto;
    max-width: unset;

    @media (max-width: 992px) {
        padding-inline: 24px;
    }

    @media (min-width: 992px) {
        padding-inline: 50px;
    }

}

@utility font-yekanbakh {
    font-family: 'yekanbakh';
}

@utility font-IBMPlexSans {
    font-family: 'IBMPlexSans';
}

@utility shadow-md {
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, .15);
}

@utility border-outset {
    border-style: outset;
}

body {
    background: var(--color-background);
    color: var(--color-forground);
    font-family: 'yekanbakh';
}

main {
    min-height: 100dvh;
}

input,
button,
summary,
textarea {
    outline: unset;
}

summary,
button:not(:disabled) {
    cursor: pointer;
}

input::placeholder {
    color: var(--color-philippine-silver);
}


h1 {
    @apply text-2xl;
}

h2 {
    @apply max-ml:text-base ml:text-xl;
}

h3 {
    @apply max-ml:text-sm ml:text-lg;
}

h2,
h4,
h5,
h6 {
    @apply font-semibold;
}



/* menu dropdown */
@utility dropdown-animation {
    animation: dropdown-animation .5s ease 1;
}

@keyframes dropdown-animation {
    0% {
        opacity: 0;
        margin-bottom: .75rem;
    }

    to {
        opacity: 1;
        margin-bottom: 0;
    }
}

.dropdown::-webkit-scrollbar {
    width: 6px;
}


.dropdown::-webkit-scrollbar-track {
    background: #ebebeb;
    border-radius: 8px;
}

.dark .dropdown::-webkit-scrollbar-track {
    background-color: #3d3d3b;
}

.dropdown::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 8px;
}

/* faq */
.faq summary {
    display: flex;
    position: relative;
    padding-inline-start: 55px;
    padding-inline-end: 15px;
}

.faq summary::before {
    width: 20px;
    height: 20px;
    display: inline-block;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22.045" height="22.045" viewBox="0 0 22.045 22.045"><g id="open" transform="translate(865)"><g id="add-square" transform="translate(-865)"><path id="Vector" d="M15.641,0H6.4C2.392,0,0,2.392,0,6.4V15.63c0,4.023,2.392,6.415,6.4,6.415H15.63c4.012,0,6.4-2.392,6.4-6.4V6.4C22.045,2.392,19.653,0,15.641,0Zm-.209,11.849H11.849v3.582a.827.827,0,1,1-1.653,0V11.849H6.613a.827.827,0,0,1,0-1.653H10.2V6.613a.827.827,0,1,1,1.653,0V10.2h3.582a.827.827,0,0,1,0,1.653Z" transform="translate(0.001 0)" fill="%23747474"/><path id="Vector-2" data-name="Vector" d="M0,0H22.045V22.045H0Z" transform="translate(22.045 22.045) rotate(180)" fill="none" opacity="0"/></g></g></svg>');
    transition: 0.2s;
    inset-inline-start: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.faq details[open]>summary::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22.045' height='22.045' viewBox='0 0 22.045 22.045'><g id='close'><g id='minus-square'><g id='Rectangle_11597' transform='translate(4.045 5)' fill='%23f8d25c' stroke='%23707070' stroke-width='1'><rect width='13' height='13' stroke='none'/><rect x='0.5' y='0.5' width='12' height='12' fill='none'/></g><path id='Vector' d='M15.648,0H6.407C2.393,0,0,2.392,0,6.4V15.63c0,4.023,2.393,6.415,6.407,6.415h9.23c4.014,0,6.407-2.392,6.407-6.4V6.4C22.055,2.392,19.662,0,15.648,0Zm-.21,11.849H6.617a.827.827,0,1,1,0-1.653h8.822a.827.827,0,1,1,0,1.653Z' transform='translate(0.001)' fill='%23413718'/><path id='Vector-2' d='M0,0H22.045V22.035H0Z' transform='translate(22.045 22.035) rotate(180)' fill='none' opacity='0'/></g></g></svg>");
}

.faq details>div>div {
    overflow: hidden;
    padding-inline-start: 7%;
    height: 0;
    padding-inline-end: 16px;
    border-radius: 10px
}

.faq details.open>div>div {
    @apply py-4 border-foggy-gray border-t h-auto;
}


/* contact form */
input.error,
textarea.error {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f1416c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f1416c' stroke='none'/%3e%3c/svg%3e");
    background-size: 20px;
    background-repeat: no-repeat;
    padding-inline-end: 35px;
}

input.error,
textarea.error {
    @apply ltr:bg-position-[right_10px_center] rtl:bg-position-[10px_center];
}

/* slick slider */
.slick-track {
    display: flex !important;
}

.slick-slide {
    @apply relative opacity-60 ml:m-4 max-ml:mx-2;
}

.slick-slide .text {
    background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .9019607843) 61%, #000000 100%) 0% 0%;
}

.slick-current {
    opacity: 1;
    margin: 0
}

.slick-next,
.slick-prev {
    width: 40px !important;
    height: 40px !important;
    background-color: var(--color-gold);
    border-radius: 8px;
    opacity: .5;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 50%;
    transition: opacity .15s ease;
}

[dir='rtl'] .slick-next,
.slick-prev {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='0'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
}

[dir='rtl'] .slick-prev,
.slick-next {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='0'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
}

.slick-next:hover,
.slick-prev:hover {
    opacity: 0.9;
}

[dir='ltr'] .slick-prev,
[dir='rtl'] .slick-next {
    @apply right-auto max-ml:left-[13px] ml:left-[-25px];
}

[dir='ltr'] .slick-next,
[dir='rtl'] .slick-prev {
    @apply max-ml:right-[13px] ml:right-[-25px] left-auto;
}

/* highchart */
.highcharts-legend,
.highcharts-contextbutton,
.highcharts-contextbutton:hover {
    display: none;
}

.highcharts-title,
.highcharts-axis {
    font-family: 'yekanbakh';
}

.highcharts-title {
    fill: var(--color-forground) !important;
    font-size: 16px !important;
}

.highcharts-axis text {
    fill: var(--color-forground) !important;
    font-size: 14px !important;
}

.highcharts-credits {
    display: none;
}


.highcharts-axis-labels text {
    @apply !fill-forground dark:fill-white !text-[10px];
}

/*  chart btns*/
.activeMetal {
    @apply bg-gold text-mercury dark:text-background;
}

.activePeriod,
.moreActivePeriod {
    color: var(--color-yriel-yellow);
    border-color: var(--color-yriel-yellow);
    background-color: var(--color-dark-olive-brown);
}

/* back to top */
@keyframes animation-scrolltop {
    0% {
        bottom: -48px
    }

    to {
        bottom: 10px;
    }
}

@utility animation-scrolltop {
    animation: animation-scrolltop .4s ease-out 1;
}




/* mobile dark mode */
.switch-button .checkbox:checked+.checkbox-label {
    background-color: var(--color-gold);
}

.switch-button .checkbox:checked+.checkbox-label .ball {
    transform: translate(12px);
}





/* metalGroup */
.metalGroup:first-child {
    @apply max-xl:flex max-xl:flex-wrap max-xl:gap-x-5 max-xl:w-full;
}

.metalGroup:first-child>span:not(:first-child) {
    @apply max-xl:w-[calc(50%-10px)];
}

.metalGroup:not(:first-child) {
    @apply max-xl:inline-flex max-xl:flex-col max-xl:w-[calc(50%-10px)];
}




/* Dots */
.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    @apply inline-block lg:bottom-[-25px] max-lg:-bottom-8 absolute bg-[#151514] px-1.25 rounded-[10px] h-[19px] text-center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 4px;
    cursor: pointer;
    top: -50%;
    transform: translateY(50%);
}

.slick-dots li button {
    font-size: 0;
    display: block;
    width: 8px;
    height: 8px;
    background: var(--color-gold);
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.5;
}

.slick-dots li.slick-active button {
    opacity: 1;
    width: 16px;
}