body{background:#f6f8fb}.hero{padding:80px 0;background:linear-gradient(135deg,#0f172a,#1e40af);color:white}.hero h1{font-size:48px;font-weight:800}.card{border:0;box-shadow:0 10px 25px rgba(0,0,0,.08);border-radius:16px}.brand-box{background:white;color:#111;border-radius:22px;padding:30px}.credit{font-size:34px;font-weight:800;color:#0d6efd}.badge-soft{background:#e8f1ff;color:#0d6efd;padding:8px 12px;border-radius:20px}.table td,.table th{vertical-align:middle}.navbar-brand span{color:#ffc107}.form-control,.form-select{border-radius:10px}.btn{border-radius:10px}
.business-page {
  background: #f5fbfc;
}

.business-hero {
  background:
    radial-gradient(circle at top right, rgba(238,155,0,0.35), transparent 28%),
    linear-gradient(135deg, #001219, #005f73, #0a9396);
  color: #fff;
  padding: 90px 0;
  border-bottom-left-radius: 65px;
  border-bottom-right-radius: 65px;
}

.business-badge {
  background: rgba(255,255,255,0.18);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 800;
  display: inline-block;
  margin-bottom: 20px;
}

.business-hero h1 {
  font-size: 54px;
  font-weight: 900;
  line-height: 1.08;
}

.business-hero p {
  font-size: 20px;
  max-width: 650px;
  opacity: 0.95;
}

.business-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.business-btn-main,
.business-btn-outline {
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 900;
  text-decoration: none;
}

.business-btn-main {
  background: linear-gradient(135deg, #ee9b00, #ca6702);
  color: #001219;
}

.business-btn-outline {
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
}

.why-card {
  background: rgba(255,255,255,0.96);
  color: #001219;
  padding: 38px;
  border-radius: 35px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

.why-card h3 {
  font-weight: 900;
  margin-bottom: 24px;
}

.why-item {
  display: flex;
  gap: 15px;
  align-items: center;
  background: #f3fafb;
  padding: 14px 16px;
  border-radius: 18px;
  margin-bottom: 13px;
}

.why-item span {
  background: #ee9b00;
  color: #001219;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.why-item p {
  margin: 0;
  color: #001219;
  font-weight: 800;
  font-size: 16px;
}

.business-section {
  padding: 70px 0;
}

.white-section {
  background: #fff;
}

.business-title {
  text-align: center;
  margin-bottom: 45px;
}

.business-title span {
  color: #ca6702;
  font-weight: 900;
  text-transform: uppercase;
}

.business-title h2 {
  font-size: 40px;
  font-weight: 900;
  color: #001219;
}

.business-title p {
  color: #666;
}

.join-card,
.benefit-card,
.quick-business-card {
  background: #fff;
  border-radius: 30px;
  padding: 32px 25px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,95,115,0.08);
  transition: 0.3s;
}

.join-card:hover,
.benefit-card:hover,
.quick-business-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 65px rgba(0,0,0,0.14);
}

.join-card {
  text-align: center;
}

.join-card div {
  font-size: 42px;
  margin-bottom: 15px;
}

.join-card h5,
.benefit-card h5,
.quick-business-card h5 {
  font-weight: 900;
  color: #001219;
}

.benefit-icon,
.quick-icon {
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ee9b00, #ca6702);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 18px;
}

.benefit-card p,
.quick-business-card p {
  color: #666;
  line-height: 1.65;
}

.quick-business-card a {
  color: #ca6702;
  font-weight: 900;
  text-decoration: none;
}

@media(max-width: 768px) {
  .business-hero {
    padding: 55px 0;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
  }

  .business-hero h1 {
    font-size: 34px;
  }
}


























/* ================================
   WINWIN PREMIUM REGISTER PAGE
================================ */


.premium-register-page{

    min-height:100vh;
    padding:80px 0;

    background:
    radial-gradient(circle at top left,#ffb70355,transparent 35%),
    radial-gradient(circle at bottom right,#00b4d855,transparent 35%),
    linear-gradient(135deg,#001219,#003049);

}



/* width */

.premium-register-page .container{

    width:90%;
    max-width:1500px;

}



/* HEADER */

.register-header{

    text-align:center;
    margin-bottom:50px;

}



.register-header span{

    display:inline-block;

    background:#ffc107;

    color:#111;

    padding:12px 30px;

    border-radius:50px;

    font-weight:800;

}



.register-header h1{

    margin-top:25px;

    font-size:55px;

    font-weight:900;

    color:white;

}



.register-header p{

    color:#d8e2e8;

    font-size:20px;

}





/* MAIN CARDS */

.premium-info-card,
.premium-form-card{


    background:rgba(255,255,255,.95);

    border-radius:35px;

    padding:45px;

    height:100%;

    box-shadow:
    0 30px 80px rgba(0,0,0,.35);

    transition:.3s;

}



.premium-info-card:hover,
.premium-form-card:hover{

    transform:translateY(-8px);

}




/* PRICE */


.price-card{


background:
linear-gradient(135deg,#ff9800,#ffb703);


border-radius:30px;

padding:35px;

text-align:center;

color:white;


}



.price-card h2{

font-size:70px;

font-weight:900;

margin:0;

}





/* BENEFITS */


.benefit-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin:30px 0;

}



.mini-benefit{


background:#f8fbff;

border-radius:25px;

padding:30px 15px;

text-align:center;

box-shadow:
0 10px 25px #ddd;

transition:.3s;

}



.mini-benefit:hover{

transform:translateY(-8px);

}



.mini-benefit div{

font-size:45px;

}





/* PAYMENT */


.payment-steps h4{

font-size:30px;

font-weight:900;

}



.pay-step{


display:flex;

gap:20px;

background:#fff7dd;

padding:25px;

border-radius:25px;

margin-bottom:18px;

border-left:6px solid #ffc107;


}



.pay-step span{


min-width:45px;

height:45px;

background:#ffc107;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:900;

}





.payment-qr-box{


background:white;

padding:25px;

border-radius:30px;

display:inline-block;

box-shadow:
0 20px 40px #bbb;

}



.payment-qr-box img{

width:260px!important;

}





/* FORM */


.form-head{


display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;


}



.form-head h2{


font-size:45px;

font-weight:900;

}



.lock-badge{


background:#e7fff1;

padding:15px 25px;

border-radius:50px;

}





.premium-form-card input{


width:100%;

height:60px;

border-radius:18px;

border:2px solid #eee;

padding:15px;

font-size:17px;

}



.premium-form-card input:focus{


border-color:#ff9800;

outline:none;

}





/* BUTTON */


.submit-register-btn{


width:100%;

height:65px;

border:0;

border-radius:35px;


background:
linear-gradient(90deg,#ff9800,#ffc107);


font-size:22px;

font-weight:900;

transition:.3s;

}



.submit-register-btn:hover{


transform:translateY(-5px);

box-shadow:
0 20px 40px #ff980055;


}





/* ALERT */


.premium-alert{


background:#e9fff0;

border-radius:25px;

padding:25px;

}



.qr-result{

text-align:center;

}


.qr-result img{


width:220px;

padding:15px;

background:white;

border-radius:25px;

box-shadow:
0 15px 30px #ccc;

}




/* MOBILE */


@media(max-width:768px){


.register-header h1{

font-size:35px;

}


.premium-register-page .container{

width:95%;

}

.container{
    height:auto;
}


.benefit-grid{

grid-template-columns:1fr;

}


.form-head{

display:block;

}


}













.home-hero {
  padding: 90px 0;
}

.brand-box {
  border-radius: 24px;
  padding: 35px;
}

.benefit-line {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.benefit-line b {
  font-size: 20px;
}

.feature-card {
  border: 0;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  transition: all .3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.15);
}

.feature-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: #fff3cd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 0 auto;
}

















/* REGISTER PAGE DESIGN */

.premium-register-page{
    min-height:100vh;
    padding:70px 0;
    background:
    linear-gradient(135deg,#fff7e6,#eef6ff);
    position:relative;
    overflow:visible;
}


.register-bg-shape{
    position:absolute;
    border-radius:50%;
    opacity:.25;
    filter:blur(3px);
}


.shape-one{
    width:300px;
    height:300px;
    background:#ffc107;
    top:-100px;
    left:-100px;
}


.shape-two{
    width:350px;
    height:350px;
    background:#0d6efd;
    bottom:-150px;
    right:-120px;
}




.register-header span{
    background:#212529;
    color:white;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
}


.register-header h1{
    margin-top:20px;
    font-weight:800;
    font-size:45px;
}


.register-header p{
    color:#6c757d;
    font-size:18px;
}





.premium-info-card,
.premium-form-card{

    background:white;
    border-radius:25px;
    padding:35px;
    box-shadow:
    0 20px 60px rgba(0,0,0,.12);

    position:relative;
}





.price-card{

background:
linear-gradient(135deg,#212529,#343a40);

color:white;
padding:25px;
border-radius:20px;
text-align:center;
margin-bottom:30px;

}



.price-card h2{

font-size:50px;
font-weight:800;
color:#ffc107;

}




.benefit-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:15px;

}



.mini-benefit{

background:#f8f9fa;
border-radius:18px;
padding:20px;
text-align:center;
transition:.3s;

}



.mini-benefit:hover{

transform:translateY(-5px);
box-shadow:0 10px 25px #ddd;

}


.mini-benefit div{

font-size:35px;

}





.payment-steps h4{

font-weight:800;
margin:30px 0 20px;

}



.pay-step{

display:flex;
gap:15px;
align-items:flex-start;
background:#fff8e1;
padding:18px;
border-radius:18px;
margin-bottom:15px;

}



.pay-step span{

width:35px;
height:35px;
display:flex;
align-items:center;
justify-content:center;
background:#ffc107;
border-radius:50%;
font-weight:bold;

}




.pay-step p{

margin:4px 0;
color:#666;

}





img[alt="Payment QR"]{

box-shadow:
0 10px 30px rgba(0,0,0,.2);

padding:10px;
background:white;

}





.form-head{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;

}


.form-head span{

color:#0d6efd;
font-weight:bold;

}


.form-head h2{

font-weight:800;

}



.lock-badge{

background:#e7f1ff;
padding:12px 18px;
border-radius:30px;

}




.premium-form-card label{

font-weight:700;
margin-bottom:6px;

}



.premium-form-card input{

height:52px;
border-radius:14px;
border:1px solid #ddd;
padding:0 18px;

}



.premium-form-card input:focus{

border-color:#0d6efd;
box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}





.submit-register-btn{

width:100%;
border:none;
height:55px;
border-radius:15px;

background:
linear-gradient(135deg,#ffc107,#ff9800);

font-size:18px;
font-weight:800;

transition:.3s;

}


.submit-register-btn:hover{

transform:translateY(-3px);
box-shadow:0 12px 25px #ffc10755;

}





.qr-result{
margin-top:20px;
background:#f8f9fa;
padding:20px;
border-radius:20px;
text-align:center;
}



.qr-result img{
display:block;
margin:auto;
margin-bottom:15px;
}



.login-text{
text-align:center;
margin-top:20px;
}



@media(max-width:768px){
.register-header h1{
font-size:32px;
}


.premium-info-card,
.premium-form-card{

padding:20px;

}

}















.login-pro{
  min-height:100vh !important;
  padding:80px 0 !important;
  background:linear-gradient(135deg,#001219,#005f73,#0a9396) !important;
}

.login-shell{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  background:rgba(255,255,255,.15) !important;
  border-radius:35px !important;
  overflow:hidden !important;
  box-shadow:0 35px 90px rgba(0,0,0,.35) !important;
}

.login-left{
  color:#fff !important;
  padding:70px 55px !important;
}

.login-left h1{
  font-size:46px !important;
  font-weight:900 !important;
  line-height:1.1 !important;
}

.login-pill{
  display:inline-block !important;
  background:#ee9b00 !important;
  color:#001219 !important;
  padding:10px 22px !important;
  border-radius:40px !important;
  font-weight:900 !important;
}

.login-stats{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:15px !important;
  margin-top:40px !important;
}

.login-stats div{
  background:rgba(255,255,255,.18) !important;
  padding:22px !important;
  border-radius:22px !important;
}

.login-right{
  padding:40px !important;
  display:flex !important;
  align-items:center !important;
}

.login-card-pro{
  background:#fff !important;
  width:100% !important;
  padding:45px !important;
  border-radius:30px !important;
  box-shadow:0 25px 70px rgba(0,0,0,.25) !important;
}

.login-lock{
  width:75px !important;
  height:75px !important;
  border-radius:25px !important;
  background:#fff3cd !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:34px !important;
}

.login-field input{
  width:100% !important;
  border:1px solid #ddd !important;
  border-radius:16px !important;
  padding:15px !important;
}

.login-btn{
  width:100% !important;
  border:0 !important;
  border-radius:40px !important;
  background:#ee9b00 !important;
  color:#001219 !important;
  padding:15px !important;
  font-weight:900 !important;
}

@media (max-width: 768px) {

  .login-shell {
    display: flex;
    flex-direction: column;
  }

  .login-right {
    order: 1;
  }

  .login-left {
    order: 2;
  }

}












.premium-register-page {
  position: relative;
  min-height: 100vh;
  padding: 75px 0;
  overflow: visible;
  background:
    radial-gradient(circle at top left, rgba(238,155,0,0.28), transparent 28%),
    radial-gradient(circle at bottom right, rgba(148,210,189,0.25), transparent 32%),
    linear-gradient(135deg, #001219, #005f73 55%, #0a9396);
}

.register-bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.35;
}

.shape-one {
  width: 360px;
  height: 360px;
  background: #ee9b00;
  right: -120px;
  top: -120px;
}

.shape-two {
  width: 260px;
  height: 260px;
  background: #94d2bd;
  left: -90px;
  bottom: -90px;
}

.register-header {
  color: #fff;
  margin-bottom: 45px;
}

.register-header span {
  display: inline-block;
  background: rgba(255,255,255,0.17);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 900;
  margin-bottom: 18px;
}

.register-header h1 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.1;
}

.register-header p {
  font-size: 19px;
  opacity: 0.95;
}

.premium-info-card,
.premium-form-card {
  background: rgba(255,255,255,0.96);
  border-radius: 36px;
  padding: 35px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.25);
}

.price-card {
  background: linear-gradient(135deg, #ffdf7e, #ee9b00, #ca6702);
  border-radius: 28px;
  padding: 30px;
  color: #001219;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.price-card::after {
  content: "₹";
  position: absolute;
  right: 20px;
  top: -35px;
  font-size: 130px;
  font-weight: 900;
  opacity: 0.12;
}

.price-card small {
  font-weight: 900;
  text-transform: uppercase;
}

.price-card h2 {
  font-size: 56px;
  font-weight: 900;
  margin: 5px 0;
}

.price-card p {
  margin: 0;
  font-weight: 700;
}

.premium-info-card h3,
.payment-steps h4 {
  font-weight: 900;
  color: #001219;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 22px 0 30px;
}

.mini-benefit {
  background: #f3fafb;
  border-radius: 22px;
  padding: 20px;
  border: 1px solid rgba(0,95,115,0.08);
}

.mini-benefit div {
  width: 56px;
  height: 56px;
  background: #fff3d6;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 13px;
}

.mini-benefit h6 {
  font-weight: 900;
  color: #001219;
  margin: 0;
}

.payment-steps {
  border-top: 1px solid #e5eeee;
  padding-top: 25px;
}

.pay-step {
  display: flex;
  gap: 15px;
  margin-top: 17px;
}

.pay-step span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #005f73;
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pay-step b {
  color: #001219;
}

.pay-step p {
  margin: 3px 0 0;
  color: #666;
}

.form-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  margin-bottom: 28px;
}

.form-head span {
  color: #ca6702;
  font-weight: 900;
  text-transform: uppercase;
}

.form-head h2 {
  font-size: 34px;
  font-weight: 900;
  color: #001219;
  margin: 4px 0;
}

.form-head p {
  color: #666;
  margin: 0;
}

.lock-badge {
  background: #e6f7f5;
  color: #005f73;
  padding: 9px 15px;
  border-radius: 50px;
  font-weight: 900;
  white-space: nowrap;
}

.premium-alert {
  background: #e9f8f6;
  border-left: 6px solid #0a9396;
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 25px;
  color: #001219;
}

.premium-alert p {
  margin-bottom: 0;
  font-weight: 700;
}

.qr-result {
  text-align: center;
  margin-top: 18px;
}

.qr-result img {
  max-width: 180px;
  border-radius: 18px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.qr-result strong,
.qr-result span {
  display: block;
  margin-top: 8px;
}

.premium-form-card label {
  font-weight: 900;
  color: #001219;
  margin-bottom: 7px;
}

.premium-form-card input {
  width: 100%;
  border: 0;
  outline: none;
  background: #f2f8f9;
  border-radius: 17px;
  padding: 15px 16px;
  font-weight: 700;
  color: #001219;
}

.premium-form-card input:focus {
  box-shadow: 0 0 0 3px rgba(10,147,150,0.18);
  background: #fff;
}

.premium-form-card small {
  display: block;
  margin-top: 8px;
  color: #777;
}

.submit-register-btn {
  width: 100%;
  border: 0;
  border-radius: 50px;
  padding: 16px;
  background: linear-gradient(135deg, #ee9b00, #ca6702);
  color: #001219;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 12px 28px rgba(238,155,0,0.35);
}

.login-text {
  text-align: center;
  margin: 24px 0 0;
  color: #666;
}

.login-text a {
  color: #ca6702;
  font-weight: 900;
  text-decoration: none;
}

@media(max-width: 768px) {
  .premium-register-page {
    padding: 50px 0;
  }

  .register-header h1 {
    font-size: 34px;
  }

  .premium-info-card,
  .premium-form-card {
    padding: 25px;
    border-radius: 28px;
  }

  .form-head {
    display: block;
  }

  .lock-badge {
    display: inline-block;
    margin-top: 15px;
  }

  .benefit-grid {
    grid-template-columns: 1fr;
  }
}
































.premium-register-page {
  position: relative;
  min-height: 100vh;
  padding: 75px 0;
  overflow: visible;
  background:
    radial-gradient(circle at top left, rgba(238,155,0,0.28), transparent 28%),
    radial-gradient(circle at bottom right, rgba(148,210,189,0.25), transparent 32%),
    linear-gradient(135deg, #001219, #005f73 55%, #0a9396);
}

.register-bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.35;
}

.shape-one {
  width: 360px;
  height: 360px;
  background: #ee9b00;
  right: -120px;
  top: -120px;
}

.shape-two {
  width: 260px;
  height: 260px;
  background: #94d2bd;
  left: -90px;
  bottom: -90px;
}

.register-header {
  color: #fff;
  margin-bottom: 45px;
}

.register-header span {
  display: inline-block;
  background: rgba(255,255,255,0.17);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 900;
  margin-bottom: 18px;
}

.register-header h1 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.1;
}

.register-header p {
  font-size: 19px;
  opacity: 0.95;
}

.premium-info-card,
.premium-form-card {
  background: rgba(255,255,255,0.96);
  border-radius: 36px;
  padding: 35px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.25);
}

.price-card {
  background: linear-gradient(135deg, #ffdf7e, #ee9b00, #ca6702);
  border-radius: 28px;
  padding: 30px;
  color: #001219;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.price-card::after {
  content: "₹";
  position: absolute;
  right: 20px;
  top: -35px;
  font-size: 130px;
  font-weight: 900;
  opacity: 0.12;
}

.price-card small {
  font-weight: 900;
  text-transform: uppercase;
}

.price-card h2 {
  font-size: 56px;
  font-weight: 900;
  margin: 5px 0;
}

.price-card p {
  margin: 0;
  font-weight: 700;
}

.premium-info-card h3,
.payment-steps h4 {
  font-weight: 900;
  color: #001219;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 22px 0 30px;
}

.mini-benefit {
  background: #f3fafb;
  border-radius: 22px;
  padding: 20px;
  border: 1px solid rgba(0,95,115,0.08);
}

.mini-benefit div {
  width: 56px;
  height: 56px;
  background: #fff3d6;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 13px;
}

.mini-benefit h6 {
  font-weight: 900;
  color: #001219;
  margin: 0;
}

.payment-steps {
  border-top: 1px solid #e5eeee;
  padding-top: 25px;
}

.pay-step {
  display: flex;
  gap: 15px;
  margin-top: 17px;
}

.pay-step span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #005f73;
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pay-step b {
  color: #001219;
}

.pay-step p {
  margin: 3px 0 0;
  color: #666;
}

.form-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  margin-bottom: 28px;
}

.form-head span {
  color: #ca6702;
  font-weight: 900;
  text-transform: uppercase;
}

.form-head h2 {
  font-size: 34px;
  font-weight: 900;
  color: #001219;
  margin: 4px 0;
}

.form-head p {
  color: #666;
  margin: 0;
}

.lock-badge {
  background: #e6f7f5;
  color: #005f73;
  padding: 9px 15px;
  border-radius: 50px;
  font-weight: 900;
  white-space: nowrap;
}

.premium-alert {
  background: #e9f8f6;
  border-left: 6px solid #0a9396;
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 25px;
  color: #001219;
}

.premium-alert p {
  margin-bottom: 0;
  font-weight: 700;
}

.qr-result {
  text-align: center;
  margin-top: 18px;
}

.qr-result img {
  max-width: 180px;
  border-radius: 18px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.qr-result strong,
.qr-result span {
  display: block;
  margin-top: 8px;
}

.premium-form-card label {
  font-weight: 900;
  color: #001219;
  margin-bottom: 7px;
}

.premium-form-card input {
  width: 100%;
  border: 0;
  outline: none;
  background: #f2f8f9;
  border-radius: 17px;
  padding: 15px 16px;
  font-weight: 700;
  color: #001219;
}

.premium-form-card input:focus {
  box-shadow: 0 0 0 3px rgba(10,147,150,0.18);
  background: #fff;
}

.premium-form-card small {
  display: block;
  margin-top: 8px;
  color: #777;
}

.submit-register-btn {
  width: 100%;
  border: 0;
  border-radius: 50px;
  padding: 16px;
  background: linear-gradient(135deg, #ee9b00, #ca6702);
  color: #001219;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 12px 28px rgba(238,155,0,0.35);
}

.login-text {
  text-align: center;
  margin: 24px 0 0;
  color: #666;
}

.login-text a {
  color: #ca6702;
  font-weight: 900;
  text-decoration: none;
}

@media(max-width: 768px) {
  .premium-register-page {
    padding: 50px 0;
  }

  .register-header h1 {
    font-size: 34px;
  }

  .premium-info-card,
  .premium-form-card {
    padding: 25px;
    border-radius: 28px;
  }

  .form-head {
    display: block;
  }

  .lock-badge {
    display: inline-block;
    margin-top: 15px;
  }

  .benefit-grid {
    grid-template-columns: 1fr;
  }
}

















.login-pro {
  min-height: 100vh;
  padding: 80px 0;
  background:
    radial-gradient(circle at top left, rgba(238,155,0,0.28), transparent 30%),
    radial-gradient(circle at bottom right, rgba(148,210,189,0.25), transparent 35%),
    linear-gradient(135deg, #001219, #005f73 55%, #0a9396);
}

.login-shell {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 42px;
  overflow: hidden;
  box-shadow: 0 35px 90px rgba(0,0,0,0.30);
}

.login-left {
  color: #fff;
  padding: 70px 55px;
  position: relative;
}

.login-pill {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 900;
  margin-bottom: 25px;
}

.login-left h1 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.08;
  margin-bottom: 22px;
}

.login-left p {
  font-size: 19px;
  line-height: 1.7;
  opacity: 0.95;
  max-width: 620px;
}

.login-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 42px;
}

.login-stats div {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 24px;
  padding: 22px 18px;
  text-align: center;
}

.login-stats h3 {
  color: #ee9b00;
  font-size: 32px;
  font-weight: 900;
  margin: 0;
}

.login-stats span {
  font-size: 14px;
  font-weight: 800;
  opacity: 0.9;
}

.login-right {
  background: rgba(255,255,255,0.96);
  padding: 55px 45px;
  display: flex;
  align-items: center;
}

.member-login-box {
  width: 100%;
}

.login-logo-img {
  width: 95px;
  height: 95px;
  border-radius: 28px;
  background: #f4fbfc;
  padding: 12px;
  margin-bottom: 22px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.member-login-box h2 {
  font-size: 36px;
  font-weight: 900;
  color: #001219;
  margin-bottom: 6px;
}

.member-login-box > p {
  color: #666;
  margin-bottom: 28px;
}

.login-input-group {
  margin-bottom: 20px;
}

.login-input-group label {
  display: block;
  font-weight: 900;
  color: #001219;
  margin-bottom: 8px;
}

.login-input-group input {
  width: 100%;
  border: 0;
  outline: none;
  background: #f2f8f9;
  border-radius: 18px;
  padding: 16px;
  font-weight: 700;
  color: #001219;
}

.login-input-group input:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10,147,150,0.18);
}

.member-login-btn {
  width: 100%;
  border: 0;
  border-radius: 50px;
  padding: 16px;
  background: linear-gradient(135deg, #ee9b00, #ca6702);
  color: #001219;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(238,155,0,0.35);
  transition: 0.3s;
}

.member-login-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(238,155,0,0.45);
}

.login-register-link {
  text-align: center;
  margin-top: 25px;
  color: #666;
  font-weight: 600;
}

.login-register-link a {
  color: #ca6702;
  font-weight: 900;
  text-decoration: none;
}

.login-pro .alert {
  border: 0;
  font-weight: 700;
}

@media(max-width: 992px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-left,
  .login-right {
    padding: 40px 28px;
  }

  .login-left h1 {
    font-size: 36px;
  }

  .login-stats {
    grid-template-columns: 1fr;
  }
}











































































.referral-premium {
  background: linear-gradient(180deg, #f8ffff, #eef9fa);
  overflow: hidden;
}

.premium-hero {
  position: relative;
  background: linear-gradient(135deg, #001219, #005f73 55%, #0a9396);
  color: #fff;
  padding: 70px;
  border-radius: 42px;
  box-shadow: 0 35px 80px rgba(0,0,0,0.28);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  right: -60px;
  top: -60px;
  background: #ee9b00;
  filter: blur(80px);
  opacity: 0.45;
}

.premium-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 800;
  margin-bottom: 20px;
}

.premium-hero h1 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
}

.premium-hero p {
  font-size: 19px;
  max-width: 650px;
  opacity: 0.95;
}

.premium-btn,
.premium-btn-outline {
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 800;
  text-decoration: none;
}

.premium-btn {
  background: linear-gradient(135deg, #ee9b00, #ca6702);
  color: #001219;
}

.premium-btn-outline {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
}

.premium-score-card {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(15px);
  padding: 42px;
  border-radius: 34px;
  text-align: center;
}

.score-ring {
  width: 190px;
  height: 190px;
  margin: 0 auto 25px;
  border-radius: 50%;
  background: conic-gradient(#ee9b00 0 75%, rgba(255,255,255,0.2) 75% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-ring span {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: #001219;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  font-weight: 900;
  color: #ee9b00;
}

.premium-title {
  text-align: center;
  margin: 70px 0 32px;
}

.premium-title span {
  color: #ca6702;
  font-weight: 900;
  text-transform: uppercase;
}

.premium-title h2 {
  font-size: 38px;
  font-weight: 900;
  color: #001219;
}

.premium-level-card {
  background: #fff;
  border-radius: 30px;
  padding: 28px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,95,115,0.08);
  transition: 0.3s;
}

.premium-level-card:hover {
  transform: translateY(-10px);
}

.level-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.level-emoji {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: #f3fbfb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.level-top span {
  font-size: 42px;
  font-weight: 900;
  color: rgba(0,95,115,0.13);
}

.premium-level-card h5 {
  font-weight: 900;
  color: #001219;
}

.premium-level-card p {
  color: #666;
}

.points-line strong {
  font-size: 44px;
  font-weight: 900;
  color: #005f73;
}

.points-line small {
  margin-left: 6px;
  font-weight: 800;
  color: #ca6702;
}

.process-box {
  background: #fff;
  border-radius: 36px;
  padding: 35px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.process-card {
  padding: 30px 22px;
  border-radius: 26px;
  background: #f7fbfb;
}

.process-card.active {
  background: linear-gradient(135deg, #001219, #005f73);
  color: #fff;
}

.process-card span {
  font-size: 40px;
  font-weight: 900;
  color: #ee9b00;
}

.process-card h5 {
  font-weight: 900;
}

.premium-link-card {
  background: #fff;
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 16px 38px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.premium-link-card:hover {
  transform: translateY(-8px);
}

.link-icon {
  font-size: 34px;
  margin-bottom: 15px;
}

.premium-link-card h5 {
  font-weight: 900;
  color: #001219;
}

.premium-link-card p {
  color: #666;
}

.premium-link-card a {
  color: #ca6702;
  font-weight: 900;
  text-decoration: none;
}

@media(max-width: 768px) {
  .premium-hero {
    padding: 35px 24px;
    border-radius: 28px;
  }

  .premium-hero h1 {
    font-size: 34px;
  }

  .score-ring {
    width: 150px;
    height: 150px;
  }

  .score-ring span {
    width: 115px;
    height: 115px;
    font-size: 40px;
  }
}





/* ==========================
   DIRECTORY PAGE
========================== */

.directory-page {
    background: #f8f9fb;
}

/* ==========================
   HERO SECTION
========================== */

.directory-hero {
    background: linear-gradient(135deg, #000814, #003566);
    padding: 90px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.directory-badge {
    display: inline-block;
    background: #ffc300;
    color: #000814;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 18px;
}

.directory-hero h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
}

.directory-hero p {
    font-size: 18px;
    max-width: 650px;
    opacity: .95;
}

/* ==========================
   HERO BUTTONS
========================== */

.hero-actions {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.hero-btn-main,
.hero-btn-outline {
    padding: 14px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}

.hero-btn-main {
    background: #ffc300;
    color: #000814;
}

.hero-btn-main:hover {
    background: #ffd60a;
    color: #000814;
}

.hero-btn-outline {
    border: 2px solid #ffd60a;
    color: #ffd60a;
}

.hero-btn-outline:hover {
    background: #ffd60a;
    color: #000814;
}

/* ==========================
   SEARCH CARD
========================== */

.directory-search-card {
    background: #fff;
    padding: 35px;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

.search-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: #ffd60a;
    color: #000814;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 18px;
}

.directory-search-card h3 {
    font-weight: 800;
    color: #001d3d;
    margin-bottom: 8px;
}

.directory-search-card p {
    color: #6c757d;
}

.directory-search-card input {
    width: 100%;
    border: 1px solid #d8e1ec;
    border-radius: 12px;
    padding: 14px;
    margin: 12px 0;
    outline: none;
}

.directory-search-card input:focus {
    border-color: #003566;
}

.directory-search-card button {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 14px;
    font-weight: 700;
    background: #ffc300;
    color: #000814;
    transition: .3s;
}

.directory-search-card button:hover {
    background: #ffd60a;
}

.directory-search-card small {
    display: block;
    margin-top: 12px;
    color: #666;
}




```css
/* ==========================
   DIRECTORY PAGE
========================== */

.directory-page {
    background: #f5f7fa;
}

/* ==========================
   HERO SECTION
========================== */

.directory-hero {
    background: linear-gradient(135deg,#001d3d,#003566);
    padding: 90px 0;
    color: #fff;
}

.directory-badge {
    display: inline-block;
    background: #ffc300;
    color: #001d3d;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 18px;
}

.directory-hero h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
}

.directory-hero p {
    font-size: 18px;
    max-width: 650px;
    opacity: .95;
}

/* ==========================
   HERO BUTTONS
========================== */

.hero-actions {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.hero-btn-main,
.hero-btn-outline {
    padding: 14px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}

.hero-btn-main {
    background: #ffc300;
    color: #001d3d;
}

.hero-btn-main:hover {
    background: #ffd60a;
    color: #001d3d;
}

.hero-btn-outline {
    border: 2px solid #fff;
    color: #fff;
}

.hero-btn-outline:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}

/* ==========================
   SEARCH CARD
========================== */

.directory-search-card {
    background: #fff;
    padding: 35px;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(0,0,0,.18);
}

.search-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: #fff8d6;
    color: #ffc300;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 18px;
}

.directory-search-card h3 {
    font-weight: 800;
    color: #001d3d;
}

.directory-search-card p {
    color: #6c757d;
}

.directory-search-card input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 14px;
    margin: 12px 0;
    outline: none;
}

.directory-search-card input:focus {
    border-color: #003566;
}

.directory-search-card button {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 14px;
    font-weight: 700;
    background: #ffc300;
    color: #001d3d;
}

.directory-search-card button:hover {
    background: #ffd60a;
}

.directory-search-card small {
    display: block;
    margin-top: 12px;
    color: #555;
}

/* ==========================
   LISTINGS SECTION
========================== */

.directory-listings {
    padding: 80px 0;
}

.directory-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 35px;
}

.directory-heading span {
    color: #ffc300;
    font-weight: 700;
}

.directory-heading h2 {
    color: #001d3d;
    font-weight: 800;
    margin: 8px 0;
}

.directory-heading p {
    color: #6c757d;
    margin: 0;
}

.directory-heading a {
    background: #001d3d;
    color: #fff;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 700;
    transition: .3s;
}

.directory-heading a:hover {
    background: #003566;
}

/* ==========================
   BUSINESS CARD
========================== */

.directory-card {
    background: #001d3d;
    color: #fff;
    border-radius: 24px;
    padding: 26px;
    border: 0;
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
    transition: all .3s ease;
}



.directory-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.avatar-letter {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: linear-gradient(135deg,#ffc300,#ffd60a);
    color: #001d3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
}

.active-status {
    background: #fff8d6;
    color: #8a6500;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.directory-card h4 {
    color: #ffc300;
    font-weight: 800;
    margin-bottom: 12px;
}

.tag-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.tag-area span {
    background: #003566;
    color: #fff;
    border: 1px solid #004b8d;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.directory-desc {
    color: #dfe7f2;
    min-height: 75px;
}

.directory-info {
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 15px;
    margin-top: 15px;
}

.directory-info p {
    margin-bottom: 7px;
    color: #fff;
}

/* Fix card content overflow */
.directory-card {
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


/* Logo fix */
.directory-card img {
    max-width: 100%;
    height: 120px;
    object-fit: contain;
    display: block;
}



/* Business title fix */
.directory-card h4 {
    font-size: 22px;
    line-height: 1.3;
    margin-top: 15px;
    word-break: break-word;
}



/* Description fix */
.directory-desc {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.6;
}



/* Top section fix */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    overflow: hidden;
}


.card-top span {
    flex-shrink: 0;
}



/* Buttons stay inside */
.directory-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


.directory-buttons a {
    flex: 1;
    min-width: 100px;
    text-align: center;
}

.business-logo{
    width:100%;
    max-width:220px;
    height:140px;
    object-fit:contain;
}

/* ==========================
   CARD BUTTONS
========================== */

.directory-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.website-btn,
.phone-btn {
    flex: 1;
    text-align: center;
    text-decoration: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    transition: .3s;
}

.website-btn {
    background: #ffc300;
    color: #001d3d;
}

.website-btn:hover {
    background: #ffd60a;
    color: #001d3d;
}

.phone-btn {
    background: #003566;
    color: #fff;
}

.phone-btn:hover {
    background: #004b8d;
    color: #fff;
}

/* ==========================
   EMPTY LISTING
========================== */

.empty-listing {
    background: #001d3d;
    color: #fff;
    border-radius: 24px;
    padding: 60px;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
}

.empty-listing div {
    font-size: 52px;
}

.empty-listing h3 {
    color: #ffc300;
    font-weight: 800;
    margin-top: 12px;
}

.empty-listing p {
    color: #dfe7f2;
}

.empty-listing a {
    display: inline-block;
    margin-top: 15px;
    background: #ffc300;
    color: #001d3d;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
}

.empty-listing a:hover {
    background: #ffd60a;
}

/* ==========================
   MOBILE
========================== */

@media (max-width:768px){

    .directory-hero{
        padding:60px 0;
    }

    .directory-hero h1{
        font-size:34px;
    }

    .directory-heading{
        display:block;
    }

    .directory-heading a{
        display:inline-block;
        margin-top:15px;
    }

    .directory-buttons{
        flex-direction:column;
    }
}


























.admin-body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(238,155,0,0.16), transparent 30%),
    radial-gradient(circle at bottom right, rgba(10,147,150,0.16), transparent 35%),
    #f4fafb;
  font-family: Arial, sans-serif;
}

.admin-layout {
  min-height: 100vh;
  display: flex;
}

.admin-sidebar {
  width: 270px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 28px 22px;
  background:
    radial-gradient(circle at top, rgba(238,155,0,0.25), transparent 30%),
    linear-gradient(180deg, #001219, #003844, #005f73);
  box-shadow: 12px 0 35px rgba(0,0,0,0.18);
}

.admin-logo {
  color: #ee9b00;
  font-size: 24px;
  font-weight: 900;
  background: rgba(255,255,255,0.12);
  padding: 18px;
  border-radius: 22px;
  margin-bottom: 30px;
  text-align: center;
}

.admin-sidebar a {
  display: block;
  color: #fff;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 16px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.25s;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
  background: linear-gradient(135deg, #ee9b00, #ca6702);
  color: #001219;
  transform: translateX(6px);
}

.logout-link {
  margin-top: 30px;
}

.admin-main {
  margin-left: 270px;
  width: calc(100% - 270px);
  padding: 35px;
}

.admin-top {
  position: relative;
  overflow: hidden;
  padding: 42px;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at right, rgba(238,155,0,0.35), transparent 28%),
    linear-gradient(135deg, #001219, #005f73, #0a9396);
  box-shadow: 0 22px 55px rgba(0,0,0,0.18);
  margin-bottom: 30px;
}

.admin-badge {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  padding: 9px 18px;
  border-radius: 50px;
  font-weight: 900;
  margin-bottom: 14px;
}

.admin-top h1 {
  font-size: 44px;
  font-weight: 900;
}

.stat-card {
  background: #fff;
  padding: 26px;
  border-radius: 28px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  transition: 0.3s;
  border-left: 7px solid #ee9b00;
}

.stat-card:hover {
  transform: translateY(-8px);
}

.stat-card span {
  color: #666;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
}

.stat-card h2 {
  font-size: 42px;
  font-weight: 900;
  color: #001219;
  margin-top: 8px;
}

.approval-card {
  margin-top: 32px;
  background: #fff;
  padding: 30px;
  border-radius: 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.section-head {
  background: #f2f8f9;
  padding: 20px 24px;
  border-radius: 22px;
  margin-bottom: 24px;
}

.section-head span {
  color: #ca6702;
  font-weight: 900;
  text-transform: uppercase;
}

.section-head h3 {
  font-weight: 900;
  margin: 4px 0 0;
}

.admin-table {
  border-collapse: separate;
  border-spacing: 0 12px;
}

.admin-table thead th {
  background: #eef7f8;
  color: #001219;
  border: 0;
  padding: 16px;
}

.admin-table tbody td {
  background: #fff;
  border: 0;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.04);
}

.user-name {
  font-weight: 900;
  color: #001219;
}

.user-email {
  color: #666;
  font-size: 14px;
}

.ref-code,
.txn-code,
.status-badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 50px;
  font-weight: 900;
}

.ref-code {
  background: #fff3d6;
  color: #bb3e03;
}

.txn-code {
  background: #e8f7f7;
  color: #005f73;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-active {
  background: #d1e7dd;
  color: #0f5132;
}

.status-blocked {
  background: #f8d7da;
  color: #842029;
}

.action-btn {
  padding: 9px 15px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  margin-right: 6px;
}

.approve-btn {
  background: #198754;
  color: #fff;
}

.reject-btn {
  background: #dc3545;
  color: #fff;
}

.no-action {
  color: #999;
  font-weight: 800;
}

@media(max-width: 992px) {
  .admin-layout {
    display: block;
  }

  .admin-sidebar {
    position: relative;
    width: 100%;
  }

  .admin-main {
    margin-left: 0;
    width: 100%;
    padding: 20px;
  }
}

































.admin-qr-img {
  background: #fff;
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.qr-code-text {
  font-size: 11px;
  font-weight: 800;
  margin-top: 6px;
  color: #005f73;
}

.pay-status {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  font-weight: 700;
}

.admin-table th,
.admin-table td {
  white-space: nowrap;
}


















.profile-hero {
  background: linear-gradient(135deg,#001219,#005f73);
  padding: 55px 0;
  color: #fff;
}

.member-loyalty-card {
  position: relative;
  min-height: 285px;
  background: linear-gradient(135deg, #18391f, #0e2a18, #06140c);
  border-radius: 20px;
  padding: 28px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

.member-logo {
  width: 120px;
  margin-bottom: 12px;
}

.loyalty-tag {
  display: inline-block;
  background: #d6e51e;
  color: #132d18;
  font-weight: 900;
  padding: 7px 12px;
  border-radius: 7px;
  margin-bottom: 30px;
}

.identifier-label {
  color: #d8ddd8;
  margin-bottom: 0;
}

.member-card-left h3 {
  color: #d6e51e;
  font-size: 22px;
  font-weight: 900;
}

.site-text {
  margin-top: 22px;
  font-size: 18px;
  color: #d8ddd8;
}

.phone-text {
  color: #d6e51e;
  font-size: 17px;
  font-weight: 900;
  text-align: right;
  margin-bottom: 15px;
}

.member-qr {
  width: 150px;
  height: 150px;
  background: #fff;
  padding: 8px;
}

.validity-text {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 18px;
  border: 1px solid #d6e51e;
  border-radius: 30px;
  text-align: center;
  padding: 7px 12px;
  font-size: 14px;
}

.validity-text b {
  font-size: 20px;
}

@media(max-width: 768px) {
  .member-loyalty-card {
    display: block;
    text-align: center;
  }

  .phone-text {
    text-align: center;
  }

  .validity-text {
    position: static;
    margin-top: 20px;
  }
}















/* Login Mobile Responsive */

@media (max-width: 991px) {

  .login-pro {
    min-height: auto !important;
    padding: 40px 15px !important;
  }

  .login-shell {
    grid-template-columns: 1fr !important;
    border-radius: 24px !important;
  }

  .login-left {
    padding: 40px 25px !important;
    text-align: center !important;
  }

  .login-left h1 {
    font-size: 32px !important;
  }

  .login-left p {
    font-size: 16px !important;
  }

  .login-stats {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 25px !important;
  }

  .login-right {
    padding: 25px !important;
  }

  .member-login-box {
    width: 100% !important;
    padding: 30px 22px !important;
    border-radius: 22px !important;
  }

  .login-logo-img img {
    max-width: 110px !important;
  }
}

@media (max-width: 576px) {

  .login-pro {
    padding: 25px 10px !important;
  }

  .login-left {
    padding: 32px 18px !important;
  }

  .login-left h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .login-pill {
    font-size: 13px !important;
    padding: 8px 16px !important;
  }

  .login-stats div {
    padding: 16px !important;
  }

  .login-stats h3 {
    font-size: 22px !important;
  }

  .login-right {
    padding: 18px !important;
  }

  .member-login-box {
    padding: 26px 18px !important;
  }

  .member-login-box h2 {
    font-size: 26px !important;
  }

  .member-login-box p {
    font-size: 14px !important;
  }

  .login-input-group input {
    padding: 13px !important;
    font-size: 15px !important;
  }

  .member-login-btn {
    padding: 14px !important;
    font-size: 15px !important;
  }
}





/* ==========================
   LOGIN PAGE FRIENDLY MOBILE
========================== */

.login-pro {
  min-height: 100vh !important;
  padding: 70px 15px !important;
  background:
    radial-gradient(circle at top left, rgba(238,155,0,0.28), transparent 30%),
    radial-gradient(circle at bottom right, rgba(148,210,189,0.25), transparent 35%),
    linear-gradient(135deg, #001219, #005f73 55%, #0a9396) !important;
}

.login-shell {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  max-width: 1150px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.12) !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.30) !important;
}

.login-left {
  color: #fff !important;
  padding: 60px 50px !important;
}

.login-left h1 {
  font-size: 46px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
}

.login-right {
  background: #fff !important;
  padding: 45px !important;
  display: flex !important;
  align-items: center !important;
}

.member-login-box {
  width: 100% !important;
}

.login-input-group input {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Tablet */
@media (max-width: 991px) {
  .login-pro {
    padding: 45px 14px !important;
  }

  .login-shell {
    grid-template-columns: 1fr !important;
    border-radius: 26px !important;
  }

  .login-left {
    padding: 38px 26px !important;
    text-align: center !important;
  }

  .login-left h1 {
    font-size: 34px !important;
  }

  .login-left p {
    font-size: 16px !important;
  }

  .login-stats {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 25px !important;
  }

  .login-right {
    padding: 28px !important;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .login-pro {
    padding: 20px 10px !important;
  }

  .login-left {
    display: none !important;
  }

  .login-shell {
    border-radius: 22px !important;
  }

  .login-right {
    padding: 22px 18px !important;
  }

  .login-logo-img {
    width: 75px !important;
    height: 75px !important;
    margin: 0 auto 18px !important;
  }

  .member-login-box {
    text-align: center !important;
  }

  .member-login-box h2 {
    font-size: 26px !important;
  }

  .member-login-box > p {
    font-size: 14px !important;
  }

  .login-input-group {
    text-align: left !important;
  }

  .login-input-group input {
    padding: 14px !important;
    font-size: 15px !important;
  }

  .member-login-btn {
    padding: 14px !important;
    font-size: 15px !important;
  }
}
















.profile-readonly-box {
  background: #f1f5f9;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 700;
  color: #001d3d;
  word-break: break-word;
}

.profile-readonly-box.small {
  font-size: 15px;
  font-weight: 600;
}







.avatar-logo{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #eee;
}







.referral-code-box {
    background: rgba(255,255,255,.15);
    padding: 18px 22px;
    border-radius: 18px;
    display: inline-block;
    margin-top: 20px;
}

.referral-code-box span {
    display: block;
    font-size: 14px;
    opacity: .85;
}

.referral-code-box strong {
    font-size: 28px;
    color: #ee9b00;
    letter-spacing: 1px;
}

.live-referral-box {
    margin-top: 18px;
    padding: 14px;
    border-radius: 16px;
    background: #fff3cd;
}

.live-referral-box p {
    margin: 4px 0;
    color: #001219;
}





/* PREMIUM REGISTER FORM */


.register-card{

position:relative;

overflow:visible;

}



.register-card:before{

content:"";

position:absolute;

width:200px;
height:200px;

background:#ffc10733;

border-radius:50%;

top:-80px;
right:-80px;

}




.register-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}



.secure-tag{

background:#e8fff1;

padding:10px 20px;

border-radius:50px;

font-weight:800;

color:#198754;

}



.register-top h2{

font-size:45px;

font-weight:900;

margin-top:15px;

}



.register-icon{

font-size:80px;

}





.form-progress{

display:flex;

align-items:center;

gap:10px;

margin-bottom:35px;

}



.form-progress div{

width:40px;
height:40px;

border-radius:50%;

background:#eee;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

}



.form-progress .active{

background:#ffc107;

}



.form-progress div:not(:last-child){

position:relative;

}



.form-progress div:not(:last-child):after{

content:"";

width:40px;

height:3px;

background:#ffc107;

position:absolute;

right:-40px;

}





.input-box{

margin-bottom:22px;

}



.input-box label{

font-weight:800;

display:block;

margin-bottom:8px;

}



.input-box input{


width:100%;

height:60px;

border-radius:18px;

border:2px solid #eee;

padding:15px;

background:#fafafa;

font-size:16px;

}



.input-box input:focus{


border-color:#ff9800;

outline:none;

background:white;

}




.payment-input{


background:
linear-gradient(135deg,#fff8df,#fff);

padding:25px;

border-radius:25px;

border-left:6px solid #ffc107;

margin-bottom:25px;

}



.payment-input h5{

font-weight:900;

}



.payment-input input{


width:100%;

height:60px;

border-radius:18px;

border:2px solid #eee;

padding:15px;

}



.login-text{

text-align:center;

margin-top:20px;

}


.login-text a{

font-weight:bold;

color:#ff9800;

}






/* FIX REGISTER FORM */

.register-card{
    overflow:visible;
}


.register-card form{
    width:100%;
}


.input-box{
    width:100%;
    margin-bottom:22px;
}


.input-box label{
    display:block;
    font-weight:800;
    margin-bottom:8px;
    color:#111;
}


.input-box input,
.payment-input input{

    width:100%;
    height:58px;

    border-radius:18px;

    border:2px solid #eee;

    padding:0 18px;

    font-size:16px;

    background:#f8fafc;

}


.input-box input:focus,
.payment-input input:focus{

    outline:none;
    border-color:#ff9800;

    background:white;

}


.input-box small,
.payment-input small{

    display:block;
    margin-top:8px;
    color:#777;

}



/* payment box */

.payment-input{

    background:#fff7df;

    padding:25px;

    border-radius:25px;

    margin-top:25px;

    margin-bottom:25px;

}


.payment-input h5{

    font-weight:900;

    margin-bottom:15px;

}



/* top section */


.register-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}


.secure-tag{

    background:#e9fff2;

    color:#008f4c;

    padding:10px 20px;

    border-radius:30px;

    font-weight:800;

}



.register-icon{

    font-size:60px;

}



/* mobile */

@media(max-width:768px){

.register-top{

    display:block;

}


.register-icon{

    margin-top:20px;

}

}




/* =========================
   MOBILE RESPONSIVE REGISTER
========================= */

@media (max-width: 991px){

    .premium-register-page{
        padding-top:20px !important;
        padding-bottom:20px !important;
    }


    .register-header h1{
        font-size:28px;
        line-height:1.2;
    }


    .register-header p{
        font-size:14px;
    }


    /* keep Create Account first */
    .order-1{
        order:1 !important;
    }


    .order-2{
        order:2 !important;
    }


    .premium-form-card,
    .premium-info-card{

        width:100%;
        margin-bottom:25px;
        border-radius:20px;

    }


    .register-top{

        flex-direction:column;
        text-align:center;
        gap:15px;

    }


    .register-icon{
        font-size:40px;
    }


    .input-box input,
    .payment-input input{

        width:100%;
        font-size:16px;
        height:50px;

    }



    .row .col-md-6{

        width:100%;
    }



    .payment-qr-box img{

        width:180px !important;
        max-width:100%;

    }


    .benefit-grid{

        grid-template-columns:1fr 1fr;
        gap:12px;

    }



    .mini-benefit{

        padding:15px 10px;

    }


    .pay-step{

        display:flex;
        gap:10px;
        align-items:flex-start;

    }


    .pay-step span{

        min-width:30px;
        height:30px;
        display:flex;
        align-items:center;
        justify-content:center;

    }


}



@media(max-width:576px){


    .register-header h1{

        font-size:22px;

    }


    .register-header span{

        font-size:12px;

    }


    .container{

        padding-left:15px;
        padding-right:15px;
        

    }



    .benefit-grid{

        grid-template-columns:1fr;

    }



    .price-card h2{

        font-size:35px;

    }



    .submit-register-btn{

        width:100%;
        padding:14px;
        font-size:16px;

    }



    .payment-steps h4{

        font-size:20px;

    }



}

/* ==========================
   REGISTER PAGE RESPONSIVE
========================== */

.register-header h1{
    font-size: 42px;
}

.payment-qr-box img{
    max-width:100%;
    height:auto;
}

.submit-register-btn{
    width:100%;
}

/* Tablet */
@media (max-width: 991px){

    .register-header h1{
        font-size:32px;
    }

    .premium-form-card,
    .premium-info-card{
        padding:20px;
    }

    .register-top{
        flex-direction:column;
        text-align:center;
        gap:15px;
    }

    .benefit-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .payment-qr-box img{
        width:200px !important;
    }
}

/* Mobile */
@media (max-width: 767px){

    .premium-register-page{
        padding-top:20px;
        padding-bottom:20px;
    }

    .register-header h1{
        font-size:26px;
        line-height:1.3;
    }

    .register-header p{
        font-size:14px;
    }

    .register-top{
        flex-direction:column;
        text-align:center;
    }

    .register-icon{
        font-size:40px;
    }

    .benefit-grid{
        grid-template-columns:1fr;
    }

    .mini-benefit{
        padding:15px;
    }

    .payment-qr-box img{
        width:170px !important;
    }

    .input-box input,
    .payment-input input{
        width:100%;
        font-size:16px;
    }

    .price-card h2{
        font-size:32px;
    }

    .pay-step{
        display:flex;
        gap:10px;
        align-items:flex-start;
    }

    .pay-step span{
        min-width:32px;
        height:32px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
}




.login-shell{
    display:flex;
    gap:30px;
    align-items:stretch;
}


/* Desktop */
.login-left{
    order:1;
    flex:1;
}


.login-right{
    order:2;
    flex:1;
}



/* Mobile */
@media(max-width:768px){

.login-shell{
    flex-direction:column;
}


/* Login first */
.login-right{
    order:1;
}


/* Business second */
.login-left{
    order:2;
}


}


/* Desktop: Grow first, Login second */
.login-shell{
    display:flex !important;
    flex-direction:row !important;
}


.login-left{
    order:1 !important;
}


.login-right{
    order:2 !important;
}





/* Mobile: Login first, Grow second */
@media(max-width:768px){

    .login-shell{
        display:flex !important;
        flex-direction:column !important;
    }


    .login-right{
        order:1 !important;
        width:100% !important;
    }


    .login-left{
        order:2 !important;
        width:100% !important;
    }


}







/* LOGIN PAGE */

.login-pro{
    min-height:100vh;
    background:#f5f7fb;
    display:flex;
    align-items:center;
    padding:40px 0;
}

.login-shell{
    max-width:1100px;
    margin:auto;
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    display:flex;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}


/* LEFT SIDE */

.login-left{
    width:50%;
    padding:60px;
    background:linear-gradient(135deg,#0d6efd,#6f42c1);
    color:white;
}


.login-pill{
    background:white;
    color:#0d6efd;
    padding:8px 18px;
    border-radius:30px;
    font-weight:700;
}


.login-left h1{
    margin-top:35px;
    font-size:42px;
}


.login-left p{
    margin-top:20px;
    font-size:18px;
    line-height:1.7;
}


.login-stats{
    display:flex;
    gap:25px;
    margin-top:50px;
}


.login-stats div{
    background:rgba(255,255,255,.15);
    padding:20px;
    border-radius:20px;
}


.login-stats h3{
    margin:0;
}


/* RIGHT SIDE */


.login-right{
    width:50%;
    padding:50px;
    display:flex;
    align-items:center;
}


.member-login-box{
    width:100%;
}


.login-logo-img img{
    width:100px;
}


.member-login-box h2{
    margin-top:20px;
}


.login-input-group{
    margin-bottom:20px;
}


.login-input-group label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
}


.login-input-group input{
    width:100%;
    padding:14px;
    border-radius:12px;
    border:1px solid #ddd;
}


.member-login-btn{
    width:100%;
    padding:15px;
    border:0;
    border-radius:14px;
    background:#0d6efd;
    color:white;
    font-size:18px;
}


.login-register-link{
    text-align:center;
    margin-top:25px;
}



/* MOBILE */

@media(max-width:768px){


.login-pro{
    padding:20px;
}


.login-shell{
    flex-direction:column;
}


/* Login comes first */

.login-right{
    order:1;
    width:100%;
    padding:30px 20px;
}


.login-left{
    order:2;
    width:100%;
    padding:30px 20px;
}


.login-left h1{
    font-size:28px;
}


.login-stats{
    flex-direction:column;
    margin-top:25px;
}


.login-stats div{
    text-align:center;
}


}
.how-section{
    background:linear-gradient(135deg,#fff8e1,#ffffff);
    padding:70px 0;
}


.how-title{
    font-size:42px;
    font-weight:800;
    color:#222;
}


.how-sub{
    max-width:700px;
    margin:auto;
    color:#666;
    font-size:18px;
}



.step-card{

    background:#fff;
    border-radius:20px;
    padding:30px 20px;
    height:100%;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}



.step-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,0,0,.15);

}



.step-number{

    width:55px;
    height:55px;

    border-radius:50%;

    background:#ffc107;

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

    font-size:24px;
    font-weight:bold;

    margin:0 auto 20px;

}



.step-card h4{

    font-weight:700;
    margin-bottom:12px;

}



.step-card p{

    color:#666;
    line-height:1.6;

}




.cta-box{

    margin-top:50px;

    background:#111;

    color:#fff;

    padding:45px;

    border-radius:25px;

}



.cta-box h2{

    font-weight:800;

}




@media(max-width:768px){


    .how-title{

        font-size:30px;

    }


    .cta-box{

        padding:30px 20px;

    }


}



.benefit-section{

    background:linear-gradient(135deg,#fff7df,#fff);

    padding:70px 0;

}



.benefit-title{

    font-size:42px;

    font-weight:800;

    color:#222;

}



.benefit-sub{

    max-width:750px;

    margin:auto;

    color:#666;

    font-size:18px;

}



.benefit-card{

    background:#fff;

    padding:35px 25px;

    border-radius:22px;

    height:100%;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}



.benefit-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}



.benefit-icon{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#ffc107;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

}



.benefit-card h4{

    font-weight:700;

    margin-bottom:15px;

}



.benefit-card p{

    color:#666;

    line-height:1.6;

}




.join-box{

    margin-top:60px;

    padding:45px;

    background:#111;

    color:#fff;

    border-radius:25px;

}



.join-box h2{

    font-weight:800;

}




@media(max-width:768px){


    .benefit-title{

        font-size:30px;

    }


    .join-box{

        padding:30px 20px;

    }


}


#loyaltyCard{
    background:#062d22;
    color:white;
    border-radius:15px;
    padding:12px;
    overflow:hidden;
    box-sizing:border-box;
}



#loyaltyCard img{
    max-width:100%;
}



@media print {


body *{
    visibility:hidden;
}


#loyaltyCard,
#loyaltyCard *{

    visibility:visible;

}


#loyaltyCard{

    position:absolute;
    left:0;
    top:0;

}


}