/* ============================
   BUSINESS HEADER
============================ */
.business-header{
  position:relative;
  padding:4rem 0 2.5rem;
  background:
    radial-gradient(circle at top left,
      rgba(250,204,21,.12),
      transparent 30%),
    radial-gradient(circle at top right,
      rgba(37,99,235,.10),
      transparent 30%),
    var(--card);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}

.business-header::after{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter:blur(2px);
  pointer-events:none;
}

.business-header .container{
  position:relative;
  z-index:2;
  max-width:1000px;
}

.business-header h1{
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  margin-bottom: .75rem;
}

.business-meta {
  font-size: 1.05rem;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* ============================
   MAIN CONTENT LAYOUT
============================ */
.business-content {
  padding: 3rem 0;
}


.business-content .container{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:2rem;
  align-items: flex-start;
}
/* ============================
   BUSINESS INFO
============================ */
.business-info h2 {
  margin-bottom: 1rem;
  letter-spacing: .0.03em;
  font-size: 1.8rem;
}

.business-info h3 {
  margin-top: 2rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .75rem;
  opacity: .8;
  font-size: 1.15rem;
}

.business-contact li,
.business-hours li{
  padding:.85rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.business-contact li:last-child,
.business-hours li:last-child{
  border-bottom:none;
}

/* ============================
   SIDEBAR
============================ */
.business-sidebar {
  position: sticky;
  top: 100px; /* keeps sidebar visible on scroll */
}

.business-sidebar .business-card{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.02)
    );
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
  padding:1.5rem;
  border-radius:24px;
  box-shadow:
    0 10px 35px rgba(0,0,0,.14);
  margin-bottom:1.5rem;
}

.business-sidebar h3 {
  margin-bottom: .5rem;
}

/* ============================
   BADGES
============================ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.45rem .8rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);
}

.badge-verified {
  background: #facc15;
  color: #111;
}

.badge-claimed {
  background: #2563eb;
  color: #fff;
}

/* ============================
   CLAIMED MESSAGE
============================ */
.claimed-message {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--text-soft);
}

.business-contact,
.business-hours{
  list-style:none;
  padding:0;
  margin:0;
}

/* ============================
   RESPONSIVE
============================ */
@media (max-width: 900px) {
  .business-content .container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .business-sidebar {
    position: static;
  }
}

/* ============================
   RELATED BUSINESSES
============================ */
.business-related {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
}

.related-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.related-card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.02)
    );
  border:1px solid rgba(255,255,255,.06);
  padding:1.4rem;
  border-radius:24px;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
  box-shadow:
    0 8px 25px rgba(0,0,0,.12);
}

.related-card:hover{
  transform:translateY(-6px);
  border-color:rgba(250,204,21,.35);
  box-shadow:
    0 18px 45px rgba(0,0,0,.22);
}

.related-card h3 {
  margin-bottom: .4rem;
  font-size: 1.1rem;
}
/* =========================
   SHARE POPUP
========================= */

.share-popup{
position:fixed;
left:50%;
bottom:20px;
transform:translateX(-50%) translateY(120%);
width:calc(100% - 2rem);
max-width:420px;
padding:1.25rem;
border-radius:18px;
background:#0f172a;
color:#fff;
box-shadow:0 20px 50px rgba(0,0,0,.35);
z-index:5000;
transition:transform .35s ease;
}

.share-popup.show{
transform:translateX(-50%) translateY(0);
}

.share-popup h3{
font-size:1.2rem;
margin-bottom:.5rem;
}

.share-popup p{
font-size:.95rem;
color:rgba(255,255,255,.8);
margin-bottom:1rem;
}

.share-popup-btn{
width:100%;
padding:.9rem 1rem;
border:none;
border-radius:12px;
background:linear-gradient(135deg,#facc15,#f97316);
font-weight:700;
cursor:pointer;
color:#0f172a;
}

.share-popup-close{
position:absolute;
top:10px;
right:12px;
font-size:1.5rem;
color:#fff;
cursor:pointer;
background:none;
border:none;
line-height:1;
}
.biz-logo{
  width:120px;
  height:120px;
  border-radius:28px;
  background:#fff;
  padding:12px;
  margin-bottom:1rem;
  transition:transform .2s ease;
}

.biz-logo:hover{
  transform:scale(1.05);
}

#galleryWrapper {
  position: relative;
  margin-top: 20px;
}

#galleryScroller img{
  width:100%;
  max-width:360px;
  height:240px;
  object-fit:cover;
  border-radius:18px;
  scroll-snap-align:center;
  flex-shrink:0;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
  box-shadow:
    0 10px 25px rgba(0,0,0,.18);
}

#galleryScroller img:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:
    0 18px 40px rgba(0,0,0,.28);
}

#galleryCounter {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}
.badge-waste{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#14532d;
  color:#fff;
  padding:6px 12px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  margin-left:8px;
}

.business-content{
  position:relative;
   overflow:hidden;
}

.business-content::before{
  content:"";
  position:absolute;
  top:0;
  right:-0px;
  width:420px;
  height:420px;
  background:
    radial-gradient(
      circle,
      rgba(250,204,21,.08),
      transparent 70%
    );
  pointer-events:none;
}
html,
body{
  overflow-x:hidden;
}

.business-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0;
  font-size: .85rem; /* Smaller font */
  font-weight: 700;
  color: #1E293B; /* Dark text for high contrast */
  background: #F1F5F9; /* Clean, light-grey background */
  padding: .35rem .75rem; /* Tighter padding */
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}


.quick-actions{
  display:flex;
  gap:.75rem;
  margin-bottom:1.5rem;
  flex-wrap:wrap;
}

.qa-btn{
  flex:1;
  text-align:center;
  padding:.9rem 1rem;
  border-radius:14px;
  background:rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.25);
  color:var(--text);
  font-weight:600;
  text-decoration:none;
}
.related-thumb{
  height:90px;
  border-radius:14px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  margin-bottom:.75rem;
}
.business-info h2{
  font-size:2rem;
}

.business-info p,
.business-contact li{
  font-size:1.05rem;
  line-height:1.7;
}
#businessCategoryInline,
#businessTownInline {
  opacity: 0;
  transform: translateY(4px);
  transition: all .3s ease;
}

.loaded #businessCategoryInline,
.loaded #businessTownInline {
  opacity: 1;
  transform: translateY(0);
}