/*
Theme Name: GP Business Listings
Template: generatepress
Description: Simple business listing theme (beginner friendly)
Author: Nazim Khan
Version: 1.0
*/

/* =========================
   GLOBAL STYLES
   ========================= */

body {
  background: white;
  font-family: Arial, sans-serif;
}





/* =========================
   LISTING CARD DESIGN
   ========================= */

.listing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.listing-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.listing-image img {
  width: 100%;
  border-radius: 8px;
}

.listing-title {
  margin: 10px 0 5px;
  font-size: 16px;
}

.listing-meta {
  font-size: 13px;
  color: #555;
}


/* =========================
   SEARCH FILTER BAR
   ========================= */

.listing-search form {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
}

.listing-search input,
.listing-search select {
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.listing-search button {
  background: #0073aa;
  color: #fff;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
}


/* =========================
   SINGLE LISTING GALLERY
   ========================= */

.listing-gallery {
  margin-bottom: 25px;
}

.gallery-main img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 6px;
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.gallery-thumbs img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ddd;
}




/* =========================
   LIGHTBOX
   ========================= */

.lightbox-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 80%; height: 80%;
  background: rgba(0,0,0,0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  padding: 10px;
}

.lightbox-close { top: 20px; right: 30px; }
.lightbox-prev  { left: 30px; }
.lightbox-next  { right: 30px; }







.listing-featured img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}





/* Blue Add Free Listing Menu */
.menu-item.add-free a{
    color:red !important;
	font-weight:600;
}

.menu-item.add-free a:hover{
    color:blue !important;
	font-weight:600;
}


/* ======= RESPONSIVE LISTING GRID ======= */

.listing-grid{
  display:grid;
  gap:25px;
  grid-template-columns: repeat(4,1fr);}

/* Tablet */
@media(max-width:992px){  .listing-grid{      grid-template-columns: repeat(3,1fr);  }}

/* Mobile Big */
@media(max-width:768px){  .listing-grid{      grid-template-columns: repeat(1,1fr);  }}




/* ========================
   SEARCH BAR RESPONSIVE
======================== */

.listing-search-form{
    display:flex;
    gap:10px;
    margin-bottom:25px;
    align-items:center;}

.listing-search-form input,
.listing-search-form select{
    height:42px;}

/* MOBILE DESIGN */
@media(max-width:768px){
  .listing-search-form{
      flex-direction:column;
      gap:12px;
      align-items:stretch;  }

  .listing-search-form input,
  .listing-search-form select,
  .listing-search-form button{
      width:100%;
      height:45px;  }}







@media (max-width: 768px){

    /* Main content width fix */
    .site-content,
    .inside-article,
    .container,
    .site-main,
    #content {
        padding-left: 1px !important;
        padding-right: 1px !important;
  
    }

    /* Search box container ko full width */
    .listing-search-form{
        width:100%;
    }
}