:root {
    /* متغیرهای رنگ تم آبی */
    --primary-blue: #007bff;
    --light-blue: #e6f2ff;
    --hover-blue: #0056b3;
    --text-dark: #3f4064;
    --text-muted: #81858b;
    --success-green: #00a049;
    --bg-color: #f7f7f8;
    --border-color: #f0f0f1;
}

@font-face {
    font-family:'Vazirmatn';
    /* مسیر فونت به صورت نسبی اصلاح شد */
    src: url('../fonts/YekanBakhFaNum-VF.woff');
}

/* 
  این بخش مهم است: استایل‌ها فقط به کارت ما و فرزندانش اعمال می‌شود
  و دیگر با کل صفحه کاری ندارد.
*/
.card {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    background: #ffffff;
    width: 100%; /* عرض را 100% میگذاریم تا با عرض سایدبار هماهنگ شود */
    max-width: 320px; /* حداکثر عرض را مشخص می‌کنیم */
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    color: var(--text-dark);
    box-sizing: border-box; /* برای محاسبه صحیح padding و border */
}

/* هدر فروشنده */
.card .seller-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.card .seller-title {
    font-weight: 700;
    font-size: 16px;
}
.card .other-sellers {
    color: #00bfd6;
    font-size: 12px;
    text-decoration: none;
}

/* اطلاعات فروشنده */
.card .seller-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.card .seller-icon {
    color: var(--primary-blue);
    font-size: 20px;
}
.card .seller-name {
    font-size: 20px;
    font-weight: 600;
}

.card .seller-rating {
    font-size: 11px;
    color: var(--text-muted);
    padding-right: 5px;
	height: 25px;
}
.card .rating-green {
    color: var(--success-green);
}

.card .divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 5px 0;
}

/* بخش قیمت */
.card .price-section {
    display: flex;
    justify-content: flex-end;


}
.card .old-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.card .discount-badge {
    background-color: var(--primary-blue);
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}
.card .old-price {
    text-decoration: line-through;
    color: #c0c2c5;
    font-size: 13px;
}
.card .new-price-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.card .new-price {
    font-size: 22px;
    font-weight: bold;
}

.woocommerce-Price-amount {
    font-size: 20px;
}

/* فروش در هفته گذشته / تایمر */
.card .sales-history {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: #3f4064; /* تغییر رنگ به تیره برای خوانایی بهتر تایمر */
    margin-bottom: 15px;
    font-weight: bold;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.08);
}

/* دکمه افزودن به سبد */
.card .add-to-cart-btn {
    background-color: var(--primary-blue);
    color: white !important; /* برای غلبه بر استایل‌های احتمالی قالب */
    border: none;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block; /* برای اطمینان از نمایش صحیح */
}
.card .add-to-cart-btn:hover {
    background-color: var(--hover-blue);
    color: white !important;
}

/* لیست ویژگی‌ها */
.card .features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.card .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}
.card .feature-item:last-child {
    margin-bottom: 0;
}
.card .feature-icon {
    font-size: 18px;
    color: var(--text-muted);
    width: 20px;
    text-align: center;
    margin-top: 2px;
}
.card .feature-icon.purple { color: #b128a5; }
.card .feature-icon.gold { color: #f9a825; }

.card .feature-content {
    flex: 1;
}
.card .feature-title {
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    }

.remaining-days {
    font-weight: 400;
}

span.remaining-day-number {
    font-weight: 600;
}

.important-notice{
	padding: 0 30px 0 1px;
    font-size: 12px;
    display: block;
	color: #4b8fcb;
}

.title-holder {
    display: flex;
    align-items: flex-end;
}

.spc-free-offer-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px; 
}

.spc-special-tag, .spc-free-price-badge {
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #3f4064;
}

.spc-free-price-badge {
  font-size: 20px;
  font-weight: bold;
  color: #3670ed;
}

.spc-arrow-connector {
  flex-grow: 1; 
  height: 1px;
  border-bottom: 1px dashed #ccc;
  position: relative;
}

/* اضافه کردن فلش به انتهای خط چین */
.spc-arrow-connector::after {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(-135deg);
    width: 5px;
    height: 5px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.suggested-products-list{
        color: #5f2087;
}



.spc-features-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    padding: 0;
}

.spc-feature-box {
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px; /* ظاهر دایره‌ای و مینیمال */
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* حاشیه ظریف خاکستری */
    color: #64748b; /* رنگ خاکستری ملایم برای آیکون‌ها */
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.spc-feature-icon {
    font-size: 18px; /* سایز کمی ظریف‌تر */
    transition: color 0.3s ease;
}

/* افکت هاور جذاب و مینیمال */
.spc-feature-box:hover {
    transform: translateY(-4px);
    border-color: #0f172a; /* حاشیه تیره می‌شود */
    color: #0f172a; /* رنگ آیکون تیره می‌شود */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

/* ==================== استایل Tooltip (متن هاور) ==================== */
.spc-feature-tooltip {
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* کمی پایین‌تر برای افکت پرش */
    background-color: #1e293b;
    color: #f8fafc;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500; /* وزن فونت معمولی‌تر به جای خیلی بولد */
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* مثلث کوچک پایین تولتیپ */
.spc-feature-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* نمایش تولتیپ هنگام هاور */
.spc-feature-box:hover .spc-feature-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* حرکت نرم به جایگاه اصلی */
}

a.added_to_cart.wc-forward {
    display: none !important;
}

.spc-remove-cart-btn{
    display: none;
    background: #ff3700 !important;
    color: #fff;
    padding: 10px;
}

.spc-remove-cart-btn:hover{
    background: #fb5d31 !important;
}

.spc-download-btn{
    width: 100%;
    background-color: #e31e1e !important;
}

.button.add-to-cart-btn.spc-get-product-btn{
    background-color: #e31e1e;
}

.button.add-to-cart-btn.spc-get-product-btn:hover{
    background-color: #f32b2b;
}

/* =================================================================
   استایل دکمه گزارش خطا
================================================================= */
.spc-report-error-wrapper {
    margin-top: 15px;
    text-align: center;
    border-top: 2px solid #f1f1f2 !important; /* یک خط جداکننده ملایم */
    padding-top: 15px;
}

.spc-report-error-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: #e74c3c; /* رنگ قرمز ملایم برای هشدار */
    background-color: #fdf2f0;
    border: 1px solid #fadbd8;
    padding: 8px 15px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    font-weight: 500;
}

.spc-report-error-btn i {
    font-size: 14px;
}

.spc-report-error-btn:hover {
    background-color: #e74c3c;
    color: #ffffff;
    border-color: #e74c3c;
}


.spc-price-amount {
  font-size: 20px;
}

.spc-price-currency {
  font-size: 14px;
}

.spc-price-box.has-discount {
  display: flex;
  gap: 15px;
  flex-direction: row-reverse;
  align-items: center;
}

.spc-price-original-wrap {
  font-size: 14px;
}

.spc-price-original.spc-price-striked {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.spc-price-original.spc-price-striked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #d10c0c;
  transform: translateY(-50%) rotate(-5deg);
}

  .spc-price-amount {
  font-size: 20px;
}

.sale-countdown-timer {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
  display: flex;
  /* flex-direction: column; */
  gap: 10px;
  direction: rtl;
  animation: spcFadeInUp 0.35s ease;
}

.spc-countdown-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.spc-countdown-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f6f6f6;
  color: #ff6a3d;
  font-size: 11px;
}

.spc-countdown-title {
  color: #777;
  font-size: 11px;
  font-weight: 800;
}

.spc-countdown-grid {
  display: flex;
  flex-direction: row-reverse;
  /* grid-template-columns: repeat(4, minmax(0, 1fr)); */
  gap: 15px;
}

.spc-time-box {
  background: #fafafa;
  border: 1px solid #efefef;
  border-radius: 10px;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  position: relative;
  overflow: hidden;
}

.spc-time-value {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: #222;
  display: inline-block;
  min-width: 24px;
  text-align: center;
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    color 0.28s ease;
  font-variant-numeric: tabular-nums;
}

.spc-time-value.is-changing {
  transform: translateY(-6px);
  opacity: 0.35;
}

.spc-time-label {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #888;
}

.spc-countdown-expired-text {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-align: center;
  padding: 3px 0 1px;
}

.sale-countdown-timer.is-expired {
  background: #fcfcfc;
  border-color: #eeeeee;
}

.sale-countdown-timer.is-expired .spc-countdown-icon {
  color: #999;
}

.spc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.spc-btn-direct-download {
  background: #16a34a;
  color: #fff;
  width: 100%;
}

.spc-btn-normal-download {
  background: #d33939;
  color: #fff;
  width: 100%;
}

.spc-btn-add-to-cart {
  background: #3974d3;
  color: #fff;
  width: 100%;
}

.spc-btn-view-cart {
  background: #f59e0b;
  color: #fff;
  width: 75%;
}

.spc-btn-remove-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  text-decoration: none;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
}

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

@media (max-width: 420px) {
  .sale-countdown-timer {
    padding: 8px;
  }

  .spc-countdown-grid {
    gap: 12px;
  }
.card .sales-history{
  gap: 15px;
}
  .spc-time-box {
    min-height: 50px;
    border-radius: 9px;
    padding: 5px 6px;
  }

  .spc-time-value {
    font-size: 16px;
  }

  .spc-time-label {
    font-size: 9px;
  }
}

@media (max-width: 600px) {


    .card{
        margin-top: 15px;
        min-width: fit-content;
    }
 /* =========================================
   استایل‌های مدرن رادیو باتن محصولات متغیر
   ========================================= */

/* مخفی کردن رادیو باتن پیش‌فرض مرورگر */
.card .radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
}

/* استایل دادن به لیبل به عنوان یک باکس (دکمه) قابل کلیک */
.card .radio-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fff;
    font-size: 14px;
    color: var(--text-dark);
}

/* ساخت دایره سفارشی رادیو قبل از متن لیبل */
.card .radio-option label::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--text-muted);
    border-radius: 50%;
    background-color: #fff;
    /* افکت نرم برای تغییر حالت */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0; /* جلوگیری از تغییر اندازه دایره */
}

/* حالت Hover: وقتی موس روی یکی از گزینه‌ها می‌رود */
.card .radio-option input[type="radio"]:hover + label {
    border-color: var(--primary-blue);
    background-color: var(--bg-color); /* خاکستری خیلی روشن */
}

/* استایل باکس در حالت انتخاب شده (Checked) */
.card .radio-option input[type="radio"]:checked + label {
    border-color: var(--primary-blue);
    background-color: var(--light-blue); /* پس‌زمینه آبی روشن تم شما */
    color: var(--primary-blue);
    font-weight: bold;
}

/* 
  تکنیک مدرن ساخت نقطه داخلی رادیو باتن:
  وقتی انتخاب شد، پس زمینه و حاشیه دایره آبی می‌شود، 
  و با استفاده از یک سایه (box-shadow) داخلی سفید، نقطه وسط شکل می‌گیرد.
*/
.card .radio-option input[type="radio"]:checked + label::before {
    border-color: var(--primary-blue);
    background-color: var(--primary-blue);
    box-shadow: inset 0 0 0 3px #fff; 
}

  .spc-features-grid {
        justify-content: center;
        gap: 10px;
    }
    .spc-feature-box {
        width: 51px;
        height: 51px;
    }
    .spc-feature-icon {
        font-size: 16px;
    }
}

@media (max-width: 376px){
    .spc-feature-box {
        width: 43px;
        height: 43px;
}
}