/* style-rtl.css - طراحی مدرن و چشم‌گیر */



/* متغیرهای رنگ که به راحتی قابل تغییر هستند */

:root {

  --primary-color: #d4141f;

  --primary-hover: #a50e16;

  --secondary-color: #333333;

  --success-color: #4CAF50;

  --warning-color: #FF9800;

  --danger-color: #F44336;

  --text-light: #ffffff;

  --text-dark: #1a1a1a;

  --text-gray: #666666;

  --border-color: rgba(0, 0, 0, 0.1);

  --background-light: #ffffff;

  --background-gray: #f5f5f7;

  --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  --transition-fast: 0.2s ease;

  --transition-normal: 0.3s ease;

  --border-radius: 8px;

}



/* Reset و تنظیمات پایه */

.my-woo-products-container,

.my-woo-product-row {

  box-sizing: border-box;

  font-family: var(--wd-text-font), 'IRANSans', Tahoma, Arial, sans-serif;

}



.my-woo-products-container {

  position: relative;

  display: flex;

  flex-direction: column;

  gap: 20px;

  direction: rtl;

  padding: 25px;

  border-radius: var(--border-radius);

  background-color: var(--background-light);

  box-shadow: var(--box-shadow);

  z-index: 1;

  margin-bottom: 40px;

  max-width: 100%;

  overflow: hidden;

  border: none;

  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.my-woo-products-container:hover {

  transform: translateY(-5px);

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

}



/* Row style - مدرن و مینیمال */

.my-woo-product-row {

  display: flex;

  align-items: center;

  padding: 20px;

  position: relative;

  transition: var(--transition-normal);

  border-radius: var(--border-radius);

  border: 1px solid var(--border-color);

  overflow: hidden;

  background-color: var(--background-light);

}



.my-woo-product-row:hover {

  box-shadow: var(--box-shadow);

  border-color: transparent;

  z-index: 2;

}



/* Product Image - استایل مدرن */

.my-woo-product-photo {

  flex: 0 0 100px;

  margin-left: 30px;

  position: relative;

  overflow: hidden;

  border-radius: var(--border-radius);

}



.my-woo-product-photo img {

  width: 100px;

  height: 100px;

  object-fit: cover;

  border-radius: var(--border-radius);

  transition: transform 0.6s cubic-bezier(0.17, 0.67, 0.83, 0.67);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}



.my-woo-product-photo img:hover {

  transform: scale(1.1);

}



/* Discount Badge - طراحی نئومورفیسم */

.my-woo-discount-badge {

  position: absolute;

  top: -10px;

  right: -10px;

  background: linear-gradient(135deg, var(--primary-color), #ff4757);

  color: white;

  font-size: 11px;

  font-weight: 700;

  padding: 5px 10px;

  border-radius: 50px;

  z-index: 2;

  box-shadow: 0 4px 15px rgba(212, 20, 31, 0.3);

  line-height: 1.2;

  text-align: center;

  min-width: 40px;

}



/* Product Information */

.my-woo-product-info {

  flex: 1;

  text-align: right;

  padding-right: 0;

}



.my-woo-product-title {

  display: block;

  font-size: 17px;

  margin: 0 0 12px 0;

  color: var(--text-dark);

  font-weight: 700;

  line-height: 1.4;

}



.my-woo-product-title a {

  text-decoration: none;

  color: inherit;

  transition: var(--transition-fast);

  position: relative;

  display: inline-block;

}



.my-woo-product-title a:hover {

  color: var(--primary-color);

}



.my-woo-product-title a::after {

  content: '';

  position: absolute;

  width: 0;

  height: 2px;

  bottom: -4px;

  left: 0;

  background: var(--primary-color);

  transition: var(--transition-normal);

  opacity: 0;

}



.my-woo-product-title a:hover::after {

  width: 100%;

  opacity: 1;

}



.my-woo-product-price {

  font-size: 16px;

  color: var(--secondary-color);

  margin-bottom: 12px;

  font-weight: 700;

  line-height: 1.3;

}



/* Sale price styling - طراحی مدرن */

.my-woo-product-price del {

  color: #aaa;

  font-size: 14px;

  font-weight: 400;

  margin-left: 8px;

  text-decoration: line-through;

  position: relative;

}



.my-woo-product-price ins {

  color: var(--primary-color);

  font-weight: 700;

  text-decoration: none;

  background: rgba(212, 20, 31, 0.07);

  padding: 2px 8px;

  border-radius: 4px;

}



/* Stock status - طراحی مدرن بدون دایره اضافی */

.my-woo-stock-status {

  font-size: 14px;

  margin-top: 10px;

  font-weight: 600;

}



.my-woo-stock-status .in-stock {

  color: var(--success-color);

  display: inline-block;

  background-color: rgba(76, 175, 80, 0.1);

  padding: 5px 12px;

  border-radius: 50px;

}



.my-woo-stock-status .out-of-stock {

  color: var(--danger-color);

  display: inline-block;

  background-color: rgba(244, 67, 54, 0.1);

  padding: 5px 12px;

  border-radius: 50px;

}



.my-woo-stock-status .on-backorder {

  color: var(--warning-color);

  display: inline-block;

  background-color: rgba(255, 152, 0, 0.1);

  padding: 5px 12px;

  border-radius: 50px;

}



/* View Product Button - طراحی مدرن و زیبا */

.my-woo-product-button {

  flex: 0 0 140px;

  text-align: center;

}



.my-woo-view-button {

  display: block;

  width: 100%;

  padding: 12px 0;

  background-color: var(--primary-color);

  color: var(--text-light);

  text-decoration: none;

  border-radius: 50px;

  font-size: 14px;

  font-weight: 600;

  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67);

  border: none;

  cursor: pointer;

  text-align: center;

  position: relative;

  overflow: hidden;

  box-shadow: 0 5px 15px rgba(212, 20, 31, 0.2);

}



.my-woo-view-button:hover {

  background-color: var(--primary-hover);

  transform: translateY(-3px);

  box-shadow: 0 8px 25px rgba(212, 20, 31, 0.3);

}



a.my-woo-view-button:hover {

  color: #fff !important;

}



.my-woo-view-button::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    to right,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transition: 0.6s;

}



.my-woo-view-button:hover::before {

  left: 100%;

}



/* برای محصولات ناموجود، رنگ دکمه متفاوت باشد */

.my-woo-product-row.my-woo-is-out-of-stock .my-woo-view-button {

  background-color: var(--secondary-color);

  box-shadow: 0 5px 15px rgba(51, 51, 51, 0.2);

}



.my-woo-product-row.my-woo-is-out-of-stock .my-woo-view-button:hover {

  background-color: #555;

  box-shadow: 0 8px 25px rgba(51, 51, 51, 0.3);

}



/* Grid Display Mode - طراحی مدرن */

.my-woo-grid-mode {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  grid-gap: 25px;

  padding: 20px;

}



.my-woo-grid-mode .my-woo-product-row {

  display: flex;

  flex-direction: column;

  padding: 20px;

  height: 100%;

  text-align: center;

  border-radius: 12px;

  justify-content: space-between;

  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.my-woo-grid-mode .my-woo-product-row:hover {

  transform: translateY(-10px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

}



.my-woo-grid-mode .my-woo-product-photo {

  margin: 0 auto 25px;

  flex: 0 0 auto;

}



.my-woo-grid-mode .my-woo-product-photo img {

  width: 180px;

  height: 180px;

  margin: 0 auto;

}



.my-woo-grid-mode .my-woo-product-info {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  text-align: center;

  padding: 0;

  margin-bottom: 25px;

}



.my-woo-grid-mode .my-woo-product-button {

  flex: 0 0 auto;

  width: 100%;

  margin-top: auto;

}



.my-woo-grid-mode .my-woo-view-button {

  border-radius: 50px;

  transform-origin: center;

}



/* امتیازدهی محصول - طراحی مدرن */

.my-woo-product-rating {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  margin-bottom: 10px;

}



.my-woo-grid-mode .my-woo-product-rating {

  justify-content: center;

}



.my-woo-rating-stars {

  color: #FFD700;

  font-size: 14px;

  display: flex;

  margin-left: 5px;

  letter-spacing: 2px;

}



.my-woo-rating-count {

  font-size: 13px;

  color: var(--text-gray);

  font-weight: 500;

}



/* موجودی محدود - طراحی مدرن */

.my-woo-limited-stock {

  color: var(--warning-color);

  font-size: 13px;

  font-weight: 600;

  margin-top: 5px;

  display: inline-block;

  background-color: rgba(255, 152, 0, 0.1);

  padding: 5px 12px;

  border-radius: 50px;

}



/* برچسب‌های محصول - طراحی مدرن */

.my-woo-product-labels {

  position: absolute;

  top: 10px;

  right: 10px;

  display: flex;

  flex-direction: column;

  gap: 8px;

  z-index: 2;

}



.my-woo-product-label {

  padding: 4px 10px;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  border-radius: 50px;

  line-height: 1;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

}



.my-woo-label-new {

  background: linear-gradient(135deg, #43a047, #2e7d32);

  color: white;

}



.my-woo-label-hot {

  background: linear-gradient(135deg, #f44336, #d32f2f);

  color: white;

}



.my-woo-label-featured {

  background: linear-gradient(135deg, #3f51b5, #303f9f);

  color: white;

}



/* افکت‌ها و انیمیشن‌ها */

@keyframes pulse {

  0% {

    transform: scale(1);

    opacity: 1;

  }

  50% {

    transform: scale(1.05);

    opacity: 0.9;

  }

  100% {

    transform: scale(1);

    opacity: 1;

  }

}



.my-woo-is-on-sale .my-woo-product-price ins {

  animation: pulse 2s infinite;

}



/* توضیحات کوتاه محصول */

.my-woo-product-short-desc {

  font-size: 14px;

  color: var(--text-gray);

  margin: 10px 0 15px;

  line-height: 1.6;

}



.my-woo-grid-mode .my-woo-product-short-desc {

  text-align: center;

}



/* Responsive Adjustments */

@media (max-width: 1024px) {

  .my-woo-grid-mode {

    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

    grid-gap: 20px;

  }

  

  .my-woo-grid-mode .my-woo-product-photo img {

    width: 150px;

    height: 150px;

  }

}



@media (max-width: 768px) {

  .my-woo-products-container {

    padding: 15px;

  }

  

  .my-woo-product-row {

    padding: 15px;

  }



  .my-woo-product-title {

    font-size: 15px;

  }



  .my-woo-product-price {

    font-size: 14px;

  }

  

  .my-woo-grid-mode {

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    grid-gap: 15px;

  }

  

  .my-woo-grid-mode .my-woo-product-photo img {

    width: 130px;

    height: 130px;

  }

  

  .my-woo-view-button {

    padding: 10px 0;

  }

}



@media (max-width: 576px) {

  .my-woo-products-container {

    padding: 10px;

    gap: 15px;

  }



  .my-woo-product-row {

    display: grid;

    grid-template-columns: 80px 1fr;

    grid-template-areas:

        "image info"

        "image info"

        "button button";

    gap: 12px;

    padding: 15px;

  }

  

  .my-woo-product-photo {

    grid-area: image;

    margin-left: 0;

  }

  

  .my-woo-product-info {

    grid-area: info;

    padding-right: 0;

    padding-left: 10px;

  }

  

  .my-woo-product-button {

    grid-area: button;

    width: 100%;

    margin-top: 5px;

  }



  .my-woo-product-photo img {

    width: 80px;

    height: 80px;

  }

  

  .my-woo-grid-mode {

    grid-template-columns: 1fr 1fr;

    grid-gap: 10px;

    padding: 10px;

  }

  

  .my-woo-grid-mode .my-woo-product-row {

    display: flex;

    flex-direction: column;

    padding: 15px;

  }

  

  .my-woo-grid-mode .my-woo-product-photo img {

    width: 120px;

    height: 120px;

  }

  

  .my-woo-grid-mode .my-woo-product-title {

    font-size: 14px;

  }

  

  .my-woo-grid-mode .my-woo-product-price {

    font-size: 13px;

  }

}



@media (max-width: 380px) {

  .my-woo-grid-mode {

    grid-template-columns: 1fr;

  }

}



/* RTL specific fixes */

body.rtl .my-woo-products-container {

  text-align: right;

}



body.rtl .my-woo-product-info {

  text-align: right;

}



/* اصلاح خط زیر کارت‌ها در حالت گرید */

.my-woo-grid-mode .my-woo-product-title a::after {

  left: 50%;

  transform: translateX(-50%);

}



/* بک‌گراند آلترناتیو برای تنوع بیشتر */

.my-woo-products-container.my-woo-alt-bg {

  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);

}



/* سایه برای دکمه‌های ناموجود */

.my-woo-product-row.my-woo-is-out-of-stock .my-woo-view-button::before {

  background: linear-gradient(

    to right,

    transparent,

    rgba(255, 255, 255, 0.1),

    transparent

  );

}