@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700&display=swap');

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

body{
  margin:0;
  min-height:100vh;
  font-family:'Vazirmatn',sans-serif;
  color:white;
  overflow-x:hidden;

  background:
    radial-gradient(circle at top left,
      rgba(92, 84, 255, 0.35),
      transparent 30%),

    radial-gradient(circle at top right,
      rgba(0, 200, 255, 0.25),
      transparent 30%),

    radial-gradient(circle at bottom center,
      rgba(170, 0, 255, 0.20),
      transparent 35%),

    linear-gradient(
      180deg,
      #050816 0%,
      #09101f 40%,
      #050816 100%
    );

  background-attachment: fixed;
  color:white;
  font-family:'Vazirmatn',sans-serif;
  min-height:100vh;
  padding:20px;
}

.app{
  max-width:500px;
  margin:auto;
	padding-bottom: 110px;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
	direction:ltr; 
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  width:70px;
  height:70px;
  border-radius:20px;
  box-shadow:0 0 25px #6d4aff;
}

.brand h1{
  font-size:28px;
}

.brand p{
  color:#8ab4ff;
}

.status{
  background:#101b35;
  padding:10px 15px;
  border-radius:15px;
  border:1px solid #223;
	
}

.rates{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-bottom:25px;
}

.rate-card{
  background:#0d1328;
  border:1px solid #1f2d58;
  padding:20px;
  border-radius:20px;
  box-shadow:0 0 20px rgba(80,120,255,.15);
	text-align: center;
}

.rate-card h3{
  margin-bottom:10px;
  color:#a6b8ff;
}

.rate-card span{
  font-size:24px;
  font-weight:bold;
}

.form-box{
  background:#0d1328;
  border:1px solid #1f2d58;
  border-radius:25px;
  padding:25px;
  margin-bottom:20px;
}

.form-box label{
  display:block;
  margin-bottom:10px;
  margin-top:20px;
  font-size:18px;
}

input{
  width:100%;
  background:#09101f;
  border:1px solid #2c3d7a;
  color:white;
  padding:18px;
  border-radius:18px;
  font-size:18px;
}

.type-selector{
  display:flex;
  gap:15px;
  margin-top:10px;
}

.type-btn{
  flex:1;
  padding:18px;
  border:none;
  border-radius:18px;
  background:#131d3a;
  color:white;
  cursor:pointer;
  font-size:16px;
  transition:.2s;
}

.type-btn.active{
  background:linear-gradient(135deg,#287cff,#9d34ff);
  box-shadow:0 0 20px rgba(120,80,255,.5);
}

.result-box{
  margin-top:30px;
  padding:25px;
  border-radius:20px;
  background:linear-gradient(135deg,#0f1735,#1a1140);
  border:1px solid #394ea5;
  text-align:center;
}

.result{
  margin-top:15px;
  font-size:42px;
  font-weight:bold;
  color:#6fb8ff;
	direction: ltr;
}

.submit-btn{
  width:100%;
  margin-top:30px;
  padding:20px;
  border:none;
  border-radius:20px;
  font-size:22px;
  color:white;
  cursor:pointer;
  background:linear-gradient(135deg,#287cff,#bb33ff);
  box-shadow:0 0 25px rgba(120,80,255,.5);
}

.contact-box{
  background:#0d1328;
  border:1px solid #1f2d58;
  border-radius:25px;
  padding:25px;
  text-align:center;
}

.contact-box p{
  margin-bottom:15px;
  line-height:2;
}

.contact-box a{
  color:#7aa7ff;
  text-decoration:none;
  font-size:24px;
  font-weight:bold;
}

body::before{
  content:"";
  position:fixed;
  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    );

  background-size:40px 40px;

  pointer-events:none;
  z-index:-1;
}
.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bottom-nav{
  position:fixed;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);

  width:min(500px,95%);
  height:75px;

  display:flex;
  justify-content:space-around;
  align-items:center;

  background:rgba(13,19,40,.85);

  backdrop-filter:blur(20px);

  border:1px solid rgba(110,140,255,.2);

  border-radius:25px;

  box-shadow:
    0 0 25px rgba(110,140,255,.15),
    0 0 50px rgba(120,80,255,.1);

  z-index:999;
}

.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  color:#8fa8ff;

  text-decoration:none;

  font-size:13px;

  transition:.25s;
}

.nav-item span{
  font-size:22px;
  margin-bottom:4px;
}

.nav-item.active{
  color:#fff;
}

.nav-item.active span{
  text-shadow:
    0 0 10px #5e7cff,
    0 0 20px #5e7cff;
}

.nav-item:hover{
  transform:translateY(-2px);
}
.bottom-nav {
  transition: 0.25s ease;
}