/* =====================================================
   FULL SITE: DRIBBBLE-STYLE THEME (Complete Replacement)
   - Replaces hero with centered search + title
   - Dribbble-style navbar, chips, filters, card grid
   - Restyled auth, feature cards, forms to match theme
   ===================================================== */

/* ---------- ROOT & THEME VARIABLES ---------- */
:root{
  --bg: #ffffff;
  --page-bg: #fbfbfc;
  --muted: #6b7280;
  --muted-2: #9aa3ad;
  --text: #0f1724;
  --accent: #e83f8c;      /* pink search button */
  --brand-dark: #0b0b14;  /* dark CTA */
  --surface: #ffffff;
  --soft: rgba(11,11,20,0.04);
  --card-radius: 16px;
  --pill-radius: 999px;
  --glass: rgba(243,244,247,0.9);
  --shadow-sm: 0 6px 16px rgba(16,24,40,0.06);
  --shadow-md: 0 12px 36px rgba(16,24,40,0.08);
  --container-width: 1350px;
  --nav-height: 80px;
  --gap: 24px;
}

/* ---------- RESET & BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--page-bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* utilities */
.container{max-width:var(--container-width);margin:0 auto;padding:0 24px}
.center{text-align:center}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}

/* ---------- NAVBAR (fixed) ---------- */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--nav-height);
  background:var(--surface);
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(11,11,20,0.04);
  z-index:1000;
  box-shadow: 0 2px 8px rgba(11,11,20,0.03);
}
.nav-container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:16px;
  position:relative;
}

/* logo */
.nav-logo a{font-family:"Pacifico", "Segoe UI", sans-serif; font-size:1.6rem; color:var(--brand-dark); text-decoration:none; display:inline-block; padding:6px 0;}

/* inline search (rounded pill) */
.nav-search{
  display:flex;
  align-items:center;
  gap:12px;
  background: #f3f4f6;
  border-radius: var(--pill-radius);
  padding:10px 14px;
  width:420px;
  border:1px solid rgba(11,11,20,0.03);
  box-shadow:none;
}
.nav-search input{
  border: none;
  background: transparent;
  outline: none;
  font-size:0.95rem;
  color:var(--text);
  width:100%;
}
.search-cta{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--accent),#d83278);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(232,63,140,0.14);
  cursor:pointer;
}

/* nav links */
.nav-menu{
  display:flex;
  gap:20px;
  align-items:center;
  margin-left:8px;
}
.nav-link{
  text-decoration:none;
  color:var(--muted-2);
  font-weight:500;
  font-size:0.95rem;
  padding:6px 8px;
  border-radius:8px;
}
.nav-link:hover{color:var(--brand-dark)}

/* auth buttons on right */
.nav-actions{display:flex;gap:12px;align-items:center}
.btn{
  border:none;
  cursor:pointer;
  font-weight:600;
  border-radius:999px;
  padding:9px 18px;
  font-size:0.95rem;
}
.btn-ghost{
  background:transparent;
  color:var(--brand-dark);
  border:1px solid rgba(11,11,20,0.06);
}
.btn-ghost:hover{background:#fafafa}
.btn-primary{
  background:var(--brand-dark);
  color:#fff;
  box-shadow:0 10px 25px rgba(11,11,20,0.06)
}
.btn-primary:hover{opacity:.94;transform:translateY(-2px)}

/* small pill login on screenshot's right */
.btn-login{
  background:var(--brand-dark);
  color:white;
  padding:10px 18px;
  border-radius:30px;
}

/* ---------- PAGE HERO (SEARCH + TITLE) ---------- */
.page-hero{
  padding: calc(var(--nav-height) + 34px) 0 18px;
  background: transparent;
  text-align:center;
}
.hero-title{
  font-size:44px;
  font-weight:800;
  color:var(--brand-dark);
  margin-bottom:12px;
  letter-spacing:-0.5px;
}
.hero-sub{
  max-width:760px;
  margin:0 auto;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.6;
  margin-bottom:18px;
}

/* big centered search bar (below title) */
.hero-search-wrap{display:flex;justify-content:center;margin-top:16px}
.hero-search{
  width:74%;
  max-width:980px;
  background:var(--glass);
  border-radius:56px;
  padding:16px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(11,11,20,0.03);
}
.hero-search input{
  flex:1;border:none;background:transparent;font-size:1.05rem;padding:8px 10px;color:var(--text);outline:none
}
.hero-search .search-btn{
  min-width:56px;height:56px;border-radius:50%;border:none;background:linear-gradient(180deg,var(--accent),#d83278);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 10px 26px rgba(232,63,140,0.14);cursor:pointer
}
.hero-search .filters-small{display:flex;gap:10px;align-items:center;padding-left:12px;color:var(--muted)}

/* ---------- RELATED TAGS (small chips) ---------- */
.related-tags{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
.tag-chip{
  background:transparent;
  border-radius:999px;
  padding:8px 12px;
  border: none;
  color:var(--muted-2);
  font-weight:600;
  cursor:pointer;
}
.tag-chip:hover{color:var(--brand-dark)}

/* ---------- CATEGORY NAV (Discover, Animation, etc) ---------- */
.category-row{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:30px;
  flex-wrap:wrap;
}
.cat-pill{
  padding:10px 18px;
  border-radius:999px;
  background:transparent;
  border:none;
  font-weight:700;
  color:var(--brand-dark);
  cursor:pointer;
}
.cat-pill.ghost{background:transparent;color:var(--muted)}
.cat-pill.active{background:var(--page-bg);box-shadow:inset 0 -6px 0 rgba(11,11,20,0.02);color:var(--brand-dark)}

/* ---------- FILTER BAR (left: Popular; right: Filters) ---------- */
.controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:36px 0 14px;
  gap:20px;
  padding:0 24px;
}
.controls-left{display:flex;gap:16px;align-items:center}
.controls-right{display:flex;gap:12px;align-items:center}

/* select-like pill */
.select-pill{
  background:var(--surface);
  border-radius:12px;
  padding:10px 14px;
  border:1px solid rgba(11,11,20,0.04);
  font-weight:600;
  color:var(--muted-2);
  display:flex;
  gap:10px;
  align-items:center;
}

/* filters button */
.filters-btn{
  background:var(--surface);
  border-radius:14px;
  padding:10px 14px;
  border:1px solid rgba(11,11,20,0.04);
  display:flex;align-items:center;gap:10px;font-weight:600;color:var(--muted-2)
}

/* ---------- CARD GRID / GALLERY ---------- */
.gallery{
  padding:12px 24px 80px;
  max-width:var(--container-width);
  margin:0 auto;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:28px;
}

/* each card: image preview + footer */
.card{
  background:var(--surface);
  border-radius:20px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(11,11,20,0.02);
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}

/* image area with slight inner radius and frame */
.card-visual{
  background:linear-gradient(180deg, rgba(11,11,20,0.02), rgba(11,11,20,0.01));
  padding:18px;
  border-radius:14px;
}
.card-visual img{width:100%;height:200px;object-fit:cover;border-radius:10px;display:block}

/* info row under image */
.card-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  gap:10px;
}
.author{
  display:flex;
  gap:12px;
  align-items:center;
}
.author-avatar{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#fff,#f5f5f6);display:inline-block;overflow:hidden;border:1px solid rgba(11,11,20,0.03)
}
.author-name{font-weight:700;color:var(--brand-dark);font-size:0.98rem}
.author-badge{font-size:0.78rem;background:#f4f5f7;padding:6px 8px;border-radius:8px;color:var(--muted);margin-left:8px}

/* stats (likes, views) */
.card-stats{display:flex;gap:16px;color:var(--muted-2);font-size:0.92rem;align-items:center}

/* ---------- FEATURE/SECTION CARDS (used on other pages) ---------- */
.feature-card{
  background:var(--surface);
  border-radius:14px;
  padding:20px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(11,11,20,0.02);
}

/* ---------- AUTH FORMS (login / register) ---------- */
.auth-section{
  padding:80px 0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:40px;
}
.auth-card{
  width:420px;
  background:var(--surface);
  border-radius:16px;
  padding:26px;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(11,11,20,0.03);
}
.auth-card h2{font-size:1.5rem;margin-bottom:6px;color:var(--brand-dark)}
.auth-card p{color:var(--muted);margin-bottom:14px}
.form-group{margin-bottom:14px}
.form-group label{display:block;color:var(--muted);font-weight:600;margin-bottom:8px}
.form-group input, .form-group textarea, .form-group select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(11,11,20,0.06);
  background:#fff;
  font-size:1rem;
  color:var(--text);
}
.form-group input:focus{outline:none;box-shadow:0 6px 20px rgba(11,11,20,0.04);border-color:rgba(11,11,20,0.06)}

/* ---------- FEATURES / GRID SECTIONS ---------- */
.features{
  padding:54px 24px;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

/* ---------- FOOTER ---------- */
.site-footer{
  padding:36px 24px;
  background:linear-gradient(180deg,#fff,#fbfbfc);
  border-top:1px solid rgba(11,11,20,0.03);
  margin-top:48px;
}
.site-footer p{color:var(--muted);font-size:0.95rem;text-align:center}

/* ---------- TOAST / MESSAGE BOXES ---------- */
.message{padding:12px 16px;border-radius:10px;margin-top:12px}
.success{background:#e6fffa;border:1px solid #bff0e6;color:#065f46}
.error{background:#fff1f2;border:1px solid #fecaca;color:#7f1d1d}

/* ---------- FOCUS & ACCESSIBILITY ---------- */
a:focus, button:focus, input:focus, textarea:focus{
  outline:3px solid rgba(232,63,140,0.12);
  outline-offset:2px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .nav-search{width:320px}
  .hero-search{width:86%}
}
@media (max-width:900px){
  .nav-menu{display:none}
  .nav-search{display:none}
  .nav-actions{gap:8px}
  .hero-title{font-size:36px}
  .hero-search{width:92%}
  .controls{padding:0 12px}
}
@media (max-width:640px){
  .nav-logo a{font-size:1.35rem}
  .hero-title{font-size:28px}
  .hero-sub{font-size:0.98rem;padding:0 14px}
  .hero-search{width:96%}
  .card-visual img{height:170px}
  .card-grid{grid-template-columns:1fr}
  .nav-actions{display:flex;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* ---------- LEGACY CLASS MAP (helps override old CSS from your previous file) ----------
   These selectors specifically match names you used earlier so this stylesheet fully
   overrides previous behavior while keeping your HTML mostly unchanged.
   ----------------------------------------------------------------------------- */

/* ---------- LEGACY CLASS MAP ---------- */
.navbar, .nav-container { /* keep existing styles */ }
.nav-logo h2, .nav-logo a { text-decoration:none; color:inherit; }
/* Removed all:unset on nav elements — it was breaking dashboard navigation */

.hero { display:block; background:transparent; padding:0 } /* disable old gradient hero */
.hero-container, .hero-content, .hero-image { all:unset } /* replaced by .page-hero & .hero-search */

/* map search-section / search-box -> hero-search */
.search-section, .search-box { display:block; width:100% }
.search-box input { font-size:1.05rem }

/* map feature-card / feature-grid to new styles */
.feature-card { border-radius:12px }

/* ensure forms use new styles */
.auth-form, .auth-card { box-shadow:none }

/* end legacy map ------------------------------------------------------------------ */

/* ============================================================
   MOBILE-FIRST RESPONSIVE ENHANCEMENTS
   Added for production readiness
   ============================================================ */

/* Touch-friendly tap targets */
@media (max-width: 768px) {
    a, button, .btn, .nav-link, input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Stack forms vertically */
    .form-row, .form-inline {
        flex-direction: column;
    }
    
    .form-row > *, .form-inline > * {
        width: 100%;
    }
    
    /* Better mobile padding */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Full-width buttons on mobile */
    .btn-block-mobile {
        width: 100%;
        display: block;
    }
    
    /* Responsive tables */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    
    /* Better mobile font sizes */
    h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
    h2 { font-size: clamp(1.25rem, 4vw, 2rem); }
    h3 { font-size: clamp(1.1rem, 3vw, 1.5rem); }
    
    /* Fix images overflowing */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Small phones */
@media (max-width: 375px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   ENHANCED MOBILE RESPONSIVE UTILITIES
   ============================================ */

/* Safe-area support for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* Touch-friendly targets (minimum 44x44px) */
@media (pointer: coarse) {
    a, button, input[type="submit"], input[type="button"],
    .btn, .nav-link, .dropdown-item {
        min-height: 44px;
        min-width: 44px;
    }
    
    input, select, textarea {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }
}

/* Small phones */
@media (max-width: 375px) {
    :root {
        --gap: 12px;
        --nav-height: 56px;
    }
    
    body { font-size: 14px; }
    
    .container { padding: 0 12px; }
    
    h1, .section-title { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
    
    .btn { padding: 0.6rem 1rem; font-size: 0.85rem; }
    .btn-lg { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
}

/* Medium phones */
@media (max-width: 480px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    .form-group { margin-bottom: 1rem; }
    
    /* Stack form elements */
    .form-row, .form-inline {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
    
    /* Better modal sizing on tablets */
    .modal-content, .card, .info-card {
        margin: 0.5rem;
        max-height: 90vh;
        overflow-y: auto;
    }
}

@media (min-width: 769px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
    .navbar { position: relative; }
    .simple-hero { padding-top: 1rem; }
}

/* ============================================
   SECURITY UI ELEMENTS
   ============================================ */

/* CSRF field should never be visible */
input[name="_csrf_token"] {
    display: none !important;
}

/* Autocomplete styling for secure fields */
input[autocomplete="off"],
input[type="password"] {
    -webkit-text-security: disc;
}

/* Flash message animations */
.alert, .error-message, .success-message {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Print styles */
@media print {
    .navbar, .footer, .mobile-menu, .mobile-menu-overlay,
    .hamburger, button, .btn {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}


/* ============================================
   SHARED COMPONENTS (consolidated)
   ============================================ */

.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 6px;
background: none;
border: none;
cursor: pointer;
padding: 10px;
border-radius: 12px;
transition: all 0.3s;
z-index: 1002;
}

.mobile-menu-btn span {
width: 26px;
height: 2.5px;
background: #1a1a1a;
transition: 0.3s;
border-radius: 4px;
}

.mobile-menu-btn:hover {
background: rgba(0, 0, 0, 0.05);
}

@media (max-width: 900px) {
    .mobile-menu-btn {
        display: flex !important;
    }
    
    /* Simple hamburger for pages without full mobile menu */
    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 1002;
    }
    .hamburger span {
        width: 24px;
        height: 2.5px;
        background: #1a1a1a;
        border-radius: 4px;
        transition: 0.3s;
    }
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
    
    /* Show nav-menu when toggled active on mobile */
    .nav-menu.active {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 1rem;
        gap: 0;
        z-index: 999;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }
    .nav-menu.active .nav-link {
        padding: 12px 16px;
        border-radius: 8px;
        display: block;
        color: #1a1a1a;
        text-decoration: none;
        font-weight: 500;
    }
    .nav-menu.active .nav-link:hover {
        background: #f3f4f6;
    }
}

/* Hide hamburger on desktop */
.hamburger { display: none; }

.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}

.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}

.mobile-menu {
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
background: white;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
z-index: 1002;
transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
max-height: 85vh;
overflow-y: auto;
visibility: hidden;
}

.mobile-menu.active {
bottom: 0;
visibility: visible;
}

.mobile-menu-header {
padding: 1.5rem;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom: 1px solid #e2e8f0;
position: relative;
}

.mobile-menu-close {
position: absolute;
top: 1rem;
right: 1rem;
background: white;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
color: #1a1a1a;
font-size: 1rem;
transition: all 0.3s;
z-index: 3;
}

.mobile-menu-close:hover {
background: #f1f5f9;
transform: rotate(90deg);
}

.mobile-avatar {
width: 55px;
height: 55px;
background: white;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: #1a1a1a;
box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.1);
}

.mobile-user-info {
display: flex;
align-items: center;
gap: 1rem;
padding-right: 2rem;
}

.mobile-user-details h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.25rem;
color: #1a1a1a;
}

.mobile-user-details p {
font-size: 0.8rem;
color: #64748b;
}

.mobile-nav-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
text-decoration: none;
color: #334155;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s;
border-left: 4px solid transparent;
}

.mobile-nav-link:hover {
background: #f8fafc;
}

.mobile-nav-link i {
width: 24px;
color: #64748b;
font-size: 1.2rem;
}

.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}

.footer-links {
display: flex;
gap: 1.5rem;
font-size: 0.8rem;
}

.footer-links a {
color: #64748b;
text-decoration: none;
}

.footer-links a:hover {
color: #1a1a1a;
}

.btn-outline {
background: transparent;
border: 1px solid #cbd5e1;
}

.btn-outline:hover {
background: #f8fafc;
border-color: #1a1a1a;
}

.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.6rem;
min-height: 24px;
}

.btn-block {
width: 100%;
}

.dropdown {
position: relative;
}

.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid #e2e8f0;
border-radius: 20px;
box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.15);
min-width: 220px;
padding: 0.6rem;
z-index: 1001;
display: none;
margin-top: 0.5rem;
}

.dropdown-item i {
width: 20px;
margin-right: 0.5rem;
color: #64748b;
}

.dropdown-divider {
height: 1px;
background: #e2e8f0;
margin: 0.5rem 0;
}

.user-avatar {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.user-avatar i {
    font-size: 1rem;
}

.notification-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: white;
    font-size: 0.6rem;
    min-width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid white;
}

/* ============ GLOBAL CSS FIXES ============ */

/* Dropdown user menu */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 12px;
    transition: all 0.2s;
}

.dropdown-toggle:hover {
    background: rgba(0,0,0,0.04);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    min-width: 220px;
    padding: 8px;
    z-index: 1100;
    border: 1px solid rgba(0,0,0,0.06);
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #334155;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.dropdown-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.dropdown-item i {
    width: 18px;
    text-align: center;
    color: #64748b;
}

.dropdown-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 6px 0;
}

.user-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.buyer-badge { background: #dbeafe; color: #1d4ed8; }
.seller-badge { background: #dcfce7; color: #15803d; }
.both-badge { background: #fef3c7; color: #92400e; }

/* Fix select dropdowns globally */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Mobile nav improvements */
@media (max-width: 900px) {
    .dropdown-toggle span:not(.user-badge) {
        display: none;
    }
    
    .dropdown-toggle .fa-chevron-down {
        display: none;
    }
    
    .nav-menu {
        display: none;
    }
}

/* Cards clickable state */
[data-navigate] {
    cursor: pointer;
}

[data-navigate]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}