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

:root{
  --saf:#e8600a;
  --saf-lt:#f5873a;
  --saf-dk:#b84808;

  --grn:#1f6b2a;
  --grn-lt:#2e8c3a;
  --grn-dk:#134a1c;

  --dark:#0e1412;
  --dark2:#141c18;
  --dark3:#1a2420;
  --dark4:#202e28;

  --card:#192420;
  --card2:#1f2e28;

  --txt:#f0f4f2;
  --txt-lt:#8fa89e;
  --txt-xs:#5a7268;
}

html,body{
  height:100%;
  font-family:'Outfit',sans-serif;
  background:var(--dark);
  color:var(--txt);
}

body{
  display:block;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:'';
  position:fixed;
  top:-120px;
  left:-120px;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(31,107,42,0.18),transparent 70%);
  pointer-events:none;
}

body::after{
  content:'';
  position:fixed;
  bottom:-100px;
  right:-100px;
  width:380px;
  height:380px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(232,96,10,0.16),transparent 70%);
  pointer-events:none;
}

a{
  color:var(--saf-lt);
  text-decoration:none;
}

.auth-wrap{
  width:100%;
  max-width:500px;
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  z-index:1;
  margin:0 auto;
}

.auth-logo{
  text-align:center;
  margin-bottom:28px;
}

.auth-logo img{
  height:50px;
  object-fit:contain;
}

.auth-logo .brand{
  font-size:22px;
  font-weight:800;
  color:var(--txt);
  margin-top:10px;
  letter-spacing:0.5px;
}

.auth-logo .tagline{
  font-size:11px;
  letter-spacing:2.5px;
  color:var(--txt-xs);
  text-transform:uppercase;
  margin-top:4px;
}

.auth-card{
  width:100%;
  background:var(--card);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:20px;
  padding:32px;
  box-shadow:0 24px 60px rgba(0,0,0,0.4);
  animation:fadeUp .45s ease both;
}

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

.auth-title{
  font-size:22px;
  font-weight:700;
  color:var(--txt);
  margin-bottom:4px;
}

.auth-sub{
  font-size:13px;
  color:var(--txt-xs);
  margin-bottom:26px;
}

.form-group{
  margin-bottom:18px;
}

.form-label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--txt-lt);
  letter-spacing:0.5px;
  margin-bottom:8px;
  text-transform:uppercase;
}

.form-input-wrap{
  position:relative;
}

.form-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  pointer-events:none;
}

.form-input{
  width:100%;
  padding:13px 14px 13px 42px;
  background:var(--dark3);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  color:var(--txt);
  font-family:'Outfit',sans-serif;
  font-size:14px;
  transition:all .2s;
  outline:none;
}

.form-input:focus{
  border-color:rgba(232,96,10,0.5);
  background:var(--dark4);
  box-shadow:0 0 0 3px rgba(232,96,10,0.1);
}

.form-input::placeholder{
  color:var(--txt-xs);
}

.pw-toggle{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:16px;
  color:var(--txt-xs);
  transition:color .2s;
  user-select:none;
}

.pw-toggle:hover{
  color:var(--txt-lt);
}

.forgot-row{
  display:flex;
  justify-content:flex-end;
  margin-top:-8px;
  margin-bottom:18px;
}

.forgot-link{
  font-size:12px;
  color:var(--saf-lt);
  cursor:pointer;
  transition:opacity .2s;
}

.forgot-link:hover{
  opacity:0.75;
}

.btn-primary{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,var(--saf),var(--saf-lt));
  color:#fff;
  font-family:'Outfit',sans-serif;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:all .25s;
  letter-spacing:0.3px;
  box-shadow:0 6px 20px rgba(232,96,10,0.3);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(232,96,10,0.4);
}

.btn-primary:active{
  transform:translateY(0);
}

.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0;
  color:var(--txt-xs);
  font-size:12px;
}

.divider::before,
.divider::after{
  content:'';
  flex:1;
  height:1px;
  background:rgba(255,255,255,0.07);
}

.auth-footer{
  text-align:center;
  margin-top:22px;
  font-size:13px;
  color:var(--txt-xs);
}

.auth-footer a{
  color:var(--saf-lt);
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
}

.auth-footer a:hover{
  text-decoration:underline;
}

.alert{
  padding:11px 14px;
  border-radius:10px;
  font-size:13px;
  margin-bottom:18px;
  display:none;
  align-items:center;
  gap:8px;
}

.alert.error{
  background:rgba(224,85,85,0.12);
  border:1px solid rgba(224,85,85,0.25);
  color:#f08080;
  display:flex;
}

.alert.success{
  background:rgba(31,107,42,0.15);
  border:1px solid rgba(31,107,42,0.3);
  color:#6dcc7e;
  display:flex;
}

@media(max-width:480px){

  .auth-card{
    padding:24px 20px;
    border-radius:16px;
  }

  .auth-logo img{
    height:42px;
  }

  .auth-title{
    font-size:20px;
  }

}
/* SIGNUP PAGE EXTRA */

select.form-input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
}

.mt-3{
  margin-top:18px;
}

.auth-card img{
  height:70px;
  object-fit:contain;
  display:block;
  margin:0 auto 15px auto;
}

.auth-title{
  text-align:center;
}

.auth-sub{
  text-align:center;
}

.auth-footer{
  padding-bottom:5px;
}

/* MOBILE */

@media(max-width:480px){

  .auth-wrap{
    padding:14px;
  }

  .auth-card{
    padding:18px;
  }

  .btn-primary{
    padding:13px;
    font-size:14px;
  }

}
.content{
    padding: 24px;
}

.sec-ttl{
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
}

/* CARD CONTAINER */
.plan-card{
    background: #0f172a;
    border-radius: 24px;
    padding: 32px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    max-width: 850px;
}

/* TOP HEADER */
.plan-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.plan-top h2{
    color: #fff;
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
}

.plan-top p{
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
}

.wallet-box{
    background: linear-gradient(135deg, #d97706, #b45309);
    padding: 16px 24px;
    border-radius: 18px;
    min-width: 200px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.25);
}

.wallet-box span{
    display: block;
    color: #fef3c7;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.wallet-box h3{
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
}

/* ERROR */
.error-box{
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 24px;
    font-size: 14px;
}

/* FORM ELEMENTS */
.form-group{
    margin-bottom: 24px;
}

.form-group label{
    display: block;
    margin-bottom: 10px;
    color: #f1f5f9;
    font-size: 15px;
    font-weight: 600;
}

.input-box{
    position: relative;
}

.input-icon{
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

.input-box input{
    width: 100%;
    height: 54px;
    border: 1px solid #334155;
    outline: none;
    border-radius: 14px;
    background: #1e293b;
    color: #fff;
    padding: 0 18px 0 50px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.input-box input:focus{
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* PREMIUM PACKAGE CARDS GRID */
.package-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pkg-card{
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 16px;
    padding: 20px 16px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.pkg-card:hover{
    transform: translateY(-4px);
    border-color: #f59e0b;
}

.pkg-card.active{
    border-color: #f59e0b;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.1) 0%, #1e293b 100%);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.15);
}

.pkg-card .badge{
    position: absolute;
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    background: #f59e0b;
    color: #000;
    font-weight: 800;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pkg-card h3{
    color: #fff;
    font-size: 16px;
    margin: 10px 0 6px;
    font-weight: 700;
}

.pkg-price{
    color: #f59e0b;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.pkg-card ul{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: 12px;
    color: #cbd5e1;
}

.pkg-card ul li{
    margin-bottom: 6px;
    position: relative;
    padding-left: 14px;
}

.pkg-card ul li::before{
    content: "•";
    color: #f59e0b;
    position: absolute;
    left: 0;
}

/* BUTTON */
.submit-btn{
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
}

/* RESPONSIVE */
@media(max-width: 768px){
    .package-grid{
        grid-template-columns: 1fr;
    }
    .plan-card{
        padding: 20px;
    }
}