:root, [data-bs-theme=light] {
  --bs-primary-text: #4358a3;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
}

@font-face {
  font-family: 'ABC Arizona Mix';
  src: url('assets/fonts/ABCArizonaMix-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

body {
/**
  font-family: 'ABC Arizona Mix', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
**/
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

/**
strong, b {
  font-family: 'Times New Roman';
}
**/

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4, h5, h6 { font-size: 1.25rem; }
p, li, a, span, input, button { font-size: 1rem; }

/* Feature icons */
.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Feature cards */
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Dashed border for drop zone */
.border-dashed {
  border-style: dashed !important;
}

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

/* Custom scrollbar for chat area */
#chat-area-display::-webkit-scrollbar {
  width: 8px;
}

#chat-area-display::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

#chat-area-display::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

#chat-area-display::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* Risk level badges (Using Bootstrap 5.3 subtle colors) */
/* .bg-risk-critical { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.bg-risk-high { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.bg-risk-medium { background-color: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.bg-risk-low { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); } */
/* Note: Direct classes like bg-danger-subtle are used in JS now */


/* Chat messages */
.user-message {
  background-color: #f8f9fa; /* Light gray */
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 10px;
  border: 1px solid #dee2e6;
  max-width: 80%;
  margin-left: auto; /* Align user messages to the right */
  text-align: left; /* Keep text left-aligned within the bubble */
}

.ai-message {
  background-color: #e9f5ff; /* Light blue */
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 10px;
  border: 1px solid #cce5ff;
  max-width: 80%;
  margin-right: auto; /* Align AI messages to the left */
}

.ai-message strong {
  color: #0056b3; /* Darker blue for AI name */
}


/* Hero section */
.hero-section img {
  max-width: 120px;
  border-radius: 10px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Make sure modals display over other elements */
/* Bootstrap handles modal z-index well, but ensure backdrop is below modal */
.modal-backdrop {
  z-index: 1050; /* Default is 1040, ensure it's below modal */
}
.modal {
  z-index: 1060; /* Ensure modal is above backdrop and potentially other elements */
}

/* Style for invalid select in modal */
#represented-party-modal.is-invalid {
    border-color: var(--bs-danger);
}
.invalid-feedback {
    display: none; /* Hide by default */
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-danger);
}
#represented-party-modal.is-invalid ~ .invalid-feedback {
    display: block; /* Show when input is invalid */
}

/* Ensure button icons are vertically aligned */
.btn i {
    vertical-align: middle;
}

/* Hide default icon when spinner is shown */
.btn .spinner-border ~ i:not(.fa-lock) {
    display: none;
}

footer.footer {
  background-color: #0160B4;
}

.navbar {
  background-color: #0160B4;
}

@media (max-width: 576px) {
  .reduce-on-sm {
    font-size: 1.1rem !important;
  }
}

.pulsing-button {
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  border-radius: 10px;
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  text-decoration: none !important;
  transition: all 300ms ease-in-out;
}

@-webkit-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

.cloud-badge {
  display: inline-block;
  background: #f0f8ff;
  color: #333;
  border-radius: 40px 60px 40px 60px / 60px 40px 60px 40px;
  padding: 0.7em 1.5em;
  font-size: 1.05em;
  font-weight: 500;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.07);
  margin: 0.2em 0.3em;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.cloud-badge:hover {
  background: #e0eaff;
  color: #0d6efd;
  box-shadow: 0 4px 18px 0 rgba(13,110,253,0.10);
  cursor: pointer;
}

 .bg-primary-subtle {
   background-color: var(--bs-primary-bg-subtle) !important;
 }

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

 .bg-success-subtle {
   background-color: var(--bs-success-bg-subtle) !important;
 }

 .bg-info-subtle {
   background-color: var(--bs-info-bg-subtle) !important;
 }

 .bg-warning-subtle {
   background-color: var(--bs-warning-bg-subtle) !important;
 }

 .bg-danger-subtle {
   background-color: var(--bs-danger-bg-subtle) !important;
 }

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

 .bg-dark-subtle {
   background-color: var(--bs-dark-bg-subtle) !important;
 }


.text-primary-emphasis {
  color: var(--bs-primary-text-emphasis) !important;
}

.text-secondary-emphasis {
  color: var(--bs-secondary-text-emphasis) !important;
}

.text-success-emphasis {
  color: var(--bs-success-text-emphasis) !important;
}

.text-info-emphasis {
  color: var(--bs-info-text-emphasis) !important;
}

.text-warning-emphasis {
  color: var(--bs-warning-text-emphasis) !important;
}

.text-danger-emphasis {
  color: var(--bs-danger-text-emphasis) !important;
}

.text-light-emphasis {
  color: var(--bs-light-text-emphasis) !important;
}

.text-dark-emphasis {
  color: var(--bs-dark-text-emphasis) !important;
}

/* Hover effect for feature images - 30% enlargement */
img[src*="lan-screenshot"] {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

img[src*="lan-screenshot"]:hover {
  transform: scale(1.2);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
  z-index: 10;
  position: relative;
}