:root{
  --rgf-bg:#f8fafc;
  --rgf-primary:#0b3f8a;
  --rgf-text:#1f2937;
  --rgf-muted:#6b7280;
  --bs-primary:#0b3f8a;
  --bs-primary-rgb:11,63,138;
}
body{
  background-color: var(--rgf-bg);
  color: var(--rgf-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.navbar-brand{
  letter-spacing:.2px;
}
.card{
  border-radius: .75rem;
  box-shadow: 0 6px 16px rgba(17,24,39,.06);
}
.card-title{
  font-weight:600;
}
.feature-icon{
  width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;background-color:#e7f0ff;color:var(--rgf-primary);
}
.price-badge{
  font-weight:700;color:var(--rgf-primary);font-size:1.05rem;
}
.footer-clean{
  background:#ffffff;
}
.hero-slide{
  min-height: 360px;
  background-position: center;
  background-size: cover;
  border-radius: .75rem;
}
.hero-slide-img{
  max-height: 420px;
  object-fit: cover;
}
.hero-caption{
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.event-card-img{
  max-height: 180px;
  object-fit: cover;
}
.register-hero-img{
  max-height: 280px;
  object-fit: cover;
  width: 100%;
  display: block;
}
.event-card{
  transition: box-shadow .2s ease, transform .2s ease;
  cursor: pointer;
}
.event-card:hover{
  box-shadow: 0 10px 24px rgba(17,24,39,.12);
  transform: translateY(-1px);
}
.price-label{
  font-size:.85rem;color:var(--rgf-muted);
}

/* Event Detail Professional Layout */
.event-detail-wrapper {
  background: var(--rgf-bg);
  min-height: 100vh;
}
.event-detail-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: 2fr 1.1fr; /* Slightly wider sidebar */
  gap: 48px;
  align-items: start;
}
.event-hero{
  position: relative;
  height: 480px; /* Taller hero */
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}
.event-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.event-hero:hover img {
  transform: scale(1.02);
}
.event-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,0) 100%);
}
.event-hero-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px;
  z-index: 10;
}
.event-right{
  position: sticky;
  top: 100px;
  z-index: 50;
}
.sticky-panel{
  transition: all 0.3s ease;
}
.alert-soft-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
  border-radius: 0.5rem;
}

.hover-scale-sm {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-scale-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
.ls-1 {
  letter-spacing: 1px;
}
/* Primary theme overrides (maroon) */
.bg-primary{background-color: var(--bs-primary) !important;}
.text-primary{color: var(--bs-primary) !important;}
.border-primary{border-color: var(--bs-primary) !important;}
.btn-primary{background-color: var(--bs-primary);border-color: var(--bs-primary);}
.btn-primary:hover{background-color: #09336f;border-color:#09336f;}
.btn-outline-primary{color: var(--bs-primary);border-color: var(--bs-primary);}
.btn-outline-primary:hover{background-color: var(--bs-primary);border-color: var(--bs-primary);color:#fff;}
.badge.bg-primary{background-color: var(--bs-primary) !important;}
.bg-primary-subtle{background-color:#e4edff !important;color: var(--bs-primary) !important;}
.link-primary{color: var(--bs-primary) !important;}
.navbar-dark.bg-primary{background-color: var(--bs-primary) !important;}
#xs-featured, #xs-paid, #xs-free {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
#xs-featured::-webkit-scrollbar,
#xs-paid::-webkit-scrollbar,
#xs-free::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.category-tile{
  position: relative;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(17,24,39,.06);
}
.category-tile .ct-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.75);
  transform: none !important;
  transition: none !important;
}
.category-tile:hover .ct-bg{ transform: none; }
.category-tile .ct-label{
  position: absolute;
  left: 12px;
  bottom: 10px;
  right: 12px;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 991px){
  .event-detail-container{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .event-hero {
    height: 360px;
  }
  .event-right{
    position: static;
    order: 2; /* Ensure it stays below if we change order logic */
  }
}