/* ==========================================================================
   1. Font Definitions
   ========================================================================== */
@font-face {
  font-family: "Yekan Bakh";
  src: url("../Font/webfonts/woff/YekanBakh-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../Font/webfonts/woff/YekanBakh-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../Font/webfonts/woff/YekanBakh-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

/* ==========================================================================
   2. Global Styles & Resets
   ========================================================================== */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
button,
input,
select,
textarea,
table,
th,
td,
label {
  font-family: "Yekan Bakh", Tahoma, Arial, sans-serif !important;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

/* ==========================================================================
   3. Placeholder Styles (All Elements)
   ========================================================================== */
input::placeholder,
textarea::placeholder,
select::placeholder,
[contenteditable]::placeholder {
  font-family: "Yekan Bakh", Tahoma, Arial, sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  color: #888;
  opacity: 1;
}

/* For browser-specific pseudo-elements */
::-webkit-input-placeholder {
  font-family: "Yekan Bakh", Tahoma, Arial, sans-serif !important;
  font-weight: 400;
  color: #888;
}
:-moz-placeholder {
  font-family: "Yekan Bakh", Tahoma, Arial, sans-serif !important;
  font-weight: 400;
  color: #888;
}
::-moz-placeholder {
  font-family: "Yekan Bakh", Tahoma, Arial, sans-serif !important;
  font-weight: 400;
  color: #888;
}
:-ms-input-placeholder {
  font-family: "Yekan Bakh", Tahoma, Arial, sans-serif !important;
  font-weight: 400;
  color: #888;
}

/* ==========================================================================
   3. استایل کامپوننت‌ها (Component Styles)
   ========================================================================== */

/* استایل‌های نویگیشن و سایدبار */
.nav-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.sidebar-link:hover .nav-icon {
  transform: scale(1.2);
}

.close-btn {
  transition: all 0.3s ease;
}

.close-btn:hover {
  transform: rotate(90deg);
}

/* استایل کارت‌های انتخاب (آزمون) */
.choice-card {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.choice-card:hover {
  transform: translateY(-2px);
  border-color: #ef4444;
}

.choice-card.selected {
  background-color: #ef4444;
  color: white;
  border-color: #ef4444;
  box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.3);
}

.choice-card.selected .choice-icon {
  color: white;
}

/* استایل دکمه‌های لایک/دیسلایک */
.choice-btn {
  transition: all 0.2s ease-in-out;
  color: #6b7280; /* gray-500 */
  cursor: pointer;
}

.choice-btn:hover {
  transform: scale(1.1);
}

.choice-btn.like.selected {
  color: #22c55e; /* green-500 */
}

.choice-btn.dislike.selected {
  color: #ef4444; /* red-500 */
}

.choice-btn.disabled {
  color: #374151; /* gray-700 */
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   4. انیمیشن‌ها و ترنزیشن‌ها (Animations & Transitions)
   ========================================================================== */

/* انیمیشن محو شدن و ورود */
.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

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

/* ترنزیشن نوار پیشرفت */
.progress-bar {
  transition: width 0.4s ease;
}

/* انیمیشن آیکون لودینگ (اسپینر) */
.spinner {
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

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