:root {
  --nav: #1abc9c;       /* teal primary */
  --accent: #f39c12;    /* orange accent */
  --muted: #6b7280;     /* muted gray */
  --bg: #ecf0f1;        /* light background */
  --ink: #2c3e50;       /* deep ink */
  --danger: #ef4444;    /* red */
  --success: #10b981;   /* green */
  --shadow: 0 8px 22px rgba(0,0,0,0.08);
  --radius: 12px;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:#333; line-height:1.6; }
a { text-decoration:none; transition:0.3s ease; color:inherit; }
img { max-width:100%; display:block; }

/* =========================
   HEADER / NAVBAR
   ========================= */
header {
  background:var(--nav);
  position:sticky; top:0; z-index:100;
  box-shadow:0 3px 10px rgba(0,0,0,0.2);
}
.nav { display:flex; justify-content:space-between; align-items:center; padding:15px 40px; }
.logo a { color:#fff; font-weight:700; font-size:1.3em; letter-spacing:1px; }
.main-nav { display:flex; gap:12px; align-items:center; }
nav a { color:#e5ecff; margin:0 6px; font-weight:500; position:relative; }
nav a::after { content:''; position:absolute; width:0; height:2px; left:0; bottom:-4px; background:var(--accent); transition:0.3s; }
nav a:hover { color:var(--accent); text-shadow:0 0 6px rgba(243,156,18,0.4); }
nav a:hover::after { width:100%; }
nav a.active { color:var(--accent); font-weight:600; }

/* Buttons */
.btn {
  background:var(--accent); color:#fff; padding:10px 18px; border-radius:8px;
  font-weight:600; display:inline-block; transition:all 0.25s ease;
}
.btn:hover { transform:scale(1.05) translateY(-2px); box-shadow:0 6px 15px rgba(0,0,0,0.15); }
.btn.small { font-size:0.9em; padding:6px 12px; }
.btn.outline { background:transparent; color:var(--accent); border:2px solid var(--accent); }
.btn.outline:hover { background:var(--accent); color:#fff; }
.logout-btn { background:var(--danger) !important; color:#fff !important; border:none; margin-left:10px; }
.logout-btn:hover { background:#dc2626 !important; transform:scale(1.05) translateY(-2px); box-shadow:0 6px 15px rgba(239,68,68,0.4); }

/* Mobile toggle */
.mobile-toggle { display:none; flex-direction:column; background:transparent; border:none; cursor:pointer; padding:5px; }
.mobile-toggle span { width:25px; height:3px; background:#fff; margin:3px 0; transition:0.3s; border-radius:2px; }
.mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px, 5px); }
.mobile-toggle.active span:nth-child(2) { opacity:0; }
.mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(7px, -6px); }

/* Dropdowns */
.dropdown { position:relative; display:inline-block; }
.dropdown-arrow { font-size:0.7em; margin-left:4px; }
.dropdown-menu {
  display:none; position:absolute; top:100%; left:0; background:#fff; min-width:200px;
  box-shadow:0 8px 16px rgba(0,0,0,0.15); border-radius:8px; padding:10px 0; margin-top:6px; z-index:200;
  opacity:0; transform:translateY(-8px); transition:all 0.25s ease;
}
.dropdown:hover .dropdown-menu, .dropdown.show .dropdown-menu { display:block; opacity:1; transform:translateY(0); }
.dropdown-menu a { display:block; padding:10px 16px; color:var(--ink); }
.dropdown-menu a:hover { background:var(--bg); color:var(--accent); }
.dropdown-menu hr { margin:6px 0; border:none; border-top:1px solid #e5e5e5; }
.cart-link { position:relative; }
.cart-badge {
  position:absolute; top:-8px; right:-10px; background:var(--danger); color:#fff;
  font-size:0.75em; font-weight:700; padding:2px 6px; border-radius:10px; min-width:18px; text-align:center;
}
.user-dropdown .dropdown-menu { right:0; left:auto; }

/* =========================
   HERO
   ========================= */
.hero {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px;
  padding:80px 50px; color:#fff; background:linear-gradient(120deg,#1abc9c,#16a085);
}
.hero-content { flex:1 1 400px; min-width:300px; }
.hero-content h1 { font-size:2.8em; margin-bottom:15px; font-weight:700; animation:fadeInDown 1s ease; }
.hero-content p { margin-bottom:25px; font-size:1.1em; max-width:520px; animation:fadeInUp 1.2s ease; }
.hero .btn { background:var(--accent); }
.hero .btn:hover { background:#d35400; }
.hero-img { flex:1 1 320px; text-align:center; }
.hero-img img { width:90%; max-width:500px; border-radius:14px; box-shadow:0 8px 25px rgba(0,0,0,0.25); transition:transform 0.5s ease; }
.hero-img img:hover { transform:scale(1.05); }

/* =========================
   SECTIONS
   ========================= */
.section { padding:70px 50px; text-align:center; }
.section-title { font-size:2.2em; margin-bottom:40px; color:var(--ink); position:relative; }
.section-title::after { content:''; width:80px; height:3px; background:var(--accent); display:block; margin:10px auto 0; border-radius:3px; }

/* =========================
   FEATURED BIKES
   ========================= */
.bike-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px; justify-content:center; }
.bike-card {
  background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  padding:20px; transition:transform 0.3s, box-shadow 0.3s;
}
.bike-card:hover { transform:translateY(-8px); box-shadow:0 12px 25px rgba(0,0,0,0.2); }
.bike-image { position:relative; overflow:hidden; border-radius:8px; height:250px; }
.bike-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s, opacity 0.4s; }
.bike-card:hover .bike-image img { transform:scale(1.08); }
.hover-text {
  position:absolute; inset:auto 0 0 0; min-height:45%; background:rgba(26,188,156,0.92); color:#fff;
  padding:16px; font-size:0.95rem; transform:translateY(100%); transition:transform 0.35s ease;
}
.bike-card:hover .hover-text { transform:translateY(0%); }
.bike-card h3 { margin:16px 0 6px; color:var(--ink); font-weight:600; }
.bike-card p { color:#555; font-size:0.95em; }
.price { display:inline-block; margin-top:10px; font-weight:700; color:var(--accent); font-size:1.2rem; }

/* =========================
   ABOUT
   ========================= */
.about {
  background:#fff; padding:60px; text-align:center; border-top:4px solid var(--nav);
  border-radius:12px; margin:40px; box-shadow:var(--shadow);
}
.about p { max-width:800px; margin:10px auto 25px; color:#333; line-height:1.7; }

/* =========================
   GALLERY
   ========================= */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; padding:0 20px; }
.gallery-grid img { border-radius:12px; transition:all 0.4s ease; box-shadow:0 6px 15px rgba(0,0,0,0.1); }
.gallery-grid img:hover { transform:scale(1.06); box-shadow:0 10px 30px rgba(0,0,0,0.25); filter:brightness(1.05); }

/* =========================
   FOOTER
   ========================= */
footer { background:var(--nav); color:#fff; text-align:center; padding:20px 0; margin-top:60px; font-size:0.9em; }

/* =========================
   SHOP
   ========================= */
.shop-hero-fixed {
    background: linear-gradient(90deg, #1f2d3d) !important;
    padding: 60px 0 !important;
    text-align: center !important;
    color: #fff !important;
}

.shop-hero-fixed-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.shop-hero-fixed h1 {
    font-size: 40px !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
    color: #fff !important;
}

.shop-hero-fixed p {
    font-size: 16px !important;
    color: rgba(255,255,255,0.8) !important;
    margin: 0 !important;
}
/* Shop controls */
.shop-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; gap:20px; flex-wrap:wrap; }
.search-box form { display:flex; }
.search-box input {
  padding:10px 15px; border:1px solid #ddd; border-right:none; border-radius:8px 0 0 8px; min-width:250px; font-size:1em;
}
.search-box button { padding:10px 20px; background:var(--accent); border:none; border-radius:0 8px 8px 0; cursor:pointer; font-size:1.05em; color:#fff; }
.sort-box select { padding:10px 15px; border:1px solid #ddd; border-radius:8px; font-size:1em; cursor:pointer; }

/* Category pills */
.category-pills { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.pill { padding:8px 16px; background:#fff; border:2px solid #e5e5e5; border-radius:20px; color:var(--ink); font-size:0.9em; font-weight:500; transition:all 0.25s; }
.pill:hover, .pill.active { background:var(--nav); color:#fff; border-color:var(--nav); }

/* Products grid */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:30px; margin-bottom:40px; }
.product-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); transition:transform 0.3s, box-shadow 0.3s; position:relative; }
.product-card:hover { transform:translateY(-6px); box-shadow:0 8px 20px rgba(0,0,0,0.15); }
.badge-featured, .badge-stock {
  position:absolute; top:10px; right:10px; background:var(--accent); color:#fff;
  font-size:0.85em; font-weight:700; padding:5px 10px; border-radius:6px; z-index:10;
}
.badge-stock { background:var(--danger); }
.product-image { height:200px; overflow:hidden; background:#f5f5f5; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.product-card:hover .product-image img { transform:scale(1.08); }
.product-info { padding:20px; }
.product-category { display:inline-block; font-size:0.85em; color:var(--muted); text-transform:uppercase; font-weight:600; margin-bottom:8px; }
.product-info h3 { font-size:1.2em; margin-bottom:10px; color:var(--ink); }
.product-info h3 a { color:var(--ink); }
.product-info h3 a:hover { color:var(--accent); }
.product-description { color:#666; font-size:0.93em; margin-bottom:15px; line-height:1.55; }
.product-footer { display:flex; justify-content:space-between; align-items:center; }
.product-price { font-size:1.3em; font-weight:700; color:var(--accent); }

/* No results */
.no-results { text-align:center; padding:60px 20px; }
.no-results h3 { font-size:1.8em; color:var(--ink); margin-bottom:10px; }
.no-results p { color:#666; margin-bottom:25px; }

/* =========================
   PRODUCT DETAIL
   ========================= */
.product-detail { padding:40px 20px; }
.breadcrumb { font-size:0.9em; margin-bottom:24px; color:var(--muted); }
.breadcrumb a { color:var(--ink); }
.breadcrumb a:hover { color:var(--accent); }
.product-layout { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-bottom:60px; }
.product-main-image img { width:100%; border-radius:12px; box-shadow:var(--shadow); }
.product-main-info { display:flex; flex-direction:column; gap:16px; }
.product-main-info h1 { font-size:2em; color:var(--ink); }
.product-price-large { font-size:2.2em; font-weight:700; color:var(--accent); }
.product-stock .in-stock { color:var(--success); font-weight:700; }
.product-stock .out-of-stock { color:var(--danger); font-weight:700; }
.product-main-info .product-description { line-height:1.7; color:#555; }

/* Add to cart */
.add-to-cart-form { display:flex; flex-direction:column; gap:15px; }
.quantity-selector { display:flex; align-items:center; gap:15px; }
.quantity-selector label { font-weight:600; }
.quantity-selector input { width:90px; padding:8px; border:1px solid #ddd; border-radius:8px; font-size:1em; text-align:center; }
.btn-large { padding:14px 24px; font-size:1.1em; }

/* Product specs and related */
.product-specs { background:#f9f9f9; padding:20px; border-radius:12px; }
.product-specs h3 { margin-bottom:15px; color:var(--ink); }
.product-specs ul { list-style:none; }
.product-specs li { padding:6px 0; color:#555; line-height:1.6; }
.related-products { margin-top:60px; }
.related-products h2 { text-align:center; margin-bottom:30px; color:var(--ink); }

/* =========================
   CART
   ========================= */
.cart-section { padding:40px 20px; min-height:70vh; }
.cart-section h1 { text-align:center; margin-bottom:30px; color:var(--ink); }
.cart-layout { display:grid; grid-template-columns:2fr 1fr; gap:40px; }
.cart-items { display:flex; flex-direction:column; gap:20px; }
.cart-item {
  display:grid; grid-template-columns:100px 1fr auto auto auto; gap:20px; align-items:center;
  background:#fff; padding:20px; border-radius:12px; box-shadow:var(--shadow);
}
.cart-item-image img { width:100px; height:100px; object-fit:cover; border-radius:8px; }
.cart-item-info h3 { color:var(--ink); margin-bottom:6px; }
.cart-item-price { color:#666; font-size:0.95em; }
.cart-item-quantity input { width:80px; padding:8px; border:1px solid #ddd; border-radius:8px; text-align:center; }
.btn-hidden { display:none; }
.cart-item-subtotal { font-size:1.2em; font-weight:700; color:var(--accent); }
.btn-remove {
  background:var(--danger); color:#fff; border:none; width:34px; height:34px; border-radius:50%;
  cursor:pointer; font-size:1.1em; transition:0.25s;
}
.btn-remove:hover { background:#dc2626; }
.cart-actions { display:flex; gap:12px; margin-top:10px; }

/* Cart summary */
.cart-summary {
  background:#fff; padding:30px; border-radius:12px; box-shadow:var(--shadow);
  height:fit-content; position:sticky; top:20px;
}
.cart-summary h2 { margin-bottom:20px; color:var(--ink); }
.summary-row { display:flex; justify-content:space-between; margin-bottom:12px; font-size:1em; }
.summary-row.total { font-size:1.3em; margin-top:15px; }
.cart-summary hr { margin:15px 0; border:none; border-top:1px solid #e5e5e5; }
.full-width { width:100%; text-align:center; }
.payment-icons { margin-top:20px; text-align:center; font-size:0.85em; color:#666; }
.payment-icons .icons { display:flex; flex-direction:column; gap:6px; margin-top:10px; }

/* Empty cart */
.empty-cart { text-align:center; padding:80px 20px; }
.empty-icon { font-size:4.5em; margin-bottom:16px; color:#cbd5e1; }
.empty-cart h2 { color:var(--ink); margin-bottom:10px; }
.empty-cart p { color:#666; margin-bottom:24px; }

/* =========================
   CHECKOUT
   ========================= */
.checkout-section { padding:40px 20px; }
.checkout-section h1 { text-align:center; margin-bottom:36px; color:var(--ink); }
.checkout-layout { display:grid; grid-template-columns:2fr 1fr; gap:40px; }
.form-section { background:#fff; padding:30px; border-radius:12px; box-shadow:var(--shadow); margin-bottom:20px; }
.form-section h2 { margin-bottom:18px; color:var(--ink); }
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:8px; font-weight:600; color:#333; }
.form-group input, .form-group textarea { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:1em; font-family:inherit; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* Payment options */
.payment-options { display:flex; flex-direction:column; gap:15px; }
.payment-option {
  display:flex; align-items:center; gap:15px; padding:15px; border:2px solid #e5e5e5; border-radius:8px;
  cursor:pointer; transition:0.25s;
}
.payment-option:hover { border-color:var(--accent); background:#fffbf0; }
.payment-option input[type="radio"] { width:20px; height:20px; cursor:pointer; }
.payment-info strong { display:block; margin-bottom:5px; color:var(--ink); }
.payment-info p { font-size:0.9em; color:#666; }

/* Order summary (checkout sidebar) */
.checkout-sidebar .order-summary { background:#fff; padding:30px; border-radius:12px; box-shadow:var(--shadow); position:sticky; top:20px; }
.order-summary h2 { margin-bottom:20px; color:var(--ink); }
.order-items { max-height:300px; overflow-y:auto; margin-bottom:20px; }
.order-item { display:flex; gap:10px; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #f0f0f0; }
.order-item:last-child { border-bottom:none; }
.order-item img { width:60px; height:60px; object-fit:cover; border-radius:6px; }
.order-item-info { flex:1; }
.order-item-info p { font-size:0.92em; color:var(--ink); font-weight:600; }
.order-item-qty { font-size:0.85em !important; color:#666 !important; font-weight:400 !important; }
.order-item-price { font-weight:700; color:var(--accent); }
.order-totals { margin-bottom:20px; }
.total-row { display:flex; justify-content:space-between; margin-bottom:10px; }
.grand-total { font-size:1.2em; padding-top:10px; border-top:2px solid var(--nav); }
.back-link { display:block; text-align:center; margin-top:15px; color:var(--ink); font-size:0.9em; }
.back-link:hover { color:var(--accent); }

/* =========================
   ORDERS (LIST)
   ========================= */
.orders-section { padding:40px 20px; min-height:70vh; }
.orders-section h1 { text-align:center; margin-bottom:36px; color:var(--ink); }
.orders-list { display:flex; flex-direction:column; gap:20px; max-width:960px; margin:0 auto; }
.order-card { background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.order-header { display:flex; justify-content:space-between; align-items:center; padding:20px; background:#f9fafb; border-bottom:1px solid #e5e7eb; }
.order-header h3 { color:var(--ink); margin-bottom:4px; }
.order-date { font-size:0.85em; color:#666; }
.order-body { display:flex; justify-content:space-between; align-items:center; padding:20px; }
.order-info p { margin-bottom:5px; font-size:0.95em; }

/* Status badges */
.status-badge { display:inline-block; padding:6px 12px; border-radius:20px; font-size:0.85em; font-weight:700; }
.status-badge.pending { background:#fef3c7; color:#92400e; }
.status-badge.processing { background:#dbeafe; color:#1e40af; }
.status-badge.confirmed { background:#fde68a; color:#a16207; }
.status-badge.shipped { background:#e0e7ff; color:#4338ca; }
.status-badge.delivered { background:#d1fae5; color:#065f46; }
.status-badge.cancelled { background:#fee2e2; color:#991b1b; }

/* =========================
   ORDER DETAIL
   ========================= */
.order-detail { max-width:1100px; margin:0 auto; padding:40px 20px; }
.order-detail-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; padding-bottom:18px; border-bottom:2px solid #e5e7eb; }
.order-detail-header h2 { color:var(--ink); }
.order-detail-layout { display:grid; grid-template-columns:2fr 1fr; gap:30px; }
.order-items-detail { background:#fff; padding:30px; border-radius:12px; box-shadow:var(--shadow); }
.order-items-detail h3 { margin-bottom:18px; color:var(--ink); }
.order-item-detail { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid #f0f0f0; }
.order-item-detail:last-child { border-bottom:none; }
.item-info h4 { color:var(--ink); margin-bottom:6px; }
.item-info p { font-size:0.92em; color:#666; }
.item-subtotal { font-weight:700; color:var(--accent); }
.order-total-detail { display:flex; justify-content:space-between; margin-top:18px; padding-top:18px; border-top:2px solid var(--nav); font-size:1.15em; }
.order-info-detail { display:flex; flex-direction:column; gap:20px; }
.info-section { background:#fff; padding:20px; border-radius:12px; box-shadow:var(--shadow); }
.info-section h3 { margin-bottom:12px; color:var(--ink); font-size:1.08em; }
.info-section p { font-size:0.95em; color:#555; line-height:1.6; }

/* =========================
   CONTACT
   ========================= */
.contact-hero {  background: linear-gradient(90deg, #1f2d3d); color:#fff; padding:60px 20px; text-align:center; }
.contact-hero h1 { font-size:2.4em; margin-bottom:8px; }
.contact-hero p { font-size:1.08em; opacity:0.92; }
.contact-section { padding:60px 20px; }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:1100px; margin:0 auto; }
.contact-form-wrapper, .contact-info-wrapper { background:#fff; padding:36px; border-radius:12px; box-shadow:var(--shadow); }
.contact-form-wrapper h2, .contact-info-wrapper h2 { margin-bottom:18px; color:var(--ink); }
.contact-info-item { display:flex; gap:15px; margin-bottom:22px; }
.contact-icon { font-size:1.5em; color:var(--accent); }
.contact-info-item h3 { color:var(--ink); margin-bottom:4px; }
.contact-info-item p { color:#666; line-height:1.6; }
.social-links { margin-top:24px; }
.social-links h3 { margin-bottom:12px; color:var(--ink); }
.social-icons { display:flex; gap:12px; }
.social-icon { padding:10px 16px; background:var(--nav); color:#fff; border-radius:8px; font-size:0.92em; transition:0.25s; }
.social-icon:hover { background:#148f77; }

/* =========================
   ABOUT
   ========================= */
.about-hero { background:linear-gradient(135deg,var(--nav),#16a085); color:#fff; padding:60px 20px; text-align:center; }
.about-hero h1 { font-size:2.4em; margin-bottom:8px; }
.about-hero p { font-size:1.08em; opacity:0.92; }
.about-story { padding:60px 20px; }
.about-layout { display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:center; max-width:1100px; margin:0 auto; }
.about-content h2 { color:var(--ink); margin-bottom:16px; }
.about-content p { color:#555; line-height:1.8; margin-bottom:16px; }
.about-image { text-align:center; }
.about-values { padding:60px 20px; background:#f9f9f9; }
.about-values h2 { text-align:center; margin-bottom:34px; color:var(--ink); font-size:2em; }
.values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px; max-width:1100px; margin:0 auto; }
.value-card { background:#fff; padding:26px; border-radius:12px; box-shadow:var(--shadow); text-align:center; transition:0.25s; }
.value-card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.value-icon { font-size:2.6em; margin-bottom:10px; color:var(--accent); }
.value-card h3 { color:var(--ink); margin-bottom:8px; }
.value-card p { color:#666; line-height:1.6; }
.about-mission { padding:60px 20px; }
.mission-box { max-width:800px; margin:0 auto; background:var(--nav); color:#fff; padding:36px; border-radius:12px; text-align:center; }
.mission-box h2 { margin-bottom:14px; }
.mission-box p { font-size:1.05em; line-height:1.8; }
.about-cta { padding:60px 20px; background:#f9f9f9; text-align:center; }
.about-cta h2 { color:var(--ink); margin-bottom:10px; }
.about-cta p { color:#666; margin-bottom:24px; }

/* =========================
   SUCCESS
   ========================= */
.success-section { padding:60px 20px; min-height:70vh; display:flex; align-items:center; justify-content:center; }
.success-card { background:#fff; padding:44px; border-radius:12px; box-shadow:var(--shadow); text-align:center; max-width:640px; }
.success-icon { width:80px; height:80px; background:var(--success); color:#fff; font-size:2.6em; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.success-card h1 { color:var(--ink); margin-bottom:12px; }
.order-number { background:#f0f3f5; padding:14px; border-radius:8px; margin:18px 0; font-size:1.06em; }
.success-message { margin:24px 0; color:#555; line-height:1.7; }
.success-actions { display:flex; gap:12px; justify-content:center; margin:24px 0; }
.next-steps { margin-top:30px; text-align:left; }
.next-steps h3 { color:var(--ink); margin-bottom:10px; }
.next-steps ol { margin-left:18px; color:#555; line-height:1.8; }

/* =========================
   ALERTS
   ========================= */
.alert { padding:15px 20px; border-radius:8px; margin:18px auto; max-width:900px; font-weight:600; }
.alert.success { background:#d1fae5; color:#065f46; border-left:4px solid var(--success); }
.alert.error { background:#fee2e2; color:#991b1b; border-left:4px solid var(--danger); }

/* =========================
   SIMPLE HEADERS, FORMS, DASHBOARD
   ========================= */
.header-simple { background:var(--nav); padding:18px; text-align:center; }
.header-simple .logo a { color:#fff; font-weight:700; font-size:1.2em; }
.form-bg { background:linear-gradient(135deg,#1abc9c,#16a085); min-height:100vh; }
.form-card { max-width:420px; margin:90px auto; background:#fff; padding:34px 24px; border-radius:12px; box-shadow:var(--shadow); text-align:center; }
.form-card h2 { color:var(--ink); margin-bottom:8px; }
.form-sub { color:#555; margin-bottom:18px; font-size:0.95em; }
.form-card input { width:100%; padding:12px; margin:8px 0; border:1px solid #d1d5db; border-radius:8px; font-size:1em; }
.form-card .btn.full { width:100%; margin-top:10px; }
.switch { margin-top:10px; font-size:0.92em; }
.switch a { color:var(--ink); font-weight:600; }
.switch a:hover { color:var(--accent); }
.msg { background:#fff8e1; border-left:4px solid var(--accent); color:#8a6d3b; padding:10px; margin-bottom:10px; border-radius:6px; }
.dash { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 120px); padding:20px; }
.dash-card { background:#fff; padding:42px 28px; border-radius:14px; box-shadow:var(--shadow); text-align:center; max-width:520px; }
.dash-img { width:100px; height:100px; border-radius:50%; object-fit:cover; margin-bottom:12px; box-shadow:0 0 10px rgba(0,0,0,0.2); }
.note { color:#555; margin:14px 0 20px; }

/* =========================
   SHOPEE-STYLE ORDER BANNER (OPTIONAL)
   ========================= */
.shopee-order-banner { background:linear-gradient(135deg,#ee4d2d,#ff7337); color:#fff; padding:18px 0; margin-bottom:24px; box-shadow:0 2px 8px rgba(238,77,45,0.3); }
.shopee-order-header { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.back-btn { color:#fff; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:5px; opacity:0.92; }
.back-btn:hover { opacity:1; text-decoration:underline; }
.order-date { font-size:14px; opacity:0.9; }
.shopee-status-container { background:#fff; border-radius:12px; padding:20px; box-shadow:var(--shadow); }
.shopee-status-flow { display:flex; justify-content:space-between; position:relative; padding-bottom:12px; }
.shopee-status-step { display:flex; align-items:center; flex:1; position:relative; z-index:2; }
.status-step-icon { width:40px; height:40px; background:#f5f5f5; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; margin-right:12px; transition:all 0.3s ease; }
.shopee-status-step.active .status-step-icon { background:#ee4d2d; color:#fff; transform:scale(1.08); box-shadow:0 0 0 4px rgba(238,77,45,0.2); }
.status-step-label { font-weight:700; color:#333; font-size:15px; margin-bottom:2px; }
.status-step-desc { color:#666; font-size:13px; }
.shopee-status-step.active .status-step-label { color:#ee4d2d; }
.shopee-status-step.active .status-step-desc { color:#ee4d2d; font-weight:600; }
.order-progress-bar { height:4px; background:#f0f0f0; border-radius:2px; overflow:hidden; margin-top:10px; }
.progress-fill { height:100%; background:#ee4d2d; border-radius:2px; transition:width 0.5s ease; }

/* Action buttons (Shopee section) */
.action-buttons { display:flex; gap:12px; margin:18px 0; flex-wrap:wrap; }
.btn-shopee { padding:12px 24px; border-radius:6px; text-decoration:none; font-weight:700; font-size:14px; transition:all 0.3s ease; border:2px solid transparent; }
.btn-buy-again { background:#fff; color:#ee4d2d; border-color:#ee4d2d; }
.btn-buy-again:hover { background:#ee4d2d; color:#fff; transform:translateY(-2px); box-shadow:0 4px 12px rgba(238,77,45,0.3); }
.btn-contact { background:#ee4d2d; color:#fff; }
.btn-contact:hover { background:#d84324; transform:translateY(-2px); box-shadow:0 4px 12px rgba(238,77,45,0.3); }
.btn-track { background:#00bfa5; color:#fff; }
.btn-track:hover { background:#009688; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,191,165,0.3); }

/* Scrollbar styling for timelines */
.timeline-items::-webkit-scrollbar { width:6px; }
.timeline-items::-webkit-scrollbar-track { background:#f1f1f1; border-radius:3px; }
.timeline-items::-webkit-scrollbar-thumb { background:#ee4d2d; border-radius:3px; }
.timeline-items::-webkit-scrollbar-thumb:hover { background:#d84324; }

/* =========================
   INVENTORY (OPTIONAL ADMIN-LIKE)
   ========================= */
.inventory-container { padding:40px 30px; }
.inventory-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.inventory-search { display:flex; justify-content:flex-end; margin-bottom:20px; }
.inventory-search input { padding:8px; width:250px; border:1px solid #ccc; border-radius:5px 0 0 5px; }
.inventory-search button { border-radius:0 5px 5px 0; }
.inventory-table { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.inventory-table th, .inventory-table td { border:1px solid #eee; padding:10px; text-align:center; }
.inventory-table th { background:var(--nav); color:#fff; }
.inventory-table tr:nth-child(even) { background-color:#f9f9f9; }
.status { padding:6px 10px; border-radius:6px; font-size:0.9em; color:#fff; font-weight:700; }
.status.in-stock { background-color:#10b981; }
.status.low-stock { background-color:#f59e0b; }
.status.out-stock { background-color:#d9534f; }
.action-btn { border:none; padding:6px 12px; margin:2px; border-radius:6px; cursor:pointer; font-weight:700; }
.action-btn.edit { background-color:#16a085; color:#fff; }
.action-btn.delete { background-color:#d9534f; color:#fff; }
.action-btn:hover { opacity:0.9; }

/* =========================
   ANIMATIONS
   ========================= */
.animate { opacity:0; transform:translateY(60px); transition:all 0.9s cubic-bezier(0.22,1,0.36,1); will-change:opacity,transform; }
.animate.show { opacity:1; transform:translateY(0); }
.animate.left { transform:translateX(-60px); }
.animate.right { transform:translateX(60px); }
.animate.left.show, .animate.right.show { transform:translateX(0); }
.bike-card.animate { transition-delay:0.1s; }
.bike-card.animate:nth-child(2) { transition-delay:0.2s; }
.bike-card.animate:nth-child(3) { transition-delay:0.3s; }
@keyframes fadeInDown { from{opacity:0; transform:translateY(-30px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeInUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1024px) {
  .product-layout, .cart-layout, .checkout-layout, .order-detail-layout, .contact-layout, .about-layout {
    grid-template-columns:1fr;
  }
}
@media (max-width: 768px) {
  .mobile-toggle { display:flex; }
  .main-nav {
    position:fixed; top:60px; left:-100%; width:100%; height:calc(100vh - 60px);
    background:var(--nav); flex-direction:column; padding:30px 20px; transition:left 0.3s; overflow-y:auto;
  }
  .main-nav.active { left:0; }
  .main-nav a { display:block; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.1); color:#fff; }
  .dropdown-menu { position:static; display:none; box-shadow:none; background:rgba(255,255,255,0.1); margin-top:10px; opacity:1; transform:none; transition:none; }
  .dropdown:hover .dropdown-menu, .dropdown.show .dropdown-menu, .dropdown.active .dropdown-menu { display:block; }
  .hero { padding:60px 24px; }
  .section { padding:50px 24px; }
  .order-header, .order-body { flex-direction:column; gap:10px; }
  .cart-item { grid-template-columns:80px 1fr auto; grid-template-rows:auto auto; }
  .cart-item-quantity { grid-column:2 / 3; }
  .cart-item-subtotal { grid-column:3 / 4; grid-row:1 / 2; }
  .cart-item-remove { grid-column:3 / 4; grid-row:2 / 3; }
  .shop-controls { flex-direction:column; align-items:stretch; }
  .search-box input { min-width:100%; }
  .action-buttons { flex-direction:column; }
  .btn-shopee { width:100%; text-align:center; }
}
:root {
  --nav: #2c3e50;       /* asphalt gray-blue */
  --accent: #e74c3c;    /* energetic red */
  --accent-alt: #f1c40f;/* bright yellow accent */
  --muted: #7f8c8d;     /* muted gray */
  --bg: #f4f6f7;        /* light neutral background */
  --ink: #2c3e50;       /* deep ink */
  --danger: #c0392b;    /* danger red */
  --success: #27ae60;   /* green */
  --shadow: 0 8px 22px rgba(0,0,0,0.08);
  --radius: 12px;
}

/* Base */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:#333; line-height:1.6; }
a { text-decoration:none; transition:0.3s ease; color:inherit; }
img { max-width:100%; display:block; }

/* Header / Navbar */
header { background:var(--nav); position:sticky; top:0; z-index:100; box-shadow:0 3px 10px rgba(0,0,0,0.2); }
.nav { display:flex; justify-content:space-between; align-items:center; padding:15px 40px; }
.logo a { color:#fff; font-weight:700; font-size:1.3em; letter-spacing:1px; }
.main-nav { display:flex; align-items:center; gap:12px; }
nav a { color:#ecf0f1; margin:0 6px; font-weight:500; position:relative; }
nav a::after { content:''; position:absolute; width:0; height:2px; left:0; bottom:-4px; background:var(--accent); transition:0.3s; }
nav a:hover { color:var(--accent-alt); text-shadow:0 0 6px rgba(241,196,15,0.4); }
nav a:hover::after { width:100%; }
nav a.active { color:var(--accent); font-weight:600; }

/* Dropdowns & badges */
.dropdown { position:relative; display:inline-block; }
.dropdown-arrow { font-size:0.7em; margin-left:4px; }
.dropdown-menu {
  display:none; position:absolute; top:100%; left:0; background:#fff; min-width:200px;
  box-shadow:0 8px 16px rgba(0,0,0,0.15); border-radius:8px; padding:10px 0; margin-top:6px; z-index:200;
  opacity:0; transform:translateY(-8px); transition:all 0.25s ease;
}
.dropdown:hover .dropdown-menu, .dropdown.show .dropdown-menu { display:block; opacity:1; transform:translateY(0); }
.dropdown-menu a { display:block; padding:10px 16px; color:var(--ink); }
.dropdown-menu a:hover { background:var(--bg); color:var(--accent); }
.dropdown-menu hr { margin:6px 0; border:none; border-top:1px solid #e5e5e5; }
.cart-link { position:relative; }
.cart-badge {
  position:absolute; top:-8px; right:-10px; background:var(--danger); color:#fff;
  font-size:0.75em; font-weight:700; padding:2px 6px; border-radius:10px; min-width:18px; text-align:center;
}
.user-dropdown .dropdown-menu { right:0; left:auto; }

/* Buttons */
.btn { background:var(--accent); color:#fff; padding:10px 18px; border-radius:8px; font-weight:600; display:inline-block; transition:all 0.25s ease; }
.btn:hover { transform:scale(1.05) translateY(-2px); box-shadow:0 6px 15px rgba(0,0,0,0.15); }
.btn.small { font-size:0.9em; padding:6px 12px; }
.btn.outline { background:transparent; color:var(--accent); border:2px solid var(--accent); }
.btn.outline:hover { background:var(--accent); color:#fff; }
.btn.large { padding:14px 24px; font-size:1.08em; }
.btn.full { display:block; width:100%; }
.logout-btn { background:var(--danger) !important; color:#fff !important; border:none; }

/* Mobile toggle */
.mobile-toggle { display:none; flex-direction:column; background:transparent; border:none; cursor:pointer; padding:5px; }
.mobile-toggle span { width:25px; height:3px; background:#fff; margin:3px 0; transition:0.3s; border-radius:2px; }
.mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px, 5px); }
.mobile-toggle.active span:nth-child(2) { opacity:0; }
.mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(7px, -6px); }

/* Hero */
.hero {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px;
  padding:80px 50px; color:#fff; background:linear-gradient(120deg,var(--nav),#34495e);
}
.hero-content { flex:1 1 400px; min-width:300px; }
.hero-content h1 { font-size:2.8em; margin-bottom:15px; font-weight:700; animation:fadeInDown 1s ease; }
.hero-content p { margin-bottom:25px; font-size:1.1em; max-width:520px; animation:fadeInUp 1.2s ease; }
.hero .btn { background:var(--accent-alt); color:var(--nav); }
.hero .btn:hover { background:#d4ac0d; }
.hero-img { flex:1 1 320px; text-align:center; }
.hero-img img { width:90%; max-width:500px; border-radius:14px; box-shadow:0 8px 25px rgba(0,0,0,0.25); transition:transform 0.5s ease; }
.hero-img img:hover { transform:scale(1.05); }

/* Sections */
.section { padding:70px 50px; text-align:center; }
.section-title { font-size:2.2em; margin-bottom:40px; color:var(--ink); position:relative; }
.section-title::after { content:''; width:80px; height:3px; background:var(--accent); display:block; margin:10px auto 0; border-radius:3px; }

/* Featured bikes */
.bike-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px; justify-content:center; }
.bike-card {
  background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  padding:20px; transition:transform 0.3s, box-shadow 0.3s;
}
.bike-card:hover { transform:translateY(-8px); box-shadow:0 12px 25px rgba(0,0,0,0.2); }
.bike-image { position:relative; overflow:hidden; border-radius:8px; height:250px; }
.bike-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s, opacity 0.4s; }
.bike-card:hover .bike-image img { transform:scale(1.08); }
.hover-text {
  position:absolute; inset:auto 0 0 0; min-height:45%; background:rgba(231,76,60,0.92); color:#fff;
  padding:16px; font-size:0.95rem; transform:translateY(100%); transition:transform 0.35s ease;
}
.bike-card:hover .hover-text { transform:translateY(0%); }
.bike-card h3 { margin:16px 0 6px; color:var(--ink); font-weight:600; }
.bike-card p { color:#555; font-size:0.95em; }
.price { display:inline-block; margin-top:10px; font-weight:700; color:var(--accent); font-size:1.2rem; }

/* About */
.about {
  background:#fff; padding:60px; text-align:center; border-top:4px solid var(--nav);
  border-radius:12px; margin:40px; box-shadow:var(--shadow);
}
.about p { max-width:800px; margin:10px auto 25px; color:#333; line-height:1.7; }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; padding:0 20px; }
.gallery-grid img { border-radius:12px; transition:all 0.4s ease; box-shadow:0 6px 15px rgba(0,0,0,0.1); }
.gallery-grid img:hover { transform:scale(1.06); box-shadow:0 10px 30px rgba(0,0,0,0.25); filter:brightness(1.05); }

/* Footer */
footer { background:var(--nav); color:#fff; text-align:center; padding:20px 0; margin-top:60px; font-size:0.9em; }



/* Shop controls */
.shop-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; gap:20px; flex-wrap:wrap; }
.search-box form { display:flex; }
.search-box input {
  padding:10px 15px; border:1px solid #ddd; border-right:none; border-radius:8px 0 0 8px; min-width:250px; font-size:1em;
}
.search-box button { padding:10px 20px; background:var(--accent); border:none; border-radius:0 8px 8px 0; cursor:pointer; font-size:1.05em; color:#fff; }
.sort-box select { padding:10px 15px; border:1px solid #ddd; border-radius:8px; font-size:1em; cursor:pointer; }

/* Category pills */
.category-pills { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.pill { padding:8px 16px; background:#fff; border:2px solid #e5e5e5; border-radius:20px; color:var(--ink); font-size:0.9em; font-weight:500; transition:all 0.25s; }
.pill:hover, .pill.active { background:var(--nav); color:#fff; border-color:var(--nav); }

/* Products grid */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:30px; margin-bottom:40px; }
.product-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); transition:transform 0.3s, box-shadow 0.3s; position:relative; }
.product-card:hover { transform:translateY(-6px); box-shadow:0 8px 20px rgba(0,0,0,0.15); }
.badge-featured, .badge-stock {
  position:absolute; top:10px; right:10px; background:var(--accent-alt); color:var(--nav);
  font-size:0.85em; font-weight:700; padding:5px 10px; border-radius:6px; z-index:10;
}
.badge-stock { background:var(--danger); color:#fff; }
.product-image { height:200px; overflow:hidden; background:#f5f5f5; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.product-card:hover .product-image img { transform:scale(1.08); }
.product-info { padding:20px; }
.product-category { display:inline-block; font-size:0.85em; color:var(--muted); text-transform:uppercase; font-weight:600; margin-bottom:8px; }
.product-info h3 { font-size:1.2em; margin-bottom:10px; color:var(--ink); }
.product-info h3 a { color:var(--ink); }
.product-info h3 a:hover { color:var(--accent); }
.product-description { color:#666; font-size:0.93em; margin-bottom:15px; line-height:1.55; }
.product-footer { display:flex; justify-content:space-between; align-items:center; }
.product-price { font-size:1.3em; font-weight:700; color:var(--accent); }

/* No results */
.no-results { text-align:center; padding:60px 20px; }
.no-results h3 { font-size:1.8em; color:var(--ink); margin-bottom:10px; }
.no-results p { color:#666; margin-bottom:25px; }

/* Product detail */
.product-detail { padding:40px 20px; }
.breadcrumb { font-size:0.9em; margin-bottom:24px; color:var(--muted); }
.breadcrumb a { color:var(--ink); }
.breadcrumb a:hover { color:var(--accent); }
.product-layout { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-bottom:60px; }
.product-main-image img { width:100%; border-radius:12px; box-shadow:var(--shadow); }
.product-main-info { display:flex; flex-direction:column; gap:16px; }
.product-main-info h1 { font-size:2em; color:var(--ink); }
.product-price-large { font-size:2.2em; font-weight:700; color:var(--accent); }
.product-stock .in-stock { color:var(--success); font-weight:700; }
.product-stock .out-of-stock { color:var(--danger); font-weight:700; }
.product-main-info .product-description { line-height:1.7; color:#555; }

/* Add to cart */
.add-to-cart-form { display:flex; flex-direction:column; gap:15px; }
.quantity-selector { display:flex; align-items:center; gap:15px; }
.quantity-selector label { font-weight:600; }
.quantity-selector input { width:90px; padding:8px; border:1px solid #ddd; border-radius:8px; font-size:1em; text-align:center; }

/* Product specs & related */
.product-specs { background:#f9f9f9; padding:20px; border-radius:12px; }
.product-specs h3 { margin-bottom:15px; color:var(--ink); }
.product-specs ul { list-style:none; }
.product-specs li { padding:6px 0; color:#555; line-height:1.6; }
.related-products { margin-top:60px; }
.related-products h2 { text-align:center; margin-bottom:30px; color:var(--ink); }

/* Cart */
.cart-section { padding:40px 20px; min-height:70vh; }
.cart-section h1 { text-align:center; margin-bottom:30px; color:var(--ink); }
.cart-layout { display:grid; grid-template-columns:2fr 1fr; gap:40px; }
.cart-items { display:flex; flex-direction:column; gap:20px; }
.cart-item {
  display:grid; grid-template-columns:100px 1fr auto auto auto; gap:20px; align-items:center;
  background:#fff; padding:20px; border-radius:12px; box-shadow:var(--shadow);
}
.cart-item-image img { width:100px; height:100px; object-fit:cover; border-radius:8px; }
.cart-item-info h3 { color:var(--ink); margin-bottom:6px; }
.cart-item-price { color:#666; font-size:0.95em; }
.cart-item-quantity input { width:80px; padding:8px; border:1px solid #ddd; border-radius:8px; text-align:center; }
.cart-item-subtotal { font-size:1.2em; font-weight:700; color:var(--accent); }
.btn-remove {
  background:var(--danger); color:#fff; border:none; width:34px; height:34px; border-radius:50%;
  cursor:pointer; font-size:1.1em; transition:0.25s;
}
.btn-remove:hover { background:#a93226; }

.cart-summary {
  background:#fff; padding:30px; border-radius:12px; box-shadow:var(--shadow);
  height:fit-content; position:sticky; top:20px;
}
.cart-summary h2 { margin-bottom:20px; color:var(--ink); }
.summary-row { display:flex; justify-content:space-between; margin-bottom:12px; font-size:1em; }
.summary-row.total { font-size:1.3em; margin-top:15px; }
.cart-summary hr { margin:15px 0; border:none; border-top:1px solid #e5e5e5; }
.payment-icons { margin-top:20px; text-align:center; font-size:0.85em; color:#666; }
.payment-icons .icons { display:flex; flex-direction:column; gap:6px; margin-top:10px; }

/* Empty cart */
.empty-cart { text-align:center; padding:80px 20px; }
.empty-icon { font-size:4.5em; margin-bottom:16px; color:#cbd5e1; }
.empty-cart h2 { color:var(--ink); margin-bottom:10px; }
.empty-cart p { color:#666; margin-bottom:24px; }

/* Checkout */
.checkout-section { padding:40px 20px; }
.checkout-section h1 { text-align:center; margin-bottom:36px; color:var(--ink); }
.checkout-layout { display:grid; grid-template-columns:2fr 1fr; gap:40px; }

.form-section { background:#fff; padding:30px; border-radius:12px; box-shadow:var(--shadow); margin-bottom:20px; }
.form-section h2 { margin-bottom:18px; color:var(--ink); }
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:8px; font-weight:600; color:#333; }
.form-group input, .form-group textarea { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:1em; font-family:inherit; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* Payment options */
.payment-options { display:flex; flex-direction:column; gap:15px; }
.payment-option {
  display:flex; align-items:center; gap:15px; padding:15px; border:2px solid #e5e5e5; border-radius:8px;
  cursor:pointer; transition:0.25s;
}
.payment-option:hover { border-color:var(--accent-alt); background:#fffbef; }
.payment-option input[type="radio"] { width:20px; height:20px; cursor:pointer; }
.payment-info strong { display:block; margin-bottom:5px; color:var(--ink); }
.payment-info p { font-size:0.9em; color:#666; }

/* Order summary (checkout sidebar) */
.checkout-sidebar .order-summary { background:#fff; padding:30px; border-radius:12px; box-shadow:var(--shadow); position:sticky; top:20px; }
.order-summary h2 { margin-bottom:20px; color:var(--ink); }
.order-items { max-height:300px; overflow-y:auto; margin-bottom:20px; }
.order-item { display:flex; gap:10px; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #f0f0f0; }
.order-item:last-child { border-bottom:none; }
.order-item img { width:60px; height:60px; object-fit:cover; border-radius:6px; }
.order-item-info { flex:1; }
.order-item-info p { font-size:0.92em; color:var(--ink); font-weight:600; }
.order-item-qty { font-size:0.85em !important; color:#666 !important; font-weight:400 !important; }
.order-item-price { font-weight:700; color:var(--accent); }
.order-totals { margin-bottom:20px; }
.total-row { display:flex; justify-content:space-between; margin-bottom:10px; }
.grand-total { font-size:1.2em; padding-top:10px; border-top:2px solid var(--nav); }
.back-link { display:block; text-align:center; margin-top:15px; color:var(--ink); font-size:0.9em; }
.back-link:hover { color:var(--accent); }

/* Orders (list) */
.orders-section { padding:40px 20px; min-height:70vh; }
.orders-section h1 { text-align:center; margin-bottom:36px; color:var(--ink); }
.orders-list { display:flex; flex-direction:column; gap:20px; max-width:960px; margin:0 auto; }
.order-card { background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.order-header { display:flex; justify-content:space-between; align-items:center; padding:20px; background:#f9fafb; border-bottom:1px solid #e5e7eb; }
.order-header h3 { color:var(--ink); margin-bottom:4px; }
.order-date { font-size:0.85em; color:#666; }
.order-body { display:flex; justify-content:space-between; align-items:center; padding:20px; }
.order-info p { margin-bottom:5px; font-size:0.95em; }

/* Status badges */
.status-badge { display:inline-block; padding:6px 12px; border-radius:20px; font-size:0.85em; font-weight:700; }
.status-badge.pending { background:#fff3c4; color:#7a5e10; }
.status-badge.processing { background:#e8edf0; color:#2c3e50; }
.status-badge.confirmed { background:#ffeaa7; color:#2c3e50; }
.status-badge.shipped { background:#d6ecff; color:#2c3e50; }
.status-badge.delivered { background:#d1fae5; color:#065f46; }
.status-badge.cancelled { background:#fee2e2; color:#991b1b; }

/* Order detail */
.order-detail { max-width:1100px; margin:0 auto; padding:40px 20px; }
.order-detail-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; padding-bottom:18px; border-bottom:2px solid #e5e7eb; }
.order-detail-header h2 { color:var(--ink); }
.order-detail-layout { display:grid; grid-template-columns:2fr 1fr; gap:30px; }
.order-items-detail { background:#fff; padding:30px; border-radius:12px; box-shadow:var(--shadow); }
.order-items-detail h3 { margin-bottom:18px; color:var(--ink); }
.order-item-detail { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid #f0f0f0; }
.order-item-detail:last-child { border-bottom:none; }
.item-info h4 { color:var(--ink); margin-bottom:6px; }
.item-info p { font-size:0.92em; color:#666; }
.item-subtotal { font-weight:700; color:var(--accent); }
.order-total-detail { display:flex; justify-content:space-between; margin-top:18px; padding-top:18px; border-top:2px solid var(--nav); font-size:1.15em; }
.order-info-detail { display:flex; flex-direction:column; gap:20px; }
.info-section { background:#fff; padding:20px; border-radius:12px; box-shadow:var(--shadow); }
.info-section h3 { margin-bottom:12px; color:var(--ink); font-size:1.08em; }
.info-section p { font-size:0.95em; color:#555; line-height:1.6; }

/* Contact page */
.contact-hero {  background: linear-gradient(90deg, #1f2d3d); color:#fff; padding:60px 20px; text-align:center; }
.contact-hero h1 { font-size:2.4em; margin-bottom:8px; }
.contact-hero p { font-size:1.08em; opacity:0.92; }
.contact-section { padding:60px 20px; }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:1100px; margin:0 auto; }
.contact-form-wrapper, .contact-info-wrapper { background:#fff; padding:36px; border-radius:12px; box-shadow:var(--shadow); }
.contact-form-wrapper h2, .contact-info-wrapper h2 { margin-bottom:18px; color:var(--ink); }
.contact-info-item { display:flex; gap:15px; margin-bottom:22px; }
.contact-icon { font-size:1.5em; color:var(--accent); }
.contact-info-item h3 { color:var(--ink); margin-bottom:4px; }
.contact-info-item p { color:#666; line-height:1.6; }
.social-links { margin-top:24px; }
.social-links h3 { margin-bottom:12px; color:var(--ink); }
.social-icons { display:flex; gap:12px; }
.social-icon { padding:10px 16px; background:var(--nav); color:#fff; border-radius:8px; font-size:0.92em; transition:0.25s; }
.social-icon:hover {background: linear-gradient(90deg, #1f2d3d); }

/* About page */
.about-hero { background:linear-gradient(135deg,var(--nav),#34495e); color:#fff; padding:60px 20px; text-align:center; }
.about-hero h1 { font-size:2.4em; margin-bottom:8px; }
.about-hero p { font-size:1.08em; opacity:0.92; }
.about-story { padding:60px 20px; }
.about-layout { display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:center; max-width:1100px; margin:0 auto; }
.about-content h2 { color:var(--ink); margin-bottom:16px; }
.about-content p { color:#555; line-height:1.8; margin-bottom:16px; }
.about-image { text-align:center; }
.about-values { padding:60px 20px; background:#f9f9f9; }
.about-values h2 { text-align:center; margin-bottom:34px; color:var(--ink); font-size:2em; }
.values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px; max-width:1100px; margin:0 auto; }
.value-card { background:#fff; padding:26px; border-radius:12px; box-shadow:var(--shadow); text-align:center; transition:0.25s; }
.value-card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.value-icon { font-size:2.6em; margin-bottom:10px; color:var(--accent); }
.value-card h3 { color:var(--ink); margin-bottom:8px; }
.value-card p { color:#666; line-height:1.6; }
.about-mission { padding:60px 20px; }
.mission-box { max-width:800px; margin:0 auto; background:var(--nav); color:#fff; padding:36px; border-radius:12px; text-align:center; }
.mission-box h2 { margin-bottom:14px; }
.mission-box p { font-size:1.05em; line-height:1.8; }
.about-cta { padding:60px 20px; background:#f9f9f9; text-align:center; }
.about-cta h2 { color:var(--ink); margin-bottom:10px; }
.about-cta p { color:#666; margin-bottom:24px; }

/* Success page */
.success-section { padding:60px 20px; min-height:70vh; display:flex; align-items:center; justify-content:center; }
.success-card { background:#fff; padding:44px; border-radius:12px; box-shadow:var(--shadow); text-align:center; max-width:640px; }
.success-icon { width:80px; height:80px; background:var(--success); color:#fff; font-size:2.6em; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.success-card h1 { color:var(--ink); margin-bottom:12px; }
.order-number { background:#f0f3f5; padding:14px; border-radius:8px; margin:18px 0; font-size:1.06em; }
.success-message { margin:24px 0; color:#555; line-height:1.7; }
.success-actions { display:flex; gap:12px; justify-content:center; margin:24px 0; }
.next-steps { margin-top:30px; text-align:left; }
.next-steps h3 { color:var(--ink); margin-bottom:10px; }
.next-steps ol { margin-left:18px; color:#555; line-height:1.8; }

/* Alerts */
.alert { padding:15px 20px; border-radius:8px; margin:18px auto; max-width:900px; font-weight:600; }
.alert.success { background:#d1fae5; color:#065f46; border-left:4px solid var(--success); }
.alert.error { background:#fee2e2; color:#991b1b; border-left:4px solid var(--danger); }

/* Forms & simple headers */
.header-simple { background:var(--nav); padding:18px; text-align:center; }
.header-simple .logo a { color:#fff; font-weight:700; font-size:1.2em; }
.form-bg { background:linear-gradient(135deg,var(--nav),#34495e); min-height:100vh; }
.form-card { max-width:420px; margin:90px auto; background:#fff; padding:34px 24px; border-radius:12px; box-shadow:var(--shadow); text-align:center; }
.form-card h2 { color:var(--ink); margin-bottom:8px; }
.form-sub { color:#555; margin-bottom:18px; font-size:0.95em; }
.form-card input { width:100%; padding:12px; margin:8px 0; border:1px solid #d1d5db; border-radius:8px; font-size:1em; }

/* Dashboard (customer quick card) */
.dash { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 120px); padding:20px; }
.dash-card { background:#fff; padding:42px 28px; border-radius:14px; box-shadow:var(--shadow); text-align:center; max-width:520px; }
.dash-img { width:100px; height:100px; border-radius:50%; object-fit:cover; margin-bottom:12px; box-shadow:0 0 10px rgba(0,0,0,0.2); }
.note { color:#555; margin:14px 0 20px; }

/* Shopee-style optional banner (if used) */
.shopee-order-banner { background:linear-gradient(135deg,#ee4d2d,#ff7337); color:#fff; padding:18px 0; margin-bottom:24px; box-shadow:0 2px 8px rgba(238,77,45,0.3); }
.shopee-order-header { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.back-btn { color:#fff; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:5px; opacity:0.92; }
.back-btn:hover { opacity:1; text-decoration:underline; }
.order-date { font-size:14px; opacity:0.9; }
.shopee-status-container { background:#fff; border-radius:12px; padding:20px; box-shadow:var(--shadow); }
.shopee-status-flow { display:flex; justify-content:space-between; position:relative; padding-bottom:12px; }
.shopee-status-step { display:flex; align-items:center; flex:1; position:relative; z-index:2; }
.status-step-icon { width:40px; height:40px; background:#f5f5f5; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; margin-right:12px; transition:all 0.3s ease; }
.shopee-status-step.active .status-step-icon { background:#ee4d2d; color:#fff; transform:scale(1.08); box-shadow:0 0 0 4px rgba(238,77,45,0.2); }
.status-step-label { font-weight:700; color:#333; font-size:15px; margin-bottom:2px; }
.status-step-desc { color:#666; font-size:13px; }
.shopee-status-step.active .status-step-label { color:#ee4d2d; }
.shopee-status-step.active .status-step-desc { color:#ee4d2d; font-weight:600; }
.order-progress-bar { height:4px; background:#f0f0f0; border-radius:2px; overflow:hidden; margin-top:10px; }
.progress-fill { height:100%; background:#ee4d2d; border-radius:2px; transition:width 0.5s ease; }

/* Animations */
.animate { opacity:0; transform:translateY(60px); transition:all 0.9s cubic-bezier(0.22,1,0.36,1); will-change:opacity,transform; }
.animate.show { opacity:1; transform:translateY(0); }
.animate.left { transform:translateX(-60px); }
.animate.right { transform:translateX(60px); }
.animate.left.show, .animate.right.show { transform:translateX(0); }
.bike-card.animate { transition-delay:0.1s; }
.bike-card.animate:nth-child(2) { transition-delay:0.2s; }
.bike-card.animate:nth-child(3) { transition-delay:0.3s; }
@keyframes fadeInDown { from{opacity:0; transform:translateY(-30px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeInUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

/* Responsive */
@media (max-width: 1024px) {
  .product-layout, .cart-layout, .checkout-layout, .order-detail-layout, .contact-layout, .about-layout {
    grid-template-columns:1fr;
  }
}
@media (max-width: 768px) {
  .mobile-toggle { display:flex; }
  .main-nav {
    position:fixed; top:60px; left:-100%; width:100%; height:calc(100vh - 60px);
    background:var(--nav); flex-direction:column; padding:30px 20px; transition:left 0.3s; overflow-y:auto;
  }
  .main-nav.active { left:0; }
  .main-nav a { display:block; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.1); color:#fff; }
  .dropdown-menu { position:static; display:none; box-shadow:none; background:rgba(255,255,255,0.1); margin-top:10px; opacity:1; transform:none; transition:none; }
  .dropdown:hover .dropdown-menu, .dropdown.show .dropdown-menu, .dropdown.active .dropdown-menu { display:block; }
  .hero { padding:60px 24px; }
  .section { padding:50px 24px; }
  .order-header, .order-body { flex-direction:column; gap:10px; }
  .cart-item { grid-template-columns:80px 1fr auto; grid-template-rows:auto auto; }
  .cart-item-quantity { grid-column:2 / 3; }
  .cart-item-subtotal { grid-column:3 / 4; grid-row:1 / 2; }
  .cart-item-remove { grid-column:3 / 4; grid-row:2 / 3; }
  .shop-controls { flex-direction:column; align-items:stretch; }
  .search-box input { min-width:100%; }
}



/* ===== MODERN DROPDOWN STYLE ===== */
.quotation-form-card .form-group select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #dcdfe4;
  background: #f9fbfd;
  font-size: 0.95rem;
  color: #2c3e50;
  font-family: inherit;
  outline: none;
  cursor: pointer;

  /* remove default arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* custom arrow */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%232c3e50' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5H5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;

  transition: all 0.25s ease;
}

/* hover effect */
.quotation-form-card .form-group select:hover {
  border-color: #2c3e50;
  background: #ffffff;
}

/* focus (clicked) */
.quotation-form-card .form-group select:focus {
  border-color: #2c3e50;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(44, 62, 80, 0.12);
}

/* dropdown label spacing */
.quotation-form-card .form-group label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #1f2d3a;
  margin-bottom: 8px;
}

/* smooth animation when clicking */
.quotation-form-card .form-group select:active {
  transform: scale(0.98);
}

/* ===== SHOPEE / LAZADA STYLE QUOTATION ===== */
.quotation-lzd-hero {
  background: linear-gradient(90deg, #ee4d2d 0%, #ff7337 55%, #f7a13b 100%);
  padding: 50px 20px 40px;
  color: #fff;
}

.quotation-lzd-hero-inner h1 {
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 10px;
  font-weight: 800;
}

.quotation-lzd-hero-inner p {
  font-size: 1rem;
  max-width: 620px;
  color: rgba(255,255,255,0.92);
}

.quotation-lzd-badge {
  display: inline-block;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.quotation-lzd-section {
  background: #f5f5f5;
  padding: 30px 20px 60px;
}

.quotation-lzd-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 24px;
  align-items: start;
}

.quotation-lzd-card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
  border: 1px solid #f0f0f0;
}

.quotation-lzd-form {
  padding: 26px;
}

.quotation-lzd-summary {
  padding: 24px;
  position: sticky;
  top: 90px;
}

.quotation-lzd-head,
.quotation-lzd-summary-head {
  margin-bottom: 22px;
}

.quotation-lzd-head h2,
.quotation-lzd-summary-head h2 {
  font-size: 1.35rem;
  color: #222;
  margin-bottom: 6px;
  font-weight: 700;
}

.quotation-lzd-head p,
.quotation-lzd-summary-head p {
  color: #777;
  font-size: 0.94rem;
}

.quotation-lzd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.quotation-lzd-field label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-size: 0.93rem;
  font-weight: 700;
}

.quotation-lzd-select-wrap {
  position: relative;
}

.quotation-lzd-select {
  width: 100%;
  height: 46px;
  padding: 0 44px 0 14px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
  color: #222;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.quotation-lzd-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.quotation-lzd-select:hover {
  border-color: #ee4d2d;
  box-shadow: 0 0 0 1px rgba(238,77,45,0.06);
}

.quotation-lzd-select:focus {
  border-color: #ee4d2d;
  box-shadow: 0 0 0 3px rgba(238,77,45,0.12);
}

.quotation-lzd-summary-list {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}

.quotation-lzd-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.95rem;
  color: #444;
}

.quotation-lzd-line:last-child {
  border-bottom: none;
}

.quotation-lzd-line span:last-child {
  font-weight: 700;
  color: #222;
}

.quotation-lzd-total-box {
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 18px 16px;
  background: #fff7f5;
  border: 1px solid #ffe1d8;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quotation-lzd-total-box span {
  color: #444;
  font-size: 1rem;
  font-weight: 600;
}

.quotation-lzd-total-box strong {
  color: #ee4d2d;
  font-size: 1.45rem;
  font-weight: 800;
}

.quotation-lzd-btn {
  background: #ee4d2d !important;
  border-radius: 4px !important;
  border: none;
}

.quotation-lzd-btn:hover {
  background: #d84324 !important;
}

@media (max-width: 1024px) {
  .quotation-lzd-layout {
    grid-template-columns: 1fr;
  }

  .quotation-lzd-summary {
    position: static;
  }
}

@media (max-width: 768px) {
  .quotation-lzd-hero-inner h1 {
    font-size: 1.9rem;
  }

  .quotation-lzd-grid {
    grid-template-columns: 1fr;
  }

  .quotation-lzd-form,
  .quotation-lzd-summary {
    padding: 20px;
  }
}


.logo a,
.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-box {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f05a28, #ff7a3d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(240, 90, 40, 0.28);
  flex-shrink: 0;
}

.logo-text {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
}

.logo-container:hover .logo-text {
  color: #ffffff;
}

.logo-container:hover .logo-box {
  filter: brightness(1.04);
}