/* QOLIST minimal responsive styles */
:root{
  --primary:#ea580c; --primary-dark:#c2410c; --accent:#d4a017;
  --bg:#fffaf5; --card:#fff; --text:#1f2937; --muted:#6b7280;
  --border:#f1f5f9; --radius:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Poppins,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1140px;margin:0 auto;padding:0 16px}
h1,h2,h3{margin:.6em 0 .4em}
.muted{color:var(--muted);font-size:.9em}
.small{font-size:.8em}
.hidden{display:none !important}

/* Header */
.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:60px}
.brand{font-weight:800;font-size:1.3rem;color:var(--primary);display:flex;align-items:center;gap:8px}
.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.main-nav{display:flex;gap:16px;align-items:center}
.main-nav a{color:var(--text);font-weight:500;padding:8px}
.hamburger{display:none;background:none;border:none;font-size:24px}
@media(max-width:768px){
  .main-nav{display:none;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:#fff;padding:16px;border-bottom:1px solid var(--border)}
  body.nav-open .main-nav{display:flex}
  .hamburger{display:block}
}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:var(--radius);border:1px solid var(--border);background:#fff;color:var(--text);cursor:pointer;font-weight:600;font-size:.95rem}
.btn:hover{text-decoration:none;opacity:.95}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent}
.btn-danger{background:#b91c1c;color:#fff;border-color:#b91c1c}
.btn-whatsapp{background:#25d366;color:#fff;border-color:#25d366}
.btn-telegram{background:#229ED9;color:#fff;border-color:#229ED9}
.btn-call{background:#0ea5e9;color:#fff;border-color:#0ea5e9}
.btn-sm{padding:6px 12px;font-size:.85rem}

/* Hero — matches orange palette */
.hero{background:linear-gradient(135deg,#9a3412,#ea580c);color:#fff;border-radius:var(--radius);padding:32px 24px;margin:20px 0}
.hero .search-form{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;background:#fff;padding:10px;border-radius:var(--radius)}
.hero .search-form input,.hero .search-form select{padding:10px;border:1px solid var(--border);border-radius:8px}
.hero-cta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:768px){.hero .search-form{grid-template-columns:1fr}}

/* Category grid - UPDATED FOR BETTER IMAGES */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:16px 0}
.cat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;text-align:center;padding-bottom:12px;color:var(--text)}
.cat-card:hover{text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.cat-cover{
    height:180px; /* हाइट बढ़ा दी गई है */
    background-size:cover; 
    background-position:center; 
    background-repeat:no-repeat;
    background-color:#e5e7eb;
    width: 100%;
}
.cat-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* इमेज को खींचे बिना फिट करेगा */
}

/* Ad cards */
.ad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ad-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);overflow-x:auto;gap:14px;padding-bottom:8px}
.ad-card{position:relative;display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;color:var(--text)}
.ad-card:hover{text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.ad-card.premium{border:2px solid var(--accent)}
.ad-thumb{height:160px;background-size:cover;background-position:center;background-color:#e5e7eb}
.ad-body{padding:10px}
.ad-body h3{font-size:1rem;margin:.2em 0;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{color:var(--primary);font-weight:700}
.price.big{font-size:1.4rem}
.ribbon{position:absolute;top:8px;left:8px;background:var(--accent);color:#fff;font-size:.7rem;padding:3px 8px;border-radius:6px;font-weight:700;letter-spacing:.5px}
.ribbon-inline{display:inline-block;background:var(--accent);color:#fff;font-size:.7rem;padding:2px 6px;border-radius:6px;margin-left:6px}
.badge{position:absolute;top:8px;left:8px;background:#10b981;color:#fff;font-size:.7rem;padding:3px 8px;border-radius:6px;font-weight:700}

/* Ad detail */
.ad-detail{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin:20px 0}
@media(max-width:900px){.ad-detail{grid-template-columns:1fr}}
.gallery-main img{border-radius:var(--radius);width:100%;max-height:520px;object-fit:cover}
.gallery-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto}
.gallery-thumbs img{width:80px;height:60px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent}
.gallery-thumbs img.active{border-color:var(--primary)}
.attr{list-style:none;padding:0;color:var(--muted)}
.attr li{padding:4px 0;border-bottom:1px solid var(--border)}
.contact-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.safety{background:#fef3c7;border:1px solid #fcd34d;border-radius:var(--radius);padding:12px;margin-top:12px;font-size:.9rem}
.share{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;font-size:.9rem}
.breadcrumb{color:var(--muted);margin:14px 0;font-size:.9rem}

/* Forms */
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px;max-width:720px}
.form-card label{display:block;font-weight:600;font-size:.9rem}
.form-card input[type=text],.form-card input[type=email],.form-card input[type=password],
.form-card input[type=number],.form-card input[type=file],.form-card select,.form-card textarea{
  width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-size:1rem;margin-top:4px;background:#fff}
.form-card .check{display:flex;align-items:center;gap:6px;font-weight:400}
.form-card .check input[type=checkbox]{width:auto;margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:600px){.grid-2,.grid-3{grid-template-columns:1fr}}
.radio-row{display:flex;gap:16px;flex-wrap:wrap}
.captcha-box{background:#f1f5f9;padding:10px;border-radius:8px}
.captcha-box input{max-width:120px}
.qr-box{text-align:center;padding:16px;border:1px dashed var(--accent);border-radius:var(--radius);background:#fffbeb}
.qr-box img{max-width:200px;margin:0 auto}

/* Alerts */
.flash{padding:10px 14px;border-radius:8px;margin:10px 0}
.flash-success{background:#dcfce7;color:#166534}
.flash-error{background:#fee2e2;color:#991b1b}
.flash-info{background:#dbeafe;color:#1e40af}

/* Tables */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;margin-top:12px;font-size:.92rem}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.table th{background:#f1f5f9;font-weight:700}
.row-actions form{display:inline}
.row-actions button{background:transparent;border:1px solid var(--border);padding:4px 8px;border-radius:6px;cursor:pointer;margin:2px;font-size:.85rem}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center}
.stat span{display:block;color:var(--muted);font-size:.85rem}
.stat b{font-size:1.6rem;color:var(--primary)}

/* Pagination */
.pagination{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:24px 0}
.pagination a{padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:#fff}
.pagination a.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Footer */
.site-footer{background:#0f172a;color:#cbd5e1;padding:32px 0 12px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.site-footer h4{color:#fff;margin:0 0 8px}
.site-footer a{display:block;color:#cbd5e1;padding:3px 0;font-size:.9rem}
.footer-bottom{border-top:1px solid #1e293b;margin-top:20px;padding-top:12px;text-align:center;font-size:.85rem}

/* Admin */
.admin .container{max-width:1280px}
.admin-topbar{background:#0f172a;color:#fff;padding:8px 0}
.admin-topbar .brand,.admin-topbar .admin-nav a{color:#fff}
.admin-topbar .admin-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.admin-login{background:#0f172a}

/* Mobile */
@media(max-width:576px){
  .hero{padding:20px}
  .ad-thumb{height:220px}
  .cat-cover{height:140px} /* मोबाइल पर हाइट थोड़ी कम */
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
}
.lightbox.hidden{display:none !important}
.lb-img{
  max-width:90vw; max-height:85vh;
  border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.6);
  background:#111;
}
.lb-close,.lb-prev,.lb-next{
  position:absolute; background:rgba(255,255,255,.12); color:#fff;
  border:none; font-size:2rem; width:48px; height:48px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s; line-height:1;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.25)}
.lb-close{top:20px; right:20px; font-size:1.6rem}
.lb-prev{left:20px; top:50%; transform:translateY(-50%); font-size:2.4rem}
.lb-next{right:20px; top:50%; transform:translateY(-50%); font-size:2.4rem}
.lb-counter{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:.9rem; background:rgba(0,0,0,.5);
  padding:4px 12px; border-radius:20px;
}
@media(max-width:600px){
  .lb-prev{left:8px} .lb-next{right:8px}
  .lb-close{top:8px; right:8px}
  .lb-img{max-width:96vw; max-height:80vh}
}

/* ============ Contact Form (ad detail page) ============ */
.contact-form-wrap{
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.contact-form-wrap h3{
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.15rem;
  color: var(--text);
}
.contact-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cf-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px){
  .cf-grid{ grid-template-columns: 1fr; }
}
.cf-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}
.cf-field > span{
  display: block;
}
.cf-field input,
.cf-field textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.cf-field input:focus,
.cf-field textarea:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .15);
}
.cf-field textarea{
  resize: vertical;
  min-height: 90px;
}
.cf-captcha{
  margin: 4px 0;
}
.cf-captcha .captcha-box{
  background: #f1f5f9;
  padding: 12px 14px;
  border-radius: 8px;
}
.cf-captcha .captcha-box label{
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 6px;
  color: var(--text);
}
.cf-captcha .captcha-box input[type="number"]{
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .95rem;
  max-width: 140px;
}
.cf-submit{
  align-self: flex-start;
  padding: 11px 22px;
}

/* ============ Upgrade to Premium — amount highlight ============ */
.upgrade-amount-box{
  max-width: 520px;
  margin: 24px auto;
  padding: 20px 24px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  text-align: center;
}
.upgrade-amount-label{
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #92400e;
  margin-bottom: 4px;
}
.upgrade-amount-value{
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  margin: 6px 0;
}
.upgrade-amount-days{
  font-size: .9rem;
  color: #78350f;
}
.qr-box .qr-help{
  margin-top: 10px;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
}
.qr-box img{
  display: block;
  margin: 0 auto;
  max-width: 240px;
}

/* ============ Search Filter Bar (ads.php) ============ */
.search-filter-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.search-filter-bar {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr auto;
  gap: 12px;
  align-items: end;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filter-field label svg {
  color: var(--primary);
  flex-shrink: 0;
}

.filter-field input,
.filter-field select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-field input:focus,
.filter-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}

.filter-field input::placeholder {
  color: #9ca3af;
}

.filter-submit {
  padding: 11px 24px;
  font-size: 0.95rem;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Active filter chips */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.active-filters .muted {
  font-size: 0.85rem;
  font-weight: 600;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fed7aa;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.filter-chip:hover {
  background: #fed7aa;
  text-decoration: none;
}

.filter-chip b {
  font-weight: 600;
  opacity: 0.75;
}

.filter-chip span {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}

.filter-clear {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: underline;
  font-weight: 500;
}

.filter-clear:hover {
  color: var(--primary);
}

/* Responsive */
@media (max-width: 900px) {
  .search-filter-bar {
    grid-template-columns: 1fr 1fr;
  }
  .filter-submit {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .search-filter-bar {
    grid-template-columns: 1fr;
  }
  .filter-submit {
    width: 100%;
  }
  .filter-clear {
    margin-left: 0;
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }
}

/* Description section full width */
section.description {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 24px 0;
}
section.description h2 {
  margin-top: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

/* Force white text on Logout button in header */
.main-nav a.btn-primary,
.main-nav a.btn-primary:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Share Icons Styling */
.share-links {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%; 
    color: #ffffff !important; 
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s ease;
}

.share-btn:hover {
    transform: translateY(-3px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Brand Colors */
.share-btn.wa { background-color: #25D366; } 
.share-btn.fb { background-color: #1877F2; } 
.share-btn.tw { background-color: #000000; } 
.share-btn.cp { background-color: #6c757d; }