/*
  Theme Name: V21
  Theme URI: https://manqana.market
  Author: Manqana
  Description: Dark neon marketplace - V21 with Dynamic WordPress Data
  Version: 21.0.4
  Text Domain: manqana-market
  Requires at least: 6.0
  Requires PHP: 8.0
  */

  /* CSS Variables */
  :root{--bg:#0B0E16;--surface:#151A24;--primary:#2B82FF;--accent:#00A3FF;--text:#DDE6F1;--muted:#8E9AAF;--line:#253043}
  body.light-theme{--bg:#F5F7FA;--surface:#FFFFFF;--text:#1A1D29;--muted:#6B7280;--line:#E5E7EB}

  /* Reset & Base */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{width:100%;overflow-x:hidden}
  body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,-apple-system,Segoe
  UI,Roboto,Arial,sans-serif;font-size:15.5px;line-height:1.55;transition:background .3s,color .3s;min-width:100vw}
  h1,h2,h3,.listing-card .title{font-family:Space Grotesk, ui-sans-serif}
  a{color:var(--text);text-decoration:none}

  /* Header */
  .mm-header{position:relative;background:linear-gradient(180deg,rgba(21,26,36,.9),rgba(21,26,36,.6));backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .header-top{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:24px;padding:16px 32px;background:rgba(21,26,36,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .header-top .spacer{flex:1}
  .logo img{height:72px;display:block;transition:transform 0.3s ease;animation:logoBreath 3s ease-in-out infinite;filter:drop-shadow(0 0
  8px rgba(255,255,255,0.6)) drop-shadow(0 0 16px rgba(255,255,255,0.4))}
  .logo:hover img{transform:scale(1.08)}
  @keyframes logoBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

  /* Top Slogan */
  .top-slogan-bar{background:rgba(21,26,36,.6);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
  .top-slogan{color:var(--text);font-size:15px;font-weight:600;flex:1;text-align:center}
  .top-controls{display:flex;align-items:center;gap:12px}

  /* Mobile Telegram CTA */
  .mobile-telegram-cta{display:none;padding:8px 12px;background:rgba(21,26,36,.8);border-bottom:1px solid var(--line)}
  .mobile-tg-pill{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;font-size:15px;text-decoration:none;transition:all .3s}
  .mobile-tg-pill svg{flex-shrink:0}
  .mobile-tg-pill:hover{transform:scale(1.02)}

  /* Filter Bar */
  .filter-bar-wrapper{position:relative;background:rgba(21,26,36,.8);padding:8px 0;border-bottom:1px solid var(--line)}
  .filter-bar{max-width:2200px;margin:0 auto;padding:0 340px}
  .filters-shell{display:flex;flex-direction:column;gap:8px;border:1px solid
  var(--line);border-radius:12px;background:#121824;padding:12px}
  .filters-row-1,.filters-row-2{display:flex;gap:12px;justify-content:center;align-items:center}
  .filter-select,.filter-input{background:#0f141d;color:var(--text);border:1px solid
  var(--line);border-radius:10px;padding:12px;min-width:140px;height:42px;font-size:14px;transition:all .2s}

  /* Buttons */
  .btn{border-radius:12px;padding:10px 14px;border:1px solid
  var(--line);cursor:pointer;background:rgba(255,255,255,.03);color:var(--text);transition:.2s}
  .btn.primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#001;border:none}
  .btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,163,255,.2)}

  /* Sort Buttons */
  .sort-btn-group{display:flex;gap:4px}
  .sort-btn{font-size:12px;padding:8px 12px;white-space:nowrap}
  .sort-btn.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#001;border-color:var(--primary)}

  /* Pagination */
  .pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:32px;padding:20px 0;flex-wrap:wrap}
  .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-weight:600;font-size:14px;text-decoration:none;transition:all .2s}
  .page-link:hover{background:rgba(43,130,255,.1);border-color:var(--primary);color:var(--primary)}
  .page-link.current{background:linear-gradient(135deg,var(--primary),var(--accent));color:#001;border-color:var(--primary)}
  .page-link.prev,.page-link.next{padding:0 16px}
  .page-dots{color:var(--muted);font-size:14px}

  /* Layout */
  .main-layout{display:grid;grid-template-columns:300px 1fr 300px;gap:28px;max-width:2200px;margin:0 auto;padding:24px 40px}

  /* Grid */
  .listing-grid .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
  .listing-card{background:var(--surface);border:1px solid
  var(--line);border-radius:16px;overflow:hidden;position:relative;transition:.2s;display:flex;flex-direction:column}
  .listing-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,163,255,.15)}
  .listing-card .thumb{width:100%;height:200px;background-size:cover;background-position:center;max-height:200px}
  .listing-card .meta{padding:4px 8px;display:grid;gap:3px}
  .listing-card .price{font-weight:800;color:#E6F1FF;font-size:17px}
  .listing-card .city{font-size:12px;color:var(--muted)}
  .chip{display:inline-block;padding:3px 7px;border-radius:999px;background:#0f141d;border:1px solid var(--line);font-size:11px}
  .fav{position:absolute;top:10px;right:10px;background:rgba(255,193,7,0.2);border:1px solid #FFC107;color:#FFC107;border-radius:8px;padding:6px;cursor:pointer;transition:all 0.2s}
  .fav.favorited{background:rgba(255,193,7,0.9);color:#000;border-color:#FFC107}
  .fav:hover{transform:scale(1.1);background:rgba(255,193,7,0.4)}

  /* Mobile Extra Info - Hidden by default */
  .mobile-extra-info{display:none}

  /* Pill Base Style */
  .pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:2px
  solid;font-weight:700;font-size:15px;transition:all .2s}

  /* Detail Page */
  .listing-detail{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:24px}
  .detail-layout{display:grid;grid-template-columns:1fr 400px;gap:24px;position:relative;grid-template-rows:auto 1fr;align-items:start}
  .detail-gallery{grid-column:1;grid-row:1}
  .detail-specs{grid-column:2;grid-row:1}
  .description-card{grid-column:1 / -1;grid-row:2;margin-top:12px}
  .contact-card{grid-column:1 / -1;grid-row:3;margin-top:12px}
  .detail-gallery{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;padding:0 0 8px 0;height:100%;display:flex;flex-direction:column}
  .main-photo{width:100%;max-height:600px;flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg);position:relative;border-
  radius:12px;overflow:hidden}
  .main-photo img{width:100%;height:100%;object-fit:contain;background:var(--bg);display:block;cursor:zoom-in}

  /* Specs */
  .specs-card{background:rgba(15,20,29,0.5);border:1px solid var(--line);border-radius:12px;padding:20px}
  .specs-list{display:flex;flex-direction:column;gap:12px}
  .spec-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(142,154,175,0.1)}
  .spec-label{font-weight:600;color:var(--muted);font-size:14px}
  .spec-value{font-weight:700;color:var(--text);font-size:15px}

  /* Thumbnails */
  .thumbnails{display:flex;gap:12px;margin-top:8px;margin-bottom:8px;overflow-x:auto;padding:0;flex-shrink:0}
  .thumbnail{flex-shrink:0;width:150px;height:110px;cursor:pointer;border:2px solid
  transparent;border-radius:8px;overflow:hidden;opacity:0.6;transition:all .2s}
  .thumbnail:hover{opacity:1;transform:scale(1.05)}
  .thumbnail.active{border-color:var(--primary);opacity:1;box-shadow:0 0 8px rgba(43,130,255,0.5)}
  .thumbnail img{width:100%;height:100%;object-fit:cover}

  /* Gallery Navigation - Outside Image Frame */
  .gallery-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,163,255,0.8);color:white;border:2px solid
  #00A3FF;font-size:20px;padding:8px
  12px;cursor:pointer;border-radius:6px;z-index:200;display:flex;align-items:center;justify-content:center;transition:all
  0.2s;box-shadow:0 4px 12px rgba(0,163,255,0.4)}
  .gallery-nav:hover{background:rgba(0,163,255,1);transform:translateY(-50%) scale(1.1)}
  .gallery-nav.prev{left:-50px}
  .gallery-nav.next{right:-50px}
  .gallery-counter{position:absolute;bottom:15px;right:15px;background:rgba(0,0,0,0.7);color:white;padding:6px
  12px;border-radius:20px;font-size:13px;z-index:10}

  /* Zoom Modal Navigation */
  .zoom-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(0,163,255,0.9);color:white;border:3px solid
  #00A3FF;font-size:32px;padding:16px
  24px;cursor:pointer;border-radius:8px;z-index:10001;display:flex;align-items:center;justify-content:center;transition:all
  0.2s;box-shadow:0 6px 20px rgba(0,163,255,0.6)}
  .zoom-nav:hover{background:rgba(0,163,255,1);transform:translateY(-50%) scale(1.15)}
  .zoom-nav.prev{left:40px}
  .zoom-nav.next{right:40px}
  .zoom-counter{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:white;padding:10px
  20px;border-radius:25px;font-size:16px;z-index:10001;font-weight:700}

  /* Hide normal nav/counter in zoom modal */
  .image-zoom-modal .gallery-nav,
  .image-zoom-modal .gallery-counter{display:none !important}

  /* Zoom Modal */
  .image-zoom-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:9999;cursor:zoom-o
  ut;align-items:center;justify-content:center}
  .image-zoom-modal.active{display:flex}
  .image-zoom-modal img{max-width:95%;max-height:95%;object-fit:contain}
  .zoom-close{position:fixed;top:20px;right:20px;background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.3);color:white;font-size:32px;width:48px;height:48px;border-radius:50%;cursor:pointer;z-index:10002;display:flex;align-items:center;justify-content:center;font-weight:300;line-height:1;transition:all 0.2s}
  .zoom-close:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)}

  /* Theme Toggle */
  .theme-toggle{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:8px
  12px;cursor:pointer;font-size:22px;height:38px;display:flex;align-items:center}
  .lang-flag{background:transparent;border:1px solid var(--line);color:#fff;border-radius:6px;padding:6px
  10px;cursor:pointer;font-size:20px}
  .lang-switcher{display:flex;gap:6px}
  .auth{display:flex;align-items:center;gap:12px}

  /* Pill Images */
  .pill-img{width:100%;height:auto;display:block;border-radius:20px}
  .arrow-down{text-align:center;color:var(--primary);font-size:28px}
  .join-now-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:800;font-size:16px;text-shadow:0
   2px 8px rgba(0,0,0,0.6);z-index:10}
  .tg-pill,.ig-pill,.fb-pill{position:relative;border-radius:20px}

  /* Description Card */
  .description-card{background:rgba(15,20,29,0.5);border:1px solid var(--line);border-radius:12px;padding:20px}
  .description-card h3{margin:0 0 16px 0;font-size:18px;font-weight:700;color:var(--primary)}
  .description-card p{margin:0;line-height:1.6}

  /* Contact Card */

  /* Detail Header */
  .detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px
  solid var(--line)}
  .listing-title{font-size:28px;font-weight:800;margin:0;color:var(--primary)}
  .fav-large{background:rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:12px;padding:12px
  16px;font-size:24px;cursor:pointer;transition:all 0.2s}
  .fav-large:hover{transform:scale(1.1);background:rgba(255,255,255,0.1)}

  /* Listing Actions */
  .listing-actions{display:flex;gap:12px;justify-content:center;padding-top:16px;border-top:1px solid var(--line)}

  /* Card Link */
  .card-link{display:block;color:inherit;text-decoration:none}
  .card-link:hover{color:inherit}

  /* Responsive */

  /* Tablet: 768px - 1024px */
  @media(max-width:1024px){
    .filter-bar{padding:0 80px}
    .main-layout{grid-template-columns:1fr;gap:20px;padding:20px}
    .listing-grid .grid{grid-template-columns:repeat(3,1fr);gap:16px}
    .slogan-left,.slogan-right{display:none}
  }

  /* Tablet Small: 600px - 768px */
  @media(max-width:768px){
    .header-top{padding:12px 16px;gap:12px}
    .logo img{height:44px}

    .filter-bar{padding:0 16px}
    .filters-shell{padding:10px}
    .filters-row-1,.filters-row-2{flex-wrap:wrap;gap:8px}
    .filter-select,.filter-input{min-width:calc(50% - 4px);font-size:13px;padding:10px;height:40px}
    .btn{padding:10px 12px;font-size:13px;height:40px}

    .main-layout{padding:16px 12px}
    .listing-grid .grid{grid-template-columns:repeat(2,1fr);gap:12px}

    .detail-layout{grid-template-columns:1fr;gap:16px}
    .gallery-nav.prev{left:10px}
    .gallery-nav.next{right:10px}
    .main-photo{max-height:400px}
  }

  /* Mobile: 320px - 600px */
  @media(max-width:600px){
    /* Mobile Full Width */
    html,body{width:100%;min-width:100%;overflow-x:hidden}
    .main-layout{width:100%;min-width:100%;padding-left:8px;padding-right:8px;box-sizing:border-box !important}
    .center-content{width:100% !important;max-width:100% !important;box-sizing:border-box !important;overflow-x:hidden !important}
    /* Header Mobile - Only Top Bar Sticky */
    .mm-header{position:relative;width:100%}
    .header-top{position:relative;padding:8px 4px;gap:4px;background:rgba(21,26,36,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);justify-content:flex-start;flex-wrap:nowrap}
    .logo{flex-shrink:0;order:1;margin-left:0px !important}
    .logo img{height:32px}
    .header-top .spacer{display:none}
    .lang-switcher{gap:2px;flex-shrink:0;order:2}
    .lang-flag{padding:4px 6px;font-size:14px}
    .auth{gap:4px;flex-shrink:0;order:3;margin-left:auto;margin-right:0px !important}
    .theme-toggle{padding:5px 7px;font-size:18px;height:32px}
    .btn.primary{padding:6px 10px;font-size:11px;white-space:nowrap}
    .top-slogan{font-size:12px;padding:8px 0;line-height:1.4}
    .top-slogan-bar{padding:8px 12px}
    .top-controls{gap:8px}
    .top-controls .lang-switcher{gap:4px}
    .top-controls .lang-flag{padding:4px 6px;font-size:16px}
    .top-controls .theme-toggle{padding:5px 7px;font-size:18px;height:32px}

    /* Top Slogan and Telegram Not Sticky */
    .top-slogan-bar{position:relative}
    .mobile-telegram-cta{display:block;position:relative}

    /* Filter Bar Mobile - Compact */
    .filter-bar-wrapper{padding:4px 0}
    .filter-bar{padding:0 8px}
    .filters-shell{padding:6px;gap:4px}
    .filters-row-1,.filters-row-2{flex-direction:column;gap:4px}
    .filter-select,.filter-input{width:100%;min-width:100%;height:38px;font-size:13px;padding:8px 10px}
    .btn{width:100%;height:38px;font-weight:600;font-size:13px;padding:8px 10px}

    /* Grid Mobile - 2 Columns Portrait (Büyük Kartlar) */
    .main-layout{padding:10px;gap:14px}
    .listing-grid .grid{grid-template-columns:repeat(2,1fr) !important;gap:12px}

    /* Listing Cards Mobile - Büyük Boyut */
    .listing-card{min-height:380px;border-radius:12px}
    .listing-card .thumb{max-height:240px;min-height:200px;aspect-ratio:4/3}
    .listing-card .meta{padding:14px 16px;gap:6px}
    .listing-card .price{font-size:20px;font-weight:700;letter-spacing:-0.4px}
    .listing-card .title{display:none}
    .listing-card .city{font-size:12px;opacity:0.9}
    .chip{font-size:11px;padding:4px 9px}
    .fav{padding:10px;font-size:20px}
  .fav.favorited{background:rgba(255,193,7,0.9);color:#000}

    /* Mobile Extra Info - Show on mobile */
    .mobile-extra-info{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding-top:8px;border-top:1px solid rgba(142,154,175,0.15)}
    .extra-info-item{display:flex;justify-content:space-between;align-items:center}
    .info-label{font-size:11px;color:var(--muted);font-weight:500}
    .info-value{font-size:12px;color:var(--text);font-weight:600}

    /* Detail Page Mobile */
    .listing-detail{padding:8px;margin-bottom:16px;width:100% !important;max-width:100% !important;box-sizing:border-box !important;overflow:hidden !important}
    .detail-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:6px;padding:8px 4px}
    .detail-header .vip-badge{display:none !important}
    .back-to-listings-top{flex-shrink:0;width:auto;min-width:40px;padding:8px 10px;font-size:16px;background:rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:8px;white-space:nowrap;display:flex;align-items:center;justify-content:center}
    .listing-title{font-size:15px;line-height:1.2;flex:1 1 0;min-width:0;text-align:center;margin:0;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .listing-title .vip-badge{display:none !important}
    .fav-large{flex-shrink:0;width:auto;min-width:40px;padding:8px 10px;font-size:18px}

    /* Detail Layout Mobile - Gallery First, Then Specs */
    .detail-layout{display:flex !important;flex-direction:column !important;gap:12px !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;overflow:hidden !important}

    /* Gallery Mobile */
    .detail-gallery{order:1 !important;width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;overflow:hidden !important}
    .main-photo{max-height:280px;min-height:220px;width:100% !important;max-width:100% !important;aspect-ratio:4/3;display:flex !important;box-sizing:border-box !important;overflow:hidden !important}
    .main-photo img{max-width:100% !important;max-height:100% !important;width:auto !important;height:auto !important;object-fit:contain !important;margin:0 auto !important}
    .main-photo .gallery-nav{display:none !important}
    .gallery-counter{font-size:12px;padding:5px 8px}
    .thumbnails{gap:6px;margin-top:10px;overflow-x:auto}
    .thumbnail{width:60px;height:45px}

    /* Specs Below Gallery Mobile */
    .detail-specs{order:2 !important;width:100% !important;max-width:100% !important;margin:0 !important;box-sizing:border-box !important}

    /* Specs & Contact Mobile */
    .specs-card,.description-card,.contact-card{padding:16px;box-sizing:border-box !important;max-width:100% !important;width:100% !important;overflow:hidden !important}
    .specs-list{width:100% !important;max-width:100% !important;box-sizing:border-box !important}
    .spec-item{flex-direction:column;align-items:flex-start;gap:4px;padding:8px 0;width:100% !important;max-width:100% !important;box-sizing:border-box !important}
    .spec-label{font-size:13px;word-wrap:break-word !important}
    .spec-value{font-size:14px;word-wrap:break-word !important;overflow-wrap:break-word !important;max-width:100% !important}
    .contact-card .btn{padding:12px;font-size:14px}
    .user-info{width:100% !important;max-width:100% !important;box-sizing:border-box !important;word-wrap:break-word !important;overflow-wrap:break-word !important}
    .user-info p{width:100% !important;max-width:100% !important;overflow:hidden !important;text-overflow:ellipsis !important}

    /* Zoom Modal Mobile */
    .zoom-nav{display:none !important}
    .zoom-counter{font-size:14px;padding:8px 16px;bottom:20px}
    .zoom-close{top:15px;right:15px;width:44px;height:44px;font-size:28px}
    .image-zoom-modal img{max-width:98%;max-height:98%}

    /* Modal Mobile */
    .modal-content{padding:24px;width:95%;max-width:350px}
    .modal-title{font-size:20px;margin-bottom:20px}
    .modal input{padding:10px;font-size:14px;margin-bottom:12px}
  }

  /* Mobile Landscape: 3 Columns + No Sticky */
  @media(max-width:600px) and (orientation:landscape){
    /* Disable all sticky in landscape */
    .mm-header{position:relative !important}
    .header-top{position:relative !important}

    .listing-grid .grid{grid-template-columns:repeat(3,1fr);gap:8px}
    .listing-card{min-height:240px}
    .listing-card .thumb{max-height:140px;min-height:120px}
    .listing-card .meta{padding:8px 10px;gap:4px}
    .listing-card .price{font-size:14px}
    .listing-card .title{display:none}
    .listing-card .city{font-size:9px}
    .chip{font-size:9px;padding:2px 6px}
    .fav{padding:6px;font-size:14px}
  .fav.favorited{background:rgba(255,193,7,0.9);color:#000}
  }

  /* Mobile Small: < 400px */
  @media(max-width:400px){
    .logo img{height:34px}
    .header-top{gap:5px;padding:8px 5px}
    .lang-flag{font-size:14px;padding:4px 6px}
    .theme-toggle{font-size:18px;padding:5px 7px;height:32px}
    .btn.primary{font-size:12px;padding:7px 10px}

    .listing-card .thumb{max-height:180px}
    .listing-title{font-size:20px}
    .main-photo{max-height:250px}
  }

  /* V21.3.1 - Additional Fixes */
  .container{max-width:2200px;margin:0 auto;padding:0 32px}
  .logo img{position:relative;top:0px}
  @keyframes pillShine{0%{background-position:200% center}100%{background-position:-200% center}}
  .pill.tg,.tg-pill{border-color:#2B82FF;background:linear-gradient(135deg,rgba(43,130,255,.2) 0%,rgba(43,130,255,.6)
  50%,rgba(43,130,255,.2) 100%);background-size:200% 100%;animation:pillShine 2s ease-in-out infinite;color:#5DA8FF}
  .pill.ig,.ig-pill{border-color:#E1306C;background:linear-gradient(135deg,rgba(225,48,108,.2) 0%,rgba(225,48,108,.6)
  50%,rgba(253,29,29,.2) 100%);background-size:200% 100%;animation:pillShine 2s ease-in-out infinite .3s;color:#F77F9D}
  .pill.fb,.fb-pill{border-color:#1877F2;background:linear-gradient(135deg,rgba(24,119,242,.2) 0%,rgba(24,119,242,.6)
  50%,rgba(24,119,242,.2) 100%);background-size:200% 100%;animation:pillShine 2s ease-in-out infinite .6s;color:#5DA8FF}
  .pill:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(0,163,255,0.3)}
  body.light-theme .mm-header{position:relative;background:linear-gradient(180deg,rgba(245,247,250,.95),rgba(245,247,250,.8))}
  body.light-theme .header-top{position:sticky;top:0;z-index:100;background:rgba(245,247,250,.98);backdrop-filter:blur(12px)}
  body.light-theme .top-slogan-bar{background:rgba(245,247,250,.9);border-bottom:1px solid var(--line)}
  body.light-theme .filter-bar-wrapper{position:relative;background:rgba(245,247,250,.9)}
  body.light-theme .filters-shell{background:#FFFFFF}
  body.light-theme .filter-select,body.light-theme .filter-input{background:#F5F7FA}
  body.light-theme h1,body.light-theme h2,body.light-theme h3{color:var(--text)}
  body.light-theme .listing-card .title{color:var(--text)}
  body.light-theme .listing-card .price{color:var(--text)}
  body.light-theme .spec-value{color:var(--text)}
  body.light-theme .btn{background:rgba(0,0,0,.03);color:var(--text)}
  body.light-theme .btn.primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
  body.light-theme .chip{background:rgba(0,0,0,.05)}
  body.light-theme .lang-flag{color:var(--text)}
  body.light-theme .platform,body.light-theme .free{color:var(--text)}
  body.light-theme .pill.tg{color:#2B82FF}
  body.light-theme .pill.ig{color:#E1306C}
  body.light-theme .pill.fb{color:#1877F2}
  body.light-theme .slogan-item{background:rgba(255,255,255,0.8);border:1px solid var(--line)}
  body.light-theme .specs-card{background:rgba(255,255,255,0.9);border:1px solid var(--line)}
  body.light-theme .description-card{background:rgba(255,255,255,0.9);border:1px solid var(--line)}
  body.light-theme .contact-card{background:rgba(255,255,255,0.9);border:1px solid var(--line)}
  body.light-theme .spec-label{color:var(--muted)}
  body.light-theme .description-card h3{color:var(--primary)}
  body.light-theme .contact-card h3{color:var(--primary)}
  body.light-theme .description-card p{color:var(--text)}
  body.light-theme .contact-card p{color:var(--muted)}
  body.light-theme .detail-gallery{background:rgba(255,255,255,0.5);border:1px solid var(--line)}
  .listing-card{background:var(--surface);border:1px solid
  var(--line);border-radius:16px;overflow:hidden;position:relative;transition:.2s;display:flex;flex-direction:column}
  .listing-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,163,255,.15)}
  .listing-card
  .thumb{width:100%;height:200px;background-size:cover;background-position:center;max-height:200px;background-color:var(--surface)}
  .listing-card .meta{padding:4px 8px;display:grid;gap:3px}
  .listing-card .price{font-weight:800;color:#E6F1FF;font-size:17px}
  .listing-card .city{font-size:12px;color:var(--muted)}
  .listing-card .title{font-size:14px;font-weight:600;color:var(--text)}
  .mm-footer{background:var(--surface);border-top:1px solid var(--line);padding:24px
  0;text-align:center;color:var(--muted);font-size:13px}
  .listing-grid{padding:0}
  .platform{font-weight:700;font-size:14px;color:var(--text);text-align:center}
  .telegram-platform{display:flex;align-items:center;gap:10px;justify-content:center}
  .platform-icon{width:24px;height:24px;display:inline-block}
  .share-formula{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600}
  .join-text{color:var(--primary);font-weight:700}
  .share-icon-large{width:20px;height:20px}
  .share-icon-logo-large{height:20px;width:auto}
  .plus-sign,.arrow{color:var(--primary);font-weight:700;font-size:16px}
  .share-label{color:var(--text)}
  .free{font-weight:800;font-size:14px;color:var(--primary);text-align:center}
  .promo-steps{list-style:none;padding:0;margin:0}
  .promo-steps li{padding:8px 0;font-size:13px;line-height:1.5;color:var(--muted)}
  .promo-steps li:before{content:"✓ ";color:var(--primary);font-weight:700;margin-right:6px}
  .logo-mini{height:36px;width:auto;display:block}
  .pill.mm{display:flex;align-items:center;justify-content:center;padding:10px
  8px;border-color:#00A3FF;background:linear-gradient(135deg,rgba(0,163,255,.2) 0%,rgba(0,163,255,.6) 50%,rgba(0,163,255,.2)
  100%);background-size:200% 100%;animation:pillShine 2s ease-in-out infinite .9s;color:#5DA8FF}

  /* Old Login Modal - Hide completely */
  .modal:not(.login-modal){display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}
  .modal.active:not(.login-modal),.modal[style*="display: flex"]:not(.login-modal){display:none !important}
  .modal-content{background:var(--surface);border:1px solid
  var(--line);border-radius:16px;padding:32px;max-width:400px;width:90%;position:relative}
  .modal-close{position:absolute;top:12px;right:16px;font-size:28px;cursor:pointer;color:var(--muted);line-height:1}
  .modal-close:hover{color:var(--text)}
  .modal-title{margin:0 0 24px 0;color:var(--primary);font-size:24px;font-weight:700}
  .modal input{width:100%;padding:12px;margin-bottom:16px;border:1px solid
  var(--line);border-radius:8px;background:var(--bg);color:var(--text);font-size:15px}
  .modal input:focus{outline:none;border-color:var(--primary)}
  .modal .btn{width:100%;margin-top:8px}
  body.light-theme .modal-content{background:#FFFFFF;border:1px solid var(--line)}
  body.light-theme .modal input{background:#F5F7FA;color:var(--text)}
  /* Footer Links */
  .footer-content{display:flex;flex-direction:column;gap:16px;align-items:center}
  .footer-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}
  .footer-links a{color:var(--text);font-size:13px;font-weight:500;transition:color .2s}
  .footer-links a:hover{color:var(--primary)}
  .footer-links .separator{color:var(--line);font-size:12px}
  @media(max-width:600px){
    .footer-links{gap:8px;font-size:12px}
    .footer-links a{font-size:12px}
  }

  /* Logo Dark/Light Theme Toggle */
  .logo{margin-left:400px}
  .auth{margin-right:400px}
  .logo-dark{display:block !important}
  .logo-light{display:none !important}
  body.light-theme .logo-dark{display:none !important}
  body.light-theme .logo-light{display:block !important}

/* Single page fav button - Prominent yellow */
.fav-large{background:#FFC107 !important;border:2px solid #FFD54F !important;color:#000 !important;box-shadow:0 4px 12px rgba(255,193,7,0.4) !important}
.fav-large:hover{background:#FFD54F !important;transform:scale(1.15) !important;box-shadow:0 6px 20px rgba(255,193,7,0.6) !important}
.fav-large.favorited{background:#FF5722 !important;border-color:#FF7043 !important;color:#fff !important}
body.light-theme .fav-large{background:#FFC107 !important;border:2px solid #FFB300 !important;color:#000 !important}
body.light-theme .fav-large.favorited{background:#FF5722 !important;color:#fff !important}

/* Login Modal */
.login-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;align-items:center;justify-content:center}
.login-modal.active{display:flex}
.login-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px)}
.login-modal-content{position:relative;background:var(--surface);border:2px solid var(--primary);border-radius:20px;padding:40px;max-width:450px;width:90%;box-shadow:0 20px 60px rgba(0,163,255,0.3);animation:modalSlideIn 0.3s ease-out}
.login-modal-close{position:absolute;top:16px;right:20px;font-size:32px;cursor:pointer;color:var(--muted);background:none;border:none;line-height:1;transition:all 0.2s;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.login-modal-close:hover{color:var(--primary);background:rgba(43,130,255,0.1);transform:rotate(90deg)}
.login-modal-header{text-align:center;margin-bottom:32px}
.login-modal-header svg{color:var(--primary);margin:0 auto 16px;display:block;animation:iconPulse 2s ease-in-out infinite}
.login-modal-header h2{font-size:28px;font-weight:800;color:var(--primary);margin:0 0 8px 0}
.login-modal-header p{font-size:15px;color:var(--muted);margin:0}
.login-modal-body{display:flex;flex-direction:column;gap:12px}
.login-modal-body .nsl-container{margin:0 !important}
.login-modal-body .nsl-container-buttons{display:flex;flex-direction:column;gap:12px !important}
.login-modal-body .nsl-button{width:100% !important;justify-content:center !important;padding:14px 20px !important;font-size:16px !important;font-weight:600 !important;border-radius:12px !important;transition:all 0.2s !important;border:2px solid transparent !important}
.login-modal-body .nsl-button-google{background:#4285F4 !important;color:#fff !important}
.login-modal-body .nsl-button-google:hover{background:#357ae8 !important;transform:translateY(-2px);box-shadow:0 6px 20px rgba(66,133,244,0.4) !important}
.login-modal-body .nsl-button-facebook{background:#1877F2 !important;color:#fff !important}
.login-modal-body .nsl-button-facebook:hover{background:#166fe5 !important;transform:translateY(-2px);box-shadow:0 6px 20px rgba(24,119,242,0.4) !important}
.login-modal-body .nsl-container-block-heading{display:none !important}
.login-modal-body .nsl-container-block-separator{display:none !important}
.login-modal-body h2:not(.login-modal-header h2){display:none !important}
.login-modal-body h3{display:none !important}
.login-modal-body h4{display:none !important}

@keyframes modalSlideIn{
  from{opacity:0;transform:translateY(-30px) scale(0.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes iconPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}

/* Login button styling */
.login-btn{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;padding:10px 20px !important}
.login-btn svg{flex-shrink:0}
.login-btn-large{font-size:18px !important;padding:10px 28px !important;font-weight:700 !important;animation:buttonPulse 2.5s ease-in-out infinite}
.login-btn-large svg{width:22px;height:22px;margin-right:8px}

@keyframes buttonPulse{
  0%,100%{box-shadow:0 4px 16px rgba(43,130,255,0.4)}
  50%{box-shadow:0 6px 24px rgba(43,130,255,0.7),0 0 30px rgba(43,130,255,0.5)}
}

/* Light theme */
body.light-theme .login-modal-overlay{background:rgba(255,255,255,0.9)}
body.light-theme .login-modal-content{background:#fff;border-color:var(--primary);box-shadow:0 20px 60px rgba(43,130,255,0.2)}

/* Mobile responsive */
@media(max-width:600px){
  .login-modal-content{padding:32px 24px;max-width:95%}
  .login-modal-header h2{font-size:24px}
  .login-modal-header p{font-size:14px}
  .login-modal-header svg{width:40px;height:40px}
  .login-modal-close{font-size:28px;top:12px;right:12px}
  .login-btn{padding:8px 16px !important;font-size:13px}
}

/* VIP Listing Cards - Golden Border with Shimmer */
.listing-card.vip-listing{
  border:3px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
              linear-gradient(135deg,#FFD700 0%,#FFA500 25%,#FFD700 50%,#FFA500 75%,#FFD700 100%) border-box;
  background-size:200% 200%;
  animation:goldenShimmer 3s ease-in-out infinite;
  box-shadow:0 4px 20px rgba(255,215,0,0.3),0 0 40px rgba(255,215,0,0.15);
}

.listing-card.vip-listing:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(255,215,0,0.5),0 0 60px rgba(255,215,0,0.3);
}

@keyframes goldenShimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* VIP Verified Badge - Top Right */
.vip-badge{
  position:absolute;
  top:8px;
  right:8px;
  width:32px;
  height:32px;
  background:linear-gradient(135deg,#FFD700,#FFA500);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(255,215,0,0.4);
  z-index:5;
  animation:badgePulse 2s ease-in-out infinite;
}

.vip-badge svg{
  width:20px;
  height:20px;
  color:#000;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

@keyframes badgePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.1)}
}

/* Light Theme VIP Adjustments */
body.light-theme .listing-card.vip-listing{
  background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,
              linear-gradient(135deg,#FFD700 0%,#FFA500 25%,#FFD700 50%,#FFA500 75%,#FFD700 100%) border-box;
  box-shadow:0 4px 20px rgba(255,215,0,0.4),0 0 40px rgba(255,215,0,0.2);
}

body.light-theme .listing-card.vip-listing:hover{
  box-shadow:0 8px 30px rgba(255,215,0,0.6),0 0 60px rgba(255,215,0,0.4);
}

/* Mobile VIP Badge - Slightly Smaller */
@media(max-width:600px){
  .vip-badge{
    width:28px;
    height:28px;
    top:6px;
    right:6px;
  }
  
  .vip-badge svg{
    width:16px;
    height:16px;
  }
}

/* Breadcrumbs Navigation */
.breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  padding:12px 16px;
  background:rgba(15,20,29,0.3);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14px;
  flex-wrap:wrap;
}

.breadcrumbs a{
  color:var(--primary);
  text-decoration:none;
  transition:all 0.2s;
  font-weight:500;
}

.breadcrumbs a:hover{
  color:var(--accent);
  text-decoration:underline;
}

.breadcrumb-separator{
  color:var(--muted);
  font-size:12px;
  user-select:none;
}

.breadcrumb-current{
  color:var(--text);
  font-weight:600;
}

/* Light Theme Breadcrumbs */
body.light-theme .breadcrumbs{
  background:rgba(245,247,250,0.8);
  border:1px solid var(--line);
}

body.light-theme .breadcrumbs a{
  color:var(--primary);
}

body.light-theme .breadcrumbs a:hover{
  color:var(--accent);
}

body.light-theme .breadcrumb-current{
  color:var(--text);
}

/* Mobile Breadcrumbs */
@media(max-width:600px){
  .breadcrumbs{
    padding:10px 12px;
    font-size:12px;
    gap:6px;
  }
  
  .breadcrumb-separator{
    font-size:11px;
  }
}

/* Related Listings Section */
.related-listings{
  padding:24px;
  background:rgba(15,20,29,0.3);
  border:1px solid var(--line);
  border-radius:12px;
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.related-grid .listing-card{
  text-decoration:none;
  color:inherit;
}

.related-grid .listing-card:hover{
  transform:translateY(-3px);
}

/* Light Theme Related Listings */
body.light-theme .related-listings{
  background:rgba(255,255,255,0.8);
  border:1px solid var(--line);
}

/* Tablet Related Listings - 2 columns */
@media(max-width:1024px){
  .related-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}

/* Mobile Related Listings - 2 columns */
@media(max-width:600px){
  .related-listings{
    padding:16px 12px;
  }
  
  .related-listings h3{
    font-size:18px !important;
    margin-bottom:16px !important;
  }
  
  .related-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  
  .related-grid .listing-card{
    min-height:auto;
  }
  
  .related-grid .listing-card .thumb{
    max-height:160px;
    min-height:140px;
  }
  
  .related-grid .listing-card .meta{
    padding:10px 12px;
  }
  
  .related-grid .listing-card .price{
    font-size:16px;
  }

  /* Related Listings Mobile */
  .related-listings{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    padding:16px 8px !important;
  }

  /* Related Carousel Mobile - 2 cards visible */
  .related-carousel-wrapper{
    padding:0 35px !important;
    overflow:hidden !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .related-carousel{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
    transform:none !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  .related-carousel .listing-card{
    flex:none !important;
    min-width:auto !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:auto !important;
  }

  .related-carousel .listing-card .thumb{
    width:100% !important;
    height:0 !important;
    padding-bottom:75% !important;
    min-height:120px !important;
    max-height:180px !important;
    background-size:cover !important;
    background-position:center !important;
    flex-shrink:0 !important;
  }

  .related-carousel .listing-card .meta{
    flex:0 0 auto !important;
    padding:8px 10px !important;
    min-height:auto !important;
  }

  .related-carousel .listing-card .price{
    font-size:13px !important;
  }

  .related-carousel .listing-card .city{
    font-size:11px !important;
  }

  .related-carousel .listing-card .chip{
    font-size:10px !important;
    padding:2px 6px !important;
  }

  .carousel-nav{
    width:30px !important;
    height:30px !important;
    font-size:16px !important;
  }
}

/* ===========================================
   VIP2 TIER - SILVER FRAME EFFECT
   =========================================== */

/* VIP2 Silver Frame */
.listing-card.vip2-listing{
  border:4px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
              linear-gradient(135deg,#D4D4D4 0%,#F0F0F0 25%,#D4D4D4 50%,#F0F0F0 75%,#D4D4D4 100%) border-box;
  background-size:200% 200%;
  animation:silverShimmer 3s ease-in-out infinite;
  box-shadow:0 6px 25px rgba(212,212,212,0.5),0 0 50px rgba(212,212,212,0.3),inset 0 0 20px rgba(212,212,212,0.1);
}

.listing-card.vip2-listing:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 35px rgba(212,212,212,0.7),0 0 70px rgba(212,212,212,0.5),inset 0 0 30px rgba(212,212,212,0.2);
}

@keyframes silverShimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* VIP2 Verified Badge - Top Right (Silver) */
.vip2-badge{
  position:absolute;
  top:8px;
  right:8px;
  width:32px;
  height:32px;
  background:linear-gradient(135deg,#C0C0C0,#E8E8E8);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(192,192,192,0.4);
  z-index:5;
  animation:badgePulse 2s ease-in-out infinite;
}

.vip2-badge svg{
  width:20px;
  height:20px;
  color:#000;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* Light Theme VIP2 Adjustments - Dark Gray Border */
body.light-theme .listing-card.vip2-listing{
  background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,
              linear-gradient(135deg,#4A4A4A 0%,#6B6B6B 25%,#4A4A4A 50%,#6B6B6B 75%,#4A4A4A 100%) border-box;
  box-shadow:0 6px 25px rgba(74,74,74,0.4),0 0 50px rgba(74,74,74,0.25),inset 0 0 20px rgba(74,74,74,0.05);
}

body.light-theme .listing-card.vip2-listing:hover{
  box-shadow:0 10px 35px rgba(74,74,74,0.6),0 0 70px rgba(74,74,74,0.4),inset 0 0 30px rgba(74,74,74,0.1);
}

/* Mobile VIP2 Badge - Slightly Smaller */
@media(max-width:600px){
  .vip2-badge{
    width:28px;
    height:28px;
    top:6px;
    right:6px;
  }
  
  .vip2-badge svg{
    width:16px;
    height:16px;
  }
}

/* Add Listing Page */
.add-listing-page {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}
.add-listing-container {
  background: var(--surface);
  border-radius: 12px;
  padding: 40px;
  border: 1px solid var(--line);
}
.add-listing-header {
  text-align: center;
  margin-bottom: 40px;
}
.add-listing-header h1 {
  font-size: 32px;
  color: var(--text);
  margin-bottom: 10px;
}
.add-listing-form {
  max-width: 800px;
  margin: 0 auto;
}

/* Profile Page */
.profile-page {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}
.profile-container {
  background: var(--surface);
  border-radius: 12px;
  padding: 40px;
  border: 1px solid var(--line);
}
.profile-header {
  text-align: center;
  margin-bottom: 40px;
}
.profile-header h1 {
  font-size: 32px;
  color: var(--text);
  margin-bottom: 10px;
}
.profile-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.stat-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  flex: 1;
  min-width: 200px;
}

/* Top Bar Button Styles */
.top-slogan-bar .lang-switcher button {
  padding: 4px 8px !important;
  font-size: 18px !important;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s;
}
.top-slogan-bar .theme-toggle {
  padding: 4px 12px !important;
  font-size: 14px !important;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px !important;
}
.top-slogan-bar .theme-toggle .theme-icon {
  font-size: 16px !important;
}
.top-slogan-bar .theme-toggle .theme-text {
  font-size: 13px !important;
  font-weight: 500;
}

/* Enhanced Add Listing Page Styles */
.add-listing-page {
  background: var(--bg);
  min-height: 80vh;
  padding: 40px 20px;
}
.add-listing-container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 20px;
  padding: 50px;
  border: 2px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.add-listing-header {
  text-align: center;
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 2px solid var(--line);
}
.add-listing-header h1 {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 15px;
}
.add-listing-header p {
  font-size: 16px;
  color: var(--muted);
}
.form-section {
  margin-bottom: 30px;
}
.form-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  transition: all 0.3s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(43,130,255,0.1);
}
.form-hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}
.submit-btn {
  width: 100%;
  padding: 18px 30px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 30px;
}
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(43,130,255,0.3);
}
.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hidden States */
.hidden {
  display: none !important;
}

/* Form Messages */
.form-loading, .form-message {
  text-align: center;
  padding: 40px;
  border-radius: 12px;
  margin-top: 30px;
}
.form-loading {
  background: rgba(43,130,255,0.1);
  border: 2px solid var(--primary);
}
.form-message.success {
  background: rgba(34,197,94,0.1);
  border: 2px solid #22c55e;
  color: #22c55e;
}
.form-message.error {
  background: rgba(239,68,68,0.1);
  border: 2px solid #ef4444;
  color: #ef4444;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Custom Checkbox Styles */
input[type="checkbox"] {
  width: 22px;
  height: 22px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #FFD700;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
  vertical-align: middle;
  transition: all 0.2s;
}
input[type="checkbox"]:checked {
  background: white;
  border-color: #FFD700;
}
input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 16px;
  font-weight: bold;
}
input[type="checkbox"]:hover {
  box-shadow: 0 0 0 3px rgba(255,215,0,0.2);
}
.checkbox-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
}
body.light-theme input[type="checkbox"] {
  background: white;
  border-color: #FFD700;
}
body.light-theme input[type="checkbox"]:checked::after {
  color: #000;
}

/* Enhanced Selectable Buttons */
.option-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.option-button {
  padding: 12px 24px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  font-size: 15px;
  position: relative;
  overflow: hidden;
}
.option-button:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(43,130,255,0.2);
}
.option-button.selected {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border-color: var(--primary);
  animation: selectPulse 0.5s ease;
}
@keyframes selectPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.option-button:active {
  transform: scale(0.98);
}

/* Enhanced Photo Upload Area */
.photo-upload-section {
  margin: 40px 0;
  text-align: center;
}
.photo-upload-container {
  border: 3px dashed var(--primary);
  border-radius: 20px;
  padding: 60px 40px;
  background: linear-gradient(135deg, rgba(43,130,255,0.05), rgba(0,163,255,0.05));
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}
.photo-upload-container:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(43,130,255,0.1), rgba(0,163,255,0.1));
  transform: scale(1.02);
}
.photo-upload-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
  position: relative;
  animation: uploadPulse 2s ease-in-out infinite;
}
@keyframes uploadPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43,130,255,0.5); }
  50% { box-shadow: 0 0 0 20px rgba(43,130,255,0); }
}
.photo-upload-icon::before {
  content: '+';
  font-weight: 300;
}
.photo-upload-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.photo-upload-hint {
  font-size: 14px;
  color: var(--muted);
}
input[type="file"] {
  display: none;
}
.uploaded-photos {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 20px;
  justify-content: center;
}
.uploaded-photo {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.uploaded-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.remove-photo {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  background: rgba(239,68,68,0.9);
  border-radius: 50%;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Social Media Checkboxes Vertical Layout */
.social-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
  padding: 20px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.social-checkbox-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.2s;
}
.social-checkbox-item:hover {
  background: rgba(43,130,255,0.05);
}
.social-checkbox-item label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  width: 100%;
}
.social-checkbox-item input[type="checkbox"] {
  margin-right: 12px;
}

/* Fix: Correct class names for Add Listing buttons */
.button-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.option-btn {
  padding: 12px 24px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  font-size: 15px;
  position: relative;
  overflow: hidden;
}
.option-btn:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(43,130,255,0.2);
  background: rgba(43,130,255,0.1);
}
.option-btn.active, .option-btn.selected {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border-color: var(--primary);
  animation: selectPulse 0.5s ease;
  transform: scale(1.05);
}
.option-btn:active {
  transform: scale(0.98);
}

/* Enhanced Photo Upload Box */
.photo-upload-wrapper {
  width: 100%;
  margin: 30px 0;
}
.photo-upload-box {
  width: 100%;
  min-height: 250px;
  border: 3px dashed var(--primary);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(43,130,255,0.03), rgba(0,163,255,0.03));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 40px;
}
.photo-upload-box:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(43,130,255,0.08), rgba(0,163,255,0.08));
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(43,130,255,0.2);
}
.upload-plus-icon {
  font-size: 60px;
  color: var(--primary);
  font-weight: 300;
  width: 80px;
  height: 80px;
  border: 3px solid var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: pulsePlus 2s ease-in-out infinite;
}
@keyframes pulsePlus {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}
.upload-text {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.upload-hint {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* VIN Input with Button */
.input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}
.input-group .form-input {
  flex: 1;
}
.vin-check-btn {
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}
.vin-check-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(43,130,255,0.3);
}
.vin-check-btn:active {
  transform: scale(0.98);
}

/* Submit Button Centered & Animated */
.form-actions {
  display: flex;
  justify-content: center;
  margin: 50px 0 30px;
}
.btn-submit {
  padding: 20px 60px;
  background: linear-gradient(135deg, #2B82FF, #00A3FF);
  color: white;
  border: none;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: submitGlow 2s ease-in-out infinite;
}
@keyframes submitGlow {
  0%, 100% { box-shadow: 0 5px 20px rgba(43,130,255,0.3); }
  50% { box-shadow: 0 8px 30px rgba(43,130,255,0.5); }
}
.btn-submit:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(43,130,255,0.4);
}
.btn-submit:active {
  transform: scale(0.98);
}
.btn-submit::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: rotate(45deg);
  animation: submitShine 3s ease-in-out infinite;
}
@keyframes submitShine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: none;
}

/* Social Media Links Styling */
.social-link-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 15px;
  flex: 1;
}
.social-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.social-link-btn {
  display: inline-block;
  padding: 8px 16px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 8px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s;
  text-align: center;
}
.social-link-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(43,130,255,0.3);
}

/* Required Asterisk Red */
.required {
  color: #ef4444 !important;
  font-weight: 700;
  margin-left: 4px;
}
body.light-theme .required {
  color: #dc2626 !important;
}

/* Social Checkbox Items Enhanced */
.social-checkbox-item {
  padding: 15px !important;
  border-radius: 10px !important;
}
.social-checkbox-item:hover {
  background: rgba(43,130,255,0.05) !important;
}
.social-icon {
  flex-shrink: 0;
  margin-right: 5px;
}

/* CRITICAL FIX: Photo Upload Area - Wide Frame with + Icon */
.photo-upload-wrapper {
  width: 100% !important;
  margin: 30px 0 !important;
}
.photo-upload-box {
  width: 100% !important;
  min-height: 250px !important;
  border: 4px dashed var(--primary) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(43,130,255,0.05), rgba(0,163,255,0.05)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  padding: 50px 40px !important;
}
.photo-upload-box:hover {
  border-color: var(--accent) !important;
  background: linear-gradient(135deg, rgba(43,130,255,0.1), rgba(0,163,255,0.1)) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 40px rgba(43,130,255,0.3) !important;
}
.upload-plus-icon {
  font-size: 80px !important;
  color: var(--primary) !important;
  font-weight: 200 !important;
  width: 100px !important;
  height: 100px !important;
  border: 4px solid var(--primary) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 25px !important;
  animation: pulsePlus 2s ease-in-out infinite !important;
  line-height: 1 !important;
}
@keyframes pulsePlus {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}
.upload-text {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 12px !important;
}
.upload-hint {
  font-size: 15px !important;
  color: var(--muted) !important;
  text-align: center !important;
}

/* CRITICAL FIX: Social Media Links - Spacing & Background */
.social-link-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  margin-left: 15px !important;
  flex: 1 !important;
}
.social-text {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  margin-bottom: 5px !important;
}

/* CRITICAL FIX: Header Language Flags - Bigger Flags */
.top-slogan-bar .lang-switcher button {
  padding: 6px 10px !important;
  font-size: 24px !important;
  border-radius: 8px !important;
  border: 2px solid var(--line) !important;
  background: var(--surface) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  line-height: 1 !important;
}
.top-slogan-bar .lang-switcher button:hover {
  border-color: var(--primary) !important;
  transform: scale(1.1) !important;
}

/* CRITICAL FIX: Theme Button - White text for Dark */
.top-slogan-bar .theme-toggle {
  padding: 6px 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: 2px solid var(--line) !important;
  background: var(--surface) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.top-slogan-bar .theme-toggle .theme-icon {
  font-size: 18px !important;
}
.top-slogan-bar .theme-toggle .theme-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
body.light-theme .top-slogan-bar .theme-toggle .theme-text {
  color: var(--text) !important;
}

/* CRITICAL FIX: Add Listing Button - Animated Like Login */
.btn.add-listing {
  background: linear-gradient(135deg, #FF6B35, #F7931E) !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  animation: addListingGlow 2s ease-in-out infinite !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
@keyframes addListingGlow {
  0%, 100% { box-shadow: 0 5px 20px rgba(255,107,53,0.4); }
  50% { box-shadow: 0 8px 30px rgba(255,107,53,0.6); }
}
.btn.add-listing:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 15px 40px rgba(255,107,53,0.5) !important;
}
.btn.add-listing:active {
  transform: scale(0.98) !important;
}
button.btn.add-listing {
  background: linear-gradient(135deg, #FF6B35, #F7931E) !important;
}

/* User Menu Button Order */
.user-menu {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.user-menu .btn.add-listing {
  order: -1 !important;
}

/* FORCE: Add Listing Page - Photo Upload with More Specificity */
.add-listing-page .photo-upload-wrapper,
.add-listing-container .photo-upload-wrapper,
#addListingForm .photo-upload-wrapper {
  width: 100% !important;
  margin: 30px 0 !important;
  display: block !important;
}
.add-listing-page .photo-upload-box,
.add-listing-container .photo-upload-box,
#addListingForm .photo-upload-box,
#photoUploadArea {
  width: 100% !important;
  min-height: 250px !important;
  border: 4px dashed #2B82FF !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(43,130,255,0.05), rgba(0,163,255,0.05)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  padding: 50px 40px !important;
}
.add-listing-page .upload-plus-icon,
.add-listing-container .upload-plus-icon,
#addListingForm .upload-plus-icon {
  font-size: 80px !important;
  color: #2B82FF !important;
  font-weight: 200 !important;
  width: 100px !important;
  height: 100px !important;
  border: 4px solid #2B82FF !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 25px !important;
  animation: pulsePlus 2s ease-in-out infinite !important;
  line-height: 1 !important;
}

/* FORCE: Social Media Links with Specificity */
.add-listing-page .social-link-wrapper,
.add-listing-container .social-link-wrapper,
#addListingForm .social-link-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  margin-left: 15px !important;
  flex: 1 !important;
}
.add-listing-page .social-link-btn,
.add-listing-container .social-link-btn,
#addListingForm .social-link-btn {
  display: inline-block !important;
  padding: 10px 20px !important;
  background: var(--surface) !important;
  border: 2px solid #2B82FF !important;
  border-radius: 10px !important;
  color: #2B82FF !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: all 0.3s !important;
  text-align: center !important;
  max-width: 200px !important;
}

/* SMALLER: Add Listing Button */
.btn.add-listing {
  background: linear-gradient(135deg, #FF6B35, #F7931E) !important;
  color: white !important;
  border: none !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  animation: addListingGlow 2s ease-in-out infinite !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.btn.add-listing:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 25px rgba(255,107,53,0.4) !important;
}

/* ENHANCED: Social Media Links - Right Aligned with Animation */
.add-listing-page .social-checkbox-item,
.add-listing-container .social-checkbox-item,
#addListingForm .social-checkbox-item {
  display: flex !important;
  align-items: center !important;
  padding: 15px !important;
  border-radius: 10px !important;
  gap: 15px !important;
}

.add-listing-page .social-link-wrapper,
.add-listing-container .social-link-wrapper,
#addListingForm .social-link-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-left: 15px !important;
  flex: 1 !important;
}

.add-listing-page .social-text,
.add-listing-container .social-text,
#addListingForm .social-text {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  flex: 1 !important;
}

.add-listing-page .social-link-btn,
.add-listing-container .social-link-btn,
#addListingForm .social-link-btn {
  display: inline-block !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  border: 2px solid var(--primary) !important;
  border-radius: 10px !important;
  color: white !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  min-width: 180px !important;
  position: relative !important;
  overflow: hidden !important;
  animation: linkPulse 2s ease-in-out infinite !important;
}

@keyframes linkPulse {
  0%, 100% { 
    box-shadow: 0 5px 15px rgba(43,130,255,0.3);
    transform: translateX(0);
  }
  50% { 
    box-shadow: 0 8px 25px rgba(43,130,255,0.5);
    transform: translateX(5px);
  }
}

.add-listing-page .social-link-btn::before,
.add-listing-container .social-link-btn::before,
#addListingForm .social-link-btn::before {
  content: '→' !important;
  position: absolute !important;
  right: 15px !important;
  opacity: 0 !important;
  transition: all 0.3s ease !important;
}

.add-listing-page .social-link-btn:hover,
.add-listing-container .social-link-btn:hover,
#addListingForm .social-link-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--primary)) !important;
  transform: translateX(8px) translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(43,130,255,0.5) !important;
  padding-right: 35px !important;
}

.add-listing-page .social-link-btn:hover::before,
.add-listing-container .social-link-btn:hover::before,
#addListingForm .social-link-btn:hover::before {
  opacity: 1 !important;
  right: 12px !important;
}

.add-listing-page .social-link-btn:active,
.add-listing-container .social-link-btn:active,
#addListingForm .social-link-btn:active {
  transform: translateX(3px) scale(0.98) !important;
}

/* Shine effect for clickable indication */
.add-listing-page .social-link-btn::after,
.add-listing-container .social-link-btn::after,
#addListingForm .social-link-btn::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent) !important;
  transform: rotate(45deg) !important;
  animation: linkShine 3s ease-in-out infinite !important;
}

@keyframes linkShine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Additional Styles - Moved from functions.php inline CSS */
.container{max-width:2200px;margin:0 auto;padding:0 32px}
.lang-switcher{display:flex;gap:6px}
.auth{display:flex;align-items:center;gap:8px}
.pill-img{width:100%;height:auto;display:block;border-radius:20px}
.arrow-down{text-align:center;color:var(--primary);font-size:28px}
.join-now-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:800;font-size:16px;text-shadow:0 2px 8px rgba(0,0,0,0.6);z-index:10}
.tg-pill,.ig-pill,.fb-pill{position:relative;border-radius:20px}
.detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.listing-title{font-size:28px;font-weight:800;margin:0;color:var(--primary)}
.fav-large{background:rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:24px;cursor:pointer;transition:all 0.2s}
.fav-large:hover{transform:scale(1.1);background:rgba(255,255,255,0.1)}
.listing-actions{display:flex;gap:12px;justify-content:center;padding-top:16px;border-top:1px solid var(--line)}
.slogan-left,.slogan-right{position:sticky;top:120px;align-self:start;background:var(--bg)}
.slogan-box{display:flex;flex-direction:column;gap:16px}
.slogan-item{background:#121824;border:1px solid var(--line);border-radius:12px;padding:16px}
.card-link{display:block;color:inherit;text-decoration:none}
.card-link:hover{color:inherit}
.platform{font-weight:700;font-size:18px;color:var(--text);text-align:center}
.telegram-platform{display:flex;align-items:center;gap:10px;justify-content:center}
.platform-icon{width:32px;height:32px;display:inline-block;filter:brightness(0) invert(1)}
.share-formula{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:16px;font-weight:600}
.join-text{color:var(--primary);font-weight:700}
.share-icon-large{width:24px;height:24px;filter:brightness(0) invert(1)}
.share-icon-logo-large{height:24px;width:auto}
.plus-sign,.arrow{color:var(--primary);font-weight:700;font-size:16px}
.share-label{color:var(--text)}
.free{font-weight:800;font-size:18px;color:var(--primary);text-align:center}
.promo-steps{list-style:none;padding:0;margin:0}
.promo-steps li{padding:8px 0;font-size:16px;line-height:1.6;color:var(--muted)}
.promo-steps li:before{content:"✓ ";color:var(--primary);font-weight:700;margin-right:6px}
.logo-mini{height:36px;width:auto;display:block}
.pill.mm{display:flex;align-items:center;justify-content:center;padding:4px;gap:4px;background:linear-gradient(135deg,rgba(43,130,255,.15) 0%,rgba(43,130,255,.3) 50%,rgba(43,130,255,.15) 100%);background-size:200% 100%;animation:pillShine 3s ease-in-out infinite;border:2px solid #2B82FF;border-radius:999px;color:#5DA8FF;font-weight:700}
.pill.free-pill{display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,163,255,.1);border:2px solid var(--line);border-radius:999px;box-shadow:inset 0 2px 8px rgba(0,0,0,0.2);width:100%}
.pill.free-pill .free{color:var(--text);font-size:16px;font-weight:800;text-align:center}
.social-sidebar{display:flex;flex-direction:column;gap:8px}
.social-sidebar .pill{width:100%;justify-content:center;padding:4px;gap:4px;font-size:14px;box-shadow:inset 0 2px 8px rgba(0,0,0,0.2)}
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:2px solid;font-weight:700;font-size:15px;transition:all .2s}
.pill.tg{border-color:#2B82FF;background:rgba(43,130,255,.15);color:#5DA8FF}
.pill.ig{border-color:#E1306C;background:linear-gradient(135deg,rgba(225,48,108,.15),rgba(253,29,29,.15));color:#F77F9D}
.pill.fb{border-color:#1877F2;background:rgba(24,119,242,.15);color:#5DA8FF}
.pill:hover{transform:scale(1.05);box-shadow:0 0 0 3px rgba(0,163,255,0.5)}

/* Mobile-only user menu - hidden by default */
.mobile-user-menu-bar{
  display:none;
}

/* =========================================
   DESKTOP HEADER BUTTON STYLES (Default)
   ========================================= */

/* Desktop: Normal button sizes */
.header-top .user-menu .btn.add-listing{
  padding:8px 16px;
  font-size:14px;
}

.header-top .user-menu .btn.login-btn-large{
  padding:8px 20px;
  font-size:14px;
}

.header-top .user-menu .btn.login-btn-large svg{
  width:20px;
  height:20px;
  margin-right:6px;
}

/* =========================================
   MOBILE IMPROVEMENTS - V25.2
   ========================================= */

@media(max-width:768px){
  /* 1. Center language switcher and theme toggle */
  .top-slogan-bar{
    justify-content:center !important;
    padding:10px 16px;
  }

  /* 2. Top header layout: logo left, buttons right */
  .header-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
  }

  .header-top .logo{
    flex-shrink:0;
  }

  .header-top .auth{
    margin-left:auto;
    display:flex;
    gap:8px;
    align-items:center;
  }

  /* Not logged in: Add Listing + Login side by side */
  .header-top .user-menu{
    display:flex;
    gap:4px;
    align-items:center;
  }

  .header-top .user-menu .btn.add-listing{
    padding:5px 6px;
    font-size:10px;
    white-space:nowrap;
    min-width:auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .header-top .user-menu .btn.login-btn-large{
    padding:5px 8px;
    font-size:10px;
    white-space:nowrap;
    min-width:auto;
  }

  .header-top .user-menu .btn.login-btn-large svg{
    width:14px;
    height:14px;
    margin-right:2px;
  }

  /* Make logo smaller on mobile */
  .header-top .logo img{
    height:50px !important;
  }

  /* Hide username and other buttons in main header on mobile */
  .header-top .user-menu .user-name,
  .header-top .user-menu .btn.favorites,
  .header-top .user-menu .btn.profile,
  .header-top .user-menu .btn.logout{
    display:none;
  }

  /* 3. Show user menu in separate header when Firebase logged in */
  body.firebase-logged-in .mm-header{
    position:relative;
  }

  body.firebase-logged-in .mobile-user-menu-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    background:rgba(21,26,36,.9);
    border-bottom:1px solid var(--line);
  }

  .mobile-user-menu-bar{
    display:none !important;
  }

  body.firebase-logged-in .mobile-user-menu-bar{
    display:flex !important;
  }

  .mobile-user-menu-bar .user-name{
    font-weight:600;
    color:var(--text);
    font-size:14px;
  }

  /* Light theme fix for 3rd header */
  body.light-theme .mobile-user-menu-bar{
    background:rgba(255,255,255,0.95) !important;
    border-bottom:1px solid rgba(0,0,0,0.1);
  }

  .mobile-user-menu-bar .user-actions{
    display:flex;
    gap:8px;
    align-items:center;
  }

  /* Profile button - text with icon */
  .mobile-user-menu-bar .profile-btn{
    padding:6px 12px;
    font-size:12px;
    background:var(--primary);
    color:#fff;
    border-radius:6px;
    font-weight:600;
    white-space:nowrap;
  }

  /* Favorites icon - minimal */
  .mobile-user-menu-bar .favorites-icon{
    padding:6px 8px;
    font-size:18px;
    background:transparent;
    border:1px solid var(--line);
    border-radius:6px;
  }

  /* Logout button - text only */
  .mobile-user-menu-bar .logout-btn{
    padding:6px 12px;
    font-size:12px;
    background:rgba(220,38,38,0.15);
    color:#ef4444;
    border:1px solid rgba(220,38,38,0.3);
    border-radius:6px;
    font-weight:600;
    white-space:nowrap;
  }

  /* 4. Fix Join Telegram background in light theme */
  body.light-theme .mobile-telegram-cta{
    background:transparent !important;
  }

  body.light-theme .mobile-telegram-cta .pill.tg{
    background:rgba(43,130,255,.15) !important;
    border-color:#2B82FF !important;
    color:#1877F2 !important;
  }

  /* 5. Back button on single page with visible border */
  .back-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:8px;
    font-weight:600;
    text-decoration:none;
    transition:all .2s;
  }

  /* Dark theme - white border */
  body:not(.light-theme) .back-btn{
    border:2px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.05);
    color:var(--text);
  }

  body:not(.light-theme) .back-btn:hover{
    border-color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.1);
  }

  /* Light theme - dark border */
  body.light-theme .back-btn{
    border:2px solid rgba(0,0,0,.3);
    background:rgba(0,0,0,.05);
    color:var(--text);
  }

  body.light-theme .back-btn:hover{
    border-color:rgba(0,0,0,.5);
    background:rgba(0,0,0,.1);
  }

  /* 6. Hide favorite button on listing cards */
  .listing-card .fav{
    display:none !important;
  }

  /* Keep VIP badges visible */
  .listing-card .vip-badge,
  .listing-card .vip2-badge{
    display:flex !important;
  }
}

/* =========================================
   PHOTO UPLOAD PREVIEW STYLES
   ========================================= */

/* Photo preview container */
.photo-preview{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}

/* Individual photo item */
.photo-item{
  position:relative;
  width:100px;
  height:100px;
  border-radius:8px;
  overflow:hidden;
  border:2px solid var(--line);
  background:var(--surface);
  transition:all 0.2s ease;
}

.photo-item:hover{
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* Photo thumbnail */
.photo-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Remove button (X) */
.photo-remove{
  position:absolute;
  top:4px;
  right:4px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(220,38,38,0.95);
  color:#fff;
  border:2px solid #fff;
  font-size:18px;
  font-weight:bold;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

.photo-remove:hover{
  background:rgba(185,28,28,1);
  transform:scale(1.1);
}

.photo-remove:active{
  transform:scale(0.95);
}

/* Light theme adjustments */
body.light-theme .photo-item{
  border-color:rgba(0,0,0,0.15);
  background:#f9fafb;
}

body.light-theme .photo-remove{
  background:rgba(220,38,38,0.95);
  border-color:rgba(255,255,255,0.9);
}

/* Mobile adjustments for photo preview */
@media(max-width:768px){
  .photo-preview{
    gap:8px;
  }

  .photo-item{
    width:80px;
    height:80px;
  }

  .photo-remove{
    width:20px;
    height:20px;
    font-size:16px;
    top:3px;
    right:3px;
  }

  /* ===== ADD LISTING PAGE - MOBILE FIXES ===== */

  /* VIN input group - wider input, smaller button */
  .input-group{
    gap:6px;
  }

  .input-group .form-input{
    flex:1.5;
    min-width:0;
  }

  .vin-check-btn{
    padding:10px 12px;
    font-size:12px;
    white-space:nowrap;
  }

  /* Widen form on mobile - reduce side padding */
  .add-listing-container{
    padding:20px 16px !important;
  }

  /* Social media checkboxes - push slightly left */
  .social-info-section{
    padding:0 !important;
    margin:0 !important;
    margin-left:-4px !important;
  }

  .social-checkboxes{
    padding:0 !important;
    margin:0 !important;
    margin-left:-4px !important;
    gap:12px;
    background:transparent !important;
    border:none !important;
  }

  /* Keep all items on same line */
  .social-checkbox-item{
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
  }

  /* Checkbox - compact */
  .social-checkbox-item input[type="checkbox"]{
    margin-right:6px;
    flex-shrink:0;
  }

  /* Icon - smaller */
  .social-checkbox-item .social-icon{
    width:16px !important;
    height:16px !important;
    margin-right:5px;
    flex-shrink:0;
  }

  /* Wrapper - takes remaining space, stacks vertically */
  .social-link-wrapper{
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    margin-left:0 !important;
    margin-top:0 !important;
  }

  /* Text - compact */
  .social-text{
    font-size:11px !important;
    font-weight:500 !important;
    line-height:1.2;
  }

  /* Button - minimum size to fit */
  .social-link-btn{
    padding:2px 4px !important;
    font-size:9px !important;
    width:100% !important;
    max-width:100% !important;
    display:block !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.3 !important;
    border-radius:4px !important;
  }

  /* Button groups - smaller on mobile */
  .button-group{
    gap:8px;
  }

  .option-btn{
    padding:8px 12px;
    font-size:13px;
  }
}

/* Contact Card - Horizontal Layout */
.contact-card{background:rgba(15,20,29,0.5);border:1px solid var(--line);border-radius:12px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.contact-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1}
.contact-label{font-size:16px;color:var(--text)}
.contact-separator{color:var(--muted);font-size:14px}
.contact-item{font-size:14px;color:var(--muted)}
.contact-btn{flex-shrink:0;padding:12px 24px !important;white-space:nowrap}

/* Responsive: Stack on mobile */
@media(max-width:768px){
  .contact-card{flex-direction:column;align-items:stretch;gap:12px}
  .contact-info{justify-content:center;text-align:center}
  .contact-btn{width:100%}
}
/* Cache buster: 1763839235 */

/* LIGHT THEME FIX - SADECE IKONLAR (logo hariç) */
body.light-theme .platform-icon:not(.share-icon-logo-large),
body.light-theme .share-icon-large:not(.share-icon-logo-large) {
  filter: brightness(0) saturate(100%) !important;
}

/* Dark theme - white icons (logo hariç) */
body:not(.light-theme) .platform-icon:not(.share-icon-logo-large),
body:not(.light-theme) .share-icon-large:not(.share-icon-logo-large) {
  filter: brightness(0) invert(1) !important;
}

/* LOGOLAR İÇİN AYRI KURAL - filter YOK, sadece display */
/* Dark tema → beyaz logo */
.logo-mini.logo-light,
.share-icon-logo-large.logo-light {
  display: inline-block !important;
  filter: none !important;
}

.logo-mini.logo-dark,
.share-icon-logo-large.logo-dark {
  display: none !important;
}

/* Light tema → siyah logo */
body.light-theme .logo-mini.logo-light,
body.light-theme .share-icon-logo-large.logo-light {
  display: none !important;
}

body.light-theme .logo-mini.logo-dark,
body.light-theme .share-icon-logo-large.logo-dark {
  display: inline-block !important;
  filter: none !important;
}

/* Sol Pill Küçültme - Genel */
.slogan-box {
  padding: 12px !important;
  gap: 8px !important;
}

.slogan-item {
  padding: 10px 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

/* Platform text */
.platform {
  font-size: 12px !important;
  font-weight: 600 !important;
}

.telegram-platform {
  font-size: 11px !important;
  gap: 6px !important;
}

/* İkonlar küçült */
.platform-icon {
  width: 20px !important;
  height: 20px !important;
}

.share-icon-large {
  width: 16px !important;
  height: 16px !important;
}

.share-icon-logo-large {
  height: 20px !important;
}

/* Share formula */
.share-formula {
  gap: 6px !important;
  font-size: 11px !important;
}

.join-text,
.share-label {
  font-size: 11px !important;
}

.plus-sign,
.arrow {
  font-size: 13px !important;
}

/* Promo steps list */
.promo-steps {
  font-size: 11px !important;
  line-height: 1.4 !important;
  padding-left: 16px !important;
}

.promo-steps li {
  margin-bottom: 4px !important;
}
/* Premium FREE Badge - Gold Frame */
.free-badge-premium {
    display: inline-block;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #FFD700;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border: 2px solid #FFD700;
    border-radius: 6px;
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.4),
        0 0 20px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    position: relative;
    animation: subtleGlow 2s ease-in-out infinite;
}

/* Light theme version */
body.light-theme .free-badge-premium {
    color: #B8860B;
    background: linear-gradient(135deg, #FFF9E6 0%, #FFFAED 100%);
    border: 2px solid #DAA520;
    box-shadow:
        0 0 10px rgba(218, 165, 32, 0.3),
        0 0 20px rgba(218, 165, 32, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
}

/* Subtle glow animation */
@keyframes subtleGlow {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(255, 215, 0, 0.4),
            0 0 20px rgba(255, 215, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow:
            0 0 15px rgba(255, 215, 0, 0.6),
            0 0 30px rgba(255, 215, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

/* Light theme animation */
body.light-theme .free-badge-premium {
    animation: subtleGlowLight 2s ease-in-out infinite;
}

@keyframes subtleGlowLight {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(218, 165, 32, 0.3),
            0 0 20px rgba(218, 165, 32, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    50% {
        box-shadow:
            0 0 15px rgba(218, 165, 32, 0.5),
            0 0 30px rgba(218, 165, 32, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
}