/* General Styles */
.account-heading { font-size: 2.5rem; }
.label-strong {color: #1a1a1a;font-weight: 600;}
.account-img { width: 35vw; max-width: 120px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; }
@media (min-width: 576px) {.account-img { width: 120px;}.profile-upload-overlay {font-size: 0.75rem;}}
a { text-decoration: none; }
a.article-title:hover { color: #428bca; text-decoration: none; }
.article-content { white-space: pre-line; }
.article-img { height: 65px; width: 65px; margin-right: 16px; }
.article-metadata { padding-bottom: 1px; margin-bottom: 4px; border-bottom: 1px solid #e3e3e3; line-height: 1.2; }
.article-metadata a:hover { color: #333; text-decoration: none; }
.article-metadata p { margin-top: 0.25em; margin-bottom: 0.25em; }
.article-svg { width: 25px; height: 25px; vertical-align: middle; }
.article-title { color: #444444; }
.bg-steel { background-color: #5f788a; }
body { background: #fafafa; color: #333333; margin-top: 5rem; font-family: Verdana, sans-serif;}
.button-link { display: inline-block; padding: 4px 4px; background-color: #56575a; color: white; border-radius: 4px; text-decoration: none;} /* Includes text-decoration */
.button-link:hover { background-color: #c8f55f; }
.content-section { background: #ffffff; padding: 10px 20px; border: 1px solid #dddddd; border-radius: 3px; margin-bottom: 20px; }
div.example { background-color: lightgrey; padding: 20px; }
h1, h2, h3, h4, h5, h6 { color: #444444; }
img { vertical-align: middle; }
.site-header .navbar-nav .nav-link { color: #cbd5db; }
.site-header .navbar-nav .nav-link.active { font-weight: 500; }
.site-header .navbar-nav .nav-link:hover { color: #ffffff; }
.navbar { border-bottom: none !important; }
@media print {
    .no-print {display: none !important;}
    .receipt-section {page-break-inside: avoid;}
    body {background: white !important;}}


/* Business listing slideshow: use .program-slideshow-scope (shared with program detail) */

/* Media Queries */
@media screen and (max-width: 600px) { div.example { font-size: 30px; } }
@media screen and (min-width: 601px) { div.example { font-size: 80px; } }

/* ===================================================================
   IMAGE BUTTON STYLING
   ===================================================================
   Styles for images that act as buttons with hover/click feedback.
   Used in: home.html, category.html, business_list.html
   =================================================================== */

/* Primary business images (home.html) - Large business profile images */
.imagewithcaption { 
  display: block; 
  margin: 0 auto; 
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.image-container a {
  display: inline-block;
  transition: all 0.2s ease;
}
.image-container a:hover .imagewithcaption {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}
.image-container a:active .imagewithcaption {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  opacity: 0.85;
}
.image-container {
  text-align: center; 
  margin-bottom: 1px; 
  padding-bottom: 1px; 
}

/* Category and subcategory image links (category.html) */
.category-link, .subcategory-link {
  display: inline-block;
  transition: all 0.2s ease;
}
.category-link:hover .imagewithcaption,
.subcategory-link:hover .imagewithcaption {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}
.category-link:active .imagewithcaption,
.subcategory-link:active .imagewithcaption {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  opacity: 0.85;
}

/* Secondary image buttons (phone, WhatsApp, crow icons) - home.html, business_list.html */
div p a img {
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  padding: 2px;
  background: rgba(255, 255, 255, 0.1);
}
div p a:hover img {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
}
div p a:active img {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
}

/* Navigation icon button styling (Bootstrap Icons) - home.html, business_list.html */
div p a i.bi-geo-alt-fill {
  transition: all 0.2s ease;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  background: rgba(66, 139, 202, 0.1);
}
div p a:hover i.bi-geo-alt-fill {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  background: rgba(66, 139, 202, 0.2);
}
div p a:active i.bi-geo-alt-fill {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
}

/* ===================================================================
   BUTTON STYLING - Bootstrap Button Classes
   ===================================================================
   Custom styling for Bootstrap button classes with gradient backgrounds
   and interactive feedback. All buttons have consistent hover/active states.
   Used in: business_list.html, business_order_detail.html, and other pages
   =================================================================== */

/* PRIMARY BUTTONS - Purple gradient (main action buttons)
   Examples: "Add to cart", "Book Appointment", "Mark Packed", "Confirm" */
.btn-primary,
button.btn-primary,
a.btn-primary,
.btn.btn-primary,
button.btn.btn-primary,
a.btn.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.btn.btn-primary:hover,
button.btn.btn-primary:hover,
a.btn.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  text-decoration: none;
}
.btn-primary:active,
button.btn-primary:active,
a.btn-primary:active,
.btn.btn-primary:active,
button.btn.btn-primary:active,
a.btn.btn-primary:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
}

/* SECONDARY BUTTONS - Gray gradient (secondary actions)
   Examples: "Details", "Delete", "Cancel", "Mark Paid" */
.btn-secondary,
button.btn-secondary,
a.btn-secondary,
.btn.btn-secondary,
button.btn.btn-secondary,
a.btn.btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
.btn-secondary:hover,
button.btn-secondary:hover,
a.btn-secondary:hover,
.btn.btn-secondary:hover,
button.btn.btn-secondary:hover,
a.btn.btn-secondary:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
  color: white !important;
  text-decoration: none;
}
.btn-secondary:active,
button.btn-secondary:active,
a.btn-secondary:active,
.btn.btn-secondary:active,
button.btn.btn-secondary:active,
a.btn.btn-secondary:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
}

/* SUCCESS BUTTONS - Green gradient (positive actions)
   Examples: "Mark Delivered", "Complete", "Approve" */
.btn-success,
button.btn-success,
a.btn-success,
.btn.btn-success,
button.btn.btn-success,
a.btn.btn-success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover,
.btn.btn-success:hover,
button.btn.btn-success:hover,
a.btn.btn-success:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  color: white !important;
  text-decoration: none;
}
.btn-success:active,
button.btn-success:active,
a.btn-success:active,
.btn.btn-success:active,
button.btn.btn-success:active,
a.btn.btn-success:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
}

/* DANGER BUTTONS - Red gradient (destructive/critical actions)
   Examples: "Cancel Order", "Delete", "Remove" */
.btn-danger,
button.btn-danger,
a.btn-danger,
.btn.btn-danger,
button.btn.btn-danger,
a.btn.btn-danger {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
.btn-danger:hover,
button.btn-danger:hover,
a.btn-danger:hover,
.btn.btn-danger:hover,
button.btn.btn-danger:hover,
a.btn.btn-danger:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  color: white !important;
  text-decoration: none;
}
.btn-danger:active,
button.btn-danger:active,
a.btn-danger:active,
.btn.btn-danger:active,
button.btn.btn-danger:active,
a.btn.btn-danger:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
}

/* LIGHT BUTTONS - Light gray/neutral (informational actions)
   Examples: "Generate Invoice", "View Details", "More Info" */
.btn-light,
button.btn-light,
a.btn-light,
.btn.btn-light,
button.btn.btn-light,
a.btn.btn-light {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  color: #212529 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
.btn-light:hover,
button.btn-light:hover,
a.btn-light:hover,
.btn.btn-light:hover,
button.btn.btn-light:hover,
a.btn.btn-light:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  color: #212529 !important;
  text-decoration: none;
}
.btn-light:active,
button.btn-light:active,
a.btn-light:active,
.btn.btn-light:active,
button.btn.btn-light:active,
a.btn.btn-light:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  opacity: 0.85;
}

/* ===================================================================
   CUSTOM BUTTON LINK STYLING
   ===================================================================
   Custom button-link class used in home.html, category.html
   =================================================================== */

/* Category buttons container (home.html) */
.category-buttons { 
  display: flex; 
  justify-content: center; 
  gap: 5px; 
  margin-top: 0px; 
}

/* Category buttons - styled as primary buttons (home.html) */
.category-buttons .button-link {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: 500;
  border: none;
}
.category-buttons .button-link:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.category-buttons .button-link:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
}

/* Category page specific - single button in category-buttons (category.html) */
.grid-item .category-buttons a.button-link {
  display: block;
  text-align: center;
  width: 100%;
}

/* Business listing page: business name styled like home page buttons */
.business-listing-title {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  font-weight: 500;
}

/* Legend button styling (home.html) */
legend a.button-link {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: 500;
}
legend a.button-link:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
}
legend a.button-link:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
}
legend {
  text-align: center;
}

/* Enrollments list – /business/programs/<id>/enrollments */
.enrollments-list-page .enrollments-list-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.enrollments-list-page .enrollments-list-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.enrollments-list-page .enrollments-list-banner-title {
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.enrollments-list-page .enrollments-list-banner-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.enrollments-list-page .enrollments-list-banner .enrollments-list-banner-back,
.enrollments-list-page .enrollments-list-banner .btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.8);
}
.enrollments-list-page .enrollments-list-banner .enrollments-list-banner-back:hover,
.enrollments-list-page .enrollments-list-banner .btn:hover {
  color: #0d6efd;
  background-color: #fff;
  border-color: #fff;
}

.enrollments-list-page .enrollments-list-below-banner {
  min-height: 0;
}

.enrollments-list-page .enrollments-list-card {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.enrollments-list-page .enrollments-list-card .card-body {
  padding: 1rem 1.1rem;
}

.enrollments-list-page .enrollments-list-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.enrollments-list-page .enrollments-list-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
}

.enrollments-list-page .enrollments-list-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.enrollments-list-page .enrollments-list-meta-row:last-child {
  margin-bottom: 0;
}

.enrollments-list-page .enrollments-list-meta-label {
  flex-shrink: 0;
  color: #212529;
  font-weight: 600;
  min-width: 3.5em;
}

.enrollments-list-page .enrollments-list-meta-value {
  min-width: 0;
  word-break: break-word;
}

.enrollments-list-page .enrollments-list-meta-value a.btn {
  margin-right: 0.35rem;
  vertical-align: middle;
}

.enrollments-list-page .enrollments-list-phone-number {
  display: block;
}

.enrollments-list-page .enrollments-list-phone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.enrollments-list-page .enrollments-list-call-btn {
  margin-right: 0;
}

.enrollments-list-page .enrollments-list-whatsapp-btn {
  margin-right: 0;
}

.enrollments-list-page .enrollments-list-ref {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: ui-monospace, monospace;
  padding: 0.2rem 0.5rem;
  background: #000;
  color: #fff;
  border-radius: 6px;
  border: 1px solid #000;
}

.enrollments-list-page .enrollments-list-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.enrollments-list-page .enrollments-list-fee {
  margin-bottom: 0.5rem;
}

.enrollments-list-page .enrollments-list-buttons {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e9ecef;
  gap: 0.4rem;
}

/* ===================================================================
   PROGRAM DETAIL – /program/<id> and /business/programs/<id>
   =================================================================== */

.program-detail-page {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.program-slideshow-scope {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.program-detail-page .program-detail-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.program-detail-page .program-detail-banner-title {
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: #fff;
}

.program-detail-page .program-detail-banner-actions .btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.program-detail-page .program-detail-banner-actions .btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* Slideshow: program public detail + business listing About */
.program-slideshow-scope .program-slideshow-wrapper {
  margin-bottom: 1.5rem;
}

.program-slideshow-scope .program-slideshow-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 420px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.program-slideshow-scope .program-slideshow-inner .mySlides {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.program-slideshow-scope .program-slideshow-inner .mySlides.active {
  opacity: 1;
  z-index: 1;
}

.program-slideshow-scope .program-slideshow-inner .numbertext {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  color: #555;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  z-index: 2;
}

.program-slideshow-scope .program-slideshow-inner .numbertext.single-slide {
  visibility: hidden;
}

.program-slideshow-scope .program-slideshow-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex: 1;
}

.program-slideshow-scope .program-image-caption {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  margin: 0;
  font-size: 0.8rem;
  color: #555;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
}

/* Business listing About tab: title over images */
.program-slideshow-scope .business-slideshow-title-overlay {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.65rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
}

.program-slideshow-scope .business-slideshow-title-overlay h4 {
  color: #fff;
  font-size: clamp(0.95rem, 3.2vw, 1.2rem);
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.program-slideshow-scope .program-slideshow-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.program-slideshow-scope .program-slideshow-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #bbb;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.program-slideshow-scope .program-slideshow-dots .dot:hover,
.program-slideshow-scope .program-slideshow-dots .dot:focus {
  background-color: #888;
  outline: none;
}

.program-slideshow-scope .program-slideshow-dots .dot.active {
  background-color: #333;
}

.program-slideshow-scope .program-slideshow-meta {
  text-align: center;
  margin-top: 0.75rem;
}

/* Sections */
.program-detail-page .program-content-main {
  margin-top: 0.5rem;
}

.program-detail-page .program-section {
  margin-bottom: 1.25rem;
}

.program-detail-page .program-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #1a1a1a;
  margin-bottom: 0.35rem;
}

.program-detail-page .program-section-body {
  font-size: 0.95rem;
  color: #333;
}

/* Sanitized HTML in program long description (bleach allow-list) */
.program-long-description p,
.program-long-description ul,
.program-long-description ol { margin-bottom: 0.5rem; }
.program-long-description h1, .program-long-description h2, .program-long-description h3 { margin-top: 0.75rem; margin-bottom: 0.35rem; font-weight: 600; }
.program-long-description ul, .program-long-description ol { padding-left: 1.25rem; }

/* Schedule grid */
.program-detail-page .program-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.5rem 1rem;
}

.program-detail-page .schedule-day-card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  background: #fafafa;
}

.program-detail-page .schedule-day-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.program-detail-page .schedule-day-time {
  font-size: 0.85rem;
}

/* ===================================================================
   ENROLLMENT DETAIL – /my-enrollments/<id>
   =================================================================== */

.enrollment-detail-page .enrollment-detail-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.enrollment-detail-page .enrollment-detail-banner-title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.enrollment-detail-page .enrollment-detail-banner .btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.enrollment-detail-page .enrollment-detail-banner .btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* ===================================================================
   ENROLLMENT LIST – /my-enrollments
   =================================================================== */

.enrollment-list-page .enrollment-list-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.enrollment-list-page .enrollment-list-banner-title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.enrollment-list-page .enrollment-list-banner .btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.enrollment-list-page .enrollment-list-banner .btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.enrollment-list-page .enrollment-card-img-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f8f9fa;
  border-radius: 0.25rem 0.25rem 0 0;
}

@media (min-width: 768px) {
  .enrollment-list-page .enrollment-card-img-wrap {
    height: 220px;
    border-radius: 0.25rem 0 0 0.25rem;
  }
}

/* ===================================================================
   NEARBY PROGRAMS – /programs/nearby
   =================================================================== */

.nearby-programs-page .nearby-programs-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.nearby-programs-page .nearby-programs-banner-title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.nearby-programs-page .nearby-programs-banner-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.nearby-programs-page .nearby-programs-banner .btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.nearby-programs-page .nearby-programs-banner .btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* ===================================================================
   PROGRAMS LIST – /business/programs/list
   =================================================================== */

.programs-list-page .programs-list-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.programs-list-page .programs-list-banner-title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.programs-list-page .programs-list-banner-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.programs-list-page .programs-list-banner .btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.programs-list-page .programs-list-banner .btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.programs-list-page .programs-list-card {
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.programs-list-page .programs-list-card-title {
  word-break: break-word;
}

.programs-list-page .programs-list-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.programs-list-page .programs-list-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.programs-list-page .programs-list-field:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.programs-list-page .programs-list-field-label {
  align-self: flex-start;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.12);
  padding: 0.32rem 0.65rem 0.32rem 0.55rem;
  border-radius: 0.35rem;
  border-left: 3px solid var(--bs-primary);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.programs-list-page .programs-list-field-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bs-body-color);
  word-break: break-word;
  line-height: 1.45;
  padding-left: 0.15rem;
}

/* ===================================================================
   PROGRAM EDIT – /business/programs/<id>/edit
   =================================================================== */

.program-edit-page .program-edit-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.program-edit-page .program-edit-banner-title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.program-edit-page .program-edit-banner-actions .btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.program-edit-page .program-edit-banner-actions .btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* ===================================================================
   HELP & OFFERS – /menu/help-offers (Offers, How-to, Feedback)
   =================================================================== */

.help-offers-page .help-offers-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.help-offers-page .help-offers-banner-title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.help-offers-page .help-offers-banner .btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.help-offers-page .help-offers-banner .btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* ===================================================================
   BUSINESS PROFILE WIZARD – /business/profile
   =================================================================== */

.business-wizard-page .business-wizard-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.business-wizard-page .business-wizard-banner-title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.business-wizard-page .business-wizard-banner-step {
  font-size: 0.95rem;
  opacity: 0.95;
}

/* ===================================================================
   ENROLLMENT ATTENDANCE – /business/programs/<id>/enrollments/<id>/attendance
   =================================================================== */

.enrollment-attendance-page .enrollment-attendance-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.enrollment-attendance-page .enrollment-attendance-banner-title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.enrollment-attendance-page .enrollment-attendance-banner-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.enrollment-attendance-page .enrollment-attendance-banner .btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.enrollment-attendance-page .enrollment-attendance-banner .btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* ===================================================================
   PROGRAM ATTENDANCE BULK – /business/programs/<id>/attendance/bulk
   =================================================================== */

.program-attendance-bulk-page .program-attendance-bulk-banner {
  background: #0d6efd;
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.program-attendance-bulk-page .program-attendance-bulk-banner-title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.program-attendance-bulk-page .program-attendance-bulk-banner-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.program-attendance-bulk-page .program-attendance-bulk-banner .btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.program-attendance-bulk-page .program-attendance-bulk-banner .btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}
/* ============================================
   UNIVERSAL BUSINESS LISTING TAB STYLES
   ============================================ */

/* Make the tab bar horizontally scrollable on mobile */
#businessTabs {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

#businessTabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Tab buttons: cleaner, more modern look */
#businessTabs .nav-link {
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #555;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
}

#businessTabs .nav-link:hover {
  color: #000;
}

/* Active tab indicator */
#businessTabs .nav-link.active {
  color: #000;
  border-bottom: 2px solid #0d6efd; /* Bootstrap primary color */
  background: none;
}

/* Tab content spacing */
.tab-content {
  padding-top: 0.5rem;
}

/* Card consistency across tabs */
.card {
  border-radius: 8px;
}

.card img {
  border-radius: 8px 0 0 8px;
}

/* Slideshow dots */
.dot {
  height: 10px;
  width: 10px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: #0d6efd;
}

/* Business description spacing */
.business-listing-description {
  margin-top: 1rem;
  line-height: 1.5;
}

/* Owner toolbar spacing */
.owner-toolbar {
  margin-bottom: 1rem;
}

/* Make cards look good on mobile */
@media (max-width: 576px) {
  .card-body {
    padding: 0.75rem;
  }
  #businessTabs .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}