/*
Theme Name: My Child Theme
Template: hello-elementor
*/


/* =======================================
   user profile
======================================= */
/* کانتینر اصلی - الهام گرفته از طراحی گلس‌مورفیسم شفاف و تمیز روی پس‌زمینه آبی ملایم سایت */
.javo-profile-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 50px;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 32px !important;
    color: #0f172a !important;
    direction: rtl !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.04), 
                0 1px 3px rgba(15, 23, 42, 0.02) !important;
    box-sizing: border-box !important;
}

/* پنل آمارهای بالای صفحه - سه‌بعدی ملایم و جذاب */
.javo-stats-panel {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin-bottom: 50px !important;
}
.javo-stat-box {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 20px !important;
    padding: 26px 15px !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}
.javo-stat-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #0f172a, #334155);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.javo-stat-box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.07) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}
.javo-stat-box:hover::before {
    opacity: 1;
}
.javo-stat-number {
    display: block !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -0.5px;
    margin-bottom: 6px !important;
}
.javo-stat-label {
    display: block !important;
    font-size:18px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

/* فرم و ساختار ردیف‌ها */
.javo-profile-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
}
.javo-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}
.javo-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.javo-form-group label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    padding-right: 4px;
}

/* فیلدهای ورودی مدرن با فوکوس نئون ملایم */
.javo-profile-form input[type="text"],
.javo-profile-form input[type="url"],
.javo-profile-form input[type="password"],
.javo-profile-form textarea {
    width: 100% !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    color: #0f172a !important;
    font-size: 14.5px !important;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}
.javo-profile-form input:focus,
.javo-profile-form textarea:focus {
    outline: none !important;
    border-color: #0f172a !important;
    box-shadow: 0 0 0 5px rgba(15, 23, 42, 0.06) !important;
}

/* استایل فیلد غیر قابل تغییر شماره تماس */
.javo-profile-form input.javo-input-readonly {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    font-weight: 600;
    cursor: not-allowed !important;
}

/* بخش آپلود زنده عکس پروفایل - مینیمال و آوانگارد */
.javo-avatar-group {
    align-items: center !important;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
    padding: 35px !important;
    border-radius: 24px !important;
    border: 2px dashed #cbd5e1 !important;
    position: relative;
}
.javo-avatar-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    position: relative;
}
.javo-user-avatar {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12) !important;
    transition: transform 0.3s ease !important;
}
.javo-avatar-wrapper:hover .javo-user-avatar {
    transform: scale(1.04) rotate(2deg) !important;
}
.javo-avatar-wrapper input[type="file"] {
    margin-top: 5px;
    font-size: 12px;
    color: #475569;
}
.javo-help-text {
    font-size: 11.5px !important;
    color: #64748b !important;
    font-weight: 500;
}

/* دکمه امضا و اصلی جاوو - مشکی عمیق با انیمیشن ارتقا یافته */
.javo-submit-btn {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 18px 36px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18) !important;
    letter-spacing: 0.2px;
    margin-top: 10px;
}
.javo-submit-btn:hover {
    background: linear-gradient(135deg, #0f172a, #000000) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25) !important;
}
.javo-submit-btn:active {
    transform: translateY(0) !important;
}

/* استایل متون اطلاع‌رسانی و پیام‌ها */
.javo-success-msg, .javo-error-msg, .javo-alert {
    padding: 16px 24px !important;
    border-radius: 14px !important;
    margin-bottom: 25px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.01) !important;
}
.javo-success-msg {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #15803d !important;
}
.javo-error-msg, .javo-alert {
    background: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
    color: #b91c1c !important;
}

/* ===================================================
   Responsive (بهینه‌سازی پیشرفته موبایل و تبلت)
=================================================== */
@media (max-width: 768px) {
    /* تنظیم ابعاد کانتینر اصلی روی موبایل جهت چسبندگی شیک به لبه‌ها */
    .javo-profile-container {
        padding: 30px 16px !important;
        margin: 16px 8px !important;
        border-radius: 24px !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03) !important;
    }

    /* 🌟 تغییر ساختار آمارها به ۳ سطر مجزا، فیکس و بسیار تمیز */
    .javo-stats-panel {
        grid-template-columns: 1fr !important; /* اجبار به تک‌ستونه شدن و ایجاد ۳ سطر */
        gap: 12px !important; /* فاصله مینی‌مال و استاندارد بین سطرها */
        margin-bottom: 35px !important;
    }

    /* بازطراحی هر باکس آمار برای نمایش افقی در یک سطر */
    .javo-stat-box {
        display: flex !important;
        flex-direction: row !important; /* چیدمان خطی المان‌ها */
        align-items: center !important;
        justify-content: space-between !important; /* قرارگیری متن در راست و عدد در چپ */
        padding: 16px 20px !important;
        border-radius: 16px !important;
    }

    /* تنظیمات عدد در سطر آمار */
    .javo-stat-number {
        font-size: 24px !important; /* سایز بهینه شده برای موبایل */
        margin-bottom: 0 !important;
        order: 2 !important; /* انتقال عدد به سمت چپ سطر (در حالت RTL) */
    }

    /* تنظیمات متن راهنما در سطر آمار */
    .javo-stat-label {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        order: 1 !important; /* انتقال متن به سمت راست سطر */
    }

    /* افقی شدن سه‌بعدی لبهٔ باکس‌ها متناسب با سطر جدید */
    .javo-stat-box::before {
        top: 0; bottom: 0; right: 0; left: auto;
        width: 4px; height: 100%;
        background: linear-gradient(180deg, #1e293b, #0f172a);
    }

    /* تک‌ستون شدن تمام ردیف‌های فرم */
    .javo-form-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* فشرده‌سازی هوشمند باکس آپلود عکس */
    .javo-avatar-group {
        padding: 24px 16px !important;
        border-radius: 18px !important;
    }
    .javo-user-avatar {
        width: 100px !important;
        height: 100px !important;
    }

    /* بهینه‌سازی فیلدهای ورودی برای لمس راحت‌تر در موبایل */
    .javo-profile-form input[type="text"],
    .javo-profile-form input[type="url"],
    .javo-profile-form input[type="password"],
    .javo-profile-form textarea {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }

    /* تمام‌عرض شدن دکمه ثبت اطلاعات در موبایل */
    .javo-submit-btn {
        width: 100% !important;
        padding: 16px !important;
        font-size: 14.5px !important;
        border-radius: 14px !important;
    }
}

/* بهینه‌سازی فوق‌ریزی برای گوشی‌های بسیار باریک (زیر 360 پیکسل) */
@media (max-width: 360px) {
    .javo-profile-container {
        padding: 20px 12px !important;
        margin: 10px 4px !important;
    }
    .javo-stat-box {
        padding: 12px 14px !important;
    }
    .javo-stat-number {
        font-size: 20px !important;
    }
    .javo-stat-label {
        font-size: 12px !important;
    }
}
/* =======================================
    my_favorite_channels
======================================= */
    .javo-clean-page-wrapper {
        width: 100%;
        max-width: 1140px;
        margin: 40px auto;
        padding: 40px;
        background: #ffffff !important; /* پس‌زمینه کاملاً سفید و تمیز کانتینر */
        border-radius: 28px;
        box-shadow: 0 4px 30px rgba(15, 23, 42, 0.02);
        border: 1px solid #f1f5f9;
        direction: rtl;
        font-family: "Dana", "Yekan Bakh", sans-serif !important;
        box-sizing: border-box;
    }

    /* هدر بخش */
    .javo-studio-header {
        margin-bottom: 35px;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 20px;
        text-align: right;
    }
    .javo-studio-title {
        font-size: 24px;
        font-weight: 850;
        color: #0f172a !important;
        margin: 0 0 6px 0 !important;
    }
    .javo-studio-subtitle {
        font-size: 13px;
        color: #64748b !important;
        margin: 0 !important;
        font-weight: 500;
    }
    
/* =======================================
    Call_us
======================================= */


/* Main wrapper - completely transparent to let your light blue background shine */
.javo-contact-page-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: transparent !important; 
  padding: 80px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  direction: rtl;
}

.javo-contact-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===============================
   Hero Section (Header)
================================ */
.javo-contact-hero {
  text-align: center;
  margin-bottom: 60px;
}

.javo-badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(11, 28, 45, 0.05);
  border: 1px solid rgba(11, 28, 45, 0.1);
  border-radius: 30px;
  color: #0b1c2d; /* Dark Navy */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.javo-contact-title {
  font-size: 42px;
  font-weight: 900;
  color: #0b1c2d; /* Deep Navy for maximum contrast */
  margin: 0 0 16px 0;
  letter-spacing: -1px;
}

.javo-contact-subtitle {
  font-size: 17px;
  color: #475569; /* Elegant Slate Gray */
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.8;
  font-weight: 500;
}

/* ===============================
   Card Grid Structure
================================ */
.javo-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}

/* Premium Solid Card Styling */
.javo-contact-card {
  position: relative;
  background: #ffffff; /* Pure white for massive contrast against light blue */
  border: 1px solid rgba(11, 28, 45, 0.04);
  /* Deep, soft, multi-layered 3D shadow */
  box-shadow: 0 10px 25px rgba(11, 28, 45, 0.04), 0 20px 48px rgba(11, 28, 45, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.javo-card-inner {
  padding: 45px 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

/* 📐 JaVo Signature Asymmetric Radii */
.javo-card-call {
  border-radius: 40px 40px 20px 4px;
}
.javo-card-chat-guide {
  border-radius: 30px;
  /* Special highlight for the chat card */
  border: 2px solid #10b981;
  box-shadow: 0 15px 35px rgba(16, 185, 129, 0.08), 0 5px 15px rgba(11, 28, 45, 0.03);
}
.javo-card-email {
  border-radius: 40px 40px 4px 20px;
}

/* Icon Holders */
.javo-icon-holder {
  width: 75px;
  height: 75px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: #0b1c2d; /* Dark Navy Icons */
  transition: all 0.3s ease;
}
.javo-card-chat-guide .javo-icon-holder {
  background: #ecfdf5; /* Soft green background for chat icon */
  border-color: #a7f3d0;
  color: #10b981; /* Emerald green icon */
}
.javo-svg-icon {
  width: 34px;
  height: 34px;
}

/* Online Pulse Badge */
.javo-status-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ecfdf5;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #a7f3d0;
}
.javo-pulse-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: javoPulse 2s infinite;
}
.javo-status-text {
  font-size: 12px;
  color: #047857;
  font-weight: 700;
}

/* Typography Inside Cards */
.javo-card-title {
  font-size: 22px;
  font-weight: 800;
  color: #0b1c2d; /* Dark Navy */
  margin: 0 0 14px 0;
}

.javo-card-desc {
  font-size: 14.5px;
  color: #475569; /* Slate Gray */
  line-height: 1.7;
  margin: 0 0 24px 0;
  min-height: 50px;
}

.javo-card-value {
  font-size: 19px;
  font-weight: 700;
  color: #0284c7;
  text-decoration: none;
  margin-bottom: 32px;
  display: block;
}

/* Executive Action Buttons */
.javo-card-btn {
  width: 100%;
  padding: 16px 24px;
  background: #0b1c2d; /* Solid Dark Navy Button */
  border: none;
  border-radius: 16px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(11, 28, 45, 0.15);
}
.javo-card-chat-guide .javo-card-btn {
  background: #10b981; /* Vibrant Green for the Chat action */
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.javo-btn-arrow {
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/* ===============================
   Desktop Hover Physics
================================ */
.javo-contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(11, 28, 45, 0.08), 0 30px 60px rgba(11, 28, 45, 0.04);
}

.javo-card-chat-guide:hover {
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15), 0 30px 60px rgba(11, 28, 45, 0.04);
}

.javo-contact-card:hover .javo-icon-holder {
  transform: scale(1.08) rotate(-3deg);
}

.javo-contact-card:hover .javo-card-btn {
  background: #0ea5e9; /* Shifts to a brighter JaVo blue on hover */
  transform: translateY(-2px);
}
.javo-card-chat-guide:hover .javo-card-btn {
  background: #059669; /* Darker green on hover */
}

.javo-contact-card:hover .javo-btn-arrow {
  transform: rotate(180deg) translateX(5px);
}

/* ===============================
   Sub-Footer Meta Info
================================ */
.javo-contact-sub-footer {
  border-top: 2px dashed rgba(11, 28, 45, 0.08);
  padding-top: 35px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.javo-meta-info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.javo-meta-label {
  font-size: 14px;
  color: #0b1c2d;
  font-weight: 800;
  text-transform: uppercase;
}
.javo-meta-val {
  font-size: 15px;
  color: #475569;
  font-weight: 500;
}

/* Pulse Animation */
@keyframes javoPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ===================================================
   Mobile Optimization
=================================================== */
@media (max-width: 1024px) {
  .javo-contact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .javo-contact-page-wrapper { padding: 40px 15px; }
  .javo-contact-hero { margin-bottom: 40px; }
  .javo-contact-title { font-size: 32px; }
  .javo-contact-subtitle { font-size: 15px; }
  
  .javo-contact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
  }
  
  .javo-card-inner { padding: 35px 25px; }
  .javo-icon-holder {
    width: 65px;
    height: 65px;
    margin-bottom: 20px;
  }
  .javo-svg-icon { width: 28px; height: 28px; }
  .javo-card-title { font-size: 20px; }
  .javo-card-desc { font-size: 14px; min-height: auto; margin-bottom: 20px; }
  .javo-card-value { font-size: 17px; margin-bottom: 20px; }
  
  .javo-card-call   { border-radius: 30px 30px 15px 4px; }
  .javo-card-chat-guide { border-radius: 24px; }
  .javo-card-email  { border-radius: 30px 30px 4px 15px; }

  .javo-contact-card:hover { transform: none !important; }
  .javo-contact-card:active { transform: scale(0.98) !important; }

  .javo-contact-sub-footer { flex-direction: column; gap: 24px; text-align: center; }
  .javo-meta-info-item { align-items: center; }
}
/* =======================================
  about_us 
======================================= */
.javohub-master-about {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 100px 0;
    direction: rtl;
    color: #ffffff;
}

/* 2. Hero Grid System */
.about-hero-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    margin-bottom: 120px;
}

/* 3. Left Content: Typography Mastery */
.left-content {
    flex: 1;
    animation: fadeInRight 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.about-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    margin-bottom: 25px;
    /* گرادینت سرمه‌ای تیره، عمیق و فوق‌العاده مینیمال */
    background: linear-gradient(90deg, #1e3a8a, #1e3a8a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.about-description {
   font-size: 1.15rem;
    line-height: 1.8; /* کمی فشرده‌تر برای حس حرفه‌ای‌تر */
    color: #1e3a8a; /* سرمه‌ای عمیق و بسیار باکلاس */
    max-width: 600px;
    text-align: justify;
    letter-spacing: 0.01em; /* افزودن کمی فضا برای خوانایی شبیه مجلات */
    margin: 0;
}

/* 4. Right Branding: The "Focus" Circle */
.right-branding {
    flex: 0 0 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    animation: fadeInUp 1.5s ease-out;
}

.logo-circle {
    width: 300px;   /* بزرگ‌تر شد */
    height: 300px;  /* بزرگ‌تر شد */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 212, 255, 0.3);
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* افکت چرخش هاله دور لوگو */
.logo-circle::after {
   content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    /* تغییر به سرمه‌ایِ عمیق و شیک */
    border: 1px dashed rgba(30, 58, 138, 0.5); 
    animation: rotate 20s linear infinite;
}

.logo-circle:hover {
    transform: scale(1.05) rotate(2deg);
    border-color: #1e3a8a;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.2);
}

.logo-circle img {
    width: 290px;   /* بزرگ‌تر شد */
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}

.brand-name {
    font-size: 3rem;
    font-weight: 800;
    margin: 25px 0 5px 0;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #1e3a8a;
}

.brand-slogan {
    font-size: 1rem;
    color: #1e3a8a;
    letter-spacing: 2px;
    opacity: 0.95;
}

/* --- Animation --- */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .about-hero-grid {
        flex-direction: column-reverse;
        text-align: center;
        gap: 40px;
    }

    .left-content {
        width: 100%;
    }

    .about-description {
        margin: 0 auto;
        text-align: center;
    }

    .right-branding {
        flex: none;
        width: 100%;
        margin-bottom: 50px;
    }
}

@media (max-width: 600px) {
    .javohub-master-about {
        padding: 70px 16px;
    }

    .about-title {
        font-size: 2.2rem;
        text-align: center;
    }

    .about-description {
        font-size: 1rem;
        line-height: 1.9;
        text-align: center;
    }

    .logo-circle {
        width: 230px;   /* برای موبایل هم خوب و بزرگ */
        height: 230px;
    }

    .logo-circle img {
        width: 145px;
    }

    .brand-name {
        font-size: 2.2rem;
        letter-spacing: 3px;
    }
}
.javo-stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding: 60px 0;
    margin: 0 auto;
    max-width: 1000px;
    /* خطوط بسیار نازک و ملایم */
    border-top: 1px solid rgba(30, 58, 138, 0.15);
    border-bottom: 1px solid rgba(30, 58, 138, 0.15);
}

.stat-box {
    text-align: center;
}

.stat-value {
    display: block;
    /* فونت مدرن برای نمایش عالی اعداد انگلیسی */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #1e3a8a; /* همان رنگ سرمه‌ای که خواستی */
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -1px;
}

.stat-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #64748b; /* خاکستریِ ملایم برای متن توضیحات */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .javo-stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
    .stat-value { font-size: 2.5rem; }
}
#about_us_container {
    position: relative;
}
#about_us_container:before {
    content: "";
    width: 1000px;
    height: 1000px;
    border-radius: 2000px;
    background-color: #70C6F3;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 20%;
    left: 90%;
    z-index: -1;
    transition: all 0.5s ease;
    animation: floatCircle 8s ease-in-out infinite;
}
#about_us_container:after {
    content: "";
    width: 500px;
    height: 500px;
    border-radius: 2000px;
    background-color: #70C6F3;
    transform: translate(-50%, 0%);
    position: absolute;
    top: 50%;
    left: 10%;
    z-index: -1;
    transition: all 0.5s ease;
    animation: floatCircle 6s ease-in-out infinite;
}

@media (max-width: 767px) {
    #about_us_container:before {
        width: 300px !important;
        height: 500px !important;
        top: 10% !important;
        left: 100% !important;
        animation: floatCircle 3s ease-in-out infinite !important;
    }
    #about_us_container:after {
        width: 300px !important;
        height: 300px !important;
        top: 50% !important;
        left: 10% !important;
    }
}

@keyframes floatCircle {
    0%, 100% { top: 5%; }
    50%       { top: 15%; }
}

/* =======================================
  podcasters-banner
======================================= */

.podcasters-banner {
  width: 100% !important;
  max-width: 1400px;
  margin: 30px auto !important;
  padding: 0 15px !important; /* فاصله ایمن لبه‌ها */
  direction: rtl !important; /* راست‌به‌چپ سراسری */
  box-sizing: border-box !important;
}
.banner-container {
  display: flex !important;
  flex-direction: row-reverse !important; /* عکس راست، متن وسط، آمار چپ */
  align-items: center !important;
  justify-content: space-between !important;
  padding: 30px 40px !important;
  gap: 25px !important;
  overflow: hidden !important; /* جلوگیری از بیرون زدگی هر المانی */
  
  /* استایل شیشه مات اختصاصی JAVO */
  background: rgba(248, 248, 248, 0.35) !important;
  backdrop-filter: blur(25px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(120%) !important;
  border-radius: 24px !important;
  
  /* لبه‌های کریستالی براق */
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.9) !important;
  
  /* سایه عمیق دوربرد Premium */
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06) !important;
}

/* =======================================
   ۲. بخش تصویر شاخص (دایره فیکس و بزرگ)
======================================= */
.banner-media {
  flex: 0 0 220px !important; /* اندازه فیکس دسکتاپ */
  height: 220px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 5px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07) !important;
  display: block !important;
}

.banner-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* =======================================
   ۳. بخش محتوای متنی (مرکز بنر)
======================================= */
.banner-content {
  flex: 1 !important;
  text-align: right !important;
  padding-right: 15px !important;
}

.banner-title {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: clamp(20px, 2.5vw, 26px) !important;
  font-weight: 700 !important;
  color: #0b1c2d !important;
  margin: 0 0 10px 0 !important;
}

.banner-description {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: clamp(13px, 1.3vw, 14.5px) !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  max-width: 500px !important;
  margin: 0 !important;
}




/* ===================================
podcaster_list 
   =================================== */
/* ====== کانتینر اصلی ====== */
.podcaster-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  padding: 40px 5vw;
  justify-items: center;
}

/* ====== هر آیتم پادکستر ====== */
.podcaster-item {
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ====== تصویر دایره‌ای ====== */
.image-container {
  position: relative;
  width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* ====== افکت هاور روی عکس ====== */
.podcaster-item:hover .image-container {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.podcaster-item:hover img {
  transform: scale(1.1);
}

/* ====== متن‌ها ====== */
.name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.listeners {
  font-size: 0.85rem;
  color: #777;
}

/* ====== تغییر سایز و چیدمان در نمایشگرهای مختلف ====== */

/* --- برای صفحه‌های بزرگ (دسکتاپ) --- */
@media (min-width: 1200px) {
  .podcaster-gallery {
    grid-template-columns: repeat(7, 1fr);
  }

  .image-container {
    width: 130px;
  }

  .name {
    font-size: 1.05rem;
  }
}

/* --- برای تبلت‌ها --- */
@media (max-width: 991px) {
  .podcaster-gallery {
    grid-template-columns: repeat(5, 1fr);
  }

  .image-container {
    width: 110px;
  }
}

/* --- برای موبایل‌ها --- */
@media (max-width: 600px) {
  .podcaster-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .image-container {
    width: 90px;
  }

  .name {
    font-size: 0.9rem;
  }

  .listeners {
    font-size: 0.75rem;
  }
}

/* ====== افکت‌های ظریف ====== */
.podcaster-item:hover {
  transform: translateY(-6px);
}
.podcaster-item {
    display: block;          /* حفظ ساختار باکس */
    text-decoration: none;   /* حذف خط زیر لینک */
    color: inherit;   }
/* ===================================
   JAVO ROADMAP
   =================================== */
.javo-learning-path {
    max-width: 1200px;
    margin: auto;
    padding: 80px 20px;
    direction: rtl;
}

.javo-learning-header {
    text-align: center;
    margin-bottom: 80px;
}

.javo-learning-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
}

.javo-learning-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px; /* فاصله بهینه عمودی */
    width: 100%;
}

/* خط وسط نقشه راه - مدل نئونی سیال */
.javo-learning-list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px; /* کمی ضخیم‌تر برای جلوه بهتر */
    border-radius: 10px;
    background: #e2e8f0; /* رنگ مسیر پایه */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    z-index: 1;
}

/* =========================================================================
   JAVO ROADMAP - ANIMATED SMOOTH DASHED LINE
   ========================================================================= */

/* ۱. خط پایه جاده (لاین خاکستری بسیار کمرنگ و مینی‌مال در زیر) */
.javo-learning-list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background-image: linear-gradient(to bottom, #e2e8f0 60%, rgba(255,255,255,0) 0%);
    background-position: center;
    background-size: 2px 8px;
    background-repeat: repeat-y;
    z-index: 1;
}

/* ۲. لایه انیمیشنی روی خط وسط (خط‌چین رنگی، ملایم و متحرک) */
.javo-learning-list::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    
    /* تبدیل گرادینت سه رنگ شما به ساختار خط‌چین مینی‌مال */
    background: repeating-linear-gradient(
        to bottom,
        #10b981 0px,
        #10b981 4px,
        transparent 4px,
        transparent 10px,
        #f59e0b 10px,
        #f59e0b 14px,
        transparent 14px,
        transparent 20px,
        #6366f1 20px,
        #6366f1 24px,
        transparent 24px,
        transparent 30px
    );
    
    background-size: 100% 60px; /* تنظیم مقیاس برای تکرار نرم انیمیشن */
    animation: flowRoadDashed 12s linear infinite; /* حرکت آرام‌تر برای تمرکز بیشتر کاربر */
    z-index: 2;
    opacity: 0.45; /* بسیار ملایم و کم‌رنگ تا بستر اصلی کارت‌ها تحت شعاع قرار نگیرد */
}

/* انیمیشن حرکت روان خط‌چین‌ها به سمت پایین */
@keyframes flowRoadDashed {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 60px;
    }
}

.javo-road-node {
    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

/* تراز چپ و راست ۱۰۰٪ فیکس شده از طریق کلاس بک‌اند */
.javo-road-node.javo-node-left {
    justify-content: flex-start;
}

.javo-road-node.javo-node-right {
    justify-content: flex-end;
}

/* =========================================================================
   JAVO ROADMAP - PREMIUM STEP NODE INDICATOR
   ========================================================================= */

/* دایره شماره مرحله در مرکز جاده - پیش‌فرض (شروع نشده) */
.javo-road-step {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    
    /* استایل مینی‌مال پایه */
    background: #ffffff;
    border: 2px solid #cbd5e1;
    color: #64748b;
    
    font-size: 13px;
    font-weight: 700;
    font-family: monospace, sans-serif; /* خوانایی بهتر اعداد انگلیسی مرحله */
    
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    
    /* ایجاد فاصله سفیدرنگ دور دایره برای قطع کردن خط‌چین پشت آن */
    box-shadow: 0 0 0 6px #ffffff;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🟢 هماهنگی دایره با کارت‌های تکمیل شده (is-done) */
.javo-road-node.javo-node-left:has(.is-done) .javo-road-step, /* اگر مرورگرهای مدرن ساپورت کنند */
.javo-road-card.is-done ~ .javo-road-step, 
.javo-road-step {
    /* این بخش پایین به عنوان یکپارچه‌ساز سراسری با هاور کار می‌کند */
}

/* برای اینکه بدون خطا کار کند، استایل اختصاصی هر وضعیت را بر پایه هاور و رنگ‌بندی تمیزتر می‌کنیم: */

/* ۱. تعامل مستقیم زمان هاور روی کل ردیف اپیزود */
.javo-road-node:hover .javo-road-step {
    transform: translate(-50%, -50%) scale(1.12);
    border-color: #0f172a;
    color: #0f172a;
    box-shadow: 0 0 0 8px #ffffff, 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* ۲. پاداش بصری: اگر کاربر روی دکمه پخش یا کارت هاور کرد، دایره حالت فعال به خود بگیرد */
.javo-road-card:hover ~ .javo-road-step {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}
/* ساختار کارت اصلی */
.javo-road-card {
    width: 430px; /* حفظ دقیق ساختار عرض اوریجینال */
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 15px 40px rgba(0,0,0,.02);
    transition: .25s;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.javo-road-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,.06);
    border-color: #cbd5e1;
}

/* تغییر رنگ ملایم کارت‌های ویژه */
.javo-road-card.is-done {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

.javo-road-card.is-learning {
    background: #fffdfa !important;
    border-color: #fef08a !important;
}

/* ساختار هدر داخلی کارت */
.javo-card-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.javo-road-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.6;
    margin: 0;
    text-align: right;
    flex: 1;
}

.javo-road-progress {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ساختار فوتر داخلی کارت */
.javo-road-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
    margin-top: auto;
}

.javo-road-duration {
    font-size: 8px;
    color: #64748b;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* دکمه مینی‌مال پخش */
.javo-road-play {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #334155 !important;
    border-radius: 10px !important;
    padding: 7px 14px !important;
    cursor: pointer;
    font-size: 12px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    display: inline-flex;
    align-items: center;
}

.javo-road-play:hover {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
}

.javo-road-card.is-done .javo-road-play:hover {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* موبایل ریسپانسیو کاملاً پایدار */
@media(max-width:768px){
    .javo-learning-list::before {
        right: 34px;
        left: auto;
        transform: none;
    }

    .javo-road-node {
        justify-content: flex-start !important;
    }

    .javo-road-step {
        right: 0;
        left: auto;
        transform: translateY(-50%);
        top: 50%;
    }

    .javo-road-card {
        width: calc(100% - 110px) !important;
        margin-right: 90px !important;
        margin-left: 0 !important;
    }
}
/* =========================================================================
   JAVO ROADMAP - ULTRA-STABLE & ANIMATED MOBILE RESPONSIVE (RTL FIX)
   ========================================================================= */
@media (max-width: 768px) {
    /* ۱. انتقال خط پایه خاکستری به سمت راست (تراز با دایره‌ها) */
    .javo-learning-list::before {
        right: 34px !important;
        left: auto !important;
        transform: none !important;
        background-size: 2px 8px !important;
    }

    /* ۲. انتقال و فعال‌سازی خط‌چین انیمیشنی و سیال به سمت راست در موبایل */
    .javo-learning-list::after {
        right: 34px !important;
        left: auto !important;
        transform: none !important;
        width: 2px !important;
        /* حفظ دقیق گرادینت متحرک سه رنگ */
        background: repeating-linear-gradient(
            to bottom,
            #10b981 0px,
            #10b981 4px,
            transparent 4px,
            transparent 10px,
            #f59e0b 10px,
            #f59e0b 14px,
            transparent 14px,
            transparent 20px,
            #6366f1 20px,
            #6366f1 24px,
            transparent 24px,
            transparent 30px
        ) !important;
        background-size: 100% 60px !important;
        animation: flowRoadDashed 12s linear infinite !important;
        z-index: 2 !important;
        opacity: 0.45 !important;
    }

    /* ۳. تراز کردن تمام ردیف‌ها به سمت راست برای ایجاد ساختار یکدست خط زمان */
    .javo-road-node {
        justify-content: flex-start !important; /* لود کردن کارت‌ها در مسیر درست */
        padding-right: 0 !important;
    }

    /* ۴. فیکس کردن دقیق دایره شماره مرحله روی خط‌چین متحرک در سمت راست */
    .javo-road-step {
        right: 17px !important; /* ۳۴ پیکسل خط وسط تقسیم بر ۲ برای سنتر شدن دقیق */
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important; /* حذف ترنسلیت X دسکتاپ و تنظیم عمودی */
        box-shadow: 0 0 0 6px #ffffff !important; /* حفظ افکت قطع کردن خط پشت سر */
    }

    /* ۵. بهینه‌سازی ابعاد کارت برای مچ شدن با خط زمان در موبایل */
    .javo-road-card {
        width: calc(100% - 75px) !important; /* فضا دادن بهینه به کارت در صفحات کوچک */
        margin-right: 75px !important; /* ایجاد فاصله استاندارد از خط زمان سمت راست */
        margin-left: 0 !important;
    }

    /* ۶. حفظ افکت تعاملی هاور و بزرگنمایی دایره در موبایل/لمس */
    .javo-road-node:hover .javo-road-step {
        transform: translateY(-50%) scale(1.1) !important; /* بزرگنمایی ایمن بدون جابجایی محور X */
    }
}
@media (max-width: 767px) {
    /* حالت عادی در موبایل: باکس نگه‌دارنده تمیز و فیت */
    body:not(.javo-downloading) #javo-cert-unlocked-zone > div:last-child {
        width: 100% !important;
        height: 240px !important;
        overflow: hidden !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-bottom: 0 !important;
    }

    /* حالت عادی در موبایل: کوچک کردن گواهی بدون اسکرول */
    body:not(.javo-downloading) #javo-printable-certificate {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.35) !important;
        transform-origin: center center !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
}
/* ==========================
   Premium Master Player
========================== */
.javo-premium-player-wrapper{

    position: fixed !important;

    bottom: 20px !important;

    left: 20px !important;

    right: 20px !important;

    transform: translateY(150%);

    opacity: 0;

    transition: transform .45s ease,

                opacity .45s ease !important;

    z-index: 999999 !important;

}

.javo-premium-player-wrapper.active{

    transform: translateY(0);

    opacity: 1;

}

/* کارت شیشه‌ای با عمق بسیار بالا و افکت Blur سنگین */
.javo-glass-card {
      /* تنظیم بگراند: افزایش شفافیت (0.45) باعث می‌شود کارت سفیدتر دیده شود */
    background: rgba(255, 255, 255, 0.60) !important;
    
    /* افکت شیشه‌ای (بلور) */
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    
    /* لبه‌های شیشه‌ای که نور را منعکس می‌کنند */
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 30px !important;
    
    /* سایه بسیار نرم برای جدا کردن از صفحه (مینیمال) */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07) !important;
    
    /* تنظیمات ساختاری */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 30px !important;
    gap: 30px !important;
    position: relative !important;
    transition: all 0.3s ease !important; /* برای نرم‌تر شدن انیمیشن‌ها */
}


/* ۱. استایل بخش کاور و رینگ نوری متحرک */
.javo-player-cover-zone {
    position: relative !important;
    width: 90px !important;
    height: 90px !important;
    flex-shrink: 0 !important;
}

.javo-player-cover-zone img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    z-index: 3 !important;
    position: relative !important;
    border: 3px solid rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* رینگ نورانی پشت کاور */
.javo-cover-ring-glow {
    position: absolute !important;
top: -4px !important;    /* کمی بیشتر از قبل تا فضای پخش نور بیشتر شود */
left: -4px !important;
right: -4px !important;
bottom: -4px !important;
border-radius: 50% !important;

/* گرادینت سرمه‌ای به آبی الکتریک برای عمق بیشتر */
background: linear-gradient(135deg, #1e3a8a, #0ea5e9) !important;

opacity: 0.5 !important; /* کمی بالاتر تا در روز هم درخشش داشته باشد */
filter: blur(30px) !important; /* بلور بیشتر برای حس درخشش نرم */
z-index: -1 !important; /* حتماً پشت المان اصلی قرار بگیرد */
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;

}

/* چرخش کاور هنگام پخش پادکست */
.playing .javo-player-cover-zone img {
    animation: rotateCoverPremium 12s linear infinite !important;
}
.playing .javo-cover-ring-glow {
    opacity: 0.75 !important;
    animation: pulseGlow 3s ease-in-out infinite alternate !important;
}

@keyframes rotateCoverPremium {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes pulseGlow {
    0% { transform: scale(0.98); filter: blur(6px); }
    100% { transform: scale(1.04); filter: blur(12px); }
}
.javo_episode_title,
.site-title {
    font-family: "Vazirmatn", sans-serif;
}

body,
.javo_episode_description {
    font-family: "Vazirmatn", sans-serif;
}

/* ۲. بخش اطلاعات و عنوان اپیزود */
.javo-player-info-zone {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 150px !important;
    max-width: 220px !important;
}

.javo-badge-live {
   background: linear-gradient(135deg, rgba(224, 242, 254, 0.7), rgba(240, 249, 255, 0.7)) !important;
border: 1px solid rgba(147, 197, 253, 0.5) !important;
color: #1e3a8a !important; /* سرمه‌ای عمیق برای خوانایی و پرستیژ */
font-size: 11px !important;
padding: 3px 12px !important; /* کمی پهن‌تر برای حسِ شکیل‌تر */
border-radius: 20px !important;
width: fit-content !important;
font-weight: 600 !important; /* کمی نرم‌تر از bold مطلق */
letter-spacing: 0.3px !important;
backdrop-filter: blur(4px) !important; /* یک بلور خیلی خفیف برای هماهنگی با پلیر */
}

.javo-player-info-zone h3 {
    color: #1e3a8a !important;
margin: 0 !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.5 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;

/* این جادوی جدید برای حس "فرو رفتگی" در شیشه */
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(30, 58, 138, 0.2) !important;

}

/* ۳. بخش وسط: تایم‌لاین ویژوالایزر با تغییر رنگ هوشمند */
.javo-player-center-zone {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.javo-timeline-container {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.javo-time-digit {
    font-family: monospace, system-ui !important;
    font-size: 13px !important;
    color: #1e3a8a !important;
    min-width: 45px !important;
    text-align: center !important;
}

.javo-waveform-wrapper {
    position: relative !important;
    flex-grow: 1 !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

/*Timeline*/
.javo-waveform-wrapper{
    position:relative;
    width:100%;
    height:48px;
    overflow:hidden;
    direction: ltr !important;
}

.javo-waveform-bg,
.javo-waveform-progress{

    position:absolute;
    inset:0;

    mask-image:
    repeating-linear-gradient(
        90deg,
        #000 0,
        #000 3px,
        transparent 3px,
        transparent 8px
    );

    -webkit-mask-image:
    repeating-linear-gradient(
        90deg,
        #000 0,
        #000 3px,
        transparent 3px,
        transparent 8px
    );
}

 
.javo-waveform-bg{

    background:
    linear-gradient(
        to top,
        rgba(191, 219, 254, 0.35),
        rgba(219, 234, 254, 0.65),
        rgba(191, 219, 254, 0.35)
    );

    opacity:.6;
}

.javo-waveform-progress{

    width:0;

    background:
    linear-gradient(
        90deg,
        #1e40af 0%,   /* سرمه‌ای مدیوم (آبی رویال تیره) */
        #1e3a8a 40%,  /* سرمه‌ای استاندارد */
        #0f172a 100% 
    );

    transition:width .1s linear;
}
#javo_seek{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    opacity:0.01;

    cursor:pointer;

    z-index:10;

    direction:ltr !important;

    transform:scaleX(1) !important;

    appearance:none;
    -webkit-appearance:none;

    background:transparent;
}
/* مخفی کردن کامل ظاهر زشت تگ رنجِ اسلایدر پیش‌فرض مرورگر */
#javo_seek {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important; /* کاملاً شیشه‌ای و مخفی اما قابل تاچ و کلیک */
    z-index: 5 !important;
    cursor: pointer !important;
    direction: ltr !important;}

/* ۴. بخش چپ: کنترل‌های مدرن پخش نئونی */
.javo-player-controls-zone {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-shrink: 0 !important;
}

.javo-control-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    outline: none !important;
    
    /* رنگ آبی ملایم و شفاف */
    color: #60a5fa !important; 
    
    /* ترنزیشن نرم برای رنگ و اندازه */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* سایز استاندارد برای آیکون */
    font-size: 24px !important;
    padding: 10px !important;
}

.javo-control-btn:hover {
     color: #1e3a8a !important;
    transform: scale(1.15) !important; /* کمی بزرگتر می‌شود تا حس تعامل بدهد */
}

/* --- تنظیمات اختصاصی دکمه جلو (Forward) --- */
#javo_forward:hover {
    color: #1e3a8a !important; /* تبدیل به سرمه‌ای در هاور */
    /* چرخش ۱۵ درجه به سمت چپ (خلاف جهت عقربه‌های ساعت) و کمی بزرگ شدن */
    transform: scale(1.2) rotate(45deg) !important;
}

/* --- تنظیمات اختصاصی دکمه عقب (Back) --- */
#javo_back:hover {
    color: #1e3a8a !important; /* تبدیل به سرمه‌ای در هاور */
    /* چرخش ۱۵ درجه به سمت راست (در جهت عقربه‌های ساعت) و کمی بزرگ شدن */
    transform: scale(1.2) rotate(-15deg) !important;
}

/* استایل آیکون داخل دکمه برای اطمینان از ابعاد */
.javo-control-btn.skip-btn svg {
    transition: transform 0.3s ease !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important;
}

/* دکمه پخش دایره‌ای با رینگ نوری نئونی فعال */
.play-main-btn {
    width: 60px !important;
    height: 60px !important;
    /* استفاده از گرادینت سرمه‌ای عمیق که در ویژوالایزر استفاده کردیم */
    background: linear-gradient(135deg, #B3e7ff, #B3e7ff) !important; 
    border-radius: 50% !important;
    
    /* رنگ آیکون سفید یا آبی خیلی روشن برای کنتراست */
    color: #1e40af !important; 
    font-size: 20px !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    
    /* سایه ملایم و محو به جای درخشش فسفری */
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3) !important;
    
    /* اضافه کردن ترنزیشن برای وقتی که دکمه را می‌زنند */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

/* افکت هاور برای حس لوکس بودن */
.play-main-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.5) !important;
}
.javo-player-close-btn {
    position: absolute !important;
    /* قرارگیری دقیق روی لبه بالایی پلیر */
    top: -12px !important;
    left: 25px !important;
    
    /* ابعاد کامپکت و دایره‌ای */
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    
    /* طراحی نیمه شیشه‌ای مینیمال متناسب با جاوو */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(30, 58, 138, 0.15) !important;
    
    /* رنگ آیکون متمایل به تم اصلی سرمه‌ای */
    color: #1e3a8a !important;
    
    /* تراز وسط دقیق برای SVG */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* تنظیمات تعاملی */
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 9999999 !important;
    
    /* سایه بسیار ملایم برای ایجاد عمق */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
    
    /* ترنزیشن نرم برای انیمیشن‌ها */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* استایل آیکون SVG داخل دکمه */
.javo-player-close-btn svg {
    width: 11px !important;
    height: 11px !important;
    display: block !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* افکت هاور مدرن و لوکس */
.javo-player-close-btn:hover {
    background: #1e3a8a !important; /* تغییر رنگ بک‌گراند به سرمه‌ای تیره */
    color: #ffffff !important;        /* تغییر رنگ آیکون به سفید */
    transform: scale(1.1) !important; /* کمی بزرگ‌تر شدن برای بازخورد کلیک */
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25) !important;
}

/* انیمیشن چرخش ۹۰ درجه آیکون ضربدر در حالت هاور */
.javo-player-close-btn:hover svg {
    transform: rotate(90deg) !important;
}
  /* ==========================
   Premium Master Player - Mobile Responsive 
========================== */
@media (max-width: 900px) {
    .javo-glass-card {
        flex-direction: column !important;
        padding: 25px 20px !important;
        gap: 20px !important;
        text-align: center !important;
    }
    .javo-player-info-zone {
        align-items: center !important;
        max-width: 100% !important;
    }
    .javo-timeline-container {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* کارت اصلی - فعال‌سازی ساختار دو ردیفه برای انتقال تایم‌لاین به پایین */
    .javo-glass-card {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; 
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px 16px !important; 
        padding: 14px 16px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border-radius: 24px !important; 
    }

    /* ۱. استایل بخش کاور */
    .javo-player-cover-zone {
        width: 52px !important;
        height: 52px !important;
        flex-shrink: 0 !important;
        position: relative !important;
        order: 1 !important; 
    }

    .javo-player-cover-zone img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important; 
        object-fit: cover !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        z-index: 3 !important;
        position: relative !important;
    }

    .javo-cover-ring-glow {
        position: absolute !important;
        top: -2px !important;
        left: -2px !important;
        right: -2px !important;
        bottom: -2px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #1e3a8a, #0ea5e9) !important;
        opacity: 0.5 !important;
        filter: blur(8px) !important; 
        z-index: 1 !important;
    }

    /* ۲. اطلاعات اپیزود - 🌟 فیکس نهایی کنترل متن و کاهش فونت سایز */
    .javo-player-info-zone {
        flex: 1 1 0% !important; 
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important;
        order: 2 !important; 
        text-align: right !important;
    }

    .javo-player-info-zone h3 {
        font-size: 11px !important; /* کاهش اندازه فونت برای مینی‌مال شدن */
        line-height: 1.4 !important;
        color: #1e3a8a !important;
        margin: 0 !important;
        white-space: nowrap !important; /* جلوگیری قطعی از شکستن متن به خط بعد */
        overflow: hidden !important; /* مخفی کردن ادامه متن طولانی */
        text-overflow: ellipsis !important; /* نمایش سه نقطه در پایان متن طولانی */
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
        display: block !important;
        width: 100% !important;
    }

    .javo-badge-live {
        font-size: 8px !important;
        padding: 1px 6px !important;
        border-radius: 10px !important;
        width: fit-content !important;
        display: inline-block !important; 
    }

    /* ۳. کنترل‌ها و دکمه اصلی پخش */
    .javo-player-controls-zone {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        order: 3 !important;
    }

    .javo-control-btn {
        padding: 6px !important;
        font-size: 18px !important;
    }

    .javo-control-btn.skip-btn svg {
        width: 15px !important;
        height: 15px !important;
    }

    .play-main-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 3px 10px rgba(30, 58, 138, 0.25) !important;
    }

    /* ۴. انتقال بخش تایم‌لاین به پایین */
    .javo-player-center-zone {
        flex: 0 0 100% !important; 
        width: 100% !important;
        min-width: 0 !important;
        order: 4 !important; 
        padding-top: 4px !important; 
    }

    .javo-timeline-container {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .javo-waveform-wrapper {
        height: 24px !important; 
        flex: 1 !important;
        min-width: 0 !important;
    }

    .javo-time-digit {
        font-size: 10px !important;
        min-width: 34px !important;
        flex-shrink: 0 !important;
        color: #1e3a8a !important;
    }
}

/* فیکس اختصاصی برای نمایشگرهای بسیار کوچک (زیر 480 پیکسل) */
@media (max-width: 480px) {
    .javo-glass-card {
        padding: 10px 12px !important;
        gap: 8px 12px !important;
    }
    .javo-player-cover-zone {
        width: 44px !important;
        height: 44px !important; 
    }
    
    /* 🌟 مینی‌مال‌تر شدن عنوان در گوشی‌های بسیار ریز جهت امنیت چیدمان */
    .javo-player-info-zone h3 {
        font-size: 10px !important;
    }
    
    .javo-control-btn {
        padding: 4px !important;
    }
    .javo-control-btn.skip-btn svg {
        width: 13px !important;
        height: 13px !important;
    }
    .play-main-btn {
        width: 34px !important;
        height: 34px !important;
    }
    .javo-waveform-wrapper {
        height: 20px !important; 
    }
    .javo-time-digit {
        font-size: 9px !important;
        min-width: 30px !important;
    }
}

@media (max-width: 768px) {
    .javo-player-close-btn {
        top: -10px !important;
        left: 16px !important;
        width: 23px !important;
        height: 23px !important;
        background: rgba(255, 255, 255, 0.95) !important; 
    }
    
    .javo-player-close-btn svg {
        width: 9px !important;
        height: 9px !important;
    }
}
/* ==========================
 Episode card - podcaster
========================== */
.javo-v2-wrapper {
    position: relative;
   background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.60),
        rgba(255,255,255,.40)
    );
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 28px;
    padding: 24px;
    direction: rtl;
    box-shadow:
        0 12px 32px rgba(15,23,42,.06),
        0 4px 12px rgba(15,23,42,.03);
    margin-bottom: 8px;
    margin-left: 5%;
    margin-right: 5%;
    overflow: hidden;
    transition:
        transform .35s ease;
       box-shadow:
    0 12px 32px rgba(15,23,42,.06),
    0 4px 12px rgba(15,23,42,.03);
}
/* نور ملایم گوشه کارت */
.javo-v2-wrapper::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(179,231,255,.45),
            transparent 70%
        );
    pointer-events: none;
}
/* خط تأکید خیلی ظریف بالا */
.javo-v2-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 28px;
    left: 28px;
    height: 3px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            rgba(179,231,255,.85),
            rgba(30,58,138,.25),
            transparent
        );
}
/* بدنه اصلی کارت: چیدمان افقی استاندارد بر اساس RTL */
.javo-v2-card-main {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}
/* --- سمت راست: کاور --- */
.javo-v2-cover-box {
    flex-shrink: 0;
}
.javo-v2-img {
    width:88px !important;
    height:88px !important;
    min-width:88px !important;
    object-fit:cover !important;
    border-radius:50% !important;
    overflow:hidden !important;
    border:4px solid rgba(255,255,255,.9) !important;
    box-shadow:
        0 0 0 6px rgba(191,219,254,.45),
        0 8px 25px rgba(30,58,138,.18) !important;
}
/* --- بخش وسط: تایتل، توضیحات و دکمه‌های تعاملی --- */
.javo-v2-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
}
.javo-v2-title {
    margin: 0 0 5px 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a1a1a;
}
.javo-v2-desc {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

/* دکمه‌های لایک، ذخیره و آمار کنار هم */
.javo-v2-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap; /* در صورت کمبود عرض، دکمه‌ها زیر هم می‌روند و خراب نمی‌شوند */
}
/* =================================================================
   دکمه ذخیره (Save) 
================================================================= */
.javo-v2-btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none !important; /* حذف کامل باکس پس‌زمینه */
    border: none !important;     /* حذف کامل بوردر */
    box-shadow: none !important; /* حذف سایه‌های اضافه */
    color: #000 !important;   /* تم آبی ملایم و زنده سایت */
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    padding: 0;                  /* تراز شدن دقیق با سایر المان‌های بدون باکس */
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* آیکون داخل دکمه ذخیره */
.javo-save-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.javo-v2-btn-save svg {
    transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* متن دکمه ذخیره */
.javo-save-text {
    transition: color 0.25s ease;
}

/* ----------------------------------
   وضعیت فعال و توپر دکمه پس از کلیک شدن (is-saved)
---------------------------------- */
.javo-v2-btn-save.is-saved {
    color: #3b82f6 !important; /* حفظ رنگ آبی اصیل برای حالت ذخیره شده */
}

.javo-v2-btn-save.is-saved svg {
    fill: #3b82f6; /* توپر شدن آیکون با رنگ آبی */
    stroke: #3b82f6;
}

/* ----------------------------------
   انیمیشن کشسانی و جهش بوکمارک (موقع کلیک)
---------------------------------- */
@keyframes javoBookmarkPop {
    0% { transform: scale(1); }
    25% { transform: scaleY(0.7) scaleX(1.15); }  /* فشرده شدن ملایم به سمت پایین */
    60% { transform: scaleY(1.25) scaleX(0.85); } /* جهش و کشیدگی رو به بالا */
    100% { transform: scale(1); }                  /* بازگشت به ابعاد استاندارد */
}

/* کلاس انیمیشن که با جاوااسکریپت فعال می‌شود */
.javo-save-pop .javo-save-icon {
    animation: javoBookmarkPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* =================================================================
  Like
================================================================= */
.javo-v2-btn-like {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px; /* ایجاد یک فضای کلیک مناسب بدون تغییر استایل ظاهری */
    background: none; 
    border: none;
    /* رنگ آیکون و عدد در حالت عادی: آبی زنده سایت */
    color: #3b82f6; 
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease;
    padding: 0; /* حذف پدینگ‌های اضافه برای تراز شدن دقیق */
}

/* هاور دکمه (کمی بزرگتر شدن بسیار ملایم برای فیدبک به کاربر) */
.javo-v2-btn-like:hover {
    transform: scale(1.05);
}

/* استایل رپر آیکون قلب */
.javo-like-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform; /* بهینه‌سازی مرورگر برای اجرای نرم‌تر انیمیشن */
}

.javo-heart-svg {
    /* انیمیشن نرم برای پر شدن داخل قلب */
    transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* عدد شمارشگر لایک */
.javo_like_count {
    font-variant-numeric: tabular-nums;
    color: inherit; /* رنگ عدد همیشه از والد خود تبعیت می‌کند */
}

/* ----------------------------------
   حالت لایک شده (is-liked) -> فقط المان‌ها قرمز می‌شوند
---------------------------------- */
.javo-v2-btn-like.is-liked {
    color: #ef4444; /* تغییر رنگ عدد و خطوط دور قلب به قرمز */
}

/* توپر و قرمز شدن آیکون قلب */
.javo-v2-btn-like.is-liked .javo-heart-svg {
    fill: #ef4444;
    stroke: #ef4444;
}

/* ----------------------------------
   افکت انیمیشن تپش و چرخش هوشمند قلب (موقع کلیک)
---------------------------------- */
@keyframes javoHeartPop {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.4) rotate(-15deg); } /* تپش بزرگ همراه با زاویه متحرک */
    60% { transform: scale(0.85) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* اعمال انیمیشن روی رپر آیکون */
.javo-heart-pop .javo-like-icon-wrap {
    animation: javoHeartPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* ----------------------------------
   plays-display
---------------------------------- */
/* بخش نمایش آمار پخش - یکدست، آبی کریستالی و آلترا مینی‌مال */
.javo-v2-plays-display {
    display: inline-flex;
    align-items: center;      /* تراز عمودی کاملاً دقیق */
    justify-content: center;
    gap: 6px;                 /* فاصله مینی‌مال و استاندارد بین آیکون و عدد */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    /* 🟢 تغییر کلیدی: رنگ کل مجموعه (آیکون و عدد) یکدست آبی برند شما می‌شود */
    color: #3b82f6; 
    font-size: 13px;
    font-weight: 700;
    padding: 0;
    line-height: 1;           /* حذف فضاهای مرده فونت برای تراز بی‌نقص */
}
/* رپر آیکون سیگنال صوتی */
.javo-plays-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;           /* ارث‌بری مستقیم از رنگ والد (آبی) */
    height: 15px;
    width: 15px;
}
/* خودِ آیکون SVG */
.javo-plays-icon-wrap svg {
    display: block;
    fill: currentColor;       /* تبعیت کامل آیکون از رنگ آبی مجموعه */
}
/* عدد شمارشگر آمار پخش */
.play-num {
    font-variant-numeric: tabular-nums;
    color: inherit;           /* هم‌رنگ شدن کامل و دقیق با آیکون (آبی) */
    line-height: 1;
    display: inline-block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 🟢 افکت فلاش زمان کلیک (به جای تغییر رنگ، یک درخشندگی یا پالس لحظه‌ای به کل المان می‌دهد) */
.javo-v2-plays-display.is-flashing {
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6)); /* ایجاد هاله نورانی آبی در لحظه پخش */
}

/* ----------------------------------
   انیمیشن اکولایزری متحرک در زمان پالس
---------------------------------- */
@keyframes javoAudioWavePop {
    0% { transform: scaleY(1); }
    40% { transform: scaleY(1.4); } 
    70% { transform: scaleY(0.8); }
    100% { transform: scaleY(1); }
}

.javo-play-pop .javo-plays-icon-wrap svg {
    animation: javoAudioWavePop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom; /* رشد ستون‌ها از پایین به بالا */
}
/* ===============================
Transcript Section
=============================== */
.javo-v2-transcript-section {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* حذف بوردر و پدینگ اولیه برای جلوگیری از بزرگ شدن کارت در حالت بسته */
    border-top: 1px dashed transparent;
    padding-top: 0;
    transition: border-color 0.3s ease, padding 0.3s ease;
}
.javo-v2-transcript-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #64748b; /* رنگ خاکستری مینی‌مال در حالت پیش‌فرض */
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.25s ease, transform 0.25s ease;
}

/* رپر آیکون سند */
.javo-transcript-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* هاور دکمه (فقط تغییر رنگ ملایم به آبی سازمانی بدون جابجایی شدید) */
.javo-v2-transcript-toggle:hover {
    color: #3b82f6;
}

/* ----------------------------------
   وضعیت باز شده (is-open) -> اعمال تغییرات بصری
---------------------------------- */
/* ظاهر شدن خط‌چین جداکننده و پدینگ فقط در زمان باز بودن باکس */
.javo-v2-transcript-section.is-open {
    border-top-color: rgba(0, 0, 0, 0.06);
    padding-top: 14px;
}

/* تغییر رنگ دکمه و متن به آبی در حالت باز */
.javo-v2-transcript-section.is-open .javo-v2-transcript-toggle {
    color: #3b82f6;
}

/* چرخش زیبای آیکون به عنوان فیدبک باز شدن */
.javo-v2-transcript-section.is-open .javo-transcript-icon-wrap {
    transform: rotate(15deg) scale(1.1);
}

/* --- باکس متن خلاصه (استایل مورد پسند شما با تصحیح مارجین) --- */
.javo-v2-transcript-content {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.25s ease, 
                transform 0.25s ease,
                margin 0.25s ease;
    
    background: rgba(0, 0, 0, 0.012); 
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.85;
    color: #334155;
    box-sizing: border-box;
    padding: 0 16px; /* پدینگ چپ و راست ثابت باشد تا پرش ایجاد نکند */
}

/* انیمیشن نرم ورود متن هنگام باز شدن */
.javo-v2-transcript-section.is-open .javo-v2-transcript-content {
    max-height: 200px; /* ارتفاع استاندارد برای خلاصه */
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0);
    margin-top: 12px;
    padding: 14px 16px; /* اعمال پدینگ بالا و پایین به همراه چپ و راست */
    border: 1px solid rgba(0, 0, 0, 0.015);
}

/* اسکرول‌بار اختصاصی و مینیاتوری */
.javo-v2-transcript-content::-webkit-scrollbar {
    width: 4px;
}
.javo-v2-transcript-content::-webkit-scrollbar-track {
    background: transparent;
}
.javo-v2-transcript-content::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.2); /* اسکرول‌بار ملایم با تم آبی سایت */
    border-radius: 10px;
}
/* رپر داخلی متن برای مدیریت پدینگ‌ها و فاصله درست از دکمه */
.javo-v2-transcript-inner-text {
    padding-bottom: 10px;
}

/* 🟢 دکمه چسبان (Sticky) بستن در پایین باکس متن */
.javo-v2-transcript-close-sticky {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border: none;
    border-top: 1px dashed rgba(59, 130, 246, 0.15); /* خط‌چین آبی بسیار ملایم */
    padding: 10px 0;
    margin-top: 10px;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(to top, rgba(239, 246, 255, 0.98) 80%, rgba(239, 246, 255, 0));
    color: #3b82f6; /* رنگ آبی هویت سایت */
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

/* هاور دکمه بستن پایین */
.javo-v2-transcript-close-sticky:hover {
    color: #1d4ed8;
    background: linear-gradient(to top, rgba(239, 246, 255, 0.98) 80%, rgba(239, 246, 255, 0));
}

/* اصلاح جزیی باکس محتوا برای هماهنگی با دکمه چسبان */
.javo-v2-transcript-section.is-open .javo-v2-transcript-content {
    max-height: 250px; /* افزایش جزیی ارتفاع به خاطر حضور دکمه پایین */
    overflow-y: auto;
    position: relative; /* الزامی برای کارکرد درست sticky دکمه داخل این باکس */
    padding: 14px 16px 0 16px; /* پدینگ پایین صفر شد تا دکمه کاملاً به کف بچسبد */
}
.javo_episode_duration_v2 {
    font-size: 13px;
    line-height: 1.4;
}
/* ===============================
  duration
=============================== */
.javo-v2-duration-display {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* فاصله مینی‌مال بین آیکون و عدد */
    padding: 0 4px; /* حذف پدینگ‌های ضخیم قبلی */
    background: transparent !important; /* حذف کامل پس‌زمینه */
    border: none !important; /* حذف کامل بوردر */
    color: #64748b; /* رنگ خاکستری مینی‌مال و استاندارد */
    height: 24px;
    box-sizing: border-box;
    cursor: default;
    user-select: none;
}

/* استایل آیکون ساعت */
.javo-duration-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8; /* یک درجه روشن‌تر از متن برای حفظ سلسله‌مراتب بصری */
    opacity: 0.85;
}
/* استایل عدد تایمر */
.javo-duration-num {
    font-size: 13px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* فونت تمیز سیستم برای هماهنگی بیشتر */
    line-height: 1;
    letter-spacing: 0.5px; /* کمی فاصله بین اعداد برای خوانایی لوکس‌تر */
}
/* =================================================================
    Mobile response
================================================================= */
@media (max-width: 768px) {
    
    /* ۱. ساختار بلاک برای جریان روان المان‌ها */
    .javo-v2-card-main {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important; /* کاهش فاصله عمومی */
        display: block !important; 
    }

    /* ۲. کادر اصلی با پدینگ و شعاع فشرده‌تر و ظریف */
    .javo-v2-wrapper {
        padding: 16px !important; /* از 20px به 16px کاهش یافت */
        border-radius: 20px !important; /* از 24px به 20px کاهش یافت */
        margin-bottom: 8px !important;
    }

    /* ۳. چیدمان کاور دایره‌ای سمت راست */
    .javo-v2-cover-box {
        float: right !important;
        margin-left: 12px !important; /* از 16px کاهش یافت */
        margin-bottom: 8px !important;
    }

    /* ابعاد کاور ظریف‌تر */
    .javo-v2-img {
        width: 66px !important; /* از 76px به 66px کاهش یافت */
        height: 66px !important;
        min-width: 66px !important;
        border-width: 2.5px !important;
        box-shadow: 0 0 0 3px rgba(191,219,254,.3), 0 4px 12px rgba(30,58,138,.1) !important;
    }

    /* ۴. اطلاعات متنی (فقط تایتل با فونت متناسب) */
    .javo-v2-info {
        display: block !important;
    }

    .javo-v2-title {
        font-size: 0.98rem !important; /* از 1.1rem به 0.98rem کاهش یافت */
        font-weight: 800 !important;
        line-height: 1.45 !important;
        margin-top: 2px !important;
        margin-bottom: 4px !important;
        color: #111111 !important;
    }

    /* حذف کامل توضیحات در حالت موبایل */
    .javo-v2-desc {
        display: none !important;
    }

    /* 🌟 دکمه پلی کپسولی، متمرکز و فشرده‌تر */
    .javo_play_episode, .javo-v2-btn-play {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        clear: both !important;
        position: static !important;
        
        /* ابعاد متناسب و بهینه افقی */
        width: 80% !important; 
        max-width: 240px !important; /* از 280px کاهش یافت */
        height: 36px !important; /* از 42px به 36px کاهش یافت */
        
        /* تراز در وسط */
        margin: 12px auto !important; 
        
        background: #3b82f6 !important;
        color: #ffffff !important;
        border-radius: 18px !important; 
        font-size: 11.5px !important; /* از 13px کاهش یافت */
        font-weight: 700 !important;
        border: none !important;
        box-shadow: 0 3px 10px rgba(59, 130, 246, 0.18) !important;
    }

    .javo_play_episode.is-playing, .javo-v2-btn-play.is-playing {
        background: #1e3a8a !important;
    }

    /* ۵. ردیف دکمه‌های اکشن پایین کارت (Like, Save, Duration, Plays) */
    .javo-v2-actions {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; 
        gap: 6px !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.04) !important; 
    }

    /* سایز فونت و پدینگ مینی‌مال دکمه‌های پایین */
    .javo-v2-btn-save,
    .javo-v2-btn-like,
    .javo-v2-plays-display,
    .javo-v2-duration-display,
    .javo-v2-transcript-toggle {
        font-size: 10.5px !important; /* از 12px به 10.5px کاهش یافت */
        padding: 4px 2px !important;
        white-space: nowrap !important;
    }

    /* سایز آیکون‌های پایین */
    .javo-v2-btn-save svg,
    .javo-v2-btn-like svg,
    .javo-plays-icon-wrap svg,
    .javo-transcript-icon-wrap svg {
        width: 13px !important; /* از 15px به 13px کاهش یافت */
        height: 13px !important;
    }
}

/* =================================================================
   ۶. بهینه‌سازی نهایی برای گوشی‌های فوق باریک (زیر 430 پیکسل)
================================================================= */
@media (max-width: 430px) {
    .javo-v2-wrapper {
        padding: 12px !important; /* فشرده‌تر */
        border-radius: 16px !important;
        margin-bottom: 8px !important;
    }

    .javo-v2-cover-box {
        margin-left: 10px !important;
    }

    .javo-v2-img {
        width: 58px !important; /* بسیار مینی‌مال */
        height: 58px !important;
        min-width: 58px !important;
    }

    .javo-v2-title {
        font-size: 0.9rem !important;
    }

    /* دکمه پلی در نمایشگر بسیار کوچک */
    .javo_play_episode, .javo-v2-btn-play {
        width: 85% !important;
        height: 34px !important;
        font-size: 11px !important;
        margin: 10px auto !important;
    }

    .javo-v2-actions {
        gap: 2px !important;
        justify-content: space-around !important;
    }

    .javo-v2-btn-save,
    .javo-v2-btn-like,
    .javo-v2-plays-display,
    .javo-v2-duration-display,
    .javo-v2-transcript-toggle {
        font-size: 9.5px !important; /* فوق مینی‌مال برای جلوگیری از شکستن خط */
    }
}
/* ===============================
   JAVO sound -  EPISODE CARD 
=============================== */

.javo_episode_wrap {

    width: 280px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    transition: .25s ease;
    display: flex;
    flex-direction: column;
}
.javo_episode_wrap:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
/* ===============================
   BUTTON WRAPPER (IF USED)
=============================== */
.javo_episode {
    border: none;
    background: none;
    padding: 0;
    width: 100%;
    cursor: pointer;
    text-align: right;
}
/* ===============================
   COVER
=============================== */
.javo_episode_cover_wrap {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}
/* ===============================
   IMAGE FULL COVER (NO ZOOM HOVER)
=============================== */
.javo_episode_cover {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: none; /* حذف زوم */
}
/* ===============================
   OPTIONAL: SOFT DARK OVERLAY (premium look)
=============================== */
.javo_episode_cover_wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.05),
        rgba(0,0,0,0.25)
    );
    pointer-events: none;
}
/* ===============================
   CONTENT
=============================== */

.javo_episode_content {
    padding: 14px 16px 10px;
}

.javo_episode_title {
    margin: 0 0 8px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.javo_episode_description {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* ===============================
   ACTIONS CONTAINER (IMPORTANT)
=============================== */

.javo_episode_actions {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 12px 16px 16px;

}



/* ===============================
   LIKE BUTTON - MINIMAL STATIC
=============================== */

.javo_like_button {

    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    background: transparent;
    border: none;

    cursor: pointer;

    color: #000;

    transition: none; /* مهم: حذف انیمیشن hover */

}

/* ===============================
   ICON
=============================== */

.javo_like_button svg {
    width: 18px;
    height: 18px;

    fill: #000;

    transition: fill 0.2s ease;
}

/* count */
.javo_like_count {
    font-size: 13px;
    font-weight: 600;
    color: #000;

    transition: color 0.2s ease;
}

/* ===============================
   ACTIVE (LIKED ONLY)
=============================== */

.javo_like_button.is-liked svg {
    fill: #ff4d6d;
    filter: drop-shadow(0 2px 6px rgba(255, 77, 109, 0.25));
}

.javo_like_button.is-liked .javo_like_count {
    color: #ff4d6d;
}

/* optional subtle pop ONLY on like */
.javo_like_button.is-liked {
    animation: likeSoftPop 0.3s ease;
}

@keyframes likeSoftPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ===============================
   PLAY BUTTON (MINIMAL MODERN)
=============================== */

.javo_play_episode {

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-width: 110px;
    height: 38px;
    padding: 0 12px;

    border-radius: 10px;

    background: #1e3a8a;
    border: 1px solid rgba(179, 231, 255, 0.7);

    color: #fff;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
    user-select: none;

    transition: all 0.18s ease;

    flex: 0 0 auto;

}

/* hover */
.javo_play_episode:hover {
    background: rgba(179, 231, 255, 0.4);
    transform: translateY(-1px);
     color: #1e3a8a;
}

/* active click */
.javo_play_episode:active {
    transform: translateY(0px);
}

/* focus */
.javo_play_episode:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(179, 231, 255, 0.45);
}

/* ===============================
   PLAYING STATE
=============================== */

.javo_play_episode.is-playing {
    background: #B3e7ff;
    border-color: #B3e7ff;
    color: #063846;
}

/* left indicator */
.javo_play_episode.is-playing::before {

    content: "";
    position: absolute;

    left: 8px;
    top: 50%;
    transform: translateY(-50%);

    width: 3px;
    height: 14px;

    border-radius: 2px;

    background: #063846;
    opacity: 0.85;
}

/* padding fix when playing */
.javo_play_episode.is-playing {
    padding-left: 18px;
}
.javo_episode_duration_num {
    display: none !important;
}
@media (max-width: 768px) {

    /* ===============================
        CARD SIZE (STABLE & ACCURATE)
    =============================== */
    .javo_episode_wrap {
        width: 230px;           /* ابعاد طلایی و محبوب شما */
        min-width: 230px;       /* جلوگیری از مچول شدن کارت در فلکس‌باکس‌ها */
        max-width: 230px;
        border-radius: 16px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); /* سایه نرم‌تر و بهینه‌تر برای پردازش موبایل */
        margin: 0 auto;         /* وسط‌چین شدن خودکار در صورت تک‌کارت بودن */
        -webkit-backface-visibility: hidden; /* جلوگیری از لرزش کارت در آیفون‌های قدیمی */
        backface-visibility: hidden;
    }

    /* حذف افکت هاور دسکتاپی روی تاچ موبایل (که آزاردهنده است) */
    .javo_episode_wrap:hover {
        transform: none !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
    }

    /* ===============================
        COVER & DURATION ON COVER
    =============================== */
    .javo_episode_cover_wrap {
        height: 135px;  
        position: relative; 
        overflow: hidden;
        -webkit-transform: translateZ(0); /* فیکس کردن باگ ردیوس سافاری iOS */
        border-radius: 16px 16px 0 0;
    }

    /* استیل شیک، خوانا و فیکس‌شده برای مدت زمان پادکست روی عکس */
    .javo_episode_duration_num {
        position: absolute;
        bottom: 8px;
        right: 8px;            /* چسبیدن به سمت راست در سایت‌های RTL */
        background: rgba(17, 24, 39, 0.8); /* ترکیب مشکی غنی Tailwind با شفافیت برای پرمیوم شدن */
        -webkit-backdrop-filter: blur(4px); /* افکت شیشه مات در آیفون و اندرویدهای جدید */
        backdrop-filter: blur(4px);
        color: #ffffff;
        padding: 3px 7px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        z-index: 2;
        direction: ltr !important; /* تضمین نمایش فرمت تایمر به صورت 12:45 */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* ===============================
        CONTENT SPACING & TEXT LIMITS
    =============================== */
    .javo_episode_content {
        padding: 12px 12px 6px; /* فضای تنفس بهینه‌تر برای المان‌ها */
    }

    .javo_episode_title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 6px;
        line-height: 1.4;
        color: #111827;
        
        /* مدیریت هوشمند پادکست‌های با نام طولانی: قطع در خط دوم بدون دفرمه کردن کارت */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal !important; 
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .javo_episode_description {
        font-size: 12px;
        line-height: 1.5;
        color: #6b7280;
        
        /* توضیحات دقیقاً در ۲ خط قفل شود و بقیه سه نقطه شود */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ===============================
        ACTIONS CONTAINER (FLEX FIX)
    =============================== */
    .javo_episode_actions {
        padding: 6px 12px 14px;
        gap: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
    }

    /* ===============================
        PLAY BUTTON (MOBILE OPTIMIZED)
    =============================== */
    .javo_play_episode {
        min-width: 85px;        /* کمی فضا بیشتر برای کلمه «پخش» یا آیکون همراهش */
        max-width: 110px;
        height: 34px;
        font-size: 12px;
        border-radius: 8px;
        flex: 1;                /* پر کردن منعطف فضای اختصاص یافته */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation; /* حذف تاخیر ۳۰۰ میلی‌ثانیه‌ای تاچ در آیفون‌های قدیمی */
    }

    /* جلوگیری از ماندن رنگ هاور دسکتاپ پس از لمس دکمه در موبایل */
    .javo_play_episode:hover {
        background: #1e3a8a;
        color: #fff;
    }

    .javo_play_episode.is-playing {
        padding-left: 16px;
        background: #B3e7ff;
        color: #063846;
    }

    .javo_play_episode.is-playing::before {
        left: 6px;
        height: 12px;
    }

    /* ===============================
        LIKE BUTTON (ANTI-STUCK HOVER)
    =============================== */
    .javo_like_button {
        padding: 6px 8px;
        gap: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        touch-action: manipulation;
        flex: 0 0 auto; /* ابعاد دکمه لایک ثابت بماند و فشرده نشود */
    }

    /* خنثی کردن گیر کردن استایل‌ها هنگام لمس در آیفون ۷ و سایر موبایل‌ها */
  

    .javo_like_button svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .javo_like_count {
        font-size: 12px;
        font-weight: 600;
    }
    
    /* استیت فعال لایک شده روی موبایل */
    .javo_like_button.is-liked .javo_like_count {
        color: #ff4d6d !important;
    }
}
/* -------------------------------------------------------
   JavoHub Premium Glass Menu - RTL Version
   ------------------------------------------------------- */
/* 1. ساختار کلی هدر */
.site-custom-header {
    /* تنظیمات جایگاه */
    width: 95%; /* کمی فاصله‌ از کناره‌ها برای شیک‌تر شدن حالت شناور */
    margin: 5px auto; /* وسط‌چین کردن و فاصله از سقف */
    padding: 15px 25px;
    position: sticky;
    top: 5px; /* کمی فاصله از بالاترین نقطه هنگام اسکرول */
    z-index: 9999;
    color: #1f1f1f;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;    
    /* تنظیمات عرض و فاصله */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 25px; /* جلوگیری از چسبیدن اجزا به لبه‌های گوشی */
    /* ارتفاع هدر */
    height: 10%; 
    
    /* ثبات در چیدمان */
    width: 100%;
    position: relative;
    z-index: 100;
}
/* بهینه‌سازی مخصوص گوشی (موبایل) */
@media (max-width: 768px) {
    .header-inner {
        height: 65px; /* در موبایل ارتفاع کمتر باشد شیک‌تر است */
        padding: 0 15px; /* فاصله از لبه‌ها در موبایل کمی کمتر شود */
    }
}
/* --- استایل لوگو فوق حرفه‌ای و مینیمال (JAVO Premium) --- */
.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* جلوگیری از فشرده شدن لوگو */
    transition: all 0.3s ease;
    padding: 5px 0;
}

.site-logo img {
    /* سایز دسکتاپ: بزرگتر و خواناتر */
    height: clamp(45px, 5vw, 65px); 
    width: auto;
    display: block;
    object-fit: contain;
    
    /* افکت درخشش و شفافیت */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    
    /* بهینه‌سازی برای نمایشگرهای رتینا */
    image-rendering: -webkit-optimize-contrast;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* هاور هوشمند: لوگو کمی جان می‌گیرد */
.site-logo:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15));
}

/* --- بهینه‌سازی هوشمند برای موبایل --- */
@media (max-width: 768px) {
    .site-logo {
        /* در موبایل لوگو را در اولویت قرار می‌دهیم */
        order: 1; 
    }
    
    .site-logo img {
        /* سایز بهینه برای موبایل که نه خیلی کوچک باشد نه فضا را بگیرد */
        height: 38px; 
        filter: none; /* حذف سایه در موبایل برای رندرینگ سریع‌تر */
    }
}

/* برای گوشی‌های بسیار کوچک */
@media (max-width: 380px) {
    .site-logo img {
        height: 34px;
    }
}
/* 3. دکمه همبرگری (Menu Toggle) */
.menu-toggle-btn {
    background: rgba(255, 255, 255, 0.1); /* پس‌زمینه شفاف شیشه‌ای */
    backdrop-filter: blur(10px); /* مات کردن پشت دکمه */
    border: 1px solid rgba(255, 255, 255, 0.2); /* لبه‌های درخشان */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px); /* پرش بسیار ظریف به بالا هنگام هاور */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.menu-toggle-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: #000; /* خط‌های سفید برای هدر تاریک یا شیشه‌ای */
    border-radius: 10px;
    transition: 0.3s;
}

/* انیمیشن خاص برای خط وسط (اختیاری) */
.menu-toggle-btn:hover span:nth-child(2) {
    width: 14px; /* کوتاه شدن خط وسط هنگام هاور که خیلی شیک است */
}
/* ===================================================
   JaVo  Menu - 
=================================================== */

/* 1. Main Wrapper (Controls the whole menu system) */
.side-menu-panel {
    position: fixed;
    top: 0;
    right: 0; /* لنگر انداختن کل سیستم به سمت راست */
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    visibility: hidden;
    pointer-events: none;
    direction: rtl; /* اجباری برای ساختار راست‌چین */
}

/* Active State for the entire system */
.side-menu-panel.active {
    visibility: visible;
    pointer-events: auto;
}

/* 2. Dark Overlay Backdrop */
.menu-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 28, 45, 0.5); /* Deep elegant navy tint */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1; /* Stays below the white panel */
}

.side-menu-panel.active .menu-overlay {
    opacity: 1;
}

/* 3. The Matte White Menu Panel - RTL Fixed */
.menu-panel-content {
    position: absolute;
    top: 0;
    right: -100%; /* شروع کاملاً مخفی در بیرون از کادر راست */
    z-index: 2;
    width: clamp(300px, 85vw, 400px);
    height: 100vh;
    background: #ffffff; /* مات سفید */
    box-shadow: -20px 0 60px rgba(11, 28, 45, 0.15);
    transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* انیمیشن نرم و فیزیکی از راست */
    display: flex;
    flex-direction: column;
    padding: 40px 30px;
    overflow-y: auto;
}

/* حالت فعال: باز شدن کامل پنل و چسبیدن به لبه راست */
.side-menu-panel.active .menu-panel-content {
    right: 0;
}

/* 4. Smart Close Button */
.close-btn {
    position: absolute;
    top: 30px;
    left: 30px; /* دکمه خروج در سمت چپ پنل برای دسترسی راحت‌تر */
    width: 44px;
    height: 44px;
    background: #f1f5f9; /* Subtle slate background */
    border: none;
    border-radius: 50%;
    color: #0b1c2d; /* Dark Navy */
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.close-btn:hover {
    background: #fee2e2; /* Soft alert red on hover */
    color: #ef4444;
    transform: rotate(90deg); /* Satisfying mechanical rotation */
}
/* 5. Navigation List Structure */
.javo-custom-menu {
    list-style: none;
    padding: 0;
    margin: 60px 0 0 0; /* Clear space below the close button */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Base Item Styling */
.menu-item a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    text-decoration: none;
    background: transparent;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Typography Inside Menu */
.menu-item a span {
    font-size: 16px;
    font-weight: 700;
    color: #0b1c2d; /* Executive Dark Navy */
    transition: color 0.3s ease;
}
/* Icon Styling */
.javo-menu-icon {
    width: 24px;
    height: 24px;
    color: #64748b; /* Professional slate gray */
    transition: all 0.3s ease;
}

/* 6. Premium Hover Physics */
.menu-item a:hover {
    background: #f8fafc; /* Very soft premium gray */
    border-color: #e2e8f0;
    transform: translateX(-6px); /* حرکت ظریف به سمت چپ (مناسب برای RTL) */
    box-shadow: 0 4px 12px rgba(11, 28, 45, 0.03);
}

.menu-item a:hover span {
    color: #0284c7; /* JaVo Brand Blue */
}

.menu-item a:hover .javo-menu-icon {
    color: #0284c7;
    transform: scale(1.1); /* Icon pops slightly */
}

/* 🟥 Special Styling for the Logout Button */
.menu-logout a:hover {
    background: #fff1f2;
    border-color: #ffe4e6;
}
.menu-logout a:hover span,
.menu-logout a:hover .javo-menu-icon {
    color: #e11d48; /* Crimson Red to signal a destructive action */
}

/* 🟦 Special Styling for the Login/Register Button */
.menu-login a {
    background: #0b1c2d; /* Solid Navy */
    margin-top: 10px;
}
.menu-login a span,
.menu-login a .javo-menu-icon {
    color: #ffffff;
}
.menu-login a:hover {
    background: #0ea5e9; /* Vibrant JaVo Blue */
    border-color: #0ea5e9;
    transform: translateY(-2px); /* Lifts up instead of sliding left */
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.2);
}

/* 7. Ergonomic Mobile Adjustments */
@media (max-width: 480px) {
    .menu-panel-content {
        padding: 35px 20px;
        width: 85vw; /* Takes up most of the screen safely */
    }
    
    .javo-custom-menu {
        gap: 8px; /* Tighter gap for smaller screens */
        margin-top: 50px;
    }
    
    .menu-item a {
        padding: 14px 16px;
    }
    
    .menu-item a span {
        font-size: 15px; /* Slightly smaller text */
    }
    
    .close-btn {
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
    }
    
    /* Disable hover shifts on mobile for a stable touch experience */
    .menu-item a:hover {
        transform: none;
    }
    .menu-item a:active {
        transform: scale(0.98); /* Native app feel on tap */
        background: #f1f5f9;
    }
}


/* ظرف اصلی سرچ برای کنترل انعطاف‌پذیری */
.header-search {
  min-width: 0;
  flex: 1; /* این خط باعث می‌شود سرچ‌باکس فضای خالی وسط هدر را پر کند */
  margin: 0 15px; /* ایجاد فاصله از لوگو و دکمه‌ها */
}

/* باکس اصلی جستجو با استایل شیشه‌ای */
.header-search-box {
  width: 100%;
  max-width: 500px; /* حداکثر عرض در دسکتاپ */
  height: 48px; /* ارتفاع استاندارد و شیک */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.5); /* پُرتر کردن شیشه برای خوانایی متن */
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* افکت فوکوس (وقتی کاربر برای تایپ کلیک می‌کند) */
.header-search-box:focus-within {
  background: rgba(255, 255, 255, 0.9);
  border-color: #0073aa; /* تغییر رنگ لبه به رنگ برند */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

/* استایل آیکون سرچ */

.header-search-box {
    flex: 2; /* فضای بیشتری نسبت به دکمه‌ها می‌گیرد تا کشیده شود */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    min-width: 0; /* جلوگیری از بیرون زدگی در موبایل */
}

.header-search-box {
    width: 100%;
    max-width: 600px;
    height: 46px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* ۳. استایل فرم داخلی */
.header-search-box .search-form {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    padding: 0 18px; /* پدینگ داخلی برای فاصله المان‌ها از لبه کپسول */
    flex-direction: row; /* آیکون سمت چپ، متن سمت راست */
}
/* ۴. آیکون ذره‌بین (سمت چپ - مطابق عکس جدید) */
.header-search-box .search-submit {
    background: transparent !important;
    border: none !important;
    width: 20px;
    height: 20px;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    order: 1; /* سمت چپ */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* ساخت ذره‌بین با SVG در پس‌زمینه */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    color: #000;
    text-indent: -9999px; /* مخفی کردن متن احتمالی دکمه */
}

.header-search-box .search-submit i {
    color: #B3e7ff;
    font-size: 18px;
    transition: color 0.2s;
}

/* ۵. فیلد ورودی متن (سمت راست) */
.header-search-box .search-field {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    height: 100%;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    text-align: right; /* تراز متن فارسی */
    direction: rtl;
    order: 2; /* قرارگیری بعد از آیکون */
    padding: 0 15px 0 0 !important; /* فاصله متن از آیکون سمت چپش */
}

.header-search-box .search-field::placeholder {
    color: #999;
    font-weight: 400;
}

/* ۶. افکت فوکوس حرفه‌ای */
.header-search-box:focus-within {
    background: rgba(255, 255, 255, 0.9);
    border-color: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}
/* ===================================================
   mobile respos - header 
=================================================== */
/* ۷. بهینه‌سازی بسیار دقیق برای موبایل (جلوگیری از خرابی هدر) */
@media (max-width: 768px) {
    /* بازگرداندن لود باکس جستجو اما با ابعاد بسیار کوچک‌تر */
    .header-search {
        display: block !important;
        flex: 2 !important; /* فضا دادن متناسب به المان‌های کناری */
        padding: 0 4px !important;
    }

    /* کوچک کردن کل بدنه باکس جستجو */
    .header-search-box {
        display: flex !important;
        height: 32px !important; /* کاهش ارتفاع به ۳۲ پیکسل برای ظرافت بیشتر */
        padding: 0 !important;
        border-radius: 8px !important; /* لبه‌های کمی نرم‌تر متناسب با سایز جدید */
        background: rgba(0, 0, 0, 0.04) !important; /* یک پس‌زمینه ملایم */
    }

    /* تنظیم فرم داخلی */
    .header-search-box .search-form {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 8px !important;
    }

    /* کوچک کردن متن داخل باکس جستجو */
    .header-search-box .search-field {
        font-size: 11px !important; /* فونت کوچک‌تر و ظریف */
        padding: 0 6px 0 0 !important;
        height: 100% !important;
    }

    /* کوچک کردن متن کم‌رنگ راهنما (Placeholder) */
    .header-search-box .search-field::placeholder {
        font-size: 11px !important;
    }

    /* کوچک کردن آیکون ذره‌بین */
    .header-search-box .search-submit i,
    .header-search-box .search-submit svg {
        font-size: 13px !important;
        width: 13px !important;
        height: 13px !important;
    }


    /* فشرده کردن کانتینر اصلی هدر برای چسبیدن المان‌ها به لبه‌های گوشی */
    .site-custom-header .header-inner,
    .elementor-shortcode > div.site-custom-header {
        padding-left: 8px !important;
        padding-right: 8px !important;
        justify-content: space-between !important; /* هل دادن لوگو و دکمه‌ها به دو طرف نهایی */
        display: flex !important;
        width: 100% !important;
    }
}

/* --- بخش حساب کاربری نوین (RTL Support) --- */
.header-account {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto; /* فقط به اندازه محتوا فضا می‌گیرد */
    margin-right: 20px; /* فاصله استاندارد از المان کناری */
    margin-left: 0;
}

/* دکمه ورود شیشه‌ای - نسخه دسکتاپ ظریف */
.login-button-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: #000 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.login-button-modern:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* استایل کاربر وارد شده (Logged In) */
.user-profile-wrapper {
    display: flex;
    align-items: center;
}

.user-account-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 4px 4px 12px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: 0.3s all ease;
}

.user-name {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

.user-avatar {
    width: 32px; /* کوچک‌تر برای دسکتاپ جهت جلوگیری از اشغال فضا */
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- تنظیمات اختصاصی موبایل (زیر 768 پیکسل) --- */
@media (max-width: 768px) {
    .header-account {
        margin-right: 0px !important; /* حذف کامل فاصله‌ در موبایل جهت کشیده شدن به لبه چپ */
        margin-left: 0px !important;
        order: 3; /* تضمین قرارگیری در سمت چپ/راست نهایی */
    }

    /* در صورت وجود المان لوگو، فاصله‌های جانبی آن را صفر میکنیم تا کاملا راست‌چین شود */
    .site-logo, .header-logo {
        margin-right: 0px !important;
        padding-right: 0px !important;
    }

    /* بهینه‌سازی ابعاد دکمه ورود برای رفع خطای Touch Targets */
    .login-button-modern {
        padding: 0;
        width: 44px; /* اندازه استاندارد گوگل برای لمس راحت با انگشت */
        height: 44px;
        justify-content: center;
        border-radius: 12px;
        gap: 0;
    }

    .login-button-modern span, 
    .user-name {
        display: none !important; /* حذف متن در موبایل حیاتی است */
    }

    .login-button-modern svg {
        width: 22px;
        height: 22px;
    }

    /* بهینه‌سازی دکمه پروفایل کاربری برای کلیک آسان‌تر */
    .user-account-link {
        padding: 0;
        background: transparent;
        border: none;
        width: 44px;
        height: 44px;
        justify-content: center;
    }

    .user-avatar {
        width: 44px; /* اندازه ایده‌آل تا خطای ابعاد کوچک برطرف شود */
        height: 44px;
    }
}

/* افکت کلیک سریع برای موبایل */
@media (hover: none) {
    .login-button-modern:active, 
    .user-account-link:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.5);
    }
}
/* ===================================================
   JaVo Elite Footer - Grid Symmetry Edition
=================================================== */

.javo-elite-footer {
    width: 100% !important;
    padding: 70px 0 50px;
    direction: rtl;
    background: transparent !important;
    display: flex;
    justify-content: center;
    font-family: inherit;
}

/* --- The Hyper-Glass Card --- */
.javo-footer-glass-card {
    width: 90%;
    max-width: 1160px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);
    backdrop-filter: blur(40px) saturate(190%);
    -webkit-backdrop-filter: blur(40px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    padding: 40px 50px;
    box-shadow: 
        0 30px 60px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.javo-footer-glass-card:hover {
    transform: translateY(-5px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 100%);
    box-shadow: 
        0 40px 80px rgba(15, 23, 42, 0.07),
        0 10px 20px rgba(15, 23, 42, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* --- The Grid Layout Fix --- */
.javo-footer-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 15px 30px; /* 15px vertical spacing, 30px horizontal spacing */
}

/* --- Grid Placements --- */
.brand-col {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.nav-col {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Pulls navigation towards the center */
}

/* Elite Designer Tag positioned via Grid */
.javo-designer-tag {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: center;
    align-self: flex-start; /* Pulls tag tightly under navigation */
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.4);
    padding: 6px 18px;
    border-radius: 50px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 8px rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-col {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 16px;
}

/* --- Brand Typography & Logo --- */
.javo-footer-logo img {
    height: 44px;
    width: auto;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.02));
}

.javo-footer-logo:hover img {
    transform: scale(1.05);
}

.javo-footer-motto {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    padding-right: 4px;
}

/* --- Interactive Pill Buttons --- */
.javo-nav-glass-pills {
    display: flex;
    gap: 6px;
    /* سفید یخی مدرن، نیمه کدر و غنی شده با رفلکس نور */
    background: rgba(248, 250, 252, 0.92); 
    padding: 7px;
    border-radius: 100px;
    /* خط دور کریستالی برای ایجاد حس شیشه‌ای صیقل‌خورده */
    border: 1px solid rgba(255, 255, 255, 0.9);
    /* ترکیب سایه داخلی برای عمق و سایه بیرونی فوق‌العاده نرم */
    box-shadow: 
        0 12px 30px rgba(15, 23, 42, 0.04),
        0 4px 8px rgba(15, 23, 42, 0.02),
        inset 0 2px 4px rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.javo-nav-glass-pills a {
    text-decoration: none;
    color: #475569;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 12px 28px;
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 1;
}

/* افکت هاور دکمه‌ها روی پس‌زمینه یخی جدید */
.javo-nav-glass-pills a:hover {
    color: #0f172a;
    background: #ffffff;
    /* ایجاد سایه سه‌بعدی و شناور شدن دکمه هنگام هاور */
    box-shadow: 
        0 10px 20px rgba(15, 23, 42, 0.06), 
        0 2px 6px rgba(15, 23, 42, 0.02);
    transform: translateY(-1px);
}

.javo-heart {
    color: #ef4444;
    display: inline-block;
    animation: heartBeat 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Ultra-Minimal Enamad Block --- */
.javo-enamad-wrapper {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #ffffff !important;
    padding: 6px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    
    width: 44px !important;  
    height: 44px !important; 
    box-sizing: border-box !important;
}

.javo-enamad-wrapper:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06) !important;
    border-color: #cbd5e1 !important;
}

.javo-enamad-link {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: center !important;
}

.javo-enamad-img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    display: block !important;
    filter: grayscale(10%) contrast(1.1);
}

/* --- بهینه‌سازی ابعاد برای موبایل --- */
@media (max-width: 768px) {
    .javo-enamad-wrapper {
        width: 48px !important;
        height: 48px !important;
        padding: 6px !important;
    }
    
    .javo-enamad-img {
        width: 36px !important;
        height: 36px !important;
    }
}


/* --- Copyright Details --- */
.javo-copyright {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
}

.cy-brand {
    color: #94a3b8;
    font-weight: 600;
}

/* --- Keyframes --- */
@keyframes footerReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.2); }
    30% { transform: scale(1); }
    45% { transform: scale(1.2); }
}
/* ===================================================
   Mobile App-Like Experience (Sub 991px)
   Clean & Ultra-Minimal Edition (Hidden Extras)
=================================================== */
@media (max-width: 991px) {
    
    .javo-elite-footer {
        padding: 15px 10px; /* فوق‌العاده فشرده و شیک */
        animation: footerReveal 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) both;
    }

    .javo-footer-glass-card {
        width: 100%;
        padding: 16px 12px; /* کاهش شدید پدینگ برای باز شدن فضا */
        border-radius: 24px;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.03);
    }

    /* گرید تک‌ردیفه برای ۳ المان اصلی */
    .javo-footer-main {
        display: grid;
        grid-template-columns: auto 1fr auto; /* فضای منعطف برای دکمه‌های وسط */
        grid-template-rows: auto;
        align-items: center;
        gap: 10px;
    }

    /* حذف متن‌های اضافه در موبایل */
    .javo-footer-motto,
    .javo-designer-tag,
    .javo-footer-meta-texts {
        display: none !important;
    }

    /* ستون لوگو (راست) */
    .brand-col {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        align-items: flex-start;
        width: auto;
    }

    .javo-footer-logo img {
        height: 24px; /* سایز کاملاً مینیاتوری برای لوگو */
    }

    /* ستون منو (وسط) */
    .nav-col {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    /* کپسول دکمه‌های سفید یخی */
    .javo-nav-glass-pills {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 4px;
        border-radius: 100px;
        background: rgba(248, 250, 252, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    }

    /* دکمه‌های ریز و فیت شده */
    .javo-nav-glass-pills a {
        padding: 8px 12px; /* پدینگ فشرده برای جا شدن در عرض گوشی */
        font-size: 0.7rem; /* فونت مینیاتوری */
        font-weight: 700;
        border-radius: 100px;
        white-space: nowrap;
        flex: none;
    }

    /* ستون اینماد (چپ) */
    .info-col {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        align-items: flex-end;
        padding-top: 0;
        width: auto;
    }
}


/* ==========================================================================
   font - background 
   ========================================================================== */
/*font  Vazirmatn */
@font-face{
    font-family:"Vazirmatn";
    src:url("/wp-content/themes/hello-elementor/fonts/Vazirmatn/static/Vazirmatn-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:"Vazirmatn";
    src:url("/wp-content/themes/hello-elementor/fonts/Vazirmatn/static/Vazirmatn-Medium.ttf") format("truetype");
    font-weight:500;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:"Vazirmatn";
    src:url("/wp-content/themes/hello-elementor/fonts/Vazirmatn/static/Vazirmatn-SemiBold.ttf") format("truetype");
    font-weight:600;
    font-style:normal;
    font-display:swap;
}
/* Lalezar */
@font-face{
    font-family:"Lalezar";
    src:url("/wp-content/themes/hello-elementor/fonts/Lalezar/Lalezar-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
/* متن‌های سایت */
body,
p,
span,
div,
li,
input,
textarea,
button,
select{
    font-family:"Vazirmatn", sans-serif !important;
}
/* عنوان‌ها */
h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title{
    font-family:"Lalezar", cursive !important;
}
html{
    min-height:100%;
}


html.is-routing {
    cursor: progress;
}

html.is-routing a {
    pointer-events: none;
}
/* ============================================ */
/* گریدینت روی html هم اعمال کن */
/* ============================================ */
html {
    background: linear-gradient(
        to bottom,
        #7ad5ff,
        #7ad5ff,
        #97ddfc,
        #a1e0fd,
        #aae4fe
    );
    background-attachment: fixed;
    min-height: 100%;
}
/* ============================================ */
/* body شفاف باشه تا گریدینت html معلوم بشه */
/* ============================================ */
body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    background: transparent !important;
}

/* ============================================ */
/* لایه SVG پترن */
/* ============================================ */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://javohub.ir/wp-content/themes/Child-Theme/assets/javo-icons.svg");
    background-repeat: repeat;
    background-size: 420px 420px;
    opacity: 0.1;
    pointer-events: none;
    z-index: -9999;
}
main[tabindex="-1"]:focus {
    outline: none;
}
/* ============================================ */
/* لایه‌های سفید قالب رو شفاف کن */
/* ============================================ */
.site,
#page,
#content,
.site-content,
#main,
.entry-content,
.container,
.wrapper {
    background: transparent !important;
}