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

:root{

--navy:#071A2F;

--orange:#FF8C00;

--card:#0D2542;

--white:#ffffff;

--gray:#C3D0DB;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Poppins,sans-serif;

}

body{

background:var(--navy);

color:white;

}


/* ================================================= */
/* TOPBAR */
/* ================================================= */

.topbar{

background:var(--navy);

padding:10px;

}


/* SECTION 1 */

.top-row{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

display:flex;

align-items:center;

gap:10px;

padding:10px;

background:var(--navy);

}

.logo{

width:50px;

height:50px;

border-radius:50%;

background:var(--orange);

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

font-weight:700;

}

.search-box{

flex:1;

position:relative;

}

.search-box input{

width:100%;

padding:12px;

border:none;

border-radius:30px;

outline:none;

}

.search-box i{

position:absolute;

right:15px;

top:14px;

color:#666;

}

.account,

.menu-btn{

font-size:22px;

color:var(--orange);

}


/* SECTION 2 */
/* =================================== */
/* ADVERT BANNER */
/* =================================== */

.banner{

margin-top:70px;

margin-bottom:20px;

position:relative;

overflow:hidden;

height:auto;

border-radius:15px;

background:

linear-gradient(

135deg,

#ff8c00,

#ff6b00,

#ffae00

);

padding:10px;

box-shadow:

0 8px 30px rgba(

255,

140,

0,

0.35

);

}


/* Decorative circles */

.banner-glow{

position:absolute;

border-radius:50%;

background:

rgba(

255,

255,

255,

0.15

);

}


.glow1{

width:130px;

height:130px;

top:-40px;

right:-20px;

}


.glow2{

width:90px;

height:90px;

bottom:-25px;

left:-15px;

}


.banner-content{

position:relative;

z-index:5;

height:100%;

display:flex;

flex-direction:column;

justify-content:space-between;

}


.brand h1{

font-family:'Lobster';

font-size:42px;

color:var(--navy);

letter-spacing:2px;

}


.brand p{

font-size:14px;

color:var(--navy);

font-weight:500;

max-width:auto;

}


.banner-info{

display:grid;

grid-template-columns:

1fr 1fr;

gap:10px;

}


.banner-info div{

background:

rgb(255, 255, 255);

backdrop-filter:

blur(5px);

padding:10px;

border-radius:15px;

font-size:12px;

font-weight:600;

color:rgb(4, 0, 97);

}


.banner-info i{

margin-right:6px;

}

/* SECTION 3 */

.stats-bar{

position:fixed;

top:-100px;

left:0;

width:100%;

display:flex;

gap:8px;

background:var(--navy);

z-index:950;

transition:all 0.35s ease;

height:auto;

padding:8px 12px;

}


.stats-bar.show{

top:70px; /* directly beneath top-row */

}

.stat-card{

flex:1;

background:var(--card);

padding:0px;

border-radius:0px;

text-align:center;

}

.stat-card span{

font-size:18px;

color:var(--gray);

}

.stat-card h2{

margin-top:5px;

color:var(--orange);

}

.cart i{

font-size:15px;

color:orange;

}


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

.main-body{

min-height:560px;

padding:10px;


}

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

.category-section{

margin-bottom:30px;

}


.category-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:12px;

}


.category-header h2{

font-size:18px;

font-weight:700;

color:white;

}


.category-scroll{

display:flex;

gap:12px;

overflow-x:auto;

scrollbar-width:none;

padding-bottom:5px;

}


.category-scroll::-webkit-scrollbar{

display:none;

}


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

.product-card{

min-width:160px;

background:var(--card);

border-radius:15px;

overflow:hidden;

flex-shrink:0;

}


.product-image{

    width:100%;

    height:160px;

    position:relative;

    overflow:hidden;

    background:#17385d;

    display:flex;

    justify-content:center;

    align-items:center;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    display:block;

}


.stock-badge{

position:absolute;

top:10px;

right:10px;

background:#00c853;

color:white;

padding:4px 8px;

font-size:11px;

border-radius:20px;

font-weight:600;

}


.product-info{

padding:12px;

}


.product-name{

font-size:14px;

font-weight:600;

margin-bottom:8px;

line-height:1.3;

}


.product-price{

font-size:18px;

font-weight:700;

color:var(--orange);

}


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

.product-overlay{

    position:absolute;

    inset:0;

    background:rgba(255,140,0,.90);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.25s;

}

.product-overlay.show{

    opacity:1;

    visibility:visible;

}

/* Controls */

.overlay-controls{

    display:flex;

    align-items:center;

    gap:18px;

}

.overlay-btn{

    width:34px;

    height:34px;

    border-radius:50%;

    border:none;

    background:white;

    color:var(--orange);

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

}

.overlay-btn:hover{

    transform:scale(1.08);

}

.overlay-qty{

    font-size:22px;

    color:white;

    font-weight:bold;

    min-width:24px;

    text-align:center;

}


/* =====================================
   VIEW CART BUTTON
===================================== */

#viewCartBtn{

    margin-top:8px;

    padding:4px 10px;

    border:none;

    border-radius:14px;

    background:var(--orange);

    color:white;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    display:none;

    animation:viewCartBlink .9s infinite alternate;

}

#viewCartBtn.show{

    display:inline-block;

}

@keyframes viewCartBlink{

    from{

        opacity:.45;

        transform:scale(.96);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


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

#cartPanel{

    position:fixed;

    top:-100%;

    left:0;

    width:100%;

    height:93vh;

    background:var(--navy);

    z-index:999;

    transition:.45s ease;

    display:flex;

    flex-direction:column;

    border-bottom-left-radius:20px;

    border-bottom-right-radius:20px;

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

}

#cartPanel.show{

    top:70px;

}

.cart-panel-header{

    padding:18px;

    text-align:center;

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

}

.cart-panel-header h2{

    color:white;

}

#cartItems{

    flex:1;

    overflow-y:auto;

    padding:15px;

}

.cart-footer{

    display:flex;

    gap:10px;

    padding:15px;

}

.cart-footer button{

    flex:1;

    border:none;

    padding:14px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

}

#continueShopping{

    background:#d6d6d6;

}

#checkoutBtn{

    background:var(--orange);

    color:white;

}

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

.cart-item{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:10px;

    align-items:center;

    background:var(--orange);

    margin-bottom:10px;

    padding:12px;

    border-radius:12px;

}

.cart-product{

    display:flex;

    align-items:center;

    gap:10px;

}

.cart-image{

    width:60px;

    height:60px;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:none;

}

.cart-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

}

.cart-name{

    color:rgb(1, 0, 54);

    font-weight:500;

}

.cart-price,
.cart-total{

    color:rgb(1, 0, 75);

    text-align:center;

}

.cart-qty{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

}

.cart-qty button{

    width:22px;

    height:22px;

    border:none;

    border-radius:50%;

    background:var(--orange);

    color:rgb(1, 0, 75);

    cursor:pointer;

    font-size:14px;

    font-weight:bold;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.2s;

}

.cart-qty button:hover{

    transform:scale(1.1);

}

.cart-quantity{

    min-width:20px;

    text-align:center;

    color:rgb(1, 0, 75);

}

.cart-grand-total{

    margin-top:20px;

    margin-bottom: 20px;

    padding:10px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:22px;

    font-weight:bold;

    color:white;

    border-top:2px solid var(--orange);

    background:var(--navy);

    position:sticky;

    bottom:0;

    z-index: 10;

}

.empty-cart{

    text-align:center;

    color:white;

    margin-top:80px;

}

/* =====================================
   CART TABLE HEADER
===================================== */

.cart-table-header{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    align-items:center;

    background:#0b2747;

    color:white;

    font-weight:700;

    padding:14px 12px;

    border-bottom:2px solid rgba(255,255,255,.12);

    position:sticky;

    top:0;

    z-index:5;

}

.cart-table-header div{

    text-align:center;

}

.cart-table-header div:first-child{

    text-align:left;

    padding-left:10px;

}

/* ===================================== */
/* DIRECTORY BANNER */
/* ===================================== */

/*.directory-banner{

margin-top:20px;

background:linear-gradient(
135deg,
#ff8c00,
#ff6f00
);

border-radius:25px;

padding:20px;

}*/


.directory-search{

font-size:14px;

gap:5px;

padding:10px;

margin-bottom:15px;

color:var(--navy);

}


.directory-grid{

display:grid;

grid-template-columns:
1fr 1fr 1fr;

gap:10px;

}


.directory-column{

background:rgb(255, 255, 255);

backdrop-filter:blur(5px);

border-radius:15px;

padding:12px;

display:flex;

flex-direction:column;

gap:8px;

opacity: 0.9;

}


.directory-column h3{

font-size:14px;

margin-bottom:5px;

color:var(--navy);

}


.directory-column span{

font-size:12px;

color:#1100ff;

font-weight:550;

}


/* =====================================
   SUCCESS POPUP
===================================== */

#successPopup{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1200;

}

#successPopup.show{

    opacity:1;

    visibility:visible;

}

.success-card{

    width:min(90%,420px);

    background:var(--card);

    border-radius:18px;

    padding:30px;

    text-align:center;

}

.success-icon{

    font-size:65px;

    color:#32c852;

    margin-bottom:18px;

}

.success-card h2{

    color:white;

    margin-bottom:15px;

}

.success-card p{

    color:#d5dbe5;

    line-height:1.6;

    margin-bottom:14px;

}

#successOkBtn{

    margin-top:15px;

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:var(--orange);

    color:white;

    font-weight:bold;

    cursor:pointer;

}

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

footer{

padding:25px;

background:#061422;

}

.footer-links{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-links a{

text-decoration:none;

color:white;

}

.copyright{

margin-top:25px;

font-size:13px;

color:var(--gray);

text-align:center;

}

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

#checkoutPanel{

    position:fixed;

    top:100%;

    left:0;

    width:100%;

    height:93vh;

    background:var(--navy);

    z-index:1000;

    transition:.45s ease;

    display:flex;

    flex-direction:column;


}

#checkoutPanel.show{

    top:70px;

}

.checkout-header{

    padding:18px;

    text-align:center;

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

}

.checkout-header h2{

    color:white;

}

#checkoutContent{

    flex:1;

    overflow-y:auto;

    padding:20px;

}

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

.checkout-card{

    background:var(--card);

    border-radius:16px;

    padding:18px;

    margin-bottom:18px;

}

.checkout-card h3{

    color:var(--orange);

    margin-bottom:18px;

}

.summary-row{

    display:flex;

    justify-content:space-between;

    margin-bottom:12px;

    color:white;

}

.summary-row.total{

    font-size:20px;

    font-weight:bold;

}

.checkout-card hr{

    border:none;

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

    margin:18px 0;

}

#checkoutForm{

    display:flex;

    flex-direction:column;

    gap:14px;

}

#checkoutForm input{

    padding:14px;

    border:none;

    border-radius:10px;

    background:#17385d;

    color:white;

    font-size:15px;

}

#checkoutForm input::placeholder{

    color:#b5c6da;

}

#checkoutForm input:focus{

    outline:2px solid var(--orange);

}

.checkout-footer{

    display:flex;

    gap:10px;

    padding:15px;

}

.checkout-footer button{

    flex:1;

    padding:14px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;
    
    margin-bottom: 10px;

}

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

#checkoutError{

    display:none;

    margin-bottom:15px;

    padding:12px;

    border-radius:10px;

    background:rgba(255,140,0,.12);

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

    color:var(--orange);

    font-size:14px;

    font-weight:600;

}

.checkout-input-error{

    outline:2px solid #ff4d4d !important;

}


#backToCart{

    background:#d6d6d6;

}

#placeOrderBtn{

    background:var(--orange);

    color:white;

}