/* FIX ICON OF BUTTON IN RTL */

.material-icons {
    direction: rtl !important;
}

/* END FIX ICON OF BUTTON IN RTL */

/* FIX ICON ON HEADER */

.mirrored-icon {
    transform: scaleX(-1);
}

/* END FIX ICON ON HEADER */

/* CHANGE FONT TO ESTEDAD */ 

@font-face {
	font-display:swap;
	font-family:Estedad;
	font-style:normal;
	font-weight:400;
	src:url(../fonts/Estedad-Medium.woff2) format("woff2")
	}
	
	@font-face {
		font-display:swap;
		font-family:Estedad;
		font-style:normal;
		font-weight:700;src:url(../fonts/Estedad-ExtraBold.woff2) format("woff2")
		}
		
		body.lang-ar,body.lang-fa{
			font-family:Estedad,sans-serif
		}

/* END CHANGE FONT */

/* FIX HEADER OF POP UP BOXES */

.modal-header {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* END FIX HEADER OF POP UP BOXES */

/* FIX POPUP CLOSE BUTTON AND HEADER */

.modal-header .btn-close {
    margin: 0 10px 0 0 !important;
    }

/* END FIX POPUP CLOSE BUTTON AND HEADER */

/* FIX PRICE SHOW IN INDEX */

/* وسط چین کردن آیتم‌ها در ناحیه افزودن به سبد خرید */
.d-flex.flex-wrap.flex-md-nowrap.gap-3.align-items-center.mt-3 {
    justify-content: center;
    /* وسط چین کردن آیتم‌ها در محور افقی */
}

/* وسط چین کردن عدد قیمت و فاصله از بالا */
.product-miniature__prices {
    justify-content: center;
    /* وسط چین کردن متن قیمت */
    margin-top: 16px;
    /* فاصله از بالا */
}

/* END FIX PRICE SHOW IN INDEX */

/* FIX PADDING TOP FOR EMAIL NEWSLETTER SUBSCRIPTION */
.email-subscription__label {
    padding-top: 8px;
}
/* END FIX */


/* =========================================================
   FIX & REDESIGN SEARCH BAR (اصلاح کامل کادر سرچ برای RTL)
   ========================================================= */

/* غیرفعال کردن ضربدر داخلی خود مرورگرها */
#search_widget input::-webkit-search-cancel-button,
#search_widget input::-webkit-search-decoration,
#search_widget input::-webkit-search-results-button,
#search_widget input::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

/* کانتینر ایزوله فرم سرچ */
#search_widget .custom-search-input-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
}

/* کادر تایپ سرچ */
#search_widget input.custom-search-field,
.header__bottom #search_widget input,
.search__offcanvas #search_widget input {
    width: 100% !important;
    height: 42px !important;
    line-height: 42px !important;
    padding-right: 44px !important; /* فاصله متن از آیکون ذره‌بین سمت راست */
    padding-left: 42px !important;  /* فاصله متن از ضربدر سمت چپ */
    border: 1px solid #dcdcdc !important;
    border-radius: 22px !important; /* گردی گوشه‌ها */
    background-color: #ffffff !important;
    color: #333333 !important;
    font-size: 13px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* حالت کلیک و فوکوس - جلوگیری از خط ضخیم مشکی */
#search_widget input.custom-search-field:focus,
#search_widget input.custom-search-field:focus-visible,
#search_widget input.custom-search-field:active,
.header__bottom #search_widget input:focus,
.search__offcanvas #search_widget input:focus {
    border: 1px solid #c0c0c0 !important; /* نگه داشتن ضخامت ۱px خاکستری */
    outline: none !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08) !important; /* سایه نرم و ملایم */
}

/* موقعیت آیکون ذره‌بین (داخل کادر سمت راست - RTL) */
#search_widget .custom-search-input-container .js-search-icon,
#search_widget .custom-search-input-container i.search,
#search_widget .search,
.header__bottom #search_widget .search,
.search__offcanvas #search_widget .search {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) scaleX(-1) !important; /* آیینه کردن جهت آیکون */
    font-size: 20px !important;
    color: #666666 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* موقعیت آیکون ضربدر (داخل کادر سمت چپ) */
#search_widget .custom-search-input-container .custom-search-clear,
#search_widget .clear,
.header__bottom #search_widget .clear,
.search__offcanvas #search_widget .clear {
    position: absolute !important;
    left: 14px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    color: #888888 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important; /* پیش‌فرض مخفی */
    align-items: center !important;
    justify-content: center !important;
}

#search_widget .custom-search-input-container .custom-search-clear:hover,
.header__bottom #search_widget .clear:hover,
.search__offcanvas #search_widget .clear:hover {
    color: #222222 !important;
}

/* ========================================================= */

/* SLIDE of HOME PAGE */
/* ===== Professional Hummingbird Slider ===== */

#index #home-slider {
    max-width: 1110px;
    margin: 40px auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.15);
}

/* حذف کشیده شدن اسلایدر */
#index #home-slider.ratio {
    --bs-aspect-ratio: auto;
}

/* گرد شدن کامل اسلاید */
#index #home-slider .carousel-inner {
    border-radius: 20px;
    overflow: hidden;
}

/* تصویر اسلاید */
#index #home-slider .carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* انیمیشن نرم‌تر */
#index #home-slider .carousel-item {
    transition: transform 0.6s ease-in-out;
}

/* ریسپانسیو */
@media (max-width: 1200px) {
    #index #home-slider {
        max-width: 95%;
        margin: 25px auto;
        border-radius: 16px;
    }
}
/* END SLIDE of HOME PAGE */

/* ===========================
   custom color theme - primary = #e22d2d
   Put this file AFTER theme/bootstrap CSS
   =========================== */

/* --- palette (root) --- */
:root {
    --color-primary: #e22d2d;
    --color-primary-rgb: 226, 45, 45;
    /* used for rgba(...) */
    --color-primary-600: #ca1b1b;
    --color-primary-700: #a61717;
    --color-primary-100: #f7c9c9;
    --color-primary-200: #ef8f8f;
    --color-primary-300: #e96262;

    /* neutral */
    --color-900: #111111;
    --color-800: #2b2b2b;
    --color-600: #6b6b6b;
    --color-400: #d1d1d1;
    --color-200: #f3f3f3;
    --color-100: #fbfbfb;

    /* accent / status */
    --color-accent: #1f6f8b;
    --color-accent-600: #17546b;
    --color-success: #2db56b;
    --color-warning: #ffb020;
    --color-info: #17a2b8;

    /* small UI vars */
    --border-radius: 8px;
    --btn-padding: 0.6rem 1.0rem;

    /* override bootstrap core color variables (important) */
    --bs-primary: #e22d2d;
    --bs-primary-rgb: 226, 45, 45;
    --bs-link-color: #e22d2d;
    --bs-link-color-rgb: 226, 45, 45;
    --bs-link-hover-color: #ca1b1b;
    --bs-focus-ring-color: rgba(226, 45, 45, .25);
    --bs-primary-bg-subtle: rgba(226, 45, 45, .08);
    --bs-primary-border-subtle: rgba(226, 45, 45, .15);
}

/* --- Override Bootstrap utilities that still point to original blue --- */

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--color-primary-600);
    text-decoration: underline;
}

/* Bootstraps' link-* utility classes */
.link-primary,
a.link-primary {
    color: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
}

.link-primary:focus,
.link-primary:hover {
    color: rgba(186, 33, 33, var(--bs-link-opacity, 1)) !important;
}

/* slightly darker hover */

/* underline utilities */
.link-underline-primary {
    --bs-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important;
}

/* Background / text utilities */
.bg-primary {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
    color: #fff !important;
}

.text-bg-primary {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
    color: #fff !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

/* Button primary (override direct values set by bs) */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary-600);
    --bs-btn-hover-border-color: var(--color-primary-600);
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary-700);
    --bs-btn-active-border-color: var(--color-primary-700);
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Outline primary */
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
    --bs-btn-active-bg: var(--color-primary-700);
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* btn-check / active states (ensure outlines and active look) */
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* text-bg / utility for colored text backgrounds to ensure readable text */
.text-primary-emphasis {
    color: var(--color-primary-600) !important;
}

/* Badges */
.badge-primary {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* Alerts using danger (map danger to your primary if desired) */
.alert-danger {
    background: #fdecec;
    border: 1px solid var(--color-primary-100);
    color: var(--color-900);
}

/* Form focus rings (به جز کادر سرچ) */
.form-control:not(.custom-search-field):focus,
.form-select:focus,
.input-group .form-control:not(.custom-search-field):focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .08) !important;
}

/* text-bg / text utilities using bs primary background */
.text-bg-primary {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* text background utility map for .text-bg-... classes that expect bs variables */
.text-bg-primary {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
    color: #fff !important;
}

/* Components that had hard-coded #0d6efd borders or hover colors (example: swatches, custom-checkbox borders etc.) */
.custom-checkbox input[type=checkbox]+span.color.active,
.custom-checkbox input[type=checkbox]+span.color:hover,
.variant-links .color.active,
.variant-links .color:hover,
label .color.active,
label .color:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), .08);
}

/* Navbar / menu links — make hover use primary */
.header,
.main-nav {
    background: #fff;
    color: var(--color-900);
}

.main-nav a {
    color: var(--color-800);
}

.main-nav a:hover {
    color: var(--color-primary);
}

/* footer link subtle */
.site-footer a {
    color: var(--color-primary-100);
}

.site-footer a:hover {
    color: #fff;
}

/* text-bg / utility colors mapping for text-bg-primary etc used by bootstrap classes */
.text-bg-primary {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* placeholders / focus rings / outline (global focus color override) */
:focus:not(.custom-search-field) {
    outline: none;
    box-shadow: 0 0 0 3px var(--bs-focus-ring-color) !important;
}

/* text utilities override that referenced bs-primary-text-emphasis */
.text-primary-emphasis {
    color: var(--color-primary-600) !important;
}

/* Ensure .link-*-classes use our palette where appropriate */
.link-underline-primary {
    text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

/* text-bg utilities for bootstrap text-bg-primary that may set color to black/white; force white for contrast */
.text-bg-primary {
    color: #fff !important;
}

/* small helper for bordered elements that used bs-primary-border-subtle */
.border-primary-subtle {
    border-color: var(--bs-primary-border-subtle) !important;
}

/* text-bg / badge / pill small tweaks */
.badge,
.badge-primary {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* Utilities that explicitly used blue hex in template (safety net) */
a[style*="#0d6efd"],
[style*="#0d6efd"] {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}

/* If any rule still uses --bs-primary-rgb, ensure mapping */
:root {
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-link-color-rgb: var(--color-primary-rgb);
    --bs-focus-ring-color: rgba(var(--color-primary-rgb), .25);
}

/* Small responsive & polish tweaks */
.btn {
    border-radius: var(--border-radius);
}

.alert-info {
    background: #fdecec !important;
    border: 1px solid rgba(226, 45, 45, .25) !important;
    color: #7a1515 !important;
    border-radius: 10px;
}

/* END OF COLOR THE TEMPLATE WITH COLOR CODE OF #E22D2D */