@font-face {
    font-family: 'Pinar-Light';
    src:
        url('../font/Pinar/Pinar-Light.woff2') format('woff2'),
        url('../font/Pinar/Pinar-Light.woff') format('woff');
}
@font-face {
    font-family: 'Pinar-Bold';
    src:
        url('../font/Pinar/Pinar-Bold.woff2') format('woff2'),
        url('../font/Pinar/Pinar-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Pinar-ExtraBold';
    src:
        url('../font/Pinar/Pinar-ExtraBold.woff2') format('woff2'),
        url('../font/Pinar/Pinar-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'Pinar-Medium';
    src:
        url('../font/Pinar/Pinar-Medium.woff2') format('woff2'),
        url('../font/Pinar/Pinar-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Pinar-Regular';
    src:
        url('../font/Pinar/Pinar-Regular.woff2') format('woff2'),
        url('../font/Pinar/Pinar-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Pinar-SemiBold';
    src:
        url('../font/Pinar/Pinar-SemiBold.woff2') format('woff2'),
        url('../font/Pinar/Pinar-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Estedad-Bold';
    src: url('../font/Estedad-Bold.eot');
    src: url('../font/Estedad-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/Estedad-Bold.woff2') format('woff2'),
        url('../font/Estedad-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Estedad-Light';
    src: url('../font/Estedad-Light.eot');
    src: url('../font/Estedad-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/Estedad-Light.woff2') format('woff2'),
        url('../font/Estedad-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
.glass{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  backdrop-filter: blur(12px);
}
.card-soft{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
}
.muted{ color: rgba(255,255,255,.75); }
.table{
  --bs-table-bg: transparent;
  --bs-table-color: #fff;
  --bs-table-border-color: rgba(255,255,255,.12);
}
.muted{color:rgba(232,236,255,.75)}
.card-soft{border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);backdrop-filter: blur(10px)}
.bg-primary{background:linear-gradient(135deg,#1b4cff,#0d2a6a)!important}
.bg-success{background:linear-gradient(135deg,#15b67a,#0b6b43)!important}
.bg-warning{background:linear-gradient(330deg, #e1a600, #9f6005) !important}
.bg-danger{background:linear-gradient(135deg,#ff4d4d,#8a1f1f)!important}
.border-bottom {border-bottom: var(--bs-border-width) var(--bs-border-style) #dee2e61c !important;}
:root{
  --bg:#070b16;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10);
  --muted:rgba(238,242,255,.70);
  --text:#eef2ff;

  /* فشرده برای ۲۱ آیتم در ۲ ستون */
  --gap: 10px;
  --pad: 10px;
  --title: 22px;
  --sub: 13px;
  --name: 14px;
  --price: 15px;
  --small: 11px;
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{
  background: var(--bg);
  color: var(--text);
  font-family:Estedad-Bold;
}

.wrap{
  min-height: 100svh;
  display:flex;
  justify-content:center;
  align-items:stretch;
  padding: 14px;
}

/* کادر استوری - ریسپانسیو */
.story{
  width: min(100%, 520px);
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  padding: 16px 14px 12px;
  background:
    radial-gradient(800px 600px at 70% 20%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(700px 520px at 20% 80%, rgba(16,185,129,.10), transparent 55%),
    var(--bg);
  border: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 380px){
  :root{
    --gap: 8px;
    --pad: 9px;
    --title: 20px;
    --name: 13px;
    --price: 14px;
  }
  .story{ padding: 14px 12px 10px; border-radius: 18px; }
}

.header {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.header h1{
  margin:0;
  font-size: var(--title);
  font-weight: 800;
  line-height: 1.2;
}

.header p{
  margin: 6px 0 0;
  font-size: var(--sub);
  color: var(--muted);
  line-height: 1.35;
}

.badge{
  font-size: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
  padding: 8px 10px;
  border-radius: 12px;
  white-space:nowrap;
  flex: 0 0 auto;
}

/* ✅ دو ستون */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  height: calc(100% - 100px); /* جا برای هدر + فوتر */
  align-content: start;
  overflow: hidden; /* استوری‌طور */
}

.item{
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  min-height: 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.name{
  font-size: var(--name);
  font-weight: 750;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom: 6px;
}

.price {
  font-weight: 900;
  white-space: nowrap;
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
}

.currency {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.65;
  margin-bottom: 2px;
  /* کمی پایین‌تر بیاد */
}

.price small {
  display: block;
  margin-top: 4px;
  font-size: 4px;
  color: rgb(236 255 80);
  font-weight: 600;
}

.footer{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  display:flex;
  justify-content:space-between;
  font-size: 11px;
  color: rgba(238,242,255,.55);
  gap: 10px;
}

.footer .right{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 72%;
}

.line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  font-size:14px;
  font-weight:700;
}

.name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60%;
}

.price{
  white-space:nowrap;
  font-weight:900;
}
.card-body {
    flex: 1 1 auto;
    padding: 0.5rem !important;
}
.alert {
    padding: 0.5rem !important;
    margin-bottom: 0rem !important;

}
.table {
    margin-bottom: 0rem !important;
}
dl, ol, ul {
    margin-bottom: 0rem  !important;
}

.box-background {
    background: linear-gradient(309deg, #ffffff2e 6.5%, #ffffff2b 70%) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgb(255 255 255 / 13%) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 6px 6px rgb(123 123 123 / 20%), 0 0 20px rgb(0 0 0 / 10%);
}
        span,li {
            font-size: 12px !important;
        }
        .box-backgroundd {
            background: linear-gradient(329deg, #0000005e 6.5%, #181818a6 70%) !important;
            color: #ffffff !important;
            -webkit-backdrop-filter: blur(10px) !important;

        }
th {
    color: white!important;
}
.last {
    border-color: #dee2e600;
}
.alert-success{
    background: linear-gradient(10deg, #1987546b 6.5%, #0f513278 70%) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgb(255 255 255 / 13%) !important;
    border-radius: 0.75rem !important;
}
.alert-warning{
    background: linear-gradient(10deg, #dc354533 6.5%, #c7400059 70%) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid #ff7f0099 !important;
    border-radius: 0.75rem !important;
}
.alert-info {
    background: linear-gradient(329deg, #ad6800a6 6.5%, #181818a6 70%) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid #eb960061 !important;
    border-radius: 0.75rem !important;
        box-shadow: 0 6px 6px rgb(0 0 0 / 20%), 0 0 20px rgb(0 0 0 / 10%);
}
.alert-danger {
      background: linear-gradient(10deg, #8420298c 6.5%, #8420297a 70%) !important;
      color: #6b000a !important;
      -webkit-backdrop-filter: blur(10px) !important;
      backdrop-filter: blur(10px) !important;
      border: 1px solid #8420296e !important;
      border-radius: 0.75rem !important;
}
hr {
    margin: 0.65rem 0;
    color: #ffffff;
    background-color: rgb(255 255 255);
    border: 1px;
    opacity: 1;
}
@media only screen and (min-width: 600px) {
    .container {
        width: 375px !important;
        min-width: 375px !important;
    }
}
p.text-center {
    font-size: 12px !important;
    line-height: 12px;
}
.backgroundopa{
  background: linear-gradient(10deg, #dadde55e 6.5%, #f3f3f56b 70%);
  color: #ffffff;
}
@media only screen and (max-width: 320px) {
p{    font-size: 11px !important;
}
p.text-center {
    font-size: 11px !important;
    line-height: 11px;
}
span {
  font-size: 11px !important;
}
th {
  font-size: 11px !important;
}
li {
  font-size: 11px !important;
}
.display-2 {
    font-size: calc(1.475rem + 2.7vw) !important;
}
}
@media only screen and (min-width: 320px) and (max-width: 400px) {
p{    font-size: 11px !important;
}
p.text-center {
    font-size: 12px !important;
    line-height: 25px;
}
span {
  font-size: 12px !important;
}
th {
  font-size: 15px !important;
}
li {
  font-size: 15px !important;
}
.display-2 {
    font-size: calc(1.475rem + 6.7vw) !important;
}
}
body {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
margin: 0 !important;
}

main {
flex: 1 !important; /* فضای باقی‌مانده را پر می‌کند */
}

footer {
background-color: #f8f9fa !important; /* رنگ زمینه فوتر */
padding: 20px !important;
text-align: center !important;
}
@media (min-width: 1200px) {
    .display-2 {
        font-size: 3.5rem !important;
    }
}