/* ========================================
   فونت‌ها و تنظیمات پایه
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

body, html, button, input, textarea, .promo__descr, .team__member-descr {
    font-family: 'Vazirmatn', 'Lato', 'Tahoma', sans-serif;
}

/* ========================================
   تم رنگی صورتی (جایگزین سبز اصلی)
   ======================================== */
.contact__form-submit,
.page-header__nav-link:hover,
.page-header__nav-link.is-active,
.page-footer__gotop,
.portfolio__filter-btn,
.promo__btn,
.header-actions-btn:hover {
    background-color: #ff6b9e !important;
}

.contact__form-submit:hover,
.page-footer__gotop:hover,
.portfolio__filter-btn:hover,
.portfolio__filter-btn.is-selected,
.promo__btn:hover {
    background-color: #e54d7a !important;
}

.team {
    background-color: #ff99cc !important;
}

.portfolio__item-caption,
.team__member-soc {
    background-color: rgba(255, 107, 158, 0.8) !important;
}

/* ========================================
   دکمه‌های هدر (تم + زبان) - استایل یکپارچه
   ======================================== */
.page-header__inner { position: relative !important; }

.header-actions {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    transform: none !important;
    display: grid !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 9999 !important;
}

.header-actions-btn {
    background: none !important;
    border: 1px solid #ccc !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: 5px 9px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: #424242 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.header-actions-btn:hover {
    background-color: #ff6b9e !important;
    color: #fff !important;
    border-color: #ff6b9e !important;
}

.dark-mode .header-actions-btn {
    border-color: #555 !important;
    color: #ddd !important;
}

.dark-mode .header-actions-btn:hover {
    background-color: #ff6b9e !important;
    color: #fff !important;
}

/* ========================================
   تم تاریک (شب)
   ======================================== */
.dark-mode,
.dark-mode body {
    background-color: #1e1e2f !important;
    color: #e0e0e0 !important;
}

.dark-mode .page-header,
.dark-mode .portfolio,
.dark-mode .promo,
.dark-mode .contact {
    background-color: #2c2c3a !important;
}

.dark-mode .page-header__nav-link {
    color: #ddd !important;
}

.dark-mode .page-header__nav-link:hover,
.dark-mode .page-header__nav-link.is-active {
    background-color: #ff6b9e !important;
    color: #fff !important;
}

.dark-mode .promo {
    background-color: #1a1a2e !important;
    background-image: none !important;
}

.dark-mode .promo__descr,
.dark-mode .promo__title,
.dark-mode .portfolio__title,
.dark-mode .portfolio__descr,
.dark-mode .contact__title,
.dark-mode .contact__descr,
.dark-mode .team__title,
.dark-mode .team__descr {
    color: #f0f0f0 !important;
}

.dark-mode .portfolio__item-caption,
.dark-mode .team__member-soc {
    background-color: rgba(255, 107, 158, 0.85) !important;
}

.dark-mode .contact__form-input,
.dark-mode .contact__form-tarea {
    background-color: #3a3a4a;
    border-color: #5a5a6e;
    color: #eee;
}

.dark-mode .contact__card-item,
.dark-mode .contact__card-title {
    color: #ccc !important;
}

.dark-mode .team {
    background-color: #16213e !important;
}

.dark-mode .team__member {
    background-color: #2c2c3a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.dark-mode .team__member-name,
.dark-mode .team__member-role {
    color: #f0f0f0;
}

.dark-mode .team__member-descr {
    color: #bbb;
}

.dark-mode .page-footer {
    background-color: #0f0f1a !important;
}

.dark-mode .page-footer__copyright {
    color: #aaa;
}

.dark-mode .contact__form-submit,
.dark-mode .portfolio__filter-btn,
.dark-mode .promo__btn,
.dark-mode .page-footer__gotop {
    background-color: #ff6b9e !important;
}

.dark-mode .contact__form-submit:hover,
.dark-mode .portfolio__filter-btn:hover,
.dark-mode .promo__btn:hover {
    background-color: #e54d7a !important;
}

/* رفع سفیدی منو در حالت شب */
.dark-mode .page-header {
    background-color: #2c2c3a !important;
}
.dark-mode .page-header__nav,
.dark-mode .page-header__nav ul {
    background-color: transparent !important;
}

/* ========================================
   تنظیمات RTL (فارسی)
   ======================================== */
[dir="rtl"] .page-header__logo {
    float: right;
    margin: 25px 40px 0 0;
    padding: 5px 65px 0 0;
    background-position: 100% center;
}

[dir="rtl"] .page-header__nav {
    float: left;
    margin: 30px 0 0 55px;
}

[dir="rtl"] .page-header__nav li {
    margin-left: 0;
    margin-right: 5px;
}

[dir="rtl"] .contact__form {
    float: right;
    margin: 0 40px 0 15px;
}

[dir="rtl"] .contact__form-input:first-of-type {
    margin-right: 0;
    margin-left: 20px;
}

[dir="rtl"] .contact__form-submit {
    float: left;
}

[dir="rtl"] .contact__card-item:before {
    left: auto;
    right: 0;
}

[dir="rtl"] .contact__card-item.place,
[dir="rtl"] .contact__card-item.tel,
[dir="rtl"] .contact__card-item.email {
    padding-left: 0;
    padding-right: 20px;
}

[dir="rtl"] .page-footer__copyright {
    margin: 35px 45px 0 0;
    float: right;
}

[dir="rtl"] .page-footer__gotop {
    float: left;
    margin: 20px 0 0 45px;
}

[dir="rtl"] .team__member-soc {
    left: auto;
    right: 50%;
    margin-right: -90px;
}

[dir="rtl"] .team__member-descr {
    text-align: right;
}

/* ========================================
   تنظیمات LTR (انگلیسی)
   ======================================== */
html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] textarea,
html[lang="en"] .promo__title,
html[lang="en"] .team__member-descr {
    font-family: 'Inter', 'Segoe UI', 'Lato', sans-serif !important;
}

html[lang="en"] .contact__card-item,
html[lang="en"] .contact__form-input,
html[lang="en"] .contact__form-tarea {
    text-align: left;
}

html[lang="en"] .page-header__logo { float: left; margin: 25px 0 0 40px; padding: 5px 0 0 65px; background-position: 0 center; }
html[lang="en"] .page-header__nav { float: right; margin: 30px 55px 0 0; }
html[lang="en"] .page-header__nav li { margin-left: 5px; margin-right: 0; }
html[lang="en"] .contact__form { float: left; margin: 0 40px 0 15px; }
html[lang="en"] .contact__form-input:first-of-type { margin-right: 20px; margin-left: 0; }
html[lang="en"] .contact__form-submit { float: right; }
html[lang="en"] .contact__card-item:before { left: 0; right: auto; }
html[lang="en"] .contact__card-item.place,
html[lang="en"] .contact__card-item.tel,
html[lang="en"] .contact__card-item.email { padding-left: 15px; padding-right: 0; }
html[lang="en"] .page-footer__copyright { margin: 35px 0 0 45px; float: left; }
html[lang="en"] .page-footer__gotop { float: right; margin: 20px 45px 0 0; }
html[lang="en"] .team__member-soc { left: 50%; right: auto; margin-left: -90px; margin-right: 0; }
html[lang="en"] .team__member-descr { text-align: left; }

/* حالت انگلیسی: دکمه‌های هدر همچنان در راست بمانند */
html[lang="en"] .header-actions {
    right: 20px !important;
    left: auto !important;
}

/* ========================================
   وضعیت فرم تماس (موفقیت/خطا)
   ======================================== */
#form-status {
    padding: 10px 12px;
    margin-bottom: 15px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s ease;
    display: none;
}

#form-status.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

#form-status.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

.dark-mode #form-status.success {
    background-color: #1e3a28;
    color: #a3d9b1;
    border-color: #2d5a3e;
}

.dark-mode #form-status.error {
    background-color: #3a1e1e;
    color: #d9a3a3;
    border-color: #5a2d2d;
}

.contact__form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   ریسپانسیو (موبایل)
   ======================================== */
@media screen and (max-width: 768px) {
    .header-actions {
        top: 8px !important;
        right: 10px !important;
        gap: 6px !important;
    }
    .header-actions-btn {
        padding: 4px 7px !important;
        font-size: 1rem !important;
        min-width: 32px !important;
    }
}

@media screen and (max-width: 640px) {
    [dir="rtl"] .page-header__logo,
    [dir="rtl"] .page-header__nav,
    [dir="rtl"] .contact__form,
    [dir="rtl"] .page-footer__copyright,
    [dir="rtl"] .page-footer__gotop {
        float: none;
        margin: 20px auto;
        text-align: center;
    }
    .contact { padding: 50px 10px; }
    .contact__form { float: none; max-width: 90%; margin: 0 auto 50px; }
    .contact__form-input { width: 100%; }
    .contact__form-tarea { width: 100%; }
    .contact__card { display: block; width: 230px; margin: 20px auto; }
    .contact__card-title { text-align: center; }
    .portfolio { padding: 50px 10px; }
    .portfolio__filter li { margin: 0 5px; }
    .portfolio__item { width: 170px; height: 170px; margin: 0 1.5% 35px; }
    .team { padding: 55px 10px; }
    .team__member { display: block; width: 260px; margin: 0 auto 30px; }
    .team__member-info { height: auto; }
    .team__member-descr { display: none; }
    .team__member-soc {
        width: 260px;
        top: 220px;
        margin-left: -130px;
    }
    .page-footer { padding: 0 10px 30px; text-align: center; }
    .page-footer__copyright { margin: 35px auto 0; }
    .page-footer__gotop { float: none; width: 100%; margin: 20px auto 0; }
    .portfolio__filter li { display: block; margin: 5px 0; }
}

/* ========== آیکون‌های شبکه اجتماعی جدید ========== */
.contact__card-item.telegram,
.contact__card-item.instagram {
    padding-left: 20px;
    margin-bottom: 10px;
    position: relative;
    display: block; /* برای اینکه کل خط قابل کلیک باشد */
    color: #444; /* رنگ متن پیش‌فرض */
    text-decoration: none;
}

/* آیکون تلگرام (نسخه 4 فونت‌آوسوم) */
.contact__card-item.telegram:before {
    content: "\f2c6"; 
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
}

/* آیکون اینستاگرام (نسخه 4 فونت‌آوسوم) */
.contact__card-item.instagram:before {
    content: "\f16d";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
}

/* هاور صورتی */
.contact__card-item.telegram:hover,
.contact__card-item.instagram:hover {
    color: #ff6b9e;
}
.contact__card-item.telegram:hover:before,
.contact__card-item.instagram:hover:before {
    color: #ff6b9e;
}

/* حالت دارک مود */
.dark-mode .contact__card-item.telegram,
.dark-mode .contact__card-item.instagram {
    color: #ccc;
}
.dark-mode .contact__card-item.telegram:hover,
.dark-mode .contact__card-item.instagram:hover {
    color: #ff6b9e;
}

.promo {
    position: relative;
    overflow: hidden;
    /* عکس به عنوان پشتیبان نهایی در CSS (اگر تگ video کلاً کار نکرد) */
    background: #323232 url('../images/promo-bg.jpg') center center no-repeat !important;
    background-size: cover !important;
}

/* حذف افکت fixed که با ویدیو تداخل دارد */
.dark-mode .promo {
    background: #1a1a2e url('../images/promo-bg.jpg') center center no-repeat !important;
    background-size: cover !important;
    background-image: none !important; /* این خط را از کد قبلی حذف یا غیرفعال می‌کنیم تا عکس fallback بماند */
}

/* استایل خود تگ ویدیو */
.promo__video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; /* پر کردن کامل فضا بدون دفرمه شدن */
    z-index: 0; /* قرارگیری در لایه پشت */
}

/* اطمینان از اینکه محتوای متنی و دکمه‌ها روی ویدیو قرار می‌گیرند */
.promo__inner {
    position: relative;
    z-index: 1; /* قرارگیری در لایه جلوتر از ویدیو */
}

/* ========== اصلاح ترازبندی آیکون‌های تماس در RTL ========== */
[dir="rtl"] .contact__card-item {
    padding-left: 0 !important;
    padding-right: 25px !important;
    position: relative;
    display: block !important;
    text-align: right;
}

[dir="rtl"] .contact__card-item:before {
    left: auto !important;
    right: 0 !important;
    top: 2px !important;
    font-size: 14px !important;
}

[dir="rtl"] .contact__card-item.place {
    padding-right: 20px !important;
    margin-bottom: 15px;
}

[dir="rtl"] .contact__card-item.tel,
[dir="rtl"] .contact__card-item.fax {
    padding-right: 22px !important;
    margin-bottom: 10px;
}

[dir="rtl"] .contact__card-item.email {
    padding-right: 25px !important;
    display: block !important;
    margin-top: 10px;
}

/* برای حالت انگلیسی (LTR) - اطمینان از صحت نمایش */
html[lang="en"] .contact__card-item {
    padding-left: 25px !important;
    padding-right: 0 !important;
    text-align: left;
}

html[lang="en"] .contact__card-item:before {
    left: 0 !important;
    right: auto !important;
}

/* ===== Lightbox ===== */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.lightbox__content {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  animation: zoomIn 0.4s ease forwards;
}

.lightbox__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.lightbox__close {
  position: absolute;
  top: -40px;
  right: -10px;
  background: none;
  border: none;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s;
}

.lightbox__close:hover {
  transform: rotate(90deg);
}

/* انیمیشن zoom-in */
@keyframes zoomIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* انیمیشن zoom-out هنگام بسته شدن (با کلاس is-closing) */
.lightbox.is-closing .lightbox__content {
  animation: zoomOut 0.3s ease forwards;
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

.team__member-icon.telegram:before {
    content: "\f2c6";  /* آیکون تلگرام در Font Awesome 5 */
}

.team__member-icon.instagram:before {
    content: "\f16d";  /* آیکون اینستاگرام */
}

.team__member-icon.email:before {
    content: "\f0e0";  /* آیکون ایمیل (envelope) */
}