@import url('https://pro.fontawesome.com/releases/v5.15.2/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('all.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

*:not([class^="icon-"]), html, body {
    font-family: 'Inter', sans-serif;
}

[data-role="my-account"] .tab-button{
    @apply py-2 px-4 w-full border border-primary rounded-full text-black transition hover:text-white hover:bg-primary-600 block cursor-pointer
}

[data-role="my-account"] .tab-button.active{
    @apply bg-primary text-white
}

.next-image {
    @apply rounded border border-gray-300 hover:opacity-30 transition duration-300 cursor-pointer
}

body {
    @apply scroll-smooth
}

.error-msg {
    @apply border border-rose-200 bg-rose-100 text-rose-400 py-1.5 px-2.5 text-sm rounded my-2
}

.info-msg {
    @apply border border-blue-200 bg-blue-100 text-blue-400 py-1.5 px-2.5 text-sm rounded my-2
}

*:focus {
    @apply outline-none
}

@layer base {
    :root {
        --swiper-theme-color: #73bf44;
    }

    .swiper-button-next, .swiper-rtl .swiper-button-prev, .swiper-button-prev, .swiper-rtl .swiper-button-next {
        @apply z-50
    }
}

img {
    @apply select-none relative overflow-hidden before:absolute before:w-full before:h-full before:content-[''] before:block before:top-0 before:left-0 before:right-0 before:bottom-0
}

.error-msg {
    @apply bg-rose-100 text-rose-500 rounded border border-rose-500/20 p-1.5 px-2 my-1
}

.error-input {
    @apply border border-rose-500 focus:border-rose-500 focus:border
}

.content-body {
    @apply flex flex-col gap-4 bg-[#fcfcfc] border border-gray-300/30 p-7 rounded-lg
}

.form-item label {
    @apply block mb-2 text-gray-900 text-sm
}

.form-item small {
    @apply mt-1.5 !text-red-500 text-sm
}

.form-item input:not([type="radio"]):not([type="checkbox"]), .form-item textarea, .form-item select {
    @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-full block w-full py-2.5 px-5 focus:outline-none focus:border-gray-400 focus:bg-gray-100 transition duration-300 appearance-none
}

.form-item .select2-selection__rendered{
    @apply rounded-full
}

.form-item input[type="range"] {
    @apply before:content-[''] before:w-[calc(100%-1.5rem)] before:h-1 before:bg-[#0075ff] before:rounded before:block before:absolute relative before:top-2/4 before:-translate-y-2/4 before:z-0 z-30 overflow-hidden
}

.aside-navigation {
    @apply flex flex-col gap-1
}

.aside-navigation li a {
    @apply rounded-xl text-gray-900 px-5 py-2.5 w-full flex gap-2 items-center hover:bg-gray-100 transition duration-300
}

.aside-navigation li a.active {
    @apply bg-gray-100
}

[type="checkbox"], [type="radio"] {
    --tw-shadow: 0 0 #0000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-origin: border-box;
    border-color: #6b7280;
    border-width: 1px;
    color: #1c64f2;
    display: inline-block;
    flex-shrink: 0;
    height: 1rem;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
    width: 1rem
}

[type="checkbox"] {
    border-radius: 0.25rem
}

[type="radio"] {
    border-radius: 100%
}

[type="checkbox"]:focus, [type="radio"]:focus {
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px
}

[type="checkbox"]:checked, [type="radio"]:checked {
    background-color: currentColor;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: .55em .55em;
    border-color: transparent
}

[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 50%;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
}

[type="checkbox"]:indeterminate {
    background-color: currentColor;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: .55em .55em;
    border-color: transparent;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
}

[type="checkbox"]:indeterminate:focus, [type="checkbox"]:indeterminate:hover {
    background-color: currentColor;
    border-color: transparent
}

table.features-table tbody tr td {
    @apply lg:py-5 py-2.5 px-0 lg:pr-10 pr-4
}

table.features-table tbody tr td.table-key {
    @apply text-zinc-900 font-bold lg:text-base text-sm
}

table.features-table tbody tr td.table-value {
    @apply text-neutral-600 font-medium lg:text-base text-sm
}

table.features-table tbody tr:not(:last-child) {
    @apply border-b border-[#CCCCCC]
}

form.form-container {
    @apply flex flex-col gap-4
}

.divider {
    @apply relative inline-block bg-[#fcfcfc]  text-center after:content-[''] after:h-[1px] after:bg-zinc-200 after:w-full after:block after:top-2/4 after:absolute h-6 after:rounded
}

.divider span {
    @apply absolute top-2/4 right-2/4 translate-x-2/4 -translate-y-2/4 bg-[#fcfcfc] z-50 px-3
}

[data-href] {
    @apply cursor-pointer
}


.swiper-button-disabled {
    @apply opacity-50
}

.evMtho {
    display: none !important;
}

.ce9e15551dcef8f03d22b9f331b0417f {
    position: fixed;
    top: 50%;
    left: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 99999999999999999999999999999999999999999999999999999999;
    background: #232323;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #dddddd;
    font-size: 20px;
    text-align: center;
}

a.gflag {
    vertical-align: middle;
    font-size: 12pt;
    padding: 1px 0;
    background-repeat: no-repeat;
    background-image: url(//gtranslate.net/flags/32.png);
}

a.gflag img {
    border: 0;
}

#goog-gt-tt {
    display: none !important;
}

.goog-te-banner-frame {
    display: none !important;
}

.goog-te-menu-value:hover {
    text-decoration: none !important;
}

body {
    top: 0 !important;
}

#google_translate_element2 {
    display: none !important;
}

div #lang {
    margin-left: 3px;
    font-family: sans-serif;
    text-decoration: none;
    padding: 5px;
}

div .gray-lang {
    color: #239fda;

    border-radius: 5px;
    background: rgb(0, 155, 216);

}

div .black-lang {
    color: #239fda;
    border-radius: 5px;
    background: rgba(0, 155, 216, 0);
}

.skiptranslate iframe {
    display: none !important;
    opacity: 0;
    position: fixed;
    top: -400000px;
    left: -400000px;
    height: 0;
    width: 0;
}

.swiper-button-next {
    @apply bg-primary-700 text-primary-200 !w-[42px] !h-[42px] rounded-full
}

.swiper-button-next::after {
    @apply !text-primary-200 !text-lg ml-0.5
}


.swiper-button-prev {
    @apply bg-primary-700 text-primary-200 !w-[42px] !h-[42px] rounded-full
}

.swiper-button-prev::after {
    @apply !text-primary-200 !text-lg mr-0.5
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    @apply !bg-primary-700
}

.swiper-pagination-bullet {
    @apply !bg-primary-200 !opacity-100
}

[data-role="variants-container"] .variants-list {
    @apply flex flex-col rounded-lg border border-gray-300
}

[data-role="variants-container"] .variants-list li {
    @apply px-4 py-3 flex justify-between items-center
}

[data-role="variants-container"] .variants-list li div[data-role="name"] {
    @apply flex-1
}

[data-role="variants-container"] .variants-list li:not(:last-child) {
    @apply border-b border-gray-300
}

.custom-toggle input {
    @apply hidden
}

.custom-toggle input:checked + label {
    @apply before:translate-x-full
}

.custom-toggle label {
    @apply h-5 w-9 p-0.5 cursor-pointer rounded-full bg-gray-500 block relative before:w-4 before:h-4 before:absolute before:top-0.5 before:transition before:duration-200 before:rounded-full before:left-0.5 before:bg-white before:block before:content-['']
}


table.table-list {
    @apply table-auto w-full
}

table.table-list thead tr th {
    @apply px-4 py-2
}


table.table-list tbody tr:nth-child(even) td:last-child {
    @apply bg-white rounded-r px-4 py-2 text-gray-500
}

table.table-list tbody tr:nth-child(even) td:first-child {
    @apply bg-white rounded-l px-4 py-2 text-gray-700 font-medium
}

table.table-list tbody tr:nth-child(odd) td:last-child {
    @apply bg-gray-100 rounded-r px-4 py-2 text-gray-500
}

table.table-list tbody tr:nth-child(odd) td:first-child {
    @apply bg-gray-100 rounded-l px-4 py-2 text-gray-700 font-medium
}


table.installment-table {
    @apply table-auto w-full text-center border border-2 border-gray-100
}

table.installment-table th, table.installment-table td {
    @apply border border-2 border-gray-100 text-gray-700 py-1 text-sm
}

table.installment-table td:not(:first-child) {
    @apply font-bold
}

table.installment-table th {
    @apply font-normal py-2
}

.swiper-slide * {
    @apply select-none
}

.short-description, .short-description * {
    @apply text-lg font-light leading-8
}

#product-per-view .swiper-scrollbar{
    background-color: #f1f9ff!important;
}

#product-per-view .swiper-scrollbar .swiper-scrollbar-drag{
    background-color: #1979c1!important;
}