/* app/assets/stylesheets/application.css */

/*
 * Main SCSS file for the application
 * 
 * This file defines Bootstrap-compatible variables and imports all custom styles.
 * Bootstrap CSS is loaded via CDN in the layout, so we define our own variables
 * that match Bootstrap's design system.
 */
/*
 * Bootstrap Extensions and Customizations
 * 
 * This file contains custom Bootstrap extensions, mixins, and utility classes
 * that extend Bootstrap's functionality while maintaining consistency with
 * Bootstrap's design system and naming conventions.
 * 
 * Features:
 * - Custom button variants and sizes
 * - Enhanced card components
 * - Custom form styling
 * - Layout utilities
 * - Animation and transition mixins
 * - Color system extensions
 */
/* BEGIN: stylesheets/bootstrap_extensions.css */
/* BEGIN: stylesheets/branding.css */
/* BEGIN: stylesheets/components/_directory_profile.css */
/* BEGIN: stylesheets/overlay_themes.css */
:root {
  --bs-custom-primary: #0d6efd;
  --bs-custom-secondary: #6c757d;
  --bs-custom-success: #198754;
  --bs-custom-danger: #dc3545;
  --bs-custom-warning: #ffc107;
  --bs-custom-info: #0dcaf0;
  --bs-custom-light: #f8f9fa;
  --bs-custom-dark: #212529;
  --bs-custom-spacing-xs: 0.25rem;
  --bs-custom-spacing-sm: 0.5rem;
  --bs-custom-spacing-md: 1rem;
  --bs-custom-spacing-lg: 1.5rem;
  --bs-custom-spacing-xl: 3rem;
  --bs-custom-radius-sm: 0.25rem;
  --bs-custom-radius-md: 0.375rem;
  --bs-custom-radius-lg: 0.5rem;
  --bs-custom-radius-xl: 0.75rem;
  --bs-custom-radius-xxl: 1rem;
  --bs-custom-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-custom-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-custom-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-custom-shadow-xl: 0 2rem 4rem rgba(0, 0, 0, 0.2);
}

.btn-enhanced {
  color: #ffffff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-enhanced:hover {
  color: #ffffff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.btn-enhanced:focus {
  color: #ffffff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}

.btn-enhanced:active {
  color: #ffffff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-custom-blue {
  color: #ffffff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-custom-blue:hover {
  color: #ffffff;
  background-color: #0056b3;
  border-color: #0056b3;
}

.btn-custom-blue:focus {
  color: #ffffff;
  background-color: #0056b3;
  border-color: #0056b3;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}

.btn-custom-blue:active {
  color: #ffffff;
  background-color: #0056b3;
  border-color: #0056b3;
}

.btn-custom-green {
  color: #ffffff;
  background-color: #198754;
  border-color: #198754;
}

.btn-custom-green:hover {
  color: #ffffff;
  background-color: #1e7e34;
  border-color: #1e7e34;
}

.btn-custom-green:focus {
  color: #ffffff;
  background-color: #1e7e34;
  border-color: #1e7e34;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}

.btn-custom-green:active {
  color: #ffffff;
  background-color: #1e7e34;
  border-color: #1e7e34;
}

.btn-custom-red {
  color: #ffffff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-custom-red:hover {
  color: #ffffff;
  background-color: #c82333;
  border-color: #c82333;
}

.btn-custom-red:focus {
  color: #ffffff;
  background-color: #c82333;
  border-color: #c82333;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

.btn-custom-red:active {
  color: #ffffff;
  background-color: #c82333;
  border-color: #c82333;
}

.btn-custom-yellow {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-custom-yellow:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #e0a800;
}

.btn-custom-yellow:focus {
  color: #212529;
  background-color: #e0a800;
  border-color: #e0a800;
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

.btn-custom-yellow:active {
  color: #212529;
  background-color: #e0a800;
  border-color: #e0a800;
}

.btn-custom-purple {
  color: #ffffff;
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.btn-custom-purple:hover {
  color: #ffffff;
  background-color: #5a32a3;
  border-color: #5a32a3;
}

.btn-custom-purple:focus {
  color: #ffffff;
  background-color: #5a32a3;
  border-color: #5a32a3;
  box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.5);
}

.btn-custom-purple:active {
  color: #ffffff;
  background-color: #5a32a3;
  border-color: #5a32a3;
}

.btn-custom-orange {
  color: #ffffff;
  background-color: #fd7e14;
  border-color: #fd7e14;
}

.btn-custom-orange:hover {
  color: #ffffff;
  background-color: #e55a00;
  border-color: #e55a00;
}

.btn-custom-orange:focus {
  color: #ffffff;
  background-color: #e55a00;
  border-color: #e55a00;
  box-shadow: 0 0 0 0.25rem rgba(253, 126, 20, 0.5);
}

.btn-custom-orange:active {
  color: #ffffff;
  background-color: #e55a00;
  border-color: #e55a00;
}

.btn-custom-teal {
  color: #ffffff;
  background-color: #20c997;
  border-color: #20c997;
}

.btn-custom-teal:hover {
  color: #ffffff;
  background-color: #1aa179;
  border-color: #1aa179;
}

.btn-custom-teal:focus {
  color: #ffffff;
  background-color: #1aa179;
  border-color: #1aa179;
  box-shadow: 0 0 0 0.25rem rgba(32, 201, 151, 0.5);
}

.btn-custom-teal:active {
  color: #ffffff;
  background-color: #1aa179;
  border-color: #1aa179;
}

.btn-custom-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

.btn-custom-lg {
  padding: 0.5rem 1rem;
  font-size: 1.125rem;
  border-radius: 0.5rem;
}

.btn-custom-xl {
  padding: 1rem 2rem;
  font-size: 1.25rem;
  border-radius: 0.75rem;
}

.card-enhanced {
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.card-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

.card-enhanced .card-header {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  font-weight: 500;
}

.card-enhanced .card-footer {
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-hover {
  transition: transform 0.2s ease;
  cursor: pointer;
}

.card-hover:hover {
  transform: scale(1.02);
}

.card-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.form-control-enhanced {
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control-enhanced:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-floating-enhanced .form-control {
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
}

.form-floating-enhanced .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-floating-enhanced label {
  padding: 1rem 0.75rem;
}

.spacing-xs {
  margin: var(--bs-custom-spacing-xs);
}

.spacing-sm {
  margin: var(--bs-custom-spacing-sm);
}

.spacing-md {
  margin: var(--bs-custom-spacing-md);
}

.spacing-lg {
  margin: var(--bs-custom-spacing-lg);
}

.spacing-xl {
  margin: var(--bs-custom-spacing-xl);
}

.rounded-custom-sm {
  border-radius: var(--bs-custom-radius-sm) !important;
}

.rounded-custom-md {
  border-radius: var(--bs-custom-radius-md) !important;
}

.rounded-custom-lg {
  border-radius: var(--bs-custom-radius-lg) !important;
}

.rounded-custom-xl {
  border-radius: var(--bs-custom-radius-xl) !important;
}

.rounded-custom-xxl {
  border-radius: var(--bs-custom-radius-xxl) !important;
}

.shadow-custom-sm {
  box-shadow: var(--bs-custom-shadow-sm) !important;
}

.shadow-custom-md {
  box-shadow: var(--bs-custom-shadow-md) !important;
}

.shadow-custom-lg {
  box-shadow: var(--bs-custom-shadow-lg) !important;
}

.shadow-custom-xl {
  box-shadow: var(--bs-custom-shadow-xl) !important;
}

.z-0 {
  z-index: 0 !important;
}

.z-1 {
  z-index: 1 !important;
}

.z-2 {
  z-index: 2 !important;
}

.z-3 {
  z-index: 3 !important;
}

.z-n1 {
  z-index: -1 !important;
}

.z-auto {
  z-index: auto !important;
}

.z-dropdown {
  z-index: 1000 !important;
}

.z-sticky {
  z-index: 1020 !important;
}

.z-fixed {
  z-index: 1030 !important;
}

.z-modal-backdrop {
  z-index: 1040 !important;
}

.z-modal {
  z-index: 1050 !important;
}

.z-popover {
  z-index: 1060 !important;
}

.z-tooltip {
  z-index: 1070 !important;
}

.z-toast {
  z-index: 1080 !important;
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

.scale-hover {
  transition: transform 0.2s ease;
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@media (max-width: 576px) {
  .text-responsive-sm {
    font-size: 0.875rem;
  }
  .text-responsive-md {
    font-size: 1rem;
  }
  .text-responsive-lg {
    font-size: 1.125rem;
  }
}
@media (min-width: 768px) {
  .text-responsive-sm {
    font-size: 1rem;
  }
  .text-responsive-md {
    font-size: 1.25rem;
  }
  .text-responsive-lg {
    font-size: 1.5rem;
  }
}
.scroll-to-top-visible .dev-tools {
  bottom: 5rem !important;
}

.business-logo.logo-xs {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.25rem;
}

.business-logo.logo-sm {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 0.375rem;
}

.business-logo.logo-md {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
}

.business-logo.logo-lg {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 0.75rem;
}

.business-logo.logo-xl {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 1rem;
}

.business-logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.toast-enhanced {
  border: none;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

.toast-enhanced .toast-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.header-bg {
  background: linear-gradient(135deg, #0d6efd, #0dcaf0);
}

.icon-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title {
  border-bottom: 2px solid #0d6efd;
  padding-bottom: 0.3125rem;
}

.testimonial {
  font-style: italic;
  color: #6c757d;
}

.map-placeholder {
  background-color: #f8f9fa;
  height: 9.375rem; /* 150px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.business-icon-circle {
  width: 6.25rem; /* 100px */
  height: 6.25rem;
  font-size: 3rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* BEGIN: app/assets/stylesheets/site.css */
/* Bootstrap-based alert styles */
.alert-notice {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}

.alert-alert {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

/* Bootstrap-based utility classes */
.placeholder {
  cursor: auto;
}

.cursor-help { cursor: help !important; }

/* .footer styles live in footer.scss */
.full-height {
  min-height: 83.5vh;
}

.background-colour {
  position: relative;
  background-color: rgba(0, 0, 0, 0.8);
}

.background-full {
  background-size: cover;
}

#intro {
  background-image: url("/assets/folder/website-reports-desk-screens-4fa48ca9.webp");
  height: 100vh;
}

/* Bootstrap-based vertical navigation */
#vertical-dots-nav {
  position: fixed;
  top: 50%;
  right: 0.25rem;
  padding: 0.25rem;
  transform: translateY(-50%);
  z-index: 1030;
}

#vertical-dots-nav .nav-link {
  display: block;
  font-size: 0.75rem;
  text-align: center;
  color: var(--bs-secondary);
  background-color: rgba(139, 139, 139, 0.7);
  border-radius: var(--bs-border-radius-pill);
  padding: 0.5rem;
  margin-bottom: 0.25rem;
}

#vertical-dots-nav .nav-link.active {
  color: var(--bs-primary);
  background-color: var(--bs-primary);
}

/* Bootstrap-based container utilities */
.container-fluid-fullsize {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3.125rem; /* 50px */
}

/* Hero sections (the home page, landing pages, the workshop page, blog posts): the hero fills
   the screen below the navbar - all of it where the navbar is minimal until scroll, since
   --navbar-height is 0 there (navbar_scroll_controller.js) - whatever the screen size. svh: the
   height with a phone browser's bars showing, so it never starts taller than what's visible.
   The content sits in the page flow, centred, so on a short screen (a phone on its side) the
   hero grows to fit it instead of cutting it off. The tint (.hero-overlay) is an empty layer
   behind the content: <div class="hero-overlay"></div><div class="hero-content">...</div>. */
.hero-section {
  min-height: calc(100vh - var(--navbar-height, 4.25rem));
  min-height: calc(100svh - var(--navbar-height, 4.25rem));
  width: 100%;
  max-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--bs-body-color);
  background-image: url("/assets/folder/business-report-background-garbled-2833ed54.webp");
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
}

/* Below the breadcrumb bar too, where a page shows one (.breadcrumbs, 1.5rem). */
#breadcrumbs ~ * .hero-section {
  min-height: calc(100vh - var(--navbar-height, 4.25rem) - 1.5rem);
  min-height: calc(100svh - var(--navbar-height, 4.25rem) - 1.5rem);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bs-hero-overlay-bg, rgba(0, 0, 0, 0.8));
}

.hero-content {
  position: relative; /* above the tint */
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: transparent;
  box-sizing: border-box;
}

/* Matches the height of the gray "C" icon next to it; an inline style
   attribute here is blocked by the style-src CSP, so size via class. */
.hero-content .cxb-logo {
  height: 65px;
  width: auto;
}

/* Swap logo variant with the data-bs-theme attribute toggled on body. */
.cxb-logo-dark {
  display: none;
}

[data-bs-theme="dark"] .cxb-logo-light {
  display: none;
}

[data-bs-theme="dark"] .cxb-logo-dark {
  display: inline-block;
}

.cxb-logo-sm {
  height: 24px;
  width: auto;
}

.cxb-logo-lg {
  height: 65px;
  width: auto;
}

.cxb-logo-auth {
  height: 56px;
  width: auto;
}

.devise-brand-heading {
  color: var(--brand-primary);
}

/* Bootstrap-based floating toggle button */
.floating-view-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bs-border-radius);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all 0.3s ease;
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-secondary);
  background-color: transparent;
  border: 1px solid var(--bs-secondary);
  cursor: pointer;
}

.floating-view-toggle:hover {
  transform: scale(1.05);
}

.floating-view-toggle:active {
  transform: scale(0.95);
}

.floating-view-toggle i {
  transition: transform 0.3s ease;
}

.floating-view-toggle.expanded i {
  transform: rotate(180deg);
}

/* Add padding to position-relative containers that contain the toggle button to prevent overlap */
.position-relative:has(.floating-view-toggle) {
  padding-right: 3rem;
}

/* Navbar: inline placement, no floating; do not add padding to navbar */
.navbar .floating-view-toggle {
  position: static;
}

.navbar .position-relative:has(.floating-view-toggle) {
  padding-right: 0;
}

/* Hide floating button on smaller screens (only when not in navbar) */
@media (max-width: 1200px) {
  .position-relative .floating-view-toggle {
    display: none !important;
  }
  .navbar .floating-view-toggle {
    display: flex !important;
  }
  .position-relative:has(.floating-view-toggle) {
    padding-right: 0;
  }
}
/* The provider landing page's hero: a .hero-section with its own picture. */
.hero-provider {
  background-image: url("/assets/general/office-modern-building-1920-6d13523d.jpg");
}

.elevate-section {
  width: 20%;
  position: fixed;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.elevate-section:hover {
  transform: scale(1.1) translateY(-50%);
}

@media (max-width: 768px) {
  .elevate-section {
    display: none; /* Hide on small devices */
  }
}
.perspective-section {
  margin: -10px 0px;
}

.card-container {
  position: relative;
  top: 50%;
  left: 0%;
  transform: translate(0%, -75%);
  /* z-index handled by Bootstrap's z-1 utility class if needed */
}

.counter {
  text-align: center;
}

/* The home page's counters panel (main/home/_counters): the four numbers side by side with thin
   dividers between them (stacked on a phone), and the members line as the panel's footer. */
.counter-panel .count-up {
  padding: 0.75rem 1rem;
}

.counter-panel .count-up h4 {
  margin-bottom: 0;
}

.counter-panel .row > [class*="col-"] + [class*="col-"] {
  border-top: 1px solid var(--bs-border-color);
}

@media (min-width: 992px) {
  .counter-panel .row > [class*="col-"] + [class*="col-"] {
    border-top: 0;
    border-left: 1px solid var(--bs-border-color);
  }
}

/* The counters' pale grey (below) is made for the dark theme; on a light page it all but disappears.
   In the light theme they're the logo's navy (#1d4976, as [data-brand=connect-business]), shading
   down from a lighter navy, with a soft navy glow in place of the grey shadow. drop-shadow, not
   text-shadow: a text-shadow shows through gradient-filled text. */
[data-bs-theme="light"] .counter-count {
  color: #1d4976;
  background-image: linear-gradient(180deg, #4a7bb0 0%, #1d4976 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(29, 73, 118, 0.25));
}

/* A visitor's search teaser (search/_teaser) shares the panel; its placeholder cards fade out
   towards the bottom, as if the list carried on behind the band. */
.search-teaser-avatar {
  width: 2.5rem;
  height: 2.5rem;
}

.search-teaser-cards {
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}

/* The members line: a band of the logo's navy closing the panel, white text - set apart without any
   coloured words, which read as links. */
.counter-panel-footer {
  background-color: #1d4976;
  color: #fff;
  border-top: 0;
}

.counter-count {
  font-size: 50px;
  font-weight: bold;
  position: relative;
  color: #d8d8d8;
  text-align: center;
  display: inline-block;
  text-shadow: 3px 3px 5px rgb(131, 131, 131);
}

/* Background Picture Class */
.bg-picture-1 {
  background-image: url("/assets/general/coffee-table-business-meeting-1280-c7026c06.jpg");
  background-size: cover;
  background-position: center;
}

.bg-picture-2 {
  background-image: url("/assets/general/business-meeting-1280-c5616dda.jpg");
  background-size: cover;
  background-position: center;
}

.bg-picture-3 {
  background-image: url("/assets/general/imac-with-calendar-1280-016a6fce.jpg");
  background-size: cover;
  background-position: center;
}

.bg-picture-4 {
  background-image: url("/assets/general/dandelion-vase-fs8-d125aaf2.png");
  background-size: cover;
  background-position: center;
}

.bg-picture-5 {
  background-image: url("/assets/general/business-roundtable-presentation-1285164d.webp");
  background-size: cover;
  background-position: center;
}

/* Background Overlay Class */
.bg-overlay {
  position: relative;
}

.bg-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bs-overlay-bg, rgba(0, 0, 0, 0.85));
}

/* Content within the div */
.bg-content {
  position: relative; /* Ensure content stays on top of the overlay */
  /* z-index handled by Bootstrap's z-2 utility class if needed */
}

.pricing-bg {
  background-image: url("/assets/folder/nine-panes-business-owners-22a9fef7.webp");
  background-size: cover;
  background-position: center;
}

.pillars-bg {
  background-image: url("/assets/folder/website-office-people-meeting-f9b0b6f8.webp");
  background-size: cover;
}

.workshop-website-image1 {
  background-image: url("/assets/folder/website-business1-2e8d9f7e.webp");
}

.object-fit-cover {
  object-fit: cover;
}

.img-full-height {
  width: 100%; /* Ensures the image takes the full width of its container */
  height: 100%; /* Ensures the image takes the full height of its container */
  object-fit: cover; /* Ensures the image covers the container without distortion */
  display: block; /* Prevents inline spacing issues */
  overflow: hidden; /* Ensures any overflow content is hidden */
}

.free-label {
  position: absolute;
  top: 2em;
  right: -2em;
  transform: translateX(1%) translateY(1%) rotate(35deg);
  color: white;
  padding: 7px 50px;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.pricing-ribbon {
  --f: 0.5em; /* control the folded part */
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.25;
  padding: 0.5em;
  padding-inline: 3lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(rgba(0, 0, 0, 0.5333333333) 0 0) 51%/var(--f);
  clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(29.2893218813%, -100%) rotate(45deg);
  transform-origin: 0% 100%;
}

/* Mirror image of .pricing-ribbon, wrapped around the top-left corner instead
   of the top-right — lets a plan-level callout (e.g. badge_label/badge_class)
   sit alongside a PlanPromo's .pricing-ribbon without the two overlapping,
   since they occupy opposite corners by construction. Every x-coordinate in
   the clip-path and the transform is mirrored about the box's center. */
.pricing-ribbon-left {
  --f: 0.5em;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1.25;
  padding: 0.5em;
  padding-inline: 3lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(rgba(0, 0, 0, 0.5333333333) 0 0) 51%/var(--f);
  clip-path: polygon(0 calc(100% - var(--f)), 0 100%, var(--f) calc(100% - var(--f)), calc(100% - var(--f)) calc(100% - var(--f)), 100% 100%, 100% calc(100% - var(--f)), calc(100% - 999px) calc(100% - var(--f) - 999px), 999px calc(100% - var(--f) - 999px));
  transform: translate(-29.2893218813%, -100%) rotate(-45deg);
  transform-origin: 100% 100%;
}

/* Clearance for the plan badge when BOTH corner ribbons are showing at once and it has
   to drop into normal flow instead of taking a corner — measured empirically against
   .pricing-ribbon's tallest case (fs-5), not derived from a formula, so bump this if a
   future ribbon font-size/padding change makes the tips reach further down. */
.pricing-badge-cleared {
  padding-top: 12rem;
}

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.promote-pricing {
  top: -1em;
}

.text-impact-shadow {
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}

/* Feature flags admin summary styling */
.feature-flag-summary {
  /* Use Bootstrap body color variables so text adapts to light/dark themes */
  color: var(--bs-body-color, #111);
}

.feature-flag-summary .h5,
.feature-flag-summary h5,
.feature-flag-summary .h4 {
  color: var(--bs-body-color, #111);
  font-weight: 600;
}

.feature-flag-summary .small.text-muted {
  color: var(--bs-secondary, #6b7280);
}

.feature-flag-summary .badge.bg-secondary {
  background-color: var(--bs-secondary, #6c757d);
}

.image-overlay-container {
  position: relative;
  display: inline-block; /* Allows container to wrap around image size */
  text-align: center; /* Center the text horizontally */
}

.background-image {
  width: 100%; /* Adjust image size as needed */
  height: auto;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-weight: bold;
  transform: translate(-50%, -50%); /* Centers the text */
  color: var(--bs-overlay-text-color, rgb(233, 233, 233));
  background-color: var(--bs-overlay-text-bg, rgba(33, 37, 41, 0.5));
  padding: 25% 0%; /* Add padding around the text */
  border-radius: 5px; /* Optional: rounded corners */
  font-family: "Georgia", serif;
  text-transform: uppercase; /* Make text uppercase */
  width: 100%;
  height: 100%;
}

.colour-flare {
  background: conic-gradient(from 180deg at 50% 70%, hsl(0, 0%, 98%) 0deg, #eec32d 72.0000010729deg, #ec4b4b 144.0000021458deg, #709ab9 216.0000085831deg, #4dffbf 288.0000042915deg, hsl(0, 0%, 98%) 1turn);
  width: 100%;
  height: 100%;
}

.gradient-custom {
  background: linear-gradient(45deg, #1a1a1a, #2d2d2d);
}

.card-pop {
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.card-pop:hover {
  transform: translateY(-5px);
}

.stat-card {
  background: linear-gradient(45deg, #2c3e50, #3498db);
  border: none;
}

.btn-custom {
  padding: 12px 30px;
  font-weight: 600;
  border-radius: 30px;
  background: linear-gradient(45deg, #3498db, #2980b9);
  border: none;
  transition: all 0.3s ease;
}

.btn-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.highlight {
  color: #3498db;
  font-weight: 600;
}

.text-shadow {
  text-shadow: 2px 2px rgba(49, 49, 49, 0.4235294118);
}

/* Message styles */
.message-content.cursor-pointer {
  cursor: pointer;
  transition: all 0.2s ease;
}

.message-content.cursor-pointer:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message-content.cursor-pointer:active {
  transform: translateY(0);
}

/* Blog Post Content Styling */
.blog-content {
  line-height: 1.8;
  font-size: 1.1rem;
}

.blog-content .card {
  margin-bottom: 1.5rem;
}

.blog-content .btn {
  margin: 0.5rem 0.25rem;
}

.blog-content > *:first-child {
  margin-top: 0;
}

.blog-content > *:last-child {
  margin-bottom: 0;
}

.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.blog-content img {
  max-width: 100%;
  height: auto;
}

.blog-content ul, .blog-content ol {
  padding-left: 2rem;
  margin-bottom: 1rem;
}

.blog-content p {
  margin-bottom: 1rem;
}

.blog-content .alert {
  margin-bottom: 1.5rem;
}

.blog-content .row {
  margin-left: -15px;
  margin-right: -15px;
}

.blog-content [class*=col-] {
  padding-left: 15px;
  padding-right: 15px;
}

.seminar-landing-page .hero-section {
  margin: -1rem -1rem 2rem -1rem;
}

@media (max-width: 768px) {
  .seminar-landing-page .hero-section {
    margin: -1rem -0.5rem 2rem -0.5rem;
    padding: 2rem 1rem !important;
  }
}
.seminar-landing-page .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.seminar-landing-page .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Brand-specific styling that works alongside Bootstrap */
/* DO NOT MODIFY BOOTSTRAP CLASSES - ONLY ADD CUSTOM BRAND STYLES */
/* Brand-specific CSS custom properties using Bootstrap color system */
:root {
  --brand-primary: var(--bs-secondary); /* Connect Business default */
  --brand-secondary: var(--bs-dark);
}

/* Connect Business brand styling, matched to the navy "x" in the cxb logo mark */
[data-brand=connect-business] {
  --brand-primary: #1d4976;
  --brand-secondary: #495057;
}

/* EngineersBook brand styling using Bootstrap primary colors */
[data-brand=engineersbook] {
  --brand-primary: var(--bs-primary);
  --brand-secondary: var(--bs-primary);
}

/* TransportBook brand styling using Bootstrap success colors */
[data-brand=transportbook] {
  --brand-primary: var(--bs-success);
  --brand-secondary: var(--bs-info);
}

/* Theme-specific brand styling */
[data-bs-theme="dark"][data-brand=engineersbook] {
  --brand-primary: #4dabf7;
  --brand-secondary: #339af0;
}

[data-bs-theme="dark"][data-brand=transportbook] {
  --brand-primary: #51cf66;
  --brand-secondary: #40c057;
}

[data-bs-theme="dark"][data-brand=connect-business] {
  --brand-primary: #84a0bd; /* lighter tint of the navy logo color for dark-bg contrast */
  --brand-secondary: #6c757d;
}

/* Custom brand classes that work alongside Bootstrap */
.navbar-brand-custom {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  color: var(--bs-navbar-brand-color);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.navbar-brand-custom:hover {
  transform: scale(1.05);
  color: var(--bs-navbar-brand-hover-color);
}

.btn-brand-custom {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid var(--brand-primary);
  border-radius: var(--bs-border-radius);
  color: var(--brand-primary);
  background-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-brand-custom:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

.card-brand-custom {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: var(--bs-custom-radius-lg);
  box-shadow: var(--bs-custom-shadow-md);
  transition: all 0.3s ease;
  border-left: 4px solid var(--brand-primary);
}

.text-brand-custom {
  color: var(--brand-primary);
}

/* Brand-specific logo styling */

.business-profile-image {
  max-width: 10rem;
  max-height: 10rem;
  width: auto;
  height: auto;
  display: block;
  margin-right: 1rem;
  transition: transform 0.3s ease;
}

.business-profile-image:hover {
  transform: scale(1.05);
}

.business-profile-image.business-profile-heading-logo:hover {
  transform: none;
}

[data-brand=engineersbook] .navbar-logo {
  filter: drop-shadow(0 2px 4px rgba(0, 123, 255, 0.2));
}

[data-brand=transportbook] .navbar-logo {
  filter: drop-shadow(0 2px 4px rgba(40, 167, 69, 0.2));
}

[data-brand=connect-business] .navbar-logo {
  filter: drop-shadow(0 2px 4px rgba(108, 117, 125, 0.2));
}

/* Dark theme logo adjustments */
[data-theme=dark] .navbar-logo {
  filter: brightness(1.1) contrast(1.1);
}

/* Brand name text styling */
.navbar-brand-text {
  color: var(--bs-navbar-brand-color);
  transition: all 0.3s ease;
}

.navbar-brand:hover .navbar-brand-text {
  color: var(--bs-navbar-brand-hover-color);
}

/* TransportBook specific navbar text styling for better contrast */
[data-brand=transportbook] .navbar-brand-text {
  color: var(--bs-body-color);
}

[data-brand=transportbook] .navbar-brand:hover .navbar-brand-text {
  color: var(--brand-primary);
}

/* Ensure navbar text is readable for all brands */
[data-brand=transportbook] .navbar-nav .nav-link {
  color: var(--bs-body-color);
}

[data-brand=transportbook] .navbar-nav .nav-link:hover {
  color: var(--brand-primary);
}

[data-brand=transportbook] .navbar-nav .btn-outline-secondary {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-brand=transportbook] .navbar-nav .btn-outline-secondary:hover {
  color: white;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Ensure navbar toggler icon is visible for transportbook */
[data-brand=transportbook] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme=dark][data-brand=transportbook] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* BEGIN: app/assets/stylesheets/business_profile.css */
/* Bootstrap-based business profile styles */
.profile-card {
  border: 0.5px solid rgba(0, 0, 0, 0.125);
  border-radius: var(--bs-custom-radius-lg);
  box-shadow: var(--bs-custom-shadow-md);
  transition: all 0.3s ease;
  margin-bottom: var(--bs-spacer);
}

/* Only apply flex layout to specific card-body instances that need it */
.profile-card.profile-card-horizontal .card-body {
  display: flex;
  align-items: center;
}

/* BEGIN: stylesheets/mailers/test_notification.css */

.profile-card img {
  max-width: 3.75rem; /* 60px */
  max-height: 3.75rem;
  margin-right: var(--bs-spacer);
  border-radius: var(--bs-border-radius);
}

/* Ensure all cards on business profile page have consistent styling */
#profile-page .card,
#profile-column .card,
#sidebar-column .card {
  border: 0.5px solid rgba(0, 0, 0, 0.125);
  border-radius: var(--bs-custom-radius-lg);
  box-shadow: var(--bs-custom-shadow-md);
  transition: all 0.3s ease;
  margin-bottom: var(--bs-spacer);
}

/* Hero header card should be flat - no shadow */
.profile-hero .card,
.profile-hero-header {
  box-shadow: none !important;
  border: none;
}

/* Theme-aware card styling */
[data-bs-theme=dark] #profile-page .card,
[data-bs-theme=dark] #profile-column .card,
[data-bs-theme=dark] #sidebar-column .card {
  border-color: rgba(255, 255, 255, 0.125);
}

.contact-info {
  margin-top: var(--bs-spacer);
}

.contact-info p {
  margin: 0;
}

.img-max {
  max-width: 6.25rem; /* 100px */
  width: 100%;
}

.rating-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 0.25rem;
}

.rating-input__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.rating-input__star {
  cursor: pointer;
  font-size: 1.25rem;
  color: #adb5bd;
}

.rating-input__star i {
  pointer-events: none;
}

.rating-input__star:hover,
.rating-input__star:hover ~ .rating-input__star,
.rating-input__radio:checked + .rating-input__star,
.rating-input__radio:checked ~ .rating-input__star {
  color: #ffc107;
}

.rating-input__star.is-selected {
  color: #ffc107;
}

/* Hero header adaptive text color */
.profile-hero-header {
  position: relative;
  box-shadow: none !important; /* Flat design - no shadow */
  /* Default: assume dark background, use white text */
  color: white;
  /* Add dark overlay for light backgrounds to improve contrast */
}

.profile-hero-header[data-bg-theme=light]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.profile-hero-header[data-bg-theme=light] > * {
  position: relative;
  z-index: 1;
}

.profile-hero-header .hero-text {
  color: white;
  /* Multi-layered text shadows for better contrast on any background */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);
}

/* Light background override - when bg-gradient-primary is light */
.profile-hero-header[style*="background-color: #fff"],
.profile-hero-header[style*="background-color: rgb(255"],
.profile-hero-header[style*="background-color: rgba(255, 255, 255"],
.profile-hero-header.bg-gradient-primary[style*=background] {
  /* Add dark overlay to darken light backgrounds */
}

.profile-hero-header[style*="background-color: #fff"]::before,
.profile-hero-header[style*="background-color: rgb(255"]::before,
.profile-hero-header[style*="background-color: rgba(255, 255, 255"]::before,
.profile-hero-header.bg-gradient-primary[style*=background]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.profile-hero-header[style*="background-color: #fff"] > *,
.profile-hero-header[style*="background-color: rgb(255"] > *,
.profile-hero-header[style*="background-color: rgba(255, 255, 255"] > *,
.profile-hero-header.bg-gradient-primary[style*=background] > * {
  position: relative;
  z-index: 1;
}

.profile-hero-header[style*="background-color: #fff"],
.profile-hero-header[style*="background-color: rgb(255"],
.profile-hero-header[style*="background-color: rgba(255, 255, 255"],
.profile-hero-header.bg-gradient-primary[style*=background] {
  /* Keep white text with shadows for contrast */
  color: white;
}

.profile-hero-header[style*="background-color: #fff"] .hero-text,
.profile-hero-header[style*="background-color: rgb(255"] .hero-text,
.profile-hero-header[style*="background-color: rgba(255, 255, 255"] .hero-text,
.profile-hero-header.bg-gradient-primary[style*=background] .hero-text {
  color: white;
  /* Multi-layered text shadows for better contrast on light backgrounds */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);
}

.profile-hero-header[style*="background-color: #fff"] .profile-subtitle,
.profile-hero-header[style*="background-color: rgb(255"] .profile-subtitle,
.profile-hero-header[style*="background-color: rgba(255, 255, 255"] .profile-subtitle,
.profile-hero-header.bg-gradient-primary[style*=background] .profile-subtitle {
  color: rgba(255, 255, 255, 0.95);
}

/* Light theme hero header - when explicitly set to light */
.profile-hero-header[data-bg-theme=light] {
  color: white;
}

.profile-hero-header[data-bg-theme=light] .hero-text {
  color: white;
  /* Multi-layered text shadows for better contrast */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);
}

.profile-hero-header[data-bg-theme=light] .profile-subtitle {
  color: rgba(255, 255, 255, 0.95);
}

.profile-hero-header[data-bg-theme=light] .profile-badge {
  color: rgba(255, 255, 255, 0.95);
}

.profile-hero-header .profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.profile-hero-header .profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: normal;
  max-width: 100%;
}

.profile-hero-header .profile-badge span {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

[data-controller="hero-header"] .badge.rounded-pill {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.profile-hero-header[data-bg-theme=light] .profile-stat-value,
.profile-hero-header[data-bg-theme=light] .profile-stat-label {
  color: white;
}

.profile-hero-header[data-bg-theme=light] .rating-text {
  color: white;
}

/* Dark theme hero header - ensure shadows work well */
.profile-hero-header[data-bg-theme=dark] {
  color: white;
}

.profile-hero-header[data-bg-theme=dark] .hero-text {
  color: white;
  /* Multi-layered text shadows for depth on dark backgrounds */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Business description/about section - cohesive with hero header */
.profile-description {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 0;
  /* Subtle styling that works with both themes */
}

.profile-description h3 {
  margin-bottom: 1rem;
}

.profile-description p {
  line-height: 1.7;
}

/* Theme-aware description styling */
[data-bs-theme=dark] .profile-description {
  border-top-color: rgba(255, 255, 255, 0.1);
}


/* BEGIN: app/assets/stylesheets/buttons.css */
/* Bootstrap-based button styles - legacy custom classes mapped to Bootstrap equivalents */
/* Offcanvas close button - using Bootstrap positioning utilities */
.offcanvas-close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* Legacy custom button classes - now using Bootstrap button system */
.custom-button {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid var(--bs-secondary);
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-secondary);
  background-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-button-menu {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid var(--bs-secondary);
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-secondary);
  background-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-button-mini {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 2px solid var(--bs-dark);
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-dark);
  background-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Button content styling - using Bootstrap utilities */
.custom-button span {
  display: inline-block;
  margin-right: 0;
  font-weight: 600;
  transition: transform 0.3s ease;
}

.custom-button-mini span {
  display: inline-block;
  margin-right: 0.25rem;
  font-weight: 500;
  transition: transform 0.3s ease;
}

/* Hover effects using Bootstrap color system */
.custom-button:hover {
  color: var(--bs-info);
  background-color: var(--bs-info);
  border-color: var(--bs-info);
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.custom-button:hover span {
  font-weight: 700;
  animation: pulse 0.5s ease-in-out;
}

.custom-button-mini:hover span {
  font-weight: 600;
  animation: pulse 0.5s ease-in-out;
}

.custom-button-menu:hover span {
  font-weight: 600;
  animation: pulse 0.5s ease-in-out;
}

.custom-button-menu:hover {
  font-weight: 600;
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Color variants using Bootstrap color system */
.custom-button.blue {
  color: var(--bs-primary);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.custom-button.green {
  color: var(--bs-white);
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.custom-button.red {
  color: var(--bs-white);
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.custom-button.yellow {
  color: var(--bs-dark);
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.custom-button.purple {
  color: var(--bs-white);
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.custom-button.orange {
  color: var(--bs-white);
  background-color: #fd7e14;
  border-color: #fd7e14;
}

.custom-button.teal {
  color: var(--bs-white);
  background-color: #20c997;
  border-color: #20c997;
}

.custom-button.dblue {
  color: var(--bs-white);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.custom-button.black {
  color: var(--bs-white);
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
}

.custom-button.dred {
  color: var(--bs-white);
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.custom-button.pink {
  color: var(--bs-white);
  background-color: #e83e8c;
  border-color: #e83e8c;
}

.custom-button.euve {
  color: var(--bs-white);
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.custom-button.dgreen {
  color: var(--bs-white);
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

/* Menu and mini button variants */
.custom-button-menu.dgreen {
  color: var(--bs-white);
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  opacity: 0.7;
  width: 85%;
}

.custom-button-mini.dgreen {
  color: var(--bs-white);
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  opacity: 0.8;
}

.custom-button-menu.smol {
  color: var(--bs-light);
  background-color: transparent;
  border-color: var(--bs-light);
}

/* Inline button variants using Bootstrap utilities */
.inline-button {
  display: inline-block;
  padding: 0.1rem 0.1rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  border-radius: var(--bs-border-radius-sm);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.inline-button-lg {
  display: inline-block;
  padding: 0.1rem 0.1rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  border-radius: var(--bs-border-radius-lg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


/* Bootstrap-based form and element styles */
/* BEGIN: stylesheets/elements.css */
#provider-search.form-control::placeholder {
  color: var(--bs-secondary);
}

.embed-map {
  width: 100%;
  height: 100%;
  min-height: 12.5rem; /* 200px */
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-dark);
  border: 2px solid var(--bs-border-color);
}

.embed-map-placeholder {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  min-height: 12.5rem; /* 200px */
  background:
    linear-gradient(135deg, rgba(var(--bs-secondary-rgb), 0.85), rgba(var(--bs-dark-rgb), 0.7));
  border-radius: var(--bs-border-radius-lg);
}

.embed-map-placeholder-with-reason {
  overflow: hidden;
}

.embed-map-placeholder-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
  color: var(--bs-white);
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.55));
}

.embed-map-placeholder-title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.embed-map-placeholder-copy {
  margin-top: 0.25rem;
  font-size: 0.925rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}


/* Bootstrap-based widget styles */
/* BEGIN: stylesheets/widgets.css */
.widget-size-report {
  /* a report sized to take up a widget space on the dashboard */
  max-width: 37.5rem; /* 600px */
  max-height: 37.5rem; /* 600px */
  width: 100%;
  height: auto;
}

/* Incoming Enquiries Widget Styles using Bootstrap utilities */
#incoming_enquiries_widget .list-group-item {
  border-left: 4px solid transparent;
  transition: all 0.2s ease;
}

#incoming_enquiries_widget .list-group-item:hover {
  border-left-color: var(--bs-primary);
  background-color: var(--bs-body-secondary-bg);
}

#incoming_enquiries_widget .badge {
  font-size: 0.75em;
}

#incoming_enquiries_widget .text-muted {
  font-size: 0.875em;
}

#incoming_enquiries_widget .bg-light {
  background-color: var(--bs-body-secondary-bg) !important;
  border-radius: var(--bs-border-radius-sm);
}

/* Reply Modal Styles using Bootstrap utilities */
#replyModal .modal-dialog {
  max-width: 43.75rem; /* 700px */
}

#replyModal .alert-info {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}

#replyModal .form-control:focus,
#replyModal .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}


/* BEGIN: app/assets/stylesheets/display_if_logged_in.css */
/* This file contains styles for elements that are displayed only when the user is logged in, or that are locked when the user is not logged in. */
/* the block link wrapper */
.locked-field {
  display: flex; /* use flex so we can center vertically relative to column */
  align-items: center; /* center vertically within the container */
  position: relative; /* for absolute badge inside */
  text-decoration: none; /* remove underline */
  color: inherit; /* inherit color, plain text look */
  cursor: pointer;
  overflow: visible; /* badge must not be clipped; text truncation is handled by the inner span */
  height: 100%; /* respect parent's container height when available */
}

/* wrapper for stacking text + badge */
.locked-wrapper {
  position: relative;
  width: 100%;
  overflow: visible; /* allow badge to sit above neighboring content if needed */
  display: flex; /* center contents vertically */
  align-items: center;
  height: 100%; /* fill parent so vertical centering uses container height */
}

/* When helper forces full width with .w-100, make the wrapper shrink-to-fit so the badge centers over content */
.locked-wrapper.w-100 {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  height: auto; /* shrink-to-fit variant should size to content */
}

/* When no text is shown (hide_masked), give the wrapper enough height for the badge to center against */
.locked-wrapper.locked-wrapper--badge-only {
  min-height: 1.75em;
}

/* outer text container (handles truncation) */
.locked-wrapper > .d-block.w-100,
.locked-wrapper > span.d-block {
  flex: 1 1 auto;
  min-width: 0; /* allow flex child to shrink for text-overflow to work */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font-family: inherit;
}

/* blurred / masked inline segments */
.locked-text {
  display: inline-block;
  position: relative;
  /* prefer pixelate filter when available, fall back to blur */
  filter: url(#pixelate);
  -webkit-filter: url(#pixelate);
  /* if the svg filter isn't present, use a subtle blur */
  /* note: some browsers ignore url() if filter id not found; blur provides fallback */
  filter: blur(4px);
  user-select: none;
  pointer-events: none; /* clicks go to link */
  vertical-align: text-top;
}

/* badge absolutely centered — no z-index; badge follows text in DOM so paints on top naturally */
.locked-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* entire link clickable */
}

/* Left-justified variant: align the badge to the start of the column */
.locked-badge.locked-badge--left {
  left: 0;
  transform: translate(0, -50%);
}

/* make the badge background semi-transparent to avoid fully blocking context */
.locked-badge.badge {
  background-color: rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}


/* Bootstrap-based navbar styles */
/* BEGIN: stylesheets/navbar.css */
.navbar {
  border-bottom: 1px solid var(--bs-border-color);
  transition: all 0.3s ease;
  background-color: rgba(var(--bs-body-bg-rgb), 0.6);
  backdrop-filter: blur(10px);
  box-shadow: var(--bs-custom-shadow-sm);
}

.button-hover-white:hover {
  color: var(--bs-white) !important;
}

.navbar-logo {
  transition: all 0.3s ease;
  height: var(--navbar-logo-height, 40px);
  width: auto;
}

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

.terms-logo .navbar-logo:hover {
  transform: none;
}


/* Bootstrap-based sidebar styles */
/* BEGIN: stylesheets/sidebar.css */
.popsidebar { /* this is the offcanvas sidebar */
  position: fixed;
  border-right: 5px ridge var(--bs-dark);
  overflow-y: auto;
  overflow-x: hidden;
  transition: 0.3s;
  width: 35vw;
  max-width: 12.5rem; /* 200px */
  padding-top: 0 !important;
}

.mainsidebar {
  height: 100%;
  width: 8vw;
  max-width: 3.125rem; /* 50px */
  position: fixed;
  top: 0;
  overflow: hidden;
}

.baselevel {
  position: fixed;
  bottom: 0.625rem; /* 10px */
}

.showup {
  position: sticky;
  overflow: visible !important;
}

/* Right sidebar styling using Bootstrap utilities */
.target-sidebar {
  padding: var(--bs-spacer);
  border: 1px dashed rgba(var(--bs-light-rgb), 0.2);
}

.target-stickbar {
  position: sticky;
  top: 4.0625rem; /* 65px */
}

.target-lowerstickbar {
  position: sticky;
  top: 5rem; /* 5em */
}

.action-tray-parent {
  position: sticky;
  top: 0;
}

.action-tray-offcanvas {
  overflow-y: auto;
}


/* Bootstrap-based footer styles */
/* BEGIN: stylesheets/footer.css */
.footer-wrapper {
  margin-top: auto;
}

.footer {
  position: sticky;
  width: 100%;
  bottom: 0;
  margin-top: var(--bs-spacer);
  background-color: var(--bs-body-secondary-bg);
  border-top: 1px solid var(--bs-border-color);
}


/* The navbar is fixed-top (removed from normal flow), so #page-content-wrapper carries the
   ONE offset that clears it, instead of every individual bar stacked inside it (worker-health-
   bar, breadcrumb, alertbar) needing - and having to stay coordinated with - a margin-top of
   its own. --navbar-height is kept in sync with the navbar's actual rendered height by
   navbar_scroll_controller.js (ResizeObserver - catches shrink-on-scroll, per-brand logo
   height, viewport resize, anything). The literal 4.25rem fallback only covers the brief
   window before that JS runs on first paint. */
#page-content-wrapper {
  padding-top: var(--navbar-height, 4.25rem);
}

/* A navbar kept minimal until scroll has no offset, so the page's hero runs up under it. Anything
   else at the top of the page - a flash, the admin and notification bars, a breadcrumb - would sit
   under the strip and lose its clicks to it, so while one is showing the wrapper clears the navbar
   after all. Keyed on the value, not on .navbar-minimal-at-top, which scrolling takes away: the
   content would jump. */
nav[data-navbar-scroll-minimal-at-top-value="true"] ~ #page-content-wrapper:has(#flash_messages .alert, #worker-health-bar, .system-incident, #breadcrumbs, #urgent-notifications-bar) {
  padding-top: var(--navbar-rendered-height, 4.25rem);
}

/* A dismissed flash leaves its wrapper behind; its margin would hold the page down. */
#flash_messages > .container-fluid:not(:has(.alert)) {
  display: none;
}

/* The top-level pages, and landing pages that ask for it: until the visitor scrolls the navbar is
   a transparent strip with only the logo and the account buttons (navbar_scroll_controller.js,
   minimalAtTop). The rest is display:none, so it can't be tabbed to; the account list shows
   outside the collapsed menu on a phone too, in a row, with no toggler. !important because the
   brand navbars (transportbook, engineersbook) set their own background with longer selectors. */
nav.navbar.fixed-top.navbar-minimal-at-top {
  background-color: transparent !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
.navbar-minimal-at-top > .container-fluid {
  flex-wrap: nowrap;
}
.navbar-minimal-at-top .navbar-toggler,
.navbar-minimal-at-top .navbar-collapse > .navbar-nav.me-auto {
  display: none;
}
.navbar-minimal-at-top .navbar-collapse {
  display: flex !important;
  flex-grow: 0;
  flex-basis: auto;
  padding-left: 0 !important;
}
.navbar-minimal-at-top .navbar-collapse > .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0 !important;
  white-space: nowrap;
}

/* Bootstrap-based breadcrumb styles */
/* BEGIN: stylesheets/breadcrumb.css */
.breadcrumbs {
  position: relative;
  height: 1.5rem; /* 24px */
  overflow: hidden; /* Disable scroll */
}

#breadcrumbs .breadcrumb-item a {
  color: var(--brand-primary);
}


/* Bootstrap-based column styles */
/* BEGIN: stylesheets/columns.css */
.search_date_columns {
  min-width: 20pc; /* Keep original unit for specific layout needs */
}

#column1, #column2 {
  transition: width 0.3s ease-in-out;
}

#column3 {
  transition-delay: 2s;
  transition: width 2s ease-in-out;
}


/* Bootstrap-based HR line styles */
/* BEGIN: stylesheets/hrlines.css */
hr.red {
  border-top: 1px solid var(--bs-danger);
}

hr.dashed {
  border-top: 1px dashed var(--bs-border-color);
}

hr.dotted {
  border-top: 1px dotted var(--bs-border-color);
}

hr.solid {
  border: 1px solid var(--bs-border-color);
}

hr.thick {
  border: 0.625rem solid var(--bs-border-color); /* 10px */
  border-radius: var(--bs-border-radius);
}

hr.dividing-line {
  height: 0.3125rem; /* 5px */
  border: 0.3125rem double var(--bs-dark); /* 5px */
}


/* BEGIN: app/assets/stylesheets/components/_business_logo.css */
/* Bootstrap-based business logo component */
.business-logo {
  position: relative;
  display: inline-block;
  background-color: var(--bs-light);
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

/* Logo image styling using Bootstrap utilities */
.business-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Fallback text styling using Bootstrap color system */
.logo-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bs-secondary), var(--bs-dark));
  color: var(--bs-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-fallback-text {
  font-size: 0.6em;
  line-height: 1;
  text-align: center;
  user-select: none;
  font-weight: 600;
}

/* Size variants using Bootstrap spacing scale */
.logo-xs {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  border-radius: var(--bs-border-radius-sm);
}

.logo-sm {
  width: 3.75rem; /* 60px */
  height: 3.75rem;
  border-radius: var(--bs-border-radius);
}

.logo-md {
  width: 5rem; /* 80px */
  height: 5rem;
  border-radius: var(--bs-border-radius-lg);
}

.logo-lg {
  width: 6.25rem; /* 100px */
  height: 6.25rem;
  border-radius: var(--bs-border-radius-xl);
}

.logo-xl {
  width: 7.5rem; /* 120px */
  height: 7.5rem;
  border-radius: var(--bs-border-radius-xxl);
}

/* Responsive adjustments using Bootstrap breakpoints */
@media (max-width: 576px) {
  .logo-lg {
    width: 5rem;
    height: 5rem;
  }
  .logo-xl {
    width: 6.25rem;
    height: 6.25rem;
  }
}
@media (max-width: 768px) {
  .logo-md {
    width: 3.75rem;
    height: 3.75rem;
  }
  .logo-lg {
    width: 4.5rem;
    height: 4.5rem;
  }
}
/* Hover effects using Bootstrap shadow utilities */
.business-logo:hover {
  transform: translateY(-1px);
  box-shadow: var(--bs-box-shadow-lg);
}

/* Shadow variants using Bootstrap shadow classes */
.business-logo.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm);
}

.business-logo.shadow {
  box-shadow: var(--bs-box-shadow);
}

.business-logo.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg);
}

/* Shape variants using Bootstrap utilities */
.business-logo.rounded-circle {
  border-radius: 50% !important;
}

.business-logo.rounded-square {
  border-radius: var(--bs-border-radius-sm);
}

/* Background variants using Bootstrap utilities */
.business-logo.bg-transparent {
  background-color: transparent;
  border: none;
}


/* Bootstrap-based form component styles */
/* BEGIN: stylesheets/components/_forms.css */
.token-textarea {
  height: 6.25rem; /* 100px */
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


/* Bootstrap-based header image styles */
/* BEGIN: stylesheets/components/_header_image.css */
.header-image-background {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.header-image-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
}

.header-image-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, var(--bs-white) 100%);
  pointer-events: none;
}

.header-image-fallback::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background-color: var(--bs-info);
  opacity: 0.4;
}

.header-image-fallback::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, var(--bs-white) 100%);
  pointer-events: none;
}


/* Bootstrap-based user section component styles */
/* BEGIN: stylesheets/components/_user_sections.css */
.mw-70 {
  max-width: 70%;
}

.progress-thin {
  height: 0.375rem; /* 6px */
}


/* Navbar Component Styles */
/* BEGIN: stylesheets/components/_navbar.css */
.dotted-border-grey {
  border-top: 10px dotted grey;
  height: 10px;
}

.close-button-position {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.search-menu-width {
  min-width: 350px;
}


/* Toast Component Styles */
/* BEGIN: stylesheets/components/_toast.css */
.toast-position-fixed {
  top: 80px;
  right: 20px;
  z-index: 1080;
}

.min-w-300 {
  min-width: 300px;
}

.toast-test-button {
  z-index: 1050;
}


:root {
  --dir-accent: var(--bs-warning);
  --dir-rule: var(--bs-primary);
}

[data-brand=engineersbook] {
  --dir-accent: var(--bs-primary);
  --dir-rule: var(--bs-info);
}

[data-brand=transportbook] {
  --dir-accent: var(--bs-success);
  --dir-rule: var(--bs-success);
}

.dir-text-accent {
  color: var(--dir-accent) !important;
}

.dir-text-rule {
  color: var(--dir-rule) !important;
}

.dir-bg-accent {
  background-color: var(--dir-accent) !important;
}

.dir-border-rule {
  border-color: var(--dir-rule) !important;
}

.dir-contact-details {
  height: 100%;
}

.dir-contact-map-panel {
  display: flex;
  flex-direction: column;
  padding: 0.625rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius-xl);
  background:
    linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.98), rgba(var(--bs-tertiary-bg-rgb), 0.9));
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.06);
}

.dir-contact-map-frame {
  flex: 1 1 auto;
  min-height: 14rem;
  overflow: hidden;
  border-radius: calc(var(--bs-border-radius-xl) - 0.25rem);
}

.dir-contact-map-frame .embed-map,
.dir-contact-map-frame .embed-map-placeholder {
  width: 100%;
  height: 100%;
  min-height: 14rem;
  border-radius: inherit;
  box-sizing: border-box;
}

@media (max-width: 991.98px) {
  .dir-contact-layout {
    row-gap: 1rem;
  }

  .dir-contact-details {
    padding-left: 0;
  }
}

#starRow {
  font-size: 1.5rem;
  cursor: pointer;
}

#starRow label {
  color: var(--bs-secondary);
  opacity: 0.4;
  transition: color 0.15s, opacity 0.15s;
}

#starRow label.is-selected {
  color: var(--dir-accent) !important;
  opacity: 1;
}

#starRow label:hover {
  color: var(--dir-accent);
  opacity: 0.8;
}


/* Directory Page Styles */
/* BEGIN: stylesheets/pages/_directory.css */
.directory-hero-gradient {
  background: linear-gradient(to right, #2c3e50, #3498db);
}

.directory-cta-gradient {
  background: linear-gradient(to right, #3498db, #2c3e50);
}


/* Owner Landing Page Styles */
/* BEGIN: stylesheets/pages/_owner_landing.css */
.pricing-gradient {
  background: linear-gradient(135deg, #007bff, #6610f2);
}

.max-h-30vh {
  max-height: 30vh;
}

/* Bootstrap's w-75 has no breakpoint variant: full width on phones, 75% from md up. */
@media (min-width: 768px) {
  .w-md-75 {
    width: 75% !important;
  }
}


/* General Brand Styles */
/* Brand Header */
/* BEGIN: stylesheets/brands/brand_styles.css */
.brand-header {
  background: linear-gradient(135deg, var(--brand-primary, #6c757d), var(--brand-secondary, #495057));
  color: white;
}

/* Brand-specific card styles */
.brand-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 4px solid var(--brand-primary, #6c757d);
}

.brand-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Brand-specific button styles */
.brand-btn {
  background-color: var(--brand-primary, #6c757d);
  border-color: var(--brand-primary, #6c757d);
  color: white;
}

.brand-btn:hover {
  background-color: var(--brand-secondary, #495057);
  border-color: var(--brand-secondary, #495057);
  color: white;
}

.brand-btn-outline {
  background-color: transparent;
  border-color: var(--brand-primary, #6c757d);
  color: var(--brand-primary, #6c757d);
}

.brand-btn-outline:hover {
  background-color: var(--brand-primary, #6c757d);
  border-color: var(--brand-primary, #6c757d);
  color: white;
}

/* Brand-specific text styles */
.brand-text {
  color: var(--brand-primary, #6c757d);
}

.brand-text-secondary {
  color: var(--brand-secondary, #495057);
}

/* Icon containers */
.brand-icon-container {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .brand-icon-container {
    width: 60px;
    height: 60px;
  }
  .brand-header {
    padding: 2rem 0;
  }
}
/* Animation utilities */
.animate-fade-in {
  animation: fadeIn 0.6s ease-in;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out;
}

/* Connect Business Brand Styles */
/* BEGIN: stylesheets/brands/connectbusiness.css */
.connectbusiness-landing {
  --connectbusiness-primary: #6c757d;
  --connectbusiness-secondary: #495057;
  --connectbusiness-warning: #ffc107;
  --connectbusiness-light: #f8f9fa;
  --connectbusiness-dark: #212529;
}

/* Brand-specific elements */
.brand-connect-business .card {
  border-left: 4px solid var(--connectbusiness-primary);
}

.brand-connect-business .btn-primary {
  background-color: var(--connectbusiness-primary);
  border-color: var(--connectbusiness-primary);
}

.brand-connect-business .btn-primary:hover {
  background-color: var(--connectbusiness-secondary);
  border-color: var(--connectbusiness-secondary);
}

.brand-connect-business .btn-warning {
  background-color: var(--connectbusiness-warning);
  border-color: var(--connectbusiness-warning);
  color: var(--connectbusiness-dark);
}

.brand-connect-business .btn-warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
}

/* Feature Cards */
.connectbusiness-feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 4px solid var(--connectbusiness-primary);
}

.connectbusiness-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(108, 117, 125, 0.15);
}

.connectbusiness-icon-container {
  width: 80px;
  height: 80px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .connectbusiness-icon-container {
    width: 60px;
    height: 60px;
  }
}

/* TransportBook Brand Styles */
/* BEGIN: stylesheets/brands/transportbook.css */
.transportbook-landing {
  --transportbook-primary: #28a745;
  --transportbook-secondary: #20c997;
  --transportbook-warning: #ffc107;
  --transportbook-light: #f8f9fa;
  --transportbook-dark: #212529;
  min-height: 100vh;
}

/* Theme-aware background gradients */
.transportbook-hero-gradient {
  background: linear-gradient(135deg, #E8F5E9, #F1F8F4);
}

[data-bs-theme=dark] .transportbook-hero-gradient {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), rgba(32, 201, 151, 0.1));
}

.transportbook-accent-bg {
  background-color: #E8F5E9;
}

[data-bs-theme=dark] .transportbook-accent-bg {
  background-color: rgba(40, 167, 69, 0.1);
}

/* Brand Header - TransportBook specific overrides */
.transportbook-landing .brand-header {
  background: linear-gradient(135deg, var(--transportbook-primary), var(--transportbook-secondary));
  color: white;
  padding: 4rem 0;
  margin-top: 76px; /* Account for fixed navbar */
}

.transportbook-logo {
  height: 120px;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
}

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

[data-bs-theme=dark] .transportbook-landing .brand-header {
  background: linear-gradient(135deg, #1e7e34, #1a9b7a);
  color: white;
}

/* Responsive adjustments for brand header */
@media (max-width: 768px) {
  .transportbook-landing .brand-header {
    padding: 2rem 0;
    margin-top: 76px; /* Maintain spacing for fixed navbar on mobile */
  }
}
/* TransportBook Navbar Background - More specific selector to override general navbar styles */
nav.navbar[data-brand=transportbook],
[data-brand=transportbook] nav.navbar.fixed-top {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--transportbook-primary);
}

[data-bs-theme=dark] nav.navbar[data-brand=transportbook],
[data-bs-theme=dark][data-brand=transportbook] nav.navbar.fixed-top {
  background-color: rgba(33, 37, 41, 0.95);
  border-bottom: 2px solid var(--transportbook-primary);
}

/* Brand-specific elements */
.brand-transportbook .card {
  border-left: 4px solid var(--transportbook-primary);
}

.brand-transportbook .btn-primary {
  background-color: var(--transportbook-primary);
  border-color: var(--transportbook-primary);
}

.brand-transportbook .btn-primary:hover {
  background-color: var(--transportbook-secondary);
  border-color: var(--transportbook-secondary);
}

.brand-transportbook .btn-warning {
  background-color: var(--transportbook-warning);
  border-color: var(--transportbook-warning);
  color: var(--transportbook-dark);
}

.brand-transportbook .btn-warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
}

/* Feature Cards */
.transportbook-feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 4px solid var(--transportbook-primary);
}

.transportbook-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(40, 167, 69, 0.15);
}

.transportbook-icon-container {
  width: 80px;
  height: 80px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .transportbook-icon-container {
    width: 60px;
    height: 60px;
  }
  .transportbook-logo {
    height: 80px !important;
  }
}

/* EngineersBook Brand Styles */
/* BEGIN: stylesheets/brands/engineersbook.css */
.engineersbook-landing {
  --engineersbook-primary: #4A90E2;
  --engineersbook-secondary: #6BA3E8;
  --engineersbook-warning: #FFD93D;
  --engineersbook-light: #F8F9FA;
  --engineersbook-dark: #2C3E50;
  /* Deeper "blueprint" trio used by the hero and its echo sections -
     kept separate from --engineersbook-primary/secondary (which drive
     buttons/borders) so this can be moodier without dulling the UI. */
  --engineersbook-blueprint-start: #0B1F3A;
  --engineersbook-blueprint-mid: #15498C;
  --engineersbook-blueprint-end: #10ADBE;
  min-height: 100vh;
}

/* Theme-aware background gradients - a lighter echo of the hero's blueprint palette */
.engineersbook-hero-gradient {
  background: linear-gradient(135deg, #E7F0FB, #E4F8F7);
}

[data-bs-theme=dark] .engineersbook-hero-gradient {
  background: linear-gradient(135deg, rgba(21, 73, 140, 0.2), rgba(16, 173, 190, 0.12));
}

.engineersbook-accent-bg {
  background-color: #E8F4FD;
}

[data-bs-theme=dark] .engineersbook-accent-bg {
  background-color: rgba(74, 144, 226, 0.1);
}

/* Muted stand-in for bg-primary (Bootstrap's stock #0d6efd reads too vivid
   for a full-section background) - reuses the hero's calmer blueprint blue. */
.engineersbook-stats-bg {
  background-color: var(--engineersbook-blueprint-mid, #15498C);
}

/* Hero Section - Scoped to engineersbook-landing to avoid conflicts.
   A navy-to-teal "blueprint" gradient with a faint drafting grid, rather
   than a flat two-tone blue, to give the brand some actual character. */
.engineersbook-landing .engineersbook-hero-section {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(135deg, var(--engineersbook-blueprint-start) 0%, var(--engineersbook-blueprint-mid) 55%, var(--engineersbook-blueprint-end) 100%);
  position: relative;
  overflow: hidden;
}

.engineersbook-landing .engineersbook-hero-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.15) 75%);
}

.engineersbook-landing .engineersbook-hero-content {
  padding: 2rem 0;
}

.engineersbook-logo {
  height: 80px;
  max-width: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Hero background is a fixed brand gradient regardless of site theme,
   so its text must stay light - it can't follow --bs-overlay-text-color,
   which flips to near-black in light theme. */
.engineersbook-hero-title {
  color: #ffffff;
}

.engineersbook-hero-subtitle {
  color: #ffffff;
  opacity: 0.8;
}

.engineersbook-scroll-indicator {
  color: #ffffff;
  opacity: 0.8;
}

/* Brand Header - EngineersBook specific overrides */
.engineersbook-landing .brand-header {
  background: linear-gradient(135deg, var(--engineersbook-primary), var(--engineersbook-secondary));
  color: white;
  padding: 4rem 0;
  margin-top: 76px; /* Account for fixed navbar */
}

[data-bs-theme=dark] .engineersbook-landing .brand-header {
  background: linear-gradient(135deg, #3a7bc8, #5a93d8);
  color: white;
}

/* Responsive adjustments for brand header */
@media (max-width: 768px) {
  .engineersbook-landing .brand-header {
    padding: 2rem 0;
    margin-top: 76px; /* Maintain spacing for fixed navbar on mobile */
  }
}
/* EngineersBook Navbar Background - More specific selector to override general navbar styles */
nav.navbar[data-brand=engineersbook],
[data-brand=engineersbook] nav.navbar.fixed-top {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--engineersbook-primary);
}

[data-bs-theme=dark] nav.navbar[data-brand=engineersbook],
[data-bs-theme=dark][data-brand=engineersbook] nav.navbar.fixed-top {
  background-color: rgba(33, 37, 41, 0.95);
  border-bottom: 2px solid var(--engineersbook-primary);
}

/* Feature Cards */
.engineersbook-feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 4px solid var(--engineersbook-primary);
  border-radius: 15px;
}

.engineersbook-feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.engineersbook-icon-container {
  width: 80px;
  height: 80px;
  transition: transform 0.3s ease;
}

/* Brand-specific elements */
.brand-engineersbook .card {
  border-left: 4px solid var(--engineersbook-primary);
}

.brand-engineersbook .btn-primary {
  background-color: var(--engineersbook-primary);
  border-color: var(--engineersbook-primary);
}

.brand-engineersbook .btn-primary:hover {
  background-color: var(--engineersbook-secondary);
  border-color: var(--engineersbook-secondary);
}

.brand-engineersbook .btn-warning {
  background-color: var(--engineersbook-warning);
  border-color: var(--engineersbook-warning);
  color: var(--engineersbook-dark);
}

.brand-engineersbook .btn-warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
}

/* Improve legibility for highlighted word in hero on light backgrounds */
.engineersbook-hero-title .hero-highlight {
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.45);
}

/* Relax heavy stroke in dark mode so yellow remains bright.
   Keyed off [data-bs-theme=dark] (the app's actual theme switch), not
   prefers-color-scheme - the two are independent since users/brands can
   override the OS preference. */
[data-bs-theme="dark"] .engineersbook-hero-title .hero-highlight {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  -webkit-text-stroke: 0px rgba(0, 0, 0, 0);
}
/* Animation */
.animate-bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .engineersbook-landing .engineersbook-hero-section {
    min-height: 80vh;
  }
  .engineersbook-logo {
    height: 60px;
  }
  .engineersbook-icon-container {
    width: 60px;
    height: 60px;
  }
}

/* Tom Select Fixes - Prevent resizing and maintain full width */
/* Ensure the tom-select control maintains full width of its container */
/* BEGIN: stylesheets/tom_select.css */
.ts-control {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  transition: none !important;
}

/* Prevent the control from shrinking when clicked or focused */
.ts-control:focus,
.ts-control:active,
.ts-control.is-focused {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* Ensure the dropdown wrapper maintains proper width */
.ts-dropdown {
  width: 100% !important;
  min-width: 100% !important;
}

/* Allow the dropdown content to expand beyond container if needed */
.ts-dropdown-content {
  min-width: 100% !important;
}

/* Ensure the input field inside tom-select maintains full width */
.ts-control input {
  width: 100% !important;
  min-width: 100% !important;
}

/* Fix for single select mode */
.ts-control.single .ts-control-input {
  width: 100% !important;
  min-width: 100% !important;
}

/* Fix for multi-select mode */
.ts-control.multi .ts-control-input {
  width: 100% !important;
  min-width: 100% !important;
}

/* Ensure the control doesn't shrink when items are selected */
.ts-control.multi .ts-control-items {
  width: 100% !important;
  min-width: 100% !important;
}

/* Prevent any flex shrinking */
.ts-control,
.ts-control * {
  flex-shrink: 0 !important;
}

/* Ensure proper box-sizing */
.ts-control,
.ts-control * {
  box-sizing: border-box !important;
}

/* Additional fixes for edge cases */
.ts-wrapper {
  width: 100% !important;
  min-width: 100% !important;
}

/* Ensure the control maintains width during state changes */
.ts-control.is-loading,
.ts-control.is-disabled,
.ts-control.is-open {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* Fix for when dropdown is open - ensure control doesn't shrink */
.ts-control.is-open .ts-control-input {
  width: 100% !important;
  min-width: 100% !important;
}

/* Dynamic per-instance width, set from JS via a CSS custom property (see
   tom_select_controller.js). Web Animations API is used to set --ts-select-width
   instead of element.style.width, which the style-src CSP blocks. */
.ts-select-sized {
  width: var(--ts-select-width, auto);
  min-width: var(--ts-select-width, auto);
}

.ts-control.ts-control-sized {
  width: var(--ts-select-width, 100%) !important;
  min-width: var(--ts-select-width, 100%) !important;
}


/* Trix Editor Customization */
/* Full Bootstrap-enabled editor for webpage content */
/* Fix Trix toolbar for dark theme */
/* BEGIN: stylesheets/trix_editor.css */
trix-toolbar {
  background-color: var(--bs-body-bg, #fff) !important;
  border: 1px solid var(--bs-border-color, #dee2e6) !important;
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

trix-toolbar .trix-button-group {
  border-color: var(--bs-border-color, #dee2e6) !important;
}

trix-toolbar .trix-button-group .trix-button {
  background-color: transparent !important;
  border-color: var(--bs-border-color, #dee2e6) !important;
  color: var(--bs-body-color, #212529) !important;
}

trix-toolbar .trix-button-group .trix-button:hover {
  background-color: var(--bs-secondary-bg, #e9ecef) !important;
  color: var(--bs-body-color, #212529) !important;
}

trix-toolbar .trix-button-group .trix-button.trix-active {
  background-color: var(--bs-primary, #0d6efd) !important;
  color: var(--bs-white, #fff) !important;
  border-color: var(--bs-primary, #0d6efd) !important;
}

trix-toolbar .trix-button-group .trix-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

trix-toolbar .trix-input {
  background-color: var(--bs-body-bg, #fff) !important;
  border-color: var(--bs-border-color, #dee2e6) !important;
  color: var(--bs-body-color, #212529) !important;
}

trix-toolbar .trix-input:focus {
  border-color: var(--bs-primary, #0d6efd) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25) !important;
}

/* Trix editor content area - allow Bootstrap components */
trix-editor {
  background-color: var(--bs-body-bg, #fff) !important;
  color: var(--bs-body-color, #212529) !important;
  border: 1px solid var(--bs-border-color, #dee2e6) !important;
  border-top: none !important;
  border-radius: 0 0 0.375rem 0.375rem !important;
  padding: 0.75rem !important;
  min-height: 400px !important;
  /* Allow Bootstrap components to display properly */
}

trix-editor .container,
trix-editor .container-fluid,
trix-editor .row,
trix-editor .col,
trix-editor [class*=col-],
trix-editor .card,
trix-editor .card-body,
trix-editor .card-header,
trix-editor .card-footer,
trix-editor .card-title,
trix-editor .card-text,
trix-editor table,
trix-editor thead,
trix-editor tbody,
trix-editor tr,
trix-editor td,
trix-editor th {
  display: revert !important;
}

trix-editor {
  /* Ensure Bootstrap classes work */
}

trix-editor .btn,
trix-editor .badge,
trix-editor .alert,
trix-editor .list-group,
trix-editor .list-group-item {
  display: revert !important;
}

trix-editor {
  /* Style Bootstrap components in editor */
}

trix-editor .card {
  margin-bottom: 1rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
}

trix-editor .row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

trix-editor [class*=col-] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

trix-editor table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

trix-editor table th, trix-editor table td {
  padding: 0.5rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
}

trix-editor table thead th {
  background-color: var(--bs-secondary-bg, #e9ecef);
  font-weight: 600;
}

trix-editor {
  /* Ensure images are responsive */
}

trix-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
}

trix-editor {
  /* Basic text elements */
}

trix-editor p, trix-editor h1, trix-editor h2, trix-editor h3, trix-editor h4, trix-editor h5, trix-editor h6, trix-editor ul, trix-editor ol, trix-editor li, trix-editor strong, trix-editor em, trix-editor a, trix-editor blockquote {
  display: revert;
}

trix-editor {
  /* Prevent overflow issues */
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* Focus state */
}

trix-editor:focus {
  border-color: var(--bs-primary, #0d6efd) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25) !important;
  outline: 0;
}

/* Ensure Trix editor wrapper has proper styling */
.trix-content {
  min-height: 400px;
  /* Use theme colors */
  color: var(--bs-body-color, #212529);
  font-size: 1rem;
  line-height: 1.6;
  /* Prevent layout breaking */
  max-width: 100%;
  overflow-x: auto;
}


/* EngineersBook Landing Page Styles */
/* BEGIN: stylesheets/engineersbook.css */

/* Search Container */
.engineersbook-search-container {
  max-width: 600px;
  margin: 0 auto;
}

.engineersbook-search-container .form-control {
  border: none;
  border-radius: 50px 0 0 50px;
  padding: 15px 25px;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.engineersbook-search-container .btn {
  border-radius: 0 50px 50px 0;
  padding: 15px 25px;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.engineersbook-feature-card:hover .engineersbook-icon-container {
  transform: scale(1.1);
}

/* Stats Section */
.engineersbook-stat-item {
  transition: transform 0.3s ease;
}

.engineersbook-stat-item:hover {
  transform: translateY(-5px);
}

.engineersbook-stat-number {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Discipline Search Form Styles */
.discipline-search-form {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  transition: all 0.3s ease;
}

.discipline-search-form:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.discipline-search-form h4 {
  color: #495057;
  font-weight: 600;
}

.discipline-search-form .form-label {
  color: #495057;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.discipline-search-form .form-select {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.discipline-search-form .form-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.discipline-search-form .btn-primary {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.discipline-search-form .btn-primary:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

.discipline-search-form .btn-outline-secondary {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.discipline-search-form .btn-outline-secondary:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  transform: translateY(-1px);
}

/* Search Results Summary */
.discipline-search-form .border-top {
  border-color: #dee2e6 !important;
}

.discipline-search-form small {
  font-size: 0.85rem;
  line-height: 1.4;
}

.discipline-search-form strong {
  color: #495057;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .discipline-search-form .col-md-6,
  .discipline-search-form .col-md-3 {
    margin-bottom: 1rem;
  }
  .discipline-search-form .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}
/* Buttons */
.btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

.btn-warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
  color: #000;
}

.btn-outline-light:hover {
  background-color: #fff;
  color: #007bff;
}

/* Text Colors - Ensuring Contrast */
.text-white-50 {
  color: rgba(255, 255, 255, 0.8) !important;
}

.text-muted {
  color: #6c757d !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .engineersbook-hero-section h1 {
    font-size: 2.5rem;
  }
  .engineersbook-hero-section .lead {
    font-size: 1.1rem;
  }
  .engineersbook-search-container .form-control,
  .engineersbook-search-container .btn {
    padding: 12px 20px;
    font-size: 1rem;
  }
}
@media (max-width: 576px) {
  .engineersbook-hero-section h1 {
    font-size: 2rem;
  }
  .engineersbook-hero-section .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .engineersbook-stat-number {
    font-size: 2rem !important;
  }
}
/* Dark mode support - keyed off [data-bs-theme=dark] (the app's actual theme
   switch), not prefers-color-scheme, which never matches when the app
   overrides the OS preference (e.g. this brand's default is dark). */
[data-bs-theme="dark"] .engineersbook-feature-card {
  background-color: #2d3748;
  color: #e2e8f0;
}
/* Accessibility improvements */
.engineersbook-feature-card:focus-within {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

.btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Print styles */
@media print {
  .engineersbook-hero-section {
    height: auto;
    background: none;
    color: #000;
  }
  .engineersbook-hero-overlay {
    background: none;
  }
}

/* Bootstrap-compatible overlay theming */
/* Dark theme (default) */
:root {
  --bs-overlay-bg: rgba(0, 0, 0, 0.85);
  --bs-hero-overlay-bg: rgba(0, 0, 0, 0.8);
  --bs-overlay-text-color: rgb(233, 233, 233);
  --bs-overlay-text-bg: rgba(33, 37, 41, 0.5);
  --bs-header-gradient-start: rgba(224, 51, 51, 0);
  --bs-header-gradient-middle: rgba(0, 0, 0, 0.3);
  --bs-header-gradient-end: rgba(0, 0, 0, 1);
}

/* Light theme */
[data-bs-theme=light] {
  --bs-overlay-bg: rgba(255, 255, 255, 0.85);
  --bs-hero-overlay-bg: rgba(255, 255, 255, 0.8);
  --bs-overlay-text-color: #212529;
  --bs-overlay-text-bg: rgba(255, 255, 255, 0.8);
  --bs-header-gradient-start: rgba(224, 51, 51, 0);
  --bs-header-gradient-middle: rgba(255, 255, 255, 0.3);
  --bs-header-gradient-end: rgba(255, 255, 255, 1);
}

/* Header gradient overlay */
.header-image-fallback-overlay {
  background: linear-gradient(to bottom, var(--bs-header-gradient-start) 0%, var(--bs-header-gradient-middle) 50%, var(--bs-header-gradient-end) 100%);
}


/* BEGIN: stylesheets/pipeline.css */
.icon-green {
  color: green;
}

.icon-yellow {
  color: #d8d80a;
}

.icon-red {
  color: red;
}

.icon-orange {
  color: orange;
}

.icon-grey {
  color: grey;
}

.icon-purple {
  color: purple;
}

.icon-mauve {
  color: magenta;
}

.icon-light {
  color: lightgray;
}

.icon-blue {
  color: #2727c4;
}


/* Custom CSS for records, individual and conditional */
/* 0c as saturation for background colours, makes it just subtle enough not to clash */
/* change the background colour for leads as many records look the same */
/* BEGIN: stylesheets/records.css */
.lead-bg {
  background: linear-gradient(45deg, transparent 49%, rgba(154, 154, 154, 0.1098039216) 49% 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, rgba(154, 154, 154, 0.1098039216) 49% 51%, transparent 51%);
  background-size: 1em 1em;
}

/* change the background colour for targets as many records look the same */
.target-bg {
  /* lets get the hex calculator in here to calculate the colour for this */
  background: radial-gradient(circle, transparent 25%, #ffffff 26%), linear-gradient(0deg, transparent 44%, rgba(154, 154, 154, 0.1098039216) 45%, rgba(154, 154, 154, 0.1098039216) 55%, transparent 56%), linear-gradient(90deg, transparent 44%, rgba(154, 154, 154, 0.1098039216) 45%, rgba(154, 154, 154, 0.1098039216) 55%, transparent 56%);
  background-size: 1em 1em;
}

.disabled-bg {
  opacity: 0.4;
}


/* css behaviour for inline edit fields */
/* BEGIN: stylesheets/inline_behaviour.css */
.inline-action {
  display: none;
}

.inline-edit .inline-action {
  display: initial;
}

.pencil-icon-parent .pencil-icon-hide {
  display: none;
}

.pencil-icon-parent:hover .pencil-icon-hide {
  display: inline;
}

/* for fields requiring entry, class required */
.required::after {
  content: " *";
  color: red;
}


/* BEGIN: stylesheets/topbar.css */
.topbar {
  position: scroll;
  width: 80%;
}


/* BEGIN: stylesheets/accordions.css */
.accordionactivities {
  background-color: rgba(206, 206, 206, 0);
  border: none;
}

.accordionactivities-button {
  position: relative;
  margin-right: -10em;
  margin-top: 0;
  background-color: rgba(143, 184, 29, 0);
}

.zaccordionactivities-button:focus {
  border: 1px;
  background-color: rgba(143, 184, 29, 0);
}

.zaccordionactivities-button:not(.collapsed) {
  border: 1px;
  background-color: rgba(84, 0, 201, 0);
}

.accordionactivities .accordion-button::after {
  position: absolute; /* Position the pseudo-element relative to its parent */
  right: 0; /* Adjust the position from the right edge of the parent */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/></svg>");
}

.accordionactivities .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/></svg>");
}

/* The Admin area at the top of a business's profile: yellow, open or closed, in both themes. */
.admin-area-accordion {
  --bs-accordion-border-color: var(--bs-warning);
  --bs-accordion-btn-bg: var(--bs-warning);
  --bs-accordion-btn-color: var(--bs-dark);
  --bs-accordion-active-bg: var(--bs-warning);
  --bs-accordion-active-color: var(--bs-dark);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.4);
}

.admin-area-accordion .accordion-button,
.admin-area-accordion .accordion-button:not(.collapsed) {
  font-weight: 600;
}

.admin-area-accordion .accordion-button::after,
.admin-area-accordion .accordion-button:not(.collapsed)::after {
  filter: brightness(0);
}

/* Admin > Businesses: the View/Owner column beside each business's accordion button, and its heading. */
.admin-businesses-actions-col {
  flex: 0 0 9rem;
}

.move-activity-expand-over {
  top: 1rem;
  right: 1rem;
  padding: 2px;
  margin-top: 0px;
  margin-left: 0px;
}


/* BEGIN: stylesheets/dropdowns.css */
.dropdown-actions {
  min-width: 7vw;
  max-width: 50vw;
  width: auto;
  white-space: nowrap; /* Prevents text wrapping */
  border: 2px solid #5e5d5d; /* Example: 1px solid black border */
  background-color: #262626;
}

/* Admin dropdown items with bg-body-tertiary - hover states for light and dark themes */
.bg-body-tertiary.dropdown-header,
li.bg-body-tertiary {
  transition: background-color 0.15s ease-in-out;
  position: relative;
}

.bg-body-tertiary.dropdown-header .dropdown-item,
li.bg-body-tertiary .dropdown-item {
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  border-radius: var(--bs-border-radius-sm);
}

/* Light theme hover - subtle primary tint */
[data-bs-theme=light] .bg-body-tertiary.dropdown-header:hover,
[data-bs-theme=light] li.bg-body-tertiary:hover {
  /* Use rgba with Bootstrap default primary blue for light theme */
  background-color: rgba(13, 110, 253, 0.1) !important;
}

[data-bs-theme=light] .bg-body-tertiary.dropdown-header:hover .dropdown-item,
[data-bs-theme=light] li.bg-body-tertiary:hover .dropdown-item {
  background-color: transparent !important;
  color: var(--bs-primary, #0d6efd) !important;
}

/* Dark theme hover - more visible primary tint */
[data-bs-theme=dark] .bg-body-tertiary.dropdown-header:hover,
[data-bs-theme=dark] li.bg-body-tertiary:hover {
  /* Use rgba with Bootstrap default primary blue for dark theme */
  background-color: rgba(13, 110, 253, 0.25) !important;
}

[data-bs-theme=dark] .bg-body-tertiary.dropdown-header:hover .dropdown-item,
[data-bs-theme=dark] li.bg-body-tertiary:hover .dropdown-item {
  background-color: transparent !important;
  color: var(--bs-primary-text-emphasis, #6ea8fe) !important;
}

/* Fallback for themes without data-bs-theme attribute (light mode default) */
.bg-body-tertiary.dropdown-header:hover,
li.bg-body-tertiary:hover {
  /* Fallback to rgba with Bootstrap default primary blue */
  background-color: rgba(13, 110, 253, 0.1) !important;
}

.bg-body-tertiary.dropdown-header:hover .dropdown-item,
li.bg-body-tertiary:hover .dropdown-item {
  background-color: transparent !important;
  color: var(--bs-primary, #0d6efd) !important;
}

/* Ensure dropdown items inside bg-body-tertiary inherit hover from parent */
li.bg-body-tertiary .dropdown-item:hover {
  background-color: transparent !important;
}


/* Rotate 360 degrees */
/* BEGIN: stylesheets/animations.css */
@keyframes rotatefull {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Rotate 360 degrees */
@keyframes rotatewobble {
  0% {
    transform: rotate(-5deg);
  }
  30% {
    transform: rotate(30deg);
  }
  60% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* Change from red to yellow */
@keyframes colourmorph {
  to {
    background-color: white;
  }
}
/* Change from red to yellow */
@keyframes moveforward {
  0% {
    transform: translate(2px, 0);
  }
  25% {
    transform: translate(4px, 0);
  }
  50% {
    transform: translate(6px, 0);
  }
  75% {
    transform: translate(4px, 0);
  }
  100% {
    transform: translate(2px, 0);
  }
}
/* Increase font size */
@keyframes embolden {
  25% {
    font-size: 17px;
  }
}

/* BEGIN: stylesheets/admin_dashboard.css */
.hover-bg-light {
  transition: background-color 0.15s ease;
}

.hover-bg-light:hover {
  background-color: var(--bs-body-secondary-bg) !important;
}

.nav-link {
  padding: 0.75rem 1rem;
}

.icon-xs {
  font-size: 0.5rem;
}

.icon-2xl {
  font-size: 2rem;
}


/* BEGIN: app/assets/stylesheets/admin/feature_flags.css */
/* Feature flags admin page styles */
.feature-flag-section {
  scroll-margin-top: 100px;
  scroll-padding-top: 100px;
}

/* Ensure smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}


/* Application-specific styles */
.hover-card {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
}
.hover-card:hover {
  transform: scale(1.02);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}
.hover-card:hover .badge {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}

/* Sticky action footer for question selection */
.sticky-action-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: #ffffff;
  border-top: 2px solid #0d6efd;
  box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 1rem 0;
  margin: 0;
}
.sticky-action-footer .container-fluid {
  padding-left: var(--bs-gutter-x, 1.5rem);
  padding-right: var(--bs-gutter-x, 1.5rem);
}
@media (max-width: 575.98px) {
  .sticky-action-footer {
    padding: 0.75rem 0;
  }
  .sticky-action-footer .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Listing read-only / disabled interaction cues */
.listing-read-only-alert {
  border-width: 2px;
}

.listing-read-only-card {
  border-style: dashed;
}

.listing-disabled-hint {
  font-weight: 600;
}

.listing-disabled-button {
  opacity: 0.75;
}

.record-read-only-alert {
  border-width: 2px;
}

.record-read-only-card {
  border-style: dashed;
}

.record-disabled-hint {
  font-weight: 600;
}

.record-disabled-button {
  opacity: 0.75;
}

[data-bs-theme=dark] .listing-read-only-alert {
  background-color: rgba(255, 193, 7, 0.2);
  border-color: rgba(255, 193, 7, 0.85);
  color: #ffe69c;
}

[data-bs-theme=dark] .listing-read-only-card {
  border-color: rgba(255, 193, 7, 0.65);
  box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.25);
}

[data-bs-theme=dark] .listing-disabled-hint {
  color: #ffd666;
}

[data-bs-theme=dark] .listing-disabled-button[disabled] {
  background-color: #495057;
  border-color: #6c757d;
  color: #dee2e6;
  opacity: 1;
}

[data-bs-theme=dark] .record-read-only-alert {
  background-color: rgba(255, 193, 7, 0.2);
  border-color: rgba(255, 193, 7, 0.85);
  color: #ffe69c;
}

[data-bs-theme=dark] .record-read-only-card {
  border-color: rgba(255, 193, 7, 0.65);
  box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.25);
}

[data-bs-theme=dark] .record-disabled-hint {
  color: #ffd666;
}

[data-bs-theme=dark] .record-disabled-button[disabled] {
  background-color: #495057;
  border-color: #6c757d;
  color: #dee2e6;
  opacity: 1;
}

.hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Channel logo previews */
.channel-logo-thumb {
  display: block;
  width: 96px;
  height: 56px;
  object-fit: contain;
}

.channel-logo-preview-box {
  min-height: 134px;
  overflow: hidden;
}

.channel-logo-preview-frame {
  height: 86px;
  width: 100%;
  max-width: 220px;
  overflow: hidden;
}

.channel-logo-preview-img {
  display: block;
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.channel-logo-show-frame {
  height: 76px;
  overflow: hidden;
}

.channel-logo-show-img {
  display: block;
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.channel-colour-swatch {
  min-height: 96px;
}

.channel-colour-label {
  background: rgba(255, 255, 255, 0.82);
}

/* Feature flag bulk change bar */
.ff-change-bar { display: none; z-index: 1060; }
.ff-change-bar.visible {
  display: block !important;
  position: fixed;
  top: 65px; /* below fixed-top navbar */
  left: 0; right: 0;
  /* Theme variables, not fixed light colours — the bar was unreadable in dark mode. */
  background: var(--bs-info-bg-subtle);
  color: var(--bs-info-text-emphasis);
  border-bottom: 1px solid var(--bs-info-border-subtle);
  box-shadow: var(--bs-box-shadow-sm);
}
.ff-change-bar .ff-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 1rem; overflow: hidden; }
.ff-change-bar .ff-message { font-size: 0.9rem; margin: 0; flex: 0 0 auto; white-space: nowrap; }
.ff-change-bar .ff-reason { flex: 1 1 auto; min-width: 180px; max-width: 420px; }
.ff-change-bar .ff-reason input { height: 30px; font-size: 0.85rem; }
.ff-change-bar .ff-reason .invalid-feedback { font-size: 0.75rem; }
.ff-change-bar .ff-status { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; white-space: nowrap; }
.ff-change-bar .ff-actions { flex: 0 0 auto; display: flex; gap: 0.5rem; align-items: center; }
.ff-change-bar .ff-actions button { min-width: 72px; height: 30px; padding: 0 0.5rem; font-size: 0.85rem; }

/* === CSP compliance: utility classes extracted from inline styles === */

/* Brand-specific color text utilities */
.text-transportbook-primary       { color: var(--transportbook-primary); }
.text-engineersbook-primary { color: var(--engineersbook-primary); }

/* Brand step/feature number circles (join/owner pages) */
.brand-step-circle {
  width: 60px; height: 60px;
  background-color: var(--brand-primary, #007bff);
  color: #fff;
  font-size: 1.5rem; font-weight: bold;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
}

/* Generic transition for interactive cards */
.transition-all { transition: all 0.3s; }

/* Lets a flex child shrink below its content's intrinsic width instead of
   overflowing — Bootstrap ships .mw-100 (max-width) but no min-width
   counterpart. */
.min-w-0 { min-width: 0; }

/* shared/_help_popover's "?" trigger — a small fixed circle so it reads as a
   consistent affordance next to badges, headings, and buttons. */
.help-popover-trigger {
  width: 22px; height: 22px; line-height: 1; font-size: .72rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Fixed-size icon circles */
.icon-circle-sm { width: 32px; height: 32px; }
.icon-circle-md { width: 40px; height: 40px; }

/* Thin progress/score bar track */
.progress-track-sm { height: 8px; }

/* Sub-1rem font sizes (Bootstrap fs-* stops at fs-6 = 1rem) */
.fs-xs    { font-size: 0.75rem; }
.fs-7     { font-size: 0.7rem; }
.fs-xxs   { font-size: 0.65rem; }
.fs-micro { font-size: 0.55rem; }

/* Flexbox min-width override (prevents overflow in flex containers) */
.min-w-0 { min-width: 0; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer; }

/* Pre-formatted content (tokens, API keys, code snippets) */
.pre-wrap-text { white-space: pre-wrap; word-wrap: break-word; font-size: 0.875rem; }

/* Max-height scroll containers */
.mh-200 { max-height: 200px; }
.mh-300 { max-height: 300px; }
.mh-400 { max-height: 400px; }
.mh-500 { max-height: 500px; }
.mh-600 { max-height: 600px; }
.mh-800 { max-height: 800px; }

/* Fixed-height containers */
.h-300 { height: 300px; }

/* Max-width content constraints */
.mw-200 { max-width: 200px; }
.mw-220 { max-width: 220px; }
.mw-300 { max-width: 300px; }
.mw-600 { max-width: 600px; }
.mw-650 { max-width: 650px; }
.mw-900 { max-width: 900px; }

/* Word break */
.word-break-all { word-break: break-all; }

/* Admin settings sticky sidebar */
.admin-sidebar-sticky { position: sticky; top: 100px !important; max-height: calc(100vh - 4rem); overflow-y: auto; }

/* Back-to-top floating button (hidden by default, shown by anchor-menu controller) */
.back-to-top-btn { bottom: 6rem; right: 1rem; z-index: 1000; display: none; }
.back-to-top-btn.is-visible { display: block; }

/* Subtle gradient backgrounds */
.bg-gradient-subtle       { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); }
.bg-gradient-white        { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); }
.bg-gradient-success-light { background: linear-gradient(135deg, #d1e7dd 0%, #ffffff 100%); }

/* Brand-primary CTA buttons */
.btn-transportbook-primary { background-color: var(--transportbook-primary); color: #fff; border: none; }
.btn-transportbook-primary:hover { background-color: var(--transportbook-primary); color: #fff; filter: brightness(0.9); }
.btn-engineersbook-primary { background-color: var(--engineersbook-primary); color: #fff; border: none; }
.btn-engineersbook-primary:hover { background-color: var(--engineersbook-primary); color: #fff; filter: brightness(0.9); }

/* Transportbook logo hero sizing */
.transportbook-hero-logo { height: 120px; width: auto; max-width: 100%; }

/* Membership footer card */
.membership-card-gradient { background: linear-gradient(135deg, var(--bs-body-bg) 0%, var(--bs-tertiary-bg) 100%); box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .08), 0 .125rem .25rem rgba(0,0,0,.075); }
.membership-top-bar { height: 3px; background: linear-gradient(90deg, var(--bs-primary), var(--bs-info), var(--bs-warning)); opacity: .75; }
.dot-65 { width: .65rem; height: .65rem; }

/* Micro typography utilities */
.fs-88 { font-size: .88rem; }
.fs-72 { font-size: .72rem; }
.fs-85 { font-size: .85rem; }
.fs-65em-opacity { font-size: 0.65em; opacity: 0.7; }
.letter-spacing-sm { letter-spacing: .06em; }

/* Fixed icon/display font sizes */
.fs-2rem { font-size: 2rem; }
.fs-3rem { font-size: 3rem; }
.fs-4rem { font-size: 4rem; }

/* Z-index utilities */
.z-10 { z-index: 10; }

/* Min-height utilities */
.min-h-8 { min-height: 8rem; }

/* Fixed-width utilities */
.w-50px  { width: 50px; }
.w-80px  { width: 80px; }
.w-100px { width: 100px; }
.w-200px { width: 200px; }

/* Fixed-size icon circles */
.icon-circle-42 { width: 42px; height: 42px; }
.icon-circle-50 { width: 50px; height: 50px; }

/* Progress bar track dimensions */
.progress-track-200 { width: 200px; height: 8px; }
.progress-track-160 { width: 160px; height: 6px; }
.progress-track-60  { width:  60px; height: 6px; }
.progress-bar-w80   { width:  80px; height: 20px; }

/* Brand gradient backgrounds */
.bg-gradient-brand { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); color: white; }
.text-overlay-white { color: var(--bs-overlay-text-color, #ffffff); }

/* Scroll containers — compose with Bootstrap mh-* and overflow-y-auto */
.overflow-x-auto-nowrap { overflow-x: auto; white-space: nowrap; }

/* Channel preview iframe */
.channel-preview-iframe { width: 100%; height: 720px; border: none; }

/* Blog post hero with background image (JS sets background-image via scoped_style_class helper) */
.hero-section-bg { background-size: cover; background-position: center; }

/* Sample page component sizes */
.sample-logo-sm   { height: 80px; width: 80px; object-fit: cover; }
.sample-avatar-lg { width: 120px; height: 120px; object-fit: cover; border: 4px solid transparent; }

/* Min-height utilities */
.min-h-60  { min-height: 60px; }
.min-h-120 { min-height: 120px; }
.min-h-200 { min-height: 200px; }

/* Fixed pixel heights for progress/chart elements */
.h-20px { height: 20px; }
.h-30px { height: 30px; }

/* Alert with primary left-border summary style */
.alert-summary { background-color: #f8f9fa; border-left-color: #0d6efd !important; }

/* Additional font-size utilities */
.fs-68   { font-size: 0.68rem; }
.fs-8px  { font-size: 8px; }
.fs-80   { font-size: 0.8rem; }
.fs-90   { font-size: 0.9rem; }
.fs-95   { font-size: 0.95rem; }
.fs-1rem1  { font-size: 1.1rem; }
.fs-1rem15 { font-size: 1.15rem; }
.fs-1rem2  { font-size: 1.2rem; }

/* Line-height utilities */
.lh-1-3 { line-height: 1.3; }

/* Inline abbreviation label width */
.abbr-label { width: 2.5rem; font-size: 0.8rem; }

/* Opacity */
.opacity-95 { opacity: 0.95; }

/* Percentage-based width utilities for table columns */
.w-20pct { width: 20%; }
.w-30pct { width: 30%; }
.w-50pct { width: 50%; }
.w-60pct { width: 60%; }

/* User avatar large */
.user-avatar-lg { width: 120px; height: 120px; font-size: 2.5rem; }
.badge-dot { width: 20px; height: 20px; }

/* Sticky sidebar variants */
.sticky-top-1rem { top: 1rem; }
.sticky-top-20   { top: 20px; z-index: 1020; }

/* Order progress track connector */
.order-progress-track { position: absolute; top: 18px; left: 18px; right: 18px; height: 2px; background: #dee2e6; z-index: 0; }
.order-progress-fill  { top: 18px; left: 18px; height: 2px; background: #0d6efd; z-index: 1; transition: width 0.5s; }
.order-phase-active   { box-shadow: 0 0 0 4px rgba(13,110,253,0.15); }
.icon-circle-36 { width: 36px; height: 36px; }

/* Progress bar variants */
.progress-bar-150 { width: 150px; height: 30px; }
.progress-bar-60-4 { width: 60px; height: 4px; }

/* List utilities */
.list-style-none { list-style: none; }

/* Box reset */
.border-none-shadow-none { border: none !important; box-shadow: none !important; }

/* Listing status badge overrides (admin/listings) */
.status-badge-pending  { background-color: #ffc107 !important; }
.status-badge-active   { background-color: #198754 !important; }
.status-badge-archived { background-color: #6c757d !important; }
.status-badge-flagged  { background-color: #dc3545 !important; }

/* Membership tier card (accounts/edit) */
.membership-tier-card {
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
  border: 2px solid var(--bs-border-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}
.membership-tier-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
  border-color: var(--bs-primary) !important;
}
.membership-tier-card.selected {
  border-color: var(--bs-primary) !important;
  border-width: 4px !important;
  box-shadow: 0 0 0 0.35rem rgba(13,110,253,0.35), 0 0.75rem 1.5rem rgba(0,0,0,0.2) !important;
  background-color: rgba(13,110,253,0.1) !important;
  transform: translateY(-3px);
}
.membership-tier-card.selected .card-body { background-color: transparent; }
[data-bs-theme="dark"] .membership-tier-card.selected {
  background-color: rgba(13,110,253,0.2) !important;
  box-shadow: 0 0 0 0.35rem rgba(13,110,253,0.4), 0 0.75rem 1.5rem rgba(0,0,0,0.5) !important;
}
.membership-tier-card.current-plan {
  border-color: var(--bs-success) !important;
  border-width: 3px !important;
  box-shadow: 0 0 0 0.2rem rgba(25,135,84,0.25), 0 0.25rem 0.5rem rgba(0,0,0,0.1) !important;
}
.membership-tier-card.current-plan:hover {
  transform: none !important;
  cursor: not-allowed !important;
  border-color: var(--bs-success) !important;
  box-shadow: 0 0 0 0.2rem rgba(25,135,84,0.25), 0 0.25rem 0.5rem rgba(0,0,0,0.1) !important;
}
.membership-tier-card.current-plan.border-primary { border-color: var(--bs-success) !important; }

/* Error page glitch animation (shared/error) */
.glitch { color: #fff; font-size: 100px; position: relative; width: 640px; margin: 0 auto; }
.glitch:after, .glitch:before { content: attr(data-text); position: absolute; top: 0; color: #fff; background: #18121A; overflow: hidden; }
@keyframes noise-anim {
  0%   { clip: rect(44px,9999px,32px,0); }  5%   { clip: rect(70px,9999px,10px,0); }
  10%  { clip: rect(81px,9999px,10px,0); }  15%  { clip: rect(77px,9999px,64px,0); }
  20%  { clip: rect(24px,9999px,87px,0); }  25%  { clip: rect(40px,9999px,65px,0); }
  30%  { clip: rect(87px,9999px,90px,0); }  35%  { clip: rect(50px,9999px,14px,0); }
  40%  { clip: rect(100px,9999px,19px,0); } 45%  { clip: rect(16px,9999px,7px,0); }
  50%  { clip: rect(17px,9999px,91px,0); }  55%  { clip: rect(84px,9999px,2px,0); }
  60%  { clip: rect(36px,9999px,9px,0); }   65%  { clip: rect(66px,9999px,3px,0); }
  70%  { clip: rect(25px,9999px,69px,0); }  75%  { clip: rect(72px,9999px,67px,0); }
  80%  { clip: rect(28px,9999px,40px,0); }  85%  { clip: rect(6px,9999px,80px,0); }
  90%  { clip: rect(58px,9999px,42px,0); }  95%  { clip: rect(22px,9999px,87px,0); }
  100% { clip: rect(97px,9999px,58px,0); }
}
.glitch:after { left: 2px; text-shadow: -2px 0 red; clip: rect(0,900px,0,0); animation: noise-anim 2s infinite linear alternate-reverse; }
@keyframes noise-anim-2 {
  0%   { clip: rect(66px,9999px,73px,0); }  5%   { clip: rect(31px,9999px,97px,0); }
  10%  { clip: rect(91px,9999px,84px,0); }  15%  { clip: rect(51px,9999px,72px,0); }
  20%  { clip: rect(79px,9999px,33px,0); }  25%  { clip: rect(81px,9999px,20px,0); }
  30%  { clip: rect(86px,9999px,64px,0); }  35%  { clip: rect(88px,9999px,98px,0); }
  40%  { clip: rect(69px,9999px,6px,0); }   45%  { clip: rect(24px,9999px,68px,0); }
  50%  { clip: rect(91px,9999px,79px,0); }  55%  { clip: rect(75px,9999px,79px,0); }
  60%  { clip: rect(84px,9999px,32px,0); }  65%  { clip: rect(90px,9999px,2px,0); }
  70%  { clip: rect(42px,9999px,84px,0); }  75%  { clip: rect(48px,9999px,14px,0); }
  80%  { clip: rect(79px,9999px,91px,0); }  85%  { clip: rect(77px,9999px,6px,0); }
  90%  { clip: rect(99px,9999px,75px,0); }  95%  { clip: rect(76px,9999px,60px,0); }
  100% { clip: rect(4px,9999px,50px,0); }
}
.glitch:before { left: -5px; text-shadow: 2px 0 #00f; clip: rect(0,900px,0,0); animation: noise-anim-2 3s infinite linear alternate-reverse; }

/* Dev dashboard (dev/dash) */
.dev-dashboard { min-height: 80vh; color: #e6eef1; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.dev-dashboard .sidebar { background: #061018; padding: 28px 18px; min-height: 80vh; }
.dev-dashboard .logo { font-weight: 700; color: #10bcd5; font-size: 20px; margin-bottom: 18px; }
.dev-dashboard .nav-link { color: #9fb0b6; padding: 10px 6px; display: flex; align-items: center; gap: 10px; border-radius: 8px; }
.dev-dashboard .nav-link.active { color: #10bcd5; background: rgba(16,188,213,0.05); }
.dev-main { padding: 28px; }
.dev-main h1 { font-size: 32px; margin-bottom: 6px; }
.dev-main .subtitle { color: #9fb0b6; margin-bottom: 18px; }
.metric-card { background: #0f1720; border-radius: 12px; padding: 18px; color: #ffffff; box-shadow: 0 6px 18px rgba(3,9,14,0.6); }
.metric-number { font-size: 28px; font-weight: 700; color: #10bcd5; }
.metric-label { font-size: 12px; color: #9fb0b6; text-transform: uppercase; letter-spacing: 0.06em; }
.account-card { background: #0f1720; border-radius: 12px; padding: 18px; color: #9fb0b6; margin-top: 18px; }
.progress.custom { height: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.progress.custom > .progress-bar { background: linear-gradient(90deg, #10bcd5, #15b8f0); }
.leads-table thead th { background: #0b1116; color: #9fb0b6; border-bottom: 1px solid rgba(255,255,255,0.04); font-weight: 600; }
.leads-table tbody td { background: #ffffff; color: #1f2937; vertical-align: middle; }
.lead-name { font-weight: 700; }
.lead-email { font-size: 12px; color: #9aa7af; }
.badge-status { display: inline-block; padding: 6px 10px; border-radius: 12px; font-weight: 700; font-size: 12px; }
.badge-new { background: #06b6d4; color: #fff; }
.badge-contacted { background: #ffb86b; color: #1b1b1b; }
.badge-converted { background: #2dd4bf; color: #073233; }
.action-btn { border-radius: 8px; border: 1px solid #12becd; color: #12becd; background: transparent; width: 40px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }

/* Cloudflare Turnstile
   Confirmed via a real rendered widget (ftest browser smoke test, 2026-09-21): Cloudflare
   renders the widget inside a CLOSED shadow root on .cf-turnstile - host.shadowRoot is null
   and no <iframe> is ever findable via querySelector, even while the widget is fully visible
   on screen. That means the light border Cloudflare paints is permanently unreachable by any
   descendant selector or `border: none` rule - closed shadow DOM blocks CSS/JS from styling
   or even detecting what's inside, by design.
   Clip it from the outside instead: overflow:hidden on a fixed-size .turnstile-frame plus a
   slight `zoom` on the host (not `transform: scale` - that rescales an already-painted bitmap
   of the iframe/shadow content, which is visibly blurry; `zoom` makes the browser re-render at
   the new size, staying crisp, but - unlike transform - it does change layout size, so the
   frame needs an explicit size instead of shrink-wrapping or there's nothing for it to clip
   against). 300x65 is Cloudflare's fixed size for the "normal" widget, the only size this app
   renders (see shared/_turnstile.html.erb). The zoomed-up widget overflows that fixed box on
   all sides and gets cropped, taking the border with it, while the checkbox/text - well inside
   the border ring - stay fully visible. */
.turnstile-frame { display: inline-block; overflow: hidden; border-radius: 4px; }
.cf-turnstile { background: transparent; line-height: 0; font-size: 0; }
/* `zoom` is non-standard (Chromium/WebKit always, Firefox only since 126, mid-2024) - feature-
   detect it rather than assume it, since a browser that ignores `zoom` would still apply the
   negative margin below with nothing to compensate for, shifting the widget instead of cropping
   it. Unsupported browsers fall through to the plain frame above - original Cloudflare look,
   border included, same as before this fix - rather than a broken misaligned one. zoom grows
   the box from its top-left corner, not its center, so the negative top/left margin (half the
   size increase from the 1.05 zoom: 300*0.05/2=7.5px, 65*0.05/2=1.625px) re-centers it, or the
   crop would land entirely on the bottom/right edge and the top/left border would stay. */
@supports (zoom: 1) {
  .turnstile-frame { width: 300px; height: 65px; } /* Cloudflare's fixed size for the "normal" widget - the only size this app renders */
  .cf-turnstile { zoom: 1.05; margin-top: -1.625px; margin-left: -7.5px; }
}

/* Picture slot previews */
.slot-preview-sm { width: 56px; height: 56px; }
.slot-preview-md { width: 80px; height: 80px; }
img.slot-preview-sm, img.slot-preview-md { display: block; object-fit: cover; }
.slot-preview-ph { font-size: 1.5rem; }
.slot-preview-landscape { display: block; width: 120px; }
.slot-preview-landscape-ph { width: 120px; height: 48px; font-size: 1rem; }
.slot-logo-btn { cursor: pointer; }
.slot-logo-modal-img { max-width: 100%; max-height: 200px; object-fit: contain; }
.slot-logo-modal-ph { width: 120px; height: 120px; font-size: 2rem; }
.picture-profile-preview { display: block; width: 80px; height: 80px; object-fit: cover; }
.picture-profile-preview-ph { width: 80px; height: 80px; font-size: 1.5rem; }
.contact-profile-img-ph { min-width: 50px; min-height: 50px; font-size: 1rem; }

/* Image lightbox modal */
.lightbox-dialog { width: min(90vw, 1280px); max-width: none; }
.lightbox-close { z-index: 10; }
.lightbox-img { max-width: 100%; max-height: 90vh; width: auto; height: auto; margin: 0 auto; }
.modal-preview-img { max-height: 70vh; }
.mh-100px { max-height: 100px; }
.preview-thumb-140 { max-height: 140px; object-fit: cover; }

/* CSP cleanup: replacements for hand-written inline style="" attributes.
   Pixel/percent width utilities for table columns and fixed-width fields. */
.w-36  { width: 36px; }
.w-40  { width: 40px; }
.w-60  { width: 60px; }
.w-70  { width: 70px; }
.w-90  { width: 90px; }
.w-110 { width: 110px; }
.w-120 { width: 120px; }
.w-140 { width: 140px; }
.w-150 { width: 150px; }
.w-160 { width: 160px; }
.w-180 { width: 180px; }
.w-220 { width: 220px; }
.w-230 { width: 230px; }
.w-2rem { width: 2rem; }
.w-40pct { width: 40%; }
.w-45pct { width: 45%; }
.w-55pct { width: 55%; }

.min-w-16  { min-width: 16px; }
.min-w-56  { min-width: 56px; }
.min-w-70  { min-width: 70px; }
.min-w-72  { min-width: 72px; }
.min-w-150 { min-width: 150px; }
.min-w-260 { min-width: 260px; }

.mw-80  { max-width: 80px; }
.mw-100px { max-width: 100px; }
.mw-140 { max-width: 140px; }
.mw-160 { max-width: 160px; }
.mw-280 { max-width: 280px; }
.mw-420 { max-width: 420px; }
.mw-640 { max-width: 640px; }
.mw-760 { max-width: 760px; }
.mw-260 { max-width: 260px; }
.mh-380 { max-height: 380px; }

.fs-60  { font-size: 0.6rem; }
.fs-7em { font-size: 0.7em; }

.ls-tight { letter-spacing: .05em; }
.border-dashed { border-style: dashed !important; }
.scroll-mt-4-5 { scroll-margin-top: 4.5rem; }
.resize-none { resize: none; }
.avatar-circle-48 { width: 48px; height: 48px; font-size: 1.1rem; letter-spacing: -1px; }
.test-toast-btn { bottom: 5.5rem; right: 1.5rem; font-size: 13px; }
/* On narrow viewports this fixed-position dev button sits over whatever form content
   happens to be scrolled into the bottom-right corner (e.g. the last field on
   /users/settings) — shrink it to an icon-only tap target and dim it until touched/focused
   so it stops covering page content while still being reachable. Dev/test only. */
@media (max-width: 576px) {
  .test-toast-btn {
    bottom: 1rem;
    right: 1rem;
    padding: 0.5rem !important;
    opacity: 0.55;
  }
  .test-toast-btn:active,
  .test-toast-btn:focus {
    opacity: 1;
  }
  .test-toast-btn .test-toast-btn-label {
    display: none;
  }
}
.font-mono-sm { font-family: monospace; font-size: 0.875rem; }
.hero-logo-60 { height: 60px; width: auto; }
.avatar-32 { width: 32px; height: 32px; object-fit: cover; }
.checkbox-lg { width: 20px; height: 20px; cursor: pointer; }
.h-100px { height: 100px; }
.h-200px { height: 200px; }
.h-500px { height: 500px; }
.mh-120 { max-height: 120px; }
.logo-mini-inline { display: inline; width: 50px; }
.logo-mini-50 { height: 50px; }

/* Unstyled <turbo-frame> defaults to display:inline, which breaks
   align-items:center for the badge nested inside it in the navbar. display:contents
   removes the frame's own box, so align-items:center on it would have nothing to act
   on - centering the <li>'s own content (placeholder or loaded) has to target the <li>
   itself, one level down. One rule here covers both the "Checking..." placeholder and
   whatever the turbo-frame swaps in, instead of a utility class on each variant. */
turbo-frame#stage7-connection-status {
    display: contents;
}
turbo-frame#stage7-connection-status > li {
    display: flex;
    align-items: center;
}

/* Collapsible section chevron icon (collapsible_section_controller.js):
   rotates open/closed as sections expand/collapse. Toggled via classList,
   not element.style.transform - inline style mutations are blocked by this
   app's CSP (style-src has no unsafe-inline). */
.collapsible-section-icon {
    transition: transform 0.3s ease;
}
.collapsible-section-icon.collapsible-section-icon-expanded {
    transform: rotate(180deg);
}

/* Scrollable <pre> blocks in url_tester_controller.js's rendered request/response
   detail panels. Previously inline style="..." in the JS template literal - inline
   style attributes are blocked by this app's CSP (style-src has no unsafe-inline). */
.url-tester-pre-200 {
    max-height: 200px;
    overflow-y: auto;
}
.url-tester-pre-300 {
    max-height: 300px;
    overflow-y: auto;
}
.url-tester-pre-400 {
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.85em;
    white-space: pre-wrap;
}
.url-tester-pre-500 {
    max-height: 500px;
    overflow-y: auto;
    font-size: 0.8em;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Icon <select> in service_agreement_editor_controller.js's item template - previously
   inline style="width:140px;" in the JS template literal (blocked by CSP style-src). */
.service-agreement-icon-select {
    width: 140px;
}

/* Offscreen scratch <textarea> used by clipboard_copy_controller.js's
   document.execCommand('copy') fallback - never visible, just needs to sit
   outside the viewport. Previously set via element.style.* (blocked by CSP). */
.clipboard-fallback-textarea {
    position: fixed;
    left: -999999px;
    top: -999999px;
}

/* Connection show page — pipeline progress spectrum. A continuous gradient track
   standing in for the stage stepper's plain divider lines, with a marker (positioned
   per-connection via ScopedStyleHelper, see connections/show.html.erb) showing where
   this connection's progress_percentage sits along the New -> Advocate journey. The
   gradient itself is static (same for every connection) so it lives here rather than
   behind a scoped style rule. */
.connection-spectrum-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4d7cfe 0%, #2fc4c4 28%, #f4c542 55%, #ff9a56 75%, #34c759 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}
[data-bs-theme="dark"] .connection-spectrum-track {
    background: linear-gradient(90deg, #5b7fd8 0%, #2fa8a8 28%, #d9ad3c 55%, #d67f45 75%, #2fa855 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
/* A body-bg fill alone blends into the card behind it once it's off the gradient's
   own hues, so the ring below is a fixed black/white outline (not theme-matched)
   precisely so it reads as "marker" against every color the gradient passes through.
   The caret above echoes the bi-caret-down-fill "you are here" pointer already used
   near the stage stepper on this page. */
.connection-spectrum-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bs-body-bg);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .45);
    z-index: 1;
}
[data-bs-theme="dark"] .connection-spectrum-marker {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .8), 0 2px 6px rgba(0, 0, 0, .6);
}
.connection-spectrum-marker::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid rgba(0, 0, 0, .7);
}
[data-bs-theme="dark"] .connection-spectrum-marker::before {
    border-bottom-color: rgba(255, 255, 255, .8);
}
.connection-spectrum-marker-dot {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
}
/* Marker position/color used to be a per-request scoped_style_class rule (see
   ScopedStyleHelper), but that's a nonce'd inline <style> block, and this page is
   loaded almost exclusively via a Turbo Frame swap into the connection-view modal.
   Turbo's frame-swap rebuilds the fetched HTML into the live document in a way that
   invalidates the nonce on any inline <style>/<script> it carries (a documented
   Turbo/CSP nonce limitation, unrelated to whether the nonce itself was generated
   correctly server-side — confirmed correct via a raw fetch of the same response).
   CSP then silently blocks the block and the marker renders with no position/color.
   A real <head>-rendered full-page visit doesn't hit this, only the modal path does
   — which is how this page is opened almost everywhere in the app. Both values here
   are drawn from small closed sets (stage is always an integer 0-8; recency_color is
   one of 5 fixed strings — see Connection#recency_color), so static classes from
   this stylesheet sidestep the nonce entirely: this file is self-hosted and always
   allowed by style-src 'self', no nonce needed, nothing for Turbo to invalidate. */
.connection-spectrum-marker-pos-0 { left: 0%; }
.connection-spectrum-marker-pos-1 { left: 12.5%; }
.connection-spectrum-marker-pos-2 { left: 25%; }
.connection-spectrum-marker-pos-3 { left: 37.5%; }
.connection-spectrum-marker-pos-4 { left: 50%; }
.connection-spectrum-marker-pos-5 { left: 62.5%; }
.connection-spectrum-marker-pos-6 { left: 75%; }
.connection-spectrum-marker-pos-7 { left: 87.5%; }
.connection-spectrum-marker-pos-8 { left: 100%; }
.connection-spectrum-marker-color-green  { background-color: green; }
.connection-spectrum-marker-color-yellow { background-color: #d8d80a; }
.connection-spectrum-marker-color-orange { background-color: orange; }
.connection-spectrum-marker-color-red    { background-color: red; }
.connection-spectrum-marker-color-grey   { background-color: grey; }

/* The navbar bell's notifications dropdown (shared/widgets/_notification_bell): wide enough for a
   notification's subject, never wider than a phone screen. */
.notification-bell-menu {
  width: 22rem;
  max-width: calc(100vw - 2rem);
}

/* In the collapsed (phone) navbar the bell's dropdown opens in the flow under it: the full width
   of the menu, not 22rem out from a centred bell and off the right of the screen. */
@media (max-width: 991.98px) {
  .notification-bell-item,
  .notification-bell-item .dropdown {
    width: 100%;
    text-align: center;
  }
  .notification-bell-item {
    margin-right: 0 !important;
  }
  .notification-bell-menu {
    width: 100%;
    max-width: none;
    text-align: start;
  }
}

/* Do-not-deal advisory over a profile (businesses/directory/_deal_advisory_frame, the owner's
   decision 2026-10-25): the notice in words at the top, then the profile under a grey wash with a red
   ribbon from bottom left to top right. The wash and ribbon let clicks through, and no stacking
   context is made here, so the profile's own modals still open above everything. The frame clips the
   ribbon, so nothing scrolls sideways at phone width. */
.deal-advisory-frame {
    position: relative;
    overflow: hidden;
    overflow: clip;
}
.deal-advisory-notice {
    position: relative;
    z-index: 7;
}
.deal-advisory-body {
    position: relative;
}
.deal-advisory-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background-color: rgba(108, 117, 125, .45);
    pointer-events: none;
}
[data-bs-theme="dark"] .deal-advisory-overlay {
    background-color: rgba(73, 80, 87, .6);
}
.deal-advisory-ribbon {
    position: absolute;
    top: 14rem;
    left: 50%;
    z-index: 6;
    width: 160%;
    padding: .75rem 1rem;
    transform: translateX(-50%) rotate(-18deg);
    background-color: #a51d2d;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
    color: #fff;
    text-align: center;
    pointer-events: none;
}
.deal-advisory-ribbon-title {
    display: block;
    font-size: clamp(1.25rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.deal-advisory-ribbon-line {
    display: block;
    font-size: clamp(.8125rem, 2vw, 1.0625rem);
}
[data-bs-theme="dark"] .deal-advisory-ribbon {
    border-color: #dee2e6;
}
@media (max-width: 576px) {
    .deal-advisory-ribbon {
        top: 10rem;
        transform: translateX(-50%) rotate(-28deg);
    }
}
.deal-advisory-badge {
    white-space: nowrap;
}
/* Reputation ribbons across a profile's cover photo (businesses/directory/_hero_reputation_ribbon, the
   owner 2026-10-26): behind what's on the photo - the hero's content sits above them - and clipped to it,
   so nothing scrolls sideways. Restricted is a red band across the photo; low a quieter yellow sash
   across the corner. Clicks pass through. */
.hero-ribbon-host {
    position: relative;
    overflow: hidden;
    overflow: clip;
}
.hero-ribbon-content {
    position: relative;
    z-index: 2;
}
.hero-reputation-ribbon {
    position: absolute;
    z-index: 1;
    color: #fff;
    text-align: center;
    pointer-events: none;
}
.hero-reputation-restricted {
    top: 50%;
    left: 50%;
    width: 160%;
    padding: .5rem 1rem;
    transform: translate(-50%, -50%) rotate(-12deg);
    background-color: rgba(165, 29, 45, .9);
    border-top: 2px solid rgba(255, 255, 255, .85);
    border-bottom: 2px solid rgba(255, 255, 255, .85);
}
.hero-reputation-ribbon-title {
    display: block;
    font-size: clamp(1.125rem, 3.5vw, 2rem);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.hero-reputation-ribbon-line {
    display: block;
    font-size: clamp(.75rem, 1.8vw, 1rem);
}
.hero-reputation-low {
    top: 1.6rem;
    right: -3.6rem;
    width: 13.5rem;
    padding: .3rem 0;
    transform: rotate(35deg);
    background-color: #ffc107;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    color: #212529;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
/* The extra click before a low-reputation business's contact details (ReputationHelper#low_reputation_reveal). */
.reputation-reveal > summary {
    list-style: none;
}
.reputation-reveal > summary::-webkit-details-marker {
    display: none;
}
.reputation-reveal[open] > summary {
    display: none;
}

/* Cut a paragraph to three lines, for teasers on cards in a list */
.text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The expert badges (ExpertHelper#expert_badge): one shape for every tier, a colour per tier - Expert the logo's
   blue, Senior Expert green, Partner gold - each shading down like the counters, with a fine ring so it holds its
   edge on any card in either theme. The AI-agent note is a tinted segment inside the same pill. */
.expert-badge {
  --expert-badge-top: #3a6f9f;
  --expert-badge-bottom: #1d4976;
  --expert-badge-text: #fff;
  --expert-badge-ring: rgba(29, 73, 118, 0.35);
  --expert-badge-segment: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4em 0.8em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--expert-badge-text);
  background-image: linear-gradient(180deg, var(--expert-badge-top) 0%, var(--expert-badge-bottom) 100%);
  box-shadow: 0 0 0 1px var(--expert-badge-ring), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.expert-badge-senior-expert {
  --expert-badge-top: #3f9a68;
  --expert-badge-bottom: #1f6b43;
  --expert-badge-ring: rgba(31, 107, 67, 0.35);
}

.expert-badge-partner {
  --expert-badge-top: #f3d77f;
  --expert-badge-bottom: #c9972e;
  --expert-badge-text: #3b2a05;
  --expert-badge-ring: rgba(161, 117, 22, 0.45);
  --expert-badge-segment: rgba(59, 42, 5, 0.12);
}

[data-bs-theme="dark"] .expert-badge {
  --expert-badge-ring: rgba(255, 255, 255, 0.18);
}

.expert-badge .expert-badge-agent {
  margin-left: 0.35em;
  margin-right: -0.45em;
  padding: 0.15em 0.5em;
  border-radius: 50rem;
  background-color: var(--expert-badge-segment);
  font-weight: 500;
}

/* Public pages' accent colour (decided with the user 2026-11-04, docs/website-improvement/positioning.md).
   Navy and blue stay the structure. Ochre marks the reader's side - eyebrows, the problem, the pull lines -
   one pull panel per page. Used sparingly: these classes are the only extra colour on public pages. The
   accent keeps 4.5:1 or better against the body and tertiary backgrounds in each theme. */
:root {
  --cb-accent: #b45309;
  --cb-accent-rgb: 180, 83, 9;
  --cb-accent-subtle: #fdf3e3;
  --cb-accent-border: #f0cf9c;
}

[data-bs-theme="dark"] {
  --cb-accent: #f0b35a;
  --cb-accent-rgb: 240, 179, 90;
  --cb-accent-subtle: rgba(240, 179, 90, 0.1);
  --cb-accent-border: rgba(240, 179, 90, 0.35);
}

.cb-eyebrow {
  color: var(--cb-accent) !important;
  letter-spacing: 0.08em;
}

.cb-balance {
  text-wrap: balance;
}

.cb-text-accent {
  color: var(--cb-accent) !important;
}

/* An icon on a soft square of its colour: <span class="cb-icon-tile"><i class="bi ..."></i></span>. */
.cb-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  font-size: 1.25rem;
  color: var(--cb-accent);
  background-color: var(--cb-accent-subtle);
}

.cb-icon-tile.cb-tile-primary {
  color: var(--bs-primary-text-emphasis);
  background-color: var(--bs-primary-bg-subtle);
}

/* The pull line: one sentence the section stands on. */
.cb-pull {
  border-left: 4px solid var(--cb-accent);
  background-color: var(--cb-accent-subtle);
  border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
}

/* On dark, an ochre tint over grey reads brown; keep the edge and use the neutral panel. */
[data-bs-theme="dark"] .cb-pull {
  background-color: var(--bs-tertiary-bg);
}

/* Problem cards: an accent edge that comes up on hover. */
.cb-problem-card {
  border-top: 3px solid transparent !important;
  transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

a.cb-problem-card:hover,
a.cb-problem-card:focus-visible {
  border-top-color: var(--cb-accent) !important;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .cb-problem-card {
    transition: none;
  }

  a.cb-problem-card:hover,
  a.cb-problem-card:focus-visible {
    transform: none;
  }
}

/* The accent on a section that is dark in both themes (.bg-dark). */
.cb-text-accent-on-dark {
  color: #f0b35a !important;
}