/* index.css - Styles for Whale Hunter Dashboard */

/* Global Reset and Box-Sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* CSS Variables */
:root {
  --spacing-unit: 8px;
  --icon-size: 28px;
  --text-color: #e6eef8;
  --icon-color: #8bb9fe;
  --value-up: #00ff95;
  --value-down: #ff4d4d;
  --background-dark: #0b1a31;
  --background-light: #091629;
  --border-color: rgba(255, 255, 255, 0.1);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* HTML and Body for preventing horizontal scroll */
html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative; /* اضافه: برای کنترل بهتر layout */
  scroll-behavior: smooth; /* اضافه: برای UX بهتر */
}

body {
  background: var(--background-dark);
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100vw;
  position: relative; /* اضافه: برای fixed positioning هنگام فوکوس */
}

/* کلاس برای ثابت کردن layout هنگام فوکوس input */
body.input-focused {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: auto; /* اجازه scroll عمودی */
}

/* پشتیبانی از safe-area در iOS */
@supports (padding: max(0px)) {
  body.input-focused {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Header */
.header {
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--spacing-unit) 0 calc(var(--spacing-unit) * 6);
  position: relative;
  width: 100%;
}

.site-logo {
  width: 70px;
  height: auto;
  position: absolute;
  left: 50%;
  top: calc(var(--spacing-unit) * 2);
  transform: translateX(-50%);
}

/* Buttons */
.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: calc(var(--spacing-unit) * 2);
  width: var(--icon-size);
  height: var(--icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.icon-button img {
  width: 100%;
  height: 100%;
}

.icon-button:hover {
  transform: scale(1.1);
}

.icon-button:focus {
  outline: 2px solid var(--icon-color);
  outline-offset: 2px;
}

#star-button {
  left: calc(var(--spacing-unit) * 2);
}

#account-button {
  right: calc(var(--spacing-unit) * 2);
}

/* Search Container */
.grid {
  height: 800px;
  width: 100%; /* تغییر: عرض کامل برای جلوگیری از سرریز */
  max-width: 100vw; /* اضافه: محدود کردن عرض */
  background-color: var(--background-dark);
  position: absolute;
  z-index: -1;
  left: 50%; /* اضافه: وسط‌چین کردن */
  transform: translateX(-50%); /* اضافه: وسط‌چین کردن */
}

.white,
.border,
.darkBorderBg,
.glow {
  max-height: 61px;
  max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  border-radius: 12px;
  left: 50%; /* اضافه: وسط‌چین کردن */
  transform: translateX(-50%); /* اضافه: وسط‌چین کردن */
}

.input {
  background-color: #010201;
  border: none;
  width: 100%;
  max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
  height: 56px;
  border-radius: 10px;
  color: white;
  padding: 0 clamp(40px, 12vw, 50px);
  font-size: 16px; /* تغییر: حداقل 16px برای جلوگیری از زوم */
  position: relative;
  -webkit-appearance: none; /* اضافه: حذف استایل‌های native */
  outline: none; /* اضافه: حذف outline پیش‌فرض */
  touch-action: manipulation; /* اضافه: بهبود رفتار لمسی */
}

#poda {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(var(--spacing-unit) * 2) auto;
  max-width: 95%;
  width: 100%;
  position: relative;
}

.input::placeholder {
  color: #c0b9c0;
}

.input:focus {
  outline: none;
  z-index: 10; /* اضافه: بالای المان‌های دیگر */
}

#main:focus-within > #input-mask {
  display: none;
}

#main:hover > #pink-mask {
  opacity: 0;
}

.white {
  max-height: 61px;
  max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
  border-radius: 10px;
  filter: blur(1.5px);
}

.white::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(83deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.4);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0) 0%,
    #a099d8,
    rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0) 50%,
    #dfa2da,
    rgba(0, 0, 0, 0) 58%
  );
  transition: all 1.5s;
}

.border {
  max-height: 61px;
  max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
  border-radius: 11px;
  filter: blur(0.5px);
}

.border::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(70deg);
  position: absolute;
  width: 600px;
  height: 600px;
  filter: brightness(1.3);
  background-image: conic-gradient(
    #1c191c,
    #402fb5 5%,
    #1c191c 14%,
    #1c191c 50%,
    #cf30aa 60%,
    #1c191c 64%
  );
  transition: all 1.5s;
}

.darkBorderBg {
  max-height: 61px;
  max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
}

.darkBorderBg::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(82deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #18116a,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0) 50%,
    #6e1b60,
    rgba(0, 0, 0, 0) 60%
  );
  transition: all 1.5s;
}

#poda:hover > .darkBorderBg::before {
  transform: translate(-50%, -50%) rotate(-98deg);
}

#poda:hover > .glow::before {
  transform: translate(-50%, -50%) rotate(-120deg);
}

#poda:hover > .white::before {
  transform: translate(-50%, -50%) rotate(-97deg);
}

#poda:hover > .border::before {
  transform: translate(-50%, -50%) rotate(-110deg);
}

#poda:focus-within > .darkBorderBg::before {
  transform: translate(-50%, -50%) rotate(442deg);
  transition: all 3s;
}

#poda:focus-within > .glow::before {
  transform: translate(-50%, -50%) rotate(420deg);
  transition: all 3s;
}

#poda:focus-within > .white::before {
  transform: translate(-50%, -50%) rotate(443deg);
  transition: all 3s;
}

#poda:focus-within > .border::before {
  transform: translate(-50%, -50%) rotate(430deg);
  transition: all 3s;
}

.glow {
  overflow: hidden;
  filter: blur(15px);
  opacity: 0.4;
  max-height: 61px;
  max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
}

.glow:before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    #000,
    #402fb5 5%,
    #000 38%,
    #000 50%,
    #cf30aa 60%,
    #000 87%
  );
  transition: all 1.5s;
}

@keyframes rotate {
  100% {
    transform: translate(-50%, -50%) rotate(450deg);
  }
}

/* Glow effect same width as input, 5px taller */
#main::before {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 0;
  right: 0;
  bottom: -2.5px;
  background: radial-gradient(circle, rgba(207, 48, 170, 0.3) 0%, transparent 70%);
  filter: blur(10px);
  z-index: -2;
  border-radius: 12px;
}

/* Search and Save Wallet Icons */
.search-icon,
.tool-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(20px, 5vw, 24px);
  height: clamp(20px, 5vw, 24px);
  z-index: 1;
  background: transparent;
  border: none;
  cursor: pointer;
}

.search-icon {
  left: clamp(10px, 3vw, 12px);
}

.tool-icon {
  right: clamp(10px, 3vw, 12px);
}

.tool-icon input {
  display: none;
}

.tool-icon svg {
  width: 100%;
  height: 100%;
}

.tool-icon input:checked + svg {
  fill: gold;
}

.tool-icon:focus-within {
  outline: 2px solid var(--icon-color);
  outline-offset: 2px;
}

/* Chart Toolbar */
.chart-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--spacing-unit);
  padding: 0 calc(var(--spacing-unit) * 2);
}

.chart-selector {
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  min-width: 150px;
  position: relative;
}

.chart-selector select {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 0.95rem;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
}

.chart-selector select:focus {
  outline: none;
}

.chart-selector::after {
  content: "";
  width: 10px;
  height: 10px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 10l5 5 5-5z"/></svg>') center/contain no-repeat;
  background: rgba(230, 238, 248, 0.9);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Chart Container */
.pnl-chart-container {
  max-width: 90%;
  margin: 0 auto;
  padding: var(--spacing-unit);
}

.chart-container {
  background: var(--background-light);
  border-radius: 12px;
  padding: calc(var(--spacing-unit) * 2);
  box-shadow: var(--shadow);
}

.chart-error {
  color: var(--value-down);
  text-align: center;
  margin-top: var(--spacing-unit);
  font-size: 0.9rem;
}

/* PNL Stats */
.pnl-stats-container {
  max-width: 90%;
  margin: 0 auto;
  padding: var(--spacing-unit);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pnl-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 300px;
  padding: calc(var(--spacing-unit) * 1.5);
  border-radius: 28px;
  background: #111623;
  box-shadow: inset 18px 18px 9px #07090e, inset -18px -18px 9px #1b2338;
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.pnl-total .pnl-label {
  font-size: 1rem;
  color: #ccc;
}

.pnl-total .pnl-value {
  font-size: 1.2rem;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.5px;
}

.pnl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-unit);
  margin-bottom: var(--spacing-unit);
  width: 100%;
}

.pnl-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(var(--spacing-unit) * 0.75);
  min-height: 60px;
  border-radius: 8px;
  background: #111623;
  box-shadow: inset 18px 18px 9px #07090e, inset -18px -18px 9px #1b2338;
}

.pnl-label {
  font-weight: 500;
  color: #ccc;
  margin-bottom: 4px;
  font-size: 0.8rem;
}

.pnl-value {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--value-up);
  position: relative;
  display: inline-block;
  transition: transform 0.5s ease, opacity 0.5s ease;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.5px;
}

.pnl-value.value-up {
  color: var(--value-up);
}

.pnl-value.value-down {
  color: var(--value-down);
}

.pnl-value.slide-up {
  animation: slideUp 0.5s ease forwards;
}

.pnl-value.slide-down {
  animation: slideDown 0.5s ease forwards;
}

/* Assets */
.assets-container {
  max-width: 90%;
  margin: 0 auto;
  padding: var(--spacing-unit);
}

.assets-container h2 {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-unit);
}

.assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-unit);
}

.asset-item {
  border-radius: 14px;
  background: linear-gradient(145deg, #091629, #0b1a31);
  box-shadow: 20px 20px 40px #040a13, -20px -20px 40px #102649;
  padding: calc(var(--spacing-unit) * 1.5);
  margin: var(--spacing-unit) 0;
  color: var(--text-color);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.asset-item.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInAsset 0.5s ease forwards;
}

.asset-name {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: var(--spacing-unit);
  text-align: left;
}

.asset-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
}

.asset-details p {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-size: 0.85rem;
  color: #999;
}

.asset-details p::before {
  content: attr(data-label);
  font-size: 0.8rem;
  font-weight: 500;
  color: #aaa;
  margin-bottom: 3px;
}

.asset-details p span {
  font-size: 0.95rem;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.5px;
}

.asset-details p span.value-up {
  color: var(--value-up);
}

.asset-details p span.value-down {
  color: var(--value-down);
}

.side-long {
  color: var(--value-up);
}

.side-short {
  color: var(--value-down);
}

/* Modals */
.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 70%);
  border-radius: 16px;
  padding: calc(var(--spacing-unit) * 2);
  max-width: 90%;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 2px solid var(--border-color);
  text-align: center;
  position: relative;
  animation: slideIn 0.3s ease;
}

.modal-content h2 {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-unit);
}

.modal-content p {
  font-size: 0.9rem;
  margin-bottom: var(--spacing-unit);
}

.close {
  position: absolute;
  top: var(--spacing-unit);
  right: var(--spacing-unit);
  color: var(--text-color);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close:hover {
  color: var(--icon-color);
}

.close:focus {
  outline: 2px solid var(--icon-color);
  outline-offset: 2px;
}

#saved-wallets-list {
  list-style: none;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}

.wallet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-unit);
  border-bottom: 1px solid var(--border-color);
}

.wallet-item:last-child {
  border-bottom: none;
}

.wallet-item span {
  font-size: 0.9rem;
  color: var(--text-color);
}

.select-wallet,
.delete-wallet {
  background: var(--background-light);
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--text-color);
  font-size: 0.85rem;
  cursor: pointer;
  margin-left: 8px;
  transition: background-color 0.2s ease;
}

.select-wallet:hover,
.delete-wallet:hover {
  background: var(--icon-color);
  color: var(--background-dark);
}

.select-wallet:focus,
.delete-wallet:focus {
  outline: 2px solid var(--icon-color);
  outline-offset: 2px;
}

.delete-wallet {
  background: var(--value-down);
}

/* Toast Notifications */
.miniapp-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 8px;
  color: var(--text-color);
  font-size: 0.9rem;
  z-index: 1002;
  animation: slideUp 0.3s ease;
}

.miniapp-toast.success {
  background: var(--value-up);
}

.miniapp-toast.error {
  background: var(--value-down);
}

.miniapp-toast.warning {
  background: #ffa500;
}

/* Backdrop */
.backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* Logout Button */
#logout-button {
  background: var(--value-down);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--text-color);
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: var(--spacing-unit);
  transition: background-color 0.2s ease;
}

#logout-button:hover {
  background: #cc0000;
}

#logout-button:focus {
  outline: 2px solid var(--icon-color);
  outline-offset: 2px;
}

/* Media Queries */
@media (max-width: 600px) {
  :root {
    --icon-size: 24px;
  }

  .header,
  .pnl-stats-container,
  .assets-container,
  .pnl-chart-container {
    max-width: 100%;
    min-width: 300px;
  }

  #poda {
    max-width: 90%;
    margin: calc(var(--spacing-unit) * 2) auto;
    padding: 0 calc(var(--spacing-unit) * 0.5);
  }

  .input {
    width: 100%;
    max-width: none;
    height: clamp(48px, 8vh, 56px);
    font-size: 16px; /* تغییر: حداقل 16px برای جلوگیری از زوم */
    padding: 0 clamp(36px, 10vw, 40px);
    border-radius: 12px;
    -webkit-appearance: none; /* اضافه: حذف استایل‌های native */
    touch-action: manipulation; /* اضافه: بهبود رفتار لمسی */
  }

  #main::before {
    top: -2.5px;
    left: 0;
    right: 0;
    bottom: -2.5px;
  }

  .search-icon,
  .tool-icon {
    width: clamp(18px, 4.5vw, 20px);
    height: clamp(18px, 4.5vw, 20px);
  }

  .search-icon {
    left: calc(var(--spacing-unit) * 2);
  }

  .tool-icon {
    right: calc(var(--spacing-unit) * 2);
  }

  .white,
  .border,
  .darkBorderBg,
  .glow {
    max-height: clamp(53px, 10vh, 61px);
    max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
    border-radius: 12px;
    filter: blur(1px);
    left: 50%; /* اضافه: وسط‌چین کردن */
    transform: translateX(-50%); /* اضافه: وسط‌چین کردن */
  }

  .white {
    max-height: clamp(53px, 9vh, 61px);
    max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
  }

  .border {
    max-height: clamp(53px, 8vh, 61px);
    max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
  }

  .darkBorderBg {
    max-height: clamp(53px, 9vh, 61px);
    max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
  }

  .glow {
    max-height: clamp(53px, 10vh, 61px);
    max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
    filter: blur(10px);
  }

  .pnl-stats-container {
    padding: calc(var(--spacing-unit) * 0.5);
  }

  .pnl-total {
    width: 100%;
    max-width: 300px;
    padding: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 2);
    border-radius: 28px;
    background: #111623;
    box-shadow: inset 18px 18px 9px #07090e, inset -18px -18px 9px #1b2338;
  }

  .pnl-total .pnl-label {
    font-size: 0.9rem;
  }

  .pnl-total .pnl-value {
    font-size: 1.1rem;
  }

  .pnl-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-unit) * 0.5);
  }

  .pnl-item {
    padding: calc(var(--spacing-unit) * 0.5);
    min-height: 60px;
    border-radius: 8px;
    background: #111623;
    box-shadow: inset 18px 18px 9px #07090e, inset -18px -18px 9px #1b2338;
  }

  .pnl-label {
    font-size: 0.7rem;
  }

  .pnl-value {
    font-size: 1rem;
  }

  .assets-grid {
    grid-template-columns: 1fr;
  }

  .asset-details {
    grid-template-columns: repeat(2, 1fr);
  }

  .chart-selector {
    min-width: clamp(120px, 30vw, 130px);
    padding: clamp(5px, 2vw, 6px) clamp(8px, 3vw, 10px);
    font-size: clamp(0.85rem, 3vw, 0.9rem);
  }

  .header {
    margin-bottom: calc(var(--spacing-unit) * 5);
  }

  #star-button {
    left: calc(var(--spacing-unit) * 2);
  }

  #account-button {
    right: calc(var(--spacing-unit) * 1.5);
  }

  .modal-content {
    max-width: 95%;
  }
}

/* Media Query for very small screens */
@media (max-width: 400px) {
  .input {
    font-size: 16px; /* تغییر: حداقل 16px برای جلوگیری از زوم */
    padding: 0 clamp(32px, 9vw, 36px);
    height: 44px;
    -webkit-appearance: none; /* اضافه: حذف استایل‌های native */
    touch-action: manipulation; /* اضافه: بهبود رفتار لمسی */
  }

  #main::before {
    top: -2.5px;
    left: 0;
    right: 0;
    bottom: -2.5px;
  }

  .search-icon,
  .tool-icon {
    width: clamp(16px, 4vw, 18px);
    height: clamp(16px, 4vw, 18px);
  }

  .search-icon {
    left: calc(var(--spacing-unit) * 2);
  }

  .tool-icon {
    right: calc(var(--spacing-unit) * 2);
  }

  .white,
  .border,
  .darkBorderBg,
  .glow {
    max-height: clamp(49px, 9vh, 49px);
    max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
    border-radius: 12px;
    filter: blur(1px);
    left: 50%; /* اضافه: وسط‌چین کردن */
    transform: translateX(-50%); /* اضافه: وسط‌چین کردن */
  }

  .white {
    max-height: clamp(49px, 8vh, 49px);
    max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
  }

  .border {
    max-height: clamp(49px, 7vh, 49px);
    max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
  }

  .darkBorderBg {
    max-height: clamp(49px, 8vh, 49px);
    max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
  }

  .glow {
    max-height: clamp(49px, 9vh, 49px);
    max-width: calc(100vw - 20px); /* تغییر: عرض کامل با حاشیه */
    filter: blur(8px);
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slideUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-10px);
    opacity: 0;
  }
  51% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(10px);
    opacity: 0;
  }
  51% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInAsset {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}