/* ================= FEE STRUCTURE MODAL ================= */

.fee-overlay{
  position:fixed;
  inset:0;
  background:rgba(42,35,64,0.72);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.fee-overlay.active{
  display:flex;
}

.fee-modal{
  position:relative;
  width:100%;
  max-width:950px;
  max-height:90vh;
  overflow-y:auto;
  background:#fff;
  border-radius:28px;
  padding:32px;
  box-shadow:0 25px 70px rgba(0,0,0,0.30);
  animation:feePopup .25s ease;
}

@keyframes feePopup{
  from{
    opacity:0;
    transform:translateY(20px) scale(.97);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.fee-close{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#fff0ee;
  color:var(--coral);
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
  z-index:2;
}

.fee-close:hover{
  background:var(--coral);
  color:#fff;
  transform:rotate(90deg);
}

.fee-header{
  display:flex;
  align-items:center;
  gap:18px;
  padding-right:50px;
  margin-bottom:28px;
}

.fee-logo{
  width:72px;
  height:72px;
  border-radius:20px;
  background:#f7f4ff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  flex-shrink:0;
}

.fee-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.fee-kicker{
  display:inline-block;
  background:#fff0ee;
  color:var(--coral);
  padding:5px 14px;
  border-radius:100px;
  font-size:12px;
  font-weight:800;
  margin-bottom:6px;
}

.fee-header h2{
  color:var(--violet);
  font-size:28px;
}

.fee-header p{
  color:#7a7395;
  font-size:14px;
  margin-top:3px;
}

.fee-table-wrapper{
  width:100%;
  overflow-x:auto;
  border-radius:18px;
  border:1px solid #ece8fb;
}

.fee-table{
  width:100%;
  border-collapse:collapse;
  min-width:700px;
}

.fee-table thead{
  background:var(--violet);
  color:#fff;
}

.fee-table th{
  padding:15px 16px;
  text-align:left;
  font-family:var(--display);
  font-size:15px;
  white-space:nowrap;
}

.fee-table td{
  padding:14px 16px;
  border-bottom:1px solid #eeeaf8;
  font-size:14px;
  color:#5a5478;
  font-weight:600;
}

.fee-table tbody tr:nth-child(even){
  background:#fbfaff;
}

.fee-table tbody tr:hover{
  background:#f4f1ff;
}

.fee-table td:first-child{
  color:var(--violet);
  font-weight:800;
}

.fee-note{
  margin-top:20px;
  padding:15px 18px;
  background:#fff8ee;
  border-left:4px solid var(--yellow);
  border-radius:12px;
  color:#6b6488;
  font-size:13px;
  line-height:1.6;
}

.fee-note strong{
  color:var(--violet);
}

/* Mobile */

@media(max-width:600px){

  .fee-overlay{
    padding:12px;
  }

  .fee-modal{
    padding:22px 16px;
    border-radius:22px;
    max-height:94vh;
  }

  .fee-header{
    gap:12px;
    margin-bottom:20px;
  }

  .fee-logo{
    width:55px;
    height:55px;
    border-radius:15px;
  }
.fee-overlay{
    position:fixed;
    inset:0;
    background:rgba(42,35,64,0.72);
    backdrop-filter:blur(5px);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.fee-overlay.active{
    display:flex;
}
  .fee-header h2{
    font-size:21px;}
    .fee-overlay{
    display:none;
}

.fee-overlay.active{
    display:flex;
}
  }

  .fee-header p{
    font-size:12px;
  }

  .fee-close{
    width:36px;
    height:36px;
    top:12px;
    right:12px;
    font-size:15px;
  }

  .fee-table th,
  .fee-table td{
    padding:12px;
  }

}