/*
Theme Name: Neve Child
Template: neve
Version: 1.0
Text Domain: neve-child
*/



/* ================================
🅰️ FONT LOADERS — Local, Optimized
==================================*/
@font-face {
  font-family: 'Vazirmatn';
  src: url('/wp-content/themes/neve-child/fonts/Vazirmatn-Regular.woff2') format('woff2'),
       url('/wp-content/themes/neve-child/fonts/Vazirmatn-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/wp-content/themes/neve-child/fonts/Vazirmatn-Bold.woff2') format('woff2'),
       url('/wp-content/themes/neve-child/fonts/Vazirmatn-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================
   🎨 Base Variables
==========================*/
:root{
  --clr-bg-dark:#0d1225;
  --clr-bg-gradient:linear-gradient(160deg,#14225b,#0b1023);
  --clr-white:#fff;
  --clr-light:#dfe6ff;
  --clr-accent-green:#6CFFB7;
  --clr-accent-orange:#ffb347;
  --clr-accent-blue:#1d6ef2;
  --clr-border-light:rgba(255,255,255,.08);
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:10px;
  --shadow-lg:0 12px 36px rgba(0,0,0,.4);
  --font-main:'Vazirmatn',sans-serif;
  --transition-fast:all .25s ease;
}

/* =========================
   🅱️ Base Reset & Typography
==========================*/
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-main);
  color:var(--clr-white);
  background:var(--clr-bg-gradient);
  direction:rtl;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}
p{margin:0}

/* =========================
   🧱 Layout & Structure
==========================*/
.section-inner{
  max-width:1150px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  background:radial-gradient(circle at top,rgba(50,90,255,.15),rgba(0,0,0,.8));
  border:1px solid var(--clr-border-light);
  padding:26px 22px;
}
@media (min-width:900px){
  .section-inner{
    flex-direction:row-reverse;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    padding:32px 36px;
  }
  /* اگر تصویر وجود نداشته باشد، محتوا مرکزچین شود */
  .section-inner:not(:has(.media-box)){
    flex-direction:column;
    text-align:center;
  }
}

/* =========================
   🔹 Buttons & Badge
==========================*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 32px;border-radius:50px;font-size:1rem;font-weight:600;
  letter-spacing:.3px;text-decoration:none;transition:var(--transition-fast);
  cursor:pointer;user-select:none;will-change:transform,box-shadow;
}
.btn-primary{
  background:linear-gradient(135deg,var(--clr-accent-blue),#3985ff);
  color:var(--clr-white);box-shadow:0 0 14px rgba(29,110,242,.4);border:none;
}
.btn-primary:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(108,255,183,.4)}
.btn-secondary{
  background:rgba(20,30,70,.8);color:var(--clr-light);
  border:1px solid rgba(255,255,255,.15);
}
.btn-secondary:hover{border-color:var(--clr-accent-green);background:rgba(20,30,70,.95)}

.badge{
  display:inline-block;background:rgba(108,255,183,.15);color:var(--clr-accent-green);
  font-size:13px;padding:4px 10px;border-radius:999px;letter-spacing:.5px
}

/* =========================
   🔸 FOMO Box (حفظ جلوه، بدون Shift)
==========================*/
.fomo-box{
  margin-top:16px;margin-bottom:28px;padding:12px 16px;border-radius:var(--radius-md);
  background:radial-gradient(circle at left,rgba(255,179,71,.25),rgba(15,20,40,.9));
  color:var(--clr-accent-orange);font-size:.92rem;text-align:center;
  will-change:box-shadow;
  box-shadow:0 0 0 rgba(255,179,71,.2);
  /* انیمیشن فقط بصری؛ روی layout اثر ندارد */
  animation:fomoPulse 2s infinite alternate;
}
@keyframes fomoPulse{
  0%{box-shadow:0 0 0 rgba(255,179,71,.2)}
  100%{box-shadow:0 0 16px rgba(255,179,71,.6)}
}

/* =========================
   🔹 Media Box
==========================*/
.media-box{
  max-width:350px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg);flex-shrink:0;
}
.media-box img{width:100%;height:auto;transition:transform .4s ease}
.media-box img:hover{transform:scale(1.03)}

/* =========================
   🔹 Headings & Text
==========================*/
.section-title{
  font-size:2rem;font-weight:700;color:var(--clr-white);
  text-shadow:0 0 14px rgba(108,255,183,.3);margin:0 0 12px;line-height:1.5;
}
.section-subtitle{font-size:.95rem;color:var(--clr-accent-green);margin-bottom:12px}
.section-description{font-size:.95rem;color:var(--clr-light);line-height:1.8;margin-bottom:16px}

/* =========================
   💬 FAQ (Simple Version)
==========================*/
.faq-simple{background:rgba(255,255,255,.05);border-radius:var(--radius-md);padding:20px;margin-top:24px}
.faq-title{font-size:1.2rem;font-weight:600;margin-bottom:16px;color:var(--clr-white)}
.faq-item{margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:10px}
.faq-item:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.faq-item h3{font-size:1rem;color:var(--clr-accent-green);margin-bottom:6px}
.faq-item p{color:var(--clr-light);line-height:1.8;font-size:.92rem;margin:0}

/* =========================
   💰 Pricing Section
==========================*/
.pricing-section{padding:40px 20px 60px;background:var(--clr-bg-gradient)}
.pricing-content{display:flex;flex-direction:column;gap:20px}

/* =========================
   🧩 Component: Pricing Table
==========================*/
.component-pricing-table{width:100%;overflow-x:auto;margin-bottom:28px}
.component-pricing-table table{
  width:100%;border-collapse:collapse;border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);overflow:hidden;text-align:center;color:var(--clr-light);
  font-size:.95rem;background:rgba(255,255,255,.03)
}
.component-pricing-table thead{background:rgba(29,110,242,.15)}
.component-pricing-table th,
.component-pricing-table td{
  padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.06)
}
.component-pricing-table th{
  color:var(--clr-accent-green);font-weight:700;text-shadow:0 0 8px rgba(108,255,183,.2)
}
.component-pricing-table tr:last-child td{border-bottom:none}
.component-pricing-table tr:hover td{background:rgba(255,255,255,.06);transition:var(--transition-fast)}

@media (max-width:768px){
  .component-pricing-table table{font-size:.85rem}
  .component-pricing-table th,
  .component-pricing-table td{padding:10px 6px}
}

/* =========================
   🧩 Trust Highlights
==========================*/
.component-trust-highlights{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);padding:16px 20px;margin:16px 0
}
.component-trust-highlights ul{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px
}
.component-trust-highlights li{
  color:var(--clr-light);font-size:.92rem;line-height:1.8;display:flex;align-items:center;gap:8px
}
@media (max-width:768px){
  .component-trust-highlights{padding:14px 16px}
  .component-trust-highlights li{font-size:.85rem}
}

/* =========================
   🧩 Safety Notice
==========================*/
.component-safety-notice{
  background:rgba(255,77,77,.1);border:1px solid rgba(255,100,100,.25);
  color:#ffb3b3;padding:14px 18px;border-radius:var(--radius-md);margin:18px 0;
  font-size:.92rem;line-height:1.8
}

/* =========================
   🧩 Comparison Table
==========================*/
.component-comparison-table{width:100%;overflow-x:auto;margin:24px 0}
.component-comparison-table table{
  width:100%;border-collapse:collapse;text-align:center;border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);overflow:hidden;background:rgba(255,255,255,.03)
}
.component-comparison-table th,
.component-comparison-table td{
  padding:12px 10px;font-size:.92rem;color:var(--clr-light);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.component-comparison-table th{
  color:var(--clr-accent-green);font-weight:600;background:rgba(255,255,255,.05)
}
.component-comparison-table tr:last-child td{border-bottom:none}
.component-comparison-table tr:hover td{background:rgba(255,255,255,.06);transition:var(--transition-fast)}

@media (max-width:768px){
  .component-comparison-table th,
  .component-comparison-table td{font-size:.85rem;padding:10px 8px}
}


/* =========================================================
   Product Cards
=========================================================*/
.products-section {
  width: 100%;
  padding: 40px 20px;
}

.products-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;

  max-width: 1200px;
  margin: 0 auto;
}

.product-card {
  width: 100%;
  max-width: 350px;

  padding: 18px;
  text-align: center;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);

  flex: 0 0 calc(33.33% - 28px);
}

.product-card img {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
}

.product-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-accent-green);
  margin: 16px 0 10px;
}

.product-card-desc {
  font-size: 0.92rem;
  color: var(--clr-light);
  line-height: 1.8;
  margin-bottom: 20px;
}

.product-card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.product-card-footer .btn {
  min-width: 150px;
  max-width: 100%;
  height: 48px;
  font-size: 0.95rem;
  padding: 0 12px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .product-card {
    flex: 0 0 calc(50% - 28px);
  }
}

@media (max-width: 600px) {
  .product-card {
    flex: 0 0 100%;
  }

  .product-card-footer {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .product-card-footer .btn {
    width: 100%;
    min-width: unset !important;
  }
}

/* =========================
   🧱 Hero Section
==========================*/
.hero-section{padding:40px 20px 60px;background:var(--clr-bg-gradient)}
.hero-content{
  display:flex;flex-direction:column;gap:14px;
  min-height:600px; /* هم‌تراز با ارتفاع تصویر Hero برای ضد CLS */
  align-items:center;justify-content:center;
  animation:none !important;transition:none !important;
}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}

/* =========================
   📱 Responsive Rules
==========================*/
@media (min-width:900px){.section-title{font-size:2.3rem}}
@media (max-width:768px){
  .faq-simple{padding:16px}
  .faq-item h3{font-size:.95rem}
  .faq-item p{font-size:.85rem}
}

/* =========================
   ⚙️ Services & FAQ Sections
==========================*/
.services-section,
.faq-section,
.trust-section,
.testimonials-section,
.location-section{padding:40px 20px 60px;background:var(--clr-bg-gradient)}

.content-box{display:flex;flex-direction:column;gap:20px}
@media (max-width:900px){.content-box{text-align:center}}
.services-section .fomo-box{margin:20px 0 12px}
.services-section .faq-simple{margin-top:18px;margin-bottom:8px}
/* =========================
   🧩 Extra Components Used Later
==========================*/

/* Testimonials (عمومی) */
.testimonials-section .fomo-box{margin-top:18px}
.testimonials-section .section-description{margin-bottom:8px}

/* Location / Map */
.location-section .map-box{
  margin-top:20px;border-radius:18px;overflow:hidden;
  box-shadow:0 0 20px rgba(0,0,0,.4)
}
.location-section iframe{display:block;width:100%;height:380px;border:0}

/* دومین Hero (در انتهای صفحه) نیز از همین قواعد پیروی می‌کند */
.hero-section .hero-img{display:block}

/* ================================
🅰️ GLOBAL FONT OVERRIDE
==================================*/
body,html,h1,h2,h3,h4,h5,h6,p,a,span,li,input,button,textarea,
.navbar,.site-title,.header,.menu-item,footer,.widget,.entry-content,.site-description{
  font-family:'Vazirmatn',sans-serif !important; font-weight:400;
}
strong,b,h1,h2,h3{font-weight:700 !important}
:root{
  --font-family-primary:'Vazirmatn',sans-serif;
  --font-family-secondary:'Vazirmatn',sans-serif;
}

/* =========================
   🔒 Accessibility tweaks
==========================*/
a:focus, button:focus{outline:2px dashed rgba(108,255,183,.8);outline-offset:3px}
iframe[title]{border:0}
.call-now-button{background-color:#009900;color:#fff} /* کنتراست بهتر نسبت به #00bb00 */

/* =========================
   🛡️ CLS Helpers (ایمن و بدون تغییر ظاهر)
==========================*/
/* اگر جایی img بدون width/height درج شد، حداقل کشسانی ایمن داشته باشد */
.media-box{contain:layout paint}
.hero-content{contain:layout paint}

/* =========================
   🧼 Small Utilities
==========================*/
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-8{margin-top:8px}.mb-8{margin-bottom:8px}
.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}
.center{text-align:center}

/* =========================
   🧯 Reduced Motion (احترام به دسترس‌پذیری)
==========================*/
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* =========================
   ✅ Compatibility with Neve/WordPress
==========================*/
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-image-557,.wp-image-553,.wp-image-554{height:auto}

/* =========================
   💡 Notes
==========================
- تمام کلاس‌هایی که در HTML صفحه‌ات استفاده شده‌اند حفظ شده‌اند.
- برای حذف هشدار CLS، ارتفاع Hero ثابت و فونت با swap تنظیم شد.
- برای دکمه تماس، رنگ به #009900 تغییر داده شد تا خطای کنتراست Accessibility رفع شود.
*/