/* JGate SA site preview 0.1.0: loaded only for administrators in preview mode. Uses the site's own palette (--gold #cfab3e, #111) and fonts. */

/* Project status badges */
#jgate-reference .jg-completed.jgsp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jgsp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  animation: jgsp-pulse 1.6s ease-in-out infinite;
}
/* Active projects: subtle green pulse. Completed projects: static check icon, no pulse. */
.jgsp-dot.is-active { background: #2ecc71; }
.jgsp-check { width: 13px; height: 13px; flex: none; color: #2ecc71; }
@keyframes jgsp-pulse {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 204, 113, .55); }
  70% { opacity: .55; box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
@media (prefers-reduced-motion: reduce) { .jgsp-dot { animation: none; } }

/* Status label sits directly on the photo: no gold box, readable via shadow */
#jgate-reference .jg-completed.jgsp-status {
  background: transparent !important;
  color: #fff !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .6);
}
#jgate-reference .jg-completed.jgsp-status { outline: 0 !important; }
/* Completed: green check with a soft green pulse (never red) */
#jgate-reference .jg-completed.jgsp-status .jgsp-check { animation: jgsp-check-pulse 1.6s ease-in-out infinite; }
@keyframes jgsp-check-pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)) drop-shadow(0 0 0 rgba(46, 204, 113, 0)); }
  50% { opacity: .6; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)) drop-shadow(0 0 5px rgba(46, 204, 113, .9)); }
}
@media (prefers-reduced-motion: reduce) { #jgate-reference .jg-completed.jgsp-status .jgsp-check { animation: none; } }
#jgate-reference .jg-completed.jgsp-status .jgsp-dot { box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }

/* Header: "Contact us" button removed (contact stays in the top bar, mobile bar and menu pages) */
#jgate-reference .rg-header a.rg-btn[href*="/contact"] { display: none !important; }

/* "Request a quote" buttons removed from heroes and service pages (owner request); calls and WhatsApp stay */
#jgate-reference .rg-slide-inner a.rg-btn[href$="/contact/"],
#jgate-reference .mb-actions a[href="#marble-quote"],
#jgate-reference .rg-detail a.rg-btn[href$="/contact/"] { display: none !important; }

/* Top bar slogan: centred on the whole bar */
.jgsp-slogan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: inherit; /* banner is gold with dark text */
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.jgsp-slogan span[lang="en"] { font-family: RGEnglish, Arial, sans-serif; letter-spacing: .3px; }
.jgsp-slogan i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: none; opacity: .6; }
@media (min-width: 901px) {
  #rg-banner .jg-cb { position: relative; }
  .jgsp-slogan { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 900px) {
  #rg-banner.jg-cb-ready { height: auto !important; }
  #rg-banner .jg-cb { flex-wrap: wrap; row-gap: 2px; }
  .jgsp-slogan { order: 3; flex-basis: 100%; font-size: 11px; }
}

/* Kansara card placeholder until real photos arrive */
.jgsp-photo-pending {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1b1b1b, #262016);
  color: #cfab3e;
  font-size: 13px;
  border-bottom: 1px solid #ffffff19;
}

/* Hero headline accent */
#jgate-reference .jgsp-gold { color: #cfab3e; }

/* Project gallery as a sliding carousel */
.jgsp-slider-wrap { position: relative; }
#jgate-reference .rg-project-gallery.jgsp-slider {
  display: flex !important;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 12px;
}
#jgate-reference .rg-project-gallery.jgsp-slider::-webkit-scrollbar { display: none; }
#jgate-reference .rg-project-gallery.jgsp-slider > .rg-gallery-photo {
  display: block !important;
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}
#jgate-reference .rg-project-gallery.jgsp-slider img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.jgsp-slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #111c;
  color: #cfab3e;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
}
.jgsp-prev { right: 12px; }
.jgsp-next { left: 12px; }
.jgsp-slide-btn[hidden], .jgsp-slide-count[hidden] { display: none; }
.jgsp-slide-count {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #111c;
  color: #cfab3e;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 13px;
  font-family: RGEnglish, Arial, sans-serif;
  direction: ltr;
}
@media (max-width: 760px) { #jgate-reference .rg-project-gallery.jgsp-slider img { aspect-ratio: 4 / 3; } }
/* Kansara: photos in their natural shape, no box behind them, rounded corners, same height */
#jgate-reference [data-page="project/kansara"] .rg-project-gallery.jgsp-slider { background: transparent; border-radius: 0; }
#jgate-reference [data-page="project/kansara"] .rg-project-gallery.jgsp-slider > .rg-gallery-photo {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  position: relative;
  background: transparent !important;
  border: 0;
  padding: 0;
  box-shadow: none;
}
#jgate-reference [data-page="project/kansara"] .rg-project-gallery.jgsp-slider img {
  aspect-ratio: auto;
  width: auto;
  height: min(70vh, 620px);
  object-fit: initial;
  border-radius: 16px;
}

/* Hero contact buttons */
.jgsp-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }
.jgsp-hero-actions .rg-btn.jgsp-ghost {
  background: transparent;
  color: #cfab3e;
  border: 1px solid #cfab3e;
}

/* Google rating block */
.jgsp-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  text-align: center;
}
.jgsp-rating-score { font-size: 46px; line-height: 1; color: #cfab3e; font-family: RGEnglish, Arial, sans-serif; }
.jgsp-stars { display: inline-flex; gap: 3px; color: #cfab3e; }
.jgsp-stars svg { width: 20px; height: 20px; }
.jgsp-rating small { display: block; opacity: .75; margin-top: 6px; }
.jgsp-admin-note {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: #e74c3c;
  border: 1px dashed #e74c3c;
  padding: 2px 8px;
  border-radius: 6px;
}

/* Service page additions */
.jgsp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.jgsp-steps > div { border: 1px solid #ffffff19; border-radius: 10px; padding: 16px; }
.jgsp-steps b { display: block; color: #cfab3e; font-family: RGEnglish, Arial, sans-serif; font-size: 22px; margin-bottom: 6px; }
.jgsp-faq details { border-bottom: 1px solid #ffffff19; padding: 12px 0; }
.jgsp-faq summary { cursor: pointer; font-weight: 600; }
.jgsp-faq p { margin: 8px 0 0; opacity: .85; }
@media (max-width: 760px) { .jgsp-steps { grid-template-columns: 1fr 1fr; } }

/* Mobile sticky contact bar */
.jgsp-mbar { display: none; }
@media (max-width: 768px) {
  .jgsp-mbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 9990;
    background: #111;
    border-top: 1px solid #cfab3e;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .jgsp-mbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border-radius: 7px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
  }
  .jgsp-mbar a svg { width: 18px; height: 18px; }
  .jgsp-mbar .jgsp-call { background: #cfab3e; color: #111 !important; }
  .jgsp-mbar .jgsp-wa { background: transparent; color: #cfab3e !important; border: 1px solid #cfab3e; }
  body.jgsp-has-mbar { padding-bottom: 66px; }
  body.jgsp-has-mbar .rg-float { display: none !important; }
  body.jgsp-has-mbar #rg-top { bottom: 78px !important; }
}