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

/* ================= GLOBAL APP BACKGROUND ================= */
body {
  font-family: 'Roboto', sans-serif;

  /* App gradient background */
  background: linear-gradient(135deg, #1b5e20, #ff6f00);
  min-height: 100vh;
}




/* HERO */
.hero {
  background:linear-gradient(135deg,#1b5e20,#ff6f00);
  color:#fff;
  padding:25px 15px 40px;
  border-bottom-left-radius:25px;
  border-bottom-right-radius:25px;
}

/* HERO TOP */
.hero-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

/* ACTIONS */
.hero-actions {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap; /* 🔥 prevents stacking */
}

/* BUTTON SIZE CONTROL */
.hero-actions a {
  padding:6px 10px;
  font-size:12px;
  white-space:nowrap;
}

/* MAKE SELL STAND OUT */
.sell {
  background:#ff6f00;
  color:#fff;
  font-weight:600;
}

.logo img {
  height:50px;
}


@media(max-width:500px){
  .hero-actions {
    gap:4px;
  }

  .hero-actions a {
    font-size:11px;
    padding:5px 8px;
  }

  .sell {
    margin-left:6px;
  }
}

/* ACTIONS */
.hero-actions a {
  margin-left:8px;
  padding:8px 14px;
  border-radius:20px;
  font-size:13px;
  text-decoration:none;
}

.login { background:#fff; color:#1b5e20; }
.sell { background:#ff6f00; color:#fff; }

/* TITLE */
.hero h1 {
  font-size:1.8em;
  margin-bottom:10px;
}

/* TYPEWRITER */
.typewriter {
  font-size:14px;
  opacity:0.9;
  height:20px;
  margin-bottom:15px;
}

/* CENTER HERO CONTENT */
.hero-center {
  max-width:650px;
  margin:auto;
}

/* ================= HERO SEARCH ================= */
.search-box {
  display:flex;
  gap:10px;
  margin-bottom:10px;
}

.search-box input {
  width:100%;
  padding:12px;
  border-radius:10px;
  border:none;
  font-size:14px;
}

/* FILTER */
.filter-box {
  display:flex;
  gap:10px;
  flex-wrap:wrap; /* 🔥 prevents overflow */
}

.filter-box select {
  flex:1;
  min-width:120px;
  padding:12px;
  border-radius:10px;
  border:none;
}


/* FILTER */
.filter-box {
  display:flex;
  gap:10px;
}

.filter-box select {
  flex:1;
  padding:12px;
  border-radius:10px;
  border:none;
}

/* SECTION */
.section {
  padding:25px 15px;
  max-width:1100px;
  margin:auto;
}

.section-title {
  font-weight:700;
  margin-bottom:18px;
  font-size:18px;
  position:relative;
}

.section-title::after {
  content:'';
  width:50px;
  height:3px;
  background:#ff6f00;
  position:absolute;
  bottom:-6px;
  left:0;
}

/* CATEGORIES GRID */
.categories {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

/* DESKTOP */
@media(min-width:992px){
  .categories {
    grid-template-columns:repeat(6,1fr);
    gap:14px;
  }
}

/* CATEGORY CARD */
.category {
  background:#fff;
  padding:14px 8px;
  border-radius:12px;
  text-align:center;
  border:1px solid #eee;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  transition:all 0.25s ease;
  cursor:pointer;
}

/* ICON */
.category .icon {
  font-size:40px;
  margin-bottom:6px;
}

/* TEXT */
.category .title {
  font-size:11px;
  font-weight:500;
  color:#333;
}

/* MOBILE EXTRA COMPACT */
@media(max-width:500px){
  .category {
    padding:10px 4px;
    border-radius:10px;
  }

  .category .icon {
    font-size:45px;   /* 🔥 smaller */
    margin-bottom:4px;
  }

  .category .title {
    font-size:9px;
    line-height:1.2;
  }
}


.category:hover {
  transform:translateY(-5px) scale(1.03);
  background:#1b5e20; /* 🔥 site green */
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

/* CHANGE TEXT + ICON COLOR ON HOVER */
.category:hover .title,
.category:hover .icon {
  color:#fff;
}

.category,
.category .icon,
.category .title {
  transition:all 0.25s ease;
}

.category:active {
  transform:scale(0.96);
}

.category {
  opacity:0;
  transform:translateY(10px);
  animation:fadeUp 0.4s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity:1;
    transform:translateY(0);
  }
}



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

@media(min-width:992px){
  .listings {
    grid-template-columns:repeat(4,1fr);
  }
}

.card {
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,0.06);
}

.card img {
  width:100%;
  height:130px;
  object-fit:cover;
}

.card-body {
  padding:10px;
}

.price { color:#1b5e20; font-weight:700; }
.location { font-size:11px; color:#888; }

/* CTA */
.cta {
  text-align:center;
  padding:40px 20px;
  background:#1b5e20;
  color:#fff;
}

.cta a {
  margin-top:10px;
  display:inline-block;
  padding:12px 25px;
  background:#ff6f00;
  border-radius:25px;
  color:#fff;
  text-decoration:none;
}

.footer {
  text-align:center;
  padding:15px;
  font-size:12px;
}

.cat-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

.cat-nav button {
  padding:8px 16px;
  border:none;
  background:#1b5e20;
  color:#fff;
  border-radius:20px;
  cursor:pointer;
  font-size:13px;
  transition:0.3s;
}

.cat-nav button:hover {
  background:#144d18;
}

.cat-nav button:disabled {
  background:#ccc;
  cursor:not-allowed;
}

.hero-actions a {
  transition:0.3s;
}

.hero-actions a:hover {
  transform:translateY(-2px);
  opacity:0.9;
}
.logo img {
  height:55px;
}


/* AUTH PAGE */
.auth-container {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px;
  padding-top:40px;
}

/* Desktop center alignment */
@media(min-width:768px){
  .auth-container {
    justify-content:center;
    padding-top:0;
  }
}

/* LOGO */
.auth-logo img {
  height:60px;
  margin-bottom:20px;
}

/* CARD */
.auth-card {
  width:100%;
  max-width:400px;
  background:#fff;
  padding:25px;
  border-radius:16px;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
  text-align:center;
  margin-top:10px;
}

.auth-card h2 {
  margin-bottom:5px;
  color:#1b5e20;
}

.auth-sub {
  font-size:14px;
  color:#666;
  margin-bottom:20px;
}

/* FORM */
.form-group {
  text-align:left;
  margin-bottom:15px;
}

.form-group label {
  font-size:13px;
  display:block;
  margin-bottom:5px;
  color:#333;
}

.form-group input {
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:14px;
}

/* LINKS */
.auth-links {
  text-align:right;
  margin-bottom:15px;
}

.auth-links a {
  font-size:13px;
  color:#ff6f00;
  text-decoration:none;
}

/* BUTTON */
.btn-auth {
  width:100%;
  padding:12px;
  border:none;
  border-radius:25px;
  background:#ff6f00;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.btn-auth:hover {
  background:#e65c00;
}

/* FOOTER */
.auth-footer {
  margin-top:15px;
  font-size:13px;
}

.auth-footer a {
  color:#1b5e20;
  font-weight:600;
  text-decoration:none;
}

/* PASSWORD WRAPPER */
.password-wrapper {
  position:relative;
}

.password-wrapper input {
  padding-right:45px;
}

/* EYE ICON */
.toggle-password {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:16px;
  color:#888;
  user-select:none;
}

.toggle-password:hover {
  color:#1b5e20;
}



/* TERMS */
.terms {
  font-size:13px;
  text-align:left;
  margin-bottom:15px;
}

.terms input {
  margin-right:5px;
}

.terms a {
  color:#1b5e20;
  text-decoration:none;
  font-weight:500;
}


/* INPUT WITH ICON */
.input-group {
  position:relative;
}

.input-group input {
  width:100%;
  padding:12px 12px 12px 40px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:14px;
}

/* ICON */
.input-group i {
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:#888;
  font-size:14px;
}

/* Focus effect */
.input-group input:focus {
  border-color:#1b5e20;
  outline:none;
}

.input-group input:focus + i {
  color:#1b5e20;
}



/* OTP WRAPPER */
.otp-box {
  display:flex;
  justify-content:center;
  gap:10px;
  margin:25px 0;
}

/* OTP PREMIUM STYLE */
.otp-single-wrapper {
  margin:30px 0;
}

/* MAIN INPUT */
#otpInput {
  width:100%;
  padding:16px;
  font-size:24px;
  letter-spacing:12px;
  text-align:center;
  border-radius:14px;
  border:2px solid #eaeaea;
  background:#fff;
  font-weight:700;
  transition:all 0.3s ease;

  /* Premium inner shadow */
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.04),
    0 4px 14px rgba(0,0,0,0.04);
}

/* FOCUS EFFECT (PREMIUM GLOW) */
#otpInput:focus {
  border-color:#ff6f00;
  box-shadow:
    0 6px 20px rgba(255,111,0,0.25),
    inset 0 2px 6px rgba(0,0,0,0.03);
  transform:translateY(-2px);
  outline:none;
}

/* PLACEHOLDER DOT STYLE */
#otpInput::placeholder {
  letter-spacing:10px;
  color:#ccc;
}

/* HOVER */
#otpInput:hover {
  border-color:#ddd;
}

/* MOBILE */
@media(max-width:500px){
  #otpInput {
    font-size:20px;
    letter-spacing:10px;
  }
}


/* FILTER BAR */
.filter-bar {
  background:#fff;
  padding:15px;
  border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,0.05);
  margin-bottom:25px;
}

.filter-bar input,
.filter-bar select {
  padding:10px;
  border-radius:8px;
  border:1px solid #ddd;
}

/* PRODUCT GRID */
.product-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:25px;
}

@media(min-width:768px){
  .product-grid {
    grid-template-columns:1.1fr 1fr;
  }
}

/* CARD STYLE */
.product-gallery,
.product-details {
  background:#fff;
  padding:20px;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
}

/* GALLERY */
.product-gallery .main-img {
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:12px;
}

.thumbs img {
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:10px;
  border:2px solid transparent;
  transition:0.3s;
}

.thumbs img:hover {
  border-color:#ff6f00;
}

/* DETAILS */
.product-details h2 {
  font-size:22px;
  margin-bottom:10px;
}

.price {
  font-size:26px;
  color:#1b5e20;
  font-weight:700;
  margin-bottom:10px;
}

.meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color:#777;
  margin-bottom:15px;
}

.description {
  line-height:1.6;
  margin-bottom:15px;
}

.contact-box a {
  flex:1;
  text-align:center;
  font-weight:600;
  transition:0.3s;
}

.btn-call {
  background:#1b5e20;
}

.btn-call:hover {
  background:#144d18;
}

.btn-whatsapp:hover {
  background:#1ebe5d;
}

/* CONTACT */
.contact-box {
  margin:15px 0;
  display:flex;
  gap:10px;
}

.btn-call {
  background:#1b5e20;
  color:#fff;
  padding:10px;
  border-radius:8px;
  text-decoration:none;
}

.btn-whatsapp {
  background:#25D366;
  color:#fff;
  padding:10px;
  border-radius:8px;
  text-decoration:none;
}

/* SELLER */
.seller-box {
  margin-top:20px;
  padding:15px;
  border-radius:12px;
  background:#f9fafb;
  border:1px solid #eee;
}

/* SAFETY */
.safety-box {
  background:#fff8e1;
  border-left:5px solid #ff6f00;
  padding:15px;
  border-radius:10px;
  margin-top:20px;
}

/* REVIEWS */
.review {
  background:#fff;
  padding:10px;
  border-radius:8px;
  margin-bottom:10px;
}

/* SIMILAR GRID */
.listings {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

@media(min-width:992px){
  .listings {
    grid-template-columns:repeat(4,1fr);
  }
}



/* ================= NAVBAR ================= */
.navbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  position:sticky;
  top:0;
  z-index:100;
}

/* LOGO */
.nav-logo {
  height:40px;
}

/* SEARCH */
.nav-center {
  flex:1;
  margin:0 10px;
}

.nav-center input {
  width:100%;
  padding:8px 12px;
  border-radius:20px;
  border:1px solid #ddd;
  font-size:13px;
}

/* BUTTONS */
.nav-right {
  display:flex;
  align-items:center;
  gap:6px;
}

.nav-right a {
  text-decoration:none;
  padding:6px 10px;
  border-radius:20px;
  font-size:13px;
  white-space:nowrap;
}

/* LOGIN BUTTON */
.nav-btn {
  color:#1b5e20;
  background:#f3f6f8;
}

/* SELL BUTTON (standalone strong CTA) */
.nav-sell {
  background:#ff6f00;
  color:#fff;
  font-weight:600;
}

/* MOBILE FIX */
@media(max-width:600px){

  .nav-center {
    display:none; /* 🔥 hides big search */
  }

  .nav-logo {
    height:38px;
  }

  .nav-right a {
    font-size:13px;
    padding:5px 8px;
  }

  /* Make SELL stand out alone */
  .nav-sell {
    padding:6px 12px;
  }
}
.container {
  max-width:1100px;
  margin:auto;
  padding:20px;
}

/* ================= CARD STYLE ================= */
.section {
  margin:15px;
  border-radius:16px;
  padding:20px;
  box-shadow:0 8px 25px rgba(0,0,0,0.05);
}

/* TITLE STYLE */
.section-title {
  font-weight:700;
  font-size:16px;
  margin-bottom:15px;
  position:relative;
}

.section-title::after {
  content:'';
  width:40px;
  height:3px;
  background:#ff6f00;
  position:absolute;
  bottom:-6px;
  left:0;
}


/* ================= DASHBOARD WRAPPER ================= */
.dashboard {
  padding:20px;
}

/* WELCOME CARD */
.welcome-card {
  background: linear-gradient(135deg, #ffffff, #f8fbf8);
  border-radius:16px;
  padding:20px;
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:20px;
}

/* PROFILE IMAGE */
.welcome-card img {
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #ff6f00;
}

/* TEXT */
.welcome-text h3 {
  color:#1b5e20;
}

.welcome-text span {
  font-size:13px;
  color:#666;
}

/* WALLET GRID */
.wallet-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-bottom:20px;
}

/* WALLET CARD */
.wallet-card {
  background:#fff;
  padding:18px;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
  position:relative;
  overflow:hidden;
}

/* ICON */
.wallet-card i {
  font-size:22px;
  color:#ff6f00;
  margin-bottom:8px;
}

/* TITLE */
.wallet-title {
  font-size:13px;
  color:#666;
}

/* AMOUNT */
.wallet-amount {
  font-size:20px;
  font-weight:700;
  color:#1b5e20;
  margin-top:5px;
}

/* WALLET ACTION BUTTONS */
.wallet-actions {
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.wallet-actions a {
  flex:1;
  text-align:center;
  padding:12px;
  border-radius:25px;
  font-weight:600;
  text-decoration:none;
  transition:0.3s;
}

/* DEPOSIT */
.btn-deposit {
  background:#ff6f00;
  color:#fff;
}

.btn-deposit:hover {
  background:#e65c00;
}

/* WITHDRAW */
.btn-withdraw {
  background:#1b5e20;
  color:#fff;
}

.btn-withdraw:hover {
  background:#144d18;
}

/* DASHBOARD MENU GRID */
.dashboard-menu {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

/* MENU CARD */
.menu-card {
  background:#fff;
  padding:18px 10px;
  border-radius:14px;
  text-align:center;
  box-shadow:0 4px 15px rgba(0,0,0,0.05);
  transition:0.25s;
  cursor:pointer;
}

/* ICON */
.menu-card i {
  font-size:20px;
  color:#1b5e20;
  margin-bottom:6px;
}

/* TEXT */
.menu-card span {
  font-size:12px;
  display:block;
}

/* HOVER */
.menu-card:hover {
  background:#1b5e20;
  color:#fff;
  transform:translateY(-3px);
}

.menu-card:hover i {
  color:#fff;
}

/* PACKAGE CARD */
.package-card {
  background:#fff;
  padding:18px;
  border-radius:14px;
  box-shadow:0 5px 18px rgba(0,0,0,0.05);
  margin-bottom:20px;
  cursor:pointer;
  transition:0.3s;
}

.package-card:hover {
  transform:translateY(-3px);
}

.package-name {
  font-weight:700;
  color:#1b5e20;
}

.package-status {
  font-size:13px;
  color:#ff6f00;
}

/* FIX BUTTON TEXT ALIGNMENT */
.wallet-actions a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:14px;
}
/* BIGGER DASHBOARD CARDS */
.menu-card {
  padding:22px 15px;
  border-radius:16px;
}

/* ICON BIGGER */
.menu-card i {
  font-size:26px;
  margin-bottom:8px;
}

/* TEXT */
.menu-card span {
  font-size:13px;
  font-weight:500;
}


/* DESKTOP IMPROVEMENT */
@media(min-width:992px){

  .container {
    max-width:1200px;
  }

  /* Wallet wider */
  .wallet-grid {
    grid-template-columns:repeat(2,1fr);
  }

  /* Dashboard actions bigger grid */
  .dashboard-menu {
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }

  /* Section spacing */
  .section {
    margin:20px auto;
  }
}

.wallet-card::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:linear-gradient(#1b5e20,#ff6f00);
}