/* base.css — merged global + utilities (single request) */

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: "IranSansX", "Samim", sans-serif;
}

.num-fa {
  -webkit-font-feature-settings: "ss02", "ss03";
  -moz-font-feature-settings: "ss02", "ss03";
  font-feature-settings: "ss02", "ss03";

  /* برای اطمینان از اینکه اعداد در کل مرورگرها چپ به راست و مرتب بمانند */
  direction: ltr;
  display: inline-block;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

a,
button {
  cursor: pointer;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* width */
::-webkit-scrollbar {
  width: 6px;
  height: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: #d1d5db;
  border-radius: 1rem;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: #374151;
  border-radius: 1rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #1f2937;
}

/* @font-face {
  font-family: "Samim";
  src: url("../assets/fonts/Samim/Samim-Bold-FD.woff2") format("woff2"),
    url("../assets/fonts/Samim/Samim-Bold-FD.woff") format("woff"),
    url("../assets/fonts/Samim/Samim-Bold-FD.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Samim";
  src: url("../assets/fonts/Samim/Samim-Medium-FD.woff2") format("woff2"),
    url("../assets/fonts/Samim/Samim-Medium-FD.woff") format("woff"),
    url("../assets/fonts/Samim/Samim-Medium-FD.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Samim";
  src: url("../assets/fonts/Samim/Samim-FD.woff2") format("woff2"),
    url("../assets/fonts/Samim/Samim-FD.woff") format("woff"),
    url("../assets/fonts/Samim/Samim-FD.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
} */

/* ۱. وزن معمولی برای متون بدنه، بیوگرافی و توضیحات */
@font-face {
  font-family: "Dana";
  src: url("../assets/fonts/Dana/woff2/Dana-Regular.woff2") format("woff2"),
    url("../assets/fonts/Dana/woff/Dana-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ۲. وزن متوسط برای دکمه‌ها، منوها و اطلاعات فرعی کارت‌ها */
@font-face {
  font-family: "Dana";
  src: url("../assets/fonts/Dana/woff2/Dana-Medium.woff2") format("woff2"),
    url("../assets/fonts/Dana/woff/Dana-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ۳. وزن نیمه‌ضخیم برای عناوین فرعی و تاکیدها */
@font-face {
  font-family: "Dana";
  src: url("../assets/fonts/Dana/woff2/Dana-DemiBold.woff2") format("woff2"),
    url("../assets/fonts/Dana/woff/Dana-DemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ۴. وزن ضخیم برای هدینگ‌ها و بخش‌های برجسته */
@font-face {
  font-family: "Dana";
  src: url("../assets/fonts/Dana/woff2/Dana-Bold.woff2") format("woff2"),
    url("../assets/fonts/Dana/woff/Dana-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ۵. وزن فوق‌ضخیم (جایگزین احتمالی یا پشتیبان برای عنوان رسمی) */
@font-face {
  font-family: "Dana";
  src: url("../assets/fonts/Dana/woff2/Dana-Black.woff2") format("woff2"),
    url("../assets/fonts/Dana/woff/Dana-Black.woff") format("woff");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

/* تعریف فونت آریا در پس‌زمینه */
@font-face {
  font-family: "AriaWeb";
  src: url("../assets/fonts/Aria/woff2/AriaWeb-SemiBold.woff2") format("woff2"),
    url("../assets/fonts/Aria/woff/AriaWeb-SemiBold.woff") format("woff");
  font-weight: 700;
  /* معادل Black */
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: "IranSansX";
  src: url("../assets/fonts/IranSansX/Woff2/IRANSansXFaNum-Medium.woff2") format("woff2"),
    url("../assets/fonts/IranSansX/Woff/IRANSansXFaNum-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "IranSansX";
  src: url("../assets/fonts/IranSansX/Woff2/IRANSansXFaNum-Bold.woff2") format("woff2"),
    url("../assets/fonts/IranSansX/Woff/IRANSansXFaNum-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* کلاس انتزاعی برای عناوین رسمی و نام وکلا */
.font-official {
  font-family: "AriaWeb", sans-serif !important;
}


:root {
  --timing-func: 150ms ease-out;
}

.wrapper {
  padding: 0 0.5rem;
  margin: 0 auto;
}

/* button styles */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--web-radius, 0.375rem);
  transition: color 150ms ease-out, background-color 150ms ease-out;
}

.btn>* {
  pointer-events: none;
}

.btn-square,
.btn-circle {
  gap: 0;
  padding: 0;
  width: 3rem;
  border-radius: var(--web-radius, 0.375rem);
  aspect-ratio: 1;
}

.btn-circle {
  border-radius: 50%;
}

/*
 * Web button system — one radius, one mild hover, no scale/shadow noise.
 * Use on interactive controls (buttons, chips, modal items, CTAs).
 */
:root {
  --web-radius: 0.375rem;
}

.web-radius {
  border-radius: var(--web-radius);
}

.web-btn {
  border-radius: var(--web-radius);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.web-btn:hover {
  background-color: rgba(241, 245, 249, 0.35);
  border-color: rgb(226 232 240);
}

.web-btn-item {
  border-radius: var(--web-radius);
  transition: background-color 150ms ease;
}

.web-btn-item:hover {
  background-color: rgb(241 245 249);
}

.web-btn-item-accent {
  border-radius: var(--web-radius);
  background-color: rgb(239 246 255);
  color: rgb(29 78 216);
  transition: background-color 150ms ease;
}

.web-btn-item-accent:hover {
  background-color: rgb(219 234 254);
}

.web-btn-solid {
  border-radius: var(--web-radius);
  transition: filter 150ms ease;
}

.web-btn-solid:hover {
  filter: brightness(0.97);
}

.web-btn-solid:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  filter: none;
}

.comment-step-dot {
  border-color: rgb(226 232 240);
  color: rgb(148 163 184);
  background: white;
}

.comment-step-label {
  color: rgb(148 163 184);
}

.comment-step.is-active .comment-step-dot {
  border-color: rgb(37 99 235);
  background: rgb(37 99 235);
  color: white;
}

.comment-step.is-active .comment-step-label {
  color: rgb(30 64 175);
}

.comment-step.is-done .comment-step-dot {
  border-color: rgb(16 185 129);
  background: rgb(236 253 245);
  color: rgb(5 150 105);
}

.comment-step.is-done .comment-step-label {
  color: rgb(4 120 87);
}

/* input styles */
.input {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  outline: none;
  width: 100%;
}

.input:focus {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.input::-webkit-outer-spin-button,
.input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.select-wrapper {
  position: relative;
}

.select-wrapper>i {
  position: absolute;
  pointer-events: none;
  color: #9ca3af;
  /* tailwind gray-400 */
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.select-wrapper:has(i)::after {
  display: none;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  width: 0.5rem !important;
  aspect-ratio: 1;
  border: 2px solid #9ca3af;
  /* tailwind gray-400 */
  border-top: 0;
  border-left: 0;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

select.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

textarea.input {
  resize: none;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Hide scrollbar while keeping scroll */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* modal styles */
.modal {
  position: fixed;
  z-index: 20;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

@media (min-width: 640px) {
  .modal {
    align-items: center;
  }
}

.modal-content {
  background-color: white;
  max-height: min(85dvh, 85vh);
  overflow: hidden;
  width: min(550px, 100%);
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transform: scale(0);
  transform-origin: bottom center;
  transition: transform 150ms ease-out;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .modal-content {
    width: min(550px, 90%);
    border-radius: 1rem;
    transform-origin: center;
  }
}

.modal[data-position="from-right"] .modal-content {
  position: absolute;
  right: 0;
  top: 0;
  max-height: unset;
  height: 100%;
  width: min(400px, 90%);
  border-radius: 0;
  transform: translateX(100%);
}

.modal.visible {
  opacity: 1;
  pointer-events: all;
}

.modal.visible .modal-content {
  transform: scale(1);
}

.modal.visible[data-position="from-right"] .modal-content {
  transform: translateX(0);
}

/* toastify */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 1rem;
  max-width: 400px;
  line-height: 1.8;
}

.toast-error {
  background: #dc2626;
  color: white;
}

.toast-success {
  background: #10b981;
  color: white;
}

.toast-close {
  margin-right: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* alert styles */
.alert {
  padding: 1rem;
  border: 2px solid;
  border-radius: 0.75rem;
}

.alert-red {
  background-color: #fef2f2;
  /* tailwind red-50 color */
  color: #dc2626;
  /* tailwind red-600 color */
}

.alert-green {
  background-color: #ecfdf5;
  /* tailwind emerald-50 color */
  color: #059669;
  /* tailwind emerald-600 color */
}

.alert-yellow {
  background-color: #fefce8;
  /* tailwind yellow-50 color */
  color: #eab308;
  /* tailwind yellow-500 color */
}

/* table styles */
.table-container {
  overflow-x: auto !important;
  max-width: 100%;
  border-radius: 0.5rem;
}

.table {
  background-color: white;
  border-collapse: collapse;
  width: 100%;
}

.table caption {
  text-align: right;
  padding-bottom: 2rem;
}

.table th,
.table td {
  padding: 1rem;
  text-align: right;
  white-space: nowrap;
}

.table th {
  font-weight: normal;
  background-color: #1e3a8a;
  /* tailwind blue-900 color */
  color: white;
}

.table tr:nth-child(odd) td {
  background-color: #f3f4f6;
  /* tailwind gray-100 color */
}

.table tr:nth-child(even) td {
  background-color: #f9fafb;
  /* tailwind gray-50 color */
}

/* on mobile screen */
@media screen and (width < 768px) {
  .table th {
    display: none;
  }

  .table td {
    display: block;
  }

  .table td::before {
    content: attr(data-cell) ": ";
    font-weight: bold;
  }

  .table td:has(> img)::before {
    content: "";
  }

  .table td:first-child {
    padding-top: 2rem;
  }

  .table td:last-child {
    padding-bottom: 2rem;
  }

  .table td[data-cell="عملیات"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

/* sm breakpoint */
@media (width > 640px) {}

/* md breakpoint */
@media (width > 768px) {
  .wrapper {
    width: 750px;
  }

  #panel-sidebar {
    inset: unset;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    border-radius: 0.75rem;
    width: 300px;
    transform: translateX(0);
    pointer-events: all;
  }
}

/* lg breakpoint */
@media (width > 1024px) {
  .wrapper {
    width: 975px;
  }
}

/* xl breakpoint */
@media (width > 1280px) {
  .wrapper {
    width: 1150px;
  }
}

@keyframes ring {

  0%,
  10% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(15deg);
  }

  20% {
    transform: rotate(-15deg);
  }

  25% {
    transform: rotate(15deg);
  }

  30% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.ring-animation {
  animation: ring 6s infinite;
}

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

.icon-spin {
  animation: icon-spin 1s linear infinite;
}