/* ===========================
SHOZA AI MARKETPLACE STYLE
=========================== */

/* 🟧 Global Layout */
body {
font-family: 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
color: #222;
}

a {
text-decoration: none;
color: inherit;
}

h1, h2, h3, h4 {
font-weight: 600;
margin: 0;
}

/* 🟧 Top Promo Bar */
#promo-bar {
background: #f7941d;
color: white;
overflow: hidden;
white-space: nowrap;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.95rem;
}

#promo-scroll span {
display: inline-block;
animation: scrollText 25s linear infinite;
}

@keyframes scrollText {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}

/* 🟧 Navigation Bar */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
background: #ff8c00;
padding: 10px 20px;
color: white;
position: sticky;
top: 0;
z-index: 1000;
}

.logo {
font-size: 1.5rem;
font-weight: bold;
}

.search {
display: flex;
align-items: center;
gap: 6px;
}

#searchBar {
padding: 6px 8px;
border-radius: 6px;
border: none;
width: 230px;
font-size: 0.9rem;
}

#searchBtn {
padding: 6px 10px;
background: #222;
border: none;
border-radius: 6px;
color: white;
cursor: pointer;
}

.login {
background: #fff;
color: #f7941d;
border: 2px solid #fff;
border-radius: 6px;
padding: 5px 10px;
cursor: pointer;
transition: 0.3s;
}

.login:hover {
background: #f7941d;
color: white;
}

/* 🟧 AI Drawer */
#drawer {
position: fixed;
top: 0;
left: -270px;
width: 250px;
height: 100%;
background: #f7941d;
color: #fff;
transition: left 0.4s ease;
padding: 20px;
z-index: 2000;
}

#drawer.open { left: 0; }

#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: none;
z-index: 1500;
}

#overlay.show { display: block; }

.drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.drawer-section {
margin-top: 20px;
}

.drawer-section a {
display: block;
color: #fff;
margin: 6px 0;
font-size: 0.95rem;
}

/* 🟧 Categories Buttons */
.categories {
text-align: center;
background: #fff3e0;
padding: 10px 0;
}

.categories button {
background: #f7941d;
color: #fff;
border: none;
margin: 3px;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
transition: 0.3s;
}

.categories button:hover {
background: #e57c00;
}

/* 🟧 Hero Section */
.hero {
text-align: center;
padding: 40px 15px;
color: #333;
}

.hero span {
color: #f7941d;
}

/* 🟧 Product Grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
padding: 20px;
}

.product {
background: #fff;
border-radius: 10px;
padding: 15px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.product:hover {
transform: scale(1.04);
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.product img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
}

/* 🟧 Footer */
footer {
background: #222;
color: white;
padding: 40px 20px;
margin-top: 40px;
}

.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
}

.footer-grid h4 {
color: #f7941d;
}

.footer-grid a {
display: block;
color: #ccc;
font-size: 0.9rem;
margin: 6px 0;
}

.copyright {
text-align: center;
font-size: 0.85rem;
margin-top: 25px;
color: #bbb;
}

/* ===========================
📱 MOBILE OPTIMIZATION
=========================== */
@media (max-width: 768px) {
#searchBar {
width: 150px;
font-size: 0.85rem;
}

.nav {
flex-wrap: wrap;
justify-content: space-between;
}

.logo {
font-size: 1.3rem;
}

.categories button {
font-size: 0.8rem;
padding: 6px 10px;
}

.hero {
padding: 25px 10px;
}

.grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
}

.product img {
height: 140px;
}

footer {
text-align: center;
}
}

@media (max-width: 480px) {
.nav {
padding: 10px;
}

#searchBar {
width: 100px;
}

#drawer {
width: 230px;
}

.categories {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.categories button {
margin: 4px;
font-size: 0.75rem;
}

.product img {
height: 130px;
}
}
/* ===========================
CART + BUTTON STYLES
=========================== */
.add-cart {
background: #f7941d;
color: #fff;
border: none;
padding: 8px 15px;
border-radius: 6px;
margin-top: 10px;
cursor: pointer;
font-weight: 600;
transition: 0.3s;
}

.add-cart:hover {
background: #e57c00;
}

#cart-dropdown {
display: none;
position: absolute;
right: 0;
top: 35px;
background: white;
color: #222;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
border-radius: 8px;
width: 280px;
z-index: 999;
padding: 15px;
}

.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
margin: 8px 0;
border-bottom: 1px solid #eee;
padding-bottom: 6px;
}

.remove {
background: none;
border: none;
color: #f00;
font-size: 1rem;
cursor: pointer;
}

#cart-btn:hover #cart-dropdown {
display: block;
}
#checkout-btn {
background: #f7941d;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}
#checkout-btn:hover {
background: #e57c00;
}
/* 🟠 PROMO SCROLLER */
#promo-bar {
background: #f7941d;
color: white;
overflow: hidden;
white-space: nowrap;
padding: 6px 0;
font-weight: 600;
}
#promo-scroll {
display: inline-block;
animation: scrollPromos 18s linear infinite;
}
@keyframes scrollPromos {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}

/* 🟪 DRAWER FIXES */
#drawer {
position: fixed;
top: 0;
left: -320px;
width: 280px;
height: 100%;
background: #fff;
box-shadow: 2px 0 10px rgba(0,0,0,0.2);
padding: 20px;
z-index: 1001;
transition: left 0.3s ease;
}
#drawer.open { left: 0; }
#overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.4);
z-index: 1000;
}
#overlay.show { display: block; }

/* 🧾 AUTH MODAL */
.modal {
display: none;
position: fixed;
z-index: 2000;
left: 0; top: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
}
.modal-content {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 300px;
margin: 100px auto;
text-align: center;
}
.close {
float: right;
cursor: pointer;
font-size: 22px;
}

/* Disable flickering animation */
.product {
animation: none !important;
transition: transform 0.3s;
}
.product:hover { transform: scale(1.03); }

/* Fix drawer covering logo */
.logo {
margin-left: 60px;
font-weight: bold;
color: #f7941d;
}
/* --- PROMO SCROLLER --- */
#promo-bar {
background: #f7941d; color: #fff;
overflow: hidden; white-space: nowrap;
padding: 6px 0; font-weight: 600;
}
#promo-scroll { display:inline-block; animation: scrollPromos 16s linear infinite; }
@keyframes scrollPromos {0%{transform:translateX(100%);}100%{transform:translateX(-100%);}}

/* --- NAV --- */
.nav {
display:flex; align-items:center; justify-content:space-between;
background:#fff; padding:8px 16px; border-bottom:2px solid #f7941d;
position:relative; z-index:5;
}
.logo { color:#f7941d; font-size:1.4rem; font-weight:700; }
.search { flex:1; display:flex; justify-content:center; }
.search input {
width:60%; padding:6px 10px; border:1px solid #ccc; border-radius:4px 0 0 4px;
}
.search button {
border:none; background:#f7941d; color:#fff; padding:7px 12px; border-radius:0 4px 4px 0;
cursor:pointer;
}

/* --- CART --- */
.cart-icon { position:relative; margin-left:15px; cursor:pointer; }
.cart-dropdown {
display:none; position:absolute; right:0; top:30px; background:#fff; padding:15px;
width:220px; box-shadow:0 2px 8px rgba(0,0,0,.15); border-radius:8px;
}
.cart-icon:hover .cart-dropdown { display:block; }

/* --- LOGIN --- */
.login-container { position:relative; }
.login {
background:#f7941d; color:#fff; border:none; padding:7px 14px; border-radius:6px;
cursor:pointer; font-weight:600;
}
.login-dropdown {
display:none; position:absolute; right:0; top:36px; background:#fff; padding:10px;
width:180px; box-shadow:0 2px 8px rgba(0,0,0,.2); border-radius:6px; text-align:left;
}
.login-dropdown a { display:block; padding:5px 0; color:#333; text-decoration:none; }
.login-dropdown a:hover { color:#f7941d; }
.login-container:hover .login-dropdown { display:block; }

/* --- DRAWER --- */
#drawer {
position:fixed; top:0; left:-320px; width:280px; height:100%;
background:#fff; box-shadow:2px 0 10px rgba(0,0,0,0.25);
padding:20px; transition:left 0.3s ease; z-index:1001;
}
#drawer.open { left:0; }
#overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%;
background:rgba(0,0,0,0.4); z-index:1000; }
#overlay.show { display:block; }

/* --- DRAWER FIX (invisible until clicked) --- */
#drawer {
position: fixed;
top: 0;
left: -320px;
width: 280px;
height: 100%;
background: #fff;
box-shadow: 2px 0 10px rgba(0,0,0,0.25);
padding: 20px;
transition: left 0.3s ease;
z-index: 1001;
}
#drawer.open { left: 0; }
#overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.4);
z-index: 1000;
}
#overlay.show { display: block; }

/* --- LOGO ALIGNMENT --- */
.logo {
margin-left: 10px;
font-size: 1.4rem;
font-weight: 700;
color: #f7941d;
z-index: 2;
}

/* --- LOGIN SYSTEM --- */
.login-container {
position: relative;
margin-left: 15px;
}
.login {
background: #f7941d;
color: #fff;
border: none;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
}
.login-dropdown {
display: none;
position: absolute;
right: 0;
top: 36px;
background: #fff;
padding: 12px;
width: 180px;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
border-radius: 6px;
text-align: left;
animation: fadeIn 0.3s ease-in-out;
}
.login-dropdown a {
display: block;
padding: 6px 0;
color: #333;
text-decoration: none;
font-weight: 500;
}
.login-dropdown a:hover {
color: #f7941d;
}
.login-container:hover .login-dropdown {
display: block;
}
.login-container.active .login-dropdown {
display: block;
}

/* --- PROMO BAR SCROLLER --- */
#promo-bar {
background: #f7941d;
color: #fff;
padding: 6px 0;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
}
#promo-scroll {
display: inline-block;
animation: scrollPromos 15s linear infinite;
}
@keyframes scrollPromos {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}

/* --- ANIMATIONS --- */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
	
/* PROMO BAR */
#promo-bar{background:#f7941d;color:#fff;padding:6px 0;font-weight:600;overflow:hidden;white-space:nowrap}
#promo-scroll{display:inline-block;animation:scrollPromos 15s linear infinite}
@keyframes scrollPromos{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* NAV CORE */
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#fff;
border-bottom:2px solid #f7941d;position:relative;z-index:10}
.logo{color:#f7941d;font-size:1.4rem;font-weight:700;margin-left:8px}
.search{flex:1;text-align:center}
.search input{width:60%;padding:6px 10px;border:1px solid #ccc;border-radius:4px 0 0 4px}
.search button{background:#f7941d;color:#fff;border:none;padding:7px 12px;border-radius:0 4px 4px 0;cursor:pointer}

/* DRAWER */
#drawer{position:fixed;top:0;left:-290px;width:250px;height:100%;background:#fff;
box-shadow:1px 0 10px rgba(0,0,0,.25);padding:16px;transition:left .3s ease;z-index:1001;overflow-y:auto}
#drawer.open{left:0}
#overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,.4);z-index:1000}
#overlay.show{display:block}
.drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.drawer-section{margin-bottom:20px}
.drawer-section a{display:block;padding:5px 0;color:#333;text-decoration:none}
.drawer-section a:hover{color:#f7941d}

/* LOGIN */
.login-container{position:relative}
.login{background:#f7941d;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer;font-weight:600}
.login-dropdown{display:none;position:absolute;right:0;top:40px;background:#fff;padding:12px;
width:180px;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:6px;animation:fadeIn .3s ease-in-out}
.login-dropdown a{display:block;padding:6px 0;color:#333;text-decoration:none}
.login-dropdown a:hover{color:#f7941d}
.login-container.active .login-dropdown{display:block}

@keyframes fadeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
	
/* --- AUTH POPUPS --- */
#authOverlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
z-index: 2000;
}

.auth-box {
display: none;
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.9);
background: #fff;
width: 340px;
max-width: 90%;
border-radius: 12px;
box-shadow: 0 4px 25px rgba(0,0,0,0.3);
z-index: 2001;
animation: popupFade 0.3s ease-out;
}

.auth-content {
padding: 24px;
text-align: center;
}

.auth-content h2 {
color: #f7941d;
margin-bottom: 16px;
}

.auth-content input {
width: 90%;
padding: 8px;
margin: 6px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}

.auth-btn {
width: 95%;
margin-top: 10px;
background: #f7941d;
color: #fff;
border: none;
border-radius: 6px;
padding: 10px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s ease;
}
.auth-btn:hover {
background: #e67800;
}

.auth-alt {
margin-top: 12px;
font-size: 14px;
}
.auth-alt a {
color: #f7941d;
text-decoration: none;
font-weight: 600;
}
.auth-alt a:hover {
text-decoration: underline;
}

/* --- POPUP ANIMATION --- */
@keyframes popupFade {
from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}