/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM UI CSS v4
PART 1
GLOBAL • VARIABLES • BODY • BUTTONS • CARD • NAVBAR
==========================================================*/

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

:root{

--primary:#7c3aed;
--primary-dark:#5b21b6;
--secondary:#9333ea;

--success:#16a34a;
--danger:#ef4444;
--warning:#f59e0b;

--text:#111827;
--text-light:#6b7280;

--white:#ffffff;
--bg:#f7f8fc;
--border:#e5e7eb;

--shadow-sm:0 8px 25px rgba(15,23,42,.06);
--shadow:0 20px 45px rgba(15,23,42,.08);
--shadow-lg:0 35px 70px rgba(15,23,42,.12);

--radius:22px;
--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;
overflow-x:hidden;

}

body{

font-family:'Poppins',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
position:relative;

}

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

body::before{

content:"";
position:fixed;
left:-220px;
top:-220px;
width:550px;
height:550px;
background:radial-gradient(circle,#c084fc40,transparent 70%);
z-index:-2;
animation:blob1 18s infinite linear;

}

body::after{

content:"";
position:fixed;
right:-220px;
bottom:-220px;
width:550px;
height:550px;
background:radial-gradient(circle,#60a5fa35,transparent 70%);
z-index:-2;
animation:blob2 20s infinite linear;

}

@keyframes blob1{

0%{transform:translate(0,0);}
50%{transform:translate(70px,40px);}
100%{transform:translate(0,0);}

}

@keyframes blob2{

0%{transform:translate(0,0);}
50%{transform:translate(-70px,-40px);}
100%{transform:translate(0,0);}

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
transition:.3s;

}

.container{

position:relative;
z-index:2;

}

section{

padding:85px 0;

}

/*==============================
TYPOGRAPHY
==============================*/

h1,h2,h3,h4,h5,h6{

font-weight:800;
color:var(--text);

}

p{

color:var(--text-light);
line-height:1.8;

}

.section-title{

font-size:42px;
font-weight:800;
text-align:center;
margin-bottom:55px;

}

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

.card{

border:none;
border-radius:24px;
overflow:hidden;
background:#fff;
box-shadow:var(--shadow-sm);
transition:.35s;

}

.card:hover{

transform:translateY(-8px);
box-shadow:var(--shadow);

}

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

.btn{

border-radius:999px;
padding:14px 32px;
font-weight:700;
transition:.3s;

}

.btn:hover{

transform:translateY(-3px);

}

.btn-primary{

background:linear-gradient(135deg,var(--primary),var(--secondary));
border:none;
box-shadow:0 15px 35px rgba(124,58,237,.25);

}

.btn-primary:hover{

background:linear-gradient(135deg,var(--primary-dark),var(--primary));

}

.btn-outline-primary{

border:2px solid var(--primary);
color:var(--primary);

}

.btn-outline-primary:hover{

background:var(--primary);
color:#fff;

}

/*==============================
NAVBAR
==============================*/

.navbar{

position:sticky;
top:0;
z-index:1050;
padding:14px 0;

background:rgba(255,255,255,.88);
backdrop-filter:blur(18px);

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

}

.navbar-brand{

font-size:30px;
font-weight:800;
color:var(--primary)!important;

}

.nav-link{

font-weight:600;
padding:10px 18px!important;
border-radius:14px;
transition:.3s;

}

.nav-link:hover{

background:#f3f0ff;
color:var(--primary)!important;

}

.nav-link.active{

background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff!important;

}

.nav-icon{

width:46px;
height:46px;

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

border-radius:15px;

background:#fff;

box-shadow:var(--shadow-sm);

margin-left:10px;

transition:.3s;

}

.nav-icon:hover{

background:var(--primary);
color:#fff;
transform:translateY(-3px);

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM UI CSS v4
PART 2
HERO SECTION
==========================================================*/

.hero{

position:relative;
overflow:hidden;

padding:80px 0;

min-height:700px;

display:flex;
align-items:center;

}

.hero::before{

content:"";

position:absolute;

right:-250px;
top:-250px;

width:650px;
height:650px;

border-radius:50%;

background:radial-gradient(circle,#c084fc35,transparent 70%);

z-index:-1;

}

.hero::after{

content:"";

position:absolute;

left:-180px;
bottom:-180px;

width:450px;
height:450px;

border-radius:50%;

background:radial-gradient(circle,#60a5fa25,transparent 70%);

z-index:-1;

}

/*==========================
LEFT
==========================*/

.hero-badge{

display:inline-flex;

align-items:center;
gap:10px;

padding:14px 24px;

border-radius:999px;

background:#fff;

box-shadow:var(--shadow-sm);

font-size:15px;
font-weight:700;

color:var(--primary);

margin-bottom:28px;

}

.hero-title{

font-size:64px;

font-weight:800;

line-height:1.08;

margin-bottom:24px;

max-width:700px;

}

.hero-title span{

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

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero-text{

font-size:18px;

max-width:620px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:35px;

}

.hero-buttons .btn{

padding:16px 34px;

font-size:16px;

}

.hero-buttons .btn-primary{

box-shadow:0 18px 40px rgba(124,58,237,.25);

}

.hero-buttons .btn-outline-primary{

background:#fff;

}

/*==========================
FEATURES
==========================*/

.hero-features{

display:flex;

flex-wrap:wrap;

gap:20px;

margin-top:20px;

}

.hero-features div{

display:flex;

align-items:center;

gap:14px;

padding:14px 20px;

background:#fff;

border-radius:18px;

box-shadow:var(--shadow-sm);

transition:.3s;

}

.hero-features div:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}

.hero-features i{

width:52px;
height:52px;

display:flex;

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

border-radius:16px;

background:#f3f0ff;

font-size:22px;

color:var(--primary);

}

/*==========================
RIGHT IMAGE
==========================*/

.hero-image{

position:relative;

text-align:center;

}

.hero-image img{

max-width:500px;

margin:auto;

animation:heroFloat 5s ease-in-out infinite;

filter:drop-shadow(0 30px 60px rgba(124,58,237,.22));

}

.hero-glow{

position:absolute;

left:50%;
top:50%;

transform:translate(-50%,-50%);

width:450px;
height:450px;

border-radius:50%;

background:radial-gradient(circle,#a855f740,transparent 70%);

z-index:-1;

}

/*==========================
FLOATING CARDS
==========================*/

.floating-card{

position:absolute;

padding:15px 20px;

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

backdrop-filter:blur(18px);

border-radius:18px;

box-shadow:var(--shadow);

font-weight:700;

display:flex;

align-items:center;

gap:10px;

animation:floatCard 4s ease-in-out infinite;

}

.floating-card i{

font-size:20px;

color:var(--primary);

}

.card1{

top:30px;
left:-20px;

}

.card2{

top:170px;
right:-30px;

animation-delay:1s;

}

.card3{

bottom:40px;
right:10px;

animation-delay:2s;

}

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

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM UI CSS v4
PART 3
CATEGORY • PRODUCT CARD
==========================================================*/

/*==============================
CATEGORY
==============================*/

.categories{

position:relative;

}

.category-card{

background:#fff;

border-radius:26px;

padding:28px;

text-align:center;

height:100%;

overflow:hidden;

position:relative;

box-shadow:var(--shadow-sm);

transition:.35s;

}

.category-card::before{

content:"";

position:absolute;

left:0;
top:0;

width:100%;
height:5px;

background:linear-gradient(90deg,var(--primary),#ec4899);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.category-card:hover::before{

transform:scaleX(1);

}

.category-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow-lg);

}

.category-card img{

width:150px;
height:150px;

margin:auto;

object-fit:contain;

transition:.45s;

}

.category-card:hover img{

transform:scale(1.08) rotate(3deg);

}

.category-card h5{

font-size:22px;

font-weight:700;

margin-top:22px;

margin-bottom:10px;

}

.category-card p{

font-size:15px;

margin-bottom:18px;

}

.category-card .btn{

padding:10px 22px;

font-size:14px;

}

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

.product-card{

background:#fff;

border-radius:28px;

overflow:hidden;

position:relative;

display:flex;

flex-direction:column;

height:100%;

box-shadow:var(--shadow-sm);

transition:.35s;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow-lg);

}

.product-image{

height:290px;

display:flex;

align-items:center;

justify-content:center;

background:#fafbff;

overflow:hidden;

position:relative;

}

.product-image img{

max-width:82%;
max-height:82%;

transition:.45s;

}

.product-card:hover .product-image img{

transform:scale(1.1);

}

/*==============================
BADGE
==============================*/

.product-badge{

position:absolute;

left:18px;
top:18px;

padding:8px 15px;

border-radius:999px;

font-size:12px;

font-weight:700;

background:linear-gradient(135deg,#ef4444,#f97316);

color:#fff;

z-index:10;

}

.badge-new{

background:linear-gradient(135deg,#2563eb,#60a5fa);

}

.badge-sale{

background:linear-gradient(135deg,#ef4444,#fb7185);

}

.badge-hot{

background:linear-gradient(135deg,#f97316,#facc15);

}

/*==============================
WISHLIST
==============================*/

.wishlist-btn{

position:absolute;

right:18px;
top:18px;

width:48px;
height:48px;

display:flex;

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

background:#fff;

border-radius:50%;

box-shadow:var(--shadow-sm);

color:#6b7280;

transition:.3s;

z-index:10;

}

.wishlist-btn:hover{

background:var(--primary);

color:#fff;

transform:scale(1.08);

}

/*==============================
BODY
==============================*/

.product-body{

padding:24px;

display:flex;

flex-direction:column;

flex:1;

}

.product-title{

font-size:19px;

font-weight:700;

line-height:1.5;

margin-bottom:12px;

min-height:56px;

}

.product-title a{

color:var(--text);

}

.product-title a:hover{

color:var(--primary);

}

/*==============================
RATING
==============================*/

.rating{

display:flex;

align-items:center;

gap:5px;

margin-bottom:15px;

color:#fbbf24;

font-size:15px;

}

.rating span{

margin-left:6px;

font-size:14px;

color:#6b7280;

}

/*==============================
PRICE
==============================*/

.product-price{

display:flex;

align-items:center;

gap:10px;

margin-bottom:14px;

}

.product-price strong{

font-size:32px;

font-weight:800;

color:var(--primary);

}

.old-price{

font-size:17px;

color:#9ca3af;

text-decoration:line-through;

}

.discount{

font-size:13px;

font-weight:700;

padding:5px 10px;

border-radius:999px;

background:#ecfdf5;

color:#16a34a;

}

/*==============================
STOCK
==============================*/

.stock{

margin-bottom:18px;

font-size:14px;

font-weight:600;

color:#16a34a;

}

.stock.low{

color:#ef4444;

}

/*==============================
ACTION
==============================*/

.product-actions{

display:flex;

gap:12px;

margin-top:auto;

}

.product-actions .btn{

flex:1;

padding:13px;

font-size:14px;

font-weight:700;

border-radius:16px;

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM UI CSS v4
PART 4
FLASH SALE • SEARCH • FORM • PRODUCT DETAILS
==========================================================*/

/*==============================
FLASH SALE
==============================*/

.flash-sale{

position:relative;

overflow:hidden;

border-radius:32px;

padding:70px 60px;

background:linear-gradient(135deg,#7c3aed,#9333ea);

box-shadow:var(--shadow-lg);

color:#fff;

}

.flash-sale::before{

content:"";

position:absolute;

width:350px;
height:350px;

border-radius:50%;

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

right:-120px;
top:-120px;

}

.flash-sale::after{

content:"";

position:absolute;

width:250px;
height:250px;

border-radius:50%;

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

left:-80px;
bottom:-80px;

}

.flash-sale h2{

font-size:46px;

font-weight:800;

margin-bottom:18px;

color:#fff;

}

.flash-sale p{

font-size:18px;

color:#ede9fe;

margin-bottom:30px;

max-width:650px;

}

.flash-sale .btn{

background:#fff;

color:var(--primary);

font-weight:700;

border:none;

padding:15px 34px;

}

.flash-sale .btn:hover{

background:#f3f0ff;

transform:translateY(-4px);

}

/*==============================
COUNTDOWN
==============================*/

.countdown{

display:flex;

gap:18px;

margin-top:30px;

flex-wrap:wrap;

}

.countdown div{

width:90px;
height:90px;

border-radius:22px;

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

backdrop-filter:blur(12px);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

font-weight:700;

}

.countdown strong{

font-size:30px;

color:#fff;

}

.countdown span{

font-size:13px;

color:#ede9fe;

}

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

.search-box{

background:#fff;

padding:18px;

border-radius:22px;

box-shadow:var(--shadow-sm);

}

.search-box .form-control{

border:none;

height:58px;

font-size:16px;

box-shadow:none;

}

.search-box .btn{

height:58px;

padding:0 28px;

}

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

.form-control,
.form-select{

height:58px;

border-radius:18px;

border:1px solid var(--border);

box-shadow:none;

font-size:15px;

padding:0 18px;

transition:.3s;

}

textarea.form-control{

height:auto;

padding:18px;

}

.form-control:focus,
.form-select:focus{

border-color:var(--primary);

box-shadow:0 0 0 .2rem rgba(124,58,237,.12);

}

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

.product-details{

background:#fff;

border-radius:30px;

padding:40px;

box-shadow:var(--shadow-sm);

}

.product-gallery{

background:#fafbff;

border-radius:24px;

padding:30px;

display:flex;

align-items:center;

justify-content:center;

min-height:500px;

}

.product-gallery img{

max-width:90%;

transition:.4s;

}

.product-gallery img:hover{

transform:scale(1.05);

}

.product-info h2{

font-size:40px;

font-weight:800;

margin-bottom:18px;

}

.product-info .price{

font-size:42px;

font-weight:800;

color:var(--primary);

margin:18px 0;

}

.product-info .old-price{

font-size:22px;

margin-left:12px;

color:#9ca3af;

text-decoration:line-through;

}

.product-info .description{

margin:25px 0;

line-height:1.9;

font-size:16px;

}

.product-meta{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-bottom:25px;

}

.product-meta div{

padding:10px 18px;

background:#f8f9ff;

border-radius:16px;

font-size:14px;

font-weight:600;

}

.quantity-box{

display:flex;

align-items:center;

gap:12px;

margin:30px 0;

}

.quantity-box button{

width:46px;
height:46px;

border:none;

border-radius:14px;

background:#f3f0ff;

font-size:20px;

font-weight:700;

color:var(--primary);

}

.quantity-box input{

width:80px;

height:46px;

text-align:center;

border:1px solid var(--border);

border-radius:14px;

}

.buy-actions{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:25px;

}

.buy-actions .btn{

flex:1;

min-width:180px;

padding:15px;

font-size:16px;

font-weight:700;

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM UI CSS v4
PART 5
LOGIN • REGISTER • AUTH • RESPONSIVE
==========================================================*/

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

.auth-section{

min-height:100vh;

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

padding:70px 15px;

}

.auth-wrapper{

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

background:#fff;

border-radius:32px;

overflow:hidden;

box-shadow:var(--shadow-lg);

display:flex;

}

/*==============================
LEFT PANEL
==============================*/

.auth-left{

width:45%;

padding:60px 50px;

background:linear-gradient(145deg,#7c3aed,#9333ea);

color:#fff;

position:relative;

display:flex;

flex-direction:column;

justify-content:center;

overflow:hidden;

}

.auth-left::before{

content:"";

position:absolute;

right:-120px;
top:-120px;

width:300px;
height:300px;

border-radius:50%;

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

}

.auth-left::after{

content:"";

position:absolute;

left:-100px;
bottom:-100px;

width:240px;
height:240px;

border-radius:50%;

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

}

.auth-left h2{
    font-size:48px;
    line-height:1.2;
    word-break:normal;
    overflow-wrap:break-word;
}

.auth-left p{

font-size:17px;

color:#ede9fe;

line-height:1.8;

margin-bottom:40px;

}

.auth-feature{

display:flex;

align-items:center;

gap:18px;

margin-bottom:22px;

}

.auth-feature i{

width:54px;
height:54px;

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

border-radius:16px;

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

font-size:22px;

}

/*==============================
RIGHT
==============================*/

.auth-right{

width:55%;

padding:60px;

background:#fff;

display:flex;

align-items:center;

}

.auth-box{

width:100%;

}

.auth-box h3{

font-size:42px;

font-weight:800;

margin-bottom:8px;

}

.auth-box p{

margin-bottom:35px;

}

.auth-box .form-group{

margin-bottom:22px;

position:relative;

}

.auth-box label{

font-weight:600;

margin-bottom:8px;

display:block;

}

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

.auth-input{

position:relative;

}

.auth-input i{

position:absolute;

left:18px;
top:50%;

transform:translateY(-50%);

color:#8b5cf6;

font-size:18px;

}

.auth-input input{

width:100%;

height:60px;

padding-left:55px;
padding-right:55px;

border-radius:18px;

border:1px solid var(--border);

transition:.3s;

}

.auth-input input:focus{

border-color:#7c3aed;

box-shadow:0 0 0 .2rem rgba(124,58,237,.12);

outline:none;

}

.password-toggle{

position:absolute;

right:15px;
top:50%;

transform:translateY(-50%);

cursor:pointer;

font-size:18px;

color:#7c3aed;

}

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

.auth-btn{

width:100%;

height:60px;

border:none;

border-radius:18px;

background:linear-gradient(135deg,#7c3aed,#9333ea);

color:#fff;

font-size:17px;

font-weight:700;

transition:.3s;

}

.auth-btn:hover{

transform:translateY(-3px);

box-shadow:0 18px 35px rgba(124,58,237,.25);

}

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

.auth-links{

display:flex;

justify-content:space-between;

margin-top:18px;

font-size:15px;

}

.auth-links a{

color:#7c3aed;

font-weight:600;

}

.auth-divider{

text-align:center;

margin:35px 0;

position:relative;

}

.auth-divider::before{

content:"";

position:absolute;

left:0;
top:50%;

width:100%;
height:1px;

background:#e5e7eb;

}

.auth-divider span{

position:relative;

padding:0 15px;

background:#fff;

color:#9ca3af;

}

/*==============================
GOOGLE
==============================*/

.google-btn{

height:58px;

border:1px solid #e5e7eb;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

font-weight:700;

color:#111827;

transition:.3s;

}

.google-btn:hover{

background:#f8f8ff;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:992px){

.auth-wrapper{

flex-direction:column;

}

.auth-left,
.auth-right{

width:100%;

}

.auth-left{

padding:45px 35px;

text-align:center;

}

.auth-left h2{

font-size:40px;

}

.auth-feature{

justify-content:center;

}

.auth-right{

padding:40px 30px;

}

}

@media(max-width:576px){

.auth-section{

padding:20px 12px;

}

.auth-wrapper{

border-radius:24px;

}

.auth-left{

padding:35px 25px;

}

.auth-left h2{

font-size:34px;

}

.auth-right{

padding:30px 20px;

}

.auth-box h3{

font-size:32px;

}

.auth-links{

flex-direction:column;

gap:12px;

text-align:center;

}

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM UI CSS v4
PART 6
FOOTER • CART • CHECKOUT • TABLES
DASHBOARD • MOBILE NAVIGATION • RESPONSIVE
==========================================================*/

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

.footer{

position:relative;

padding:80px 0 30px;

background:#111827;

color:#fff;

overflow:hidden;

}

.footer::before{

content:"";

position:absolute;

top:-180px;
right:-180px;

width:420px;
height:420px;

border-radius:50%;

background:rgba(124,58,237,.12);

}

.footer-logo{

font-size:34px;

font-weight:800;

margin-bottom:18px;

color:#fff;

}

.footer p{

color:#cbd5e1;

line-height:1.9;

}

.footer h5{

margin-bottom:22px;

color:#fff;

font-weight:700;

}

.footer ul{

padding:0;

margin:0;

list-style:none;

}

.footer ul li{

margin-bottom:14px;

}

.footer ul li a{

color:#cbd5e1;

transition:.3s;

}

.footer ul li a:hover{

padding-left:8px;

color:#fff;

}

.footer-social{

display:flex;

gap:14px;

margin-top:20px;

}

.footer-social a{

width:46px;
height:46px;

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

border-radius:16px;

background:#1f2937;

color:#fff;

transition:.3s;

}

.footer-social a:hover{

background:var(--primary);

transform:translateY(-4px);

}

.footer-bottom{

margin-top:60px;

padding-top:25px;

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

text-align:center;

color:#9ca3af;

}

/*==============================
CART
==============================*/

.cart-item{

background:#fff;

border-radius:24px;

padding:22px;

display:flex;

align-items:center;

gap:20px;

margin-bottom:20px;

box-shadow:var(--shadow-sm);

}

.cart-item img{

width:100px;
height:100px;

object-fit:contain;

border-radius:18px;

background:#fafbff;

padding:10px;

}

.cart-info{

flex:1;

}

.cart-price{

font-size:28px;

font-weight:800;

color:var(--primary);

}

.cart-summary{

background:#fff;

border-radius:26px;

padding:30px;

box-shadow:var(--shadow);

position:sticky;

top:100px;

}

.cart-summary h4{

margin-bottom:25px;

font-weight:700;

}

.cart-summary .btn{

width:100%;

}

/*==============================
CHECKOUT
==============================*/

.checkout-card{

background:#fff;

border-radius:28px;

padding:35px;

box-shadow:var(--shadow-sm);

margin-bottom:30px;

}

.checkout-title{

font-size:26px;

font-weight:700;

margin-bottom:25px;

}

.order-summary{

background:#fafbff;

border-radius:22px;

padding:25px;

}

.order-summary li{

display:flex;

justify-content:space-between;

margin-bottom:14px;

font-size:15px;

}

.order-summary .total{

font-size:22px;

font-weight:800;

color:var(--primary);

}

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

.table-responsive{

border-radius:22px;

overflow:hidden;

box-shadow:var(--shadow-sm);

}

.table{

margin:0;

background:#fff;

}

.table thead{

background:linear-gradient(135deg,#7c3aed,#9333ea);

color:#fff;

}

.table th{

padding:18px;

border:none;

font-weight:700;

}

.table td{

padding:18px;

vertical-align:middle;

}

/*==============================
ADMIN CARDS
==============================*/

.dashboard-card{

background:#fff;

border-radius:24px;

padding:30px;

box-shadow:var(--shadow-sm);

transition:.35s;

height:100%;

}

.dashboard-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.dashboard-card i{

width:70px;
height:70px;

display:flex;

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

border-radius:20px;

background:#f3f0ff;

font-size:28px;

color:var(--primary);

margin-bottom:18px;

}

.dashboard-card h3{

font-size:34px;

font-weight:800;

margin-bottom:6px;

}

.dashboard-card p{

margin:0;

}

/*==============================
BADGES
==============================*/

.status-badge{

padding:8px 14px;

border-radius:999px;

font-size:13px;

font-weight:700;

}

.status-success{

background:#dcfce7;

color:#166534;

}

.status-warning{

background:#fef3c7;

color:#92400e;

}

.status-danger{

background:#fee2e2;

color:#991b1b;

}

/*==============================
MOBILE BOTTOM NAVIGATION
==============================*/

.mobile-nav{

display:none;

position:fixed;

left:0;
right:0;
bottom:0;

height:72px;

background:#fff;

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

z-index:9999;

}

.mobile-nav ul{

display:flex;

height:100%;

margin:0;

padding:0;

list-style:none;

}

.mobile-nav li{

flex:1;

}

.mobile-nav a{

height:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

font-size:12px;

font-weight:600;

color:#6b7280;

}

.mobile-nav a i{

font-size:20px;

margin-bottom:4px;

}

.mobile-nav a.active{

color:var(--primary);

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:991px){

.hero{

padding:60px 0;

text-align:center;

}

.hero-title{

font-size:42px;

}

.hero-text{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.product-gallery{

min-height:auto;

padding:20px;

}

.product-info{

margin-top:30px;

}

.cart-item{

flex-direction:column;

text-align:center;

}

.cart-summary{

margin-top:30px;

position:static;

}

.checkout-card{

padding:25px;

}

.section-title{

font-size:34px;

}

}

@media(max-width:768px){

.navbar{

padding:10px 0;

}

.hero-title{

font-size:34px;

}

.hero-image img{

max-width:320px;

}

.floating-card{

display:none;

}

.product-image{

height:220px;

}

.product-price strong{

font-size:26px;

}

.flash-sale{

padding:40px 25px;

text-align:center;

}

.flash-sale h2{

font-size:30px;

}

.countdown{

justify-content:center;

}

.footer{

padding-bottom:95px;

}

.mobile-nav{

display:block;

}

body{

padding-bottom:72px;

}

}

@media(max-width:576px){

.container{

padding-left:16px;

padding-right:16px;

}

.section-title{

font-size:28px;

}

.btn{

width:100%;

}

.product-actions{

flex-direction:column;

}

.buy-actions{

flex-direction:column;

}

.dashboard-card{

padding:24px;

}

.table th,
.table td{

padding:12px;

font-size:13px;

}

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM UI CSS v4
PART 7
PROFILE • ORDERS • WISHLIST • MODAL • LOADER • ANIMATIONS
==========================================================*/

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

.profile-card{

background:#fff;
border-radius:30px;
padding:35px;
box-shadow:var(--shadow);

}

.profile-avatar{

width:140px;
height:140px;

margin:auto;

border-radius:50%;

overflow:hidden;

border:6px solid #f3f0ff;

box-shadow:var(--shadow-sm);

}

.profile-avatar img{

width:100%;
height:100%;
object-fit:cover;

}

.profile-name{

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

margin-top:20px;

text-align:center;

}

.profile-email{

text-align:center;
color:#6b7280;

margin-bottom:25px;

}

.profile-menu{

display:flex;

flex-direction:column;

gap:12px;

}

.profile-menu a{

padding:16px 20px;

border-radius:18px;

background:#fafbff;

font-weight:600;

color:#374151;

transition:.3s;

}

.profile-menu a:hover{

background:linear-gradient(135deg,#7c3aed,#9333ea);

color:#fff;

transform:translateX(8px);

}

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

.order-card{

background:#fff;

border-radius:24px;

padding:28px;

margin-bottom:24px;

box-shadow:var(--shadow-sm);

transition:.3s;

}

.order-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

.order-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

flex-wrap:wrap;

gap:15px;

}

.order-id{

font-weight:800;

font-size:18px;

}

.order-products{

margin-top:20px;

padding-top:20px;

border-top:1px solid #eee;

}

/*==============================
WISHLIST
==============================*/

.wishlist-card{

background:#fff;

border-radius:24px;

padding:20px;

box-shadow:var(--shadow-sm);

transition:.3s;

height:100%;

}

.wishlist-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

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

.modal-content{

border:none;

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow-lg);

}

.modal-header{

background:linear-gradient(135deg,#7c3aed,#9333ea);

color:#fff;

border:none;

padding:22px 30px;

}

.modal-title{

font-weight:700;

}

.modal-body{

padding:35px;

}

.modal-footer{

border:none;

padding:25px 30px;

}

/*==============================
ALERT
==============================*/

.alert{

border:none;

border-radius:18px;

padding:18px 22px;

font-weight:600;

box-shadow:var(--shadow-sm);

}

.alert-success{

background:#dcfce7;

color:#166534;

}

.alert-danger{

background:#fee2e2;

color:#991b1b;

}

.alert-warning{

background:#fef3c7;

color:#92400e;

}

/*==============================
LOADER
==============================*/

.page-loader{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader{

width:70px;
height:70px;

border-radius:50%;

border:6px solid #eee;

border-top:6px solid #7c3aed;

animation:spin .9s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f3f4f6;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(#7c3aed,#9333ea);

border-radius:20px;

}

/*==============================
UTILITY
==============================*/

.shadow-hover{

transition:.3s;

}

.shadow-hover:hover{

box-shadow:var(--shadow-lg);

transform:translateY(-6px);

}

.radius{

border-radius:24px;

}

.bg-gradient{

background:linear-gradient(135deg,#7c3aed,#9333ea);

color:#fff;

}

.text-gradient{

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

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

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

.fade-up{

opacity:0;

transform:translateY(35px);

animation:fadeUp .8s forwards;

}

@keyframes fadeUp{

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:768px){

.profile-card{

padding:25px;

}

.profile-menu a{

padding:14px;

}

.order-header{

flex-direction:column;

align-items:flex-start;

}

.modal-body{

padding:25px;

}

.modal-footer{

padding:20px;

}

}
.whatsapp-float{
    position:fixed;
    right:25px;
    bottom:90px;
    width:60px;
    height:60px;
    background:#25D366;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    text-decoration:none;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    z-index:999;
    transition:.3s;
}

.whatsapp-float:hover{
    transform:scale(1.1);
    color:#fff;
}
#preloader{
    position:fixed;
    inset:0;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

.loader{
    width:55px;
    height:55px;
    border:5px solid #ececec;
    border-top:5px solid #7c3aed;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    100%{
        transform:rotate(360deg);
    }
}
.search-form{
    position:relative;
}

.search-suggestions{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    display:none;
    z-index:9999;
    overflow:hidden;
}

.search-suggestions a{
    display:block;
    padding:12px 15px;
    color:#222;
    text-decoration:none;
    border-bottom:1px solid #eee;
}

.search-suggestions a:hover{
    background:#f8f9fa;
}