/* ============================
   RTL LANGUAGES
   ----------------------------
   Arabic, Hebrew, Urdu, Persian
============================ */
body[lang="ar"] { /* Arabic (Middle East, North Africa) */
  font-family: 'Noto Sans Arabic', sans-serif;
  direction: rtl;
}
body[lang="he"] { /* Hebrew (Israel) */
  font-family: 'Noto Sans Hebrew', sans-serif;
  direction: rtl;
}
body[lang="ur"] { /* Urdu (Pakistan) */
  font-family: 'Noto Nastaliq Urdu', sans-serif;
  direction: rtl;
}
body[lang="fa"] { /* Persian / Farsi (Iran) uses Arabic script */
  font-family: 'Noto Sans Arabic', sans-serif;
  direction: rtl;
}

body[lang="ps"] { /* Pashto (Afghanistan, Pakistan) */
  font-family: 'Noto Sans Arabic', sans-serif; /* Noto Arabic covers Pashto */
  direction: rtl;
}

/* ============================
   SERBIAN & BALKAN LANGUAGES
   ----------------------------
   Cyrillic and Latin scripts
============================ */
body[lang="sr"] { /* Serbian Cyrillic */
  font-family: 'Noto Sans', sans-serif;
}
body[lang="sr-latn"] { /* Serbian Latin */
  font-family: 'Noto Sans', sans-serif;
}
body[lang="bs"] { /* Bosnian */
  font-family: 'Noto Sans', sans-serif;
}
body[lang="sq"] { /* Albanian */
  font-family: 'Noto Sans', sans-serif;
}
body[lang="sr-me"] { /* Montenegrin (understands Serbian) */
  font-family: 'Noto Sans', sans-serif;
}

/* ============================
   SOUTH ASIAN LANGUAGES
   ----------------------------
   Hindi, Bengali
============================ */
body[lang="hi"] { /* Hindi (India) */
  font-family: 'Noto Sans Devanagari', sans-serif;
}
body[lang="bn"] { /* Bengali (Bangladesh, India) */
  font-family: 'Noto Sans Bengali', sans-serif;
}

/* ============================
   SOUTHEAST ASIAN LANGUAGES
   ----------------------------
   Thai, Vietnamese
============================ */
body[lang="th"] { /* Thai (Thailand) */
  font-family: 'Noto Sans Thai', sans-serif;
}
body[lang="vi"] { /* Vietnamese (Vietnam) */
  font-family: 'Noto Sans', sans-serif; /* Latin script with diacritics */
}

/* ============================
   OTHER EUROPEAN / CAUCASUS LANGUAGES
   ----------------------------
   Macedonian, Armenian, Azerbaijani, Georgian
============================ */
body[lang="mk"] { /* Macedonian */
  font-family: 'Noto Sans', sans-serif;
}
body[lang="hy"] { /* Armenian */
  font-family: 'Noto Sans', sans-serif;
}
body[lang="az"] { /* Azerbaijani */
  font-family: 'Noto Sans', sans-serif;
}
body[lang="ka"] { /* Georgian */
  font-family: 'Noto Sans', sans-serif;
}

/* ============================
   CENTRAL ASIAN LANGUAGES
   ----------------------------
   Tajik, Uzbek, Kyrgyz
   Mostly Cyrillic or Latin
============================ */
body[lang="tg"] { /* Tajik */
  font-family: 'Noto Sans', sans-serif;
}
body[lang="uz"] { /* Uzbek */
  font-family: 'Noto Sans', sans-serif;
}
body[lang="ky"] { /* Kyrgyz */
  font-family: 'Noto Sans', sans-serif;
}


/* ============================
   CHINESE (Traditional) — zh-tw
============================ */
body[lang="zh-tw"] {
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei',
               'Heiti TC', 'Hiragino Sans GB', sans-serif;
  /* ltr */
}

body[lang="zh"], body[lang="zh-cn"] {
  font-family: 'Noto Sans SC','PingFang SC','Microsoft YaHei','Heiti SC',sans-serif;
}

/* ============================
   TAMIL — ta
============================ */
body[lang="ta"] {
  font-family: 'Noto Sans Tamil', 'Latha', 'Nirmala UI', sans-serif;
  /* ltr */
}

/* ============================
   SINHALA — si
============================ */
body[lang="si"] {
  font-family: 'Noto Sans Sinhala', 'Iskoola Pota', 'Nirmala UI', sans-serif;
  /* ltr */
}

/* ============================
   AMHARIC (Ethiopic) — am
============================ */
body[lang="am"] {
  font-family: 'Noto Sans Ethiopic', 'Abyssinica SIL', 'Nirmala UI', sans-serif;
  /* ltr */
}



/* RTL BODY */
html[dir="rtl"], body[dir="rtl"] {
  direction: rtl !important;      
  text-align: right !important; 
}


/* All horizontal containers*/
html[dir="rtl"] .col-12,
html[dir="rtl"] .menu-row,
html[dir="rtl"] .pagination-row {
  direction: rtl !important;       
  text-align: center !important;   
}

/* Links and spans in horizontal blocks */
html[dir="rtl"] .col-12 a,
html[dir="rtl"] .col-12 span,
html[dir="rtl"] .menu-row a,
html[dir="rtl"] .menu-row span,
html[dir="rtl"] .pagination-row a,
html[dir="rtl"] .pagination-row span {
  display: inline-block !important;   
  margin: 0 4px !important;           
  text-align: center !important;      
}

/* Pagination: buttons */
html[dir="rtl"] .wtf_pagination span,
html[dir="rtl"] .wtf_pagination a {
  margin-left: 0 !important;
  margin-right: 2px !important;  /* mirror RTL */
}

/* Inline arrows > or < */
html[dir="rtl"] .wtf_pagination a:after {
  content: attr(data-rtl) !important;
}











/* Headers & texts */
html[dir="rtl"] h1,

html[dir="rtl"] h3,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] font,
html[dir="rtl"] li,
html[dir="rtl"] a {
  text-align: right !important;
  direction: rtl !important; 
  
}

html[dir="rtl"] h5 {
  text-align: right !important;
}

/* Inline-block elements (icons, buttons, links) */
html[dir="rtl"] .recent,
html[dir="rtl"] .recent_active,
html[dir="rtl"] .extlnk {
  margin-left: 0 !important;     
  margin-right: 5px !important;  
  text-align: right !important;
  direction: rtl !important; 
}



/* Menu */
html[dir="rtl"] font a + span,
html[dir="rtl"] font span + a {
  margin-right: 4px !important;
  margin-left: 0 !important;
  text-align: right !important;
  direction: rtl !important; 
}








/* RTL fav-counter */
html[dir="rtl"] #fav-counter,
body[dir="rtl"] #fav-counter {
  right: auto !important;   
  left: 10px !important;  
}

/* RTL: browser_extension_button */
html[dir="rtl"] #browser_extension_button,
body[dir="rtl"] #browser_extension_button {
  right: auto !important;   
  left: 80px !important;  
}

.last_searched_lnk, .wtf_main_lnk
{font-size:14px;}
/* RTL last_searched_lnk*/
html[dir="rtl"] .last_searched_lnk, .wtf_main_lnk
{    right: 0px;
    position: relative;
    display: grid !important;
    grid-auto-flow: column !important;
    direction: rtl;
    align-items: center;
    justify-items: end;
	width: fit-content !important;
	}
	


.badge {
    background: url(/i/c/badge.png) no-repeat center center;
    -webkit-background-size: contain;
    background-size: contain;
    top: 9px;
    left: -22px;
    position: absolute;
    color: white;
    width: 84px;
    height: 21px;
    line-height: 13px;
    transform: rotate(-45deg);
    z-index: 1000000;
}

.r_star {
    font-size: 12px;
    color: gold;
}
.r_sep {
    font-size: 10px;
    color: #dedede;
    margin: 0 2px;
}
.r_basket {
    font-size: 11px;
	color: #d9d7d2
}
.r_text {
    font-size: 11px;
    color: #969693;
}


/* lang bottom list */
.lang-columns {
  display: flex;
  max-width: 900px;
  flex-wrap: nowrap;
  gap: 20px;
  margin: 0 auto;
  color: #8c8c8c;
  font-size: 12px;
}

/* vertical cols */
.lang-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* --- adaptive --- */
@media (max-width: 600px) {
  .lang-columns {
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin: 0 auto;
  }
  .lang-column {
    flex: none;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .lang-column a {
    display: inline-block;
    text-align: center;
  }
}



/* ext menu bottom */
ul.ext_bottom {
	max-width: 300px;
    width: 100%;
    list-style: none;          
    padding-bottom: 20px;
    margin: 0px auto;         
    display: flex;
    justify-content: center;   
    flex-wrap: wrap;           
    gap: 10px;                 
}

ul.ext_bottom li span {
    display: inline-block;
    width: 100%;
	margin-left:0px !important;
}



ul.ext_bottom li {
	font-size:13px;
	color:#9e9e9e;
    display: block;
    align-items: center;
    text-align: center; 
}


ul.ext_bottom img {
	width:20px;
	height:20px;
    filter: grayscale(20%);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
	 margin-left: 0 !important;
}


ul.ext_bottom img:hover {
    filter: grayscale(0%);
    opacity: 1;
}



.x2z {
  transition: transform 2s, border-radius 0.3s;
  transform-origin: center center;
  position: relative;
  z-index: 1;
  transform: scale(1) translateY(0);
  cursor: pointer;
  border-radius: 4; 
}

.x2z:hover {
  transform: scale(2) translateY(30px);
  z-index: 10;
  border-radius: 10px;
}


#favModal {
    display: none; /* Hide by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 10000;

    justify-content: center;
    align-items: center;
}


#favModalContent {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
    position: relative; /* Make this relative for correct positioning of the close button */
}


/* Close button styling */
#favModalClose {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #333; /* Darker color for better visibility */
}


#favList {
    display: grid;
    gap: 15px;
    justify-content: center;
    padding: 10px;
}


@media (max-width: 480px) {
    #favList { grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 481px) and (max-width: 768px) {
    #favList { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) and (max-width: 1024px) {
    #favList { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
    #favList { grid-template-columns: repeat(4, 1fr); }
}


.favItem {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    position: relative;
}


.favItem img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}


.favPrice {
    font-weight: bold;
    margin: 5px 0;
}


.favTitle {
    font-size: 14px;
    text-decoration: none;
    color: #333;
    display: block;
    margin-bottom: 5px;
}


.favShop {
    font-size: 12px;
    color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
}


.favShop img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}


.favRemove {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 20px;
    color: gold;
    cursor: pointer;
}








.menu_bottom:empty {
    display: none;
}

/* Menu Bottom */
.menu_bottom {
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Links */
.mblink {

    text-decoration: underline dotted #8c8c8c !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;

}

/* Divider */
.menu_bottom .menu_bottom_divider {
    color: #dbdbdb;
    padding: 0 5px;
}

.menu_bottom select {
    width: auto;
    display: inline-block;
    font-size: 14px;
}


/* Mobile */
@media (max-width: 600px) {
  .menu_bottom {
    flex-direction: column;
    gap: 5px;
    align-items: center;      /* ← центрирует столбик по горизонтали */
  }

  /* Центрируем сами элементы, если у них есть собственные ширины */
  .menu_bottom > * {
    margin: 0 auto;           /* подстраховка */
  }

  .menu_bottom select {
    /* max-width: auto;  не нужно */
    display: inline-block;
    padding: 5px;
    font-size: 14px;
    text-align: center;       /* текст внутри */
    text-align-last: center;  /* центр текущего option (Chrome/FF) */
    align-self: center;       /* на случай переопределений */
  }

  .menu_bottom .menu_bottom_divider {
    display: none;
  }
}












.main_banner_block_edit, .main_banner_block {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.main_banner_block img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hide if banner block is empty */
.main_banner_block_edit, .main_banner_block:empty {
    display: none;
}




@media (max-width: 250px)
{
.main_banner_block_edit, .main_banner_block { max-width: 150px; }	
.search_slider{max-width:150px;}	
.search_slider_block{max-width:150px;}	
}


@media (max-width: 300px)
{
.main_banner_block_edit,.main_banner_block { max-width: 200px; }	
.search_slider{width:200px;}
.search_slider_block{max-width:200px;}		
}


@media (max-width: 400px)
{
.main_banner_block_edit,.main_banner_block { max-width: 300px; }	
.search_slider{max-width:300px;}
.search_slider_block{max-width:300px;}		
}



@media (max-width: 500px)
{
.main_banner_block_edit,.main_banner_block { max-width: 400px; }	
.search_slider{max-width:400px;}
.search_slider_block{max-width:400px;}		
}



@media (max-width: 600px)
{
.main_banner_block_edit,.main_banner_block { max-width: 400px; }	
.search_slider{max-width:400px;}	
.search_slider_block{max-width:400px;}	

}	


@media (max-width: 768px)
{

}


@media (max-width: 800px)
{
.main_banner_block_edit,.main_banner_block { max-width: 600px; }	
.search_slider{max-width:600px;}
.search_slider_block{max-width:600px;}		
}

@media (max-width: 1000px)
{
.main_banner_block_edit,.main_banner_block { max-width: 900px;}	
.search_slider{max-width:900px;max-height:120px;}
.search_slider_block{max-width:900px;}
}	

.main_banner_block_edit,.main_banner_block{max-width:900px;position:relative;display:block;}


.search_slider{max-width:900px;max-height:120px;border: 0px dashed #dbd9d9;border-radius: 4px;position:relative;display:block;}
.search_slider_block{max-width:900px;position:relative;display:block;overflow:hidden;margin-top:-70px;}

.main_text {	
  max-height: 999px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

html[dir="rtl"] .main_text {
    text-align: center;
	margin: 0 auto;
    direction: rtl;
}

.link-more {
 text-decoration:none;
 color:#dedede;
 font-size:40px;	
 transform: rotate(-90deg);
 display: inline-block;
}

.centered {
	display: block;
    margin: 0; 
    padding: 0;
	line-height: 3px;
}

.link-more:hover {text-decoration:none;color:#ffc107;}

.link-more-rotate {
 display: inline-block;
 transform: rotate(90deg);
}

.search_slider_img img {
    border-radius: 6px; /* Радиус скругления */
    border: 1px #666; /* Параметры рамки */
   }

.search_slider .slider {
    overflow: initial;
}


.thumb-wrap {
  position: relative;
  padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
  height: 0;
  overflow: hidden;
}
.thumb-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 0;
  outline-width: 0;
}



a {
    font-size: 12px;
    color: #8c8c8c;
}

.slogo {width:auto;height:35px;}


.logo_info{font-size:12px;}
.container{
    margin-top:260px;
}

.container_list
{padding:20px;}

.input-select
{
height:50px!important;
border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;

border-top-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;	
}

html[dir="rtl"] .input-select {
border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;

border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;

border-bottom-right-radius:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;

border-top-right-radius:3px;
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;

}

html[dir="rtl"] .input-group-append .btn {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html[dir="rtl"] .wtf_pagination {
  text-align:center !important;
}



.btn:hover{
    color:#fff;
	background-color:#ffc107;
}

.btn{
    color:#fff;
}

.input-text:focus{
       
  
    box-shadow: 0px 0px 0px;
    border-color:#f8c146;
    outline: 0px;
}

.form-control {
    border: 1px solid #f8c146;
}

#sort_select {
  border: 1px solid #ccc;
  padding-right: 5px; 
  min-width: 150px;
  max-width: 220px;
  border-radius: 4px;
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
}


 .input-group.input-group-unstyled input.form-control {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

/*SVG ICONS-------------------------------------------------------------*/
/* Disable FA glyphs for these icons */
.fa-user::before,
.fa-eye::before,
.fa-pencil::before,
.fa-link::before { content: none !important; }

/* Paint via external SVG masks (color from currentColor) */
.fa-user,
.fa-eye,
.fa-pencil,
.fa-link{
  display: inline-block;
  width: 1em;                 /* scales with font-size */
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;

  /* common mask props */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
}

/* individual masks */
.fa-user{
  -webkit-mask-image: url("/i/c/user.svg");
          mask-image: url("/i/c/user.svg");
}
.fa-eye{
  -webkit-mask-image: url("/i/c/eye.svg");
          mask-image: url("/i/c/eye.svg");
}
.fa-pencil{
  -webkit-mask-image: url("/i/c/pencil.svg");
          mask-image: url("/i/c/pencil.svg");
}
.fa-link{
  -webkit-mask-image: url("/i/c/link.svg");
          mask-image: url("/i/c/link.svg");
}








/* Disable Font Awesome glyph only for the right chevron */
.fa-chevron-right::before { content: none !important; }

/* Paint the chevron via an external SVG mask (color comes from currentColor) */
.fa-chevron-right{
  display: inline-block;
  width: 1em;                 /* scales with font-size */
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;

  -webkit-mask: url("/i/c/chevron-right.svg") no-repeat center / contain;
          mask: url("/i/c/chevron-right.svg") no-repeat center / contain;
}

/* Disable Font Awesome glyph only for the left chevron */
.fa-chevron-left::before { content: none !important; }

/* Paint the chevron via an external SVG mask (color comes from currentColor) */
.fa-chevron-left{
  display: inline-block;
  width: 1em;                 /* scales with font-size */
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;

  -webkit-mask: url("/i/c/chevron-left.svg") no-repeat center / contain;
          mask: url("/i/c/chevron-left.svg") no-repeat center / contain;
}
/* Disable Font Awesome glyph only for the plus icon */
.fa-plus::before { content: none !important; }

/* Paint the plus icon via an external SVG mask (color comes from currentColor) */
.fa-plus{
  display: inline-block;
  width: 1em;                 /* scales with font-size (e.g., .h4) */
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;

  -webkit-mask: url("/i/c/plus.svg") no-repeat center / contain;
          mask: url("/i/c/plus.svg") no-repeat center / contain;
}


/* Disable Font Awesome glyph only for the search icon */
.fa-search::before { content: none !important; }

/* Paint the search icon via an external SVG mask (color comes from currentColor) */
.fa-search{
  display: inline-block;
  width: 1em;                 /* scales with font-size */
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;

  -webkit-mask: url("/i/c/search.svg") no-repeat center / contain;
          mask: url("/i/c/search.svg") no-repeat center / contain;
}


/* Disable Font Awesome glyph just for the camera icon */
.fa-camera::before { content: none !important; }

/* Paint the camera icon via an external SVG mask (color comes from currentColor) */
/* Does not touch your existing positioning/hover rules */
.fa-camera{
  display: inline-block;
  width: 1.35em;               /* scales with font-size (e.g., .h4) */
  height: 1.35em;
  transform: translateY(-0.175em);
  vertical-align: -0.125em;
  background-color: currentColor;

  -webkit-mask: url("/i/c/camera.svg") no-repeat center / contain;
          mask: url("/i/c/camera.svg") no-repeat center / contain;
}

.input-group .fa-camera{

        position: absolute;
		top:13px;
		right: 70px;
		z-index:9;
	   opacity: 100%;
	   cursor: pointer;
       }

.fa-camera:hover{
opacity: 70%;
transition: 0.5s ease-in-out;
       }
/*SVG ICONS END-------------------------------------------------------------*/	 
	   
	   
html[dir="rtl"] .input-group .fa-camera {
  right: auto;   /* сбрасываем */
  left: 70px;  /* фиксируем для RTL */
  z-index: 9;
}   


	   
.s_inf {
		   position:absolute; 
		   left:18px;
		   top:50px;
	   font-size:14px;
	   color:gray;}
	   

html[dir="rtl"] .s_inf {
  text-align: right !important;
  right:18px;
}	   


.img_crop {
	top:35px;
    padding: 0px;
    position: relative;
    border: 0px solid lightgrey;
    left: 50%;
    transform: translateX(-50%);
	width: auto;
    max-width: 200px;
	overflow: visible !important;
	
	
}

.img_crop img {
    max-width: 100%;
    display: block;
	margin: 0px 0px 0px auto;
}

#progress {position: relative;padding-top: 10px;right:5px;}   

#close_img {
    position: absolute;
    float: right;
    right: -26px;
    top: -26px;
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
    color: #9f9999;
}


#close_img:hover {
  color:red;
}


/* SIZE of Cropper DOTs-Points */
.cropper-point {
    width: 5px !important;
    height: 5px !important;
    transform: scale(1.1) !important;
}

.cropper-point.point-se {
    width: 10px !important;
    height: 10px !important;
    transform: scale(1.2) !important;
}












/* RTL стили (переопределяют LTR) */
[dir="rtl"] .img_crop {
    top: 35px;
    padding: 0px;
    position: relative;
    border: 0px solid lightgrey;
    right: 50% !important; /* Изменено с left на right */
    left: auto !important; /* Сброс left */
    transform: translateX(50%) !important; /* Изменено с -50% на 50% */
    width: auto;
    max-width: 200px;
    max-height: 400px;
    overflow: visible !important;
}

[dir="rtl"] .img_crop img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0px auto 0px 0px !important; /* Изменено с 0px 0px 0px auto */
}

[dir="rtl"] #progress {
    position: relative;
    padding-top: 10px;
    left: 5px !important; /* Изменено с right на left */
    right: auto !important; /* Сброс right */
}

[dir="rtl"] #close_img {
    position: absolute;
    float: left !important; /* Изменено с right на left */
    left: -26px !important; /* Изменено с right на left */
    right: auto !important; /* Сброс right */
    top: -26px;
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
    color: #9f9999;
}

[dir="rtl"] #close_img:hover {
    color: red;
}









.prow {
 margin:5px;
}

/*menu*/
#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: fixed;
  top: 20px;
  left: 20px;

  width: 26px;
  height: 26px;

  cursor: pointer;
  z-index:99999999;
}

/* RTL */
html[dir="rtl"] .menu__btn,
body[dir="rtl"] .menu__btn {
  left: auto;       /* reset left */
  right: 20px;      /* pos right */
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 2px;

  background-color: #616161;

  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;

  width: 350px;
  height: 100%;

  margin: 0;
  padding: 80px 0;

  list-style: none;

  background-color: #FFF;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  z-index:9999999;
  transition-duration: .25s;
}

/* RTL: menu__box */
html[dir="rtl"] .menu__box,
body[dir="rtl"] .menu__box {
  left: auto !important;   
  right: -100% !important; 
  box-shadow: -1px 0px 6px rgba(0, 0, 0, .2);
}
html[dir="rtl"] .menu__box li {
  text-align: right !important;
}


/* RTL: #menu__toggle (menu at right side) */
html[dir="rtl"] #menu__toggle:checked ~ .menu__box,
body[dir="rtl"] #menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: auto !important;  
  right: 0 !important;     
}

/* RTL: Fix browser icons in side menu */
html[dir="rtl"] .menu__box li span,
html[dir="rtl"] .menu__box li img {
  margin-left: auto !important; 
  margin-right: 5px !important; 
}
html[dir="rtl"] .menu__box li img:not(:first-child) {
  margin-left: 5px !important; 
  margin-right: auto !important;
}

.menu__item {
  display: block;
  padding: 12px 24px;

  color: #333;

  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;

  text-decoration: none;

  transition-duration: .25s;
}
/* RTL menu__item */
html[dir="rtl"] .menu__item,
body[dir="rtl"] .menu__item {
  text-align: right; 
  padding-left: 24px;  
  padding-right: 12px; 
}


.menu__item:hover {
  background-color: #EEE;
}


/*whatsapp button*/
.whatsapp-button {
    position: fixed;
    right: 5px;
    bottom: 5px;
    transform: translate(-50%, -50%);
    background: #ffc107; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    height: 55px; /*высота кнопки*/
    color: #fff;
    text-align: center;
    line-height: 65px; /*центровка иконки в кнопке*/
    font-size: 35px; /*размер иконки*/
    z-index: 9999;
}
.whatsapp-button a {
    color: #fff;
}
.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #ffc107; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.whatsapp-button:after{
    animation-delay: .5s;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.chat_icon {
  width: 30px;
}
 
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

@media (max-width : 800px) {  
.whatsapp-button {   
    bottom: 5px; /*from boottom align*/
    left: 40px; /*align (left/right)*/
  }
}

/*whatsapp button end*/

/*FAQ*/
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* RTL FAQ*/
html[dir="rtl"] .accordion {
  text-align: right !important;  
  direction: rtl !important;    
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

.panel a {
  font-size: 15px;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
}


button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

html[dir="rtl"] button.accordion {
  text-align: right !important;  
  direction: rtl !important;     
}

button.accordion.active, button.accordion:hover {
    background-color: #ccc;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}


/*product img*/
#product_img {
  height: 150px;
  width: 150px;
  max-height: 150px;
  max-width: 150px;
  object-fit: scale-down;
  margin: 0 auto;
  z-index:0;
}
#product_img img {
  display: block;
  height: 100%;
  max-width: 150px;
  object-fit: scale-down;
}

.engine{float:right;position:relative;color:#e8e8e8; font-size:8px;}

.recent2 {
	color:#ffc107;
    text-decoration: underline dotted #ffc107 !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;
}

.recent2:hover {
    text-decoration: none !important;
    color: red !important;
}


.recent {
    text-decoration: underline dotted #8c8c8c !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;
}

.recent:hover {
    text-decoration: none !important;
    color: #ffc107 !important;
}

.recent_active {
        text-decoration: none !important;
        color: #ffc107 !important;
}



.extlnk {
    text-decoration: underline dotted #8c8c8c !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;
	font-size:14px;
	color: #9c9c9c;
}

.extlnk:hover {
    text-decoration: none !important;
    color: #ffc107 !important;
	font-size:14px;
}

.main_text img {
    filter: grayscale(20%);
    opacity: 0.8;
    transition: filter 0.3s ease, opacity 0.3s ease;
}


.main_text img:hover {
    filter: grayscale(0%);
    opacity: 1;
}




html[dir="rtl"] .weight small font{
    direction:ltr;
  unicode-bidi:plaintext;
}

html[dir="rtl"] .weight small{
    direction:ltr;
  unicode-bidi:plaintext;
}


html[dir="rtl"] .weight .r_text{
  direction:ltr;
  unicode-bidi:plaintext;
}


html[dir="rtl"] .wtf_pagination{
  direction:ltr;            
  unicode-bidi:plaintext;           
}


html[dir="rtl"] .wtf_pagination > *{
  direction:ltr;
  unicode-bidi:plaintext;
}


/* search slider fix */
/* Only for RTL mode and only for .search_slider */
html[dir="rtl"] .search_slider { 
  position: relative;
}

/* 1) Ensure the viewport clips overflowing slides */
html[dir="rtl"] .search_slider .slick-list {
  overflow: hidden !important;
  display: block !important;
  margin: 0;
  padding: 0 2px; /* keep your original padding */
}

/* 2) Force track to be a normal block element (not flex/grid) */
html[dir="rtl"] .search_slider .slick-track {
  display: block !important;
  position: relative !important;
}

/* 3) Restore proper float for slides in RTL */
html[dir="rtl"] .search_slider .slick-slide {
  float: right !important;
  min-height: 1px;
  display: block;
}