/* ==================================================
   COLVANTA PROFESSIONAL PLATFORM THEME
   Powered by Redcol Ventures
   Responsive: Mobile, Tablet, Laptop, Desktop
================================================== */

:root{
  --bg1:#020617;
  --bg2:#0f172a;
  --bg3:#111827;
  --primary:#4f46e5;
  --secondary:#7c3aed;
  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --text:#ffffff;
  --muted:#cbd5e1;
  --glass:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.08);
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Segoe UI",sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));
  background-attachment:fixed;
}

img{
  max-width:100%;
  display:block;
}

button{
  border:none;
  cursor:pointer;
  transition:.3s;
}

button:hover{
  transform:translateY(-2px);
}

input,select,textarea{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--glass);
  color:#fff;
  outline:none;
}

input::placeholder,
textarea::placeholder{
  color:var(--muted);
}

/* LANDING */

.hero{
  min-height:100vh;
  padding:25px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.logo{
  font-size:clamp(2rem,5vw,4rem);
  font-weight:700;
}

.powered,.description{
  color:var(--muted);
}

.features{
  width:100%;
  max-width:1400px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:30px;
}

.feature-card{
  background:var(--glass);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:22px;
  padding:20px;
  text-align:center;
}

.feature-card img{
  width:min(110px,35vw);
  height:min(110px,35vw);
  object-fit:contain;
  margin:0 auto 12px;
}

.btn{
  padding:14px 22px;
  border-radius:12px;
  color:#fff;
}

.vendor-btn{
  background:linear-gradient(135deg,#16a34a,#22c55e);
}

.buyer-btn{
  background:linear-gradient(135deg,#2563eb,#4f46e5);
}

/* DASHBOARD */

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

.sidebar{
  width:280px;
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(16px);
  border-right:1px solid var(--border);
  padding:20px;
}

.logo-box{
  text-align:center;
  padding-bottom:15px;
  border-bottom:1px solid var(--border);
}

.profile-box{
  margin-top:20px;
  background:var(--glass);
  border-radius:20px;
  padding:20px;
  text-align:center;
}

.profile-image{
  width:110px;
  height:110px;
  border-radius:50%;
  object-fit:cover;
  margin:auto;
  border:4px solid var(--success);
}

.verified{
  display:inline-block;
  margin-top:10px;
  background:var(--success);
  padding:8px 14px;
  border-radius:20px;
}

.menu{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.menu button{
  background:var(--glass);
  color:#fff;
  padding:14px;
  border-radius:12px;
}

.main-content{
  flex:1;
  padding:20px;
}

.welcome{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  padding:22px;
  border-radius:22px;
  margin-bottom:20px;
}

/* STATS */

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:15px;
  margin-bottom:20px;
}

.stat-card{
  background:var(--glass);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  border-radius:18px;
  min-height:170px;
  padding:15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.stat-card img{
  width:60px;
  height:60px;
  object-fit:contain;
  margin-bottom:10px;
}

.stat-card h2{
  margin-top:6px;
}

/* FEATURE GRID */

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;
}

.cards .feature-card{
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.cards .feature-card img{
  width:90px;
  height:90px;
}

.cards .feature-card button{
  background:var(--primary);
  color:#fff;
  padding:12px;
  border-radius:10px;
}

/* FORMS */

.hero input,
.hero select,
.hero textarea{
  max-width:700px;
}

.hero button{
  max-width:350px;
  width:100%;
}

/* NOTIFICATIONS */

#colvantaNotification{
  animation:slideDown .3s ease;
}

@keyframes slideDown{
  from{
    opacity:0;
    transform:translate(-50%,-20px);
  }
  to{
    opacity:1;
    transform:translate(-50%,0);
  }
}

/* TABLET */

@media(max-width:992px){

  .dashboard{
    flex-direction:column;
  }

  .sidebar{
    width:100%;
  }

  .main-content{
    padding:15px;
  }
}

/* MOBILE */

@media(max-width:768px){

  .hero{
    padding:15px;
  }

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

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

  .profile-image{
    width:90px;
    height:90px;
  }

  .stat-card img{
    width:50px;
    height:50px;
  }

  .cards .feature-card img{
    width:75px;
    height:75px;
  }
}

@media(max-width:480px){

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

  .logo{
    font-size:2rem;
  }
}

/* LARGE SCREENS */

@media(min-width:1600px){

  .cards{
    grid-template-columns:repeat(4,1fr);
  }

  .features{
    grid-template-columns:repeat(5,1fr);
  }
}





/* ===================================
COLVANTA FORM CONTAINERS
=================================== */

.hero form,
.auth-box,
.form-box,
.password-box{

width:100%;
max-width:800px;

padding:30px;

margin:auto;

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

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.08);

border-radius:25px;

box-shadow:
0 10px 35px rgba(0,0,0,.25);

}

/* ===================================
INPUTS
=================================== */

input,
select,
textarea{

background:
rgba(255,255,255,.08) !important;

color:white !important;

border:
1px solid rgba(255,255,255,.12);

}

input:focus,
select:focus,
textarea:focus{

border-color:#4f46e5;

box-shadow:
0 0 15px rgba(79,70,229,.4);

}

input::placeholder,
textarea::placeholder{

color:#94a3b8;

}

/* ===================================
LABELS
=================================== */

label{

color:#e2e8f0;

font-size:14px;

font-weight:500;

}

/* ===================================
CHECKBOXES
=================================== */

input[type="checkbox"]{

width:18px;

height:18px;

accent-color:#4f46e5;

margin-right:8px;

}

/* ===================================
CONTACT SECTION
=================================== */

.contacts{

margin-top:40px;

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.contacts a{

display:flex;

align-items:center;

justify-content:center;

gap:8px;

padding:14px 22px;

border-radius:14px;

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

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.08);

color:white;

font-weight:600;

transition:.3s;

min-width:170px;

}

.contacts a:hover{

background:
linear-gradient(
135deg,
#4f46e5,
#7c3aed
);

transform:
translateY(-3px);

box-shadow:
0 8px 25px rgba(79,70,229,.35);

}

/* ===================================
FORGOT PASSWORD PAGE
=================================== */

.forgot-password-card{

width:100%;

max-width:600px;

margin:auto;

padding:30px;

border-radius:25px;

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

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.08);

text-align:center;

}

.forgot-password-card h1{

margin-bottom:15px;

}

.forgot-password-card p{

color:#cbd5e1;

margin-bottom:20px;

}

/* ===================================
DEFAULT BUTTONS
=================================== */

button{

background:
linear-gradient(
135deg,
#4f46e5,
#7c3aed
);

color:white;

padding:14px 20px;

border-radius:12px;

font-weight:600;

}

button:hover{

box-shadow:
0 8px 20px rgba(79,70,229,.35);

}

/* ===================================
TEXT SECTIONS
=================================== */

.hero p{

color:#cbd5e1;

line-height:1.7;

}

.hero h1,
.hero h2,
.hero h3{

color:white;

}

/* ===================================
DIVIDERS
=================================== */

hr{

border:none;

height:1px;

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

margin:20px 0;

}

/* ===================================
SELLER REGISTRATION
=================================== */

.seller-registration{

max-width:900px;

margin:auto;

padding:25px;

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

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.08);

border-radius:25px;

}

/* ===================================
LOGIN PAGE
=================================== */

.login-container{

width:100%;

max-width:700px;

margin:auto;

padding:30px;

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

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.08);

border-radius:25px;

}

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

@media(max-width:768px){

.contacts{

flex-direction:column;

}

.contacts a{

width:100%;

}

.hero form,
.auth-box,
.form-box,
.password-box,
.login-container,
.seller-registration,
.forgot-password-card{

padding:20px;

}

}






/* =========================
   ORDERS DASHBOARD
========================= */

.product-row{
background:var(--card-bg, #1f2937);
color:var(--text-color, #f9fafb);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
padding:16px;
margin-bottom:16px;
box-shadow:0 2px 10px rgba(0,0,0,.15);
transition:.2s ease;
}

.product-row:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.2);
}

.product-row h4{
color:inherit;
font-weight:700;
}

.product-row p{
color:inherit;
opacity:.9;
}

.product-row b{
color:inherit;
}

.product-row button{
background:rgba(255,255,255,.08);
color:inherit;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
padding:10px 14px;
cursor:pointer;
}

.product-row button:hover{
background:rgba(255,255,255,.15);
}

.stat-card{
background:var(--card-bg, #1f2937);
color:var(--text-color, #f9fafb);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
padding:16px;
}





/* ==========================================
VIEW MY STORE - FEATURE 7
========================================== */


.store-preview{

width:100%;

max-width:1400px;

margin:auto;

padding:20px;

}



/* HEADER */

.store-preview-header{

text-align:center;

margin-bottom:30px;

}


.store-preview-header h1{

font-size:32px;

margin-bottom:10px;

}


.store-preview-header p{

opacity:.75;

}





/* STORE SECTIONS */

.store-preview section,
.store-card{

background:
var(--card-bg, rgba(255,255,255,0.08));

border-radius:20px;

padding:25px;

margin-bottom:25px;

box-shadow:

0 8px 25px rgba(0,0,0,0.08);

}





/* STORE HEADER */

.store-header{

text-align:center;

}



.store-logo{

width:120px;

height:120px;

object-fit:cover;

border-radius:50%;

margin-bottom:15px;

border:4px solid rgba(255,255,255,.5);

}



.store-header h2{

font-size:28px;

margin:10px 0;

}



.store-header p{

font-size:16px;

opacity:.8;

}





/* PRODUCTS GRID */


.store-products{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}




/* PRODUCT CARD */


.store-card{

overflow:hidden;

transition:.3s;

padding:0;

}



.store-card:hover{

transform:translateY(-5px);

}





.store-card img,
.store-product-image{

width:100%;

height:200px;

object-fit:cover;

}





.store-product-info{

padding:15px;

}



.store-product-info h3{

font-size:18px;

margin-bottom:8px;

}



.store-product-info p{

opacity:.75;

margin-bottom:10px;

}



.store-product-info strong{

font-size:18px;

}





/* EMPTY STORE */


.empty-store{

text-align:center;

padding:30px;

opacity:.7;

}





/* PICKUP & DELIVERY */


.store-preview section h2{

margin-bottom:15px;

}



.store-preview ul{

padding-left:20px;

}





/* SOCIAL LINKS */


.social-links{

display:flex;

flex-wrap:wrap;

gap:15px;

justify-content:center;

}



.social-links a{

padding:12px 20px;

border-radius:30px;

text-decoration:none;

background:

rgba(255,255,255,.15);

transition:.3s;

}



.social-links a:hover{

transform:translateY(-3px);

}





/* TABLETS */

@media(max-width:900px){


.store-preview{

padding:15px;

}


.store-card img,
.store-product-image{

height:180px;

}


.store-preview-header h1{

font-size:28px;

}


}





/* PHONES */

@media(max-width:600px){


.store-preview{

padding:10px;

}


.store-preview-header h1{

font-size:24px;

}



.store-preview section,
.store-card{

padding:15px;

border-radius:15px;

}



.store-logo{

width:90px;

height:90px;

}



.store-products{

grid-template-columns:

1fr;

}



.store-card img,
.store-product-image{

height:160px;

}



.social-links a{

width:100%;

text-align:center;

}


}


/* BUYER REGISTRATION */

.buyer-registration{
width:100%;
max-width:700px;
margin:0 auto;
padding:20px;
box-sizing:border-box;
}

.buyer-registration h1{
text-align:center;
margin-bottom:10px;
}

.buyer-registration p{
text-align:center;
line-height:1.6;
}

.buyer-registration input{
width:100%;
padding:14px;
border:1px solid #ddd;
border-radius:10px;
font-size:16px;
box-sizing:border-box;
}

.buyer-registration h3{
margin-top:20px;
margin-bottom:10px;
}

.show-password-label{
display:flex;
align-items:center;
gap:10px;
font-size:15px;
}

@media(max-width:768px){

.buyer-registration{
padding:15px;
}

.buyer-registration input{
font-size:16px;
}

}

@media(max-width:480px){

.buyer-registration{
padding:12px;
}

.buyer-registration h1{
font-size:1.6rem;
}

.buyer-registration p{
font-size:14px;
}

}









/* ==================================================
   BUYER DASHBOARD
================================================== */

.buyer-dashboard{
width:100%;
max-width:1600px;
margin:auto;
padding:20px;
}

.dashboard-brand{
text-align:center;
margin-bottom:25px;
}

.dashboard-brand h1{
font-size:clamp(2rem,4vw,3rem);
margin-bottom:8px;
}

.dashboard-brand p{
color:var(--muted);
}

.buyer-account-card{
display:flex;
align-items:center;
gap:20px;
padding:25px;
margin-bottom:20px;
background:var(--glass);
backdrop-filter:blur(16px);
border:1px solid var(--border);
border-radius:22px;
}

.buyer-avatar img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
border:4px solid var(--success);
}

.buyer-account-info{
flex:1;
}

.buyer-status{
display:inline-block;
margin-top:10px;
padding:8px 14px;
border-radius:20px;
background:var(--success);
color:white;
font-weight:600;
}

.buyer-navigation{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:20px;
}

.buyer-navigation button{
flex:1;
min-width:180px;
}

.buyer-welcome-card{
background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);
padding:25px;
border-radius:22px;
margin-bottom:20px;
}

.buyer-stats{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));
gap:15px;
margin-bottom:25px;
}

.buyer-features{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));
gap:20px;
margin-bottom:25px;
}

.buyer-features .feature-card{
background:var(--glass);
backdrop-filter:blur(16px);
border:1px solid var(--border);
border-radius:22px;
padding:20px;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:280px;
}

.feature-image{
font-size:70px;
text-align:center;
margin-bottom:15px;
}

.buyer-features .feature-card h3{
margin-bottom:10px;
}

.buyer-features .feature-card p{
color:var(--muted);
line-height:1.6;
margin-bottom:15px;
}

.buyer-features .feature-card button{
margin-top:auto;
}

.buyer-status-card,
.buyer-help-card,
.buyer-tips-card{
background:var(--glass);
backdrop-filter:blur(16px);
border:1px solid var(--border);
border-radius:22px;
padding:20px;
margin-bottom:15px;
}

.buyer-status-card h3{
color:var(--success);
}

.buyer-help-card h3{
color:var(--warning);
}

.buyer-tips-card h3{
color:#facc15;
}

/* ==================================================
   LARGE DESKTOPS
================================================== */

@media(min-width:1400px){

.buyer-features{
grid-template-columns:
repeat(4,1fr);
}

.buyer-stats{
grid-template-columns:
repeat(6,1fr);
}

}

/* ==================================================
   TABLETS
================================================== */

@media(max-width:992px){

.buyer-account-card{
flex-direction:column;
text-align:center;
}

.buyer-navigation{
justify-content:center;
}

.buyer-navigation button{
min-width:160px;
}

}

/* ==================================================
   PHONES
================================================== */

@media(max-width:768px){

.buyer-dashboard{
padding:15px;
}

.buyer-navigation{
flex-direction:column;
}

.buyer-navigation button{
width:100%;
}

.buyer-stats{
grid-template-columns:
repeat(2,1fr);
}

.buyer-features{
grid-template-columns:1fr;
}

.feature-image{
font-size:55px;
}

}

/* ==================================================
   SMALL PHONES
================================================== */

@media(max-width:480px){

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

.buyer-avatar img{
width:90px;
height:90px;
}

.dashboard-brand h1{
font-size:2rem;
}

}












.loyalty-page{
padding:15px;
max-width:1200px;
margin:auto;
}

.loyalty-summary{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));
gap:15px;
margin-top:15px;
}

.summary-card{
background:linear-gradient(
135deg,
#0f766e,
#14b8a6
);
color:white;
padding:20px;
border-radius:16px;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.loyalty-rules-list{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));
gap:18px;
margin-top:20px;
}

.loyalty-card{
background:linear-gradient(
135deg,
#2563eb,
#7c3aed
);
color:white;
padding:20px;
border-radius:18px;
box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.loyalty-card-header{
text-align:center;
margin-bottom:15px;
}

.seller-points{
background:rgba(255,255,255,.15);
padding:15px;
border-radius:12px;
text-align:center;
margin-bottom:15px;
}

.loyalty-details{
background:rgba(255,255,255,.1);
padding:15px;
border-radius:12px;
}

.loyalty-details p{
margin:8px 0;
}

.qualified-badge{
background:#16a34a;
padding:10px;
border-radius:10px;
text-align:center;
font-weight:bold;
margin-bottom:12px;
}

.pending-badge{
background:#f59e0b;
padding:10px;
border-radius:10px;
text-align:center;
font-weight:bold;
margin-bottom:12px;
}

@media(max-width:768px){

.loyalty-card{
padding:15px;
}

.summary-card{
padding:15px;
}

}



/* Storefront css*/ 
.storefront-page{
padding:20px;
max-width:1400px;
margin:auto;
}

.storefront-header{
text-align:center;
margin-bottom:20px;
}

.storefront-header h1{
font-size:32px;
margin-bottom:10px;
}

.storefront-header p{
color:#666;
font-size:15px;
}

.search-section{
margin-bottom:25px;
}

.search-section input{
width:100%;
padding:14px;
border:none;
border-radius:14px;
font-size:16px;
background:#ffffff;
box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.storefront-grid{
display:grid;
grid-template-columns:
repeat(
auto-fit,
minmax(300px,1fr)
);
gap:20px;
}

.loading-card{
background:#ffffff;
padding:25px;
border-radius:18px;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.storefront-footer{
margin-top:25px;
text-align:center;
}

.storefront-back-btn{
padding:12px 25px;
border:none;
border-radius:12px;
font-weight:600;
cursor:pointer;
}

@media(max-width:768px){

.storefront-page{
padding:12px;
}

.storefront-header h1{
font-size:26px;
}

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

}



.store-page{
max-width:1400px;
margin:auto;
padding:15px;
background:#f5f7fb;
min-height:100vh;
}

/* =========================
STORE BANNER
========================= */

.store-banner{
position:relative;
width:100%;
height:280px;
overflow:hidden;
border-radius:24px;
margin-bottom:20px;
box-shadow:
0 10px 30px
rgba(0,0,0,.12);
}

.store-banner img,
.store-banner-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* =========================
STORE HEADER
========================= */

.store-header{

background:
linear-gradient(
135deg,
#0f172a,
#1e293b,
#312e81
);

padding:25px;

border-radius:24px;

color:#fff;

margin-top:-70px;

position:relative;

z-index:10;

box-shadow:
0 15px 35px
rgba(
0,
0,
0,
0.18
);

}

.store-header-top{

display:flex;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.store-logo,
.store-logo-large{

width:100px;

height:100px;

border-radius:50%;

object-fit:cover;

background:#fff;

padding:4px;

border:4px solid
rgba(
255,
255,
255,
0.3
);

box-shadow:
0 4px 15px
rgba(
0,
0,
0,
0.15
);

}

.store-info{
flex:1;
}

.store-info h1{

margin:0;

font-size:28px;

font-weight:700;

line-height:1.2;

}

.store-badge{

display:inline-block;

margin-top:8px;

padding:6px 12px;

border-radius:20px;

background:
rgba(
255,
255,
255,
0.15
);

font-size:12px;

font-weight:600;

}

.store-category,
.store-location{

margin-top:8px;

font-size:14px;

opacity:.95;

}

.store-description{

margin-top:15px;

font-size:14px;

line-height:1.7;

color:
rgba(
255,
255,
255,
0.9
);

}

/* =========================
STORE STATS
========================= */

.store-stats{

display:grid;

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

gap:12px;

margin-top:25px;

}

.store-stat-card{

background:
rgba(
255,
255,
255,
0.12
);

backdrop-filter:
blur(10px);

border-radius:16px;

padding:15px;

text-align:center;

transition:.3s;

}

.store-stat-card:hover{

transform:
translateY(-3px);

}

.store-stat-card h3{

margin:0;

font-size:22px;

font-weight:700;

}

.store-stat-card p{

margin-top:5px;

font-size:13px;

opacity:.9;

}

/* =========================
PRODUCTS SECTION
========================= */

.products-section{

margin-top:30px;

}

.products-section h2{

margin-bottom:5px;

font-size:24px;

color:#111827;

}

.products-subtitle{

color:#6b7280;

margin-bottom:20px;

}

/* =========================
JUMIA STYLE PRODUCT GRID
========================= */

.products-grid{

display:grid;

grid-template-columns:
repeat(
auto-fill,
minmax(
220px,
1fr
)
);

gap:15px;

}

.product-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:
0 4px 12px
rgba(
0,
0,
0,
0.08
);

transition:.3s;

}

.product-card:hover{

transform:
translateY(-4px);

box-shadow:
0 10px 20px
rgba(
0,
0,
0,
0.12
);

}

.product-card img{

width:100%;

height:180px;

object-fit:cover;

display:block;

}

.product-body{

padding:12px;

}

.product-name{

font-size:15px;

font-weight:600;

color:#111827;

margin-bottom:6px;

}

.product-description{

font-size:13px;

color:#6b7280;

margin-bottom:10px;

}

.product-price{

font-size:22px;

font-weight:700;

color:#111827;

margin-bottom:10px;

}

.product-btn{

width:100%;

border:none;

border-radius:12px;

padding:12px;

cursor:pointer;

font-weight:600;

background:
linear-gradient(
135deg,
#6c4cff,
#8b5cf6
);

color:#fff;

}

/* =========================
FOOTER ACTIONS
========================= */

.store-footer-actions{

margin-top:30px;

text-align:center;

}

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

@media(
max-width:768px
){

.store-banner{
height:200px;
}

.store-header{
margin-top:-40px;
padding:20px;
}

.store-logo,
.store-logo-large{

width:80px;
height:80px;

}

.store-info h1{

font-size:22px;

}

.store-stats{

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

}

.products-grid{

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

gap:10px;

}

.product-card img{

height:140px;

}

.product-price{

font-size:18px;

}

}

@media(
max-width:480px
){

.products-grid{

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

}

.product-card img{

height:120px;

}

}





/* =================================
STORE DETAILS PANEL
================================= */

.store-details,
.store-details-card{

background:#0f172a !important;

color:#ffffff !important;

border:1px solid rgba(
255,
255,
255,
0.1
);

border-radius:20px;

padding:20px;

margin-top:20px;

box-shadow:
0 10px 25px
rgba(
0,
0,
0,
0.2
);

}

.store-details *,
.store-details-card *{

color:#ffffff !important;

}

/* =================================
SOCIAL LINKS
================================= */

.store-socials{

background:
rgba(
255,
255,
255,
0.05
);

padding:15px;

border-radius:15px;

margin-top:15px;

}

/* =================================
PICKUP STATIONS
================================= */

.store-pickups{

background:
rgba(
255,
255,
255,
0.05
);

padding:15px;

border-radius:15px;

margin-top:15px;

}

/* =================================
PRODUCT CARDS
================================= */

.product-card{

background:#ffffff;

border-radius:18px;

overflow:hidden;

box-shadow:
0 4px 15px
rgba(
0,
0,
0,
0.08
);

}

.product-body{

padding:12px;

background:#ffffff;

}

.product-name{

color:#111827;

font-weight:700;

}

.product-description{

color:#6b7280;

}

.product-price{

color:#16a34a;

font-weight:700;

}

.product-btn{

width:100%;

margin-top:10px;

}





.cart-page{
padding:20px;
}

.cart-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));
gap:15px;
}

.cart-card{
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,.1);
}

.cart-product-image{
width:100%;
height:180px;
object-fit:cover;
}

.cart-card h3,
.cart-card h4,
.cart-card p{
padding-left:15px;
padding-right:15px;
}

.cart-actions{
display:flex;
gap:10px;
padding:15px;
flex-wrap:wrap;
}

.plusQtyBtn,
.minusQtyBtn{
padding:10px 15px;
border:none;
border-radius:10px;
cursor:pointer;
}

.removeCartBtn{
padding:10px 15px;
border:none;
border-radius:10px;
background:red;
color:white;
cursor:pointer;
}

.cart-total-box{
margin-top:20px;
padding:20px;
border-radius:20px;
background:linear-gradient(
135deg,
#4f46e5,
#7c3aed
);
color:white;
}




.cart-card{
background:#ffffff;
border-radius:18px;
padding:15px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
overflow:hidden;
}

.cart-product-image{
width:100%;
height:220px;
object-fit:cover;
border-radius:14px;
margin-bottom:12px;
}

.cart-card-body{
text-align:left;
}

.cart-product-name{
font-size:20px;
font-weight:700;
color:#111827;
margin-bottom:10px;
}

.cart-product-price{
font-size:16px;
font-weight:700;
color:#2563eb;
margin-bottom:8px;
}

.cart-product-qty{
font-size:15px;
font-weight:600;
color:#374151;
margin-bottom:10px;
}

.cart-product-total{
font-size:24px;
font-weight:800;
color:#16a34a;
margin-bottom:15px;
}

.cart-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:auto;
}

.cart-actions button{
flex:1;
min-width:90px;
}

@media(max-width:768px){

.cart-product-image{
height:180px;
}

.cart-product-name{
font-size:18px;
}

.cart-product-total{
font-size:22px;
}

}





/* ==========================================
BUYER ORDERS
========================================== */


.orders-page{

padding:20px;

max-width:1200px;

margin:auto;

color:#111;

}



.orders-header{

margin-bottom:20px;

}



.orders-header h1{

margin-bottom:8px;

color:#111;

}



.orders-header p{

color:#555;

}



.orders-grid{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(320px,1fr)
);

gap:20px;

}




.order-card{

background:#ffffff;

border-radius:20px;

overflow:hidden;

box-shadow:
0 4px 18px
rgba(0,0,0,.08);

border:1px solid #e5e7eb;

transition:.3s;

}



.order-card:hover{

transform:translateY(-3px);

}




.order-card-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px;

background:#f8fafc;

border-bottom:1px solid #eee;

}



.order-title{

margin:0;

font-size:18px;

font-weight:700;

color:#111;

}



.order-date{

margin-top:5px;

font-size:13px;

color:#555;

}




.order-status-badge{

padding:8px 14px;

border-radius:30px;

font-size:13px;

font-weight:700;

background:#dcfce7;

color:#166534;

}




.order-card-body{

padding:18px;

}



/* ==========================================
ORDER INFORMATION
========================================== */


.order-detail-box{

display:flex;

justify-content:space-between;

align-items:center;

background:#ffffff;

border:1px solid #e5e7eb;

border-radius:14px;

padding:14px;

margin-bottom:12px;

}



.order-detail-box label{

font-size:14px;

font-weight:700;

color:#555;

}



.order-detail-box span{

font-size:16px;

font-weight:800;

color:#111;

}



.total-box{

background:#f0fdf4;

border:2px solid #22c55e;

}



.total-box span{

color:#15803d;

font-size:18px;

}




.order-card-footer{

padding:18px;

display:flex;

gap:10px;

border-top:1px solid #eee;

}



.order-card-footer button{

flex:1;

}




.danger-btn{

background:#dc2626;

color:white;

border:none;

padding:12px;

border-radius:10px;

font-weight:700;

cursor:pointer;

}



.danger-btn:hover{

opacity:.9;

}




.orders-footer{

margin-top:25px;

}




.btn{

cursor:pointer;

}




@media(
max-width:768px
){


.orders-grid{

grid-template-columns:1fr;

}



.order-card-footer{

flex-direction:column;

}



.order-card-header{

flex-direction:column;

align-items:flex-start;

gap:10px;

}



.order-detail-box{

flex-direction:column;

align-items:flex-start;

gap:6px;

}


}




/* ==========================================
VIEW ORDER DETAILS
========================================== */


.order-details-page{

padding:20px;

max-width:900px;

margin:auto;

}



.details-card{

background:#ffffff;

border-radius:20px;

padding:20px;

margin-bottom:20px;

box-shadow:
0 4px 18px
rgba(0,0,0,.08);

border:1px solid #e5e7eb;

}



.details-card h2{

margin-bottom:18px;

font-size:20px;

color:#111;

}




.detail-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 0;

border-bottom:1px solid #eee;

}



.detail-row:last-child{

border-bottom:none;

}



.detail-row span{

color:#666;

font-weight:600;

}



.detail-row strong{

color:#111;

font-weight:800;

text-align:right;

}




/* ==========================================
PRODUCTS
========================================== */


.product-order-box{

display:flex;

gap:15px;

align-items:center;

padding:15px;

background:#f8fafc;

border-radius:15px;

margin-bottom:12px;

}



.product-order-box img{

width:70px;

height:70px;

object-fit:cover;

border-radius:12px;

}



.product-order-box h3{

margin:0 0 6px;

color:#111;

font-size:16px;

}



.product-order-box p{

margin:4px 0;

color:#555;

font-size:14px;

}





.total-display{

margin-top:15px;

padding:15px;

border-radius:14px;

background:#f0fdf4;

border:2px solid #22c55e;

font-size:20px;

font-weight:800;

color:#15803d;

text-align:center;

}





/* ==========================================
PAYMENT STATUS
========================================== */


.documents-card{

display:flex;

flex-direction:column;

gap:12px;

}



.documents-card button{

width:100%;

}





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


@media(
max-width:768px
){


.order-details-page{

padding:15px;

}



.detail-row{

flex-direction:column;

align-items:flex-start;

gap:6px;

}



.detail-row strong{

text-align:left;

}



.product-order-box{

align-items:flex-start;

}



.product-order-box img{

width:60px;

height:60px;

}


}





/* ==========================================
ORDERS GRID
2 CARDS PER ROW
========================================== */

.orders-grid{

display:grid;

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

gap:15px;

}



.order-card{

background:#fff;

border-radius:15px;

padding:15px;

box-shadow:
0 3px 10px rgba(0,0,0,0.15);

border-left:
5px solid #2563eb;

color:#222;

}



.orders-filters{

display:grid;

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

gap:10px;

}



.orders-filters input,
.orders-filters select{

padding:12px;

border-radius:8px;

border:1px solid #ccc;

}



.report-buttons{

display:flex;

flex-wrap:wrap;

gap:10px;

}



.report-buttons button{

padding:10px 15px;

border-radius:8px;

border:none;

background:#2563eb;

color:white;

}



@media(max-width:700px){

.orders-grid{

grid-template-columns:
1fr;

}


.orders-filters{

grid-template-columns:
1fr;

}

}







/* ==========================================
RECEIPT PAGE
========================================== */


.receipt-page{

padding:20px;

max-width:700px;

margin:auto;

background:#f8fafc;

min-height:100vh;

}



.receipt-card{

background:white;

padding:30px;

border-radius:15px;

box-shadow:
0 5px 20px
rgba(0,0,0,.08);

border:1px solid #e5e7eb;

}



/* ==========================================
SELLER HEADER
========================================== */


.receipt-card h1{

text-align:center;

font-size:28px;

margin-bottom:15px;

color:#111;

}



.receipt-card h2{

text-align:center;

margin:5px 0;

font-size:22px;

color:#111;

}



.receipt-card>p{

text-align:center;

color:#666;

}




.receipt-card hr{

border:none;

border-top:1px dashed #aaa;

margin:20px 0;

}





/* ==========================================
SECTIONS
========================================== */


.receipt-card h3{

font-size:17px;

margin-bottom:12px;

color:#222;

}



.receipt-card p{

color:#444;

margin:6px 0;

}




/* ==========================================
PRODUCT TABLE
========================================== */


.receipt-product{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 0;

border-bottom:1px solid #eee;

font-size:15px;

}



.receipt-product span{

color:#333;

font-weight:600;

}



.receipt-product strong{

color:#111;

}





/* ==========================================
TOTAL
========================================== */


.receipt-total{

margin-top:20px;

padding:15px;

background:#f0fdf4;

border:2px solid #22c55e;

border-radius:12px;

font-size:22px;

font-weight:800;

text-align:center;

color:#15803d;

}




/* ==========================================
PAYMENT STATUS
========================================== */


.receipt-payment{

margin-top:20px;

padding:15px;

background:#f8fafc;

border-radius:12px;

}



.receipt-payment p{

font-weight:700;

}





/* ==========================================
ACTIONS
========================================== */


.receipt-actions{

display:flex;

gap:15px;

margin-top:25px;

}



.receipt-actions button{

flex:1;

}




/* ==========================================
PRINT VERSION
========================================== */


@media print{


body *{

visibility:hidden;

}



.receipt-page,
.receipt-page *{

visibility:visible;

}



.receipt-page{

position:absolute;

left:0;

top:0;

width:100%;

background:white;

}



.receipt-card{

box-shadow:none;

border:none;

}



.receipt-actions{

display:none;

}



}





/* ==========================================
INVOICE PAGE
========================================== */

.invoice-page{
padding:20px;
display:flex;
justify-content:center;
background:#f5f7fb;
min-height:100vh;
}

.invoice-card{
width:100%;
max-width:850px;
background:#ffffff;
border-radius:20px;
padding:25px;
box-shadow:0 5px 25px rgba(0,0,0,.08);
}

/* ==========================================
HEADER
========================================== */

.invoice-header{
text-align:center;
padding-bottom:20px;
margin-bottom:20px;
border-bottom:1px solid #e5e7eb;
}

.invoice-logo{
width:100px;
height:100px;
object-fit:contain;
margin-bottom:12px;
}

.invoice-header h1{
margin:0;
font-size:30px;
font-weight:700;
color:#111827;
}

.invoice-header h2{
margin:10px 0 5px;
font-size:24px;
font-weight:600;
color:#1f2937;
}

.invoice-header p{
margin:0;
color:#6b7280;
}

/* ==========================================
SECTIONS
========================================== */

.invoice-section{
background:#f9fafb;
border:1px solid #e5e7eb;
border-radius:14px;
padding:16px;
margin-bottom:16px;
}

.invoice-section h3{
margin-top:0;
margin-bottom:12px;
font-size:18px;
color:#111827;
}

.invoice-section p{
margin:8px 0;
color:#374151;
line-height:1.5;
}

/* ==========================================
PRODUCTS
========================================== */

.invoice-product{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
border-bottom:1px solid #e5e7eb;
gap:10px;
}

.invoice-product:last-child{
border-bottom:none;
}

.invoice-product strong{
display:block;
margin-bottom:4px;
font-size:16px;
}

.invoice-product p{
margin:0;
font-size:14px;
color:#6b7280;
}

/* ==========================================
TOTALS
========================================== */

.invoice-totals{
background:#fff8e7;
border:1px solid #f4d03f;
border-radius:14px;
padding:18px;
margin-bottom:16px;
}

.total-row{
display:flex;
justify-content:space-between;
margin-bottom:12px;
font-size:15px;
}

.grand-total{
display:flex;
justify-content:space-between;
align-items:center;
padding-top:15px;
border-top:2px solid #f4d03f;
font-size:22px;
font-weight:700;
color:#111827;
}

/* ==========================================
FOOTER MESSAGE
========================================== */

.invoice-footer{
background:#f3f4f6;
border-radius:14px;
padding:16px;
margin-bottom:16px;
text-align:center;
font-style:italic;
color:#4b5563;
}

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

.receipt-actions{
display:flex;
justify-content:center;
margin-top:20px;
}

.receipt-actions .btn{
width:100%;
max-width:280px;
}

/* ==========================================
PRINT MODE
========================================== */

@media print{

body *{
visibility:hidden;
}

.invoice-card,
.invoice-card *{
visibility:visible;
}

.invoice-card{
position:absolute;
left:0;
top:0;
width:100%;
max-width:none;
box-shadow:none;
border:none;
}

.receipt-actions{
display:none;
}

}

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

@media(max-width:768px){

.invoice-page{
padding:10px;
}

.invoice-card{
padding:18px;
}

.invoice-header h1{
font-size:24px;
}

.invoice-header h2{
font-size:20px;
}

.invoice-product{
flex-direction:column;
align-items:flex-start;
}

.grand-total{
font-size:18px;
}

}





/* ==========================================
DEBT ORDERS PAGE
========================================== */

.debt-page{
padding:15px;
max-width:1200px;
margin:auto;
}

.debt-page-header{
background:#ffffff;
padding:20px;
border-radius:18px;
margin-bottom:20px;
box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.debt-page-header h1{
margin:0 0 8px;
font-size:24px;
font-weight:700;
color:#111827;
}

.debt-page-header p{
margin:0;
color:#64748b;
font-size:14px;
}

.debt-orders-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));
gap:18px;
}

.debt-order-card{
background:#ffffff;
border-radius:20px;
padding:18px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
gap:16px;
transition:.3s;
border:1px solid #e5e7eb;
}

.debt-order-card:hover{
transform:translateY(-4px);
}

.debt-order-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px;
}

.debt-order-top h3{
margin:0;
font-size:17px;
font-weight:700;
color:#111827;
word-break:break-word;
}

.debt-date{
font-size:12px;
color:#6b7280;
margin-top:5px;
}

.debt-status{
background:#fef3c7;
color:#92400e;
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:700;
white-space:nowrap;
}

.debt-order-details{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(140px,1fr));
gap:12px;
}

.detail-item{
background:#f8fafc;
padding:12px;
border-radius:12px;
display:flex;
flex-direction:column;
gap:6px;
border:1px solid #e5e7eb;
}

.detail-item span{
font-size:13px;
font-weight:600;
color:#64748b;
}

.detail-item strong{
font-size:15px;
font-weight:700;
color:#111827;
display:block;
word-break:break-word;
line-height:1.4;
}

.debt-view-btn{
width:100%;
margin-top:5px;
}

.debt-actions{
margin-top:25px;
}

.debt-actions .btn{
width:100%;
}

.empty-debt-state{
background:#ffffff;
padding:35px 20px;
border-radius:18px;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.empty-debt-state img{
width:120px;
max-width:100%;
margin-bottom:15px;
}

.empty-debt-state h3{
margin:0 0 10px;
font-size:20px;
color:#111827;
}

.empty-debt-state p{
color:#64748b;
font-size:14px;
}

@media(max-width:768px){

.debt-page{
padding:10px;
}

.debt-page-header{
padding:16px;
}

.debt-page-header h1{
font-size:20px;
}

.debt-orders-grid{
grid-template-columns:1fr;
}

.debt-order-card{
padding:15px;
}

.debt-order-details{
grid-template-columns:1fr;
}

.detail-item{
padding:10px;
}

.detail-item strong{
font-size:14px;
}

}




.group-info-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;

}


.group-info-card{

background:#ffffff;
padding:20px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,.1);

color:#222;

}



.group-info-card h2{

color:#111;

}



.rule-item{

display:flex;
justify-content:space-between;
padding:12px;
margin-top:8px;
background:#f5f5f5;
border-radius:10px;

}



.group-input{

width:100%;
padding:14px;
border-radius:10px;
border:1px solid #ddd;
margin-top:10px;

}



@media(max-width:600px){

.group-info-grid{

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

}

}


.group-input{
width:100%;
padding:14px;
border:1px solid rgba(255,255,255,.15);
border-radius:12px;
background:#1f2937;
color:#ffffff;
font-size:16px;
font-weight:500;
}

.group-input::placeholder{
color:#9ca3af;
}

.group-input option{
background:#1f2937;
color:#ffffff;
}



/* ==========================================
GROUP ORDER FORM FIX
========================================== */

.group-input{
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:10px;
background:#fff;
color:#222;
font-size:15px;
outline:none;
box-sizing:border-box;
}

.group-input::placeholder{
color:#777;
}

.group-input option{
background:#fff;
color:#222;
}

.group-info-card h2,
.group-info-card p,
.group-info-card label,
.group-info-card strong{
color:#222;
}

#groupName{
color:#222 !important;
background:#fff !important;
}

#groupPickupStation{
color:#222 !important;
background:#fff !important;
}

#groupPickupStation option{
color:#222 !important;
background:#fff !important;
}




.group-cart-card{
background:#1f2937;
border-radius:12px;
padding:15px;
margin-bottom:15px;
}

.group-product-name{
color:#ffffff;
font-size:18px;
font-weight:600;
}

.group-product-qty{
color:#d1d5db;
}

.group-product-total{
color:#22c55e;
font-weight:700;
}

.group-badge{
display:inline-block;
padding:6px 10px;
border-radius:20px;
background:#2563eb;
color:#ffffff;
font-size:12px;
font-weight:600;
}




/* ==========================================
GROUPS GRID
========================================== */

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

.group-card{
background:#fff;
border-radius:12px;
padding:12px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.group-actions{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:10px;
}

.group-actions button{
flex:1;
min-width:80px;
}


@media(max-width:600px){

.groups-grid{
grid-template-columns:1fr 1fr;
gap:8px;
}

.group-card{
padding:10px;
}

}


@media(max-width:768px){

.stores-two-grid{

grid-template-columns:
1fr !important;

}

}








/* ==========================
SELLER ORDERS GRID
========================== */

.orders-grid{

display:grid;

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

gap:15px;

}



.order-card{

background:#ffffff;

color:#222;

border-radius:15px;

padding:15px;

box-shadow:
0 4px 12px rgba(0,0,0,0.12);

border:1px solid #ddd;

}



.order-card h3{

margin-top:0;

color:#1565c0;

}



.order-status{

font-weight:bold;

padding:4px 8px;

border-radius:8px;

background:#eee;

}



.order-actions{

display:flex;

flex-wrap:wrap;

gap:8px;

margin-top:15px;

}



.order-actions button{

padding:8px 12px;

border:none;

border-radius:8px;

cursor:pointer;

}



.order-empty,
.order-error{

padding:30px;

text-align:center;

background:white;

border-radius:15px;

}



/* MOBILE */

@media(max-width:700px){

.orders-grid{

grid-template-columns:
1fr;

}

}







/* ==========================================
INVOICE PAGE
========================================== */

.invoice-page{

width:100%;

padding:20px;

background:#f2f2f2;

}



/* MAIN INVOICE PAPER */

.invoice-card{

max-width:800px;

margin:auto;

background:#ffffff;

padding:30px;

color:#222;

font-family:Arial, sans-serif;

border-radius:12px;

box-shadow:0 4px 15px rgba(0,0,0,0.15);

}



/* TEXT */

.invoice-card p{

color:#222;

font-size:15px;

line-height:1.6;

}



.invoice-card h1{

text-align:center;

color:#111;

}



.invoice-card h2{

text-align:center;

color:#111;

}



.invoice-card h3{

color:#222;

border-bottom:1px solid #ddd;

padding-bottom:5px;

}



/* LOGO */

.invoice-logo{

width:120px;

display:block;

margin:auto;

}



/* DIVIDERS */

.invoice-card hr{

border:none;

border-top:1px solid #ddd;

margin:20px 0;

}



/* PRODUCTS */

.invoice-item{

display:flex;

justify-content:space-between;

padding:12px;

background:#fafafa;

margin-bottom:8px;

border-radius:6px;

border:1px solid #eee;

}



.invoice-item b{

color:#000;

}



/* TOTAL */

.invoice-total{

background:#f8f8f8;

padding:15px;

border-radius:8px;

color:#000;

}



/* BUTTONS */

.invoice-actions{

text-align:center;

margin-top:25px;

}



.invoice-actions button{

background:#111;

color:white;

padding:12px 18px;

margin:5px;

border-radius:8px;

border:none;

cursor:pointer;

}



/* PRINT */

@media print{


body{

background:white;

}


.invoice-page{

background:white;

padding:0;

}


.invoice-card{

box-shadow:none;

border-radius:0;

}



.invoice-actions{

display:none;

}


}





/* ==========================================
   COLVANTA — ECONOMIC IDENTITY
   VISIBLE FORM DESIGN
========================================== */


/* ==========================================
   MODAL ROOT
========================================== */

#economicIdentityModal {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 999999;

    box-sizing: border-box;

}


/* ==========================================
   OVERLAY
========================================== */

.economic-identity-overlay {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

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

    padding: 20px;

    box-sizing: border-box;

    background:
        rgba(0, 0, 0, 0.72);

    overflow-y: auto;

    z-index: 999999;

}


/* ==========================================
   MAIN MODAL
========================================== */

.economic-identity-modal {

    position: relative;

    width: min(
        100%,
        700px
    );

    max-height:
        calc(100vh - 40px);

    box-sizing: border-box;

    overflow-y: auto;

    padding: 32px;

    background:
        #ffffff;

    border:
        1px solid
        #d6d6d6;

    border-radius:
        20px;

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.40);

    animation:
        economicModalIn
        0.22s
        ease-out;

}


/* ==========================================
   MODAL SCROLLBAR
========================================== */

.economic-identity-modal::-webkit-scrollbar {

    width: 7px;

}


.economic-identity-modal::-webkit-scrollbar-track {

    background:
        #eeeeee;

}


.economic-identity-modal::-webkit-scrollbar-thumb {

    background:
        #999999;

    border-radius:
        20px;

}


/* ==========================================
   ANIMATION
========================================== */

@keyframes economicModalIn {

    from {

        opacity: 0;

        transform:
            translateY(18px)
            scale(0.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ==========================================
   CLOSE BUTTON
========================================== */

.economic-close-btn {

    position: absolute;

    top: 14px;
    right: 14px;

    width: 40px;
    height: 40px;

    display: flex;

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

    border:
        1px solid
        #d0d0d0;

    border-radius:
        50%;

    background:
        #f0f0f0;

    color:
        #222222;

    font-size:
        25px;

    line-height:
        1;

    cursor:
        pointer;

    z-index:
        20;

}


.economic-close-btn:hover {

    background:
        #e0e0e0;

}


/* ==========================================
   HEADER
========================================== */

.economic-header {

    text-align:
        center;

    padding:
        8px
        45px
        24px;

}


.economic-icon {

    width:
        64px;

    height:
        64px;

    margin:
        0 auto 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    background:
        #f5ead0;

    font-size:
        31px;

}


.economic-header h2 {

    margin:
        0 0 8px;

    color:
        #1f1f1f;

    font-size:
        26px;

    line-height:
        1.25;

}


.economic-header p {

    max-width:
        520px;

    margin:
        0 auto;

    color:
        #666666;

    font-size:
        14px;

    line-height:
        1.6;

}


/* ==========================================
   INFORMATION BOX
========================================== */

.economic-info-box {

    margin:
        0 0 25px;

    padding:
        17px;

    border:
        1px solid
        #d6d6d6;

    border-left:
        5px solid
        #d4a72c;

    border-radius:
        12px;

    background:
        #f5f5f5;

}


.economic-info-box strong {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #222222;

    font-size:
        14px;

}


.economic-info-box p {

    margin:
        0;

    color:
        #666666;

    font-size:
        13px;

    line-height:
        1.55;

}


/* ==========================================
   FORM
========================================== */

#economicIdentityForm {

    width:
        100%;

}


/* ==========================================
   FORM GRID
========================================== */

.economic-form-grid {

    display:
        grid;

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

    gap:
        0 18px;

}


/* ==========================================
   FULL WIDTH
========================================== */

.economic-form-grid
.economic-form-group.full-width {

    grid-column:
        1 / -1;

}


/* ==========================================
   FORM GROUP
========================================== */

.economic-form-group {

    min-width:
        0;

    margin-bottom:
        21px;

}


/* ==========================================
   LABEL
========================================== */

.economic-form-group label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #171717;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.4;

}


.economic-form-group label span {

    color:
        #d4a72c;

    font-weight:
        800;

    margin-left:
        2px;

}


/* ==========================================
   ⭐ VISIBLE TEXT INPUTS
========================================== */

.economic-form-group
input[type="text"],
.economic-form-group
input[type="password"],
.economic-form-group
input[type="email"],
.economic-form-group
input[type="number"],
.economic-form-group
select {

    display:
        block;

    width:
        100%;

    min-height:
        52px;

    box-sizing:
        border-box;

    padding:
        13px
        15px;

    border:
        2px solid
        #a8adb3;

    border-radius:
        10px;

    background:
        #eeeeee;

    color:
        #171717;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        500;

    outline:
        none;

    box-shadow:
        inset
        0 2px 4px
        rgba(
            0,
            0,
            0,
            0.08
        );

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


/* ==========================================
   INPUT HOVER
========================================== */

.economic-form-group
input[type="text"]:hover,
.economic-form-group
input[type="password"]:hover,
.economic-form-group
select:hover {

    border-color:
        #777777;

    background:
        #e7e7e7;

}


/* ==========================================
   INPUT FOCUS
========================================== */

.economic-form-group
input[type="text"]:focus,
.economic-form-group
input[type="password"]:focus,
.economic-form-group
select:focus {

    border-color:
        #d4a72c;

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(
            212,
            167,
            44,
            0.16
        );

}


/* ==========================================
   PLACEHOLDER
========================================== */

.economic-form-group
input::placeholder {

    color:
        #777777;

    opacity:
        1;

}


/* ==========================================
   SELECT
========================================== */

.economic-form-group
select {

    cursor:
        pointer;

}


/* ==========================================
   HELP TEXT
========================================== */

.economic-form-group small {

    display:
        block;

    margin-top:
        7px;

    color:
        #666666;

    font-size:
        11.5px;

    line-height:
        1.45;

}


/* ==========================================
   ⭐ VISIBLE FILE UPLOAD
========================================== */

.economic-form-group
input[type="file"] {

    display:
        block;

    width:
        100%;

    min-height:
        54px;

    box-sizing:
        border-box;

    padding:
        10px;

    border:
        2px dashed
        #969696;

    border-radius:
        11px;

    background:
        #eeeeee;

    color:
        #444444;

    font-family:
        inherit;

    font-size:
        12px;

    cursor:
        pointer;

    box-shadow:
        inset
        0 2px 4px
        rgba(
            0,
            0,
            0,
            0.05
        );

}


/* ==========================================
   FILE HOVER
========================================== */

.economic-form-group
input[type="file"]:hover {

    border-color:
        #d4a72c;

    background:
        #f7f1df;

}


/* ==========================================
   FILE BUTTON
========================================== */

.economic-form-group
input[type="file"]::file-selector-button {

    margin-right:
        12px;

    padding:
        10px
        14px;

    border:
        1px solid
        #b5b5b5;

    border-radius:
        8px;

    background:
        #dddddd;

    color:
        #222222;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

}


/* ==========================================
   PASSWORD CONTAINER
========================================== */

.economic-password-box {

    position:
        relative;

    width:
        100%;

}


/* ==========================================
   PASSWORD INPUT
========================================== */

.economic-password-box input {

    width:
        100% !important;

    padding-right:
        55px !important;

}


/* ==========================================
   PASSWORD EYE
========================================== */

.economic-eye {

    position:
        absolute;

    top:
        50%;

    right:
        7px;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #444444;

    font-size:
        17px;

    cursor:
        pointer;

}


.economic-eye:hover {

    background:
        #dddddd;

}


/* ==========================================
   AGREEMENT
========================================== */

.economic-agreement {

    margin:
        5px 0 22px;

    padding:
        15px;

    border:
        1px solid
        #cfcfcf;

    border-radius:
        11px;

    background:
        #eeeeee;

}


.economic-agreement label {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        #444444;

    font-size:
        13px;

    line-height:
        1.5;

    cursor:
        pointer;

}


.economic-agreement input {

    flex:
        0 0 auto;

    width:
        18px;

    height:
        18px;

    margin:
        2px 0 0;

    accent-color:
        #d4a72c;

    cursor:
        pointer;

}


/* ==========================================
   SUBMIT BUTTON
========================================== */

.economic-submit-btn {

    width:
        100%;

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        13px
        18px;

    border:
        none;

    border-radius:
        10px;

    background:
        #d4a72c;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        700;

    cursor:
        pointer;

}


.economic-submit-btn:hover {

    background:
        #bd9222;

}


/* ==========================================
   MESSAGE
========================================== */

.economic-message {

    margin-top:
        12px;

    text-align:
        center;

    color:
        #555555;

    font-size:
        13px;

}


.economic-message.success {

    padding:
        11px;

    border-radius:
        9px;

    background:
        #e8f7ed;

    color:
        #216b38;

}


.economic-message.error {

    padding:
        11px;

    border-radius:
        9px;

    background:
        #fdeaea;

    color:
        #a52b2b;

}


/* ==========================================
   DASHBOARD STATUS
========================================== */

.economic-status-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        16px;

    padding:
        16px
        18px;

    border:
        1px solid
        #dddddd;

    border-radius:
        13px;

    background:
        #f0f0f0;

}


.economic-status-card span {

    color:
        #555555;

    font-size:
        13px;

}


.economic-status-card strong {

    padding:
        6px
        10px;

    border-radius:
        20px;

    background:
        #f5ead0;

    color:
        #7a5c08;

    font-size:
        12px;

}


/* ==========================================
   SCORE CARD
========================================== */

.economic-score-card {

    margin-bottom:
        20px;

    padding:
        24px
        18px;

    text-align:
        center;

    border-radius:
        16px;

    background:
        #f5ead0;

}


.economic-score-card span {

    display:
        block;

    color:
        #6f5a1b;

    font-size:
        14px;

}


.economic-score-card strong {

    display:
        block;

    margin:
        8px 0;

    color:
        #2b2b2b;

    font-size:
        44px;

}


/* ==========================================
   PROFILE SECTION
========================================== */

.economic-profile-section {

    margin-bottom:
        18px;

    padding:
        18px;

    border:
        1px solid
        #dddddd;

    border-radius:
        14px;

    background:
        #ffffff;

}


.economic-profile-section h3 {

    margin:
        0 0 14px;

    color:
        #222222;

    font-size:
        17px;

}


/* ==========================================
   DETAILS
========================================== */

.economic-detail {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        11px 0;

    border-bottom:
        1px solid
        #eeeeee;

}


.economic-detail:last-child {

    border-bottom:
        none;

}


.economic-detail span {

    flex:
        0 0 42%;

    color:
        #777777;

    font-size:
        13px;

}


.economic-detail strong {

    flex:
        1;

    text-align:
        right;

    color:
        #222222;

    font-size:
        13px;

    overflow-wrap:
        anywhere;

}


/* ==========================================
   STAT GRID
========================================== */

.economic-stat-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;

}


.economic-stat-grid > div {

    padding:
        16px 8px;

    text-align:
        center;

    border-radius:
        11px;

    background:
        #eeeeee;

}


.economic-stat-grid strong {

    display:
        block;

    color:
        #222222;

    font-size:
        20px;

}


.economic-stat-grid span {

    display:
        block;

    margin-top:
        6px;

    color:
        #777777;

    font-size:
        11px;

}


/* ==========================================
   VERIFICATION NOTICE
========================================== */

.economic-verification-notice {

    margin-top:
        15px;

    padding:
        16px;

    border:
        1px solid
        #d9d9d9;

    border-radius:
        12px;

    background:
        #f0f0f0;

}


.economic-verification-notice p {

    margin:
        8px 0 0;

    color:
        #666666;

    font-size:
        13px;

    line-height:
        1.55;

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 768px) {

    .economic-identity-overlay {

        padding:
            15px;

    }


    .economic-identity-modal {

        width:
            100%;

        max-width:
            650px;

        max-height:
            calc(100vh - 30px);

        padding:
            26px;

    }


    .economic-form-grid {

        grid-template-columns:
            1fr;

    }


    .economic-form-grid
    .economic-form-group.full-width {

        grid-column:
            auto;

    }

}


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

@media (max-width: 600px) {

    .economic-identity-overlay {

        align-items:
            flex-start;

        padding:
            8px;

    }


    .economic-identity-modal {

        width:
            100%;

        max-width:
            none;

        max-height:
            calc(100vh - 16px);

        padding:
            22px
            16px
            20px;

        border-radius:
            16px;

    }


    .economic-close-btn {

        top:
            9px;

        right:
            9px;

        width:
            36px;

        height:
            36px;

    }


    .economic-header {

        padding:
            5px
            35px
            20px;

    }


    .economic-header h2 {

        font-size:
            21px;

    }


    .economic-header p {

        font-size:
            13px;

    }


    .economic-form-group {

        margin-bottom:
            17px;

    }


    .economic-form-group label {

        font-size:
            13px;

    }


    .economic-form-group
    input[type="text"],
    .economic-form-group
    input[type="password"],
    .economic-form-group
    select {

        min-height:
            50px;

        padding:
            12px
            13px;

        font-size:
            14px;

        border-width:
            2px;

    }


    .economic-form-group
    input[type="file"] {

        min-height:
            52px;

        padding:
            9px;

        font-size:
            11px;

    }


    .economic-agreement {

        padding:
            13px;

    }


    .economic-agreement label {

        font-size:
            12px;

    }


    .economic-submit-btn {

        min-height:
            50px;

    }


    .economic-status-card {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .economic-detail {

        flex-direction:
            column;

        gap:
            4px;

    }


    .economic-detail strong {

        text-align:
            left;

    }


    .economic-stat-grid {

        grid-template-columns:
            1fr;

    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width: 380px) {

    .economic-identity-overlay {

        padding:
            5px;

    }


    .economic-identity-modal {

        max-height:
            calc(100vh - 10px);

        padding:
            19px
            13px
            17px;

    }


    .economic-form-group
    input[type="text"],
    .economic-form-group
    input[type="password"],
    .economic-form-group
    select {

        min-height:
            48px;

        padding:
            11px
            12px;

        font-size:
            13px;

    }

}


/* ==========================================
   ACCESSIBILITY
========================================== */

.economic-form-group
input:focus-visible,
.economic-form-group
select:focus-visible {

    border-color:
        #d4a72c;

    outline:
        3px solid
        rgba(
            212,
            167,
            44,
            0.18
        );

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .economic-identity-modal {

        animation:
            none;

    }

}









/* ==========================================
   COLVANTA ECONOMIC IDENTITY
   FINAL INPUT VISIBILITY OVERRIDE
========================================== */

#economicIdentityModal
.economic-real-input {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    position: relative !important;

    z-index: 1000 !important;

    width: 100% !important;

    min-height: 52px !important;

    box-sizing: border-box !important;

    padding: 13px 15px !important;

    border: 2px solid #999999 !important;

    border-radius: 10px !important;

    background: #eeeeee !important;

    background-color: #eeeeee !important;

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

    font-family: Arial, sans-serif !important;

    font-size: 15px !important;

    font-weight: 500 !important;

    line-height: 1.4 !important;

    text-shadow: none !important;

    outline: none !important;

}


#economicIdentityModal
.economic-real-input::placeholder {

    color: #666666 !important;

    -webkit-text-fill-color: #666666 !important;

    opacity: 1 !important;

}


#economicIdentityModal
.economic-real-input:focus {

    background: #ffffff !important;

    background-color: #ffffff !important;

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

    border-color: #d4a72c !important;

    box-shadow:
        0 0 0 4px
        rgba(212, 167, 44, 0.18) !important;

}


#economicIdentityModal
.economic-input-shell {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    min-height: 52px !important;

    background: #eeeeee !important;

    border-radius: 10px !important;

    overflow: visible !important;

    z-index: 999 !important;

}


#economicIdentityModal
.economic-form-group {

    position: relative !important;

    z-index: 10 !important;

}


#economicIdentityModal
.economic-form-group label {

    position: relative !important;

    z-index: 20 !important;

    color: #111111 !important;

}


#economicIdentityModal
.economic-form-group small {

    color: #555555 !important;

}


/* ==========================================
   FILE INPUTS
========================================== */

#economicIdentityModal
.economic-real-file {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: 100% !important;

    min-height: 54px !important;

    box-sizing: border-box !important;

    padding: 10px !important;

    border: 2px dashed #888888 !important;

    border-radius: 10px !important;

    background: #eeeeee !important;

    background-color: #eeeeee !important;

    color: #222222 !important;

    font-size: 12px !important;

    z-index: 1000 !important;

}


#economicIdentityModal
.economic-file-shell {

    position: relative !important;

    width: 100% !important;

    min-height: 54px !important;

    background: #eeeeee !important;

    border-radius: 10px !important;

    z-index: 999 !important;

}


/* ==========================================
   PASSWORD EYE
========================================== */

#economicIdentityModal
.economic-eye {

    position: absolute !important;

    top: 50% !important;

    right: 6px !important;

    transform: translateY(-50%) !important;

    z-index: 2000 !important;

    width: 38px !important;

    height: 38px !important;

    border: none !important;

    background: transparent !important;

    color: #222222 !important;

    cursor: pointer !important;

}


/* ==========================================
   REMOVE POSSIBLE GLOBAL OVERLAY
========================================== */

#economicIdentityModal
.economic-input-shell::before,

#economicIdentityModal
.economic-input-shell::after,

#economicIdentityModal
.economic-form-group::before,

#economicIdentityModal
.economic-form-group::after {

    content: none !important;

    display: none !important;

}








/* ==========================================================
   COLVANTA — PARTNER ACCESS
========================================================== */

.partner-access-page {

    position: relative;

    min-height: 100vh;

    width: 100%;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(80, 90, 255, 0.12),
            transparent 38%
        ),
        #05070d;

    color: #ffffff;

}


/* ==========================================================
   BACKGROUND ORBS
========================================================== */

.partner-access-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

    opacity: 0.22;

}


.orb-one {

    width: 320px;

    height: 320px;

    top: -150px;

    left: -100px;

    background:
        rgba(88, 101, 242, 0.35);

}


.orb-two {

    width: 300px;

    height: 300px;

    right: -130px;

    bottom: -130px;

    background:
        rgba(0, 210, 255, 0.22);

}


/* ==========================================================
   WRAPPER
========================================================== */

.partner-access-wrapper {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 480px;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* ==========================================================
   BRAND
========================================================== */

.partner-access-brand {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 26px;

}


.partner-access-mark {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #181d32,
            #0b0e18
        );

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.12
        );

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.35);

    font-size: 21px;

    font-weight: 900;

    letter-spacing: -1px;

}


.partner-access-brand-name {

    font-size: 22px;

    font-weight: 800;

    letter-spacing: -0.5px;

}


.partner-access-powered {

    margin-top: 3px;

    font-size: 8px;

    letter-spacing: 1.5px;

    opacity: 0.42;

}


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

.partner-access-card {

    width: 100%;

    padding: 42px 38px 30px;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 22, 35, 0.96),
            rgba(8, 10, 17, 0.98)
        );

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.09
        );

    box-shadow:
        0 35px 90px
        rgba(0, 0, 0, 0.55);

    backdrop-filter:
        blur(20px);

}


/* ==========================================================
   ICON
========================================================== */

.partner-access-icon {

    width: 58px;

    height: 58px;

    margin: 0 auto 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid
        rgba(255,255,255,0.09);

}


.partner-access-icon span {

    font-size: 26px;

    opacity: 0.85;

}


/* ==========================================================
   HEADER
========================================================== */

.partner-access-header {

    text-align: center;

}


.partner-access-eyebrow {

    margin-bottom: 10px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    opacity: 0.42;

}


.partner-access-header h1 {

    margin: 0;

    font-size: 31px;

    line-height: 1.15;

    letter-spacing: -1.2px;

}


.partner-access-header p {

    max-width: 380px;

    margin: 14px auto 0;

    font-size: 14px;

    line-height: 1.7;

    color: rgba(
        255,
        255,
        255,
        0.58
    );

}


/* ==========================================================
   ACTIONS
========================================================== */

.partner-access-actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 30px;

}


.partner-access-actions button {

    width: 100%;

    min-height: 56px;

    border-radius: 14px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;

}


.partner-access-actions button:hover {

    transform:
        translateY(-2px);

}


/* ==========================================================
   LOGIN
========================================================== */

.partner-access-login {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 18px;

    border: none;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #dfe3ed
        );

    color: #07090f;

    box-shadow:
        0 10px 30px
        rgba(255,255,255,0.07);

}


.partner-access-arrow {

    font-size: 20px;

    font-weight: 400;

}


/* ==========================================================
   REGISTER
========================================================== */

.partner-access-register {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    color: #ffffff;

}


.partner-access-register:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.17
        );

}


.partner-register-icon {

    font-size: 20px;

    font-weight: 400;

    opacity: 0.65;

}


/* ==========================================================
   TRUST NOTE
========================================================== */

.partner-access-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 22px;

    padding: 12px 14px;

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.055
        );

    font-size: 11px;

    line-height: 1.5;

    color:
        rgba(
            255,
            255,
            255,
            0.46
        );

}


.partner-note-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    font-size: 10px;

}


/* ==========================================================
   BACK
========================================================== */

.partner-access-back {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    margin-top: 22px;

    padding: 10px;

    border: none;

    background: transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.45
        );

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

    transition:
        color 0.2s ease;

}


.partner-access-back:hover {

    color: #ffffff;

}


/* ==========================================================
   FOOTER
========================================================== */

.partner-access-footer {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 22px;

    font-size: 9px;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    opacity: 0.28;

}


.partner-footer-dot {

    opacity: 0.5;

}


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

@media (max-width: 520px) {

    .partner-access-page {

        padding:
            25px 15px;

    }


    .partner-access-card {

        padding:
            34px 22px 26px;

        border-radius: 22px;

    }


    .partner-access-header h1 {

        font-size: 27px;

    }


    .partner-access-header p {

        font-size: 13px;

    }


    .partner-access-icon {

        width: 52px;

        height: 52px;

    }

}







/* ==========================================================
   PARTNER LOGIN FORM
========================================================== */

.partner-login-form {

    margin-top: 28px;

}


.partner-form-group {

    text-align: left;

    margin-bottom: 18px;

}


.partner-form-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.4px;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

}


.partner-form-group input {

    width: 100%;

    box-sizing: border-box;

    height: 54px;

    padding: 0 15px;

    border-radius: 13px;

    outline: none;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;

}


.partner-form-group input:focus {

    border-color:
        rgba(
            255,
            255,
            255,
            0.25
        );

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );

}


.partner-form-group input::placeholder {

    color:
        rgba(
            255,
            255,
            255,
            0.25
        );

}


/* ==========================================================
   LOGIN MESSAGE
========================================================== */

.partner-login-message {

    min-height: 20px;

    margin-bottom: 10px;

    font-size: 12px;

    line-height: 1.5;

    text-align: center;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

}


/* ==========================================================
   DISABLED LOGIN
========================================================== */

.partner-access-login:disabled {

    cursor:
        not-allowed;

    opacity:
        0.55;

    transform:
        none !important;

}


/* ==========================================================
   FORGOT PASSWORD
========================================================== */

.partner-forgot-password {

    display: block;

    margin:
        17px auto 0;

    padding: 5px;

    border: none;

    background: transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.45
        );

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;

}


.partner-forgot-password:hover {

    color: #ffffff;

}


/* ==========================================================
   REGISTER PROMPT
========================================================== */

.partner-login-register {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin-top: 25px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

    font-size: 11px;

    color:
        rgba(
            255,
            255,
            255,
            0.38
        );

}


.partner-login-register button {

    padding: 0;

    border: none;

    background: transparent;

    color: #ffffff;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

}


.partner-login-register button:hover {

    text-decoration: underline;

}





/* ==========================================================
   PARTNER REGISTRATION
========================================================== */

.partner-registration-page {

    min-height: 100vh;

    width: 100%;

    position: relative;

    overflow: hidden;

    padding: 40px 18px 70px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(80, 90, 255, 0.10),
            transparent 38%
        ),
        #05070d;

    color: #ffffff;

}


.partner-registration-wrapper {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 900px;

    margin: auto;

}


.partner-registration-heading {

    text-align: center;

    margin:
        10px auto 28px;

    max-width: 650px;

}


.partner-registration-heading h1 {

    margin: 8px 0 12px;

    font-size: 32px;

    letter-spacing: -1.2px;

}


.partner-registration-heading p {

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );

    font-size: 14px;

    line-height: 1.7;

}


/* ==========================================================
   REGISTRATION CARD
========================================================== */

.partner-registration-card {

    padding:
        10px 34px 34px;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 22, 35, 0.97),
            rgba(7, 9, 15, 0.99)
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    box-shadow:
        0 35px 90px
        rgba(
            0,
            0,
            0,
            0.55
        );

}


/* ==========================================================
   SECTIONS
========================================================== */

.partner-registration-section {

    padding:
        32px 0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

}


.partner-section-title {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 24px;

}


.partner-section-number {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 38px;

    height: 38px;

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.5px;

    opacity: 0.65;

}


.partner-section-title h2 {

    margin: 0;

    font-size: 18px;

    letter-spacing: -0.3px;

}


.partner-section-title p {

    margin:
        5px 0 0;

    font-size: 12px;

    line-height: 1.5;

    color:
        rgba(
            255,
            255,
            255,
            0.42
        );

}


/* ==========================================================
   FORM GRID
========================================================== */

.partner-form-grid {

    display: grid;

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

    gap: 18px;

}


.partner-full {

    grid-column:
        1 / -1;

}


.partner-form-group {

    min-width: 0;

}


.partner-form-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 11px;

    font-weight: 700;

    color:
        rgba(
            255,
            255,
            255,
            0.60
        );

}


.partner-form-group label span {

    color: #ffffff;

}


.partner-form-group input,
.partner-form-group select,
.partner-form-group textarea {

    width: 100%;

    box-sizing: border-box;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: 12px;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;

}


.partner-form-group input,
.partner-form-group select {

    height: 52px;

    padding:
        0 14px;

}


.partner-form-group textarea {

    padding:
        13px 14px;

    resize: vertical;

    line-height: 1.55;

}


.partner-form-group input:focus,
.partner-form-group select:focus,
.partner-form-group textarea:focus {

    border-color:
        rgba(
            255,
            255,
            255,
            0.23
        );

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );

}


.partner-form-group input::placeholder,
.partner-form-group textarea::placeholder {

    color:
        rgba(
            255,
            255,
            255,
            0.23
        );

}


.partner-form-group select option {

    background: #10131d;

    color: #ffffff;

}


/* ==========================================================
   BRANCH
========================================================== */

.partner-branch-card {

    padding: 22px;

    margin-bottom: 14px;

    border-radius: 17px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.065
        );

}


.partner-branch-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

}


.partner-branch-header strong {

    font-size: 13px;

}


.partner-remove-branch {

    border: none;

    background: transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.40
        );

    font-size: 11px;

    cursor: pointer;

}


.partner-remove-branch:hover {

    color: #ffffff;

}


.partner-add-branch {

    width: 100%;

    min-height: 50px;

    border-radius: 12px;

    border:
        1px dashed
        rgba(
            255,
            255,
            255,
            0.15
        );

    background: transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

}


.partner-add-branch:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    color: #ffffff;

}


/* ==========================================================
   DOCUMENTS
========================================================== */

.required-title {

    margin-left: 8px;

    font-size: 8px;

    letter-spacing: 1px;

    opacity: 0.45;

}


.partner-document-upload {

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 10px 18px;

    align-items: center;

    padding: 17px;

    margin-bottom: 10px;

    border-radius: 14px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

}


.partner-document-info {

    display: flex;

    align-items: center;

    gap: 12px;

}


.partner-document-icon {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.5px;

}


.partner-document-info strong {

    display: block;

    font-size: 12px;

}


.partner-document-info p {

    margin:
        4px 0 0;

    font-size: 10px;

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );

}


.partner-upload-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 38px;

    padding:
        0 15px;

    border-radius: 10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;

}


.partner-upload-button:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

}


.partner-file-name {

    grid-column:
        1 / -1;

    font-size: 10px;

    color:
        rgba(
            255,
            255,
            255,
            0.32
        );

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* ==========================================================
   VERIFICATION WARNING
========================================================== */

.partner-verification-warning {

    display: flex;

    gap: 10px;

    margin-top: 18px;

    padding: 14px;

    border-radius: 12px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

}


.partner-verification-warning > span {

    width: 20px;

    height: 20px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    font-size: 10px;

}


.partner-verification-warning p {

    margin: 0;

    font-size: 10px;

    line-height: 1.6;

    color:
        rgba(
            255,
            255,
            255,
            0.40
        );

}


/* ==========================================================
   SUBMIT
========================================================== */

.partner-registration-message {

    min-height: 22px;

    margin-top: 24px;

    text-align: center;

    font-size: 12px;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

}


.partner-submit-button {

    width: 100%;

    height: 58px;

    margin-top: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 18px;

    border: none;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #dfe3ed
        );

    color: #06080d;

    font-family: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

}


.partner-submit-button:hover {

    opacity: 0.9;

}


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

@media (max-width: 650px) {

    .partner-registration-page {

        padding:
            25px 12px 50px;

    }


    .partner-registration-card {

        padding:
            8px 18px 25px;

        border-radius: 20px;

    }


    .partner-form-grid {

        grid-template-columns: 1fr;

    }


    .partner-full {

        grid-column: auto;

    }


    .partner-registration-heading h1 {

        font-size: 27px;

    }


    .partner-registration-heading p {

        font-size: 13px;

    }


    .partner-document-upload {

        grid-template-columns: 1fr;

    }


    .partner-upload-button {

        width: 100%;

    }


    .partner-file-name {

        grid-column: auto;

    }

}