/*
Theme Name: Zephyr Child
Template: Zephyr
Version: 1.0
Author:	UpSolution
Theme URI: http://zephyr.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* ===== Zephyr w-tabs – Custom Accordion (final hover top rounded) ===== */

.custom-accar .w-tabs-sections{
  border:0; background:transparent;
}

/* کارت کلی */
.custom-accar .w-tabs-section{
  margin:14px 0;
  border:1px solid #e5e7eb !important;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.08) !important;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
  overflow:hidden;
}
.custom-accar .w-tabs-section.active{
  border-color:#d1d5db !important;
  box-shadow:0 10px 26px rgba(0,0,0,.12) !important;
  background:#fff;
}

/* هدر */
.custom-accar .w-tabs-section-header{
  position:relative;
  display:block; width:100%;
  padding:18px 56px;
  background:transparent;
  border:0;
  cursor:pointer;
  border-radius:inherit !important;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  transition:background-color .18s ease, box-shadow .18s ease;
}

/* عنوان همان مشکی پررنگ */
.custom-accar .w-tabs-section-title{
  margin:0;
  color:#0f172a;               /* همان رنگ مشکی پررنگ */
  font-weight:800;
  line-height:1.6;
}

/* افکت hover فقط با گردی بالا */
.custom-accar .w-tabs-section-header:hover,
.custom-accar .w-tabs-section:hover .w-tabs-section-header{
  background:rgba(0,0,0,.035) !important;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

/* اگر active است، هاور نماند */
.custom-accar .w-tabs-section.active .w-tabs-section-header{
  background:transparent !important;
}
.custom-accar .w-tabs-section.active .w-tabs-section-header:hover{
  background:rgba(0,0,0,.035) !important;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

/* آیکن Zephyr پنهان */
.custom-accar .w-tabs-section-control{ display:none }

/* آیکن سفارشی سمت چپ */
.custom-accar .w-tabs-section-header::before{
  content:"+";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  color:#dc2626;                 /* قرمز */
  border:1px solid #dc2626;
  font-size:18px;
  line-height:30px;
  text-align:center;
  transition:all .18s ease;
}
.custom-accar .w-tabs-section.active .w-tabs-section-header::before{
  content:"–";
  background:#dc2626;
  color:#fff;
  border-color:#dc2626;
}

/* محتوا */
.custom-accar .w-tabs-section-content{
  border:0; padding:0; overflow:hidden;
}
.custom-accar .w-tabs-section-content-h{
  padding:0 22px 18px 22px;
  color:#334155;
  line-height:1.9;
  font-weight:500;
}

.cus-side-widg {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin: 16px 0;
  transition: box-shadow 0.3s ease;
}

.cus-side-widg:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.cus-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease; /* نرم بودن انیمیشن */
}

/* افکت تیره پایین */
.cus-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05) 70%, transparent);
  pointer-events: none;
  border-bottom-left-radius: 12px;   /* اضافه شد */
  border-bottom-right-radius: 12px;  /* اضافه شد */
  overflow: hidden;                  /* برای جلوگیری از بیرون‌زدگی */
}


/* افکت زوم در حالت hover */
.cus-card:hover {
  transform: scale(1.05);
}

/* متن روی تصویر */
.cus-card .overlay-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  padding: 0 12px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  z-index: 2;
  transition: transform 0.5s ease;
}

/* کمی هم نوشته با زوم هماهنگ بشه (اختیاری) */
.cus-card:hover .overlay-text {
  transform: scale(1.02);
}



.cus-card-main {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease; /* نرم بودن انیمیشن */
}


.cus-card-main:hover {
  transform: scale(1.05);
}

/* کروسل رو افقی معکوس می‌کنیم تا حرکت راست→چپ دیده بشه */
.cus-carousel-to-left .owl-stage-outer {
  transform: scaleX(-1);
  transform-origin: center;
}

/* محتوای هر آیتم رو دوباره معکوس می‌کنیم تا طبیعی نمایش داده بشه */
.cus-carousel-to-left .owl-item {
  transform: scaleX(-1);
}

/* اگر ناوبری/نقطه‌ها فعاله، اون‌ها رو هم به حالت طبیعی برگردون */
.cus-carousel-to-left .owl-nav,
.cus-carousel-to-left .owl-dots {
  transform: scaleX(-1);
}

/* اطمینان از چیدمان درست در RTL تم‌ها */
.cus-carousel-to-left .owl-item {
  float: none !important; /* Owl خودش مدیریت می‌کنه */
}


/* رنگ‌ها */
.contact-list{
  --brand:#d40000;          /* قرمز اصلی */
  --brand-hover:#e24a4a;    /* هاور کمی روشن‌تر */
  --text:#1f2937;
  --muted:#6b7280;
  max-width:720px;
  margin:0 auto;
  color:var(--text);
}

/* ردیف: هیچ تغییری روی پس‌زمینه ردیف در هاور نمی‌دهیم */
.contact-item{
  display:grid;
  grid-template-columns:56px 1fr; /* آیکون راست، متن چپ */
  gap:16px;
  align-items:center;
  padding:14px 8px;
  text-decoration:none;
  border-radius:12px;
}

/* آیکون */
.ci-icon{
  justify-self:end;
  width:56px;height:56px;
  border-radius:16px;
  background:var(--brand);
  color:#fff;
  display:grid;place-items:center;
  font-size:22px;
  box-shadow:0 10px 20px rgba(212,0,0,.25);
  transition:background-color .25s ease, box-shadow .25s ease, transform .2s ease;
}

/* فقط آیکون در هاور کل ردیف تغییر کند */
.contact-item:hover .ci-icon{
  background:var(--brand-hover);
  box-shadow:0 12px 26px rgba(226,74,74,.35);
  transform:translateY(-2px);
}

/* متن‌ها: رنگ ثابت بماند */
.ci-content{ line-height:1.55; }
.ci-title{ font-size:14px;color:var(--muted);margin-bottom:4px; }
.ci-text{  font-size:16px;font-weight:700;color:var(--text); }

/* دو ستونه کردن نام و تلفن */
.cf7-layout .cf7-two-cols {
  display: flex;
  gap: 1rem;             /* فاصله بین دو فیلد؛ از استایل عمومی تاثیر نمی‌گیرد */
}

.cf7-layout .cf7-two-cols .col {
  flex: 1 1 0;           /* هرکدام نیم‌ستون؛ واکنش‌گرا */
}

/* تمام‌عرض کردن دکمه بدون دست‌زدن به رنگ و اندازه */
.cf7-layout .full-width-submit input[type="submit"] {
  margin-top: 20px;
  display: block;
  width: 100%;
}

.map-box {
  width: 100%;
  max-width: 1000px;
  height: 445px;
  margin: 0 auto;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.map-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 40px;
}

.custom-box-main {
  background: #fff; /* رنگ پس‌زمینه سفید */
  border-radius: 16px; /* گردی گوشه‌ها */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); /* سایه ملایم */
  padding: 24px; /* فاصله داخلی مناسب */
  margin: 24px 0; /* فاصله از بالا و پایین */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* انیمیشن برای هاور */
}

.custom-box-main:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px); /* کمی بالا بیاد هنگام هاور */
}

.sr-only {
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border-width: 0!important;
    width: 1px!important;
    height: 1px!important;
    margin: -1px!important;
    padding: 0!important;
    position: absolute!important;
    overflow: hidden!important;
}

.cus-white-link a{
  color: #fff !important;
}

.cus-white-link a:hover{
  color: #eaa9a8 !important;
}

.cus-one-hover-item {
  display: inline-block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cus-one-hover-item:hover {
  transform: scale(1.08);
}

.cus-h1-size {
  font-size: 25px !important;
}

.cus-h1-size h1 {
  font-size: 25px !important;
}

/* استک‌شدن در موبایل */
@media (max-width: 768px) {
  .cf7-layout .cf7-two-cols {
    flex-direction: column;
  }
}

/* ریسپانسیو */
@media (max-width:420px){
  .contact-item{ grid-template-columns:48px 1fr; gap:12px; padding:12px 6px; }
  .ci-icon{ width:48px;height:48px;border-radius:14px;font-size:20px; }
  .ci-text{ font-size:15px; }
}

/* موبایل */
@media (max-width:640px){
  .custom-accar .w-tabs-section-header{ padding:16px 52px; }
  .custom-accar .w-tabs-section-content-h{ padding:0 18px 16px 18px; }
}

/* فقط موبایل/تبلت + پنل */
@media (max-width:1024px){
  nav.cls-main-menu.type_mobile.m_layout_panel .w-nav-list.level_1{
    display:flex;
    flex-direction:column;
    min-height:100dvh; /* قد کل صفحه؛ اگر با height_full تداخل داشت، حذفش کن */
  }

  /* آیتم سوشال کف پنل */
  nav.cls-main-menu.type_mobile.m_layout_panel .menu-social-slot{
    margin-top:auto;          /* هل بده پایین */
    position: sticky;         /* وقتی لیست بلند است پایین ویو بچسبد */
    bottom:0;
    padding:16px 20px;
    border-top:1px solid rgba(255,255,255,.15);
    text-align:center;
    background:inherit;       /* رنگ پس‌زمینه پنل */
    z-index:1;
  }

  nav.cls-main-menu.type_mobile.m_layout_panel .menu-social-slot a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px; height:40px;
    margin:0 6px;
  }
}

/* دسکتاپ را دست‌نخورده بگذار */
@media (min-width:1025px){
  nav.cls-main-menu .menu-social-slot{ display:none !important; }
}

/* فقط موبایل/تبلت و وقتی پنل باز شد */
@media (max-width:1024px){
  /* دکمه خود قالب همیشه بالا-راست باشد */
  nav.cls-main-menu.type_mobile.m_layout_panel .w-nav-control{
    position: fixed;
    top: 12px;
    right: 12px;   /* صریحاً راست */
    left: auto;    /* مطمئن شو از چپ صفر نشده */
    z-index: 10050;
    padding: 6px;
    border-radius: 10px;
    background: transparent;
  }

  /* اگر سایت LTR است، برعکس کن */
  html[dir="ltr"] nav.cls-main-menu.type_mobile.m_layout_panel .w-nav-control{
    left: 12px;
    right: auto;
  }

  /* اگر نوار ادمین وردپرس باز است */
  body.admin-bar nav.cls-main-menu.type_mobile.m_layout_panel .w-nav-control{
    top: 56px;
  }

  /* کمی فضای بالای پنل تا دکمه با آیتم‌ها تداخل نداشته باشد */
  nav.cls-main-menu.type_mobile.m_layout_panel .w-nav-list.level_1{
    padding-top: 56px;
  }
}