/*!*******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/style.scss ***!
  \*******************************************************************************************************************************************************************************/

@font-face {
    font-family: "IRANYekan";
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src: url("assets/compat/fonts/iranyekan/woff2/IRANYekanXFaNum-Light.woff2") format("woff2");
}

@font-face {
    font-family: "IRANYekan";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("assets/compat/fonts/iranyekan/woff2/IRANYekanXFaNum-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "IRANYekan";
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url("assets/compat/fonts/iranyekan/woff2/IRANYekanXFaNum-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "IRANYekan";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("assets/compat/fonts/iranyekan/woff2/IRANYekanXFaNum-DemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "IRANYekan";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("assets/compat/fonts/iranyekan/woff2/IRANYekanXFaNum-Bold.woff2") format("woff2");
}

/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/style.scss (1) ***!
  \***********************************************************************************************************************************************************************************/

/*---------------------------------------
    Template Name:   ClickMart -  HTML Mobile Template
    Description:    Ecommerce HTML PWA Mobile Template
    Author Name:    Pixelaxis
    Author URI:     https://themeforest.net/user/pixelaxis
    Theme URI:      
    Version:        1.0
-----------------------------------------
             Table of contents
-----------------------------------------
Tailwind Import
Google font Import
Body Styles
Scrollbar Animation
Typography
Main Container styles
Margin Padding
Circle Wave Animation
Swiper Styles
OTP Styles
Keyframe Animations
---------------------------------------*/

/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
    box-sizing: border-box;
    /* 1 */
    border-width: 0;
    /* 2 */
    border-style: solid;
    /* 2 */
    border-color: #e5e7eb;
    /* 2 */
}

::before,
::after {
    --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
    line-height: 1.5;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -moz-tab-size: 4;
    /* 3 */
    -o-tab-size: 4;
    tab-size: 4;
    /* 3 */
    font-family: "IRANYekan", Tahoma, Arial, sans-serif;
    /* 4 */
    font-feature-settings: normal;
    /* 5 */
    font-variation-settings: normal;
    /* 6 */
    -webkit-tap-highlight-color: transparent;
    /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
    margin: 0;
    /* 1 */
    line-height: inherit;
    /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
    height: 0;
    /* 1 */
    color: inherit;
    /* 2 */
    border-top-width: 1px;
    /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
    color: inherit;
    text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 1 */
    font-feature-settings: normal;
    /* 2 */
    font-variation-settings: normal;
    /* 3 */
    font-size: 1em;
    /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
    text-indent: 0;
    /* 1 */
    border-color: inherit;
    /* 2 */
    border-collapse: collapse;
    /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-feature-settings: inherit;
    /* 1 */
    font-variation-settings: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    font-weight: inherit;
    /* 1 */
    line-height: inherit;
    /* 1 */
    letter-spacing: inherit;
    /* 1 */
    color: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
    padding: 0;
    /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
    -webkit-appearance: button;
    /* 1 */
    background-color: transparent;
    /* 2 */
    background-image: none;
    /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
    outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
    box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
    padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
    resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    /* 1 */
    color: #9ca3af;
    /* 2 */
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    /* 1 */
    color: #9ca3af;
    /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
    cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
    cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    /* 1 */
    vertical-align: middle;
    /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
    max-width: 100%;
    height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
    display: none;
}

*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
    --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
    --tw-shadow: 0 0 rgba(0, 0, 0, 0);
    --tw-shadow-colored: 0 0 rgba(0, 0, 0, 0);
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
    --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
    --tw-shadow: 0 0 rgba(0, 0, 0, 0);
    --tw-shadow-colored: 0 0 rgba(0, 0, 0, 0);
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

.container {
    width: 100%;
}

@media (min-width: 576px) {
    .container {
        max-width: 576px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 992px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
    }
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    padding: 0px;
    line-height: 120%;
}

p {
    line-height: 150%;
}

.display-3 {
    font-size: 28px;
}

.heading-1 {
    font-size: 1.5rem;
    line-height: 2rem;
}

.s-body {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Main Container styles */
.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 430px;
}

/* stp = section top padding, sbp= section bottom padding */

/* Faq section start */

/* Modal create */

.modalOpen {
    visibility: visible;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1) scaleY(1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
}

.modalClose {
    visibility: hidden;
    --tw-scale-x: 0;
    --tw-scale-y: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(0) scaleY(0);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
}

/* How it works border */

.primaryButton {
    margin-top: 0.75rem;
    display: block;
    cursor: pointer;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(63, 63, 63, 1);
    border-color: rgba(63, 63, 63, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(63, 63, 63, 1);
    background-color: rgba(63, 63, 63, var(--tw-bg-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.primaryButtonOutline {
    margin-top: 0.75rem;
    display: block;
    cursor: pointer;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(217, 217, 217, 1);
    border-color: rgba(217, 217, 217, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(246, 246, 246, 1);
    background-color: rgba(246, 246, 246, var(--tw-bg-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgba(63, 63, 63, 1);
    color: rgba(63, 63, 63, var(--tw-text-opacity));
}

/* otp form */

.otp-form-item {
    width: 60px;
    height: 60px;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(217, 217, 217, 1);
    border-color: rgba(217, 217, 217, var(--tw-border-opacity));
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.otp-form-item:focus {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(63, 63, 63, 1);
    border-color: rgba(63, 63, 63, var(--tw-border-opacity));
}

/* Active Tab Item */

.activeTabButton {
    --tw-border-opacity: 1 !important;
    border-color: rgba(63, 63, 63, 1) !important;
    border-color: rgba(63, 63, 63, var(--tw-border-opacity)) !important;
    --tw-text-opacity: 1;
    color: rgba(63, 63, 63, 1);
    color: rgba(63, 63, 63, var(--tw-text-opacity));
}

.activeTab {
    animation: fadeDown 0.5s linear;
}

.hiddenTab {
    display: none;
    animation: fadeDown2 0.5s linear;
}

/* Radio Button */

/* logout modal */

.openLogoutModal {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* filter mOdla */

.filterModalOpen {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

/* sidebar modal */

/* Select Game Header */

/* Select Date Header */

/* radio button */

.radioItems .item .circle-outer {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(217, 217, 217, 1);
    border-color: rgba(217, 217, 217, var(--tw-border-opacity));
    padding: 0.125rem;
}

.radioItems .item .circle-outer .circle-inner {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(217, 217, 217, 1);
    border-color: rgba(217, 217, 217, var(--tw-border-opacity));
}

.radioItems .item.active .circle-outer {
    --tw-border-opacity: 1;
    border-color: rgba(63, 63, 63, 1);
    border-color: rgba(63, 63, 63, var(--tw-border-opacity));
}

.radioItems .item.active .circle-inner {
    --tw-border-opacity: 1;
    border-color: rgba(63, 63, 63, 1);
    border-color: rgba(63, 63, 63, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(63, 63, 63, 1);
    background-color: rgba(63, 63, 63, var(--tw-bg-opacity));
}

/* product select Item */

.productCategoryList .item {
    cursor: pointer;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgba(246, 246, 246, 1);
    background-color: rgba(246, 246, 246, var(--tw-bg-opacity));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    --tw-text-opacity: 1;
    color: rgba(105, 105, 105, 1);
    color: rgba(105, 105, 105, var(--tw-text-opacity));
}

.productCategoryList .item.active {
    --tw-bg-opacity: 1;
    background-color: rgba(63, 63, 63, 1);
    background-color: rgba(63, 63, 63, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.modalOpenFromBottom {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    max-width: 430px;
}

.modalCloseFromBottom {
    display: none;
}

/*rounded switch */

.rounded-switch {
    position: relative;
    height: 1.5rem;
    width: 2.75rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgba(217, 217, 217, 1);
    background-color: rgba(217, 217, 217, var(--tw-bg-opacity));
    transition-duration: 500ms;
}

.rounded-switch .inner-circle {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    transition-duration: 500ms;
}

.rounded-switch.active {
    --tw-bg-opacity: 1;
    background-color: rgba(63, 63, 63, 1);
    background-color: rgba(63, 63, 63, var(--tw-bg-opacity));
}

.rounded-switch.active .inner-circle {
    left: calc(100% - 22px);
}

/*color select*/

.productColor .item {
    cursor: pointer;
    border-radius: 0.375rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
    padding: 1px;
}

.productColor .item.active {
    --tw-border-opacity: 1;
    border-color: rgba(63, 63, 63, 1);
    border-color: rgba(63, 63, 63, var(--tw-border-opacity));
}

.visible {
    visibility: visible;
}

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

.inset-0 {
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.-bottom-\[38px\] {
    bottom: -38px;
}

.-right-16 {
    right: -4rem;
}

.bottom-0 {
    bottom: 0px;
}

.bottom-10 {
    bottom: 2.5rem;
}

.bottom-2 {
    bottom: 0.5rem;
}

.bottom-2\.5 {
    bottom: 0.625rem;
}

.bottom-20 {
    bottom: 5rem;
}

.bottom-52 {
    bottom: 13rem;
}

.bottom-8 {
    bottom: 2rem;
}

.left-0 {
    left: 0px;
}

.left-6 {
    left: 1.5rem;
}

.left-\[9px\] {
    left: 9px;
}

.right-0 {
    right: 0px;
}

.right-3 {
    right: 0.75rem;
}

.top-0 {
    top: 0px;
}

.top-0\.5 {
    top: 0.125rem;
}

.top-16 {
    top: 4rem;
}

.top-3 {
    top: 0.75rem;
}

.top-6 {
    top: 1.5rem;
}

.top-7 {
    top: 1.75rem;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-50 {
    z-index: 50;
}

.z-\[500\] {
    z-index: 500;
}

.col-span-1 {
    grid-column: span 1 / span 1;
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.\ !mt-0 {
    margin-top: 0px !important;
}

.-mt-9 {
    margin-top: -2.25rem;
}

.-mt-\[11px\] {
    margin-top: -11px;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.ml-9 {
    margin-left: 2.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-8 {
    margin-top: 2rem;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.table {
    display: table;
}

.grid {
    display: grid;
}

.contents {
    display: contents;
}

.hidden {
    display: none;
}

.size-10 {
    width: 2.5rem;
    height: 2.5rem;
}

.size-12 {
    width: 3rem;
    height: 3rem;
}

.size-14 {
    width: 3.5rem;
    height: 3.5rem;
}

.size-16 {
    width: 4rem;
    height: 4rem;
}

.size-2 {
    width: 0.5rem;
    height: 0.5rem;
}

.size-20 {
    width: 5rem;
    height: 5rem;
}

.size-28 {
    width: 7rem;
    height: 7rem;
}

.size-3 {
    width: 0.75rem;
    height: 0.75rem;
}

.size-32 {
    width: 8rem;
    height: 8rem;
}

.size-8 {
    width: 2rem;
    height: 2rem;
}

.size-9 {
    width: 2.25rem;
    height: 2.25rem;
}

.h-0 {
    height: 0px;
}

.h-1 {
    height: 0.25rem;
}

.h-1\.5 {
    height: 0.375rem;
}

.h-10 {
    height: 2.5rem;
}

.h-2 {
    height: 0.5rem;
}

.h-2\.5 {
    height: 0.625rem;
}

.h-36 {
    height: 9rem;
}

.h-4 {
    height: 1rem;
}

.h-8 {
    height: 2rem;
}

.h-\[100vh\] {
    height: 100vh;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.max-h-\[50\%\] {
    max-height: 50%;
}

.min-h-28 {
    min-height: 7rem;
}

.min-h-screen {
    min-height: 100vh;
}

.w-0 {
    width: 0px;
}

.w-1 {
    width: 0.25rem;
}

.w-1\.5 {
    width: 0.375rem;
}

.w-12 {
    width: 3rem;
}

.w-14 {
    width: 3.5rem;
}

.w-2 {
    width: 0.5rem;
}

.w-2\.5 {
    width: 0.625rem;
}

.w-28 {
    width: 7rem;
}

.w-4 {
    width: 1rem;
}

.w-6 {
    width: 1.5rem;
}

.w-\[120px\] {
    width: 120px;
}

.w-\[140px\] {
    width: 140px;
}

.w-\[150px\] {
    width: 150px;
}

.w-\[170px\] {
    width: 170px;
}

.w-\[1px\] {
    width: 1px;
}

.w-\[200px\] {
    width: 200px;
}

.w-\[340px\] {
    width: 340px;
}

.w-fit {
    width: -moz-fit-content;
    width: fit-content;
}

.w-full {
    width: 100%;
}

.min-w-\[75\%\] {
    min-width: 75%;
}

.max-w-\[380px\] {
    max-width: 380px;
}

.max-w-\[430px\] {
    max-width: 430px;
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
    cursor: pointer;
}

.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.resize {
    resize: both;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-start {
    align-items: flex-start;
}

.\ !items-end {
    align-items: flex-end !important;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.justify-start {
    justify-content: flex-start;
}

.\ !justify-end {
    justify-content: flex-end !important;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

.text-nowrap {
    text-wrap: nowrap;
}

.\ !rounded-md {
    border-radius: 0.375rem !important;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-t-2xl {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.rounded-t-3xl {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}

.border {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-l {
    border-left-width: 1px;
}

.border-r {
    border-right-width: 1px;
}

.border-t {
    border-top-width: 1px;
}

.border-dashed {
    border-style: dashed;
}

.\ !border-g60 {
    --tw-border-opacity: 1 !important;
    border-color: rgba(63, 63, 63, 1) !important;
    border-color: rgba(63, 63, 63, var(--tw-border-opacity)) !important;
}

.border-g30 {
    --tw-border-opacity: 1;
    border-color: rgba(217, 217, 217, 1);
    border-color: rgba(217, 217, 217, var(--tw-border-opacity));
}

.border-g50 {
    --tw-border-opacity: 1;
    border-color: rgba(105, 105, 105, 1);
    border-color: rgba(105, 105, 105, var(--tw-border-opacity));
}

.border-g60 {
    --tw-border-opacity: 1;
    border-color: rgba(63, 63, 63, 1);
    border-color: rgba(63, 63, 63, var(--tw-border-opacity));
}

.border-white {
    --tw-border-opacity: 1;
    border-color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
}

.\ !bg-white {
    --tw-bg-opacity: 1 !important;
    background-color: rgba(255, 255, 255, 1) !important;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgba(0, 0, 0, 1);
    background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}

.bg-black\/40 {
    background-color: rgba(0, 0, 0, 0.4);
}

.bg-g10 {
    --tw-bg-opacity: 1;
    background-color: rgba(232, 232, 232, 1);
    background-color: rgba(232, 232, 232, var(--tw-bg-opacity));
}

.bg-g20 {
    --tw-bg-opacity: 1;
    background-color: rgba(246, 246, 246, 1);
    background-color: rgba(246, 246, 246, var(--tw-bg-opacity));
}

.bg-g30 {
    --tw-bg-opacity: 1;
    background-color: rgba(217, 217, 217, 1);
    background-color: rgba(217, 217, 217, var(--tw-bg-opacity));
}

.bg-g40 {
    --tw-bg-opacity: 1;
    background-color: rgba(157, 157, 157, 1);
    background-color: rgba(157, 157, 157, var(--tw-bg-opacity));
}

.bg-g50 {
    --tw-bg-opacity: 1;
    background-color: rgba(105, 105, 105, 1);
    background-color: rgba(105, 105, 105, var(--tw-bg-opacity));
}

.bg-g60 {
    --tw-bg-opacity: 1;
    background-color: rgba(63, 63, 63, 1);
    background-color: rgba(63, 63, 63, var(--tw-bg-opacity));
}

.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(34, 197, 94, 1);
    background-color: rgba(34, 197, 94, var(--tw-bg-opacity));
}

.bg-red-400 {
    --tw-bg-opacity: 1;
    background-color: rgba(248, 113, 113, 1);
    background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
}

.bg-sky-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(14, 165, 233, 1);
    background-color: rgba(14, 165, 233, var(--tw-bg-opacity));
}

.bg-transparent {
    background-color: transparent;
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.bg-yellow-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(234, 179, 8, 1);
    background-color: rgba(234, 179, 8, var(--tw-bg-opacity));
}

.bg-opacity-40 {
    --tw-bg-opacity: 0.4;
}

.p-0 {
    padding: 0px;
}

.p-0\.5 {
    padding: 0.125rem;
}

.p-1 {
    padding: 0.25rem;
}

.p-1\.5 {
    padding: 0.375rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-2\.5 {
    padding: 0.625rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-px {
    padding: 1px;
}

.\ !py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.\ !py-1\.5 {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.\ !py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-\[14px\] {
    padding-left: 14px;
    padding-right: 14px;
}

.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.\ !pt-4 {
    padding-top: 1rem !important;
}

.pb-10 {
    padding-bottom: 2.5rem;
}

.pb-12 {
    padding-bottom: 3rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-24 {
    padding-bottom: 6rem;
}

.pb-28 {
    padding-bottom: 7rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pb-7 {
    padding-bottom: 1.75rem;
}

.pb-8 {
    padding-bottom: 2rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

.pl-6 {
    padding-left: 1.5rem;
}

.pr-3 {
    padding-right: 0.75rem;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-10 {
    padding-top: 2.5rem;
}

.pt-16 {
    padding-top: 4rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-20 {
    padding-top: 5rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-8 {
    padding-top: 2rem;
}

.text-center {
    text-align: center;
}

.\ !text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400;
}

.font-semibold {
    font-weight: 600;
}

.\ !leading-none {
    line-height: 1 !important;
}

.leading-none {
    line-height: 1;
}

.text-g30 {
    --tw-text-opacity: 1;
    color: rgba(217, 217, 217, 1);
    color: rgba(217, 217, 217, var(--tw-text-opacity));
}

.text-g40 {
    --tw-text-opacity: 1;
    color: rgba(157, 157, 157, 1);
    color: rgba(157, 157, 157, var(--tw-text-opacity));
}

.text-g50 {
    --tw-text-opacity: 1;
    color: rgba(105, 105, 105, 1);
    color: rgba(105, 105, 105, var(--tw-text-opacity));
}

.text-g60 {
    --tw-text-opacity: 1;
    color: rgba(63, 63, 63, 1);
    color: rgba(63, 63, 63, var(--tw-text-opacity));
}

.text-white {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.underline {
    text-decoration-line: underline;
}

.line-through {
    text-decoration-line: line-through;
}

.opacity-0 {
    opacity: 0;
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.blur {
    --tw-blur: blur(8px);
    filter: blur(8px) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) invert(100%) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

/* body styles */

body {
    margin: 0;
    padding: 0;
    font-family: "IRANYekan", Tahoma, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    color: black;
}

/* Scrollbar Animation */

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #e8e8e8;
    height: 2px;
}

::-webkit-scrollbar {
    width: 4px;
    background-color: #e8e8e8;
    height: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: #3f3f3f;
    border-radius: 3px;
    height: 2px;
    width: 20%;
}

.horizontal-slide::-webkit-scrollbar {
    display: none;
}

.voucher-slide::-webkit-scrollbar {
    display: none;
}

.liner-bg-1 {
    background: linear-gradient(261deg, #c0bed3 1.2%, #cccbdd 26.08%, #f4f7ff 108.33%);
}

.shadow-1 {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
}

.shadow-2 {
    box-shadow: -81px 312px 90px 0px rgba(0, 0, 0, 0), -52px 200px 83px 0px rgba(0, 0, 0, 0.01), -29px 112px 70px 0px rgba(0, 0, 0, 0.05), -13px 50px 52px 0px rgba(0, 0, 0, 0.09), -3px 12px 28px 0px rgba(0, 0, 0, 0.1);
}

.shadow-3 {
    box-shadow: 0px 8px 30px 0px rgba(58, 58, 58, 0.1);
}

/* Circle Wave Animation */

.wave-animation {
    z-index: 49;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 140px;
    border-radius: 100%;
    color: white;
    position: relative;
}

@keyframes waves {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 0.2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    50% {
        opacity: 0.7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

.waves {
    position: absolute;
    width: 204px;
    height: 204px;
    background: #d9d9d9;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    border-radius: 100%;
    z-index: -1;
    animation: waves 3s ease-in-out infinite;
}

.wave-1 {
    animation-delay: 0s;
}

.wave-2 {
    animation-delay: 0.4s;
}

.wave-3 {
    animation-delay: 0.8s;
}

/* swiper */

.swiper-pagination {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    position: relative !important;
}

.swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background-color: #3f3f3f;
}

.swiper-pagination-bullet-active {
    background-color: #3f3f3f;
    width: 20px;
    height: 6px;
    border-radius: 3px;
}

/* OTP */

.checkbox.style-c input:checked~.checkbox__checkmark {
    background-color: #3f3f3f;
}

.checkbox.style-c input:checked~.checkbox__checkmark:after {
    opacity: 1;
}

.checkbox.style-c:hover input~.checkbox__checkmark {
    background-color: #eee;
}

.checkbox.style-c:hover input:checked~.checkbox__checkmark {
    background-color: #3f3f3f;
}

/* Keyframe animation */

.circle {
    animation: circleAnimation 15s linear infinite;
}

.zoomInOut {
    animation: zoomInOutAnimation 10s linear infinite;
}

.jumping1 {
    animation: jumpingImage1 3s linear infinite;
}

.jumping2 {
    animation: jumpingImage2 3s linear infinite;
}

.slideRight {
    animation: slideRight 3s linear infinite;
}

.slideLeft {
    animation: slideLeft 3s linear infinite;
}

.animationTwo {
    animation: fadeDown2 0.5s linear;
}

.lineAnimation {
    animation: line 3s;
}

.animationOne {
    animation: fadeDown 0.5s linear;
}

@keyframes circleAnimation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes zoomInOutAnimation {
    50% {
        transform: scale(0.9);
    }
}

@keyframes jumpingImage1 {
    50% {
        transform: translateY(10px);
    }
}

@keyframes jumpingImage2 {
    50% {
        transform: translateY(-10px);
    }
}

@keyframes slideRight {
    50% {
        transform: translateX(10px);
    }
}

@keyframes slideLeft {
    50% {
        transform: translateX(-10px);
    }
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown2 {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes line {
    0% {
        width: 0%;
    }
    100% {
        width: auto;
    }
}

.placeholder\:text-sm::-moz-placeholder {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.placeholder\:text-sm::placeholder {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.placeholder\:text-xs::-moz-placeholder {
    font-size: 0.75rem;
    line-height: 1rem;
}

.placeholder\:text-xs::placeholder {
    font-size: 0.75rem;
    line-height: 1rem;
}

.placeholder\:text-g50::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgba(105, 105, 105, 1);
    color: rgba(105, 105, 105, var(--tw-text-opacity));
}

.placeholder\:text-g50::placeholder {
    --tw-text-opacity: 1;
    color: rgba(105, 105, 105, 1);
    color: rgba(105, 105, 105, var(--tw-text-opacity));
}

.after\:absolute::after {
    content: var(--tw-content);
    position: absolute;
}

.after\:left-0::after {
    content: var(--tw-content);
    left: 0px;
}

.after\:left-\[5px\]::after {
    content: var(--tw-content);
    left: 5px;
}

.after\:top-\[0px\]::after {
    content: var(--tw-content);
    top: 0px;
}

.after\:h-2::after {
    content: var(--tw-content);
    height: 0.5rem;
}

.after\:h-\[12px\]::after {
    content: var(--tw-content);
    height: 12px;
}

.after\:w-\[100\%\]::after {
    content: var(--tw-content);
    width: 100%;
}

.after\:w-\[20\%\]::after {
    content: var(--tw-content);
    width: 20%;
}

.after\:w-\[40\%\]::after {
    content: var(--tw-content);
    width: 40%;
}

.after\:w-\[5px\]::after {
    content: var(--tw-content);
    width: 5px;
}

.after\:w-\[60\%\]::after {
    content: var(--tw-content);
    width: 60%;
}

.after\:w-\[80\%\]::after {
    content: var(--tw-content);
    width: 80%;
}

.after\:rotate-45::after {
    content: var(--tw-content);
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(45deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.after\:rounded-full::after {
    content: var(--tw-content);
    border-radius: 9999px;
}

.after\:border-b-\[2px\]::after {
    content: var(--tw-content);
    border-bottom-width: 2px;
}

.after\:border-l-0::after {
    content: var(--tw-content);
    border-left-width: 0px;
}

.after\:border-r-\[2px\]::after {
    content: var(--tw-content);
    border-right-width: 2px;
}

.after\:border-t-0::after {
    content: var(--tw-content);
    border-top-width: 0px;
}

.after\:bg-g60::after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgba(63, 63, 63, 1);
    background-color: rgba(63, 63, 63, var(--tw-bg-opacity));
}

.after\:opacity-0::after {
    content: var(--tw-content);
    opacity: 0;
}

.after\:duration-500::after {
    content: var(--tw-content);
    transition-duration: 500ms;
}

.hover\:font-medium:hover {
    font-weight: 500;
}

.hover\:text-g60:hover {
    --tw-text-opacity: 1;
    color: rgba(63, 63, 63, 1);
    color: rgba(63, 63, 63, var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
    .dark\:bg-black {
        --tw-bg-opacity: 1;
        background-color: rgba(0, 0, 0, 1);
        background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
    }
    .dark\:bg-white\/20 {
        background-color: rgba(255, 255, 255, 0.2);
    }
    .dark\:text-white {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, 1);
        color: rgba(255, 255, 255, var(--tw-text-opacity));
    }
}
/* ============================================================
   RTL support
   Full interface mirroring for Arabic/Persian/Hebrew layouts.
   Keep this section after the generated utility CSS so these
   rules intentionally override physical LTR utilities.
   ============================================================ */
html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
    direction: rtl;
}

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}


/* Keep intrinsically LTR data readable while aligning it to the RTL edge. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[inputmode="numeric"],
html[dir="rtl"] .otp-form-item {
    direction: ltr;
    text-align: right;
}

/* Preserve centered utility content. */
html[dir="rtl"] .text-center {
    text-align: center;
}

/* Absolute positioning utilities: mirror only one-sided anchors.
   Elements that intentionally use both sides stay stretched/centered. */
html[dir="rtl"] .right-0:not(.left-0) {
    right: auto;
    left: 0;
}

html[dir="rtl"] .left-0:not(.right-0) {
    left: auto;
    right: 0;
}

html[dir="rtl"] .left-0.right-0,
html[dir="rtl"] .right-0.left-0 {
    left: 0;
    right: 0;
}

html[dir="rtl"] .right-3 {
    right: auto;
    left: 0.75rem;
}

html[dir="rtl"] .left-6 {
    left: auto;
    right: 1.5rem;
}

html[dir="rtl"] .left-\[9px\] {
    left: auto;
    right: 9px;
}

html[dir="rtl"] .-right-16 {
    right: auto;
    left: -4rem;
}

/* Physical margin/padding utilities used by this template. */
html[dir="rtl"] .ml-9 {
    margin-left: 0;
    margin-right: 2.25rem;
}

html[dir="rtl"] .pl-3 {
    padding-left: 0;
    padding-right: 0.75rem;
}

html[dir="rtl"] .pl-4 {
    padding-left: 0;
    padding-right: 1rem;
}

html[dir="rtl"] .pl-5 {
    padding-left: 0;
    padding-right: 1.25rem;
}

html[dir="rtl"] .pl-6 {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .pr-3 {
    padding-right: 0;
    padding-left: 0.75rem;
}

/* Side borders used as separators. */
html[dir="rtl"] .border-l {
    border-left-width: 0;
    border-right-width: 1px;
}

html[dir="rtl"] .border-r {
    border-right-width: 0;
    border-left-width: 1px;
}

/* Directional navigation icons. We mirror the glyph instead of changing
   semantic class names so JS/event bindings remain untouched. */
html[dir="rtl"] .ph-caret-left,
html[dir="rtl"] .ph-caret-right,
html[dir="rtl"] .ph-arrow-left,
html[dir="rtl"] .ph-arrow-right,
html[dir="rtl"] .ph-caret-double-left,
html[dir="rtl"] .ph-caret-double-right,
html[dir="rtl"] .ph-arrow-circle-left,
html[dir="rtl"] .ph-arrow-circle-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* Checkbox: label spacing and check indicator move to the right. */
html[dir="rtl"] .checkbox.style-c {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .checkbox__checkmark {
    left: auto;
    right: 0;
}

/* Toggle switches should travel in the mirrored direction. */
html[dir="rtl"] .rounded-switch .inner-circle {
    left: auto;
    right: 0.125rem;
}

html[dir="rtl"] .rounded-switch.active .inner-circle {
    left: auto;
    right: calc(100% - 22px);
}

/* Rating/progress bars grow from the right in RTL. */
html[dir="rtl"] .after\:left-0::after {
    left: auto;
    right: 0;
}

/* Track-order decorative arrows and horizontal direction cues. */
html[dir="rtl"] .-right-16 img[src*="dashed-arrow"] {
    transform: scaleX(-1);
}

/* Swiper supports RTL from computed direction; reinforce it on wrappers
   so dragging, slide offsets and pagination follow the page direction. */
html[dir="rtl"] .swiper,
html[dir="rtl"] .swiper-wrapper,
html[dir="rtl"] .swiper-slide {
    direction: rtl;
}

/* Bidirectional-safe text rendering for mixed Persian/Latin content. */
html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] a,
html[dir="rtl"] label,
html[dir="rtl"] span,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea {
    unicode-bidi: plaintext;
}

/* Mirror the few intentionally directional visual effects too. */
html[dir="rtl"] .liner-bg-1 {
    background: linear-gradient(99deg, #c0bed3 1.2%, #cccbdd 26.08%, #f4f7ff 108.33%);
}

html[dir="rtl"] .shadow-2 {
    box-shadow: 81px 312px 90px 0px rgba(0, 0, 0, 0), 52px 200px 83px 0px rgba(0, 0, 0, 0.01), 29px 112px 70px 0px rgba(0, 0, 0, 0.05), 13px 50px 52px 0px rgba(0, 0, 0, 0.09), 3px 12px 28px 0px rgba(0, 0, 0, 0.1);
}

/* Mirror optional horizontal motion helpers when they are used. */
html[dir="rtl"] .slideRight {
    animation-name: slideLeft;
}

html[dir="rtl"] .slideLeft {
    animation-name: slideRight;
}

/* ==========================================================================\n   Hormuz micro-interactions\n   Subtle, mobile-first motion for filters, popovers, dialogs and bottom sheets.\n   ========================================================================== */

:root {
    --hormuz-motion-fast: 160ms;
    --hormuz-motion-normal: 220ms;
    --hormuz-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hormuz-motion-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* Small contextual menus: a short fade/scale instead of the old 0 -> 100% jump. */
.modalOpen,
.modalClose {
    transform-origin: top right;
    transition:
        opacity var(--hormuz-motion-fast) ease,
        transform var(--hormuz-motion-fast) var(--hormuz-motion-ease),
        visibility 0s linear var(--hormuz-motion-fast);
    will-change: transform, opacity;
}

.modalOpen {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.modalClose {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
}

/* Shared overlay entrance. */
.openLogoutModal {
    animation: hormuzOverlayIn var(--hormuz-motion-fast) ease both;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

/* Bottom sheets used by sort, share, gallery, cart edit and buy-now. */
.sortModal.openLogoutModal > div,
.shareModal.openLogoutModal > div,
.buyNowModal.openLogoutModal > div,
.editModal.openLogoutModal > div,
.selectFromGalleryModal.openLogoutModal > div {
    animation: hormuzSheetIn var(--hormuz-motion-normal) var(--hormuz-motion-ease) both;
    transform-origin: bottom center;
    will-change: transform, opacity;
}

.sortModal.hormuz-modal-closing,
.shareModal.hormuz-modal-closing,
.buyNowModal.hormuz-modal-closing,
.editModal.hormuz-modal-closing,
.selectFromGalleryModal.hormuz-modal-closing {
    animation: hormuzOverlayOut var(--hormuz-motion-fast) ease both;
}

.sortModal.hormuz-modal-closing > div,
.shareModal.hormuz-modal-closing > div,
.buyNowModal.hormuz-modal-closing > div,
.editModal.hormuz-modal-closing > div,
.selectFromGalleryModal.hormuz-modal-closing > div {
    animation: hormuzSheetOut 190ms var(--hormuz-motion-exit) both;
}

/* Center dialogs: logout / cancel order. */
.logoutModal.openLogoutModal > div,
.cancelOrderModal.openLogoutModal > div {
    animation: hormuzDialogIn 190ms var(--hormuz-motion-ease) both;
    transform-origin: center;
    will-change: transform, opacity;
}

.logoutModal.hormuz-modal-closing,
.cancelOrderModal.hormuz-modal-closing {
    animation: hormuzOverlayOut var(--hormuz-motion-fast) ease both;
}

.logoutModal.hormuz-modal-closing > div,
.cancelOrderModal.hormuz-modal-closing > div {
    animation: hormuzDialogOut 170ms ease both;
}

/* Full-screen product filter: short slide from the reading edge in RTL. */
.filterModal.filterModalOpen {
    animation: hormuzFilterIn var(--hormuz-motion-normal) var(--hormuz-motion-ease) both;
    will-change: transform, opacity;
}

.filterModal.hormuz-modal-closing {
    animation: hormuzFilterOut 190ms var(--hormuz-motion-exit) both;
}

/* QR/location style bottom modal. */
.modalOpenFromBottom > .relative > div:last-child,
.modalOpenFromBottom > .flex > div:last-child {
    animation: hormuzSheetIn var(--hormuz-motion-normal) var(--hormuz-motion-ease) both;
    transform-origin: bottom center;
    will-change: transform, opacity;
}

.modalOpenFromBottom > .fixed {
    animation: hormuzOverlayIn var(--hormuz-motion-fast) ease both;
}

.modalOpenFromBottom.hormuz-modal-closing > .relative > div:last-child,
.modalOpenFromBottom.hormuz-modal-closing > .flex > div:last-child {
    animation: hormuzSheetOut 190ms var(--hormuz-motion-exit) both;
}

.modalOpenFromBottom.hormuz-modal-closing > .fixed {
    animation: hormuzOverlayOut var(--hormuz-motion-fast) ease both;
}

/* Filter / sort controls get tiny tactile feedback. */
.filterModalButton,
.sortModalButton,
.filterModalCloseButton,
.sortModalCloseButton,
.productCategoryList .item,
.productColor .item,
.radioItems .item {
    transition:
        transform var(--hormuz-motion-fast) var(--hormuz-motion-ease),
        background-color var(--hormuz-motion-fast) ease,
        border-color var(--hormuz-motion-fast) ease,
        color var(--hormuz-motion-fast) ease,
        box-shadow var(--hormuz-motion-fast) ease;
}

.filterModalButton:active,
.sortModalButton:active,
.filterModalCloseButton:active,
.sortModalCloseButton:active,
.productCategoryList .item:active,
.productColor .item:active,
.radioItems .item:active {
    transform: scale(0.96);
}

.productCategoryList .item.hormuz-item-selected,
.productColor .item.hormuz-item-selected,
.radioItems .item.hormuz-item-selected {
    animation: hormuzChipSelect 180ms var(--hormuz-motion-ease) both;
}

/* Drag handles make bottom sheets feel interactive without being distracting. */
.sortModal .w-14.h-1,
.shareModal .w-14.h-1,
.buyNowModal .w-14.h-1,
.editModal .w-14.h-1,
.selectFromGalleryModal .w-14.h-1,
.modalOpenFromBottom .w-14.h-1 {
    transition: transform var(--hormuz-motion-fast) ease, opacity var(--hormuz-motion-fast) ease;
}

.sortModal .w-14.h-1:hover,
.shareModal .w-14.h-1:hover,
.buyNowModal .w-14.h-1:hover,
.editModal .w-14.h-1:hover,
.selectFromGalleryModal .w-14.h-1:hover,
.modalOpenFromBottom .w-14.h-1:hover {
    transform: scaleX(1.08);
    opacity: 0.85;
}

@keyframes hormuzOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hormuzOverlayOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes hormuzSheetIn {
    from {
        opacity: 0.72;
        transform: translateY(18px) scale(0.995);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hormuzSheetOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(14px) scale(0.995);
    }
}

@keyframes hormuzDialogIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.975);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hormuzDialogOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(4px) scale(0.985);
    }
}

@keyframes hormuzFilterIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hormuzFilterOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(14px);
    }
}

@keyframes hormuzChipSelect {
    0% { transform: scale(0.97); }
    65% { transform: scale(1.025); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .modalOpen,
    .modalClose,
    .openLogoutModal,
    .openLogoutModal > div,
    .filterModal.filterModalOpen,
    .filterModal.hormuz-modal-closing,
    .modalOpenFromBottom > *,
    .productCategoryList .item.hormuz-item-selected,
    .productColor .item.hormuz-item-selected,
    .radioItems .item.hormuz-item-selected {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* FAQ panels behave like compact disclosure sheets. */
.faq-accordion {
    cursor: pointer;
}

.faq-accordion + div {
    transition: height 260ms var(--hormuz-motion-ease);
    will-change: height;
}

.faq-accordion-area {
    transition: border-color var(--hormuz-motion-fast) ease, box-shadow var(--hormuz-motion-fast) ease;
}

.faq-accordion-area:has(.faq-accordion + div[style*="height"]) {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.035);
}

@media (prefers-reduced-motion: reduce) {
    .faq-accordion + div,
    .faq-accordion-area {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   Hormuz Stories
   Lightweight, mobile-first stories with seen state.
   ========================================================= */
.hormuz-stories {
    padding-right: 15px;
    position: relative;
}

.hormuz-stories__list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding: 2px 1px 6px;
}

.hormuz-stories__list::-webkit-scrollbar {
    display: none;
}

.hormuz-story {
    flex: 0 0 70px;
    min-width: 0;
    scroll-snap-align: start;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.hormuz-story__ring {
    width: 64px;
    height: 64px;
    margin-inline: auto;
    padding: 2px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #FF5722, #ffa69f 48%, #ff0000);
    transition: transform 180ms var(--hormuz-motion-ease), opacity 180ms ease;
}

.hormuz-story__avatar-wrap {
    /*width: 100%;*/
    /*height: 100%;*/
    width: 60px;
    height: 60px;
    border-radius: inherit;
    padding: 2px;
    background: #fff;
    display: block;
}

.hormuz-story__avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    background: #f4f4f4;
}

.hormuz-story__label {
    display: block;
    margin-top: 6px;
    color: #3f3f3f;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hormuz-story.is-seen .hormuz-story__ring {
    background: #d8d8d8;
}

.hormuz-story:active .hormuz-story__ring {
    transform: scale(0.94);
}

.hormuz-story-lock {
    overflow: hidden !important;
    touch-action: none;
}

.hormuz-story-viewer {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
}

.hormuz-story-viewer.hidden {
    display: none;
}

.hormuz-story-viewer--open {
    animation: hormuzStoryOverlayIn 180ms ease both;
}

.hormuz-story-viewer--closing {
    animation: hormuzStoryOverlayOut 170ms ease both;
}

.hormuz-story-viewer__frame {
    position: relative;
    width: min(100vw, 430px);
    height: 100dvh;
    overflow: hidden;
    background: #121212;
    isolation: isolate;
}

.hormuz-story-viewer--open .hormuz-story-viewer__frame {
    animation: hormuzStoryFrameIn 210ms var(--hormuz-motion-ease) both;
}

.hormuz-story-viewer__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.018);
    opacity: 0;
    transition: opacity 180ms ease, transform 5s linear;
}

.hormuz-story-viewer__media.hormuz-story-media--ready {
    opacity: 1;
    transform: scale(1.06);
}

.hormuz-story-viewer__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.08) 26%, rgba(0, 0, 0, 0.05) 48%, rgba(0, 0, 0, 0.76) 100%);
}

.hormuz-story-viewer__top {
    position: absolute;
    z-index: 5;
    top: max(12px, env(safe-area-inset-top));
    right: 14px;
    left: 14px;
}

.hormuz-story-viewer__progress {
    direction: rtl;
    display: flex;
    gap: 4px;
    height: 3px;
}

.hormuz-story-progress {
    flex: 1 1 0;
    height: 3px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.34);
}

.hormuz-story-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #fff;
}

.hormuz-story-progress.is-complete > span {
    width: 100%;
}

.hormuz-story-progress.is-active > span {
    animation-name: hormuzStoryProgress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.hormuz-story-viewer__meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 11px;
    color: #fff;
}

.hormuz-story-viewer__avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.82);
}

.hormuz-story-viewer__name {
    min-width: 0;
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.hormuz-story-viewer__close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 150ms ease, background-color 150ms ease;
}

.hormuz-story-viewer__close:active {
    transform: scale(0.9);
    background: rgba(0, 0, 0, 0.4);
}

.hormuz-story-viewer__content {
    position: absolute;
    z-index: 4;
    right: 18px;
    left: 18px;
    bottom: max(26px, env(safe-area-inset-bottom));
    color: #fff;
    pointer-events: none;
}

.hormuz-story-viewer__eyebrow {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.82;
}

.hormuz-story-viewer__title {
    max-width: 330px;
    font-size: 24px;
    line-height: 1.45;
    font-weight: 800;
}

.hormuz-story-viewer__text {
    max-width: 340px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.88);
}

.hormuz-story-viewer__cta {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 16px;
    padding: 0 18px;
    border-radius: 12px;
    background: #fff;
    color: #3f3f3f;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    transition: transform 150ms ease;
}

.hormuz-story-viewer__cta:active {
    transform: scale(0.97);
}

.hormuz-story-viewer__nav {
    position: absolute;
    z-index: 3;
    top: 84px;
    bottom: 0;
    border: 0;
    padding: 0;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

.hormuz-story-viewer__nav--prev {
    right: 0;
    width: 34%;
}

.hormuz-story-viewer__nav--next {
    left: 0;
    width: 66%;
}

@keyframes hormuzStoryOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hormuzStoryOverlayOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes hormuzStoryFrameIn {
    from { transform: scale(0.985); }
    to { transform: scale(1); }
}

@keyframes hormuzStoryProgress {
    from { width: 0; }
    to { width: 100%; }
}

@media (min-width: 540px) {
    .hormuz-story-viewer__frame {
        height: min(92dvh, 820px);
        margin-block: auto;
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hormuz-story-viewer--open,
    .hormuz-story-viewer--closing,
    .hormuz-story-viewer--open .hormuz-story-viewer__frame,
    .hormuz-story-progress.is-active > span {
        animation-duration: 0.01ms !important;
    }

    .hormuz-story-viewer__media,
    .hormuz-story__ring,
    .hormuz-story-viewer__close,
    .hormuz-story-viewer__cta {
        transition-duration: 0.01ms !important;
    }
}

/* Shared Hormuz site header */
.hormuz-site-header {
    position: relative;
    z-index: 30;
    width: 100%;
    max-width: 100%;


    background: rgba(255, 255, 255, .50);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    /*max-width: 430px;*/
    margin: 0 auto;
    /*background: #fff;*/
}

.hormuz-site-header__inner {
    min-height: 72px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr minmax(0, 2fr) 1fr;
    align-items: center;
    gap: 8px;
}

.hormuz-site-header__side {
    display: flex;
    align-items: center;
    min-width: 0;
}

.hormuz-site-header__side--start { justify-content: flex-start; }
.hormuz-site-header__side--end { justify-content: flex-end; gap: 8px; }

.hormuz-site-header__brand {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: #3f3f3f;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
}

.hormuz-header-action {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    background: #fff;
    color: #3f3f3f;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.hormuz-header-action i { font-size: 21px; line-height: 1; }
.hormuz-header-action:active { transform: scale(.94); background: #f6f6f6; }

.hormuz-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(20, 20, 20, .38);
    opacity: 0;
    transition: opacity .22s ease;
    backdrop-filter: blur(2px);
}
.hormuz-menu-overlay.is-open { opacity: 1; }

.hormuz-menu-drawer {
    position: fixed;
    z-index: 90;
    top: 0;
    right: max(0px, calc((100vw - 440px) / 2));
    width: min(88vw, 360px);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -18px 0 48px rgba(0, 0, 0, .12);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .24s ease, visibility .24s ease;
}
.hormuz-menu-drawer.is-open { transform: translateX(0); visibility: visible; }

.hormuz-menu-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 16px;
    border-bottom: 1px solid #ededed;
}
.hormuz-menu-drawer__title { display: block; color: #3f3f3f; font-size: 18px; }
.hormuz-menu-drawer__account { margin-top: 4px; color: #858585; font-size: 12px; }

.hormuz-menu-drawer__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
}

.hormuz-menu-link {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    color: #3f3f3f;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    font-weight: 500;
}
.hormuz-menu-link i { color: #858585; font-size: 18px; }

.hormuz-menu-drawer__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #ededed;
}

.hormuz-menu-drawer__primary,
.hormuz-menu-drawer__secondary {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}
.hormuz-menu-drawer__primary { background: #3f3f3f; color: #fff; }
.hormuz-menu-drawer__secondary { border: 1px solid #d9d9d9; color: #3f3f3f; background: #fff; }
.hormuz-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .hormuz-menu-overlay,
    .hormuz-menu-drawer,
    .hormuz-header-action { transition: none; }
}

/* ========================================================================== 
   Hormuz navigation + mobile sheets hardening (v1.3.0)
   ========================================================================== */
:root {
    --hormuz-bottom-nav-height: 0px;
}

.hormuz-site-footer {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    --tw-bg-opacity: 1;
    background-color: rgba(63 63 63 / 80%);
    background-color: rgb(63 63 63 / 80%);
}
/* Keep the shared top bar visible after the promotional banner scrolls away. */
.hormuz-site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    /*background: rgba(255, 255, 255, .96);*/
    /*-webkit-backdrop-filter: blur(12px);*/
    /*backdrop-filter: blur(12px);*/
    border-bottom: 1px solid transparent;
    transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.hormuz-site-header.is-scrolled {
    border-bottom-color: rgba(0, 0, 0, .06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

/* CMS mobile menu, including nested items. */
.hormuz-menu-item {
    border-bottom: 1px solid #f0f0f0;
}

.hormuz-menu-item__row {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hormuz-menu-item__row > .hormuz-menu-link {
    min-width: 0;
    flex: 1 1 auto;
    border-bottom: 0;
}

.hormuz-menu-link--label {
    cursor: default;
}

.hormuz-menu-link__arrow {
    flex: 0 0 42px;
    text-align: center;
    color: #858585;
    font-size: 17px;
}

.hormuz-menu-submenu-toggle {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    color: #696969;
    background: transparent;
    cursor: pointer;
}

.hormuz-menu-submenu-toggle i {
    font-size: 17px;
    transition: transform .2s ease;
}

.hormuz-menu-submenu-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.hormuz-menu-submenu {
    margin: 0 12px 10px 0;
    padding-right: 10px;
    border-right: 2px solid #ececec;
}

.hormuz-menu-submenu .hormuz-menu-item {
    border-bottom-color: #f5f5f5;
}

.hormuz-menu-submenu .hormuz-menu-link {
    min-height: 44px;
    padding-block: 8px;
    font-size: 13px;
}

.hormuz-menu-empty {
    margin: 12px 4px;
    padding: 14px;
    border-radius: 12px;
    background: #f7f7f7;
    color: #858585;
    font-size: 13px;
    line-height: 1.9;
}

/* Real bottom-sheet behavior for sort/filter/share and similar mobile actions. */
.hormuz-bottom-sheet.openLogoutModal,
.hormuz-bottom-sheet.filterModalOpen {
    position: fixed;
    inset: 0;
    z-index: 100 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    overflow: hidden;
    background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    animation: hormuzOverlayIn var(--hormuz-motion-fast) ease both;
}

.hormuz-bottom-sheet__panel {
    width: 100%;
    max-height: min(82dvh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .12);
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

.hormuz-bottom-sheet.openLogoutModal > .hormuz-bottom-sheet__panel,
.hormuz-bottom-sheet.filterModalOpen > .hormuz-bottom-sheet__panel {
    animation: hormuzSheetIn var(--hormuz-motion-normal) var(--hormuz-motion-ease) both;
    transform-origin: bottom center;
    will-change: transform, opacity;
}

.hormuz-bottom-sheet.hormuz-modal-closing {
    animation: hormuzOverlayOut var(--hormuz-motion-fast) ease both;
}

.hormuz-bottom-sheet.hormuz-modal-closing > .hormuz-bottom-sheet__panel {
    animation: hormuzSheetOut 190ms var(--hormuz-motion-exit) both;
}

/* Bottom navigation has an explicit layer and its measured height is shared. */
.hormuz-bottom-nav {
    z-index: 40;
}

.hormuz-bottom-nav__inner {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Never let product CTAs or list controls hide behind the bottom navigation. */
.hormuz-product-purchase-bar {
    bottom: var(--hormuz-bottom-nav-height, 0px) !important;
    z-index: 45;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .08);
    transition: bottom .18s ease;
}

.hormuz-product-list-actions {
    bottom: calc(var(--hormuz-bottom-nav-height, 0px) + 2rem) !important;
    z-index: 35;
    transition: bottom .18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hormuz-site-header,
    .hormuz-menu-submenu-toggle i,
    .hormuz-product-purchase-bar,
    .hormuz-product-list-actions {
        transition: none !important;
    }
}

html.hormuz-sheet-open,
body.hormuz-sheet-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.hormuz-product-details {
    padding-bottom: calc(7rem + var(--hormuz-bottom-nav-height, 0px)) !important;
}