/* Raj Travels — inner pages (listings, details, booking, account).
 *
 * Light mode keeps the established bright layout; dark mode remaps the legacy
 * Bootstrap surface utilities used across these views. Every colour comes from
 * assets/css/raj-tokens.css — do not add one-off hex values here.
 */

/* ---------------------------------------------------------------- top nav */

header.navbar.fixed-top,
header.swap_navbar {
  background: var(--raj-topnav-bg);
  border-bottom: 1px solid var(--raj-topnav-accent-soft);
  box-shadow: var(--raj-topnav-shadow);
}

header.swap_navbar {
  z-index: 1022;
  min-height: 80px;
}

header.navbar.fixed-top .navbar-brand img {
  background: transparent;
}

header.navbar.fixed-top .header_menu .nav-link,
header.navbar.fixed-top .navbar-nav .nav-link,
header.navbar.fixed-top .header_options,
header.navbar.fixed-top .navbar-toggler,
header.navbar.fixed-top .navbar-nav .dropdown-toggle svg,
header.navbar.fixed-top .navbar-nav .dropdown-toggle strong {
  color: var(--raj-topnav-text);
  stroke: var(--raj-topnav-text);
}

header.navbar.fixed-top .header_menu .nav-link {
  font-weight: 600;
  letter-spacing: 0.02em;
}

header.navbar.fixed-top .header_menu .nav-link::before {
  background: var(--raj-topnav-accent);
}

header.navbar.fixed-top .header_menu .nav-link.active,
header.navbar.fixed-top .header_menu .nav-link:hover,
header.navbar.fixed-top .navbar-nav .nav-link:hover,
header.navbar.fixed-top .navbar-nav .nav-link:focus {
  color: var(--raj-topnav-hover-text);
}

header.navbar.fixed-top .navbar-toggler {
  border: 1px solid var(--raj-topnav-accent-soft);
}

header.navbar.fixed-top .navbar-toggler-icon {
  filter: var(--raj-topnav-toggler-filter);
}

header.navbar.fixed-top .nav-link.btn.btn-outline-secondary,
header.navbar.fixed-top .nav-link.btn.dropdown-toggle.btn,
header.navbar.fixed-top .nav-link.btn.px-0.ps-3,
header.navbar.fixed-top .nav-link.btn.ps-3 {
  background: var(--raj-topnav-panel);
  border: 1px solid var(--raj-topnav-accent-soft);
  border-radius: 12px;
  color: var(--raj-topnav-text);
}

header.navbar.fixed-top .header_menu .header-menu-cta,
header.navbar.fixed-top .navbar-nav .header-cta-btn {
  background: var(--raj-btn-primary-bg);
  border: 1px solid var(--raj-topnav-accent-soft);
  color: var(--raj-btn-primary-text);
  box-shadow: none;
}

header.navbar.fixed-top .header_menu .header-menu-cta:hover,
header.navbar.fixed-top .header_menu .header-menu-cta.active,
header.navbar.fixed-top .navbar-nav .header-cta-btn:hover,
header.navbar.fixed-top .navbar-nav .header-cta-btn.active {
  background: var(--raj-btn-primary-hover);
  color: var(--raj-btn-primary-text);
}

header.navbar.fixed-top .dropdown-menu,
header.navbar.fixed-top .dropdown-menu.show {
  background: var(--raj-topnav-dropdown-bg);
  border: 1px solid var(--raj-topnav-accent-soft);
  box-shadow: var(--raj-topnav-shadow);
}

header.navbar.fixed-top .dropdown-menu .dropdown-item {
  color: var(--raj-topnav-text);
}

header.navbar.fixed-top .dropdown-menu .dropdown-divider {
  border-top-color: var(--raj-topnav-accent-soft);
}

header.navbar.fixed-top .dropdown-item:hover,
header.navbar.fixed-top .dropdown-item:focus {
  background: var(--raj-nav-hover-bg);
  color: var(--raj-topnav-hover-text);
}

@media (max-width: 991.98px) {
  header.navbar.fixed-top .navbar-collapse {
    background: var(--raj-topnav-bg);
    padding: 16px 0 20px;
    border-top: 1px solid var(--raj-topnav-accent-soft);
  }
}

/* ------------------------------------------------------------ theme toggle */

.raj-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--raj-topnav-accent-soft);
  border-radius: 12px;
  background: var(--raj-topnav-panel);
  color: var(--raj-topnav-text);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.raj-theme-toggle:hover,
.raj-theme-toggle:focus-visible {
  background: var(--raj-nav-hover-bg);
  border-color: var(--raj-topnav-accent);
  color: var(--raj-topnav-accent);
}

.raj-theme-toggle:focus-visible {
  outline: 2px solid var(--raj-focus-ring);
  outline-offset: 2px;
}

.raj-theme-toggle__icon {
  width: 18px;
  height: 18px;
  display: none;
}

html[data-raj-theme='light'] .raj-theme-toggle__icon--moon {
  display: block;
}

html[data-raj-theme='dark'] .raj-theme-toggle__icon--sun {
  display: block;
}

/* -------------------------------------------------- passport scan feedback */

.passport-scan-status--success {
  color: var(--raj-success);
}

.passport-scan-status--error {
  color: var(--raj-danger);
}

.passport-scan-status--loading {
  color: var(--raj-info);
}

.passport-field-filled {
  border-color: var(--raj-success) !important;
  box-shadow: 0 0 0 0.2rem var(--raj-success-soft) !important;
}

/* --------------------------------------------------------------- dark mode
 * These views were authored with hard Bootstrap surface utilities
 * (bg-white / bg-light / text-muted), so dark mode has to remap them.
 * Print/invoice layouts opt out via .raj-invoice-sheet.
 */

html[data-raj-theme='dark'] body {
  background: var(--raj-page-bg);
  color: var(--raj-text);
}

html[data-raj-theme='dark'] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--raj-text-strong);
}

html[data-raj-theme='dark'] .bg-white {
  background-color: var(--raj-surface) !important;
  color: var(--raj-text);
}

html[data-raj-theme='dark'] .bg-light {
  background-color: var(--raj-surface-muted) !important;
  color: var(--raj-text);
}

html[data-raj-theme='dark'] .text-muted {
  color: var(--raj-muted) !important;
}

html[data-raj-theme='dark'] .text-dark,
html[data-raj-theme='dark'] .text-black {
  color: var(--raj-text) !important;
}

html[data-raj-theme='dark'] .card,
html[data-raj-theme='dark'] .list-group-item,
html[data-raj-theme='dark'] .accordion-item,
html[data-raj-theme='dark'] .accordion-button {
  background: var(--raj-surface);
  border-color: var(--raj-border);
  color: var(--raj-text);
}

html[data-raj-theme='dark'] .card-header,
html[data-raj-theme='dark'] .card-footer {
  background: var(--raj-surface-muted) !important;
  border-color: var(--raj-border);
  color: var(--raj-text);
}

html[data-raj-theme='dark'] .shadow-sm,
html[data-raj-theme='dark'] .shadow {
  box-shadow: var(--raj-shadow-soft) !important;
}

html[data-raj-theme='dark'] hr {
  border-color: var(--raj-border);
  opacity: 1;
}

html[data-raj-theme='dark'] :is(.form-control, .form-select, .input-group-text) {
  background-color: var(--raj-field-bg);
  border-color: var(--raj-field-border);
  color: var(--raj-field-text);
}

html[data-raj-theme='dark'] :is(.form-control, .form-select):focus {
  background-color: var(--raj-field-bg-hover);
  border-color: var(--raj-field-border-focus);
  color: var(--raj-field-text);
  box-shadow: 0 0 0 0.2rem var(--raj-field-focus-ring);
}

html[data-raj-theme='dark'] .form-control::placeholder {
  color: var(--raj-field-placeholder);
}

html[data-raj-theme='dark'] .form-control[type='date'],
html[data-raj-theme='dark'] .form-control[type='time'] {
  color-scheme: dark;
}

html[data-raj-theme='dark'] .form-floating > label,
html[data-raj-theme='dark'] .form-label,
html[data-raj-theme='dark'] .form-check-label {
  color: var(--raj-muted);
}

html[data-raj-theme='dark'] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--raj-text);
  border-color: var(--raj-border);
  color: var(--raj-text);
}

html[data-raj-theme='dark'] .table > :not(caption) > * > * {
  background-color: transparent;
  border-color: var(--raj-border);
  color: var(--raj-text);
}

html[data-raj-theme='dark'] .table thead th {
  background-color: var(--raj-surface-muted);
  color: var(--raj-text-strong);
}

html[data-raj-theme='dark'] :is(.modal-content, .offcanvas, .dropdown-menu, .popover, .toast) {
  background: var(--raj-surface);
  border-color: var(--raj-border);
  color: var(--raj-text);
}

html[data-raj-theme='dark'] :is(.modal-header, .modal-footer, .offcanvas-header) {
  border-color: var(--raj-border);
}

html[data-raj-theme='dark'] .dropdown-item {
  color: var(--raj-dropdown-text);
}

html[data-raj-theme='dark'] .dropdown-item:hover,
html[data-raj-theme='dark'] .dropdown-item:focus {
  background: var(--raj-dropdown-hover);
  color: var(--raj-dropdown-hover-text);
}

html[data-raj-theme='dark'] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-raj-theme='dark'] :is(.btn-outline-secondary, .btn-outline-primary, .btn-link) {
  color: var(--raj-link);
  border-color: var(--raj-border-strong);
}

html[data-raj-theme='dark'] :is(.btn-outline-secondary, .btn-outline-primary):hover {
  background: var(--raj-nav-hover-bg);
  color: var(--raj-link-hover);
  border-color: var(--raj-topnav-accent);
}

html[data-raj-theme='dark'] .btn-primary {
  background: var(--raj-btn-primary-bg);
  border-color: var(--raj-green-deep);
  color: var(--raj-btn-primary-text);
}

html[data-raj-theme='dark'] .btn-primary:hover,
html[data-raj-theme='dark'] .btn-primary:focus {
  background: var(--raj-btn-primary-hover);
  color: var(--raj-btn-primary-text);
}

html[data-raj-theme='dark'] :is(.newsletter-section, .footer-area, .footer-item) {
  background: var(--raj-footer-bg) !important;
  color: var(--raj-text);
}

html[data-raj-theme='dark'] .footer-item {
  border-color: var(--raj-border) !important;
}

html[data-raj-theme='dark'] .select2-container--default .select2-selection--single,
html[data-raj-theme='dark'] .select2-dropdown {
  background: var(--raj-field-bg);
  border-color: var(--raj-field-border);
  color: var(--raj-field-text);
}

html[data-raj-theme='dark'] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-raj-theme='dark'] .select2-results__option {
  color: var(--raj-field-text);
}

html[data-raj-theme='dark'] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--raj-dropdown-hover);
  color: var(--raj-dropdown-hover-text);
}

html[data-raj-theme='dark'] .select2-search__field {
  background: var(--raj-field-bg);
  color: var(--raj-field-text);
}

/* Alerts and badges keep their semantic hue but need readable contrast. */
html[data-raj-theme='dark'] .alert-warning {
  background: var(--raj-success-soft);
  border-color: var(--raj-border-strong);
  color: var(--raj-text);
}

html[data-raj-theme='dark'] .badge.text-bg-warning {
  background: var(--raj-gold) !important;
  color: var(--raj-green-deep) !important;
}

/* Invoices are printed and emailed, so they stay on paper-light tokens.
 * Re-declaring the tokens here makes every dark rule above resolve to light. */
.raj-invoice-sheet {
  color-scheme: light;
  --raj-page-bg: #f4f8f5;
  --raj-surface: #ffffff;
  --raj-surface-muted: #eef4f0;
  --raj-text: #1a241f;
  --raj-text-strong: #0f1a14;
  --raj-muted: #5c6761;
  --raj-border: rgba(9, 106, 50, 0.16);
  --raj-border-strong: rgba(9, 106, 50, 0.28);
  --raj-field-bg: #ffffff;
  --raj-field-text: #173120;
  --raj-field-border: rgba(9, 106, 50, 0.2);
  --raj-footer-bg: #eef4f0;
  --raj-shadow-soft: 0 4px 14px rgba(23, 49, 32, 0.06);
  background-color: var(--raj-page-bg) !important;
  color: var(--raj-text);
}

@media print {
  header.navbar.fixed-top,
  .raj-theme-toggle {
    display: none !important;
  }
}