@charset "UTF-8";

/*!
 * Mashoouf — First vs Second Crop Comparison Table
 * Version: 1.1.0
 *
 * Scope:
 * .msh-crop-compare
 *
 * تمام انتخابگرها اختصاصی هستند تا با Flatsome تداخل نداشته باشند.
 */

/* =========================================================
   ROOT & TOKENS
========================================================= */

.msh-crop-compare{
  --mshcc-green:#173F2A;
  --mshcc-green-hover:#0F3020;
  --mshcc-dark:#2A3B31;
  --mshcc-muted:#68716B;
  --mshcc-gold:#B68A3A;
  --mshcc-gold-light:#C39B4B;
  --mshcc-cream:#F7F4EE;
  --mshcc-cream-2:#F4F0E8;
  --mshcc-border:#E5DBC6;
  --mshcc-white:#FFFFFF;

  width:100%;
  max-width:1180px;
  margin:54px auto;
  padding:36px;

  direction:rtl;
  color:var(--mshcc-dark);

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(255,255,255,.96),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #FBF9F5 55%,
      #F7F4EE 100%
    );

  border:1px solid var(--mshcc-border);
  border-radius:28px;
  box-shadow:0 20px 55px rgba(23,63,42,.07);
  box-sizing:border-box;
}

.msh-crop-compare *,
.msh-crop-compare *::before,
.msh-crop-compare *::after{
  box-sizing:border-box;
}


/* =========================================================
   HEADER
========================================================= */

.msh-crop-compare__header{
  max-width:760px;
  margin:0 auto 28px;
  text-align:center;
}

.msh-crop-compare__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  margin:0 0 8px;

  color:var(--mshcc-gold);
  font-size:12px;
  font-weight:850;
}

.msh-crop-compare__eyebrow::before,
.msh-crop-compare__eyebrow::after{
  content:"";

  width:28px;
  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    var(--mshcc-gold)
  );
}

.msh-crop-compare__eyebrow::after{
  transform:rotate(180deg);
}

.msh-crop-compare__header h2{
  margin:0 0 8px;

  color:var(--mshcc-green);
  font-size:clamp(24px,3vw,34px);
  font-weight:950;
  line-height:1.7;
}

.msh-crop-compare__header p{
  max-width:650px;
  margin:0 auto;

  color:var(--mshcc-muted);
  font-size:13px;
  line-height:2;
}


/* =========================================================
   LEGEND
========================================================= */

.msh-crop-compare__legend{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;

  max-width:740px;
  margin:0 auto 22px;
}

.msh-crop-compare__legend-item{
  display:flex;
  align-items:center;
  gap:12px;

  min-width:0;
  padding:14px 16px;

  background:rgba(255,255,255,.78);
  border:1px solid var(--mshcc-border);
  border-radius:16px;
}

.msh-crop-compare__legend-item > span{
  flex:0 0 10px;

  width:10px;
  height:34px;

  border-radius:999px;
}

.msh-crop-compare__legend-item--first > span{
  background:var(--mshcc-green);
}

.msh-crop-compare__legend-item--second > span{
  background:linear-gradient(
    180deg,
    var(--mshcc-gold-light),
    var(--mshcc-gold)
  );
}

.msh-crop-compare__legend-item strong{
  display:block;
  margin:0 0 2px;

  color:var(--mshcc-green);
  font-size:13px;
  font-weight:900;
}

.msh-crop-compare__legend-item small{
  display:block;

  color:#7A817C;
  font-size:10px;
  line-height:1.7;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.msh-crop-compare__scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;

  background:#FFFFFF;
  border:1px solid var(--mshcc-border);
  border-radius:21px;
  box-shadow:0 12px 35px rgba(23,63,42,.055);

  scrollbar-width:thin;
  scrollbar-color:var(--mshcc-gold-light) #F4F0E8;
}

.msh-crop-compare__scroll::-webkit-scrollbar{
  height:7px;
}

.msh-crop-compare__scroll::-webkit-scrollbar-track{
  background:#F4F0E8;
  border-radius:999px;
}

.msh-crop-compare__scroll::-webkit-scrollbar-thumb{
  background:var(--mshcc-gold-light);
  border-radius:999px;
}


/* =========================================================
   TABLE
========================================================= */

.msh-crop-compare__table{
  width:100%;
  min-width:820px;
  margin:0;

  table-layout:fixed;
  border:0;
  border-collapse:separate;
  border-spacing:0;

  background:#FFFFFF;
}

.msh-crop-compare__table caption{
  position:absolute;

  width:1px;
  height:1px;
  overflow:hidden;

  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.msh-crop-compare__table th,
.msh-crop-compare__table td{
  padding:17px 20px;

  border:0;
  border-bottom:1px solid #EEE8DE;

  text-align:right;
  vertical-align:middle;
}

.msh-crop-compare__table thead th{
  padding-top:20px;
  padding-bottom:20px;

  color:var(--mshcc-green);
  background:#FAF8F3;

  font-size:13px;
  font-weight:900;
}

.msh-crop-compare__table thead th:first-child{
  border-radius:0 20px 0 0;
}

.msh-crop-compare__table thead th:last-child{
  border-radius:20px 0 0 0;
}

.msh-crop-compare__feature-head{
  width:23%;
  background:#F4F0E8 !important;
}

.msh-crop-compare__first-head{
  width:38.5%;
  border-top:3px solid var(--mshcc-green) !important;
}

.msh-crop-compare__second-head{
  width:38.5%;

  background:
    linear-gradient(
      180deg,
      rgba(195,155,75,.12),
      rgba(255,255,255,.94)
    ) !important;

  border-top:3px solid var(--mshcc-gold) !important;
}

.msh-crop-compare__column-kicker{
  display:block;
  margin:0 0 4px;

  color:#7B827D;
  font-size:9px;
  font-weight:700;
}

.msh-crop-compare__table thead strong{
  display:block;
  font-size:14px;
  font-weight:950;
}

.msh-crop-compare__table tbody th{
  position:relative;

  color:var(--mshcc-green);
  background:#FAF8F4;

  font-size:12px;
  font-weight:900;
}

.msh-crop-compare__table tbody th::before{
  content:"";

  position:absolute;
  top:50%;
  right:8px;

  width:3px;
  height:20px;

  border-radius:999px;
  background:var(--mshcc-gold-light);

  transform:translateY(-50%);
  opacity:.65;
}

.msh-crop-compare__table tbody td{
  color:#555F58;
  background:#FFFFFF;

  font-size:12.5px;
  line-height:1.9;
}

.msh-crop-compare__table tbody td:last-child{
  background:rgba(247,244,238,.44);
}

.msh-crop-compare__table tbody tr:nth-child(even) td{
  background:#FCFBF8;
}

.msh-crop-compare__table tbody tr:nth-child(even) td:last-child{
  background:rgba(244,240,232,.72);
}

.msh-crop-compare__table tbody tr:hover th,
.msh-crop-compare__table tbody tr:hover td{
  background:#F8F5EE;
}

.msh-crop-compare__table tbody tr:hover td:last-child{
  background:#F5EEDF;
}

.msh-crop-compare__table tbody tr:last-child th,
.msh-crop-compare__table tbody tr:last-child td{
  border-bottom:0;
}

.msh-crop-compare__emphasis{
  color:#946B20;
  font-weight:850;
}


/* =========================================================
   PILLS
========================================================= */

.msh-crop-compare__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:30px;
  padding:5px 11px;

  border-radius:999px;

  font-size:10.5px;
  font-weight:850;
  line-height:1.6;
}

.msh-crop-compare__pill--green{
  color:#173F2A;
  background:#EAF2ED;
  border:1px solid #CADDD0;
}

.msh-crop-compare__pill--gold{
  color:#8E681E;
  background:#F7EEDB;
  border:1px solid #E7D3A6;
}

.msh-crop-compare__pill--soft{
  color:#56625B;
  background:#F1F3F1;
  border:1px solid #DCE2DE;
}

.msh-crop-compare__pill--premium{
  color:#8E681E;

  background:
    linear-gradient(
      135deg,
      #FBF3E4,
      #F4E3BE
    );

  border:1px solid #DFC58D;
}


/* =========================================================
   MOBILE NOTE
========================================================= */

.msh-crop-compare__mobile-note{
  display:none;

  margin:9px 0 0;

  color:#858B87;
  font-size:10px;
  text-align:center;
}


/* =========================================================
   FOOTER
========================================================= */

.msh-crop-compare__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;

  margin-top:20px;
  padding:18px 20px;

  background:rgba(244,240,232,.72);
  border:1px solid var(--mshcc-border);
  border-radius:17px;
}

.msh-crop-compare__footer > p{
  flex:1 1 auto;
  margin:0;

  color:#68716B;
  font-size:11.5px;
  line-height:1.95;
}


/* =========================================================
   ACTIONS & BUTTONS
========================================================= */

.msh-crop-compare__actions{
  flex:0 0 auto;

  display:flex;
  align-items:stretch;
  gap:10px;
}

.msh-crop-compare .msh-crop-compare__cta,
.msh-crop-compare .msh-crop-compare__cta:visited{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;

  min-height:46px !important;
  margin:0 !important;
  padding:0 17px !important;

  border-radius:11px !important;

  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;

  font-family:inherit !important;
  font-size:11px !important;
  font-weight:850 !important;
  line-height:1.4 !important;
  text-align:center !important;
  text-decoration:none !important;
  text-transform:none !important;
  text-shadow:none !important;
  white-space:nowrap !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease !important;
}

.msh-crop-compare .msh-crop-compare__cta span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
  padding:0 !important;

  line-height:1 !important;
}

.msh-crop-compare .msh-crop-compare__cta--primary,
.msh-crop-compare .msh-crop-compare__cta--primary:visited{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;

  background:#173F2A !important;
  background-color:#173F2A !important;
  background-image:none !important;

  border:1px solid #173F2A !important;
  box-shadow:0 9px 24px rgba(23,63,42,.18) !important;
}

.msh-crop-compare .msh-crop-compare__cta--primary span{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

.msh-crop-compare .msh-crop-compare__cta--primary:hover,
.msh-crop-compare .msh-crop-compare__cta--primary:focus{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;

  background:#0F3020 !important;
  background-color:#0F3020 !important;
  border-color:#0F3020 !important;

  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(23,63,42,.22) !important;
}

.msh-crop-compare .msh-crop-compare__cta--secondary,
.msh-crop-compare .msh-crop-compare__cta--secondary:visited{
  color:#946B20 !important;
  -webkit-text-fill-color:#946B20 !important;

  background:#FFFFFF !important;
  background-color:#FFFFFF !important;
  background-image:none !important;

  border:1px solid #C39B4B !important;
  box-shadow:none !important;
}

.msh-crop-compare .msh-crop-compare__cta--secondary span{
  color:#946B20 !important;
  -webkit-text-fill-color:#946B20 !important;
}

.msh-crop-compare .msh-crop-compare__cta--secondary:hover,
.msh-crop-compare .msh-crop-compare__cta--secondary:focus{
  color:#805C1A !important;
  -webkit-text-fill-color:#805C1A !important;

  background:#FBF5E9 !important;
  background-color:#FBF5E9 !important;
  border-color:#B68A3A !important;

  transform:translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

  .msh-crop-compare__footer{
    flex-direction:column;
    align-items:stretch;
  }

  .msh-crop-compare__actions{
    width:100%;
  }

  .msh-crop-compare .msh-crop-compare__cta{
    flex:1 1 0;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .msh-crop-compare{
    width:calc(100% - 24px);
    margin:36px auto;
    padding:22px 14px;
    border-radius:22px;
  }

  .msh-crop-compare__header{
    margin-bottom:22px;
  }

  .msh-crop-compare__header h2{
    font-size:23px;
  }

  .msh-crop-compare__header p{
    font-size:12px;
  }

  .msh-crop-compare__legend{
    grid-template-columns:1fr;
    gap:8px;
  }

  .msh-crop-compare__legend-item{
    padding:11px 13px;
  }

  .msh-crop-compare__scroll{
    border-radius:16px;
  }

  .msh-crop-compare__table{
    min-width:760px;
  }

  .msh-crop-compare__table th,
  .msh-crop-compare__table td{
    padding:14px 15px;
  }

  .msh-crop-compare__feature-head,
  .msh-crop-compare__table tbody th{
    position:sticky;
    right:0;
    z-index:3;
  }

  .msh-crop-compare__feature-head{
    z-index:5;
  }

  .msh-crop-compare__table tbody th{
    box-shadow:-7px 0 14px rgba(23,63,42,.045);
  }

  .msh-crop-compare__mobile-note{
    display:block;
  }

  .msh-crop-compare__footer{
    padding:16px;
  }

  .msh-crop-compare__actions{
    width:100%;
    flex-direction:column;
  }

  .msh-crop-compare .msh-crop-compare__cta{
    width:100% !important;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

  .msh-crop-compare{
    width:calc(100% - 16px);
    padding:18px 10px;
  }

  .msh-crop-compare__header h2{
    font-size:21px;
  }
}
/* =========================================
   FIX: جلوگیری از افتادن خط طلایی روی متن جدول
   جدول کشت اول / کشت دوم
========================================= */

/* باکس اصلی جدول */
.msh-crop-compare{
  overflow: hidden;
}

/* اسکرول و قاب جدول */
.msh-crop-compare__scroll{
  overflow-x: auto;
  border-radius: 28px;
}

/* خود جدول */
.msh-crop-compare__table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  overflow: hidden;
  border-radius: 28px;
}

/* همه سلول‌ها */
.msh-crop-compare__table th,
.msh-crop-compare__table td{
  position: relative;
  z-index: 1;
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: break-word;
}

/* -----------------------------------------
   ستون سمت راست بصری در RTL = first-child
   اینجا فاصله متن از خط طلایی بیشتر می‌شود
----------------------------------------- */
.msh-crop-compare__table thead th:first-child,
.msh-crop-compare__table tbody th:first-child,
.msh-crop-compare__table tbody td:first-child{
  padding-right: 28px !important;
  padding-left: 16px !important;
}

/* اگر روی ستون معیار مقایسه خط طلایی با pseudo element ساخته شده */
.msh-crop-compare__table thead th:first-child::before,
.msh-crop-compare__table thead th:first-child::after,
.msh-crop-compare__table tbody th:first-child::before,
.msh-crop-compare__table tbody th:first-child::after{
  right: 10px !important;
}

/* اگر خط طلایی با border یا shadow ساخته شده، متن روی آن نیفتد */
.msh-crop-compare__table thead th:first-child,
.msh-crop-compare__table tbody th:first-child{
  background-clip: padding-box;
}

/* هدر جدول کمی خلوت‌تر شود */
.msh-crop-compare__table thead th{
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ردیف‌های بدنه */
.msh-crop-compare__table tbody th,
.msh-crop-compare__table tbody td{
  padding-top: 18px;
  padding-bottom: 18px;
}

/* اگر هنوز خط خیلی نزدیک بود این را فعال نگه دار */
.msh-crop-compare__feature-head{
  padding-right: 30px !important;
}

/* موبایل */
@media (max-width: 768px){

  .msh-crop-compare__table thead th:first-child,
  .msh-crop-compare__table tbody th:first-child,
  .msh-crop-compare__table tbody td:first-child{
    padding-right: 22px !important;
    padding-left: 12px !important;
  }

  .msh-crop-compare__table thead th,
  .msh-crop-compare__table tbody th,
  .msh-crop-compare__table tbody td{
    font-size: 13px;
    line-height: 1.9;
  }
}