:root{
  --accent:#2563eb;
  --bg:#f7fafc;
  --card:#ffffff;
  --muted:#6b7280;
  --glass: rgba(255,255,255,0.85);
}
  body.dark {
  --bg:#0d1117;
  --card:#161b22;
  --muted:#9ca3af;
  --glass:rgba(0,0,0,0.45);
  color:#f1f5f9 !important;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,Arial;scroll-behavior:smooth}
body{background:var(--bg);color:#0f172a;min-height:100vh;position:relative;padding-bottom:80px}
#detailsPage{display:none;background:#fff}
.slider{position:relative}
.slider img{width:100%;height:320px;object-fit:cover}
.next-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:#fff;border:none;font-size:22px;padding:10px 14px;border-radius:50%}
.back{padding:10px;display:inline-block}
.wa{background:#25D366;color:#fff;padding:12px;display:inline-block;margin:10px;text-decoration:none}

/* NAV (transparent over header) */   
nav{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;   /* ← Add this */
    box-sizing:border-box;
    z-index:200;
}
.nav-links.mobile{
    position:fixed;
    top:10px;
    left:10px;               /* Gap from left */
    height:calc(100vh - 20px);
    width:260px;
    flex-direction:column;
    align-items:flex-start;
    padding:80px 20px;
    background:white;
    border-radius:16px;      /* Optional - looks nicer */
    box-shadow:2px 0 10px rgba(0,0,0,.15);
    transform:translateX(calc(-100% - 20px));
    gap:20px;
    z-index:200;
    transition:transform .35s;
}

.nav-links.mobile.show{
    transform:translateX(0);
}

    nav .nav-left {display:flex; align-items:center; gap:15px;}
    nav .nav-logo {justify-content: space-between;font-family: 'Arial Black', sans-serif;font-weight:bold;font-size:20px;color:#25D366;text-decoration:none;text-shadow:3px 3px 0px #333;}
    nav .hamburger {cursor:pointer; display:flex; flex-direction:column; gap:5px;}
    nav .hamburger span {display:block; width:25px; height:3px; background:#fff;}
    nav .nav-links {
      position:fixed; top:0; right:-100%; width:250px; height:100%;
      background:#222; padding:60px 20px; display:flex; flex-direction:column; gap:15px;
      transition:0.3s; z-index:1500;
    }
    nav .nav-links a {color:#fff; text-decoration:none; font-size:18px;}
    nav .nav-links.show {right:0;}
    nav .close-btn {position:absolute; top:15px; right:20px; background:none; border:none; color:#fff; font-size:30px; cursor:pointer;}


/* Hamburger */
.hamburger{display:flex;flex-direction:column;gap:4px;cursor:pointer;z-index:210;}
.hamburger span{width:24px;height:5px;background:#111827;border-radius:2px;}

/* Mobile sidebar (right)*/
  .mobile-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity .3s;z-index:199
}
.mobile-overlay.show{opacity:1;pointer-events:auto;}
.close-btn{position:absolute;top:20px;right:20px;background:none;border:none;font-size:26px;cursor:pointer;color:#111827;}



/* overlay to close menus */

#overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity .3s;z-index:199;}
#overlay.show{opacity:1;pointer-events:auto;}


    /* HEADER Hero */
    .hero {
      position:relative; height:300px;display:flex;align-items:center;justify-content:center;text-align:center;
      background:url("https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=1600&q=60") center/cover no-repeat;
      display:flex; flex-direction:column; justify-content:flex-end;
      color:#fff; overflow:hidden;
    }

/* Horizontal Ticker bottom center */
.ticker-wrap{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;}
.ticker{width:92%;max-width:1200px;overflow:hidden;border-radius:8px;background:rgba(0,0,0,0.48);color:white;padding:8px 12px;display:flex;align-items:center;}
.ticker .label{font-weight:700;margin-right:12px;white-space:nowrap;}
.ticker .news{display:inline-block;white-space:nowrap;animation:newsScroll 40s linear infinite;}
.ticker .news span{display:inline-block;margin-right:40px;}
@keyframes newsScroll{100%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* Vertical ticker Middle-center inside header*/
.vertical-ticker{position:absolute;top:80px;right:20;width:200px;height:50px;overflow:hidden;background:rgba(0,0,0,0.5);border-radius:8px;padding:10px;color:white;}
.vertical-ticker .news-vert{display:flex;flex-direction:column;animation:verticalScroll 12s linear infinite;}
.vertical-ticker .news-vert span{margin-bottom:12px;}
@keyframes verticalScroll{100%{transform:translateY(100%)}100%{transform:translateY(-100%)}}


.lang-switch {
  display: flex;
  gap: 10px;
  margin: 10px;
}

.lang-switch button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: #ddd;
  cursor: pointer;
}

.lang-switch button.active {
  background: #25D366;
  color: #fff;
}
  
/* Main Controls under header */
.controls{
  padding:8px 12px;
  background:var(--card);
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
}


.controls select{
  width:150px;
  height:38px;
  padding:0 10px;
  font-size:14px;
  line-height:38px;
  box-sizing:border-box;
}
.controls .btn{
  width:auto;
  min-width:110px;
  height:40px;
  padding:0 12px;
    color:#fff;  
	background:#1d4ed8;
  flex:none;
}


.btn:hover{
    background:#1d4ed8;
}
/* Listings */
main{max-width:1100px;margin:18px auto;padding:0 12px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(11,20,40,0.06);transition:transform .18s ease,opacity .6s;opacity:0;transform:translateY(20px);border:1px solid rgba(15,23,42,0.04);}
.card.visible{opacity:1;transform:translateY(0);}
.card:hover{transform:translateY(-6px);}
.thumb{position:relative;height:160px;background:#ddd;display:block;}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.price-tag{position:absolute;left:10px;top:10px;background:linear-gradient(90deg,#111827,#1f2937);color:white;padding:8px 10px;border-radius:8px;font-weight:700;}
.category-badge{position:absolute;right:10px;top:10px;background:rgba(255,255,255,0.9);color:#111827;padding:6px 8px;border-radius:8px;font-weight:600;font-size:12px;}
.card-body{padding:12px;}
.title{font-weight:700;margin:0 0 6px;font-size:16px;}
.meta{color:var(--muted);font-size:13px;}
.hidden {display: none !important;}
.btn{
  text-align:center;
  text-decoration:none;
  padding:10px;
  border-radius:10px;
  font-weight:bold;
  transition:.3s;
}
/* Action Buttons Container */
.actions{
  width:calc(100% - 60px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin:12px 10px;
}

/* Call Button */
.call{
  background:var(--accent);
  width:70px;
  color:#fff;
  padding:10px;
  text-align:center;
  text-decoration:none;
  border-radius:8px;
  margin:10;
}

/* WhatsApp Button */
.whatsapp{
  background:#25D366;
  color:#fff;
  padding:10px;
  text-align:center;
  text-decoration:none;
  border-radius:8px;
  margin:10;
}
/* =========================
   FAVORITE BUTTON
========================= */

.fav-btn{
  position:absolute;
  bottom:20px;
  right:12px;
  font-size: 20px;
  background:white;
  border:none;
  border-radius:50%;
  width:36px;
  height:36px;
  cursor:pointer;
}
.fav-btn.active i{
  color:gold;
}
  .fav-header {
  position: relative;
    align-items:center;
    width:100%;
  background: #fff;
    background:url("https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=1600&q=60") center/cover no-repeat;
      
  padding: 50px 5px;
  z-index: 10;
  border-bottom: 10px solid #eee;
}



  
  
/* About */
#about{margin:40px auto;max-width:800px;text-align:center;opacity:0;transform:translateY(20px);transition:all .6s;}
#about.visible{opacity:1;transform:translateY(0);}
#about h2{font-size:22px;margin-bottom:10px;}

    /* Footer */
    footer {padding:20px; text-align:center; background:#222; color:#fff;}
    footer a {color:#4fc3f7; text-decoration:none;}

/* bottom nav */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--card);display:flex;justify-content:space-around;align-items:center;border-top:1px solid #ddd;z-index:40}
.bottom-nav a{text-decoration:none;color:#2563eb;font-weight:600;display:flex;flex-direction:column;align-items:center;font-size:13px}
.bottom-nav a i{font-size:18px;margin-bottom:4px}
.bottom-nav a.active {
  color: #2563eb;
}

.bottom-nav a.active i {
  color: #2563eb;
}

.bottom-nav a {
  color: #444;
}

.category-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.category-popup.show {
  display: flex;
}

.popup-box {
  background: white;
  padding: 20px;
  border-radius: 12px;
  width: 220px;
  text-align: center;
}

.popup-box button {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.popup-box .close {
  background: red;
  color: white;
}

.popup-box button.active {
  background: #2563eb;
  color: white;
  border-radius: 8px;
}


/* small responsive tweaks */
@media(max-width:900px){
  .horiz-ticker{width:90%}
  .vert-ticker{display:none}
}
@media(max-width:640px){
  .hero-title{font-size:22px}
  .hero-sub{font-size:14px}
  .controls-row{padding:8px}
  .bottom-nav{height:72px}
  #meDrawer{width:100%}
}
  
  

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

.profile-header{margin-bottom:20px;}
.user-view{display:flex;flex-direction:column;align-items:center;text-align:center;}
.guest-view{display:flex;flex-direction:column;align-items:center;text-align:center;}
.profile-photo-wrapper{position:relative;}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.15);}
.photo-btn{margin-top:12px;padding:8px 12px;border:none;border-radius:10px;cursor:pointer;background:var(--primary);color:#fff;}
#profileName{margin-top:14px;font-size:22px;}
#profileUsername{color:var(--muted);margin-top:4px;}

/* ==========================
   VERIFIED ACCOUNT
========================== */

.verified-badge{margin-top:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#dcfce7;color:#166534;font-size:14px;font-weight:600;}

/* ==========================
   VERIFY EMAIL BANNER
========================== */

.verify-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;margin-bottom:16px;border-radius:12px;background:#fff8e1;color:#7c4d00;border:1px solid #ffd54f;}
.verify-banner button{border:none;cursor:pointer;border-radius:8px;padding:8px 12px;background:var(--warning);color:#fff;}

/* ==========================
   QUICK ACCESS
========================== */

.menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:inherit;padding:14px 0;border-bottom:1px solid var(--border);}
.menu-item:last-child{border-bottom:none;}
.menu-item span{min-width:28px;text-align:center;padding:2px 8px;border-radius:999px;background:#eef2ff;}

/* ==========================
   ACCOUNT INFO
========================== */

.account-info{text-align:center;}
#qrCodeContainer{display:flex;justify-content:center;margin-bottom:16px;}

#accountId,
#accountEmail{word-break:break-word;}

/* ==========================
   FORMS
========================== */

form{display:flex;flex-direction:column;gap:10px;}
label{font-size:14px;font-weight:600;}

input,
textarea,
select{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(128,128,128.25);background:var(--card);color:inherit;font-size:15px;}
textarea{resize:vertical;min-height:90px;}
input:focus,
textarea:focus,
select:focus{outline:none;border-color:var(--primary);}
#usernameStatus{font-size:13px;margin-top:-4px;}
  
/* ==========================
   USERNAME SUGGESTIONS
========================== */

#usernameSuggestions{display:flex;flex-wrap:wrap;gap:8px;}
.username-chip{cursor:pointer;padding:8px 12px;border-radius:999px;background:#eef2ff;font-size:13px;}

/* ==========================
   BUTTONS
========================== */

.primary{background:var(--primary);color:#fff;}
.secondary{background:#e5e7eb;color:#111827;}
.guest-buttons{display:flex;gap:10px;margin-top:14px;}
.menu-button{width:100%;border:none;cursor:pointer;border-radius:12px;padding:14px;margin-top:8px;background:#f3f4f6;color:var(--text);}
.logout-btn{width:100%;border:none;cursor:pointer;border-radius:12px;padding:14px;background:var(--danger);color:#fff;font-weight:700;}
.danger-btn{width:100%;border:none;cursor:pointer;border-radius:12px;padding:14px;background:#fee2e2;color:#b91c1c;margin-top:12px;}
.guest-buttons{
  display:flex;
  gap:10px;
  margin-top:15px;
}

.guest-buttons .btn{
  flex:1;
  text-align:center;
  padding:12px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}

.guest-buttons .primary{
  background:var(--accent);
  color:#fff;
}

.guest-buttons .secondary{
  background:var(--card);
  color:inherit;
  border:1px solid rgba(128,128,128,.3);
}
/* ==========================
   SETTINGS
========================== */

.setting-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);}
.setting-item:last-child{border-bottom:none;}
.setting-item p{margin-top:4px;font-size:13px;color:var(--muted);}

/* ==========================
   TOGGLE
========================== */

.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;}
input[type="checkbox"]{width:22px;height:22px;cursor:pointer;}

/* ==========================
   HELP
========================== */

#helpSearch{margin-bottom:12px;}
#helpResults{font-size:14px;color:var(--muted);}

/* ==========================
   UTILITIES
========================== */

.hidden{display:none !important;}

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

@media(max-width:480px){
  .me-page{padding:12px;}
  .avatar{width:100px;height:100px;}
  #profileName{font-size:20px;}
  .verify-banner{flex-direction:column;align-items:flex-start;}
  .guest-buttons{width:100%;flex-direction:column;}
  .btn{width:100%;}
}

/* ==========================
   DARK MODE SUPPORT
   Compatible with existing
   app dark theme
========================== */

body.dark,
[data-theme="dark"]{

  --bg:#111827;

  --card:#1f2937;

  --text:#f9fafb;

  --muted:#9ca3af;

  --border:#374151;
}

/* ==========================
   LOADING STATES
========================== */

.loading{opacity:.6;pointer-events:none;}

/* ==========================
   QR CODE
========================== */

#qrCodeContainer canvas,
#qrCodeContainer img{border-radius:12px;background:#fff;padding:8px;}

/* =========================
   ME DRAWER
========================= */

.me-drawer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;}

/* dark background */
.me-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: 0.3s;}

/* panel */
.me-panel {
  position: absolute;
  right: -100%;
  top: 0;
  width: 320px;
  max-width: 320px;
  height: 100vh;
  background:var(--bg);
  color:inherit;
  z-index:300;
  transition:right .4s ease-in-out;
  box-shadow:-2px 0 10px rgba(0,0,0,0.2);
  overflow-y:auto;}

/* OPEN STATE */
.me-drawer.open {pointer-events: auto;}
.me-drawer.open .me-overlay {opacity: 1;}
.me-drawer.open .me-panel {right: 0;}
.close-btn {font-size: 28px;background: none;border: none;color:inherit;float: right;}


/* ==========================
   MENU LIST
========================== */

.menu-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;

  width:100%;
  
  padding:14px 16px;

  text-decoration:none;
  color:inherit;

  background:var(--card);
  color:inherit;

  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;

  transition:.2s;
}

.menu-item:hover{
  transform:translateX(3px);
}

.menu-item::after{
  content:"›";
  opacity:.5;
}

.setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:14px 16px;

  margin-bottom:8px;

  background:var(--card);
  color:inherit;

  border:1px solid rgba(0,0,0,.08);

  border-radius:12px;
}
.search-icon {
    position: relative;            /* Change from absolute if it was set */
    margin-left: 15px;             /* Distance between logo and icon */
    flex-shrink: 0;                /* Prevents icon from getting squashed */
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: #333;
    padding: 6px;
	z-index: 10;
  }
  #search-icon:hover {
    color: #2563eb; /* accent */
  }

 #searchBar {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background:transparent;
  padding: 10px;
}

.search-box {
  display: flex;
  gap: 8px;
}

#searchInput {
  background:transparent;
  cursor: pointer;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: none;
}

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

#searchBtn:hover {
  background: #1d4ed8;
}
 

 

.skeleton {
  height: 250px;
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    #eee 25%,
    #ddd 50%,
    #eee 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Overlay */

.auth-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:10000;
}

.auth-modal.hidden{
  display:none;
}

/* Bottom Sheet */

.auth-box{
  position:relative;
  width:100%;
  max-width:500px;
  background:var(--card);
  border-radius:24px 24px 0 0;
  padding:24px;
  animation:slideUp .25s ease;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 -10px 30px rgba(0,0,0,.2);
}

/* Drag Handle */

.auth-box::before{
  content:"";
  display:block;
  width:50px;
  height:5px;
  border-radius:20px;
  background:#ccc;
  margin:0 auto 18px;
}

@keyframes slideUp{
  from{
    transform:translateY(100%);
  }
  to{
    transform:translateY(0);
  }
}

.close-auth{

  position:absolute;

  top:12px;

  right:12px;

  width:42px;

  height:42px;

  border:none;

  border-radius:50%;

  background:#f3f3f3;

  color:#333;

  font-size:28px;

  font-weight:bold;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:999999;

}

/* Header */

.auth-title{
  text-align:center;
  margin-bottom:8px;
  font-size:24px;
  font-weight:700;
}

.auth-subtitle{
  text-align:center;
  color:var(--muted);
  margin-bottom:24px;
}

/* Inputs */

.auth-box input{
  width:100%;
  padding:14px;
  border:1px solid #ddd;
  border-radius:12px;
  margin-bottom:12px;
  background:var(--bg);
  color:inherit;
  font-size:15px;
}

.auth-box input:focus{
  outline:none;
  border-color:var(--accent);
}

/* Buttons */

.auth-box button[type="submit"]{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

/* Google */

#data-google-login{
  width:100%;
  margin-top:12px;
  padding:14px;
  border:none;
  border-radius:12px;
  background:#fff;
  color:#333;
  font-weight:600;
  cursor:pointer;
}


/* Divider */

.auth-divider{
  text-align:center;
  margin:18px 0;
  color:var(--muted);
  position:relative;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  position:absolute;
  top:50%;
  width:40%;
  height:1px;
  background:#ddd;
}

.auth-divider::before{
  left:0;
}

.auth-divider::after{
  right:0;
}

/* Switch Link */

.auth-switch{
  text-align:center;
  margin-top:18px;
}

.auth-switch a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}

.auth-logo{
  width:80px;
  height:80px;
  object-fit:contain;
  display:block;
  margin:0 auto 15px;
}
.auth-switcher{
  display:flex;
  gap:10px;
  margin:18px 0;
}

.auth-tab{
  flex:1;
  border:none;
  border-radius:12px;
  padding:12px;
  font-weight:600;
  cursor:pointer;
}

.auth-tab.active{
  background:#0a84ff;
  color:#fff;
}

.hidden{
  display:none !important;
}

.auth-switcher{
  display:flex;
  gap:10px;
  margin:18px 0;
}

.auth-tab{
  flex:1;
  border:none;
  border-radius:12px;
  padding:12px;
  font-weight:600;
  cursor:pointer;
}

.auth-tab.active{
  background:#0a84ff;
  color:#fff;
}

.hidden{
  display:none !important;
}


.phone-login-card{
  margin-top:20px;
}

.phone-input-group{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.country-code{
  background:var(--bg);
  padding:14px;
  border-radius:12px;
  font-weight:600;
}

.phone-input-group input{
  flex:1;
}

.phone-login-btn,
.verify-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:white;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.resend-btn{
  width:100%;
  margin-top:10px;
  padding:12px;
  border:none;
  border-radius:12px;
}

.otp-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.otp-modal.hidden{
  display:none;
}

.otp-box{
  width:90%;
  max-width:350px;
  background:var(--card);
  border-radius:20px;
  padding:24px;
  text-align:center;
}

.otp-input{
  width:100%;
  text-align:center;
  font-size:28px;
  letter-spacing:10px;
  padding:15px;
  margin:20px 0;
  border-radius:12px;
  border:1px solid #ccc;
}

.auth-error{
  margin:10px 0;
  padding:12px;
  border-radius:10px;
  font-size:14px;
  background:#ffeaea;
  color:#c62828;
  border:1px solid #ffcdd2;
}

.hidden{
  display:none;
}

.auth-link{
  background:none;
  border:none;
  color:var(--accent);
  width:100%;
  text-align:center;
  margin-top:12px;
  cursor:pointer;
}



.auth-submit{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.logout-card{
  margin:15px;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
}

#logoutBtn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:#dc2626;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

#logoutBtn:hover{
  background:#b91c1c;
}

.phone-row{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}

#countryCode{
  width:110px;
  border:1px solid #ddd;
  border-radius:12px;
  padding:12px;
}

#phoneInput{
  flex:1;
}

/* FULL PAGE */

.settings-page{

  position:fixed;

  top:0;
  right:0;
  padding: 20px 16px 100px;
  width:100%;
  height:100%;

  background:#fff;

  z-index:99999;

  overflow-y:auto;

  transform:translateX(100%);

  transition:transform .3s ease;

}

/* OPEN */

.settings-page.show{

  transform:translateX(0);

}

/* HEADER */

.settings-header{

  position:sticky;

  top:0;

  display:flex;
  align-items:center;

  gap:12px;

  padding:16px;

  background:#fff;

  border-bottom:1px solid #eee;

  z-index:10;

}

.settings-header h2{

  margin:0;

  font-size:18px;

}

/* BACK BUTTON */

.back-btn{

  border:none;
  background:none;

  font-size:24px;

  cursor:pointer;

}

/* FORM */

.settings-form{

  padding:20px;

}

.form-group{

  margin-bottom:18px;

}

.form-group label{

  display:block;

  margin-bottom:6px;

  font-size:14px;

  font-weight:600;

}

.form-group input{

  width:100%;

  height:52px;

  padding:0 14px;

  border:1px solid #ddd;

  border-radius:12px;

  font-size:15px;

  box-sizing:border-box;

}

#usernameStatus{

  display:block;

  margin-top:6px;

  font-size:13px;

}

/* SAVE BUTTON */

.save-profile-btn{

  width:100%;
  min-height:52px;

  border:none;
  border-radius:14px;

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

  cursor:pointer;

  background:#0a84ff;
  color:#fff;

  margin-top:20px;

  transition:
    transform .15s ease,
    opacity .2s ease;

}

.save-profile-btn:active{

  transform:scale(.98);

}

.save-profile-btn:disabled{

  opacity:.7;
  cursor:not-allowed;

}

.btn-loader.hidden,
.btn-text.hidden{

  display:none;

}



.settings-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.settings-modal-content{
width:92%;
max-width:420px;
background:#fff;
border-radius:18px;
padding:20px;
}

.settings-modal-content input{
width:100%;
margin-bottom:12px;
}

.hidden{
display:none;
}


#moreSettingsPage {

  position: fixed;

  top: 0;
  right: 0;

  width: 100%;
  height: 100vh;

  background: #fff;

  overflow-y: auto;

  z-index: 99999;

  transform: translateX(100%);
  transition: transform .3s ease;

}

#moreSettingsPage.show {

  transform: translateX(0);

}


.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field input {
  width: 100%;
  padding-right: 40px;
}

.eye-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
}


/* ==========================================================================
   FORGOT PASSWORD MODAL STYLES
   ========================================================================== */

/* Main Overlay Layer */
.forgot-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Dimmed backdrop background */
  backdrop-filter: blur(4px); /* Modern soft blur effect */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000; /* Stays on top of slide drawers and elements */
  transition: opacity 0.25s ease-in-out;
}

/* Structural utility to manage javascript toggles */
.forgot-modal.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

/* Card Box Container */
.forgot-modal .auth-box {
  background-color: #ffffff;
  width: 90%;
  max-width: 400px;
  padding: 32px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  position: relative;
  text-align: center;
  box-sizing: border-box;
}

/* Top Right Close Button */
.forgot-modal .close-auth {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 24px;
  color: #888888;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.forgot-modal .close-auth:hover {
  color: #333333;
}

/* Typography Headings */
.forgot-modal h2 {
  margin: 0 0 10px 0;
  font-size: 22px;
  color: #111111;
  font-weight: 600;
}

.forgot-modal p {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
}

/* Email Input Field */
.forgot-modal input[type="email"] {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 18px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.forgot-modal input[type="email"]:focus {
  border-color: #0070f3; /* Focus border accent tint */
}

/* Submit Action Button */
.forgot-modal button:not(.close-auth) {
  width: 100%;
  padding: 12px;
  background-color: #0070f3; /* Primary corporate theme fill color */
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.forgot-modal button:not(.close-auth):hover {
  background-color: #0051a8;
}



/* =========================================================
   GOOGLE SIGN-IN BUTTON
========================================================= */

.google-signin-btn {
    width: 100%;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 0 18px;

    border: 1px solid #d9dce3;
    border-radius: 12px;

    background: #ffffff;
    color: #202124;

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

    cursor: pointer;

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}

.google-signin-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.google-signin-btn:active {
    transform: scale(0.98);
}

.google-signin-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.google-icon {
    width: 20px;
    height: 20px;

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

    flex-shrink: 0;
}

.google-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}


/* Dark mode */
body.dark .google-signin-btn {
    background: #1f2937;
    border-color: #374151;
    color: #ffffff;
}

body.dark .google-signin-btn:hover {
    background: #273449;
}
/* Hide login-only Google section when registering */
#registerSection:not([style*="display: none"]) ~ #loginGoogleSection {
    display: none;
}

/* =========================================================
   HIDDEN REAL CATEGORY SELECT
   Kept for existing filtering JavaScript
========================================================= */

.category-select-hidden {
    display: none !important;
}


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

.category-filter {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    margin: 0;
    padding: 0;

    background: transparent;
}


/* Individual button */

.category-btn {
    width: 100%;
    height: 62px;

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

    gap: 4px;

    padding: 5px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #ffffff;

    color: #555;

    font-family: inherit;

    cursor: pointer;

    box-sizing: border-box;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);

    transition: all 0.2s ease;
}


/* Icons */

.category-icon {
    width: 22px;
    height: 22px;

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

    font-size: 16px;
}


/* All Listings */

.all-icon {
    color: #315bd6;
}


/* Cars */

.car-icon {
    color: #e53935;
}


/* Homes */

.home-icon {
    color: #35a853;
}


/* Text */

.category-text {
    font-size: 11px;
    line-height: 15px;
    font-weight: 500;

    white-space: nowrap;
}


/* Active */

.category-btn.active {
    background: #ffffff;

    border-color: #d9dee7;

    color: #222;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.10);
}


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

.category-btn.active {
    background: #f5f7ff !important;
    border: 2px solid #315bd6 !important;

    color: #222 !important;

    box-shadow: 0 3px 10px rgba(49, 91, 214, 0.18) !important;

    font-weight: 700;
}

.category-btn.active .category-text {
    font-weight: 700;
}

.category-btn.active .category-icon {
    transform: scale(1.08);
}


/* Dark mode */
body.dark .category-btn.active {
    background: #202b46 !important;
    border-color: #5b7ff0 !important;
    color: #ffffff !important;

    box-shadow: 0 3px 10px rgba(91, 127, 240, 0.25) !important;
}


/* Hover */

.category-btn:hover {
    border-color: #cfd5df;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark .category-btn {
    background: #1d2229;

    border-color: #303640;

    color: #c5cad2;
}

body.dark .category-btn.active {
    background: #272d36;

    border-color: #3d4652;

    color: #ffffff;
}