/* ============================================
   BUSINESS APP - MERGED STYLES
   All styles consolidated into single file
   Auto-generated - Do not edit individual sections

   📱 MB-OPTIMIZATION PATTERN:
   - Desktop-first base styles (no media query)
   - XS-only overrides: @media (max-width: 575.98px)
   - Bootstrap variables: --font-scale, --spacing-*
   - Never use tablet breakpoints (576-767px, 768px)
   - HTML changes prohibited — CSS only
   ============================================ */

/* ==================== SIDEBAR ==================== */

/* Sidebar container — transitions for collapse */
.bsb__sidebar {
  position: relative;
  transition: width 0.25s ease, min-width 0.25s ease, padding 0.25s ease;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
}

/* Suppress transition on initial page load to avoid collapse flash */
.bsb__sidebar.no-transition {
  transition: none !important;
}

/* Toggle button — full-width pill below the dashboard btn */
.bsb__toggle-btn {
  width: 100%;
  height: 1.6rem;
  margin-top: 0.35rem;
  padding: 0;
  border-radius: var(--brand-radius-md, 8px);
  background: rgba(247,192,0,0.15);
  border: 1px solid var(--brand-primary-dark, #d4a800);
  color: var(--brand-grey-700, #444);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.bsb__toggle-btn:hover {
  background: var(--brand-primary, #f7c000);
}

/* Icon flips to chevron-right when collapsed */
.bsb__sidebar.collapsed .bsb__toggle-btn i {
  transform: rotate(180deg);
}

/* No slide-right hover in collapsed state */
.bsb__sidebar.collapsed .bsb__link--collapse:hover,
.bsb__sidebar.collapsed .bsb__link--single:hover {
  transform: none;
}

/* Pre-collapsed state (prevents flash on page load) */
.sidebar-pre-collapsed #client_sidebar_container_main {
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  overflow: hidden;
}

/* ── COLLAPSED STATE ── */
.bsb__sidebar.collapsed {
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  overflow: hidden !important;
  white-space: normal !important;
}

/* Hide all text labels when collapsed */
.bsb__sidebar.collapsed .bsb__header,
.bsb__sidebar.collapsed .bsb__section-label,
.bsb__sidebar.collapsed .bsb__submenu,
.bsb__sidebar.collapsed .bsb__divider,
.bsb__sidebar.collapsed .bsb__link--collapse span,
.bsb__sidebar.collapsed .bsb__link--collapse .bsb__icon--rotate,
.bsb__sidebar.collapsed .bsb__link--single span {
  display: none !important;
}

/* Fit links inside the 3.5rem container — suppress ::before animation + border */
.bsb__sidebar.collapsed .bsb__link--collapse,
.bsb__sidebar.collapsed .bsb__link--single {
  justify-content: center !important;
  padding: 0.4rem !important;
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  max-width: 2.5rem !important;
  overflow: visible !important;
  white-space: normal !important;
  border: none !important;
  border-radius: var(--brand-radius-sm, 8px) !important;
  position: relative;
}

/* Kill the ::before slide animation in collapsed mode — it causes layout bleed */
.bsb__sidebar.collapsed .bsb__link--collapse::before,
.bsb__sidebar.collapsed .bsb__link--single::before {
  display: none !important;
}

.bsb__sidebar.collapsed .bsb__link--collapse i,
.bsb__sidebar.collapsed .bsb__link--single i {
  margin: 0;
  font-size: 1rem;
}

/* Header */
.bsb__header {
  padding: 0;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Two-line dashboard title */
.bsb__header .nav-link.bsb__dashboard-title {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  border: 0.125rem solid var(--brand-primary-dark);
  color: var(--brand-grey-800);
  font-weight: 700;
  border-radius: var(--brand-radius-md);
  width: 100%;
  white-space: normal !important;
  line-height: 1.3 !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0.75rem 0.5rem !important;
  text-decoration: none;
  display: flex;
  justify-content: center;
  box-shadow: 0 0.25rem 0.75rem rgba(255, 211, 59, 0.3);
  transition: var(--brand-transition);
}

.bsb__header .nav-link.bsb__dashboard-title:hover {
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 1.25rem rgba(255, 211, 59, 0.4);
}

.bsb__header .nav-link.bsb__dashboard-title span {
  display: block;
}

.bsb__header .nav-link.bsb__dashboard-title span:last-child {
  font-size: 0.85em;
  opacity: 0.9;
}

/* Truncate long business names inside the dashboard button */
.bsb__dashboard-title-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.bsb__mobile-header.bsb__dashboard-title {
  white-space: normal !important;
  line-height: 1.3 !important;
  flex-direction: column !important;
  padding: 0.75rem 1rem !important;
}

.bsb__mobile-header.bsb__dashboard-title span {
  display: block;
}

.bsb__mobile-header.bsb__dashboard-title span:last-child {
  font-size: 0.85em;
  opacity: 0.9;
}

/* Divider */
.bsb__divider {
  border-top: 0.125rem solid var(--brand-grey-300);
  opacity: 0.6;
  margin: 0.5rem 0;
}

/* Section labels */
.bsb__section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-grey-500);
  padding: 0.5rem 0.25rem 0.15rem;
  list-style: none;
}

/* Main collapse toggle links */
.bsb__link--collapse {
  background: var(--brand-white);
  border: 0.125rem solid var(--brand-grey-200);
  color: var(--brand-grey-700);
  font-weight: 600;
  padding: 0.75rem;
  border-radius: var(--brand-radius-md);
  width: 100%;
  text-align: left !important;
  justify-content: flex-start !important;
  transition: var(--brand-transition);
  text-decoration: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  word-wrap: break-word;
  line-height: 1.3;
}

.bsb__link--collapse::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  transition: left 0.3s ease;
  z-index: -1;
}

.bsb__link--collapse:hover::before {
  left: 0;
}

.bsb__link--collapse:hover {
  color: var(--brand-grey-800);
  border-color: var(--brand-primary);
  transform: translateX(0.25rem);
  box-shadow: var(--brand-shadow-sm);
}

.bsb__link--collapse i {
  transition: var(--brand-transition);
  flex-shrink: 0;
}

.bsb__link--collapse span {
  flex: 1;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.bsb__link--collapse:hover i {
  transform: scale(1.1);
}

.bsb__link--collapse.active {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  border-color: var(--brand-primary-dark);
  color: var(--brand-grey-800);
  font-weight: 700;
  box-shadow: var(--brand-shadow-md);
}

/* Single (non-collapsible) links */
.bsb__link--single {
  background: var(--brand-white);
  border: 0.125rem solid var(--brand-grey-200);
  color: var(--brand-grey-700);
  font-weight: 600;
  padding: 0.75rem;
  border-radius: var(--brand-radius-md);
  width: 100%;
  text-align: left !important;
  justify-content: flex-start !important;
  transition: var(--brand-transition);
  text-decoration: none;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  word-wrap: break-word;
  line-height: 1.3;
}

.bsb__link--single::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  transition: left 0.3s ease;
  z-index: -1;
}

.bsb__link--single:hover::before {
  left: 0;
}

.bsb__link--single:hover {
  color: var(--brand-grey-800);
  border-color: var(--brand-primary);
  transform: translateX(0.25rem);
  box-shadow: var(--brand-shadow-sm);
}

.bsb__link--single i {
  transition: var(--brand-transition);
  flex-shrink: 0;
}

.bsb__link--single span {
  flex: 1;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.bsb__link--single:hover i {
  transform: scale(1.1);
}

.bsb__link--single.active {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  border-color: var(--brand-primary-dark);
  color: var(--brand-grey-800);
  font-weight: 700;
  box-shadow: var(--brand-shadow-md);
}

/* Chevron rotation */
.bsb__icon--rotate {
  transition: transform 0.3s ease;
}

.bsb__link--collapse[aria-expanded="true"] .bsb__icon--rotate {
  transform: rotate(180deg);
}

/* Submenu container */
.bsb__submenu {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  border-left: 0.1875rem solid var(--brand-primary);
  background: var(--brand-grey-50);
  border-radius: var(--brand-radius-sm);
  overflow: hidden;
  padding: 0;
}

.bsb__submenu .nav {
  gap: 0.25rem;
  padding: 0.25rem;
}

/* Submenu links */
.bsb__submenu-link {
  background: var(--brand-white);
  border: 1px solid var(--brand-grey-200);
  color: var(--brand-grey-600);
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  font-weight: 500;
  border-radius: var(--brand-radius-sm);
  width: 100%;
  text-align: left !important;
  justify-content: flex-start !important;
  transition: var(--brand-transition);
  text-decoration: none;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  word-wrap: break-word;
  line-height: 1.3;
}

.bsb__submenu-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0.1875rem;
  height: 100%;
  background: var(--brand-primary);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.bsb__submenu-link:hover::before {
  transform: scaleY(1);
}

.bsb__submenu-link:hover {
  background: var(--brand-grey-100);
  border-color: var(--brand-primary);
  color: var(--brand-grey-800);
  transform: translateX(0.125rem);
  box-shadow: var(--brand-shadow-sm);
}

.bsb__submenu-link i {
  transition: var(--brand-transition);
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.bsb__submenu-link span {
  flex: 1;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.bsb__submenu-link:hover i {
  color: var(--brand-primary);
  transform: scale(1.15);
}

.bsb__submenu-link.active {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  border-color: var(--brand-primary-dark);
  color: var(--brand-grey-800);
  font-weight: 700;
  box-shadow: var(--brand-shadow-sm);
}

.bsb__submenu-link.active::before {
  transform: scaleY(1);
  width: 0.25rem;
}

.bsb__submenu-link.active i {
  color: var(--brand-grey-800);
  transform: scale(1.1);
}

/* Role badge in switcher */
.bsb__switcher-role {
  font-size: 0.7rem;
  opacity: 0.75;
  display: block;
}

/* ==================== API SETTINGS ==================== */
/* Business API Settings Styles */

.bapi__section-header {
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

/* Dead legacy API card/info/key selectors removed — replaced by BEM sections below */

.bapi__action-buttons {
  display: flex;
  gap: 0.5rem;
}

.bapi__btn-action {
  flex: 1;
  padding: 0.75rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  border: none;
}

.bapi__btn-action:hover {
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.bapi__section-title {
  
  font-weight: 700;
  margin-bottom: 1rem;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bapi__section-divider {
  margin: 2.5rem 0;
  border: none;
  border-top: 0.125rem solid #e9ecef;
}

/* ==================== API TEST CONSOLE ==================== */
/**
 * API Test Console Styles
 * Specialized styling for the API testing interface
 * Used in business_settings_api_test.html
 */

.bapi__test-container {
    padding: 1.5rem;
    max-width: 87.5rem;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.bapi__test-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.bapi__test-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f1f1f;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bapi__test-header h1 i {
    color: #f7c000;
    
}

.bapi__test-header .bapi__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1f1f1f;
    text-decoration: none;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    background: #fff;
    border: 0.125rem solid #1f1f1f;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.bapi__test-header .bapi__back-link:hover {
    background: #1f1f1f;
    color: #fff;
}

/* ============================================
   PANEL BASE
   ============================================ */

.bapi__panel {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.08);
    overflow: hidden;
    height: 100%;
    border: 1px solid #e8e8e8;
}

/* ============================================
   CONFIG PANEL
   ============================================ */

.bapi__config-header {
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-bottom: 0.125rem solid #f7c000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bapi__config-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f1f1f;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.bapi__config-header h2 i {
    color: #f7c000;
    font-size: 1.125rem;
}

/* ============================================
   STATUS BADGES
   ============================================ */

.bapi__status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 3.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0312rem;
}

.bapi__status-badge--verified {
    background: #22c55e;
    color: #fff;
}

.bapi__status-badge--pending {
    background: #f7c000;
    color: #1f1f1f;
}

/* ============================================
   CONFIG PANEL BODY
   ============================================ */

.bapi__config-body {
    padding: 1.5rem;
}

.bapi__config-item {
    margin-bottom: 1.25rem;
}

.bapi__config-item:last-child {
    margin-bottom: 0;
}

.bapi__config-label {
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    margin-bottom: 0.5rem;
    display: block;
}

.bapi__config-value {
    font-weight: 500;
    color: #1f1f1f;
    padding: 0.875rem 1rem;
    background: #f8f9fa;
    border-radius: 0.625rem;
    border-left: 0.25rem solid #f7c000;
}

.bapi__config-value--monospace {
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', Consolas, monospace;
    word-break: break-all;
    background: #f1f3f4;
    border-left-color: #1f1f1f;
}

.bapi__config-value--empty {
    color: #999;
    font-style: italic;
}

/* ============================================
   WARNING ALERT
   ============================================ */

.bapi__warning-alert {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 0.625rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.bapi__warning-alert i {
    color: #b45309;
    font-size: 1.125rem;
    margin-top: 0.125rem;
}

.bapi__warning-alert-text {
    color: #92400e;
    font-weight: 500;
    line-height: 1.5;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.bapi__action-buttons {
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: #fafafa;
    border-top: 1px solid #e8e8e8;
}

.bapi__btn-run-test {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
    color: #1f1f1f;
    border: none;
    border-radius: 0.625rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 0.25rem 0.75rem rgba(247, 192, 0, 0.3);
}

.bapi__btn-run-test:hover {
    background: linear-gradient(135deg, #e6b000 0%, #d4a000 100%);
    color: #1f1f1f;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.25rem rgba(247, 192, 0, 0.4);
}

.bapi__btn-run-test.htmx-request {
    opacity: 0.7;
    pointer-events: none;
}

.bapi__btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 0.625rem;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bapi__btn-action--edit {
    background: #1f1f1f;
    color: #fff;
}

.bapi__btn-action--edit:hover {
    background: #333;
    color: #fff;
    transform: translateY(-0.125rem);
}

.bapi__btn-action--delete {
    background: #fee2e2;
    color: #dc2626;
}

.bapi__btn-action--delete:hover {
    background: #dc2626;
    color: #fff;
    transform: translateY(-0.125rem);
}

/* ============================================
   RESPONSE PANEL
   ============================================ */

.bapi__response-header {
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-bottom: 0.125rem solid #1f1f1f;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bapi__response-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f1f1f;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.bapi__response-header h2 i {
    color: #f7c000;
    font-size: 1.125rem;
}

.bapi__response-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 3.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0312rem;
}

.bapi__response-status--ready {
    background: #f3f4f6;
    color: #6b7280;
}

.bapi__response-status--ready .bapi__dot {
    background: #9ca3af;
}

.bapi__response-status--success {
    background: #dcfce7;
    color: #16a34a;
}

.bapi__response-status--success .bapi__dot {
    background: #22c55e;
}

.bapi__response-status--error {
    background: #fee2e2;
    color: #dc2626;
}

.bapi__response-status--error .bapi__dot {
    background: #ef4444;
}

.bapi__response-status--loading {
    background: #fef3c7;
    color: #d97706;
}

.bapi__response-status--loading .bapi__dot {
    background: #f59e0b;
    animation: pulse 0.8s infinite;
}

.bapi__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ============================================
   RESPONSE BODY
   ============================================ */

.bapi__response-body {
    background: #f8f9fa;
    min-height: 26.25rem;
    overflow-y: auto;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.bapi__response-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 23.75rem;
    padding: 2rem;
    text-align: center;
}

.bapi__response-placeholder-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 0.25rem 0.875rem rgba(247, 192, 0, 0.3);
}

.bapi__response-placeholder-icon i {
    font-size: 2rem;
    color: #1f1f1f;
}

.bapi__response-placeholder h3 {
    color: #1f1f1f;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.bapi__response-placeholder p {
    color: #666;
    margin: 0;
}

#api-response-div {
    padding: 1.25rem;
}

#api-response-div pre {
    margin: 0;
    color: #1f1f1f;
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', Consolas, monospace;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    background: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e8e8e8;
}

/* ============================================
   INFO CARD
   ============================================ */

.bpf__info-card {
    background: #fff;
    border: 0.125rem solid #e8e8e8;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.bapi__info-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bapi__info-card-icon i {
    color: #1f1f1f;
}

.bapi__info-card-content h4 {
    font-weight: 700;
    color: #1f1f1f;
    margin: 0 0 0.375rem 0;
}

.bapi__info-card-content p {
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .bapi__test-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .bapi__panel {
        height: auto;
    }
    .bapi__action-buttons {
        flex-wrap: wrap;
    }
    .bapi__btn-run-test {
        width: 100%;
        flex: none;
    }
}

/* ==================== API TEST RESULTS ==================== */
/**
 * API Test Results Styles
 * Specialized styling for API test result display
 * Used in business_settings_api_test_result.html
 */

.bapi__result-card {
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
}

.bapi__result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e0e0e0;
}

.bapi__result-header h3 {
    font-weight: 700;
    color: #1f1f1f;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bapi__result-header h3 i {
    color: #f7c000;
}

.bapi__result-time {
    color: #666;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.bapi__result-body {
    padding: 1.25rem;
}

.bapi__result-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.bapi__result-item {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    border-left: 0.1875rem solid #f7c000;
}

.bapi__result-label {
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.0312rem;
    margin-bottom: 0.375rem;
}

.bapi__result-value {
    font-weight: 600;
    color: #1f1f1f;
}

.bapi__result-value--highlight {
    color: #f7c000;
}

/* ============================================
   STATUS SECTIONS
   ============================================ */

.bapi__status-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 0.625rem;
    margin-bottom: 1rem;
}

.bapi__status-section--success {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border: 1px solid #86efac;
}

.bapi__status-section--error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
}

.bapi__status-section--warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
}

.bapi__status-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bapi__status-section--success .bapi__status-icon {
    background: #22c55e;
    color: #fff;
}

.bapi__status-section--error .bapi__status-icon {
    background: #ef4444;
    color: #fff;
}

.bapi__status-section--warning .bapi__status-icon {
    background: #f59e0b;
    color: #fff;
}

.bapi__status-icon i {
    
}

.bapi__status-content h4 {
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.bapi__status-section--success .bapi__status-content h4 {
    color: #166534;
}

.bapi__status-section--error .bapi__status-content h4 {
    color: #991b1b;
}

.bapi__status-section--warning .bapi__status-content h4 {
    color: #92400e;
}

.bapi__status-content p {
    margin: 0;
}

.bapi__status-section--success .bapi__status-content p {
    color: #15803d;
}

.bapi__status-section--error .bapi__status-content p {
    color: #b91c1c;
}

.bapi__status-section--warning .bapi__status-content p {
    color: #b45309;
}

/* ============================================
   GUIDE BOX
   ============================================ */

.bapi__guide-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.625rem;
    overflow: hidden;
}

.bapi__guide-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.bapi__guide-header i {
    color: #f7c000;
}

.bapi__guide-header span {
    font-weight: 700;
    color: #1f1f1f;
}

.bapi__guide-list {
    padding: 1rem;
    margin: 0;
}

.bapi__guide-list li {
    color: #555;
    margin-bottom: 0.625rem;
    padding-left: 0.5rem;
    line-height: 1.5;
}

.bapi__guide-list li:last-child {
    margin-bottom: 0;
}

.bapi__guide-list li strong {
    color: #1f1f1f;
}

.bapi__guide-list li code {
    background: #f1f3f4;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    color: #d63384;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .bapi__result-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== BUSINESS PROFILE FRONTEND ==================== */
/* Business Profile Frontend (Public View) Styles */
/* MOBILE-FIRST RESPONSIVE DESIGN */

.bpf__container {
    background: var(--brand-grey-100);
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* Hero Section */
.bpf__hero-section {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 2rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bpf__hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,170.7C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
    background-size: cover;
    opacity: 0.3;
}

.bpf__logo {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 0.25rem solid white;
    box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.2);
    margin: 0 auto 1rem;
    position: relative;
    z-index: 1;
}

.bpf__name {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.bpf__bio {
    opacity: 0.95;
    max-width: 37.5rem;
    margin: 0 auto 0.5rem;
    position: relative;
    z-index: 1;
}

.bpf__meta {
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.bpf__btn-edit {
    background: white;
    color: #f59e0b;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 1.5625rem;
    font-weight: 600;
    margin-top: 1rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.bpf__btn-edit:hover {
    background: #fef3c7;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

/* Content Section */
.bpf__content-wrapper {
    max-width: 75rem;
    margin: -3.125rem auto 0;
    padding: 0 1rem;
    position: relative;
    z-index: 2;
}

.bpf__info-card {
    display: block;
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.bpf__info-card:hover {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
    transform: translateY(-0.125rem);
}

.card-header {
    border-bottom: 0.125rem solid var(--brand-grey-200);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.card-title {
    
    font-weight: 700;
    color: var(--brand-grey-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i {
    color: #f59e0b;
}

.bpf__info-row {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--brand-grey-200);
}

.bpf__info-row:last-child {
    border-bottom: none;
}

.bpf__info-label {
    font-weight: 600;
    color: var(--brand-grey-700);
    min-width: 7.5rem;
}

.bpf__info-value {
    color: var(--brand-grey-600);
    flex: 1;
    line-height: 1.6;
}

/* Social Links */
.bpf__social-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.bpf__social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--brand-grey-100);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--brand-grey-700);
    transition: all 0.3s ease;
    font-weight: 500;
}

.bpf__social-link:hover {
    background: #f59e0b;
    color: white;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(245, 158, 11, 0.3);
}

.bpf__social-link i {
    
}

/* Products Grid */
.bpf__products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.bpf__product-card {
    background: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.bpf__product-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.bpf__product-image {
    width: 100%;
    height: 12.5rem;
    object-fit: cover;
}

.bpf__product-info {
    padding: 1rem;
}

.bpf__product-name {
    font-weight: 600;
    color: var(--brand-grey-800);
    margin-bottom: 0.5rem;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1.25rem;
    font-weight: 600;
    background: #fef3c7;
    color: #d97706;
}

/* Empty State */
.bpf__empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--brand-grey-500);
}

.bpf__empty-state i {
    font-size: 2rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

/* TABLET RESPONSIVE (>= 48rem) */
@media (min-width: 768px) {
    .bpf__hero-section {
        padding: 2rem 2rem;
    }

    .bpf__logo {
        width: 9.375rem;
        height: 9.375rem;
    }

    .bpf__name {
        font-size: 2.5rem;
    }

    .bpf__bio {
    }

    .bpf__content-wrapper {
        margin-top: -5rem;
    }

    .bpf__info-card {
        padding: 2rem;
    }

    .card-title {
        font-size: 1.5rem;
    }

    .bpf__info-label {
        min-width: 9.375rem;
    }

    .bpf__info-value {
    }

    .bpf__social-link {
    }
}

/* DESKTOP RESPONSIVE (>= 64rem) */
@media (min-width: 1024px) {
    .bpf__content-wrapper {
        margin-top: -6.25rem;
    }

    .bpf__products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== BUSINESS PROFILE INSTAFEED (REMOVED) ==================== */
/* Dead code removed — no templates reference instafeed classes */

/* ==================== BUSINESS DASHBOARD ==================== */
/**
 * Business Dashboard Styles
 * Modern, polished UI for Business dashboard with enhanced visual design
 * Version: 2.0 - Complete redesign
 */

/* ============================================
   DASHBOARD HEADER - ENHANCED HERO SECTION
   ============================================ */

.bdb__header {
  padding: 2.5rem 2rem;
  border-radius: 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(247, 192, 0, 0.2);
}

/* Animated glow effect */
.bdb__header::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(247, 192, 0, 0.08) 0%,
    transparent 70%
  );
  animation: glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

/* Decorative elements */
.bdb__header::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18.75rem;
  height: 18.75rem;
  background: linear-gradient(
    135deg,
    rgba(247, 192, 0, 0.15) 0%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(40%, 40%);
}

.bdb__header h3 {
  margin: 0;
  font-weight: 700;
  font-size: 1.75rem;
  color: #fff;
  position: relative;
  z-index: 1;
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
  letter-spacing: -0.0312rem;
}

/* ============================================
   STATS GRID LAYOUT
   ============================================ */

.bdb__stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

/* ============================================
   STAT CARDS - ENHANCED DESIGN
   ============================================ */

.bapi__stat-card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
  border: 1px solid #e8e8e8;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Decorative gradient overlay */
.bapi__stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 7.5rem;
  height: 7.5rem;
  background: linear-gradient(
    135deg,
    rgba(247, 192, 0, 0.08) 0%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(35%, -35%);
  transition: all 0.3s ease;
}

.bapi__stat-card:hover {
  box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.12), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
  transform: translateY(-0.375rem);
}

.bapi__stat-card:hover::before {
  transform: translate(35%, -35%) scale(1.2);
  opacity: 0.12;
}

/* ============================================
   STAT CARD COMPONENTS
   ============================================ */

.bapi__stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.bapi__stat-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f1f1f;
  box-shadow: 0 0.25rem 0.75rem rgba(247, 192, 0, 0.25);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.bapi__stat-card:hover .bapi__stat-card-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0.75rem 2rem rgba(247, 192, 0, 0.45),
    0 0.25rem 0.75rem rgba(247, 192, 0, 0.3);
}

.bapi__stat-card-title {
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
  margin: 0 0 0.25rem 0;
}

.bapi__stat-card-value {
  color: #1f1f1f;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.03rem;
}

.bapi__stat-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #999;
  position: relative;
  z-index: 1;
}

.bapi__stat-card-meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ============================================
   TREND INDICATORS
   ============================================ */

.bapi__stat-card-trend {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 3.125rem;
}

.bapi__stat-card-trend.positive {
  color: #16a34a;
  background: #dcfce7;
}

.bapi__stat-card-trend.negative {
  color: #dc2626;
  background: #fee2e2;
}

.bapi__stat-card-trend i {
}

/* ============================================
   LOCATION BADGE
   ============================================ */

.bapi__stat-card-location {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: #f8f9fa;
  border-radius: 3.125rem;
  font-weight: 600;
  color: #555;
}

.bapi__stat-card-location i {
  color: #f7c000;
}

/* ============================================
   STAT CARD VARIANTS - COLOR THEMES
   ============================================ */

/* Primary Theme (Yellow) */
.bapi__stat-card.bapi__stat-card-primary {
  border-top: 0.25rem solid #f7c000;
}

.bapi__stat-card.bapi__stat-card-primary .bapi__stat-card-icon {
  background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
  color: #1f1f1f;
  box-shadow: 0 0.5rem 1.5rem rgba(247, 192, 0, 0.35);
}

/* Success Theme (Green) */
.bapi__stat-card.bapi__stat-card-success {
  border-top: 0.25rem solid #22c55e;
}

.bapi__stat-card.bapi__stat-card-success .bapi__stat-card-icon {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(34, 197, 94, 0.35);
}

.bapi__stat-card.bapi__stat-card-success::before {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.08) 0%,
    transparent 70%
  );
}

/* Info Theme (Blue) */
.bapi__stat-card.bapi__stat-card-info {
  border-top: 0.25rem solid #3b82f6;
}

.bapi__stat-card.bapi__stat-card-info .bapi__stat-card-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(59, 130, 246, 0.35);
}

.bapi__stat-card.bapi__stat-card-info::before {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.08) 0%,
    transparent 70%
  );
}

/* Warning Theme (Orange) */
.bapi__stat-card.bapi__stat-card-warning {
  border-top: 0.25rem solid #f59e0b;
}

.bapi__stat-card.bapi__stat-card-warning .bapi__stat-card-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(245, 158, 11, 0.35);
}

.bapi__stat-card.bapi__stat-card-warning::before {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.08) 0%,
    transparent 70%
  );
}

/* Danger Theme (Red) */
.bapi__stat-card.bapi__stat-card-danger {
  border-top: 0.25rem solid #ef4444;
}

.bapi__stat-card.bapi__stat-card-danger .bapi__stat-card-icon {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(239, 68, 68, 0.35);
}

.bapi__stat-card.bapi__stat-card-danger::before {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.08) 0%,
    transparent 70%
  );
}

/* ============================================
   FEATURED STAT CARD
   ============================================ */

.bapi__stat-card.bapi__stat-card-featured {
  background: linear-gradient(135deg, #fff 0%, #fffef5 100%);
  border: 1px solid #f7c000;
  box-shadow: 0 0.25rem 1rem rgba(247, 192, 0, 0.12);
}

.bapi__stat-card-featured .bapi__stat-card-value {
  font-size: 1.75rem;
  color: #1f1f1f;
}

.bapi__stat-card-featured .bapi__stat-card-icon {
  width: 2.75rem;
  height: 2.75rem;
}

/* ============================================
   GRID LAYOUT VARIANTS
   ============================================ */

.bapi__stat-card-full {
  grid-column: 1 / -1;
}

.bapi__stat-card-half {
  grid-column: span 2;
}

.bapi__stat-card-third {
  grid-column: span 1;
}

.bapi__stat-card-quarter {
  grid-column: span 1;
}

/* Grid layout presets */
.bdb__stats-grid-2-col {
  grid-template-columns: repeat(2, 1fr);
}

.bdb__stats-grid-3-col {
  grid-template-columns: repeat(3, 1fr);
}

.bdb__stats-grid-4-col {
  grid-template-columns: repeat(4, 1fr);
}

.bdb__stats-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
}

/* ============================================
   LOADING STATES
   ============================================ */

.bapi__stat-card.loading {
  position: relative;
  pointer-events: none;
}

.bapi__stat-card.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bapi__stat-card {
  animation: fade-in-up 0.5s ease-out;
}

.bapi__stat-card:nth-child(1) {
  animation-delay: 0.05s;
}
.bapi__stat-card:nth-child(2) {
  animation-delay: 0.1s;
}
.bapi__stat-card:nth-child(3) {
  animation-delay: 0.15s;
}
.bapi__stat-card:nth-child(4) {
  animation-delay: 0.2s;
}
.bapi__stat-card:nth-child(5) {
  animation-delay: 0.25s;
}
.bapi__stat-card:nth-child(6) {
  animation-delay: 0.3s;
}

/* ============================================
   RESPONSIVE DESIGN - TABLET
   ============================================ */

@media (max-width: 1200px) {
  .bapi__stat-card.bapi__stat-card-featured,
  .bapi__stat-card-half {
    grid-column: span 1;
  }

  .bapi__stat-card-featured .bapi__stat-card-value {
    font-size: 2.5rem;
  }

  .bdb__stats-grid-3-col,
  .bdb__stats-grid-4-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE
   ============================================ */

@media (max-width: 768px) {
  .bdb__header {
    padding: 1.5rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
  }

  .bdb__header h3 {
    
  }

  .bdb__stats-grid,
  .bdb__stats-grid-2-col,
  .bdb__stats-grid-3-col,
  .bdb__stats-grid-4-col {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .bapi__stat-card,
  .bapi__stat-card-full,
  .bapi__stat-card-half,
  .bapi__stat-card-third,
  .bapi__stat-card-quarter {
    padding: 0.75rem 1rem;
    grid-column: span 1;
  }

  .bapi__stat-card-value {
    
  }

  .bapi__stat-card-featured .bapi__stat-card-value {
    font-size: 1.5rem;
  }

  .bapi__stat-card-icon {
    width: 2rem;
    height: 2rem;
  }

  .bapi__stat-card-title {
  }

  .bapi__stat-card-meta {
  }

  .bapi__stat-card-featured .bapi__stat-card-icon {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .bdb__stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .bapi__stat-card {
    padding: 0.6rem 0.75rem;
  }

  .bapi__stat-card-value {
  }

  .bapi__stat-card-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ============================================
   RESPONSIVE DESIGN - SMALL MOBILE
   ============================================ */

@media (max-width: 480px) {
  .bdb__header {
    padding: 1.25rem 1rem;
  }

  .bdb__header h3 {
    font-size: 1.125rem;
  }

  .bapi__stat-card {
    padding: 1.25rem;
  }

  .bapi__stat-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .bapi__stat-card-icon {
    order: -1;
  }

  .bapi__stat-card-value {
    font-size: 1.875rem;
  }

  .bapi__stat-card-featured .bapi__stat-card-value {
    font-size: 2rem;
  }

  .bapi__stat-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .bapi__stat-card-trend,
  .bapi__stat-card-location {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .bdb__header {
    background: #fff;
    border: 0.125rem solid #1f1f1f;
    box-shadow: none;
  }

  .bdb__header h3 {
    color: #1f1f1f;
  }

  .bapi__stat-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .bapi__stat-card:hover {
    transform: none;
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .bapi__stat-card,
  .bapi__stat-card-icon,
  .bdb__header::before {
    animation: none;
    transition: none;
  }

  .bapi__stat-card:hover {
    transform: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bapi__stat-card {
    border: 0.125rem solid #1f1f1f;
  }

  .bdb__header {
    border: 0.125rem solid #f7c000;
  }
}

/* ==================== BUSINESS PROFILE ==================== */
/* ==================== BUSINESS PROFILE MODERN STYLES ==================== */

/* Hero Section */
.bpf__masthead {
  background: linear-gradient(135deg, var(--brand-grey-800) 0%, #1a1a1a 100%);
  padding: 2rem 2rem;
  position: relative;
  overflow: hidden;
}

.bpf__masthead::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--brand-primary) 0%, transparent 60%);
  opacity: 0.1;
  pointer-events: none;
}

.bpf__avatar-container {
  position: relative;
  width: 12.5rem;
  height: 12.5rem;
  margin: 0 auto 2rem;
}

.bpf__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.3125rem solid var(--brand-primary);
  box-shadow: 0 0.5rem 2rem rgba(255, 211, 59, 0.3);
  object-fit: cover;
  transition: var(--brand-transition);
}

.bpf__avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0.75rem 3rem rgba(255, 211, 59, 0.4);
}

.bpf__business-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--brand-white);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
}

.bpf__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

.bpf__divider-line {
  height: 0.125rem;
  width: 5rem;
  background: var(--brand-primary);
}

.bpf__divider-icon {
  color: var(--brand-primary);
  font-size: 1.5rem;
}

.bpf__bio {
  font-size: 1.125rem;
  color: var(--brand-grey-200);
  max-width: 43.75rem;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.bpf__meta {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.bpf__meta-item {
  color: var(--brand-grey-300);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bpf__meta-item i {
  color: var(--brand-primary);
}

.bpf__edit-btn {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: var(--brand-grey-800);
  font-weight: 600;
  padding: 0.875rem 2rem;
  border-radius: var(--brand-radius-md);
  border: 0.125rem solid var(--brand-primary-dark);
  transition: var(--brand-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.5rem;
  box-shadow: 0 0.25rem 1rem rgba(255, 211, 59, 0.3);
}

.bpf__edit-btn:hover {
  background: var(--brand-white);
  color: var(--brand-grey-800);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 1.5rem rgba(255, 211, 59, 0.4);
}

/* Timeline Section */
.bpf__timeline-section {
  padding: 2rem 2rem;
  background: var(--brand-grey-50);
}

.bpf__section-heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-grey-800);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

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

.bpf__timeline {
  position: relative;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.bpf__timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0.25rem;
  height: 100%;
  background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}

.bpf__timeline-item {
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bpf__timeline-image {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8.75rem;
  height: 8.75rem;
  border-radius: 50%;
  border: 0.375rem solid var(--brand-primary);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: var(--brand-white);
  z-index: 2;
}

.bpf__timeline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bpf__timeline-panel {
  position: relative;
  width: calc(50% - 5.625rem);
  padding: 2rem;
  background: var(--brand-white);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-md);
  border-left: 0.25rem solid var(--brand-primary);
  transition: var(--brand-transition);
}

.bpf__timeline-panel:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--brand-shadow-lg);
}

/* Flexbox layout for timeline panels (converted from float-based) */
.bpf__timeline-item:nth-child(odd) .bpf__timeline-panel {
  order: 1;
  margin-right: auto;
}

.bpf__timeline-item:nth-child(even) .bpf__timeline-panel {
  order: 2;
  margin-left: auto;
  border-left: none;
  border-right: 0.25rem solid var(--brand-primary);
}

.bpf__timeline-heading h5 {
  font-weight: 600;
  color: var(--brand-grey-600);
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  margin-bottom: 0.5rem;
}

.bpf__timeline-heading h4 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--brand-grey-800);
  margin-bottom: 1rem;
}

.bpf__timeline-body p {
  color: var(--brand-grey-700);
  line-height: 1.7;
  margin: 0;
}

/* Portfolio Section */
.bpf__portfolio-section {
  padding: 2rem 2rem;
  background: var(--brand-white);
}

.bpf__portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 2rem;
  max-width: 75rem;
  margin: 0 auto;
}

.bpf__portfolio-item {
  position: relative;
  border-radius: var(--brand-radius-lg);
  overflow: hidden;
  box-shadow: var(--brand-shadow-sm);
  transition: var(--brand-transition);
  cursor: pointer;
}

.bpf__portfolio-item:hover {
  transform: translateY(-0.5rem);
  box-shadow: var(--brand-shadow-lg);
}

.bpf__portfolio-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.bpf__portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 211, 59, 0.9) 0%, rgba(255, 200, 0, 0.9) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--brand-transition);
}

.bpf__portfolio-item:hover .bpf__portfolio-overlay {
  opacity: 1;
}

.bpf__portfolio-icon {
  color: var(--brand-grey-800);
  font-size: 2rem;
  transform: scale(0.5);
  transition: var(--brand-transition);
}

.bpf__portfolio-item:hover .bpf__portfolio-icon {
  transform: scale(1);
}

/* About Section */
.bpf__about-section {
  padding: 2rem 2rem;
  background: linear-gradient(135deg, var(--brand-grey-800) 0%, #1a1a1a 100%);
  color: var(--brand-white);
  position: relative;
  overflow: hidden;
}

.bpf__about-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 40%, var(--brand-primary) 100%);
  opacity: 0.05;
  pointer-events: none;
}

.bpf__about-content {
  max-width: 62.5rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: 2rem;
}

.bpf__about-text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--brand-grey-200);
}

/* Contact Section */
.bpf__contact-section {
  padding: 2rem 2rem;
  background: var(--brand-grey-50);
}

.bpf__contact-links {
  max-width: 50rem;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.bpf__contact-item {
  background: var(--brand-white);
  border-radius: var(--brand-radius-lg);
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--brand-shadow-sm);
  transition: var(--brand-transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-left: 0.25rem solid var(--brand-primary);
  text-decoration: none;
}

.bpf__contact-item:hover {
  transform: translateX(0.5rem);
  box-shadow: var(--brand-shadow-md);
  border-left-color: var(--brand-primary-dark);
}

.bpf__contact-label {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand-grey-600);
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  display: none;
}

.bpf__contact-icon {
  font-size: 2.5rem;
  color: var(--brand-primary);
  transition: var(--brand-transition);
}

.bpf__contact-item:hover .bpf__contact-icon {
  transform: scale(1.1);
}

.bpf__contact-value {
  
  font-weight: 600;
  color: var(--brand-grey-800);
  flex: 1;
  text-align: center;
}

/* Social Links in Timeline */
.bpf__social-links-grid {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.bpf__social-link {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-grey-800);
  font-size: 1.75rem;
  text-decoration: none;
  transition: var(--brand-transition);
  box-shadow: 0 0.25rem 0.75rem rgba(255, 211, 59, 0.3);
}

.bpf__social-link:hover {
  transform: translateY(-0.25rem) scale(1.1);
  box-shadow: 0 0.5rem 1.5rem rgba(255, 211, 59, 0.4);
}

/* Responsive Design */
@media (max-width: 992px) {
  .bpf__timeline::before {
    left: 4.375rem;
  }

  .bpf__timeline-image {
    left: 4.375rem;
    transform: none;
    width: 6.25rem;
    height: 6.25rem;
  }

  .bpf__timeline-panel {
    width: calc(100% - 8.75rem);
    margin-left: 8.75rem;
    float: none !important;
    border-left: 0.25rem solid var(--brand-primary) !important;
    border-right: none !important;
  }

  .bpf__contact-label {
    display: none;
  }
}

@media (min-width: 993px) {
  .bpf__contact-label {
    display: block;
  }

  .bpf__contact-value {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .bpf__business-name {
    font-size: 2rem;
  }

  .bpf__avatar-container {
    width: 9.375rem;
    height: 9.375rem;
  }

  .bpf__section-heading {
    font-size: 1.5rem;
  }

  .bpf__timeline-item {
    margin-bottom: 2.5rem;
  }

  .bpf__timeline-panel {
    padding: 1.5rem;
  }

  .bpf__portfolio-grid {
    grid-template-columns: 1fr;
  }

  .bpf__about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .bpf__contact-item {
    padding: 1.25rem 1.5rem;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .bpf__masthead {
    padding: 2rem 1rem;
  }

  .bpf__business-name {
    font-size: 1.5rem;
  }

  .bpf__timeline-image {
    width: 5rem;
    height: 5rem;
    left: 2.5rem;
  }

  .bpf__timeline::before {
    left: 2.5rem;
  }

  .bpf__timeline-panel {
    width: calc(100% - 6.25rem);
    margin-left: 6.25rem;
  }
}

/* ==================== BUSINESS SETTINGS API LIST ==================== */
/**
 * API Settings List - Modern UI Redesign
 * Enhanced visual design with improved spacing, colors, and interactions
 * Brand-aligned styling for professional API management interface
 */

/* ============================================
   CONTAINER & LAYOUT
   ============================================ */

.bapi__container {
  padding: 2rem 1.5rem;
  max-width: 87.5rem;
  margin: 0 auto;
}

/* ============================================
   HERO HEADER SECTION
   ============================================ */

.bapi__hero {
  background: linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%);
  border-radius: var(--brand-radius-lg, 1rem);
  padding: 2rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}

.bapi__hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 25rem;
  height: 25rem;
  background: radial-gradient(
    circle,
    rgba(247, 192, 0, 0.15) 0%,
    transparent 70%
  );
  border-radius: 50%;
}

.bapi__hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.bapi__hero-text h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bapi__hero-text h1 i {
  color: var(--brand-primary, #f7c000);
  font-size: 2rem;
}

.bapi__hero-text p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  font-weight: 400;
}

.bapi__hero-actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

.bapi__btn-primary,
.bapi__btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  border-radius: var(--brand-radius-md, 0.75rem);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.bapi__btn-primary {
  background: linear-gradient(
    135deg,
    var(--brand-primary, #f7c000) 0%,
    #e6b000 100%
  );
  color: #1f1f1f;
  box-shadow: 0 0.25rem 1.25rem rgba(247, 192, 0, 0.35);
}

.bapi__btn-primary:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 1.75rem rgba(247, 192, 0, 0.45);
  color: #1f1f1f;
}

.bapi__btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 0.125rem solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(0.625rem);
}

.bapi__btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: translateY(-0.125rem);
}

/* ============================================
   STATS ROW
   ============================================ */

.bapi__stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.bapi__stat-card {
  background: #fff;
  border-radius: var(--brand-radius-md, 0.75rem);
  padding: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.bapi__stat-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.bapi__stat-icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--brand-radius-md, 0.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}

.bapi__stat-icon--integrations {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
}

.bapi__stat-icon--keys {
  background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
  color: #1f1f1f;
}

.bapi__stat-icon--active {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
}

.bapi__stat-icon--requests {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #fff;
}

.bapi__stat-info h3 {
  font-size: 2rem;
  font-weight: 800;
  color: #1f1f1f;
  margin: 0 0 0.25rem 0;
  line-height: 1;
}

.bapi__stat-info p {
  color: #666;
  margin: 0;
  font-weight: 500;
}

/* ============================================
   SECTION LAYOUT
   ============================================ */

.bapi__section {
  background: #fff;
  border-radius: var(--brand-radius-lg, 1rem);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
}

.bapi__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 0.125rem solid #f0f0f0;
}

.bapi__section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f1f1f;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bapi__section-title i {
  color: var(--brand-primary, #f7c000);
  font-size: 1.375rem;
}

.bapi__section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.75rem;
  background: linear-gradient(
    135deg,
    var(--brand-primary, #f7c000) 0%,
    #e6b000 100%
  );
  color: #1f1f1f;
  border-radius: 3.125rem;
  font-weight: 700;
  margin-left: 0.5rem;
}

.bapi__btn-section {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--brand-primary, #f7c000);
  color: #1f1f1f;
  border: none;
  border-radius: var(--brand-radius-sm, 0.5rem);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.bapi__btn-section:hover {
  background: #e6b000;
  color: #1f1f1f;
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.75rem rgba(247, 192, 0, 0.3);
}

/* ============================================
   API GRID
   ============================================ */

.bapi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(23.75rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ============================================
   INTEGRATION CARD
   ============================================ */

.bapi__integration-card {
  background: #fff;
  border: 0.125rem solid #e8e8e8;
  border-radius: var(--brand-radius-md, 0.75rem);
  overflow: hidden;
  transition: all 0.3s ease;
}

.bapi__integration-card:hover {
  border-color: var(--brand-primary, #f7c000);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
  transform: translateY(-0.125rem);
}

.bapi__card-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 1.5rem;
  border-bottom: 0.125rem solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.bapi__card-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.bapi__platform-logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--brand-radius-sm, 0.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}

.bapi__platform-logo--shopify {
  background: linear-gradient(135deg, #96bf48 0%, #7fb731 100%);
  color: #fff;
}

.bapi__platform-logo--woocommerce {
  background: linear-gradient(135deg, #96588a 0%, #7f4876 100%);
  color: #fff;
}

.bapi__platform-logo--magento {
  background: linear-gradient(135deg, #f46f25 0%, #e35f18 100%);
  color: #fff;
}

.bapi__platform-logo--custom {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
}

.bapi__platform-logo--default {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: #fff;
}

.bapi__card-info h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f1f1f;
  margin: 0 0 0.25rem 0;
}

.bapi__platform-type {
  color: #666;
  font-weight: 500;
}

.bapi__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 3.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.0312rem;
}

.bapi__status-pill i {
}

.bapi__status-pill--verified {
  background: #d4edda;
  color: #155724;
}

.bapi__status-pill--verified i {
  color: #22c55e;
}

.bapi__status-pill--pending {
  background: #fff3cd;
  color: #856404;
}

.bapi__status-pill--pending i {
  color: #f59e0b;
  animation: pulse 2s infinite;
}

.bapi__status-pill--active {
  background: #d4edda;
  color: #155724;
}

.bapi__status-pill--active i {
  color: #22c55e;
}

.bapi__status-pill--inactive {
  background: #f8d7da;
  color: #721c24;
}

.bapi__status-pill--inactive i {
  color: #ef4444;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ============================================
   CARD BODY
   ============================================ */

.bapi__card-body {
  padding: 1.5rem;
}

.bapi__url-display {
  background: #f8f9fa;
  border-left: 0.25rem solid var(--brand-primary, #f7c000);
  padding: 1rem 1.25rem;
  border-radius: var(--brand-radius-sm, 0.5rem);
  margin-bottom: 1.5rem;
}

.bapi__url-display .label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.0312rem;
  margin-bottom: 0.5rem;
}

.bapi__url-display .value {
  color: #1f1f1f;
  font-weight: 500;
  word-break: break-all;
}

.bapi__details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.bapi__detail-box {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bapi__detail-box .label {
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.0312rem;
}

.bapi__detail-box .value {
  color: #1f1f1f;
  font-weight: 600;
}

.value-yes {
  color: #16a34a !important;
}

.value-no {
  color: #dc2626 !important;
}

.value-active {
  color: #16a34a !important;
}

.value-pending {
  color: #f59e0b !important;
}

/* ============================================
   CARD ACTIONS
   ============================================ */

.bapi__card-actions {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: #fafafa;
  border-top: 1px solid #e8e8e8;
}

.bapi__card-actions a,
.bapi__card-actions button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--brand-radius-sm, 0.5rem);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.action-test {
  background: #e0f2fe;
  color: #0369a1;
}

.action-test:hover {
  background: #0284c7;
  color: #fff;
  transform: translateY(-0.0625rem);
}

.action-edit {
  background: #f3f4f6;
  color: #1f1f1f;
}

.action-edit:hover {
  background: #1f1f1f;
  color: #fff;
  transform: translateY(-0.0625rem);
}

.action-delete {
  background: #fee2e2;
  color: #dc2626;
}

.action-delete:hover {
  background: #dc2626;
  color: #fff;
  transform: translateY(-0.0625rem);
}

.action-copy {
  background: #dbeafe;
  color: #1e40af;
}

.action-copy:hover {
  background: #3b82f6;
  color: #fff;
  transform: translateY(-0.0625rem);
}

.action-revoke {
  background: #fef3c7;
  color: #92400e;
}

.action-revoke:hover {
  background: #f59e0b;
  color: #fff;
  transform: translateY(-0.0625rem);
}

/* ============================================
   API KEY CARD
   ============================================ */

.bapi__key-card {
  background: #fff;
  border: 0.125rem solid #e8e8e8;
  border-radius: var(--brand-radius-md, 0.75rem);
  overflow: hidden;
  transition: all 0.3s ease;
}

.bapi__key-card:hover {
  border-color: var(--brand-primary, #f7c000);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
  transform: translateY(-0.125rem);
}

.bapi__key-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 1.5rem;
  border-bottom: 0.125rem solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bapi__key-header-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.key-icon {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(
    135deg,
    var(--brand-primary, #f7c000) 0%,
    #e6b000 100%
  );
  border-radius: var(--brand-radius-sm, 0.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: #1f1f1f;
}

.bapi__key-header-info h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f1f1f;
  margin: 0;
}

.bapi__key-body {
  padding: 1.5rem;
}

.bapi__key-display {
  background: #f8f9fa;
  border-radius: var(--brand-radius-sm, 0.5rem);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.bapi__key-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.bapi__key-row:last-child {
  margin-bottom: 0;
}

.bapi__key-row .label {
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.0312rem;
}

.bapi__key-row .value {
  font-family: "SF Mono", "Monaco", "Menlo", "Ubuntu Mono", Consolas, monospace;
  color: #1f1f1f;
  font-weight: 500;
  word-break: break-all;
  background: #fff;
  padding: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #e0e0e0;
}

.bapi__key-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.bapi__meta-box {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bapi__meta-box .label {
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.0312rem;
}

.bapi__meta-box .value {
  color: #1f1f1f;
  font-weight: 600;
}

/* ============================================
   BANNERS
   ============================================ */

.bapi__tip-banner,
.bapi__security-banner {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 1px solid #93c5fd;
  border-radius: var(--brand-radius-md, 0.75rem);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bapi__tip-banner i,
.bapi__security-banner i {
  font-size: 1.5rem;
  color: #1e40af;
  flex-shrink: 0;
}

.bapi__tip-banner p,
.bapi__security-banner p {
  margin: 0;
  color: #1e3a8a;
}

.bapi__security-banner {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-color: #fca5a5;
}

.bapi__security-banner i {
  color: #b91c1c;
}

.bapi__security-banner p {
  color: #7f1d1d;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.bpf__empty-state {
  text-align: center;
  padding: 2rem 2rem;
}

.bpf__empty-icon {
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #6b7280;
}

.bpf__empty-state h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f1f1f;
  margin: 0 0 0.75rem 0;
}

.bpf__empty-state p {
  color: #666;
  margin: 0 0 2rem 0;
  max-width: 31.25rem;
  margin-left: auto;
  margin-right: auto;
}

.bapi__btn-empty {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  background: var(--brand-primary, #f7c000);
  color: #1f1f1f;
  border: none;
  border-radius: var(--brand-radius-md, 0.75rem);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.bapi__btn-empty:hover {
  background: #e6b000;
  color: #1f1f1f;
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 1rem rgba(247, 192, 0, 0.3);
}

/* ============================================
   MODAL STYLES
   ============================================ */

.modal-header-dark {
  background: linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%);
  color: #fff;
  border-bottom: 0.1875rem solid var(--brand-primary, #f7c000);
}

.modal-header-dark .modal-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal-header-dark .modal-title i {
  color: var(--brand-primary, #f7c000);
}

.modal-header-dark .btn-close {
  filter: invert(1);
}

.modal-header-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border-bottom: none;
}

.modal-header-success .modal-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal-header-success .btn-close {
  filter: invert(1);
}

.form-label-styled {
  font-weight: 600;
  color: #1f1f1f;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-label-styled i {
  color: var(--brand-primary, #f7c000);
}

.form-control-styled {
  border: 0.125rem solid #e8e8e8;
  border-radius: var(--brand-radius-sm, 0.5rem);
  padding: 0.875rem 1rem;
  transition: all 0.2s ease;
}

.form-control-styled:focus {
  border-color: var(--brand-primary, #f7c000);
  box-shadow: 0 0 0 0.1875rem rgba(247, 192, 0, 0.15);
  outline: none;
}

.form-hint {
  color: #666;
  margin-top: 0.5rem;
}

.modal-info-box {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 1px solid #93c5fd;
  border-radius: var(--brand-radius-sm, 0.5rem);
  padding: 1rem 1.25rem;
}

.modal-info-box p {
  margin: 0;
  color: #1e3a8a;
  display: flex;
  align-items: start;
  gap: 0.75rem;
}

.modal-info-box i {
  color: #1e40af;
  margin-top: 0.125rem;
}

.modal-warning-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
  border-radius: var(--brand-radius-sm, 0.5rem);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.modal-warning-box p {
  margin: 0;
  color: #92400e;
  display: flex;
  align-items: start;
  gap: 0.75rem;
}

.modal-warning-box i {
  color: #f59e0b;
  margin-top: 0.125rem;
}

.generated-key-box {
  margin-bottom: 1.25rem;
}

.generated-key-box label {
  font-weight: 600;
  color: #1f1f1f;
  margin-bottom: 0.625rem;
  display: block;
}

.generated-key-box .input-group {
  display: flex;
  gap: 0.5rem;
}

.generated-key-box .form-control {
  flex: 1;
  font-family: "SF Mono", "Monaco", "Menlo", "Ubuntu Mono", Consolas, monospace;
  background: #f8f9fa;
  border: 0.125rem solid #e8e8e8;
  padding: 0.875rem 1rem;
  border-radius: var(--brand-radius-sm, 0.5rem);
}

.btn-copy-key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  background: var(--brand-primary, #f7c000);
  color: #1f1f1f;
  border: none;
  border-radius: var(--brand-radius-sm, 0.5rem);
  font-size: 1.125rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-copy-key:hover {
  background: #e6b000;
  transform: scale(1.05);
}

.modal-footer-styled {
  background: #f8f9fa;
  border-top: 1px solid #e8e8e8;
  padding: 1.25rem 1.5rem;
}

.btn-modal-cancel,
.btn-modal-primary,
.btn-modal-success {
  padding: 0.75rem 1.5rem;
  border-radius: var(--brand-radius-sm, 0.5rem);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-modal-cancel {
  background: #fff;
  color: #666;
  border: 0.125rem solid #e8e8e8;
}

.btn-modal-cancel:hover {
  background: #f8f9fa;
  border-color: #d0d0d0;
}

.btn-modal-primary {
  background: var(--brand-primary, #f7c000);
  color: #1f1f1f;
}

.btn-modal-primary:hover {
  background: #e6b000;
  transform: translateY(-0.0625rem);
}

.btn-modal-success {
  background: #22c55e;
  color: #fff;
}

.btn-modal-success:hover {
  background: #16a34a;
  transform: translateY(-0.0625rem);
}

/* ============================================
   TOAST NOTIFICATION
   ============================================ */

.bapi__toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: var(--brand-radius-md, 0.75rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  z-index: 9999;
  animation: slideIn 0.3s ease;
}

.bapi__toast i {
  
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
  .bapi__hero-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .bapi__hero-actions {
    width: 100%;
  }

  .bapi__btn-primary,
  .bapi__btn-secondary {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .bapi__container {
    padding: 1.5rem 1rem;
  }

  .bapi__hero {
    padding: 2rem 1.5rem;
  }

  .bapi__hero-text h1 {
    font-size: 1.75rem;
  }

  .bapi__hero-text p {
  }

  .bapi__stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .bapi__grid {
    grid-template-columns: 1fr;
  }

  .bapi__details-grid {
    grid-template-columns: 1fr;
  }

  .bapi__key-meta {
    grid-template-columns: 1fr;
  }

  .bapi__card-actions {
    flex-direction: column;
  }

  .bapi__hero-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .bapi__stats-row {
    grid-template-columns: 1fr;
  }

  .bapi__section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .bapi__btn-section {
    width: 100%;
    justify-content: center;
  }
}

/* ==================== WORKFLOW GUIDE ==================== */
/* Business Workflow Guide BEM styles: see .bwg section near end of file */


/* ==================== PICKUP LOCATIONS (OLD - REMOVED) ==================== */
/* Dead code removed — replaced by BPL-LIST BEM section below */

/* Old pickup location CSS removed — replaced by BPL-LIST, BPL-CHOOSE, BPL-FORM BEM sections */

/* ================================================
   BPL-LIST - Pickup Locations List (BEM)
   ================================================ */
.bpl-list { padding: 0.75rem; }

/* Hero */
.bpl-list__hero { background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%); color: #fff; padding: 1.25rem 1.5rem; border-radius: 0.75rem; margin-bottom: 0.75rem; }
.bpl-list__hero-icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(247,192,0,0.15); color: var(--brand-primary, #f7c000); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.bpl-list__hero-title { font-size: 1.375rem; font-weight: 700; margin: 0; line-height: 1.2; }
.bpl-list__hero-sub { font-size: 0.8rem; color: rgba(255,255,255,0.65); margin: 0.125rem 0 0; }

/* Buttons */
.bpl-list__btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: all 0.2s ease; white-space: nowrap; }
.bpl-list__btn--add { background: var(--brand-primary, #f7c000); color: var(--brand-grey-800, #1f1f1f); }
.bpl-list__btn--add:hover { background: #e6b300; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(247,192,0,0.3); color: var(--brand-grey-800); text-decoration: none; }
.bpl-list__btn--fulfillment { background: var(--brand-navy, #001f3f); color: #fff; }
.bpl-list__btn--fulfillment:hover { background: var(--brand-navy-light, #003366); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,31,63,0.3); text-decoration: none; }

/* Callout */
.bpl-list__callout { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 0.375rem; font-size: 0.75rem; margin-bottom: 1rem; background: #eff6ff; color: #1e40af; border-left: 3px solid #3b82f6; }
.bpl-list__callout i { flex-shrink: 0; }

/* Group + Section Head */
.bpl-list__group { margin-bottom: 1rem; }
.bpl-list__section-head { display: flex; align-items: center; gap: 0.375rem; font-size: 0.675rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-grey-500, #6c757d); padding-bottom: 0.5rem; border-bottom: 1px solid var(--brand-grey-200, #f0f0f0); margin-bottom: 0.75rem; }
.bpl-list__section-head i { color: var(--brand-primary, #f7c000); font-size: 0.625rem; }
.bpl-list__section-count { font-size: 0.6rem; font-weight: 700; background: var(--brand-grey-200, #f0f0f0); color: var(--brand-grey-600, #555); padding: 0.0625rem 0.4rem; border-radius: 1rem; margin-left: 0.25rem; }

/* Grid */
.bpl-list__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.75rem; }

/* Card */
.bpl-list__card { background: #fff; border-radius: 0.75rem; border: 1px solid var(--brand-grey-200, #f0f0f0); overflow: hidden; transition: box-shadow 0.2s ease; }
.bpl-list__card:hover { box-shadow: var(--brand-shadow-md, 0 0.25rem 0.5rem rgba(0,0,0,0.1)); }
.bpl-list__card--warehouse { border-left: 3px solid #8b5cf6; }

.bpl-list__card__head { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--brand-grey-200, #f0f0f0); gap: 0.5rem; flex-wrap: wrap; }

/* Avatar */
.bpl-list__avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-navy, #001f3f); color: var(--brand-primary, #f7c000); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; }
.bpl-list__avatar--warehouse { background: linear-gradient(135deg, #7c3aed, #8b5cf6); color: #fff; }

.bpl-list__card-name { font-size: 0.875rem; font-weight: 700; color: var(--brand-grey-800, #1f1f1f); }

/* Tags */
.bpl-list__tag { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.575rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.4rem; border-radius: 2rem; margin-left: 0.375rem; }
.bpl-list__tag--gold { background: #fef3c7; color: #92400e; }

/* Status */
.bpl-list__status { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; border-radius: 2rem; font-size: 0.65rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.bpl-list__status--ok { background: #dcfce7; color: #15803d; }
.bpl-list__status--muted { background: var(--brand-grey-100, #fafafa); color: var(--brand-grey-500, #6c757d); }

/* Address bar */
.bpl-list__address { padding: 0.5rem 0.875rem; font-size: 0.75rem; color: var(--brand-grey-600, #555); background: var(--brand-grey-100, #fafafa); border-bottom: 1px solid var(--brand-grey-200, #f0f0f0); }
.bpl-list__address i { color: var(--brand-primary, #f7c000); margin-right: 0.25rem; font-size: 0.65rem; }

/* Map Link */
.bpl-list__map-link { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; font-size: 0.75rem; font-weight: 500; color: #1e40af; text-decoration: none; background: #eff6ff; border-bottom: 1px solid var(--brand-grey-200, #f0f0f0); transition: background 0.15s ease; }
.bpl-list__map-link:hover { background: #dbeafe; color: #1e40af; text-decoration: none; }
.bpl-list__map-link i { font-size: 0.65rem; }
.bpl-list__map-link__ext { margin-left: auto; opacity: 0.5; font-size: 0.55rem; }

/* Fields */
.bpl-list__fields { padding: 0.25rem 0.875rem; }
.bpl-list__field { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0; gap: 0.75rem; }
.bpl-list__field:not(:last-child) { border-bottom: 1px solid var(--brand-grey-100, #fafafa); }
.bpl-list__field__label { font-size: 0.7rem; color: var(--brand-grey-500, #6c757d); }
.bpl-list__field__value { font-size: 0.8rem; color: var(--brand-grey-800, #1f1f1f); font-weight: 500; text-align: right; }
.bpl-list__code { font-family: 'SF Mono','Fira Code','Consolas',monospace; font-size: 0.725rem; font-weight: 700; color: var(--brand-navy, #001f3f); background: var(--brand-grey-100, #fafafa); padding: 0.1rem 0.375rem; border-radius: 0.25rem; }

/* Note */
.bpl-list__note { padding: 0.375rem 0.875rem; font-size: 0.7rem; color: var(--brand-grey-500, #6c757d); background: var(--brand-grey-100, #fafafa); border-left: 3px solid var(--brand-primary, #f7c000); margin: 0.375rem 0.875rem; border-radius: 0.25rem; }
.bpl-list__note i { margin-right: 0.25rem; color: var(--brand-primary, #f7c000); }

/* Card Footer / Actions */
.bpl-list__card__foot { display: flex; gap: 0.375rem; padding: 0.625rem 0.875rem; border-top: 1px solid var(--brand-grey-200, #f0f0f0); background: var(--brand-grey-100, #fafafa); }
.bpl-list__card__foot--managed { justify-content: center; font-size: 0.675rem; font-weight: 500; color: var(--brand-grey-400, #b0b0b0); gap: 0.375rem; }

.bpl-list__act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; font-size: 0.675rem; font-weight: 600; text-decoration: none; transition: all 0.15s ease; border: 1px solid transparent; }
.bpl-list__act--pick { background: #eff6ff; color: #1e40af; }
.bpl-list__act--pick:hover { background: #1e40af; color: #fff; transform: translateY(-1px); text-decoration: none; }
.bpl-list__act--deliver { background: #dcfce7; color: #166534; }
.bpl-list__act--deliver:hover { background: #16a34a; color: #fff; transform: translateY(-1px); text-decoration: none; }
.bpl-list__act--edit { background: #fff; color: var(--brand-navy, #001f3f); border-color: var(--brand-grey-300, #dcdcdc); }
.bpl-list__act--edit:hover { background: var(--brand-primary, #f7c000); border-color: var(--brand-primary, #f7c000); color: var(--brand-grey-800); transform: translateY(-1px); text-decoration: none; }
.bpl-list__act--del { background: #fff; color: #dc2626; border-color: #fecaca; flex: 0; padding: 0.375rem 0.5rem; }
.bpl-list__act--del:hover { background: #fef2f2; border-color: #ef4444; transform: translateY(-1px); text-decoration: none; }

/* Empty */
.bpl-list__empty { text-align: center; padding: 3rem 1.5rem; }
.bpl-list__empty__icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--brand-grey-100, #fafafa); color: var(--brand-grey-400, #b0b0b0); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; margin: 0 auto 1rem; }
.bpl-list__empty__title { font-size: 1rem; font-weight: 700; color: var(--brand-grey-700, #333); margin-bottom: 0.25rem; }
.bpl-list__empty__text { font-size: 0.8rem; color: var(--brand-grey-400, #b0b0b0); margin-bottom: 1rem; }

/* BPL-LIST Responsive */
@media (max-width: 575.98px) {
    .bpl-list__hero { padding: 1rem 1.25rem; }
    .bpl-list__hero-title { font-size: 1.125rem; }
    .bpl-list__grid { grid-template-columns: 1fr; }
    .bpl-list__card__foot { flex-wrap: wrap; }
    .bpl-list__act { min-width: 0; }
    .bpl-list__card__head { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Team card mobile fixes
   ========================================================================== */
@media (max-width: 576px) {
  .card-footer .btn-group {
    flex-direction: column;
    width: 100%;
  }
  .card-footer .btn-group .btn {
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .team-empty-state {
    text-align: center;
    padding: 2rem 1rem;
  }
  .team-empty-state .fa {
    display: block;
    margin: 0 auto 1rem;
  }
}

/* Remove confirmation mobile */
@media (max-width: 576px) {
  .d-flex.gap-2 {
    flex-direction: column;
  }
  .d-flex.gap-2 .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ==================== TABLE COLUMN WIDTHS ==================== */
/* Table column width utilities for permissions table */
.col-width-sm {
    width: 100px;
}

.col-width-md {
    width: 120px;
}

/* =================================================================
   FUTURISTIC BUSINESS PROFILE STYLES
   Extracted from business_profile.html inline styles
   ================================================================= */

/* Context bar — distinguishes owner-managed view from public display view */
.bpf__context-bar {
    position: relative;
    z-index: 6;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.bpf__context-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.65rem 1.5rem;
}

.bpf__context-bar--owner {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}

.bpf__context-bar--public {
    background: #f6f7fb;
}

.bpf__context-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a2e;
}

.bpf__context-actions {
    display: inline-flex;
    gap: 0.5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.bpf__context-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    font-size: 0.825rem;
    font-weight: 600;
    text-decoration: none;
    color: #1a1a2e;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.bpf__context-link:hover {
    transform: translateY(-1px);
    color: #1a1a2e;
    background: #fff;
}

.bpf__context-link--primary {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}

.bpf__context-link--primary:hover {
    background: #0f3460;
    color: #fff;
}

.bpf__context-crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-primary-dark, #d4a800);
    text-decoration: none;
}

.bpf__context-crumb:hover {
    color: var(--brand-primary-dark, #d4a800);
    text-decoration: underline;
}

.bpf__context-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #5a5a6e;
    margin-left: auto;
}

/* Hero Section */
.bpf__hero {
    position: relative;
    min-height: 50vh;
    background: linear-gradient(135deg, #fffdf6 0%, #ffffff 52%, #fff7e6 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem 7.5rem;
    overflow: hidden;
}

.bpf__hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 18% 82%, rgba(247, 192, 0, 0.18) 0%, transparent 52%),
        radial-gradient(circle at 82% 18%, rgba(247, 192, 0, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.bpf__hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to top, var(--brand-grey-100), transparent);
    pointer-events: none;
}

/* Animated background grid */
.bpf__hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(247, 192, 0, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247, 192, 0, 0.06) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.bpf__hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
}

/* Logo with glow effect */
.bpf__logo-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.bpf__logo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow:
        0 10px 30px rgba(247, 192, 0, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.bpf__logo:hover {
    transform: scale(1.05);
    box-shadow:
        0 0 40px rgba(247, 192, 0, 0.5),
        0 0 80px rgba(247, 192, 0, 0.2);
}

.bpf__logo-ring {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(247, 192, 0, 0.2);
    border-radius: 50%;
    animation: ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.2; }
}

/* Business name with gradient text */
.bpf__business-name {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1a1a2e 0%, #c79a00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    letter-spacing: -0.5px;
}

.bpf__tagline {
    color: #5a6072;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

/* Meta badges */
.bpf__meta-badges {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.bpf__meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    color: #4a5568;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bpf__meta-badge i {
    color: #e6b000;
}

/* Edit button */
.bpf__btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(247, 192, 0, 0.3);
}

.bpf__btn-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(247, 192, 0, 0.4);
    color: #1a1a2e;
}

/* Content Section */
.bpf__content {
    max-width: 1200px;
    margin: -80px auto 0;
    padding: 0 1.5rem 3rem;
    position: relative;
    z-index: 10;
}

/* Futuristic Cards */
.bpf__card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 0;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bpf__card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Card header with accent */
.bpf__card-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bpf__card-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
}

.bpf__card-title {
    font-weight: 700;
    color: white;
    margin: 0;
}

/* Card body */
.bpf__card-body {
    padding: 1.5rem;
}

/* Info rows */
.bpf__info-row {
    display: flex;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.bpf__info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bpf__info-row:first-child {
    padding-top: 0;
}

.bpf__info-label {
    min-width: 140px;
    font-weight: 600;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bpf__info-label::before {
    content: '';
    width: 4px;
    height: 4px;
    background: #f7c000;
    border-radius: 50%;
}

.bpf__info-value {
    flex: 1;
    color: #4a5568;
    line-height: 1.6;
}

/* Description text */
.bpf__desc-text {
    color: #4a5568;
    line-height: 1.8;
    padding: 0.5rem 0;
}

/* Location card styling */
.bpf__location-address {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.bpf__location-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f7c000;
    
    flex-shrink: 0;
}

.bpf__location-details {
    flex: 1;
}

.bpf__location-details p {
    margin: 0;
    color: #4a5568;
    line-height: 1.6;
}

.bpf__location-details .bpf__city-line {
    font-weight: 600;
    color: #1a1a2e;
}

/* Social links grid */
.bpf__social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.bpf__social-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    text-decoration: none;
    color: #1a1a2e;
    transition: all 0.3s ease;
}

.bpf__social-card:hover {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(26, 26, 46, 0.2);
}

.bpf__social-card:hover .bpf__social-icon {
    background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
    color: #1a1a2e;
}

.bpf__social-card:hover .bpf__social-label {
    color: rgba(255, 255, 255, 0.7);
}

.bpf__social-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f7c000;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.bpf__social-info {
    flex: 1;
    min-width: 0;
}

.bpf__social-label {
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.bpf__social-value {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty state */
.bpf__empty-state {
    text-align: center;
    padding: 3rem 2rem;
}

.bpf__empty-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #a0aec0;
}

.bpf__empty-text {
    color: #718096;
    margin: 0;
}

.bpf__empty-subtext {
    color: #a0aec0;
    margin-top: 0.5rem;
}

/* Products coming soon */
.bpf__coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
    color: #1a1a2e;
    border-radius: 50px;
    font-weight: 600;
    margin-top: 1rem;
}

/* Category badge */
.bpf__category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: linear-gradient(135deg, #e8f4fd 0%, #d1e9fc 100%);
    color: #1a73e8;
    border-radius: 50px;
    font-weight: 600;
}

/* =================================================================
   ONE-PAGE SHOWCASE LAYOUT (hero CTA, sections, story, visit, connect)
   ================================================================= */

/* Hero CTA group */
.bpf__cta-group {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.bpf__btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.bpf__btn-cta--wa {
    background: linear-gradient(135deg, #25d366 0%, #1ebe5a 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
}

.bpf__btn-cta--wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
    color: #fff;
}

.bpf__btn-cta--ghost {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a2e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.bpf__btn-cta--ghost:hover {
    background: #1a1a2e;
    border-color: #1a1a2e;
    transform: translateY(-2px);
    color: #fff;
}

/* Flowing main + sections */
.bpf__main {
    position: relative;
    z-index: 5;
}

.bpf__section {
    padding: 4rem 1.5rem;
    background: #fff;
}

.bpf__section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.bpf__section--alt {
    background: var(--brand-grey-100, #fafafa);
}

.bpf__section--products {
    background: var(--brand-grey-100, #fafafa);
    margin-top: -90px;
    padding-top: 2.5rem;
}

/* Section heads (centered, eyebrow + title) */
.bpf__section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.bpf__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #c79a00;
    margin-bottom: 0.5rem;
}

.bpf__eyebrow i { color: #e6b000; }
.bpf__eyebrow--light { color: #c79a00; }

.bpf__section-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    letter-spacing: -0.5px;
}

.bpf__section-title--light { color: #1a1a2e; }

.bpf__section-sub {
    margin: 0.6rem 0 0;
    color: #718096;
}

/* Our Story */
.bpf__story {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.bpf__story-text p {
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.bpf__story-lead {
    font-size: 1.15rem;
    color: #2d3748 !important;
    font-weight: 500;
}

.bpf__story-note {
    border-left: 3px solid #f7c000;
    padding: 0.25rem 0 0.25rem 1.1rem;
    margin: 1.25rem 0;
}

.bpf__story-note-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1a2e;
    margin-bottom: 0.35rem;
}

.bpf__story-note-label i { color: #f7c000; }
.bpf__story-note p { margin: 0; }

/* Stat strip */
.bpf__stat-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    position: sticky;
    top: 1.5rem;
}

.bpf__stat {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bpf__stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.bpf__stat-num {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.1;
}

.bpf__stat-num--text { font-size: 1.05rem; }

.bpf__stat-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a0aec0;
}

/* Visit / Reach Us */
.bpf__visit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.bpf__visit-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.bpf__visit-card--address {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 100%);
    color: #1a1a2e;
    border-color: rgba(247, 192, 0, 0.35);
}

.bpf__visit-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
    color: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.bpf__visit-kicker {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #c79a00;
    margin-bottom: 0.6rem;
}

.bpf__visit-card--address p {
    margin: 0 0 0.25rem;
    color: #4a5568;
    line-height: 1.6;
}

.bpf__visit-city { font-weight: 700; color: #1a1a2e !important; }

.bpf__contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bpf__contact-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: var(--brand-grey-100, #fafafa);
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: #1a1a2e;
    transition: all 0.25s ease;
}

.bpf__contact-item:hover {
    background: #1a1a2e;
    color: #fff;
    transform: translateX(4px);
}

.bpf__contact-ic {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #1a1a2e;
    color: #f7c000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.bpf__contact-ic--wa { background: #25d366; color: #fff; }
.bpf__contact-item:hover .bpf__contact-ic { background: #f7c000; color: #1a1a2e; }

.bpf__contact-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpf__contact-meta b {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #a0aec0;
    margin-bottom: 0.1rem;
}

.bpf__contact-item:hover .bpf__contact-meta b { color: rgba(255, 255, 255, 0.6); }

.bpf__contact-arrow {
    margin-left: auto;
    opacity: 0.3;
    font-size: 0.75rem;
    transition: all 0.25s ease;
}

.bpf__contact-item:hover .bpf__contact-arrow { opacity: 1; }

/* Connect band */
.bpf__section--connect {
    background: var(--brand-grey-100, #fafafa);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.bpf__section--connect::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(247, 192, 0, 0.16) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(247, 192, 0, 0.1) 0%, transparent 45%);
    pointer-events: none;
}

/* Connect block (social) merged inside the Visit & Reach Us section */
.bpf__connect-block {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    text-align: center;
}

.bpf__connect-block .bpf__eyebrow {
    margin-bottom: 1.25rem;
}

.bpf__social-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.bpf__social-chip {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #1a1a2e;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bpf__social-chip:hover {
    transform: translateY(-6px) scale(1.08);
    color: #fff;
}

.bpf__social-chip--ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: transparent; }
.bpf__social-chip--fb:hover { background: #1877f2; border-color: transparent; }
.bpf__social-chip--tt:hover { background: #000; border-color: rgba(255, 255, 255, 0.3); }
.bpf__social-chip--yt:hover { background: #ff0000; border-color: transparent; }
.bpf__social-chip--x:hover  { background: #000; border-color: rgba(255, 255, 255, 0.3); }
.bpf__social-chip--in:hover { background: #0a66c2; border-color: transparent; }
.bpf__social-chip--sc:hover { background: #fffc00; color: #1a1a2e; border-color: transparent; }

/* One-page layout responsive */
@media (max-width: 768px) {
    .bpf__section { padding: 2.75rem 1rem; }
    .bpf__section--products { margin-top: -60px; }
    .bpf__section-title { font-size: 1.5rem; }
    .bpf__story { grid-template-columns: 1fr; gap: 1.5rem; }
    .bpf__stat-strip { position: static; }
    .bpf__visit { grid-template-columns: 1fr; }
    .bpf__social-chip { width: 52px; height: 52px; font-size: 1.2rem; }
}

/* =================================================================
   PRODUCT SHOWCASE (animated grid)
   ================================================================= */
.bpf__products-count {
    margin-left: auto;
    min-width: 28px;
    height: 28px;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
    color: #1a1a2e;
    font-weight: 800;
    font-size: 0.85rem;
}

.bpf__products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.bpf__product-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s ease;
    /* Staggered entrance */
    opacity: 0;
    transform: translateY(24px);
    animation: bpfProductIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bpf__product-card:nth-child(1)  { animation-delay: 0ms; }
.bpf__product-card:nth-child(2)  { animation-delay: 80ms; }
.bpf__product-card:nth-child(3)  { animation-delay: 160ms; }
.bpf__product-card:nth-child(4)  { animation-delay: 240ms; }
.bpf__product-card:nth-child(5)  { animation-delay: 320ms; }
.bpf__product-card:nth-child(6)  { animation-delay: 400ms; }
.bpf__product-card:nth-child(7)  { animation-delay: 480ms; }
.bpf__product-card:nth-child(8)  { animation-delay: 560ms; }
.bpf__product-card:nth-child(9)  { animation-delay: 640ms; }
.bpf__product-card:nth-child(10) { animation-delay: 720ms; }
.bpf__product-card:nth-child(11) { animation-delay: 800ms; }
.bpf__product-card:nth-child(12) { animation-delay: 880ms; }

@keyframes bpfProductIn {
    to { opacity: 1; transform: translateY(0); }
}

.bpf__product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(247, 192, 0, 0.5);
    box-shadow: 0 18px 44px rgba(26, 26, 46, 0.16);
}

.bpf__product-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f6f8 0%, #eceef1 100%);
}

.bpf__product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bpf__product-card:hover .bpf__product-img {
    transform: scale(1.08);
}

.bpf__product-noimg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    color: #c2c8d0;
}

/* Diagonal shine sweep on hover */
.bpf__product-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
}

.bpf__product-card:hover .bpf__product-shine {
    animation: bpfShine 0.85s ease;
}

@keyframes bpfShine {
    0% { left: -120%; }
    100% { left: 160%; }
}

.bpf__product-price {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #f7c000;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 6px 18px rgba(26, 26, 46, 0.3);
}

.bpf__product-price small {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.bpf__product-body {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.bpf__product-brand {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #f7c000;
}

.bpf__product-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bpf__product-desc {
    font-size: 0.82rem;
    color: #718096;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bpf__product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.bpf__product-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 50px;
    background: #f4f5f7;
    color: #4a5568;
    font-size: 0.7rem;
    font-weight: 600;
}

.bpf__product-tag i {
    color: #f7c000;
    font-size: 0.65rem;
}

/* Buy / order button on each product card */
.bpf__product-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.6rem 1rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #f7c000 0%, #e6b000 100%);
    color: #1a1a2e;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    border: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 14px rgba(247, 192, 0, 0.3);
}

.bpf__product-buy:hover {
    color: #1a1a2e;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(247, 192, 0, 0.45);
}

.bpf__product-buy--wa {
    background: linear-gradient(135deg, #25d366 0%, #1ebe5a 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.bpf__product-buy--wa:hover {
    color: #fff;
    box-shadow: 0 7px 20px rgba(37, 211, 102, 0.45);
}

.bpf__coming-soon-badge--link {
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bpf__coming-soon-badge--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(247, 192, 0, 0.4);
    color: #1a1a2e;
}

@media (max-width: 992px) {
    .bpf__products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bpf__product-card {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .bpf__product-card:hover .bpf__product-shine {
        animation: none;
    }
}

/* Business Profile Responsive */
@media (max-width: 768px) {
    .bpf__hero {
        min-height: 40vh;
        padding: 3rem 1rem 5.5rem;
    }

    .bpf__logo {
        width: 100px;
        height: 100px;
    }

    .bpf__business-name {
        font-size: 1.75rem;
    }

    .bpf__content {
        margin-top: -50px;
        padding: 0 1rem 2rem;
    }

    .bpf__info-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .bpf__info-label {
        min-width: auto;
    }

    .bpf__social-grid {
        grid-template-columns: 1fr;
    }

    .bpf__location-address {
        flex-direction: column;
        text-align: center;
    }

    .bpf__products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .bpf__product-name {
        font-size: 0.9rem;
    }
}

@media (max-width: 420px) {
    .bpf__products-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) {
    .bpf__business-name {
        font-size: 3rem;
    }

    .bpf__logo {
        width: 160px;
        height: 160px;
    }
}

/* =================================================================
   BUSINESS PROFILE UPDATE FORM STYLES
   Extracted from business_profile_update.html inline styles
   ================================================================= */

.update-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.form-card {
    background: var(--brand-white, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 2rem;
}

.form-card .card-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.form-card .card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-card .card-title i {
    color: var(--brand-primary, #3498db);
}

.form-card .form-group {
    margin-bottom: 1.25rem;
}

.form-card .form-group label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.form-card .form-group input,
.form-card .form-group textarea,
.form-card .form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.2s;
}

.form-card .form-group input:focus,
.form-card .form-group textarea:focus,
.form-card .form-group select:focus {
    outline: none;
    border-color: var(--brand-primary, #3498db);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-card .form-group .help-text {
    color: #666;
    margin-top: 0.35rem;
}

.form-card .btn-submit {
    background: var(--brand-primary, #3498db);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.form-card .btn-submit:hover {
    background: #2980b9;
}

.form-card .btn-cancel {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #ddd;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    margin-right: 0.5rem;
}

.form-card .btn-cancel:hover {
    background: #e9ecef;
}

/* ==================== DASHBOARD STATS ==================== */
/* Business Dashboard Statistics - BEM: bdb__ prefix - HTMX Compatible */

.bdb__stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 8px;
}

.bdb__stat {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  text-align: center;
}

.bdb__stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-bottom: 6px;
}

.bdb__stat-icon--primary {
  background: #fef3c7;
  color: #d97706;
}

.bdb__stat-icon--success {
  background: #dcfce7;
  color: #16a34a;
}

.bdb__stat-icon--info {
  background: #dbeafe;
  color: #2563eb;
}

.bdb__stat-icon--warning {
  background: #fef3c7;
  color: #ca8a04;
}

.bdb__stat-icon--danger {
  background: #fee2e2;
  color: #dc2626;
}

.bdb__stat-value {
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.bdb__stat-label {
  color: #6b7280;
  margin: 2px 0 0 0;
}

/* Responsive Grid for Dashboard Stats */
@media (max-width: 992px) {
  .bdb__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 576px) {
  .bdb__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==================== TEAM DASHBOARD ==================== */
/* Team Members Dashboard Section - BEM: bdb__ prefix */

.bdb__team-grid-legacy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.bdb__team-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.bdb__team-card:hover {
  background: #fff;
  border-color: #0d6efd;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.1);
}

.bdb__team-avatar {
  flex-shrink: 0;
}

.bdb__avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

/* Responsive Grid for Team Members */
@media (min-width: 768px) {
  .bdb__team-grid-legacy {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .bdb__team-grid-legacy {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==================== DASHBOARD LIST CARDS ==================== */
/* Modern card component for order lists and team on desktop dashboard */

.bdb__list-card {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.bdb__list-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* Header */
.bdb__list-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.bdb__list-card__header--warning { border-left: 3px solid #f59e0b; }
.bdb__list-card__header--success { border-left: 3px solid #10b981; }
.bdb__list-card__header--danger { border-left: 3px solid #ef4444; }

.bdb__list-card__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdb__list-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.bdb__list-card__icon--warning { background: #fef3c7; color: #d97706; }
.bdb__list-card__icon--success { background: #dcfce7; color: #16a34a; }
.bdb__list-card__icon--danger { background: #fee2e2; color: #dc2626; }
.bdb__list-card__icon--primary { background: #dbeafe; color: #2563eb; }

.bdb__list-card__title {
  font-weight: 600;
  color: #374151;
}

.bdb__list-card__count {
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 100px;
  letter-spacing: 0.2px;
}

.bdb__list-card__count--warning { background: #fef3c7; color: #92400e; }
.bdb__list-card__count--success { background: #dcfce7; color: #166534; }
.bdb__list-card__count--danger { background: #fee2e2; color: #991b1b; }

/* Body / list items */
.bdb__list-card__body {
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  min-height: auto;
}

/* Remove min-height when body only contains empty state */
.bdb__list-card__body:has(.bdb__list-card__empty:only-child) {
  max-height: none;
  min-height: auto;
}

.bdb__list-card__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid #f3f4f6;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
  gap: 8px;
}

.bdb__list-card__item:last-child {
  border-bottom: none;
}

.bdb__list-card__item:hover {
  background: #f9fafb;
}

.bdb__list-card__item--alert:hover {
  background: #fef2f2;
}

.bdb__list-card__item-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.bdb__list-card__item-number {
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdb__list-card__item-customer {
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdb__list-card__item-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.bdb__list-card__item-zone {
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  padding: 1px 6px;
  border-radius: 4px;
}

.bdb__list-card__item-amount {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.bdb__list-card__item-amount--warning {
  background: #fef3c7;
  color: #92400e;
}

.bdb__list-card__item-amount--success {
  background: #dcfce7;
  color: #166534;
}

.bdb__list-card__item-amount--danger {
  background: #fee2e2;
  color: #991b1b;
}

/* Empty state */
.bdb__list-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  color: #9ca3af;
  font-size: 0.85rem;
}

.bdb__list-card__empty i {
  font-size: 18px;
  opacity: 0.4;
}

.bdb__list-card__empty span {
  font-weight: 500;
}

/* Footer link */
.bdb__list-card__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #001f3f;
  text-decoration: none;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  transition: background 0.15s ease;
}

.bdb__list-card__footer:hover {
  background: #f0f1f3;
  color: #001f3f;
  text-decoration: none;
}

/* ==================== TEAM MEMBERS (DASHBOARD) ==================== */

.bdb__team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0;
}

.bdb__team-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.12s ease;
}

.bdb__team-member:last-child {
  border-bottom: none;
}

.bdb__team-member:hover {
  background: #f9fafb;
}

.bdb__team-member__avatar {
  flex-shrink: 0;
}

.bdb__team-member__avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.bdb__team-member__avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #001f3f 0%, #003366 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
}

.bdb__team-member__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bdb__team-member__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdb__team-member__role {
  color: #6b7280;
}

.bdb__team-member__status {
  flex-shrink: 0;
}

.bdb__team-member__badge {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bdb__team-member__badge i {
  font-size: 5px;
}

.bdb__team-member__badge--active {
  background: #dcfce7;
  color: #166534;
}

.bdb__team-member__badge--pending {
  background: #fef3c7;
  color: #92400e;
}

.bdb__team-member__badge--suspended {
  background: #fee2e2;
  color: #991b1b;
}

/* ==================== BUSINESS TEAMS LIST ==================== */
/* BEM: btl__ prefix — business_teams_list.html */

.btl { padding: 1rem 1.25rem; }

/* Header */
.btl__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.btl__header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.btl__header-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--brand-navy, #001f3f);
  color: var(--brand-primary, #f7c000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.btl__title {
  font-size: 1.25rem !important;
  font-weight: 700;
  color: var(--brand-grey-800, #1f1f1f);
  margin: 0;
  line-height: 1.2;
}
.btl__subtitle {
  font-size: 0.75rem !important;
  color: var(--brand-grey-500, #6c757d);
  margin: 0;
}
.btl__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-navy, #001f3f);
  border: none;
  border-radius: var(--brand-radius-sm, 0.5rem);
  text-decoration: none;
  transition: all 0.2s ease;
}
.btl__add-btn:hover {
  background: var(--brand-navy-light, #003366);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--brand-shadow-md, 0 0.25rem 0.5rem rgba(0,0,0,0.1));
}

/* Legend */
/* How-to Guide Banner */
.btl__guide {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--brand-radius-sm, 0.5rem);
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
}

.btl__guide-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1d4ed8;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.btl__guide-methods {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btl__guide-method {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  flex: 1;
  min-width: 220px;
}

.btl__guide-method-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.btl__guide-method-icon--direct {
  background: #dbeafe;
  color: #1d4ed8;
}

.btl__guide-method-icon--request {
  background: #dcfce7;
  color: #15803d;
}

.btl__guide-method-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.btl__guide-method-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1e293b;
}

.btl__guide-method-desc {
  font-size: 0.75rem;
  color: #475569;
  line-height: 1.5;
}

.btl__guide-link {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btl__guide-link:hover { color: #1e40af; }

.btl__guide-divider {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  padding: 0 0.25rem;
  align-self: center;
}

/* Join Requests Section */
.btl__requests {
  background: #fff;
  border: 1.5px solid #fbbf24;
  border-radius: var(--brand-radius-sm, 0.5rem);
  margin-bottom: 1rem;
  overflow: hidden;
}

.btl__requests-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #92400e;
}

.btl__requests-count {
  margin-left: auto;
  background: #f59e0b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  min-width: 1.25rem;
  text-align: center;
}

.btl__req-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid #fef3c7;
  transition: background 0.15s;
}

.btl__req-row:last-child { border-bottom: none; }
.btl__req-row:hover { background: #fffbeb; }

.btl__req-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #fde68a;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.btl__req-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.btl__req-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1e293b;
}

.btl__req-meta {
  font-size: 0.7rem;
  color: #64748b;
}

.btl__req-msg {
  font-size: 0.7rem;
  color: #94a3b8;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btl__req-actions {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
}

.btl__req-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.625rem;
  border-radius: var(--brand-radius-sm, 0.375rem);
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.btl__req-btn--accept {
  background: #dcfce7;
  color: #15803d;
}

.btl__req-btn--accept:hover { background: #bbf7d0; }

.btl__req-btn--reject {
  background: #fee2e2;
  color: #dc2626;
}

.btl__req-btn--reject:hover { background: #fecaca; }

.btl__req-btn:disabled { opacity: 0.5; cursor: default; }

.btl__legend {
  background: var(--brand-grey-100, #fafafa);
  border: 1px solid var(--brand-grey-200, #f0f0f0);
  border-radius: var(--brand-radius-sm, 0.5rem);
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.75rem !important;
}
.btl__legend-label {
  font-weight: 600;
  color: var(--brand-grey-500, #6c757d);
  font-size: 0.7rem;
}
.btl__legend-label i { color: var(--brand-primary, #f7c000); }
.btl__legend-desc {
  font-size: 0.7rem;
  color: var(--brand-grey-400, #b0b0b0);
  margin-right: 0.5rem;
}

/* Cards Grid */
.btl__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

/* Card */
.btl__card {
  background: #fff;
  border-radius: var(--brand-radius-md, 0.75rem);
  border: 1px solid var(--brand-grey-200, #f0f0f0);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btl__card:hover {
  box-shadow: var(--brand-shadow-md, 0 0.25rem 0.5rem rgba(0,0,0,0.1));
  transform: translateY(-2px);
}
.btl__card--inactive { border-color: #fde68a; }
.btl__card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.875rem;
  background: var(--brand-grey-100, #fafafa);
  border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
}

/* Avatar Section */
.btl__avatar-section {
  text-align: center;
  padding: 1rem 0.875rem 0.5rem;
}
.btl__avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  margin: 0 auto 0.5rem;
  overflow: hidden;
  border: 3px solid var(--brand-grey-200, #f0f0f0);
}
.btl__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.btl__name {
  font-size: 0.875rem !important;
  font-weight: 700;
  color: var(--brand-grey-800, #1f1f1f);
  margin: 0 0 0.125rem;
}
.btl__email {
  font-size: 0.75rem !important;
  color: var(--brand-grey-400, #b0b0b0);
}

/* Details */
.btl__details { padding: 0.25rem 0.875rem 0.5rem; }
.btl__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0;
  gap: 0.75rem;
}
.btl__field:not(:last-child) {
  border-bottom: 1px solid var(--brand-grey-100, #fafafa);
}
.btl__field-label {
  font-size: 0.75rem !important;
  color: var(--brand-grey-500, #6c757d);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.btl__field-label i {
  color: var(--brand-grey-400, #b0b0b0);
  font-size: 0.7rem;
  width: 1rem;
  text-align: center;
}
.btl__field-value {
  font-size: 0.8125rem !important;
  font-weight: 500;
  color: var(--brand-grey-800, #1f1f1f);
}

/* Badges */
.btl__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: 0.65rem !important;
  font-weight: 600;
  white-space: nowrap;
}
.btl__badge--info { background: #eff6ff; color: #2563eb; }
.btl__badge--primary { background: #f0f9ff; color: #0369a1; }
.btl__badge--success { background: #dcfce7; color: #15803d; }
.btl__badge--warning { background: #fef3c7; color: #92400e; }
.btl__badge--danger { background: #fef2f2; color: #dc2626; }
.btl__badge--muted { background: var(--brand-grey-200, #f0f0f0); color: var(--brand-grey-600, #555); }

/* Actions */
.btl__actions {
  display: flex;
  border-top: 1px solid var(--brand-grey-200, #f0f0f0);
}
.btl__action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  font-size: 0.72rem !important;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border-right: 1px solid var(--brand-grey-200, #f0f0f0);
}
.btl__action-btn:last-child { border-right: none; }
.btl__action-btn--primary {
  color: var(--brand-navy, #001f3f);
  background: transparent;
}
.btl__action-btn--primary:hover {
  background: var(--brand-navy, #001f3f);
  color: var(--brand-primary, #f7c000);
}
.btl__action-btn--secondary {
  color: var(--brand-grey-600, #555);
  background: transparent;
}
.btl__action-btn--secondary:hover {
  background: var(--brand-grey-100, #fafafa);
  color: var(--brand-grey-800, #1f1f1f);
}
.btl__action-btn--danger {
  color: var(--brand-grey-400, #b0b0b0);
  background: transparent;
}
.btl__action-btn--danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Empty State */
.btl__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1rem 1rem;
  color: var(--brand-grey-400, #b0b0b0);
}
.btl__empty i {
  font-size: 1rem; 
  display: block; }
  
.btl__empty h3 {
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--brand-grey-500, #6c757d);
  margin-bottom: 0.375rem;
}
.btl__empty p {
  font-size: 0.8125rem !important;
  color: var(--brand-grey-400, #b0b0b0);
  margin-bottom: 1rem;
}

/* Mobile */
@media (max-width: 767.98px) {
  .btl { padding: 0.75rem; }
  .btl__grid { grid-template-columns: 1fr; }
  .btl__legend { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* ==================== WAREHOUSE LOCATIONS ==================== */
/* Warehouse location cards for fulfillment centers */

.warehouse-location-card {
  border-left: 4px solid var(--brand-primary, #7c3aed) !important;
  background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%) !important;
}

.warehouse-location-card .location-card-header h3 {
  color: var(--brand-primary, #7c3aed);
}

.warehouse-location-card .fa-warehouse {
  color: var(--brand-primary, #7c3aed);
}

.warehouse-location-card .location-card-footer {
  background: #faf5ff;
  border-top: 1px solid #e9d5ff;
  padding: 1rem;
  text-align: center;
}

.warehouse-location-card .bapi__status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-weight: 600;
}
/* ==================== OUTBOUND REQUESTS ==================== */
/* BEM: bor__ prefix — outbound_requests_list.html */

.bor { padding: 1rem 1.25rem; }

/* Header */
.bor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.bor__header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.bor__header-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--brand-navy, #001f3f);
  color: var(--brand-primary, #f7c000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.bor__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-grey-800, #1f1f1f);
  margin: 0;
  line-height: 1.2;
}
.bor__subtitle {
  font-size: 0.75rem;
  color: var(--brand-grey-500, #6c757d);
  margin: 0;
}

/* Stats Row */
.bor__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.bor__stat-card {
  background: #fff;
  border-radius: var(--brand-radius-sm, 0.5rem);
  border: 1px solid var(--brand-grey-200, #f0f0f0);
  padding: 0.875rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bor__stat-card:hover {
  box-shadow: var(--brand-shadow-md, 0 0.25rem 0.5rem rgba(0,0,0,0.1));
  transform: translateY(-1px);
}
.bor__stat-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--brand-radius-sm, 0.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.bor__stat-icon--warning { background: #fef3c7; color: #92400e; }
.bor__stat-icon--primary { background: #eff6ff; color: #2563eb; }
.bor__stat-icon--success { background: #dcfce7; color: #15803d; }
.bor__stat-icon--info { background: #f0f9ff; color: #0369a1; }
.bor__stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-grey-500, #6c757d);
  display: block;
}
.bor__stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-grey-800, #1f1f1f);
  display: block;
  line-height: 1.2;
}

/* Filter Bar */
.bor__filter-bar {
  background: #fff;
  border: 1px solid var(--brand-grey-200, #f0f0f0);
  border-radius: var(--brand-radius-sm, 0.5rem);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.bor__filter-form {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.bor__filter-group { flex: 1; min-width: 150px; max-width: 280px; }
.bor__filter-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-grey-500, #6c757d);
  margin-bottom: 0.25rem;
}
.bor__filter-select {
  display: block;
  width: 100%;
  padding: 0.4375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--brand-grey-700, #333);
  background: var(--brand-grey-100, #fafafa);
  border: 1px solid var(--brand-grey-300, #dcdcdc);
  border-radius: 0.375rem;
  appearance: auto;
  transition: border-color 0.2s ease;
}
.bor__filter-select:focus {
  border-color: var(--brand-navy, #001f3f);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 31, 63, 0.1);
}
.bor__filter-btn {
  padding: 0.4375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-navy, #001f3f);
  border: 1px solid var(--brand-navy, #001f3f);
  border-radius: 0.375rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.bor__filter-btn:hover {
  background: var(--brand-navy-light, #003366);
  transform: translateY(-1px);
}

/* Card */
.bor__card {
  background: #fff;
  border-radius: var(--brand-radius-md, 0.75rem);
  border: 1px solid var(--brand-grey-200, #f0f0f0);
  overflow: hidden;
}
.bor__card-header {
  padding: 0.625rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-grey-500, #6c757d);
  border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
  background: var(--brand-grey-100, #fafafa);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.bor__card-header i { color: var(--brand-primary, #f7c000); }
.bor__count-badge {
  background: var(--brand-navy, #001f3f);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 2rem;
  margin-left: auto;
}

/* Table */
.bor__table-wrap { overflow-x: auto; }
.bor__table {
  width: 100%;
  border-collapse: collapse;
}
.bor__table thead { background: var(--brand-grey-100, #fafafa); }
.bor__th {
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-grey-500, #6c757d);
  border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
  text-align: left;
  white-space: nowrap;
}
.bor__td {
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem !important;
  color: var(--brand-grey-700, #333);
  border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
  vertical-align: middle;
}
.bor__row { transition: background 0.15s ease; }
.bor__row:hover { background: var(--brand-grey-100, #fafafa); }
.bor__row:nth-child(even) { background: rgba(250, 250, 250, 0.5); }
.bor__row:nth-child(even):hover { background: var(--brand-grey-100, #fafafa); }

/* Override global tbody font-size */
.bor__table tbody { font-size: 0.8125rem !important; }

/* Request Number */
.bor__req-num {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-grey-800, #1f1f1f);
}

/* Warehouse Name */
.bor__warehouse-name {
  font-weight: 500;
  color: var(--brand-grey-700, #333);
}

/* Item Count */
.bor__item-count {
  font-weight: 600;
  color: var(--brand-grey-800, #1f1f1f);
}
.bor__item-label {
  font-size: 0.75rem;
  color: var(--brand-grey-400, #b0b0b0);
  margin-left: 0.25rem;
}

/* Badges */
.bor__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.bor__badge--warning { background: #fef3c7; color: #92400e; }
.bor__badge--success { background: #dcfce7; color: #15803d; }
.bor__badge--info { background: #eff6ff; color: #2563eb; }
.bor__badge--danger { background: #fef2f2; color: #dc2626; }
.bor__badge--muted { background: var(--brand-grey-200, #f0f0f0); color: var(--brand-grey-600, #555); }

/* Date */
.bor__date {
  font-size: 0.75rem;
  color: var(--brand-grey-500, #6c757d);
}

/* Empty State */
.bor__empty {
  text-align: center;
  padding: 3rem 1rem !important;
  color: var(--brand-grey-400, #b0b0b0);
}
.bor__empty i { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }
.bor__empty p { margin: 0; font-size: 0.8125rem; }

/* Pagination */
.bor__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--brand-grey-200, #f0f0f0);
}
.bor__page-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-navy, #001f3f);
  background: var(--brand-grey-100, #fafafa);
  border: 1px solid var(--brand-grey-200, #f0f0f0);
  border-radius: 0.375rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.bor__page-btn:hover {
  background: var(--brand-navy, #001f3f);
  color: #fff;
  border-color: var(--brand-navy, #001f3f);
}
.bor__page-info {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-grey-500, #6c757d);
}

/* Mobile responsive */
@media (max-width: 767.98px) {
  .bor { padding: 0.75rem; }
  .bor__stats { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .bor__stat-card { padding: 0.625rem 0.75rem; }
  .bor__stat-value { font-size: 1rem; }
  .bor__filter-form { flex-direction: column; }
  .bor__filter-group { max-width: none; }
  .bor__th, .bor__td { padding: 0.5rem; }
}

/* =============================================
   BSL — Business Selector
   ============================================= */
.bsl { padding: 1rem; }
.bsl__hero {
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: var(--brand-radius-lg, 1.125rem);
    margin-bottom: 1.25rem;
}
.bsl__hero-icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: rgba(247, 192, 0, 0.15);
    color: var(--brand-primary, #f7c000);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.bsl__hero-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.bsl__hero-sub { font-size: 0.8rem; opacity: 0.8; margin: 0.125rem 0 0; }

.bsl__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.bsl__card {
    position: relative;
    background: #fff;
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-md, 0.75rem);
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
}
.bsl__card:hover {
    border-color: var(--brand-grey-300, #dcdcdc);
    box-shadow: var(--brand-shadow-md, 0 0.25rem 0.5rem rgba(0,0,0,0.1));
    transform: translateY(-2px);
}
.bsl__card--active {
    border-color: var(--brand-navy, #001f3f);
    background: linear-gradient(to bottom, #f8faff 0%, #fff 100%);
}
.bsl__current-badge {
    position: absolute; top: 0.75rem; right: 0.75rem;
    background: var(--brand-navy, #001f3f);
    color: var(--brand-primary, #f7c000);
    font-size: 0.65rem; font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bsl__logo-wrap { margin-bottom: 0.75rem; }
.bsl__logo-img {
    width: 4.5rem; height: 4.5rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    object-fit: cover;
    box-shadow: var(--brand-shadow-sm, 0 0.0625rem 0.1875rem rgba(0,0,0,0.08));
}
.bsl__logo-placeholder {
    width: 4.5rem; height: 4.5rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand-primary, #f7c000);
    font-size: 1.75rem;
    box-shadow: var(--brand-shadow-sm);
}
.bsl__name {
    font-size: 0.875rem; font-weight: 700;
    color: var(--brand-grey-800, #1f1f1f);
    margin: 0 0 0.5rem;
}
.bsl__badge-wrap { margin-bottom: 0.75rem; }
.bsl__badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.7rem; font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 2rem;
}
.bsl__badge--owner { background: #fef3c7; color: #92400e; }
.bsl__badge--team { background: #eff6ff; color: #2563eb; }
.bsl__details {
    text-align: left;
    border-top: 1px solid var(--brand-grey-200, #f0f0f0);
    padding-top: 0.5rem;
    margin-bottom: 0.75rem;
}
.bsl__field {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.375rem 0; gap: 0.5rem;
}
.bsl__field:not(:last-child) { border-bottom: 1px solid var(--brand-grey-100, #fafafa); }
.bsl__field__label { font-size: 0.7rem; color: var(--brand-grey-500, #6c757d); }
.bsl__field__label i { margin-right: 0.25rem; color: var(--brand-primary, #f7c000); }
.bsl__field__value { font-size: 0.75rem; font-weight: 500; color: var(--brand-grey-800, #1f1f1f); }
.bsl__code { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; font-weight: 700; background: var(--brand-grey-100); padding: 0.125rem 0.375rem; border-radius: 0.25rem; }
.bsl__btn {
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    width: 100%; padding: 0.5rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    font-size: 0.75rem; font-weight: 600;
    text-decoration: none;
    background: var(--brand-navy, #001f3f); color: #fff;
    transition: all 0.2s ease;
}
.bsl__btn:hover { background: var(--brand-navy-light, #003366); color: #fff; transform: translateY(-1px); box-shadow: var(--brand-shadow-sm); }
.bsl__btn--current { background: var(--brand-grey-200, #f0f0f0); color: var(--brand-grey-600, #555); }
.bsl__btn--current:hover { background: var(--brand-grey-300); color: var(--brand-grey-700); transform: none; box-shadow: none; }
.bsl__note {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--brand-grey-100, #fafafa);
    border-left: 3px solid var(--brand-primary, #f7c000);
    border-radius: 0.375rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem; color: var(--brand-grey-600, #555);
}
.bsl__note i { color: var(--brand-primary, #f7c000); }

@media (max-width: 767.98px) {
    .bsl { padding: 0.5rem; }
    .bsl__hero { padding: 1rem; border-radius: var(--brand-radius-sm); }
    .bsl__grid { grid-template-columns: 1fr; }
}

/* =============================================
   BWG — Business Workflow Guide
   ============================================= */
.bwg { padding: 1rem; }
.bwg__hero {
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: var(--brand-radius-lg, 1.125rem);
    margin-bottom: 1.25rem;
}
.bwg__hero-icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: rgba(247, 192, 0, 0.15);
    color: var(--brand-primary, #f7c000);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.bwg__hero-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.bwg__hero-sub { font-size: 0.8rem; opacity: 0.8; margin: 0.125rem 0 0; }
.bwg__callout {
    display: flex; gap: 0.625rem; align-items: flex-start;
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.75rem; color: #1e40af;
    margin-bottom: 1.25rem;
}
.bwg__callout > i { margin-top: 0.125rem; font-size: 0.875rem; }
.bwg__callout strong { font-size: 0.8125rem; }

.bwg__steps { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.bwg__step {
    display: flex; gap: 1rem;
    background: #fff;
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-md, 0.75rem);
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
}
.bwg__step:hover { box-shadow: var(--brand-shadow-sm); }
.bwg__step--done { border-left: 3px solid #22c55e; }
.bwg__step--active { border-left: 3px solid #f59e0b; }
.bwg__step--auto { border-left: 3px solid #3b82f6; }
.bwg__step-num {
    width: 2.25rem; height: 2.25rem; min-width: 2.25rem;
    border-radius: 50%;
    background: var(--brand-navy, #001f3f);
    color: var(--brand-primary, #f7c000);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem; font-weight: 700;
}
.bwg__step--done .bwg__step-num { background: #22c55e; color: #fff; }
.bwg__step--active .bwg__step-num { background: #f59e0b; color: #fff; }
.bwg__step--auto .bwg__step-num { background: #3b82f6; color: #fff; }
.bwg__step-body { flex: 1; min-width: 0; }
.bwg__step-title { font-size: 0.875rem; font-weight: 700; color: var(--brand-grey-800, #1f1f1f); margin: 0; }
.bwg__step-desc { font-size: 0.75rem; color: var(--brand-grey-500, #6c757d); margin: 0.375rem 0 0.625rem; }
.bwg__tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.65rem; font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 2rem;
}
.bwg__tag--ok { background: #dcfce7; color: #15803d; }
.bwg__tag--warn { background: #fef3c7; color: #92400e; }
.bwg__tag--info { background: #dbeafe; color: #1d4ed8; }
.bwg__tag--muted { background: var(--brand-grey-200, #f0f0f0); color: var(--brand-grey-600, #555); }
.bwg__section-head {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--brand-grey-500, #6c757d);
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
    margin-bottom: 0.5rem;
}
.bwg__section-head i { color: var(--brand-primary, #f7c000); }
.bwg__tasks { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.bwg__task-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3125rem 0;
    font-size: 0.75rem; color: var(--brand-grey-700, #333);
}
.bwg__task-item:not(:last-child) { border-bottom: 1px solid var(--brand-grey-100, #fafafa); }
.bwg__task-item i { font-size: 0.5rem; color: var(--brand-primary, #f7c000); }
.bwg__btn {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    font-size: 0.75rem; font-weight: 600;
    text-decoration: none;
    background: var(--brand-navy, #001f3f); color: #fff;
    transition: all 0.2s ease;
}
.bwg__btn:hover { background: var(--brand-navy-light, #003366); color: #fff; transform: translateY(-1px); box-shadow: var(--brand-shadow-sm); }

.bwg__features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0.75rem 0 1.5rem;
}
.bwg__feat {
    background: #fff;
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-md, 0.75rem);
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
}
.bwg__feat:hover { box-shadow: var(--brand-shadow-md); transform: translateY(-2px); }
.bwg__feat-icon {
    width: 3rem; height: 3rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}
.bwg__feat-icon--green { background: #dcfce7; color: #15803d; }
.bwg__feat-icon--blue { background: #dbeafe; color: #2563eb; }
.bwg__feat-icon--navy { background: rgba(0, 31, 63, 0.1); color: var(--brand-navy, #001f3f); }
.bwg__feat-title { font-size: 0.8125rem; font-weight: 700; color: var(--brand-grey-800, #1f1f1f); margin: 0 0 0.375rem; }
.bwg__feat-desc { font-size: 0.7rem; color: var(--brand-grey-500, #6c757d); margin: 0; }

.bwg__help {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    background: var(--brand-grey-100, #fafafa);
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-md, 0.75rem);
    padding: 1rem 1.25rem;
}
.bwg__help-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--brand-navy, #001f3f);
    color: var(--brand-primary, #f7c000);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.bwg__help-title { font-size: 0.875rem; font-weight: 700; color: var(--brand-grey-800, #1f1f1f); margin: 0; }
.bwg__help-text { font-size: 0.75rem; color: var(--brand-grey-500, #6c757d); margin: 0.25rem 0 0; }

@media (max-width: 767.98px) {
    .bwg { padding: 0.5rem; }
    .bwg__hero { padding: 1rem; border-radius: var(--brand-radius-sm); }
    .bwg__step { flex-direction: column; gap: 0.5rem; padding: 0.75rem; }
    .bwg__features { grid-template-columns: 1fr; }
    .bwg__help { flex-direction: column; text-align: center; }
}

/* Global tbody and card-body font size */
tbody, tbody td, tbody th { font-size: .75rem !important; }
.card-body, .card-body p, .card-body span, .card-body div { font-size: .75rem !important; }

/* =============================================
   BTP -- Business Team Permissions
   ============================================= */
.btp { padding: 1rem; }
.btp__hero {
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: var(--brand-radius-lg, 1.125rem);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.btp__hero-icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: rgba(247, 192, 0, 0.15);
    color: var(--brand-primary, #f7c000);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.btp__hero-title { font-size: 1.25rem; font-weight: 700; margin: 0; line-height: 1.2; }
.btp__hero-sub { font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); margin: 0.125rem 0 0; }
.btp__hero-count {
    display: inline-flex; align-items: center;
    background: rgba(247, 192, 0, 0.2);
    color: var(--brand-primary, #f7c000);
    font-size: 0.65rem; font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 2rem;
    margin-left: 0.5rem;
}
.btp__hero-back {
    display: inline-flex; align-items: center; gap: 0.375rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.75rem; font-weight: 600;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--brand-radius-sm, 0.5rem);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btp__hero-back:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* Cards */
.btp__card {
    background: #fff;
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-md, 0.75rem);
    overflow: hidden;
    transition: all 0.2s ease;
}
.btp__card:hover {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.btp__card--warning {
    border-color: #fef3c7;
}
.btp__card-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--brand-grey-100, #fafafa);
    border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-grey-500, #6c757d);
}
.btp__card-header i {
    color: var(--brand-primary, #f7c000);
    font-size: 0.75rem;
}
.btp__card-header--warning {
    background: #fffbeb;
    border-bottom-color: #fef3c7;
}
.btp__card-header--warning i { color: #92400e; }
.btp__card-header--warning span { color: #92400e; }
.btp__card-body { padding: 1rem; }

/* Avatar */
.btp__avatar { margin-bottom: 0.75rem; }
.btp__avatar-img {
    width: 4.5rem; height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--brand-grey-200, #f0f0f0);
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
}
.btp__member-name {
    font-size: 0.875rem; font-weight: 700;
    color: var(--brand-grey-800, #1f1f1f);
    margin: 0 0 0.25rem;
}
.btp__member-email {
    font-size: 0.75rem;
    color: var(--brand-grey-500, #6c757d);
    margin: 0 0 0.625rem;
}

/* Badges */
.btp__badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.65rem !important;
    font-weight: 600;
    white-space: nowrap;
}
.btp__badge--success { background: #dcfce7; color: #15803d; }
.btp__badge--warning { background: #fef3c7; color: #92400e; }
.btp__badge--danger { background: #fef2f2; color: #dc2626; }
.btp__badge--info { background: #eff6ff; color: #2563eb; }
.btp__badge--muted { background: var(--brand-grey-200, #f0f0f0); color: var(--brand-grey-600, #555); }

/* Select */
select.btp__select {
    width: 100%;
    min-height: 36px; max-height: 36px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-sm, 0.5rem);
    font-size: 0.8125rem;
    color: var(--brand-grey-800, #1f1f1f);
    background: #fff;
    transition: border-color 0.2s ease;
    appearance: auto;
}
select.btp__select:focus {
    outline: none;
    border-color: var(--brand-navy, #001f3f);
    box-shadow: 0 0 0 2px rgba(0, 31, 63, 0.1);
}

/* Buttons */
.btp__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    font-size: 0.75rem; font-weight: 600;
    text-decoration: none;
    border: none; cursor: pointer;
    transition: all 0.2s ease;
}
.btp__btn--primary {
    background: var(--brand-navy, #001f3f);
    color: #fff;
}
.btp__btn--primary:hover {
    background: var(--brand-navy-light, #003366);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 31, 63, 0.25);
}
.btp__btn--warning {
    background: transparent;
    color: #92400e;
    border: 1px solid #fbbf24;
}
.btp__btn--warning:hover {
    background: #fef3c7;
    transform: translateY(-1px);
}

/* Divider */
.btp__divider {
    height: 1px;
    background: var(--brand-grey-200, #f0f0f0);
    margin: 0.875rem 0;
}

/* Role Info */
.btp__role-info-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-grey-500, #6c757d);
    margin: 0 0 0.625rem;
}
.btp__role-desc {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--brand-grey-100, #fafafa);
}
.btp__role-desc:last-child { border-bottom: none; }
.btp__role-desc-text {
    font-size: 0.75rem;
    color: var(--brand-grey-600, #555);
}

/* Reset text */
.btp__reset-text {
    font-size: 0.75rem;
    color: var(--brand-grey-500, #6c757d);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

/* Legend */
.btp__legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: var(--brand-grey-100, #fafafa);
    border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
}

/* Accordion */
.btp__accordion-item {
    border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
}
.btp__accordion-item:last-child { border-bottom: none; }
.btp__accordion-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    border: none; cursor: pointer;
    font-size: 0.8125rem; font-weight: 600;
    color: var(--brand-grey-800, #1f1f1f);
    transition: background 0.2s ease;
}
.btp__accordion-btn:hover { background: var(--brand-grey-50, #f9f9f9); }
.btp__accordion-btn i.fa-folder { color: var(--brand-primary, #f7c000); }
.btp__accordion-btn--collapsed i.fa-folder { color: var(--brand-grey-400, #b0b0b0); }
.btp__accordion-title { font-size: 0.8125rem; font-weight: 600; }

/* Permission Rows */
.btp__perm-list { }
.btp__perm-row {
    display: grid;
    grid-template-columns: 1fr 6rem 5.5rem 5.5rem;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--brand-grey-100, #fafafa);
    transition: background 0.15s ease;
}
.btp__perm-row:hover:not(.btp__perm-row--header) { background: var(--brand-grey-50, #f9f9f9); }
.btp__perm-row--header {
    background: var(--brand-grey-100, #fafafa);
    border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
}
.btp__perm-row--header .btp__perm-cell {
    font-size: 0.65rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-grey-500, #6c757d);
}
.btp__perm-cell {
    font-size: 0.75rem;
    color: var(--brand-grey-800, #1f1f1f);
}
.btp__perm-cell--name { font-weight: 500; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.btp__perm-cell--default { text-align: center; }
.btp__perm-cell--status { text-align: center; }
.btp__perm-cell--action { text-align: center; }

/* Icons */
.btp__icon--success { color: #15803d; font-size: 0.75rem; }
.btp__icon--muted { color: var(--brand-grey-300, #dcdcdc); font-size: 0.75rem; }

/* Action Buttons */
.btp__action-btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    font-size: 0.65rem !important; font-weight: 600;
    border: 1px solid; cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}
.btp__action-btn--revoke {
    color: #dc2626;
    border-color: #fecaca;
}
.btp__action-btn--revoke:hover {
    background: #fef2f2;
    border-color: #dc2626;
    transform: translateY(-1px);
}
.btp__action-btn--grant {
    color: #15803d;
    border-color: #bbf7d0;
}
.btp__action-btn--grant:hover {
    background: #dcfce7;
    border-color: #15803d;
    transform: translateY(-1px);
}

/* BTP Responsive */
@media (max-width: 767.98px) {
    .btp { padding: 0.5rem; }
    .btp__hero {
        padding: 1rem;
        border-radius: var(--brand-radius-sm, 0.5rem);
        flex-direction: column;
        align-items: flex-start;
    }
    .btp__hero-back { align-self: flex-start; }
    .btp__perm-row {
        grid-template-columns: 1fr;
        gap: 0.375rem;
        padding: 0.75rem 1rem;
    }
    .btp__perm-row--header { display: none; }
    .btp__perm-cell--default,
    .btp__perm-cell--status,
    .btp__perm-cell--action { text-align: left; }
    .btp__perm-cell--default::before { content: "Role Default: "; font-size: 0.65rem; color: var(--brand-grey-500); }
    .btp__perm-cell--status::before { content: "Status: "; font-size: 0.65rem; color: var(--brand-grey-500); }
}


/* =============================================
   BLU -- Business Logo Update
   ============================================= */
.blu { padding: 0; }
.blu__card {
    background: #fff;
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-md, 0.75rem);
    overflow: hidden;
}
.blu__card-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--brand-grey-100, #fafafa);
    border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-grey-500, #6c757d);
}
.blu__card-header i {
    color: var(--brand-primary, #f7c000);
    font-size: 0.75rem;
}
.blu__card-body { padding: 1rem; }

.blu__upload-area {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 2px dashed var(--brand-grey-300, #dcdcdc);
    border-radius: var(--brand-radius-md, 0.75rem);
    background: var(--brand-grey-50, #f9f9f9);
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}
.blu__upload-area:hover {
    border-color: var(--brand-navy, #001f3f);
    background: #f0f6ff;
}
.blu__upload-icon {
    width: 3rem; height: 3rem;
    border-radius: 50%;
    background: rgba(247, 192, 0, 0.12);
    color: var(--brand-primary, #f7c000);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.625rem;
}
.blu__upload-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-grey-800, #1f1f1f);
    margin: 0 0 0.25rem;
}
.blu__upload-hint {
    font-size: 0.7rem;
    color: var(--brand-grey-500, #6c757d);
    margin: 0 0 0.75rem;
}
.blu__file-input {
    width: 100%;
    font-size: 0.75rem;
    color: var(--brand-grey-600, #555);
    padding: 0.375rem;
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-sm, 0.5rem);
    background: #fff;
}
.blu__file-input::file-selector-button {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-sm, 0.5rem);
    background: var(--brand-grey-100, #fafafa);
    color: var(--brand-grey-700, #333);
    font-size: 0.7rem; font-weight: 600;
    cursor: pointer;
    margin-right: 0.5rem;
    transition: all 0.2s ease;
}
.blu__file-input::file-selector-button:hover {
    background: var(--brand-navy, #001f3f);
    color: #fff;
    border-color: var(--brand-navy, #001f3f);
}

.blu__btn {
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none; cursor: pointer;
    border-radius: var(--brand-radius-sm, 0.5rem);
    font-size: 0.8125rem; font-weight: 600;
    background: var(--brand-navy, #001f3f);
    color: #fff;
    transition: all 0.2s ease;
}
.blu__btn:hover {
    background: var(--brand-navy-light, #003366);
    transform: translateY(-1px);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 31, 63, 0.25);
}

/* Crispy form field overrides inside BLU */
.blu__card-body .form-group { margin-bottom: 0.75rem; }
.blu__card-body label {
    font-size: 0.75rem !important;
    font-weight: 600;
    color: var(--brand-grey-500, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}
.blu__card-body .form-control {
    font-size: 0.8125rem;
    border-color: var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-sm, 0.5rem);
    padding: 0.5rem 0.75rem;
}
.blu__card-body .form-control:focus {
    border-color: var(--brand-navy, #001f3f);
    box-shadow: 0 0 0 2px rgba(0, 31, 63, 0.1);
}


/* =============================================
   BDD -- Business Driver Directory
   ============================================= */
.bdd { padding: 1rem; }
.bdd__hero {
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: var(--brand-radius-lg, 1.125rem);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.bdd__hero-icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: rgba(247, 192, 0, 0.15);
    color: var(--brand-primary, #f7c000);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.bdd__hero-title { font-size: 1.25rem; font-weight: 700; margin: 0; line-height: 1.2; }
.bdd__hero-sub { font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); margin: 0.125rem 0 0; }
.bdd__hero-action {
    display: inline-flex; align-items: center; gap: 0.375rem;
    color: var(--brand-navy, #001f3f);
    background: var(--brand-primary, #f7c000);
    text-decoration: none;
    font-size: 0.75rem; font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.bdd__hero-action:hover {
    background: #e5b000;
    color: var(--brand-navy, #001f3f);
    transform: translateY(-1px);
    box-shadow: 0 0.125rem 0.375rem rgba(247, 192, 0, 0.35);
}

/* Card */
.bdd__card {
    background: #fff;
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-md, 0.75rem);
    overflow: hidden;
}
.bdd__card-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--brand-grey-100, #fafafa);
    border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-grey-500, #6c757d);
}
.bdd__card-header i {
    color: var(--brand-primary, #f7c000);
    font-size: 0.75rem;
}

/* Badges */
.bdd__badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.65rem !important;
    font-weight: 600;
    white-space: nowrap;
}
.bdd__badge--success { background: #dcfce7; color: #15803d; }
.bdd__badge--warning { background: #fef3c7; color: #92400e; }
.bdd__badge--danger { background: #fef2f2; color: #dc2626; }
.bdd__badge--info { background: #eff6ff; color: #2563eb; }
.bdd__badge--muted { background: var(--brand-grey-200, #f0f0f0); color: var(--brand-grey-600, #555); }

/* Table */
.bdd__table-wrap { overflow-x: auto; }
.bdd__table {
    width: 100%;
    border-collapse: collapse;
}
.bdd__th {
    padding: 0.625rem 1rem;
    font-size: 0.65rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-grey-500, #6c757d);
    background: var(--brand-grey-50, #f9f9f9);
    border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
    text-align: left;
}
.bdd__th--center { text-align: center; }
.bdd__row {
    transition: background 0.15s ease;
}
.bdd__row:hover { background: var(--brand-grey-50, #f9f9f9); }
.bdd__td {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    color: var(--brand-grey-800, #1f1f1f);
    border-bottom: 1px solid var(--brand-grey-100, #fafafa);
    vertical-align: middle;
}
.bdd__td--center { text-align: center; }

/* Driver avatar */
.bdd__driver-avatar {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
    color: var(--brand-primary, #f7c000);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.bdd__driver-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--brand-grey-800, #1f1f1f);
}
.bdd__code {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.75rem; font-weight: 700;
    background: var(--brand-grey-100, #fafafa);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    color: var(--brand-grey-700, #333);
}
.bdd__phone {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--brand-grey-800, #1f1f1f);
}

/* Icon Buttons */
.bdd__icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.bdd__icon-btn--whatsapp {
    color: #25d366;
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.bdd__icon-btn--whatsapp:hover {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
    transform: translateY(-1px);
}
.bdd__icon-btn--view {
    color: var(--brand-navy, #001f3f);
    background: #f0f6ff;
    border-color: #dbeafe;
}
.bdd__icon-btn--view:hover {
    background: var(--brand-navy, #001f3f);
    color: var(--brand-primary, #f7c000);
    border-color: var(--brand-navy, #001f3f);
    transform: translateY(-1px);
}
.bdd__icon-btn--delete {
    color: var(--brand-grey-400, #b0b0b0);
    background: transparent;
    border-color: var(--brand-grey-200, #f0f0f0);
}
.bdd__icon-btn--delete:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
    transform: translateY(-1px);
}

/* Empty State */
.bdd__empty {
    text-align: center;
    padding: 3rem 1.5rem;
}
.bdd__empty-icon {
    width: 4rem; height: 4rem;
    border-radius: 50%;
    background: var(--brand-grey-100, #fafafa);
    color: var(--brand-grey-300, #dcdcdc);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}
.bdd__empty-title {
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--brand-grey-500, #6c757d);
    margin: 0 0 0.375rem;
}
.bdd__empty-text {
    font-size: 0.8125rem;
    color: var(--brand-grey-400, #b0b0b0);
    margin: 0 0 1.25rem;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
}
.bdd__btn {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    font-size: 0.8125rem; font-weight: 600;
    text-decoration: none;
    background: var(--brand-navy, #001f3f);
    color: #fff;
    transition: all 0.2s ease;
}
.bdd__btn:hover {
    background: var(--brand-navy-light, #003366);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 31, 63, 0.25);
}

/* BDD Responsive */
@media (max-width: 767.98px) {
    .bdd { padding: 0.5rem; }
    .bdd__hero {
        padding: 1rem;
        border-radius: var(--brand-radius-sm, 0.5rem);
        flex-direction: column;
        align-items: flex-start;
    }
    .bdd__hero-action { align-self: flex-start; }
    .bdd__th { padding: 0.5rem 0.625rem; font-size: 0.6rem !important; }
    .bdd__td { padding: 0.5rem 0.625rem; font-size: 0.75rem; }
    .bdd__driver-avatar { width: 1.625rem; height: 1.625rem; font-size: 0.6rem; }
    .bdd__icon-btn { width: 1.75rem; height: 1.75rem; font-size: 0.7rem; }
}

/* =================================================================
   BPL-CHOOSE — Pickup Location Choose (Add vs Fulfillment)
   Onboarding choice page for new businesses
   ================================================================= */

.bpl-choose {
    max-width: 720px;
    margin: 0 auto;
    padding: 0.75rem;
}

/* Hero */
.bpl-choose__hero {
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
}
.bpl-choose__hero-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
    color: var(--brand-primary, #f7c000);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    margin-bottom: 0.875rem;
}
.bpl-choose__hero-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--brand-grey-800, #1f1f1f);
    margin: 0 0 0.25rem;
}
.bpl-choose__hero-sub {
    font-size: 0.8125rem;
    color: var(--brand-grey-500, #6c757d);
    margin: 0;
}

/* Choice Grid */
.bpl-choose__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Option Card */
.bpl-choose__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 2px solid var(--brand-grey-200, #f0f0f0);
    border-radius: var(--brand-radius-md, 0.75rem);
    padding: 1.5rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}
.bpl-choose__option:hover {
    border-color: var(--brand-primary, #f7c000);
    box-shadow: 0 0.375rem 1rem rgba(247, 192, 0, 0.15);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.bpl-choose__option--fulfillment:hover {
    border-color: var(--brand-navy, #001f3f);
    box-shadow: 0 0.375rem 1rem rgba(0, 31, 63, 0.15);
}

/* Option Icon */
.bpl-choose__option__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin-bottom: 0.875rem;
    flex-shrink: 0;
}
.bpl-choose__option__icon--store {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}
.bpl-choose__option__icon--warehouse {
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
    color: var(--brand-primary, #f7c000);
}

/* Option Text */
.bpl-choose__option__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--brand-grey-800, #1f1f1f);
    margin: 0 0 0.375rem;
}
.bpl-choose__option__desc {
    font-size: 0.75rem;
    color: var(--brand-grey-500, #6c757d);
    line-height: 1.5;
    margin: 0 0 0.875rem;
}

/* Feature Tags */
.bpl-choose__option__features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.bpl-choose__option__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--brand-grey-600, #555);
    background: var(--brand-grey-100, #fafafa);
    padding: 0.2rem 0.5rem;
    border-radius: 2rem;
}
.bpl-choose__option__tag i {
    color: #16a34a;
    font-size: 0.55rem;
}

/* CTA Button */
.bpl-choose__option__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1.125rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    background: var(--brand-primary, #f7c000);
    color: var(--brand-grey-800, #1f1f1f);
    margin-top: auto;
    transition: all 0.2s ease;
}
.bpl-choose__option:hover .bpl-choose__option__cta {
    transform: translateY(-1px);
    box-shadow: 0 0.125rem 0.375rem rgba(247, 192, 0, 0.3);
}
.bpl-choose__option__cta--navy {
    background: var(--brand-navy, #001f3f);
    color: #fff;
}
.bpl-choose__option:hover .bpl-choose__option__cta--navy {
    box-shadow: 0 0.125rem 0.375rem rgba(0, 31, 63, 0.3);
}

/* Pending warehouse link state */
.bpl-choose__option--pending {
    opacity: 0.75;
    cursor: default;
    border-color: #d1d5db;
}
.bpl-choose__option--pending:hover {
    border-color: #d1d5db;
    box-shadow: none;
    transform: none;
}
.bpl-choose__option--pending .bpl-choose__option__icon--warehouse {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #6b7280;
}
.bpl-choose__option__cta--pending {
    background: #fef3c7;
    color: #92400e;
    border: 1px dashed #f59e0b;
}
.bpl-choose__option--pending:hover .bpl-choose__option__cta--pending {
    transform: none;
    box-shadow: none;
}
.bpl-choose__option__cta--active {
    background: #dcfce7;
    color: #14532d;
    border: 1px solid #86efac;
}
.bpl-choose__option--pending:hover .bpl-choose__option__cta--active {
    transform: none;
    box-shadow: none;
}

/* Callout */
.bpl-choose__callout {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: var(--brand-grey-100, #fafafa);
    border-radius: 0.375rem;
    border-left: 3px solid var(--brand-primary, #f7c000);
    padding: 0.75rem 1rem;
}
.bpl-choose__callout-icon {
    color: var(--brand-primary, #f7c000);
    font-size: 0.875rem;
    margin-top: 0.0625rem;
    flex-shrink: 0;
}
.bpl-choose__callout-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-grey-700, #333);
    margin: 0 0 0.25rem;
}
.bpl-choose__callout-text {
    font-size: 0.75rem;
    color: var(--brand-grey-500, #6c757d);
    line-height: 1.5;
    margin: 0;
}

/* BPL-CHOOSE Responsive */
@media (max-width: 575.98px) {
    .bpl-choose { padding: 0.5rem; }
    .bpl-choose__hero { padding: 1.25rem 1rem 1rem; }
    .bpl-choose__grid { grid-template-columns: 1fr; }
    .bpl-choose__option { padding: 1.25rem 1rem; }
}

/* =================================================================
   BPL-FORM — Pickup Location Form (Add / Update)
   Premium BEM form layout for store location management
   ================================================================= */

.bpl-form {
    max-width: 680px;
    margin: 0 auto;
    padding: 0.75rem;
}

/* Hero Banner */
.bpl-form__hero {
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: var(--brand-radius-md, 0.75rem);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.bpl-form__hero-left {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.bpl-form__hero-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(247, 192, 0, 0.15);
    color: var(--brand-primary, #f7c000);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.bpl-form__hero-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.01em;
}
.bpl-form__hero-sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
    margin: 0.125rem 0 0 0;
}
.bpl-form__hero-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.bpl-form__hero-back:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.35);
}

/* Form Card */
.bpl-form__card {
    background: #fff;
    border-radius: var(--brand-radius-md, 0.75rem);
    border: 1px solid var(--brand-grey-200, #f0f0f0);
    overflow: hidden;
    margin-bottom: 1rem;
}
.bpl-form__card__head {
    padding: 0.75rem 1.25rem;
    background: var(--brand-grey-100, #fafafa);
    border-bottom: 1px solid var(--brand-grey-200, #f0f0f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.bpl-form__card__head-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-grey-500, #6c757d);
    margin: 0;
}
.bpl-form__card__head-label i {
    color: var(--brand-primary, #f7c000);
}
.bpl-form__card__body {
    padding: 1.25rem;
}
.bpl-form__card__foot {
    padding: 0.875rem 1.25rem;
    background: var(--brand-grey-100, #fafafa);
    border-top: 1px solid var(--brand-grey-200, #f0f0f0);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
}

/* Status Badge in header */
.bpl-form__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 2rem;
}
.bpl-form__status--active {
    background: #dcfce7;
    color: #15803d;
}
.bpl-form__status--inactive {
    background: var(--brand-grey-200, #f0f0f0);
    color: var(--brand-grey-600, #555);
}

/* Form Field Overrides (crispy forms) */
.bpl-form__card__body .form-group,
.bpl-form__card__body .mb-3 {
    margin-bottom: 1rem !important;
}
.bpl-form__card__body label,
.bpl-form__card__body .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-grey-600, #555);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}
.bpl-form__card__body .form-control,
.bpl-form__card__body .form-select {
    font-size: 0.8125rem;
    padding: 0.5625rem 0.875rem;
    border: 1px solid var(--brand-grey-300, #dcdcdc);
    border-radius: var(--brand-radius-sm, 0.5rem);
    color: var(--brand-grey-800, #1f1f1f);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #fff;
}
.bpl-form__card__body .form-control:focus,
.bpl-form__card__body .form-select:focus {
    border-color: var(--brand-navy, #001f3f);
    box-shadow: 0 0 0 3px rgba(0, 31, 63, 0.08);
    outline: none;
}
.bpl-form__card__body .form-control::placeholder {
    color: var(--brand-grey-400, #b0b0b0);
    font-size: 0.75rem;
}
.bpl-form__card__body .form-text,
.bpl-form__card__body .helptext {
    font-size: 0.7rem;
    color: var(--brand-grey-400, #b0b0b0);
    margin-top: 0.25rem;
}
.bpl-form__card__body .asteriskField {
    color: #dc2626;
    font-weight: 700;
}

/* Error states */
.bpl-form__alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--brand-radius-sm, 0.5rem);
    color: #dc2626;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}
.bpl-form__alert i {
    margin-top: 0.125rem;
    flex-shrink: 0;
}
.bpl-form__card__body .is-invalid,
.bpl-form__card__body .form-control.is-invalid {
    border-color: #dc2626;
}
.bpl-form__card__body .invalid-feedback {
    font-size: 0.7rem;
    color: #dc2626;
}

/* Action Buttons */
.bpl-form__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1.125rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.bpl-form__btn--submit {
    background: var(--brand-navy, #001f3f);
    color: #fff;
}
.bpl-form__btn--submit:hover {
    background: var(--brand-navy-light, #003366);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 31, 63, 0.25);
}
.bpl-form__btn--cancel {
    background: var(--brand-grey-100, #fafafa);
    color: var(--brand-grey-600, #555);
    border: 1px solid var(--brand-grey-200, #f0f0f0);
}
.bpl-form__btn--cancel:hover {
    background: var(--brand-grey-200, #f0f0f0);
    color: var(--brand-grey-800, #1f1f1f);
    text-decoration: none;
}

/* Info Callout */
.bpl-form__callout {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: var(--brand-grey-100, #fafafa);
    border-radius: 0.375rem;
    border-left: 3px solid var(--brand-primary, #f7c000);
    padding: 0.75rem 1rem;
}
.bpl-form__callout-icon {
    color: var(--brand-primary, #f7c000);
    font-size: 0.875rem;
    margin-top: 0.0625rem;
    flex-shrink: 0;
}
.bpl-form__callout-body {
    flex: 1;
    min-width: 0;
}
.bpl-form__callout-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-grey-700, #333);
    margin: 0 0 0.25rem 0;
}
.bpl-form__callout-text {
    font-size: 0.75rem;
    color: var(--brand-grey-500, #6c757d);
    line-height: 1.5;
    margin: 0;
}

/* GPS fields row */
.bpl-form__gps-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* BPL-FORM Responsive */
@media (max-width: 767.98px) {
    .bpl-form {
        padding: 0.5rem;
    }
    .bpl-form__hero {
        padding: 1rem;
        border-radius: var(--brand-radius-sm, 0.5rem);
        flex-direction: column;
        align-items: flex-start;
    }
    .bpl-form__hero-back {
        align-self: flex-start;
    }
    .bpl-form__card__body {
        padding: 1rem;
    }
    .bpl-form__card__foot {
        flex-direction: column-reverse;
        padding: 0.75rem 1rem;
    }
    .bpl-form__btn {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 1rem;
    }
    .bpl-form__gps-row {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   BWH — Warehouse Request Page
   Business-facing fulfillment center link request
   ================================================================= */

.bwh {
    max-width: 780px;
    margin: 0 auto;
    padding: 0.75rem;
}

/* Hero Banner */
.bwh__hero {
    background: linear-gradient(135deg, var(--brand-navy, #001f3f) 0%, var(--brand-navy-light, #003366) 100%);
    color: #fff;
    padding: 2rem 1.5rem 1.75rem;
    border-radius: var(--brand-radius-md, 0.75rem);
    margin-bottom: 1.5rem;
    text-align: center;
}

.bwh__hero-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--brand-primary, #f7c000);
    margin-bottom: 1rem;
}

.bwh__hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
}

.bwh__hero-sub {
    font-size: 1rem;
    opacity: 0.8;
    margin: 0;
}

/* Section */
.bwh__section {
    margin-bottom: 1.5rem;
}

.bwh__section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-grey-800, #1f1f1f);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bwh__section-title i {
    color: var(--brand-primary, #f7c000);
    font-size: 1rem;
}

.bwh__section-desc {
    font-size: 0.875rem;
    color: var(--brand-grey-500, #6b7280);
    margin-bottom: 1.25rem;
}

/* Existing Links Grid */
.bwh__links-grid {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.bwh__link-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--brand-radius-md, 0.75rem);
    transition: all 0.2s ease;
}

.bwh__link-card--active {
    border-left: 4px solid var(--brand-success, #10b981);
}

.bwh__link-card--pending {
    border-left: 4px solid var(--brand-primary, #f7c000);
    background: #fffdf5;
}

.bwh__link-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(247, 192, 0, 0.1);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bwh__link-icon i {
    font-size: 1.125rem;
    color: var(--brand-primary, #f7c000);
}

.bwh__link-info {
    flex: 1;
    min-width: 0;
}

.bwh__link-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-grey-800, #1f1f1f);
}

.bwh__link-code {
    font-size: 0.8125rem;
    color: var(--brand-grey-400, #9ca3af);
    font-family: monospace;
}

.bwh__link-location {
    font-size: 0.875rem;
    color: var(--brand-grey-500, #6b7280);
    margin-top: 0.125rem;
}

.bwh__link-location i {
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

.bwh__link-status {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-end;
    flex-shrink: 0;
}

/* Badges */
.bwh__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    white-space: nowrap;
}

.bwh__badge i {
    font-size: 0.625rem;
}

.bwh__badge--active {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.bwh__badge--pending {
    background: rgba(247, 192, 0, 0.15);
    color: #b45309;
}

.bwh__badge--default {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

/* Warehouse Selection Grid */
.bwh__warehouse-grid {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.bwh__wh-card {
    cursor: pointer;
    display: block;
}

.bwh__wh-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bwh__wh-card-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--brand-radius-md, 0.75rem);
    transition: all 0.25s ease;
}

.bwh__wh-card-inner:hover {
    border-color: rgba(247, 192, 0, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.bwh__wh-radio:checked + .bwh__wh-card-inner {
    border-color: var(--brand-primary, #f7c000);
    background: #fffdf5;
    box-shadow: 0 4px 16px rgba(247, 192, 0, 0.15);
}

.bwh__wh-icon {
    width: 3rem;
    height: 3rem;
    background: rgba(247, 192, 0, 0.1);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.bwh__wh-radio:checked + .bwh__wh-card-inner .bwh__wh-icon {
    background: var(--brand-primary, #f7c000);
}

.bwh__wh-icon i {
    font-size: 1.25rem;
    color: var(--brand-primary, #f7c000);
    transition: color 0.25s ease;
}

.bwh__wh-radio:checked + .bwh__wh-card-inner .bwh__wh-icon i {
    color: var(--brand-navy, #001f3f);
}

.bwh__wh-details {
    flex: 1;
    min-width: 0;
}

.bwh__wh-name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--brand-grey-800, #1f1f1f);
}

.bwh__wh-code {
    font-size: 0.8125rem;
    color: var(--brand-grey-400, #9ca3af);
    font-family: monospace;
}

.bwh__wh-location {
    font-size: 0.875rem;
    color: var(--brand-grey-500, #6b7280);
    margin-top: 0.25rem;
}

.bwh__wh-location i {
    font-size: 0.75rem;
    margin-right: 0.25rem;
    color: var(--brand-primary, #f7c000);
}

.bwh__wh-check {
    flex-shrink: 0;
    font-size: 1.375rem;
    color: transparent;
    transition: color 0.25s ease;
}

.bwh__wh-radio:checked + .bwh__wh-card-inner .bwh__wh-check {
    color: var(--brand-primary, #f7c000);
}

/* Notes */
.bwh__notes-group {
    margin-bottom: 1.25rem;
}

.bwh__notes-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-grey-700, #374151);
    margin-bottom: 0.375rem;
}

.bwh__notes-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--brand-radius-sm, 0.5rem);
    font-size: 0.875rem;
    color: var(--brand-grey-800, #1f1f1f);
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bwh__notes-input:focus {
    outline: none;
    border-color: var(--brand-primary, #f7c000);
    box-shadow: 0 0 0 3px rgba(247, 192, 0, 0.15);
}

/* Actions */
.bwh__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.bwh__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--brand-radius-sm, 0.5rem);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.bwh__btn--primary {
    background: var(--brand-primary, #f7c000);
    color: var(--brand-navy, #001f3f);
    box-shadow: 0 2px 8px rgba(247, 192, 0, 0.3);
}

.bwh__btn--primary:hover {
    background: #fbd44a;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(247, 192, 0, 0.4);
    color: var(--brand-navy, #001f3f);
}

.bwh__btn--secondary {
    background: var(--brand-grey-100, #f3f4f6);
    color: var(--brand-grey-600, #4b5563);
}

.bwh__btn--secondary:hover {
    background: var(--brand-grey-200, #e5e7eb);
    color: var(--brand-grey-800, #1f1f1f);
}

/* Empty State */
.bwh__empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--brand-radius-md, 0.75rem);
    margin-bottom: 1.5rem;
}

.bwh__empty-icon {
    font-size: 2.5rem;
    color: var(--brand-grey-300, #d1d5db);
    margin-bottom: 1rem;
}

.bwh__empty-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-grey-700, #374151);
    margin-bottom: 0.5rem;
}

.bwh__empty-desc {
    font-size: 0.875rem;
    color: var(--brand-grey-500, #6b7280);
    max-width: 400px;
    margin: 0 auto 1.25rem;
}

/* Help Callout */
.bwh__callout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--brand-radius-md, 0.75rem);
    padding: 1rem 1.25rem;
}

.bwh__callout-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: #0284c7;
    margin-top: 0.125rem;
}

.bwh__callout-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0c4a6e;
    margin-bottom: 0.25rem;
}

.bwh__callout-text {
    font-size: 0.875rem;
    color: #075985;
    line-height: 1.5;
    margin: 0;
}

/* BWH Responsive */
@media (max-width: 575.98px) {
    .bwh { padding: 0.5rem; }
    .bwh__hero { padding: 1.25rem 1rem 1rem; }
    .bwh__link-card {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .bwh__link-status {
        width: 100%;
        flex-direction: row;
        align-items: center;
    }
    .bwh__wh-card-inner {
        padding: 1rem;
    }
    .bwh__actions {
        flex-direction: column-reverse;
    }
    .bwh__btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   TEAM JOIN REQUESTS (bjr__) — business_join_requests.html
   ========================================================================== */

.bjr__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.bjr__header-left { display: flex; align-items: center; gap: 1rem; }
.bjr__header-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--brand-primary, #1a56db);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.bjr__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brand-dark, #111827);
    margin: 0;
}
.bjr__subtitle { font-size: 0.875rem; color: var(--brand-gray, #6b7280); margin: 0; }
.bjr__back-link {
    font-size: 0.875rem;
    color: var(--brand-primary, #1a56db);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.bjr__back-link:hover { text-decoration: underline; }

/* Filter Pills */
.bjr__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.bjr__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: #fff;
    border: 1.5px solid var(--brand-border, #d1d5db);
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--brand-gray, #6b7280);
    text-decoration: none;
    transition: all .15s;
}
.bjr__pill:hover { border-color: var(--brand-primary, #1a56db); color: var(--brand-primary, #1a56db); }
.bjr__pill--active {
    background: var(--brand-primary, #1a56db);
    border-color: var(--brand-primary, #1a56db);
    color: #fff;
}
.bjr__pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    background: rgba(255,255,255,0.25);
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0 0.25rem;
}

/* Request Cards */
.bjr__list { display: flex; flex-direction: column; gap: 0.875rem; }
.bjr__card {
    background: #fff;
    border: 1px solid var(--brand-border, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1.125rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.bjr__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.bjr__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--brand-bg-soft, #eff6ff);
    color: var(--brand-primary, #1a56db);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.bjr__name { font-size: 0.95rem; font-weight: 600; color: var(--brand-dark, #111827); }
.bjr__contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    font-size: 0.78rem;
    color: var(--brand-gray, #6b7280);
}
.bjr__sep { color: var(--brand-border, #d1d5db); }
.bjr__status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.bjr__status--pending  { background: #fffbeb; color: #92400e; }
.bjr__status--accepted { background: #ecfdf5; color: #065f46; }
.bjr__status--rejected { background: #fef2f2; color: #991b1b; }
.bjr__status--cancelled{ background: #f3f4f6; color: #6b7280; }

/* Details Row */
.bjr__details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.625rem;
}
.bjr__detail {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
}
.bjr__detail-label {
    color: var(--brand-gray, #9ca3af);
    font-weight: 500;
}
.bjr__detail-label i { font-size: 0.7rem; }
.bjr__detail-value { color: var(--brand-dark, #374151); font-weight: 600; }

/* Message */
.bjr__message {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--brand-bg-soft, #f9fafb);
    border-left: 3px solid var(--brand-border, #d1d5db);
    padding: 0.5rem 0.75rem;
    border-radius: 0 0.375rem 0.375rem 0;
    font-size: 0.85rem;
    color: var(--brand-gray, #4b5563);
    margin-bottom: 0.75rem;
    font-style: italic;
}
.bjr__message i { color: var(--brand-gray, #9ca3af); flex-shrink: 0; margin-top: 0.1rem; }

/* Actions */
.bjr__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--brand-border, #f3f4f6);
}
.bjr__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background .15s, opacity .15s;
}
.bjr__btn--accept  { background: var(--brand-success, #059669); color: #fff; }
.bjr__btn--accept:hover  { background: #047857; }
.bjr__btn--reject  { background: #fff; border: 1.5px solid var(--brand-danger, #dc2626); color: var(--brand-danger, #dc2626); }
.bjr__btn--reject:hover  { background: #fef2f2; }
.bjr__btn--detail  { background: var(--brand-bg-soft, #eff6ff); color: var(--brand-primary, #1a56db); }
.bjr__btn--detail:hover  { background: #dbeafe; }
.bjr__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Empty State */
.bjr__empty {
    text-align: center;
    padding: 3rem 1rem;
}
.bjr__empty-icon { font-size: 3rem; color: var(--brand-border, #d1d5db); margin-bottom: 1rem; }
.bjr__empty-title { font-size: 1.1rem; color: var(--brand-dark, #374151); font-weight: 600; }
.bjr__empty-text { color: var(--brand-gray, #6b7280); font-size: 0.875rem; margin-bottom: 1rem; }

/* ==========================================================================
   TEAM JOIN REQUEST BADGE on teams list (btl__)
   ========================================================================== */
.btl__request-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    background: #fffbeb;
    border: 1.5px solid #f59e0b;
    color: #92400e;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.btl__request-badge:hover { background: #fde68a; color: #78350f; }
.btl__request-badge i { color: #f59e0b; }

/* ==========================================================================
   JOIN REQUEST BANNER on teams_add.html (bta__)
   ========================================================================== */
.bta__request-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    color: #1e40af;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.bta__request-banner i { font-size: 1.1rem; flex-shrink: 0; }
.bta__request-banner-link {
    margin-left: auto;
    font-size: 0.8rem;
    color: #1d4ed8;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

/* ============================================================
   MOBILE SWEEP — Responsive fixes for all dashboard inner pages
   ============================================================ */
@media (max-width: 767.98px) {

  /* ── Driver Directory ── */
  .bdd { padding: 0 0.75rem 1.5rem; }
  .bdd__card { border-radius: 0.75rem; }

  /* ── Pickup Location List ── */
  .bpl-list { padding: 0 0.75rem 1.5rem; }
  .bpl-list__callout { margin: 0.5rem 0; font-size: 0.8rem; }
  .bpl-list__card__foot { flex-wrap: wrap; gap: 0.5rem; }
  .bpl-list__act { flex: 1 1 calc(50% - 0.5rem); justify-content: center; }

  /* ── Pickup Location Add/Edit Form ── */
  .bpl-form { padding: 0 0.75rem 1.5rem; }
  .bpl-form__card { border-radius: 0.75rem; }
  .bpl-form__callout { margin-top: 0.75rem; }
  .bpl-form__card__foot { flex-direction: column; gap: 0.5rem; }
  .bpl-form__btn { width: 100%; justify-content: center; }

  /* ── Teams List ── */
  .btl { padding: 0 0.75rem 1.5rem; }
  .btl__guide { padding: 0.75rem; }
  .btl__guide-methods { flex-direction: column; gap: 0.75rem; }
  .btl__req-row { flex-wrap: wrap; gap: 0.5rem; }
  .btl__req-actions { width: 100%; display: flex; gap: 0.5rem; }
  .btl__req-btn { flex: 1; justify-content: center; }

  /* ── Teams Add ── */
  .bta { padding: 0 0.75rem 1.5rem; }
  .bta__header { padding: 0.875rem 0; }

  /* ── Join Requests ── */
  .bjr { padding: 0 0.75rem 1.5rem; }
  .bjr__header { padding: 0.875rem 0; }
  .bjr__card-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .bjr__status { align-self: flex-start; }
  .bjr__details { grid-template-columns: 1fr 1fr; }
  .bjr__actions { flex-direction: column; gap: 0.5rem; }
  .bjr__btn { width: 100%; justify-content: center; }

  /* ── Business Settings ── */
  .bset { padding: 0 0.75rem 1.5rem; }

  /* Misc mobile fixes */
  .bta__request-banner-link:hover { text-decoration: underline; }
}