.custom-header {
    background-color: rgb(160, 158, 158); /* You can change this to any shade of gray you prefer, e.g., #d3d3d3 */
    color: rgb(70, 70, 245); /* The text color will be blue */
    border-bottom: 1px solid #dee2e6;
  }
  
.site-logo {
    max-height: 80px;
}

.preserve-whitespace {
  white-space: pre-line; /* Preserves line breaks, collapses multiple spaces, allows wrapping */
  word-wrap: break-word; /* Ensures long words wrap correctly */
}

/* --- Styles for Theme Switcher --- */

/* By default, hide the moon icon */
.theme-icon-dark {
  display: none;
}

/* When the theme is dark, hide the sun and show the moon */
[data-bs-theme="dark"] .theme-icon-light {
  display: none;
}

[data-bs-theme="dark"] .theme-icon-dark {
  display: inline-block; /* Or whatever is appropriate */
}

/* In app/static/css/custom.css */

.border-dashed {
  /* Use !important to make sure it overrides Bootstrap's default solid border on cards */
  border-style: dashed !important;
  border-color: var(--bs-border-color-translucent) !important;
}

.ad-card {
  /* Make the ad slightly transparent to differentiate it from main UI */
  opacity: 0.85;
  transition: opacity 0.2s ease-in-out;
}

.ad-card:hover {
  /* Become fully opaque on hover to invite interaction */
  opacity: 1;
}

/* --- Styling for "How It Works" Section --- */
.how-it-works-step {
  position: relative; /* Needed for the arrow positioning */
}

/* Create the arrow using a pseudo-element */
/* This will only show up on medium screens and larger (where steps are side-by-side) */
@media (min-width: 768px) {
  .how-it-works-step::after {
      content: '\F138'; /* This is the Bootstrap Icons Unicode for 'arrow-right' */
      font-family: 'bootstrap-icons';
      font-size: 2.5rem;
      color: #dee2e6; /* A light grey color */
      position: absolute;
      top: 2rem; /* Vertically center it with the icon */
      right: -2.5rem; /* Position it between the columns */
      transform: translateY(-50%);
  }
}

/* --- Dark Mode Fix for intl-tel-input Dropdown --- */

/* This targets the main dropdown list only when dark mode is on */
[data-bs-theme="dark"] .iti__country-list {
  /* Use Bootstrap's own CSS variables to match your dark theme perfectly */
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}

/* This targets the individual country items in the list */
[data-bs-theme="dark"] .iti__country {
  color: var(--bs-body-color); /* Make the text light */
}

/* This targets the dial code (+56, etc.) to make it slightly muted */
[data-bs-theme="dark"] .iti__dial-code {
  color: var(--bs-secondary-color);
}

/* This styles the item you are hovering over */
[data-bs-theme="dark"] .iti__country.iti__highlight {
  background-color: var(--bs-secondary-bg);
}

/* --- Login Button Styling --- */
.login-cta-btn {
    border: 2px solid #495057 !important; /* Darker gray border for better visibility */
}

.login-cta-btn:hover {
    border-color: #000000 !important; /* Black border on hover */
    background-color: #e2e6ea; /* Slightly darker background on hover */
}