/* CSS Document */

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/iransansx/IRANSansX-DemiBold.woff") format("woff"),
    url("assets/fonts/iransansx/IRANSansX-DemiBold.woff2") format("woff2");
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("assets/fonts/iransansx/IRANSansX-Regular.woff") format("woff"),
    url("assets/fonts/iransansx/IRANSansX-Regular.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansXfa;
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("assets/fonts/iransansx/iransansxfanum-regular.woff") format("woff"),
    url("assets/fonts/iransansx/iransansxfanum-regular.woff2") format("woff2");
}
@font-face {
  font-family: IRANSansXfa;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/iransansx/iransansxfanum-demibold.woff") format("woff"),
    url("assets/fonts/iransansx/iransansxfanum-demibold.woff2") format("woff2");
}
@font-face {
  font-family: IRANSansXfa;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/iransansx/iransansxfanum-black.woff") format("woff"),
    url("assets/fonts/iransansx/iransansxfanum-black.woff2") format("woff2");
}
:root {
  --font-size-xlarge: 1.4em;
  --font-size-large: 1.2em;
  --font-size-small: 0.8em;
  --font-size-xsmall: 0.6em;

  --color-accent: #0000ff;
  --color-accent-dark: #000066;
  --color-accent-light: #00ffff;

  --border-radius-big: 1.5em;
  --border-radius-sml: 0.7em;

  --main-size: 1080px;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: IRANSansX !important;
  font-size: 0.9em;
  line-height: 1;
  direction: rtl;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  -moz-font-feature-settings: "ss02";
  -webkit-font-feature-settings: "ss02";
  font-feature-settings: "ss02";
}
h1,
h2,
h3,
h4,
input,
textarea,
select,
option,
button {
  font-family: IRANSansX !important;
  -moz-font-feature-settings: "ss02";
  -webkit-font-feature-settings: "ss02";
  font-feature-settings: "ss02";
}
::selection {
  background-color: royalblue;
  color: #ffffff;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border-spacing: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}
:hover {
  transition: all 0.3s ease;
}
img {
  max-width: 100%;
  height: auto;
}
p {
  line-height: 2;
  text-align: justify;
}
h2 {
  margin: 1em 0;
  color: royalblue;
}
button {
  cursor: pointer;
}
.form button i {
  margin-left: 0.5em;
  position: relative;
  top: 0.1em;
}

.wrapper {
  width: 100%;
  max-width: 1100px;
}
.hidden {
  width: 0;
  height: 0;
  overflow: hidden;
  border: none;
}

.notif {
  position: fixed;
  left: 3em;
  bottom: 3em;
  font-weight: 600;
  border-radius: var(--border-radius-big);
  width: 0;
  padding: 1em 0;
  overflow: hidden;
  opacity: 0;
}
.notif i {
  position: relative;
  top: 0.1em;
  margin-left: 0.5em;
}
#success {
  background-color: lightgreen;
}
#fail {
  background-color: lightsalmon;
}
.flashAnim {
  animation: flash 3s;
}
@keyframes flash {
  0% {
    width: auto;
    padding: 1em 2em;
    opacity: 1;
  }
  99% {
    width: auto;
    padding: 1em 2em;
    opacity: 1;
  }
  100% {
    width: 0;
    padding: 1em 0;
    opacity: 0;
  }
}

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #253157;
  margin-bottom: 2em;
}
nav .wrapper {
  padding: 1em 0;
  display: flex;
  gap: 5em;
}
nav a {
  color: #fff;
  padding: 1em 0;
  font-weight: 600;
}
#menuGap {
  flex: 1;
}

.form {
  display: flex;
  flex-direction: column;
  margin: 2em 0;
}
.formRow {
  display: flex;
  align-items: center;
  padding: 1em 0;
  gap: 1.5em;
}
.formRow input,
.formRow textarea,
.formRow select {
  flex: 1;
  padding: 1em;
  border: none;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-sml);
  border: 1px solid rgba(105, 105, 105, 0.397);
  text-align: center;
  resize: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.formRow input:hover,
.formRow textarea:hover {
  background-color: rgba(0, 0, 0, 0.025);
}
.formButton {
  justify-content: flex-end;
}
.form button {
  padding: 1em 2em;
  border: none;
  background-color: royalblue;
  color: #ffffff;
  border-radius: var(--border-radius-sml);
  font-weight: 600;
}
.form button:disabled {
  background-color: #ccc;
  color: #ffffff;
  cursor: not-allowed;
}
#whatsapp {
  padding: 1em 2em;
  border: none;
  background-color: #25d366;
  color: #ffffff;
  border-radius: var(--border-radius-sml);
  font-weight: 600;
}
#whatsapp i {
  margin-left: 0.5em;
  position: relative;
  top: 0.1em;
}

.list {
  display: flex;
  flex-direction: column;
  margin: 2em 0;
}
.listRow {
  display: flex;
  align-items: center;
  padding: 1em;
  border-radius: var(--border-radius-sml);
}
.listRow:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.03);
}
.listRow:first-child {
  background-color: royalblue;
  color: #ffffff;
  padding: 1.5em 1em;
}
.listCol {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
  text-align: center;
  line-height: 1.5;
}
.listCol #id {
  padding: 0.5em;
  border: none;
  border-radius: var(--border-radius-sml);
  border: 1px solid rgba(105, 105, 105, 0.397);
  text-align: center;
  width: 5em;
}
.listCol button,
.listCol a:not(.gameList a) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  border: none;
  color: royalblue;
  background-color: #ffffff;
  border: 1px solid royalblue;
  font-size: 0.8em;
}

#login {
  align-items: center;
  justify-content: center;
  height: 100vh;
  max-width: 400px;
  margin: 0 auto;
}

.topPageBtn {
  display: flex;
  gap: 1em;
  justify-content: flex-end;
}
.topPageBtn a {
  background-color: royalblue;
  color: #fff;
  font-weight: 600;
  border-radius: var(--border-radius-big);
  padding: 0.75em 1.5em;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

sup {
  direction: ltr;
  font-size: var(--font-size-small);
  width: 3em;
  text-align: right;
}
.green {
  color: teal;
}
.red {
  color: tomato;
}

.priceInput,
.priceDate {
  direction: ltr;
}

.formCheckList {
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  margin-bottom: 0.5em;
}
.opt2add,
.sfty2add,
.prs2add,
.cns2add {
  cursor: pointer;
}
.opt2add::before,
.sfty2add::before,
.prs2add::before,
.cns2add::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  content: "\f055";
  position: relative;
  top: 0.1em;
  margin-left: 0.5em;
}

#search {
  background-color: #f7f7f7;
  border-radius: var(--border-radius-big);
  padding: 0.75em 1.5em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  outline: none;
  border: 1px solid #ccc;
  text-align: center;
}

main {
  width: var(--main-size);
  margin: 2em auto;
  display: flex;
  flex-direction: column;
  gap: 2em;
  font-family: IRANSansXfa !important;
  color: #ffffff;
  font-size: 1.9em;
}
.bg {
  width: var(--main-size);
  height: calc(var(--main-size) * 1.25);
  overflow: hidden;
  background-color: #021734;
  position: relative;
}
.carino {
  background-color: #382b16;
}
.bg2 {
  width: var(--main-size);
  height: calc(var(--main-size) * 1.25);
  overflow: hidden;
  background-color: #021734;
}
.bg2 .box {
  background-color: #00326f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23021734'/%3E%3Cstop offset='1' stop-color='%2300326F'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23012552'/%3E%3Cstop offset='1' stop-color='%2300326F'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg %3E%3Cg transform=''%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-36 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--main-size) calc(var(--main-size) * 1.25);
}
.box {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(2.webp);
  opacity: 0.05;
}
.carino .overlay {
  background-image: url(3.webp);
  opacity: 0.03;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75em;
  min-height: calc(var(--main-size) * 1.25 / 10);
  max-height: calc(var(--main-size) * 1.25 / 10);
  padding: 0 0.75em;
  font-size: 1.08em;
}
.item:nth-child(4n + 3),
.item:nth-child(4n + 4) {
  background-color: rgba(255, 255, 255, 0.05);
}
.image {
  height: 90%;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.name {
  line-height: 1.5;
  text-align: center;
  font-weight: 600;
}
.price {
  background-color: #fff;
  padding-block: 0.5em;
  min-width: 3.5em;
  width: 3.5em;
  border-radius: 0.5em;
  color: #021734;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
}
.carino .price {
  border-radius: 5rem;
  background-color: rgba(255, 255, 255, 0.1);
  color: orange;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: calc(var(--main-size) * 1.25 / 10);
  max-height: calc(var(--main-size) * 1.25 / 10);
  padding: 0 0.75em;
  grid-column: 1/3;
  padding: 0;
  border-block: 2px solid #00ffff;
}
.carino .header {
  justify-content: center;
  border-block: 2px solid orange;
}
.header div {
  background-color: #00ffff;
  color: #021734;
  padding: 0.75em 1.5em;
  font-weight: 600;
}
.carino .header div {
  background-color: orange;
}
.header .company {
  border-radius: 0.5em 0 0 0.5em;
}
.carino .header .company {
  border-radius: 5em;
}
.header .date {
  border-radius: 0 0.5em 0.5em 0;
}

#proccessing {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2em);
  color: #00326f;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 1em;
  font-size: 1.5em;
  font-weight: 900;
}
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8em 4em;
}
.home img {
  width: 100%;
  margin: 5em 0;
}
.home h1 {
  font-size: 3.5em;
  margin-bottom: 0.25em;
}
.home h2 {
  font-weight: normal;
  opacity: 0.7;
  color: #ffffff;
}
.home div {
  color: #00ffff;
}

#linkCounter input {
  max-width: 10em;
  text-align: center;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 5em;
}

.conField {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.conField span {
  padding: 1.5em 0.5em;
  text-align: center;
  border: 1px solid rgba(105, 105, 105, 0.397);
}
.conField span:first-child {
  background-color: var(--color-accent-dark);
  color: #ffffff;
  border-radius: var(--border-radius-sml) var(--border-radius-sml) 0 0;
}
.conField span:last-child {
  border-radius: 0 0 var(--border-radius-sml) var(--border-radius-sml);
}

#consRecord {
  padding: 1.5em 3em;
  background-color: var(--color-accent-dark);
  border-radius: var(--border-radius-sml);
  color: #ffffff;
  justify-content: space-between;
}
#audioPlayback {
  display: none;
}
#consRecord button {
  width: 3rem;
  height: 3rem;
  padding: unset !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
#consRecordBtns {
  display: flex;
  gap: 1rem;
}
#consRecord button:disabled {
  display: none;
}
#consRecord button i {
  margin-left: unset !important;
  top: unset !important;
  position: unset !important;
  font-size: var(--font-size-large);
}