.province-selector {
  position: relative;
  margin-bottom: 15px;
}

.province-btn {
  width: 100%;
  padding: 10px;
  background: #005bbb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.province-list {
  position: absolute;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 5px;
  z-index: 999;
}

.hidden {
  display: none;
}

.province-search {
  width: 95%;
  margin: 5px auto;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 5px;
}

#provinceItems li {
  padding: 10px;
  cursor: pointer;
  list-style: none;
}

#provinceItems li:hover {
  background: #e6f0ff;
}

.selected-province {
  margin-top: 8px;
  font-weight: bold;
  color: #005bbb;
}











@font-face {
  font-family: 'BYekan';
  src: url('/fonts/BYekan.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BZar';
  src: url('/fonts/BZar.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BTitrBold';
  src: url('/fonts/BTitrBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'BTraffic';
  src: url('/fonts/BTraffic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BTRAFB';
  src: url('/fonts/BTRAFB.TTF') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* فونت پیش‌فرض کل سایت */
body, * {
  font-family: 'BYekan', 'BZar', 'BTitrBold', 'BTraffic', sans-serif;
}









.print-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.print-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffeb3b;
  color: #333;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid #f9a825;
}

.info-icon:hover {
  background: #ffe082;
}

.info-box {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fff8e1;
  border: 1px solid #ffecb3;
  color: #5d4037;
  font-size: 12px;
  line-height: 1.7;
}
















@keyframes pageZoom {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(2); /* زوم جلو */
  }
  75% {
    transform: scale(2); /* 👈 نگه داشتن زوم برای مکث */
  }
  100% {
    transform: scale(1); /* برگشت عقب */
  }
}

body.page-zoom {
  animation: pageZoom 5s ease-in-out; /* کل انیمیشن ۵ ثانیه */
  transform-origin: bottom center;    /* زوم از پایین صفحه */
}






.audit-intro {
  background: linear-gradient(135deg, #fdfdfd, #ffe0c2); /* رنگ گرم و ساده */
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 30px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-family: "Vazirmatn", "Shabnam", "Kalameh", "Tahoma", sans-serif;
  font-size: 1.3rem;
  line-height: 2.2;
  color: #0055aa; /* متن آبی زیبا */
  text-align: justify;
  transition: all 0.3s ease-in-out;
}

.audit-intro:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transform: scale(1.01);
}

.audit-intro p {
  margin: 0;
}

@media (max-width: 768px) {
  .audit-intro {
    font-size: 1.1rem;
    padding: 20px;
    margin: 20px;
  }
}








#summaryResult {
  display: none; /* پیش‌فرض مخفی */
  background: linear-gradient(135deg, #e0f7ff, #d0eaff);
  border-radius: 16px;
  padding: 18px 24px;
  margin-top: 30px;
  font-family: "Vazirmatn", "Shabnam", "Kalameh", "Tahoma", sans-serif;
  font-size: 1.2rem;
  line-height: 2;
  color: #004488;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

#summaryResult:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  transform: scale(1.02);
}

@media (max-width: 768px) {
  #summaryResult {
    font-size: 1rem;
    padding: 14px 18px;
    margin: 20px;
  }
}



summaryResult.style.display = "block";
summaryResult.textContent = `✅ مجموع پرداختی ${months} ماهه: ${data.totalPaid.toLocaleString()} تومان`;















.subscription-block {
background: linear-gradient(to right, #9ab5cd, #6e8daa);

  border: 2px solid #ff4444;
  color: #660000;
  padding: 40px;
  margin: 20px auto;
  border-radius: 12px;
  font-size: 1.3em;
  text-align: center;
  box-shadow: 0 0 15px rgba(255,0,0,0.3);
  max-width: 800px;
}

.subscription-block h2 {
  margin-bottom: 20px;
  color: #cc0000;
  font-size: 1.6em;
}

#freeOverlayText {
  direction: rtl;
  font-size: 1.2em;
  line-height: 1.8em;
  margin-top: 10px;
  text-align: center;
  color: #0044cc; /* 🔵 آبی اصلی */
  text-shadow: 0 0 4px #ffffff; /* ⚪ سایه سفید */
}

.typing-line {
  margin-bottom: 6px;
  color: inherit;
}

.highlighted-word {
  color: #cc0000;
  text-shadow: 0 0 3px yellow;
  font-weight: bold;
}


























.logo-floating-wrapper {
  text-align: center;
  margin-top: 40px;
}

.logo-floating-wrapper a {
  display: inline-block;
  text-decoration: none;
}

.floating-logo {
  width: 100px;
  height: auto;
  transition: all 0.4s ease;
  border: none;
  box-shadow: none;
}

.logo-caption,
.logo-hover-caption {
  font-size: 15px;
  font-weight: bold;
  margin-top: 6px;
  transition: all 0.3s ease;
}

.logo-caption {
  color: #444;
}

.logo-hover-caption {
  color: #0a0;
  display: none;
}


/* افکت هاور قوی‌تر */
.logo-floating-wrapper a:hover .floating-logo {
  filter: drop-shadow(0 0 16px #0f0);
  transform: scale(1.25);
}

.logo-floating-wrapper a:hover .logo-caption {
  display: none;
}

.logo-floating-wrapper a:hover .logo-hover-caption {
  display: block;
  text-shadow: 0 0 6px #0f0;
}

















/* ============================= */
/* 🎥 چیدمان اصلی کنار فرم      */
/* ============================= */
.vs-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 35px;
  margin-top: 25px;
}

/* فرم سمت راست – بدون تغییر */
#addCarForm {
  flex: 1 1 45%;
}

/* پخش‌کننده سمت چپ */
.vs-video-container {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  padding: 18px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.15);
}

/* ============================= */
/* 🎬 پخش‌کننده اصلی            */
/* ============================= */
.vs-player-box {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  background: #000;
}

#vs-mainVideo {
  width: 100%;
  height: 340px;
  border-radius: 14px;
  outline: none;
}

/* ============================= */
/* 🎞 عنوان گالری                */
/* ============================= */
.vs-gallery-title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ============================= */
/* 🎞 گالری اسلایدی              */
/* ============================= */
.vs-gallery-wrapper {
  position: relative;
  overflow: hidden;
  padding: 12px 0;
}

.vs-gallery-track {
  display: flex;
  gap: 14px;
  transition: transform 0.35s ease;
}

.vs-gallery-item {
  min-width: 120px;
  height: 85px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s ease;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.1);
}

.vs-gallery-item:hover {
  transform: scale(1.08);
  border-color: #4da3ff;
  box-shadow: 0 6px 18px rgba(77,163,255,0.4);
}

.vs-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================= */
/* ◀▶ دکمه‌های اسلایدر           */
/* ============================= */
.vs-gallery-nav {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.35);
  border: none;
  font-size: 26px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 10px;
  transition: 0.25s;
  z-index: 3;
  backdrop-filter: blur(6px);
}

.vs-gallery-nav:hover {
  background: rgba(255,255,255,0.6);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.vs-left {
  right: 100%;
}

.vs-right {
  left: 100%;
}

/* ============================= */
/* 📱 موبایل و تبلت              */
/* ============================= */
@media (max-width: 900px) {
  .vs-row {
    flex-direction: column;
  }

  #addCarForm,
  .vs-video-container {
    width: 100%;
  }

  #vs-mainVideo {
    height: 260px;
  }

  .vs-gallery-item {
    min-width: 32%;
  }
}

@media (max-width: 480px) {
  #vs-mainVideo {
    height: 220px;
  }

  .vs-gallery-item {
    min-width: 45%;
  }

  .vs-gallery-title {
    font-size: 1rem;
  }
}



























.expired-message {
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  padding: 18px 20px;
  background: #ffe5e5;
  border: 1px solid #ff4d4d;
  border-radius: 10px;
  color: #cc0000;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.8;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.expired-message:hover {
  background: #ffcccc;
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.25);
}

.expired-message.hidden {
  display: none;
}

@media (max-width: 600px) {
  .expired-message {
    font-size: 0.95rem;
    padding: 14px;
  }
}


















.docGate-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1e1e2f, #2c2c3e);
  backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow-y: auto;
  padding: 20px;
}

.docGate-box {
  background: #fff;
  width: 100%;
  max-width: 480px;
  padding: 30px 25px;
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(0,0,0,0.3);
  position: relative;
  animation: fadeIn .4s ease;
  font-family: 'Vazirmatn', sans-serif;
}

.docGate-title {
  font-size: 22px;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 10px;
  text-align: center;
}

.docGate-close {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 26px;
  cursor: pointer;
  color: #555;
  transition: 0.3s;
}

.docGate-close:hover {
  color: #ff4444;
}

.docGate-desc {
  font-size: 15px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
  line-height: 1.6;
}

.docGate-box label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #444;
}

.docGate-box input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 18px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.docGate-box input:focus {
  border-color: #007bff;
  outline: none;
}

.docGate-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(90deg, #007bff, #005fcc);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.docGate-btn:hover {
  background: linear-gradient(90deg, #005fcc, #007bff);
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@media screen and (max-width: 600px) {
  .docGate-box {
    padding: 20px 15px;
    border-radius: 12px;
  }

  .docGate-title {
    font-size: 18px;
  }

  .docGate-desc {
    font-size: 14px;
  }

  .docGate-box input {
    font-size: 13px;
  }

  .docGate-btn {
    font-size: 15px;
  }
}



























/* ===========================
   Ticket Page Container
=========================== */
.ticket-launch-btn {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.ticket-launch-btn:hover {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  transform: translateY(-1px);
}



/* ===========================
   Layout
=========================== */

.ticket-layout {
  display: flex;
  gap: 20px;
  padding: 20px;
  height: 90vh;
}

/* ===========================
   Sidebar
=========================== */

.ticket-sidebar {
  width: 30%;
  background: #f0f9ff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ticket-sidebar h3 {
  margin-bottom: 15px;
  color: #0f172a;
  font-size: 20px;
}

.ticket-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.ticket-tabs button {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: #e2e8f0;
  cursor: pointer;
  transition: 0.3s;
}

.ticket-tabs button.active {
  background: #38bdf8;
  color: white;
}

.ticket-tabs button:hover {
  background: #bae6fd;
}

.ticket-list {
  height: calc(100% - 120px);
  overflow-y: auto;
}

.ticket-item {
  background: white;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: 0.3s;
  border: 1px solid #e2e8f0;
}

.ticket-item:hover {
  background: #f0f9ff;
  transform: translateY(-2px);
}

.ticket-item h4 {
  margin: 0;
  font-size: 16px;
  color: #0f172a;
}

.ticket-item p {
  margin: 5px 0;
  color: #475569;
}

.ticket-item .time {
  font-size: 12px;
  color: #64748b;
}

/* ===========================
   Chat Area
=========================== */

.ticket-chat {
  flex: 1;
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.chat-empty {
  text-align: center;
  margin-top: 40px;
  color: #64748b;
  font-size: 18px;
}

.chat-header h3 {
  margin: 0;
  font-size: 20px;
  color: #0f172a;
}

.chat-header p {
  margin: 5px 0 15px;
  color: #475569;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.chat-bubble {
  padding: 10px 14px;
  background: #e0f2fe;
  border-radius: 12px;
  margin-bottom: 10px;
  max-width: 80%;
}

.chat-bubble.user {
  background: #bae6fd;
  margin-left: auto;
}

/* ===========================
   Chat Input
=========================== */

.chat-input-area {
  margin-top: 15px;
}

.chat-input-area textarea {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  resize: none;
  height: 70px;
}

.chat-tools {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.chat-tools button {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: #0284c7;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.chat-tools button:hover {
  background: #0369a1;
}

.sticker-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0f2fe;
  font-size: 20px;
}

.sticker-panel {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: #f0f9ff;
  padding: 10px;
  border-radius: 12px;
  margin-top: 10px;
}

.sticker-panel span {
  font-size: 26px;
  cursor: pointer;
  transition: 0.2s;
}

.sticker-panel span:hover {
  transform: scale(1.2);
}

/* ===========================
   New Ticket Form
=========================== */

.new-ticket-box {
  background: #f8fafc;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.new-ticket-box select {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  margin-bottom: 15px;
}

.submit-ticket-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: #0ea5e9;
  color: white;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}

.submit-ticket-btn:hover {
  background: #0284c7;
}

/* ===========================
   Mobile Responsive
=========================== */

@media (max-width: 768px) {
  .ticket-layout {
    flex-direction: column;
    height: auto;
  }

  .ticket-sidebar {
    width: 100%;
  }

  .ticket-chat {
    width: 100%;
    margin-top: 20px;
  }

  .chat-messages {
    height: 300px;
  }
}








.paymentSuccessPopup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  font-family: 'Vazirmatn';
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.popup-content {
  position: relative;
  width: 90%;
  max-width: 480px;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  padding-bottom: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.popup-image {
  width: 100%;
  display: block;
  margin-top: 80px;
}

/* ✅ متن پایه */
.popup-text {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.85);
  padding: 15px 20px;
  border-radius: 10px;
  text-align: right;
  font-size: 15px;
  line-height: 1.8;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  display: none;
}

/* ✅ متن موفقیت (سبز + چشمک) */
.success-text {
  color: #0a7d00;
  animation: blinkMoveGreen 1.4s infinite ease-in-out;
}

@keyframes blinkMoveGreen {
  0%   { opacity: 1; transform: translateX(0); }
  50%  { opacity: 0.6; transform: translateX(-4px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ✅ متن خطا (قرمز + چشمک) */
.fail-text {
  color: #d40000;
  animation: blinkMoveRed 1.4s infinite ease-in-out;
}

@keyframes blinkMoveRed {
  0%   { opacity: 1; transform: translateX(0); }
  50%  { opacity: 0.4; transform: translateX(4px); }
  100% { opacity: 1; transform: translateX(0); }
}

#closePaymentPopup {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: #0a7d00;
  color: white;
  padding: 10px 25px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#closePaymentPopup:hover {
  background: #097000;
}































.gateway-box {
  display: flex;
  gap: 20px;
  margin: 25px 0;
  justify-content: center;
  flex-wrap: wrap;
}

.gateway-option {
  position: relative;
  border: 2px solid #ccc;
  padding: 14px 20px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.3s ease;
  width: 140px;
  background: #f9f9f9;
}

.gateway-option:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.gateway-option img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.gateway-option span {
  margin-top: 8px;
  font-weight: bold;
  font-size: 14px;
}

.gateway-option input {
  display: none;
}

.gateway-option.selected {
  border-color: #28a745;
  background: #e6f9ec;
  box-shadow: 0 0 12px rgba(40, 167, 69, 0.4);
}

/* ✅ حالت چشمک قرمز */
.gateway-option.attention {
  animation: blinkRed 0.6s ease-in-out 0s 4 alternate;
  border-color: #dc3545 !important;
}

@keyframes blinkRed {
  0% { box-shadow: 0 0 0px red; }
  100% { box-shadow: 0 0 12px red; }
}
.error-message {
  color: #b30000;
  background: #ffe6e6;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ff4d4d;
  margin-top: 10px;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
  transition: 0.3s ease;
}

/* ✅ هاور زیبا */
.error-message:hover {
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.7);
  background: #ffd6d6;
}



























/* پیام موفقیت‌آمیز تخفیف */
.price-info {
  background-color: #e6f4ea; /* سبز ملایم */
  color: #1a1a1a; /* متن تیره برای خوانایی بالا */
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #4caf50;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  margin-bottom: 12px;
  transition: background-color 0.3s ease;
}

/* پیام خطای تخفیف */
.discount-error {
  background-color: #fbeaea; /* قرمز ملایم */
  color: #2a2a2a; /* متن تیره برای تضاد بهتر */
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #f44336;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  margin-bottom: 12px;
  transition: background-color 0.3s ease;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 600px) {
  .price-info,
  .discount-error {
    font-size: 15px;
    padding: 10px 12px;
  }
}
















main{
  justify-content: center;
align-content: center;
}


.section {
  display: none;
align-content: center;
}



.section.active {
  display: block;
align-content: center;
}

.section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  position: relative;
  z-index: 1;
  background-image: url(./images/noghte.png);
}

.section.active {
  animation: fadeSlideUp 0.5s ease forwards;
  pointer-events: auto;
  z-index: 10;
}

/* استایل مشترک برای h2 داخل سکشن‌ها */
.section h2 {
  background-color: #597598;   /* رنگ پس‌زمینه */
  color: #ffa703;              /* متن روشن */
  border-radius: 8px;
  border: 1px solid #ffa703;
  padding: 6px 12px;
  display: inline-block;
  text-align: center;
}


/* ریسپانسیو برای موبایل */
@media (max-width: 600px) {
  .section h2 {
    font-size: 1rem;   /* کوچکتر در موبایل */
    padding: 4px 8px;  /* فاصله داخلی کمتر */
    width: auto;       /* عرض خودکار */
  }
}










header {
   display: flex;
   justify-content: space-between;
   padding: 10px;
  background-image: url(./images/header-index.jpg);
   background-color: #001bb1;
   height: 80px;
}

/* لوگو سمت چپ */
.logo {
  height: 60px;
  width: auto;
  margin-left: 0;
}

/* عنوان وسط */
header h1 {
  flex-grow: 1;
  text-align: center;
  margin: 0;
  font-size: 1.4rem;
  color: white;
}

.glowing-title {
  animation: glowingText 3s infinite;
 margin: 15px 0 0 0;
  font-weight: bold;
}

/* افکت نورانی */
@keyframes glowingText {
  0%   { color: #ff3d00; text-shadow: 0 0 5px #ff3d00; }
  25%  { color: #ffeb3b; text-shadow: 0 0 10px #ffeb3b; }
  50%  { color: #005a2f; text-shadow: 0 0 10px #00b15b; }
  100% { color: #ff3d00; text-shadow: 0 0 5px #ff3d00; }
}

@media (max-width: 600px) {
  .glowing-title {
    visibility: hidden;
    height: 20px;
  }
}




/*  دکمه خروج از حساب با افکت درخشش و انفجار */
.exit-btn {
  background: linear-gradient(135deg, #1fce04, #de1b09);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
  animation: pulseGlow 1.5s infinite;
  transition: transform 0.2s ease;
}

.exit-btn:hover {
  transform: scale(1.05);
}












/*استایل های جستجو لیست کارشناسی ددر محل */
.rq-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  background: linear-gradient(0deg,#597598,#aeced8);
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  align-items: center;
  justify-content: flex-start;
}

.rq-filter-group {
  display: flex;
  flex-direction: column;
background-color:none;
  min-width: 150px;
}

.rq-filter-group label {
  font-weight: bold;
  margin-bottom: 0.3rem;
  color: #333;
}

.rq-filter-group select {
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 0.9rem;
}

.rq-status-toggle {
  display: flex;

background-color:none;
  gap: 1rem;
  margin-top: 0.3rem;
}

.rq-status-toggle label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: #444;
}




#resetWizardBtn {

  background-color: #5a6268;
 color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#resetWizardBtn:hover {
  background-color: #5a6268; /* کمی تیره‌تر در حالت hover */
}








/* ===== Preview Styles (Clean Version) ===== */

:root {
  --preview-padding: 6px;
  --field-border: 1px dashed rgba(0,0,0,0.35);
  --field-bg: rgba(255,255,255,0);
  --handle-size: 12px;
  --handle-color: rgba(0,0,0,0.6);
  --vazir: "Vazirmatn", Tahoma, sans-serif;
}

/* Wrapper: صفحه سفید زیر قالب */
#previewWrapper {
  position: relative;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* تصویر قالب */
#previewImage {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  display: block;
}

/* فیلدهای روی قالب */
#previewFields {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* هر فیلد */
.template-field {
  position: absolute;
  box-sizing: border-box;
  border: var(--field-border);
  background: var(--field-bg);
  font-family: var(--vazir);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* حالت طراحی (drag/resize) */
.template-field.design-mode {
  pointer-events: auto;
  cursor: grab;
  z-index: 50;
}

/* دسته‌ی تغییر اندازه */
.template-field .handle {
  position: absolute;
  width: var(--handle-size);
  height: var(--handle-size);
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
  background: var(--handle-color);
  border-radius: 2px;
  z-index: 60;
}

/* ورودی‌ها بالای همه */
#fieldInputs {
  z-index: 9999;
  position: relative;
}

/* موبایل */
@media (max-width: 700px) {
  #previewWrapper {
  }
}






















.step-3-active #canvasWrapper { pointer-events: auto !important; }
#canvasWrapper.canvas-interaction-disabled {
  pointer-events: auto !important;
}






@media print {
  #qrCanvas {
    display: block !important;
  }
}








.template-status-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2ecc71;
  color: #fff;
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  z-index: 9999;
  text-align: center;
}

.brand-line {
  font-size: 1.6rem;
  font-weight: bold;
  color: #f1c40f; /* طلایی */
  margin-bottom: 15px;
}

.template-status-text {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff; /* سفید */
}

.template-sub-text {
  font-size: 1.2rem;
  margin-top: 10px;
  color: #eee;
}

/* افکت چشمک‌زن برای کلمه صبر کنید */
.blink {
  animation: blinkAnim 1s infinite;
  color: #e74c3c; /* قرمز */
}

@keyframes blinkAnim {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

























.qr-option-container {
  margin-top: 16px;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 15px;
  color: #333;
}

.qr-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.qr-checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  left: 0;
}

.custom-check {
  width: 18px;
  height: 18px;
  border: 2px solid #555;
  border-radius: 4px;
  display: inline-block;
  position: relative;
}

.qr-checkbox input[type="checkbox"]:checked + .custom-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: solid #2196f3;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.info-icon {
  font-size: 16px;
  color: #888;
  cursor: pointer;
}

.qr-note {
  font-size: 14px;
  color: #2e7d32;
  margin-top: 6px;
}

.qr-tooltip {
  display: none;
  font-size: 13px;
  color: #444;
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
  line-height: 1.6;
}
































/* فونت فارسی زیبا */
/*@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');*/

body {
  font-family: 'Vazirmatn', sans-serif;
}
.glass-notice-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeInOverlay 0.5s ease-out;
}

/* باکس پیام شیشه‌ای */
.glass-box {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 24px;
  max-width: 90%;
  width: 400px;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  position: relative;
  animation: fadeInBox 0.6s ease-out;
  transition: transform 0.3s ease;
}

/* افکت هاور لپ‌تاپ */
@media (hover: hover) {
  .glass-box:hover {
    transform: scale(1.02);
    box-shadow: 0 0 25px rgba(0,255,200,0.4);
  }
}

/* عنوان پیام */
.glass-box h3 {
  margin-top: 0;
  font-size: 18px;
  color: #00ffc3;
  text-align: center;
}

/* متن پیام */
.glass-box p {
  margin: 12px 0;
  line-height: 1.6;
}

/* پیام قرمز زیر متن */
.glass-warning {
  color: crimson;
  font-weight: bold;
  border-top: 1px dashed crimson;
  padding-top: 12px;
  margin-top: 12px;
  text-align: center;
}

/* دکمه ضربدر بستن */
.glass-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s ease;
}

.glass-close:hover {
  color: #ff8080;
}

/* انیمیشن‌ها */
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* ریسپانسیو موبایل */
@media screen and (max-width: 480px) {
  .glass-box {
    width: 90%;
    font-size: 14px;
    padding: 20px;
  }

  .glass-box h3 {
    font-size: 16px;
  }

  .glass-close {
    font-size: 20px;
  }
}



#block-timer {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
















/* ✅ جعبه جزئیات خودرو */
.car-details-box {
  background-color: #acacac;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  font-family: "Vazirmatn", sans-serif;
  direction: rtl;
  text-align: right;
  overflow-x: auto;
  max-width: 100%;
}

/* ✅ سربرگ برند */
.car-details-box h2 {
  text-align: center;
  font-size: 1.6em;
  margin-bottom: 24px;
  border-bottom: 2px solid #007bff;
  padding-bottom: 12px;
  color: #007bff;
}

/* ✅ تیترهای داخلی */
.car-details-box h3,
.car-details-box h4 {
  margin-top: 0;
  color: #333;
  font-size: 1.2em;
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* ✅ جدول مشخصات خودرو */
.car-info-table,
.audit-table,
.history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.95em;
  background-color: #acacac;
  border-radius: 6px;
  overflow: hidden;
}

.car-info-table th,
.audit-table th,
.history-table th {
  background-color: #f0f4f8;
  color: #666666;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

.car-info-table td,
.audit-table td,
.history-table td {
  padding: 10px;
  border: 1px solid #fff; /* ✅ خط سفید */
  text-align: center;
  transition: background-color 0.2s ease;
}

/* ✅ هاور حرفه‌ای جدول‌ها */
.car-info-table tr:hover td,
.audit-table tr:hover td,
.history-table tr:hover td {
  background-color: #f9fcff;
  border: 1px solid #fff; /* ✅ خط سفید */
}

/* ✅ دکمه حذف حسابرسی */
.btn-delete-audit {
  background: none;
  border: none;
  color: #c00;
  font-size: 1.4em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn-delete-audit:hover {
  color: #900;
}

/* ✅ دکمه چاپ فرم */
.btn-print {
  margin-top: 20px;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
  display: block;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

.btn-print:hover {
  background-color: #0056b3;
}
.car-table th,
.car-table td {
  border: 1px solid #fff;}


/* ✅ پیام‌های فرم */
.form-message {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9em;
  margin-top: 10px;
  font-family: "Vazirmatn", sans-serif;
  direction: rtl;
  transition: all 0.3s ease;
}

.form-message.error {
  background-color: #ffe5e5;
  color: #c00;
  border: 1px solid #c00;
}

.form-message.success {
  background-color: #e6ffe6;
  color: #080;
  border: 1px solid #080;
}

/* ✅ دکمه‌های جدول اصلی */
.table-btn {
  margin: 4px;
  padding: 8px 14px;
  font-size: 0.85em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s ease;
}

.btn-edit {
  background-color: #ffc107;
  color: #333;
}

.btn-edit:hover {
  background-color: #e0a800;
}

.btn-delete {
  background-color: #dc3545;
  color: white;
}

.btn-delete:hover {
  background-color: #c82333;
}

.btn-toggle-details {
  background-color: #17a2b8;
  color: white;
}

.btn-toggle-details:hover {
  background-color: #138496;
}

/* ✅ واکنش‌گرایی برای موبایل */
@media (max-width: 768px) {
  .car-details-box {
    padding: 16px;
    font-size: 0.9em;
  }

  .car-details-box table,
  .car-details-box th,
  .car-details-box td {
    font-size: 0.85em;
    padding: 6px;
  }

  .btn-print {
    width: 100%;
    font-size: 1em;
  }

  .table-btn {
    display: block;
    width: 100%;
    margin: 6px 0;
    font-size: 0.9em;
  }

  .form-message {
    font-size: 0.85em;
    padding: 6px 10px;
  }
}


















.tw-preview {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 30px rgba(2,6,23,0.04);
  margin: 0 auto;

}
.tw-preview {
  box-sizing: border-box;
}

.tw-preview__img {
  display: block;
  object-fit: contain;
}




/* Container */
.tw-wizard{
  max-width: 1100px;
  margin: 28px auto;
  padding: 22px;
 background-color: #c00;
  background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--vfont);
  color: #0f172a;
  box-sizing: border-box;
}

/* Step shell */
.tw-step{
  margin: 16px 0;
  padding: 16px;
  border-radius: 10px;
  transition: box-shadow .16s ease, transform .12s ease, border-color .12s ease;
  background: linear-gradient(180deg,#fff,#fbfdff);
  border: 1px solid transparent;
}
.tw-step--active{
  border-color: var(--accent-soft);
  box-shadow: 0 14px 36px rgba(37,99,235,0.04);
}
.tw-step__title{
  font-size: 20px;
  margin: 0 0 12px 0;
  background-color: #c00;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Options container */
.tw-options{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
  padding:12px;
  border-radius:12px;
  background: linear-gradient(180deg,#f0f7ff 0%,#eef8ff 100%);
  box-shadow: 0 8px 30px rgba(37,99,235,0.06);
  border: 1px solid rgba(37,99,235,0.04);
}

/* Card (paper option) */
.tw-card{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:180px;
  flex:1 1 200px;
  padding:12px;
  border-radius:10px;
  background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border: 1px solid rgba(15,23,42,0.04);
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  box-sizing:border-box;
}
.tw-card:hover{
  transform:translateY(-6px);
  box-shadow: 0 18px 44px rgba(37,99,235,0.06);
}
.tw-card__input{ display:none; }

/* Thumb */
.tw-card__thumb{
  width:68px;
  height:46px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color: var(--card-blue);
  background: linear-gradient(180deg,#e8f0ff,#dfeaff);
  border: 1px solid rgba(30,64,175,0.08);
  box-shadow: 0 8px 22px rgba(37,99,235,0.04);
  transition: all .18s ease;
}
.tw-card__meta{ display:flex; flex-direction:column; gap:4px; }
.tw-card__title{ font-size:15px; font-weight:700; color:#07143a; }
.tw-card__size{ font-size:13px; color:var(--muted); }

.tw-card.selected{
  border-color: var(--green-accent);
  box-shadow: 0 18px 48px var(--green-shadow);
  transform: translateY(-4px);
  background: linear-gradient(180deg,#fbfff8,#f3fff0);
}
.tw-card.selected .tw-card__thumb{
  background: linear-gradient(180deg,#e6fff4,#ddfff0);
  color:#045e43;
  border-color: rgba(34,197,94,0.22);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(34,197,94,0.06);
}
.tw-card.selected .tw-card__title{ color:#064e3b; }

.tw-orient{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:12px;
  flex-wrap:wrap;
}
.tw-orient__item{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:14px;
  color:var(--muted);
}

/* Buttons */
.btn5{
  padding:10px 18px;
  border-radius:10px;
  background: linear-gradient(180deg,var(--card-blue),var(--card-blue-600));
  color:#fff;
  border:none;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  font-size:14px;
  box-shadow: 0 8px 22px rgba(37,99,235,0.08);
}
.btn5:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg,#2b63ee,#1b3fb0);
}
.btn5.selected,
.btn5:active,
.btn5:focus{
  background: linear-gradient(180deg,#dbeffd,#dff8f2);
  color: #044e3b;
  box-shadow: 0 8px 24px rgba(6,95,70,0.06);
}

/* Canvas area */
.tw-canvas{
  position:relative;
  border:1px dashed rgba(15,23,42,0.06);
  margin-top:16px;
  display:none;
  background: linear-gradient(180deg,#fbfdff,#f8fbff);
  border-radius:10px;
  overflow:hidden;
  padding:8px;
}
.tw-canvas canvas{ display:block; width:100%; height:auto; }
.tw-fields{ position:absolute; inset:0; pointer-events:none; }

/* Cursor rules */
.template-field, .tw-card, .btn5, button { cursor: grab; }
input:focus, textarea:focus, .template-field textarea:focus { cursor: text; }
.tw-preview__fields{ position:absolute; inset:0; pointer-events:none; }

/* Inputs area */
.tw-inputs{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tw-inputs input, .tw-inputs textarea{
  width:100%;
  max-width:820px;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.06);
  font-size:14px;
  box-sizing:border-box;
  font-family:var(--vfont);
  color:#0f172a;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow: 0 8px 20px rgba(2,6,23,0.02) inset;
}
.tw-inputs textarea{
  min-height:120px;
  resize:vertical;
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.45;
}

/* Printed text */
.printed-text{
  position:absolute;
  box-sizing:border-box;
  padding:1mm;
  overflow:hidden;
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.35;
  text-align:left;
  font-family: var(--vfont);
  background: transparent;
}

/* Controls & messages */
.tw-steps-controls{ display:flex; gap:12px; margin-top:16px; align-items:center; flex-wrap:wrap; }
.tw-msg{ margin-top:12px; padding:10px; border-radius:8px; font-size:13px; background: linear-gradient(180deg,#f8fafc,#ffffff); border:1px solid rgba(15,23,42,0.03); }

/* Resize handles */
.resize-handle{
  width:10px; height:10px; background:#334155; position:absolute; z-index:6; border-radius:2px;
}
.resize-handle.top-left{ top:-6px; left:-6px; }
.resize-handle.top-right{ top:-6px; right:-6px; }
.resize-handle.bottom-left{ bottom:-6px; left:-6px; }
.resize-handle.bottom-right{ bottom:-6px; right:-6px; }

/* Utilities */
.u-hidden{ display:none !important; }
.u-center{ display:flex; align-items:center; justify-content:center; }
.u-nowrap{ white-space:nowrap; }
.u-ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.is-loading{ opacity:0.6; pointer-events:none; transform:translateY(0); transition:opacity .18s; }
.is-error{ border-color: #f87171 !important; box-shadow: 0 6px 18px rgba(248,113,113,0.08); }

.text-accent{ color: var(--card-blue); }
.text-muted{ color: var(--muted); font-size:13px; }

.tw-card--compact{ padding:8px; gap:8px; }
.tw-card--compact .tw-card__thumb{ width:48px; height:34px; font-weight:700; }

/* Animations */
.fade-in { animation: fadeIn .22s ease both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }






















/* لایهٔ پوششی برای مودال (شفاف، بدون تار شدن کل صفحه) */
.tw-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* فقط پنجره قابل کلیک باشه */
}

/* پنجرهٔ حذف قالب با زمینه دودی و شیشه‌ای */
.tw-modal__content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  text-align: center;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  color: #fff;
  animation: fadeInScale 0.3s ease;
  z-index: 9999;
}
.tw-modal__content {
  pointer-events: auto;
}
.tw-modal {
  pointer-events: none;
}

/* متن داخل پنجره */
.tw-modal__content p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 24px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* ✅ سایه برای وضوح بیشتر */
}

/* دکمه‌ها */
.tw-modal__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.tw-btn {
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s ease;
  background: #f1f1f1;
  color: #333;
}

.tw-btn:hover {
  background: #ddd;
}

.tw-btn--danger {
  background: #e53935;
  color: #fff;
}

.tw-btn--danger:hover {
  background: #c62828;
}

/* انیمیشن ورود */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ریسپانسیو موبایل */
@media (max-width: 480px) {
  .tw-modal__content {
    width: 95%;
    padding: 24px 18px;
  }
  .tw-modal__content p {
    font-size: 16px;
  }
  .tw-btn {
    font-size: 14px;
    padding: 10px 16px;
  }
}
























/* استایل دهی بخش نرم افزار  */
.agent-box {
  background-color: #f3f4f6;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  text-align: center;
  margin-top: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.agent-title {
  font-size: 20px;
  color: #1f2937;
  margin-bottom: 10px;
}

.agent-description {
  font-size: 15px;
  color: #4b5563;
  margin-bottom: 20px;
}

.agent-select {
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  width: 100%;
  max-width: 300px;
}

.agent-help-btn {
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  background-color: #2563eb;
  color: white;
  cursor: pointer;
  animation: blink 1.2s infinite;
}

.agent-help-text {
  display: none;
  margin-top: 20px;
  color: #374151;
  font-size: 14px;
  background-color: #e5e7eb;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

/* انیمیشن چشمک‌زن */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ریسپانسیو موبایل */
@media (max-width: 480px) {
  .agent-box {
    padding: 20px;
  }

  .agent-title {
    font-size: 18px;
  }

  .agent-description {
    font-size: 14px;
  }

  .agent-select {
    font-size: 14px;
  }

  .agent-help-btn {
    font-size: 13px;
    padding: 8px 16px;
  }

  .agent-help-text {
    font-size: 13px;
  }
}























/* تایمر اصلی */
#subscriptionCountdown {
  font-size: 1.4rem;
  font-weight: bold;
  color: #4caf50; /* سبز وقتی فعال است */
  letter-spacing: 2px;
  transition: color 0.3s ease;
}

/* پیام هشدار و انقضا */
#subscriptionWarningBar {
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
  transition: all 0.3s ease;
}

/* حالت هشدار (کمتر از ۵ ساعت) */
#subscriptionWarningBar.warning-bar {
  background: linear-gradient(90deg, #ff9800, #ff5722);
  color: #fff;
  animation: pulse 1.5s infinite;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

#subscriptionWarningBar.warning-bar span {
  display: block;
  margin-top: 6px;
  font-size: 1.2rem;
  color: #fff;
}

/* حالت انقضا */
#subscriptionWarningBar.expired-bar {
  background: linear-gradient(90deg, #d32f2f, #b71c1c);
  color: #fff;
  animation: shake 0.5s ease-in-out infinite alternate;
  box-shadow: 0 4px 15px rgba(0,0,0,0.35);
}

#subscriptionWarningBar.expired-bar span {
  display: block;
  margin-top: 8px;
  font-size: 1.3rem;
  color: #ffeb3b; /* زرد برای تایمر صفر */
}

/* انیمیشن‌ها */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,87,34,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(255,87,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,87,34,0); }
}

@keyframes shake {
  0% { transform: translateX(-2px); }
  100% { transform: translateX(2px); }
}


































/* ✨ دکمه راهنما با افکت درخشش و انفجار */
.rq-guide-btn {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
  animation: pulseGlow 1.5s infinite;
  transition: transform 0.2s ease;
}

.rq-guide-btn:hover {
  transform: scale(1.05);
}

/* ❌ دکمه بستن با افکت انفجار */
.rq-guide-close-btn {
  background: #ff4d4d;
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  margin-left: 8px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
  animation: explodeIn 0.6s ease-out;
  transition: transform 0.2s ease;
}

.rq-guide-close-btn:hover {
  transform: scale(1.2);
}

/* ✨ انیمیشن درخشش دکمه راهنما */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
  }
}

/* 💥 افکت انفجار دکمه بستن */
@keyframes explodeIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}










.floating-toast {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1em;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.5s ease;
  cursor: default;
}
.floating-toast.visible {
  opacity: 1;
}
.floating-toast.fade-out {
  opacity: 0;
}
.floating-toast.pulse {
  animation: pulse 1.2s infinite;
}
.floating-toast:hover {
  background: linear-gradient(135deg, #3b5998, #4a69bd);
  box-shadow: 0 0 16px rgba(0,0,0,0.4);
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}











.rq-toast {
  position: relative;
  margin-top: 15px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #00c9ff, #92fe9d);
  color: #222;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  transition: opacity 0.5s ease;
  text-align: center;
  font-size: 1em;
  z-index: 999;
}

.rq-toast.hidden {
  display: none;
}

.rq-toast.fade-out {
  opacity: 0;
}












.confirmation-box {
  background: linear-gradient(135deg, #1e1e2f, #2c3e50);
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  margin: 30px auto;
  max-width: 600px;
  font-size: 1.2rem;
  font-family: 'Vazirmatn', 'Shabnam', 'Tahoma', sans-serif;
  box-shadow: 0 0 15px rgba(0,255,200,0.3);
  position: relative;
  text-align: center;
}

.help-icon {
  font-size: 1.5rem;
  color: #ffd700;
  cursor: pointer;
  margin-left: 10px;
  transition: transform 0.3s ease;
}
.help-icon:hover {
  transform: scale(1.2);
}

/* پنجره راهنما */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  background: #fff;
  color: #333;
  padding: 30px;
  border-radius: 16px;
  max-width: 700px;
  font-size: 1.1rem;
  font-family: 'Vazirmatn', 'Shabnam', 'Tahoma', sans-serif;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  overflow-y: auto;
  max-height: 80vh;
}

.popup-content h2 {
  color: #0078d4;
  margin-bottom: 20px;
  font-size: 1.4rem;
}

.popup-content button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #0078d4;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.popup-content button:hover {
  background-color: #005fa3;
}

/* ریسپانسیو برای موبایل */
@media screen and (max-width: 600px) {
  .confirmation-box {
    font-size: 1rem;
    padding: 16px;
  }
  .popup-content {
    padding: 20px;
    font-size: 1rem;
  }
  .popup-content h2 {
    font-size: 1.2rem;
  }
}





















/*@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');*/

.form-container {
  background: linear-gradient(135deg, #1e1e2f, #2c3e50);
  padding: 30px;
  border-radius: 16px;
  max-width: 600px;
  margin: 30px auto;
  color: white;
  font-family: 'Vazirmatn', 'Shabnam', 'Tahoma', sans-serif;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.6s ease;
}
.form-animate {
  opacity: 1;
  transform: scale(1);
}

.form-container h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #00e6aa;
  text-shadow: 0 0 8px rgba(0,255,200,0.5);
}

label {
  display: block;
  margin: 12px 0 6px;
  font-weight: bold;
  color: #ffa705;
}

input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 1rem;
  background-color: #b0b0b0;
  color: #333;
  transition: box-shadow 0.3s ease;
}
input:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(0,255,200,0.6);
}
.domain-input-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  direction: rtl;
}

.domain-input-wrapper input {
  flex: 1;
  padding: 12px;
  font-size: 1rem;
  border-radius: 10px;
  border: none;
  background-color: #f0f0f0;
  color: #333;
  transition: box-shadow 0.3s ease;
}
.domain-input-wrapper input:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(0,255,200,0.6);
}

.domain-suffix {
  font-weight: bold;
  color: #00e6aa;
  font-size: 1rem;
  white-space: nowrap;
}



.warning {
  color: #ff4444;
  font-weight: bold;
  margin-top: 8px;
  margin-bottom: 16px;
}

/* دکمه ثبت */
.btn-final {
  background-color: #fff;
  color: #0078d4;
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 120, 212, 0.6);
  transition: box-shadow 0.4s ease, transform 0.3s ease;
  margin-top: 20px;
}
.btn-final:hover {
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.8), 0 0 15px rgba(0, 120, 212, 0.6);
  transform: scale(1.05);
}

/* ریسپانسیو برای موبایل */
@media screen and (max-width: 600px) {
  .form-container {
    padding: 20px;
    border-radius: 12px;
  }
  .form-container h2 {
    font-size: 1.3rem;
  }
  input {
    font-size: 0.95rem;
    padding: 10px;
  }
  .btn-final {
    font-size: 1rem;
    padding: 12px 20px;
  }
}















.typing-line {
  font-family: 'Vazirmatn', 'Shabnam', 'Tahoma', sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: #fff;
  padding: 8px 20px;
  margin: 10px auto;
  max-width: 800px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  border-right: none;
  animation: typing 3s steps(50, end) forwards;
  opacity: 0;
}

.typing-line:nth-child(1) {
  animation-delay: 0s;
}
.typing-line:nth-child(2) {
  animation-delay: 3.2s;
}
.typing-line:nth-child(3) {
  animation-delay: 6.4s;
}
.typing-line:nth-child(4) {
  animation-delay: 9.6s;
}
.typing-line:nth-child(5) {
  animation-delay: 12.8s;
}
.typing-line:nth-child(6) {
  animation-delay: 16s;
}

@keyframes typing {
  from { width: 0; opacity: 1; }
  to { width: 100%; opacity: 1; }
}
@keyframes blink-caret {
  50% { border-color: transparent }
  100% { border-color: white }
}

/* ✅ دکمه نهایی با افکت نور و تأخیر */
.btn-final {
  background-color: #fff;
  color: #0078d4;
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 120, 212, 0.6);
  transition: box-shadow 0.4s ease, transform 0.3s ease;
  opacity: 0;
  animation: fadeInButton 1.5s ease forwards;
  animation-delay: 19.5s;
  margin-top: 30px;
}
.btn-final:hover {
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.8), 0 0 15px rgba(0, 120, 212, 0.6);
  transform: scale(1.05);
}

@keyframes fadeInButton {
  to {
    opacity: 1;
  }
}

/* ✅ ریسپانسیو برای موبایل */
@media screen and (max-width: 600px) {
  .typing-line {
    font-size: 13px;
    padding: 6px 16px;
  }
  .btn-final {
    font-size: 1.2rem;
    padding: 12px 20px;
  color: red;
  }
}

























.message-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  animation: blinkAnim 1.2s infinite;
}

.message-warning {
  background: #fff3cd;
  border: 2px solid #ff9800;
  color: #856404;
}

.message-error {
  background: #f8d7da;
  border: 2px solid #f44336;
  color: #721c24;
}

.message-success {
  background: #d4edda;
  border: 2px solid #4caf50;
  color: #155724;
}

@keyframes blinkAnim {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.5; }
}












.disabled {
  pointer-events: none;
  opacity: 0.5;
}




nav.menu a.disabled {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed;
}
.subscription-warning {
  background-color: #b30000;
  color: #fff;
  text-align: center;
  padding: 1rem;
  font-size: 1.1em;
  font-weight: bold;
  display: block;
}
.subscription-warning.hidden {
  display: none;
}
nav.menu a.disabled {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed;
}












.admin-clear-subscriptions {
  margin: 2rem auto;
  padding: 1.5rem;
  max-width: 500px;
  background: linear-gradient(135deg, #ffe5e5, #fff5f5);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.2);
  text-align: center;
  font-family: 'Vazirmatn', sans-serif;
}

#clearAllSubscriptionsForm {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#clearAllSubscriptionsForm button {
  background: linear-gradient(135deg, #ff4d4d, #ff1a1a);
  color: white;
  font-size: 1.1rem;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
}

#clearAllSubscriptionsForm button:hover {
  background: linear-gradient(135deg, #cc0000, #990000);
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(255, 0, 0, 0.4);
}

#clearAllMessage {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #d80000;
  font-weight: bold;
}

/* 📱 ریسپانسیو برای موبایل */
@media (max-width: 480px) {
  .admin-clear-subscriptions {
    padding: 1rem;
    margin: 1rem;
  }

  #clearAllSubscriptionsForm button {
    width: 100%;
    font-size: 1rem;
  }
}


























.countdown-timer {
  font-family: "Courier New", monospace;
  font-size: 1.4em;
  font-weight: bold;
  color: crimson;
  background-color: #fff0f0;
  padding: 4px 8px;
  border-radius: 6px;
}

.btn-eshterak {
  background: linear-gradient(to right, #3a7bd5, #3a6073); /* آبی تیره و سنگین */
  color: #ffffff;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 16px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* سایه روشن و لطیف */
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-eshterak:hover {
  background: linear-gradient(to right, #4b91d6, #4b6a85); /* کمی روشن‌تر هنگام هاور */
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.4);
  transform: scale(1.02);
}






.card-info {
  font-size: 1.1em;
  color: #333;
  margin: 12px 0;
  word-break: break-word;
  text-align: center;
}

.card-number {
  display: inline-block;
  font-weight: bold;
  font-size: 1.4em;
  letter-spacing: 2px;
  color: #0056b3;
  background: rgba(0, 123, 255, 0.05);
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.2);
}

@media (max-width: 480px) {
  .card-number {
    font-size: 1.2em;
    letter-spacing: 1px;
    padding: 4px 8px;
    box-shadow: none;
  }
}













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

* {
  box-sizing: border-box;
  font-family: 'Vazirmatn', sans-serif;
}

/* کلاس مخفی‌سازی عمومی */
.hidden {
  display: none !important;
}

/* نمایش تدریجی دیوهای مدیریتی */
.admin-user-list,
.admin-subscription-requests {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.4s ease;
}

.admin-user-list.visible,
.admin-subscription-requests.visible {
  max-height: 1000px;
  opacity: 1;
}

/* دکمه‌های مدیریتی */
.admin-actions {
  margin: 10px 0;
  display: flex;
  gap: 10px;
}

.action-button {
  padding: 8px 16px;
  font-size: 15px;
  border: none;
  border-radius: 6px;
  background-color: #0077cc;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.action-button:hover {
  background-color: #005fa3;
}

.action-button.danger {
  background-color: #cc0033;
}

.action-button.danger:hover {
  background-color: #990026;
}

/* فرم اشتراک */
.admin-subscription-wrapper {
  padding: 1rem;
  background: linear-gradient(to bottom right, #f0f4ff, #e0eaff);
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: auto;
}

.admin-subscription-wrapper h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  text-align: center;
}

.admin-subscription-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-subscription-list li {
  background: #ffffff;
  margin-bottom: 0.8rem;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-subscription-list li:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #f9fcff;
}

.admin-subscription-list button {
  background: #3498db;
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.admin-subscription-list button:hover {
  background: #2980b9;
}

/* پنل جزئیات */
.admin-subscription-details {
  margin-top: 2rem;
  padding: 1rem;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.4s ease;
}

.admin-subscription-details h4 {
  font-size: 1.2rem;
  color: #34495e;
  margin-bottom: 1rem;
}

.admin-subscription-details p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  color: #555;
}

.admin-subscription-details input[type="date"] {
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-top: 0.5rem;
  width: 100%;
  font-family: inherit;
}

.admin-subscription-details button {
  margin-top: 1rem;
  background: #27ae60;
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.admin-subscription-details button:hover {
  background: #219150;
}

/* تصاویر رسید */
.receipt-preview {
  max-width: 100px;
  margin: 0.5rem;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

/* انیمیشن ظاهر شدن */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ریسپانسیو برای موبایل */
@media (max-width: 600px) {
  .admin-subscription-wrapper {
    padding: 0.5rem;
  }

  .admin-subscription-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-subscription-list button {
    margin-top: 0.5rem;
    align-self: flex-end;
  }
}
























* {
  box-sizing: border-box;
  font-family: 'Vazirmatn', sans-serif;
}

#ai-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(45deg, #2e8b57, #00ced1);
  color: white;
  padding: 12px 20px;
  border-radius: 30px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}
#ai-button:hover {
  transform: scale(1.05);
}

#ai-chatbox {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 320px;
  height: 400px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
}
#chat-header {
  background: #2e8b57;
  color: white;
  padding: 10px;
  font-weight: bold;
}
#chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}
#chat-input {
  width: 80%;
  padding: 8px;
  margin: 10px;
}



































/* پنل انیمیشنی کارشناسی ر محل */
.animated-panel {
  background: linear-gradient(135deg, #abd8ff, #cbefff);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 0 20px rgba(0,0,0,0.08);
  animation: fadeSlideUp 0.6s ease;
  transition: box-shadow 0.3s ease;
}

.animated-panel:hover {
  box-shadow: 0 0 30px rgba(0,0,0,0.15);
}

/* فرم ورود */

.rq-form-box input,
.rq-form-box button {
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
}

.rq-form-box input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 8px rgba(59,130,246,0.3);
}

.rq-form-box button:hover {
  background-color: #3b82f6;
  color: white;
  transform: scale(1.03);
}

/* باکس توضیحات */
.rq-info-box {
  margin-top: 30px;
  background-color: #fef6e4;
  border-left: 5px solid #10b981;
  padding: 20px;
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.rq-info-box:hover {
  background-color: #e0f7fa;
}

.rq-info-text {
  font-size: 16px;
  line-height: 1.8;
  color: #374151;
  transition: color 0.3s ease;
}

.rq-info-box:hover .rq-info-text {
  color: #1e3a8a;
}
.rq-info-box.hidden {
  display: none !important;
}








@keyframes fall {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(100vh);
    opacity: 1;
  }
}

.drop {
  pointer-events: none;
  z-index: 0;
}










































/* 🌌 سکشن داشبورد */
.rq-dashboard-section {
  background: linear-gradient(to bottom, #121212, #1c1c1c);
  color: #fff;
  padding: 30px 20px;
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
  max-width: 650px;
  margin: 40px auto;
}

/* ✨ عنوان داشبورد */
.rq-dashboard-title {
  font-size: 22px;
  text-align: center;
  font-weight: bold;
  text-shadow: 0 0 10px #2f80ed;
  animation: glow-title 4s infinite;
}
@keyframes glow-title {
  0% { color: #2f80ed; text-shadow: 0 0 10px #2f80ed; }
  50% { color: #ff9800; text-shadow: 0 0 14px #ff9800; }
  100% { color: #2f80ed; text-shadow: 0 0 10px #2f80ed; }
}

/* 👤 دکمه حساب کاربری ریلی */
.rq-account-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rq-account-btn {
  background-color: #2f80ed;
  color: #fff;
  padding: 10px 16px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 0 12px #2f80ed;
}

.rq-account-btn:hover {
  box-shadow: 0 0 20px #2f80ed;
}

.rq-account-panel {
  background: #fff;
  color: #333;
  padding: 15px;
  border-radius: 10px;
  margin-top: 10px;
  box-shadow: 0 0 12px rgba(255,255,255,0.3);
  transition: transform 0.3s ease;
}


/* 💳 دکمه خرید اشتراک با چشمک‌زن */
.rq-subscription-btn {
  background: linear-gradient(to right, #ffeb3b, #ffc107);
  color: #000;
  padding: 12px;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50px;
  border: none;
  width: 100%;
  margin-top: 30px;
  cursor: pointer;
  animation: blink 2s infinite;
}
@keyframes blink {
  0% { box-shadow: 0 0 12px #fff700; }
  50% { box-shadow: 0 0 20px #fff700; }
  100% { box-shadow: 0 0 12px #fff700; }
}

/* 📦 فرم خرید اشتراک */
.rq-subscription-panel {
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 0 12px #ffffff;
}

.rq-subscription-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rq-subscription-form label {
  font-weight: bold;
  color: #333;
}

.rq-subscription-form input,
.rq-subscription-form select,
.rq-subscription-form textarea {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #999;
  font-size: 14px;
}
.rq-subscription-panel.hidden {
  display: none;
}

.rq-subscription-panel.show {
  display: block;
}

#payBtn {
  background: linear-gradient(to right, #2f80ed, #448aff);
  color: #fff;
  padding: 12px;
  font-size: 16px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 14px #2f80ed;
  transition: transform 0.3s ease;
}

#payBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #448aff;
}

/* 📱 نسخه واکنش‌گرا مخصوص موبایل */
@media screen and (max-width: 480px) {
  .rq-dashboard-section {
    padding: 20px 14px;
  }

  .rq-dashboard-title {
    font-size: 18px;
  }

  .rq-subscription-btn {
    font-size: 15px;
  }

  #payBtn {
    font-size: 14px;
  }

  .rq-subscription-form input,
  .rq-subscription-form select,
  .rq-subscription-form textarea {
    font-size: 13px;
  }
}


















body, html {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow-y: auto;   /* فعال‌سازی اسکرول عمودی */
}



body {
  margin: 0;
  padding: 0;
  direction: rtl;
   background-color: #597598;
  background-image: url(./images/nghte.png);
}

/* هدر و تنظیمات آن */

/* دکمه hamburger (نمایش فقط در مدیاکوئری) */
.hamburger {
  font-size: 1.8rem;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  z-index: 999;
  color: black;
  text-shadow: 0 0 6px red;

}

@media (max-width: 768px) {
  .hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999; /* بالاتر از منو */
  }

  .menu {
    top: 0; /* چون همبرگر دیگه ثابت شده، منو از بالا شروع کن */
    height: 100vh;
  }
}





.menu {
  display: none;
  position: fixed;
  top: 80px;
  right: 0;
  width: 300px;
  height: calc(100vh - 80px);
  background-color: #fdfdfd; /* فقط رنگ، نه background کامل */
  backdrop-filter: blur(12px);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.5s ease, opacity 0.3s ease, background-color 0.1s ease;
  z-index: 100;
  border-left: 1px solid #e5e7eb;
  padding: 30px 20px;
  overflow-y: auto;
  animation: softColorFade 4s ease-in-out infinite;
}

/* حالت باز */
.menu.open {
  display: block;
  transform: translateX(0);
  opacity: 1;
}

/* لیست منو */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu ul li {
  margin-bottom: 16px;
}

/* لینک‌ها با افکت سه‌بعدی */
.menu ul li a {
  display: block;
  padding: 12px 20px;
  font-size: 16px;
  color: #ff0000;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: 12px;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.300), -4px -4px 10px rgba(255,255,255,0.6);
  text-decoration: none;
  transition: all 0.1s ease;
}

/* هاور و active با افکت رنگی و سایه */
.menu ul li a:hover,
.menu ul li a.active {
  background: linear-gradient(145deg, #3b82f6, #60a5fa);
  color: white;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
  transform: scale(1.03);
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 100;
  }
}
@keyframes softColorFade {
  0%   { background-color: #fdfdfd; }
  25%  { background-color: #aed8ff; }
  50%  { background-color: #ffdc89; }
  75%  { background-color: #61ff61; }
  100% { background-color: #ff9a9a; }
}






.menu.open {
  animation: slideInRight 0.5s ease forwards;
}
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}























/* مدیاکوئری برای صفحات کوچکتر */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  main {
    margin-right: 0;
  }
  /* در حالت موبایل، منو به‌طور پیش‌فرض پنهان است */
  .menu {
    transform: translateX(100%);
  }
  .menu.open {
    transform: translateX(0);
  }
}

/* استایل دکمه‌های داخل بخش‌ها */
.section .btn5 {
  margin: 5px 10px 5px 0;
  padding: 8px 15px;
  background-color: #da02da;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.section .btn5:hover {
  background-color: #0056b3;
}

/* استایل فرم‌ها */
form {
  max-width: 600px;
  background: #f1f3f5;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

form label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

form input[type="text"],
form input[type="number"],
form textarea {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 15px;
  border-radius: 6px;
  border: 1px solid #ffffff;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

form input[type="text"]:focus,
form input[type="number"]:focus,
form textarea:focus {
  border-color: #007bff;
  outline: none;
  background-color: #b0b0b0;
}

form button {
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

form button:hover {
  background-color: #0056b3;
}

.form-message {
  margin-top: 10px;
  font-weight: bold;
  min-height: 24px;
}

.form-message.success {
  color: #28a745;
}

.form-message.error {
  color: #dc3545;
}

/* استایل جدول لیست خودروها */
.car-table {
  width: 100%;
  margin-top: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ff0000;
  text-align: center;
  margin: 0 auto;
}
/* استایل سلول‌های جدول خودروها */
.car-table td {
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
  font-size: 1rem;
  border: 1px solid #c7c7c7;
  background-color: #646464;
  color: #c7c7c7;
}

.car-table th{
  background-color: #c7c7c7;
  color: #494949;
  border: 1px solid #ff0000;
}
/* استایل دکمه‌های جدول */
.table-btn {
  padding: 6px 12px;
  margin: 0 4px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
  transition: background-color 0.3s ease;
  font-size: 0.9rem;
}

.btn-edit {
  background-color: #ffc107;
}
.btn-edit:hover {
  background-color: #87e403;
}

.btn-delete {
  background-color: #ee071e;
}
.btn-delete:hover {
  background-color: #61010a;
}

.btn-toggle-details {
  background-color: #17a2b8;
}
.btn-toggle-details:hover {
  background-color: #19fff7;
}

/* ردیف جزئیات خودرو */
.car-details-row td {
  background-color: #ff0000;
  text-align: right;
  font-size: 0.95rem;
  padding: 15px 20px;
}

.car-details-content p,
.car-details-content h4 {
  margin: 4px 0;
}

/* لیست حسابرسی */
.audit-list {
  list-style: none;
  padding-right: 20px;
  margin-top: 5px;
}

/* استایل فیلد جستجو */
#searchInput {
  width: 100%;
  padding: 10px 15px;
  font-size: 1.1rem;
  border-radius: 8px;
  border: 1px solid #ced4da;
  margin-bottom: 15px;
  transition: border-color 0.3s ease;
}

#searchInput:focus {
  border-color: #007bff;
  outline: none;
  background-color: #e9f0fe;
}

/* واکنشگرایی */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
}
/* استایل منو (دسکتاپ) - اگر از کلاس‌های .menu و .sidebar به صورت یکسان استفاده می‌کنید */
.menu,
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 200px;
  height: 100vh;
  padding-top: 60px;
  z-index: 200;
  /* پیش‌فرض دسکتاپ: منو باز */
  transform: translateX(0);
}

/* حالت منوی باز در موبایل */
.menu.open,
.sidebar.open {
  transform: translateX(0);
}


/* --- پاسخ‌گرا (ریسپانسیو) --- */
@media screen and (max-width: 768px) {
  .hamburger {
    display: block;
  }
  /* در موبایل منو به‌طور پیش‌فرض بسته می‌شود */
  .menu,
  .sidebar {
    position: absolute;
    z-index: 1000;
    transform: translateX(-100%);
  }
  .menu.open,
  .sidebar.open {
    transform: translateX(0);
  }

  /* استایل بلاک‌های مربوط به خودرو */
  .car-card {
    padding: 10px;
    font-size: 14px;
  }

  .car-card button {
    width: 100%;
    margin: 5px 0;
  }

  .car-table {
    width: 100%;
    overflow-x: auto;
    display: block;
  }

  .car-table table {
    min-width: 600px;
    width: 100%;
    border:1px solid #ffffff;
  }

  .car-table th,
  .car-table td {
    padding: 10px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    border:1px solid #ff0000;
  }
}
/* فرم دوم حسابرسی در منو حسابرسی */
.accounting-summary {
  margin-top: 20px;
  padding: 15px;
  background-color: #e9ecef;
  border-radius: 8px;
}

.summary-buttons button {
  margin: 5px 10px 5px 0;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.summary-buttons button:hover {
  background-color: #0056b3;
}

.summary-result {
  margin-top: 15px;
  font-weight: bold;
  font-size: 18px;
  color: #ff00bf;
}

/* استایل متن پشتبان */
.poshtiban {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(90deg, #000000, #e02706, #09fe01);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
  transition: text-shadow 0.3s ease;
  text-align: center;
  margin: 20px auto;
}

.poshtiban:hover {
  text-shadow: 0 0 10px #00f2fe, 0 0 20px #ddff01;
}

@keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* بخش پشتیبانی */
#support {
  background: linear-gradient(to top right, #f0f2f5, #e3e6ea);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  max-width: 550px;
  margin: 40px auto;
  text-align: center;
}

#support h2 {
  font-family: 'Lalezar', 'Estedad', cursive;
  font-size: 28px;
  color: #222;
}

#support label,
#support input,
#support textarea,
#support .support-socials {
  font-family: 'ElMessiri', 'Vazirmatn', sans-serif;
  font-size: 16px;
  color: #333;
}

.support-form textarea {
  resize: none;
}

.support-socials {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 25px;
}

.support-socials a {
  font-size: 30px;
  color: #ff0202;
  transition: transform 0.3s, color 0.3s;
}

.support-socials a:hover {
  transform: scale(1.4);
  color: #007bff;
}

.support-socials a.call {
  font-size: 36px;
  color: #28a745;
}

/* واکنشگرایی بخش پشتیبانی */
@media screen and (max-width: 768px) {
  #support {
    width: 95%;
    padding: 20px;
  }
  .support-socials {
    flex-wrap: wrap;
    gap: 15px;
  }
}




/* استایل تلفن انیمیشنی */
.animated-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'ElMessiri', 'Vazirmatn', sans-serif;
  padding: 12px;
  background: linear-gradient(90deg, #e0e0e0, #ffffff);
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  animation: fadeInPhone 2s ease-out forwards;
  color: #f00808;
  font-size: 18px;
  margin-bottom: 10px;
  position: relative;
}

.animated-phone .number {
  color: #007bff;
  font-weight: bold;
  font-size: 20px;
  margin-top: 5px;
  animation: glowText 2s infinite alternate;
}

/* انیمیشن ظاهر شدن تلفن */
@keyframes fadeInPhone {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* انیمیشن درخشش شماره */
@keyframes glowText {
  0% {
    text-shadow: 0 0 5px #22fe05;
  }
  100% {
    text-shadow: 0 0 15px #ff430a, 0 0 25px #00f0ff;
  }
}

/* استایل منو: به صورت پیش‌فرض مخفی است */
.menu {
  display: none;
}

/* وقتی کلاس open به منو اضافه شود، نمایش داده می‌شود */
.menu.open {
  display: block;
}





.admin-container {
  max-width: 700px;
  margin: auto;
  padding: 20px;
}

.admin-panel {
  background: linear-gradient(135deg, #1e90ff, #0074d9);
  color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  margin-bottom: 25px;
  text-align: center;
}

.admin-panel input {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 0 0 1px #ccc;
}

.admin-panel input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.admin-panel button {
  background: #fff;
  color: #0074d9;
  border: none;
  padding: 12px 0;
  border-radius: 8px;
  width: 100%;
  font-weight: bold;
  font-size: 16px;
  transition: 0.3s;
}

.admin-panel button:hover {
  background: #fffa;
  color: #fff;
  border: 1px solid white;
}

.lock-icon {
  font-size: 26px;
  margin-bottom: 8px;
  display: block;
  color: #fff;
}

.admin-header h2 {
  margin-top: 0;
}

.admin-user-list h3 {
  text-align: center;
  margin-bottom: 10px;
}

.table-scroll {
  overflow-x: auto;
}

.car-table {
  width: 100%;
  font-size: 14px;
color:#ffa703;
  text-align: center;
}

.car-table th, .car-table td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: center;
}

.car-table thead {
  background: #f5f5f5;
}

@media (max-width: 480px) {
  .admin-panel, .admin-user-list {
    padding: 15px;
    box-shadow: none;
  }

  .admin-panel input, .admin-panel button {
    font-size: 15px;
  }

  .car-table th, .car-table td {
    font-size: 12px;
    padding: 6px;
  }
}























/* ریلی باز/بسته شونده */
.subscription-box {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, padding 0.3s ease;
  padding: 0;
  opacity: 0;
}

.subscription-box.show {
  max-height: 1200px; /* یا هر مقداری بسته به ارتفاع فرم */
  padding: 20px 15px;
  opacity: 1;
}

/* عنوان قابل کلیک با افکت هاور */
#subscriptionToggle {
  cursor: pointer;
  background: linear-gradient(135deg, #0074d9, #00bfff);
  color: white;
  padding: 12px;
  border-radius: 10px;
  font-size: 16px;
  transition: background 0.3s ease;
  text-align: center;
}

#subscriptionToggle:hover {
  background: linear-gradient(135deg, #005ca5, #008cd0);
}

/* فرم داخل باکس */
#subscriptionForm {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  display: grid;
  gap: 12px;
}

#subscriptionForm label {
  font-weight: bold;
  margin-bottom: 4px;
  color: #333;
}

#subscriptionForm input,
#subscriptionForm select,
#subscriptionForm textarea {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  font-size: 15px;
  width: 100%;
}

#subscriptionForm input:focus,
#subscriptionForm textarea:focus,
#subscriptionForm select:focus {
  outline: none;
  border-color: #0074d9;
  box-shadow: 0 0 0 2px #cce6ff;
}

/* موبایل دوستانه */
@media (max-width: 480px) {
  #subscriptionForm {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  #subscriptionToggle {
    font-size: 15px;
    padding: 10px;
  }

  #payBtn {
    font-size: 14px;
  }
}
.subscription-toggle-title {
  cursor: pointer;
  background: linear-gradient(135deg, #0074d9, #00bfff);
  color: white;
  padding: 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  transition: background 0.3s ease;
}

.subscription-toggle-title:hover {
  background: linear-gradient(135deg, #005ca5, #008cd0);
}

.arrow-left, .arrow-right {
  font-weight: bold;
  margin: 0 8px;
  color: #fff700;
  animation: blinkArrow 1s infinite alternate;
}

@keyframes blinkArrow {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.2); }
}

.subscription-box {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, padding 0.3s ease, opacity 0.3s ease;
  padding: 0;
  opacity: 0;
}

.subscription-box.show {
  max-height: 1400px;
  padding: 15px;
  opacity: 1;
}








/*زیبا سازیپشتیبانی متن */
@keyframes fadeIn {
  0% {opacity: 0; transform: translateY(20px);}
  100% {opacity: 1; transform: translateY(0);}
}

.seo-car-expert h2, .seo-car-expert h3 {
  transition: color 0.3s ease;
}

.seo-car-expert h2:hover, .seo-car-expert h3:hover {
  color: #22d3ee;
}

.seo-car-expert p:hover {
  background-color: #e0f2fe;
  padding: 10px;
  border-radius: 8px;
  transition: 0.3s ease;
}











/*جدول لیست کارشناسی ها */










































/* سکشن اصلی */
.rq-section {
  margin: 20px auto;
  padding: 15px;
  max-width: 1100px;
  background: linear-gradient(135deg, #f9f9f9, #f1faff);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  position: relative;
}

.rq-section-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
  text-shadow: 0 0 8px rgba(0,0,0,0.1);
}

/* جدول */
.rq-table {
  width: 100%;
  border-collapse: collapse;
  background: #aeced8;
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.95rem;
}

.rq-table thead {
  background: linear-gradient(180deg,#597598,#aeced8);
  color: #fff;
}

.rq-table th, .rq-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.rq-table tr:hover {
  background: rgba(33,150,243,0.08);
  transition: background 0.3s ease;
}

/* ستون‌ها */
.rq-table th {
  font-weight: bold;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}
.rq-table td {
  color: #444;
}

/* دکمه‌های جدول */
.rq-claim-btn {
  background: linear-gradient(45deg, #4caf50, #66bb6a);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(76,175,80,0.5);
  transition: transform 0.2s ease;
}
.rq-claim-btn:hover {
  transform: scale(1.05);
}

.rq-unclaim-btn {
  background: linear-gradient(45deg, #f44336, #e57373);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(244,67,54,0.5);
  transition: transform 0.2s ease;
}
.rq-unclaim-btn:hover {
  transform: scale(1.05);
}

.rq-claimed {
  color: #555;
  font-weight: bold;
}

/* لایه شیشه‌ای */
.glass-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.glass-message {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 16px;
  padding: 25px;
  text-align: center;
  color: #fff;
  max-width: 380px;
  animation: fadeIn 0.8s ease;
}

/* متن چشمک‌زن */
.blink-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffeb3b;
  text-shadow: 0 0 10px #ff5722, 0 0 15px #ff9800;
  animation: blinkAnim 1.2s infinite;
  margin-bottom: 18px;
}

@keyframes blinkAnim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* دکمه راهنما */
.guide-btn {
  margin-top: 10px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(45deg, #4cafef, #2196f3);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 0 12px rgba(33,150,243,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.guide-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(33,150,243,0.8);
}

/* مودال راهنما */
#helpModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#helpModal .modal-content {
  background: #fff;
  border-radius: 16px;
  padding: 25px;
  max-width: 420px;
  text-align: center;
  animation: slideDown 0.5s ease;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

#helpModal .modal-content h3 {
  margin-bottom: 12px;
  color: #333;
}

#helpModal .modal-content p {
  font-size: 1rem;
  color: #444;
  line-height: 1.7;
}

#helpModal .close-btn {
  margin-top: 18px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: #f44336;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s ease;
}
#helpModal .close-btn:hover {
  background: #d32f2f;
  transform: scale(1.05);
}

/* انیمیشن‌ها */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ریسپانسیو موبایل */
@media (max-width: 768px) {
  .rq-section {
    padding: 10px;
  }
  .rq-table th, .rq-table td {
    padding: 8px;
    font-size: 0.85rem;
  }
  .glass-message {
    max-width: 90%;
    padding: 15px;
  }
  #helpModal .modal-content {
    max-width: 90%;
    padding: 15px;
  }
}









/* مودال شیشه‌ای */
.glass-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.glass-modal .modal-content {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 16px;
  padding: 25px;
  max-width: 420px;
  text-align: center;
  color: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

/* پیام‌های رزرو */
.toast-message {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(33,150,243,0.95);
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(33,150,243,0.35);
  animation: fadeInOut 4s forwards;
  z-index: 10000;
}

.emoji {
  font-size: 1.6em;  /* لپ‌تاپ بزرگ‌تر */
  vertical-align: middle;
}

@media (max-width: 768px) {
  .emoji {
    font-size: 1.2em; /* موبایل متناسب‌تر */
  }
}

@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(20px); }
  10%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(20px); }
}