/*
 * Shared semantic colours for content that must stay readable across themes.
 *
 * Theme styles are intentionally free to recolour page chrome and dark cards.
 * Dialogs carrying booking credentials use an explicit light surface so broad
 * theme selectors cannot turn their text light while leaving the card white.
 */
:root {
  --ui-accent: #c2410c;
  --ui-accent-strong: #9a3412;
  --ui-accent-text: #9a3412;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #fdba74;
  --ui-soft: #fff7ed;
  --ui-soft-border: #fdba74;
  --ui-soft-text: #9a3412;
}

body.theme-premium {
  --ui-accent: #1d4ed8;
  --ui-accent-strong: #1e40af;
  --ui-accent-text: #1e40af;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #93c5fd;
  --ui-soft: #eff6ff;
  --ui-soft-border: #bfdbfe;
  --ui-soft-text: #1e40af;
}

body.theme-modern {
  --ui-accent: #b45309;
  --ui-accent-strong: #92400e;
  --ui-accent-text: #92400e;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #fbbf24;
  --ui-soft: #fffbeb;
  --ui-soft-border: #fcd34d;
  --ui-soft-text: #92400e;
}

body.theme-elegant {
  --ui-accent: #c2410c;
  --ui-accent-strong: #9a3412;
  --ui-accent-text: #9a3412;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #fdba74;
  --ui-soft: #fff7ed;
  --ui-soft-border: #fed7aa;
  --ui-soft-text: #9a3412;
}

body.theme-luxe,
body.theme-blackpro,
body.theme-goldnight {
  --ui-accent: #c9a24b;
  --ui-accent-strong: #a27c28;
  --ui-accent-text: #74520b;
  --ui-on-accent: #171717;
  --ui-accent-on-dark: #f0d998;
  --ui-soft: #fffbeb;
  --ui-soft-border: #e8cd88;
  --ui-soft-text: #74520b;
}

body.theme-whitegold {
  --ui-accent: #806000;
  --ui-accent-strong: #664d00;
  --ui-accent-text: #664d00;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #f1d87b;
  --ui-soft: #fffdf5;
  --ui-soft-border: #ddc56e;
  --ui-soft-text: #6b5100;
}

body.theme-sakuragold {
  --ui-accent: #a02555;
  --ui-accent-strong: #7a0f3e;
  --ui-accent-text: #7a0f3e;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #f0d9a8;
  --ui-soft: #fff4f7;
  --ui-soft-border: #e7c578;
  --ui-soft-text: #7a0f3e;
}

body.theme-sakura {
  --ui-accent: #be185d;
  --ui-accent-strong: #9d174d;
  --ui-accent-text: #9d174d;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #f9a8d4;
  --ui-soft: #fdf2f8;
  --ui-soft-border: #f9a8d4;
  --ui-soft-text: #9d174d;
}

body.theme-neoncity {
  --ui-accent: #c2185b;
  --ui-accent-strong: #9d174d;
  --ui-accent-text: #9d174d;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #67e8f9;
  --ui-soft: #fdf2f8;
  --ui-soft-border: #f9a8d4;
  --ui-soft-text: #9d174d;
}

body.theme-midnight {
  --ui-accent: #6d28d9;
  --ui-accent-strong: #5b21b6;
  --ui-accent-text: #5b21b6;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #c4b5fd;
  --ui-soft: #f5f3ff;
  --ui-soft-border: #c4b5fd;
  --ui-soft-text: #5b21b6;
}

body.theme-carbonsport {
  --ui-accent: #b91c1c;
  --ui-accent-strong: #991b1b;
  --ui-accent-text: #991b1b;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #fca5a5;
  --ui-soft: #fef2f2;
  --ui-soft-border: #fca5a5;
  --ui-soft-text: #991b1b;
}

body.theme-canyon,
body.theme-terra {
  --ui-accent: #c2410c;
  --ui-accent-strong: #9a3412;
  --ui-accent-text: #9a3412;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #fdba74;
  --ui-soft: #fff7ed;
  --ui-soft-border: #fdba74;
  --ui-soft-text: #9a3412;
}

body.theme-oceanblue {
  --ui-accent: #0369a1;
  --ui-accent-strong: #075985;
  --ui-accent-text: #075985;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #7dd3fc;
  --ui-soft: #f0f9ff;
  --ui-soft-border: #7dd3fc;
  --ui-soft-text: #075985;
}

body.theme-ivoryzen {
  --ui-accent: #57534e;
  --ui-accent-strong: #44403c;
  --ui-accent-text: #44403c;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #e7e5e4;
  --ui-soft: #fafaf9;
  --ui-soft-border: #d6d3d1;
  --ui-soft-text: #57534e;
}

body.theme-ecogreen {
  --ui-accent: #047857;
  --ui-accent-strong: #065f46;
  --ui-accent-text: #065f46;
  --ui-on-accent: #ffffff;
  --ui-accent-on-dark: #6ee7b7;
  --ui-soft: #f0fdf4;
  --ui-soft-border: #86efac;
  --ui-soft-text: #065f46;
}

/* Explicit light surfaces win over broad dark-theme text overrides. */
:is(#successModal, #bkModal) [data-ui-surface="light"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
  color-scheme: light;
}

:is(#successModal, #bkModal) .ui-modal-card {
  box-sizing: border-box !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-copy {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-label {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-value {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-invoice-value {
  color: var(--ui-accent-text) !important;
  -webkit-text-fill-color: var(--ui-accent-text) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-panel-title,
:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-note {
  color: var(--ui-soft-text) !important;
  -webkit-text-fill-color: var(--ui-soft-text) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-note {
  line-height: 1.55 !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-panel--muted {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-panel--soft {
  background: var(--ui-soft) !important;
  border-color: var(--ui-soft-border) !important;
  color: var(--ui-soft-text) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-panel--dark {
  background: #202126 !important;
  border-color: #202126 !important;
  color: #ffffff !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-panel--dark .ui-label {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-panel--dark .ui-invoice-value {
  color: var(--ui-accent-on-dark) !important;
  -webkit-text-fill-color: var(--ui-accent-on-dark) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-credential-row {
  background: rgba(255, 255, 255, .82) !important;
  border-color: color-mix(in srgb, var(--ui-soft-border) 72%, #cbd5e1) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-action {
  display: block;
  border-radius: 12px;
  padding: .82rem 1rem;
  text-align: center;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1.35;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-action:hover {
  transform: translateY(-1px);
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-action--primary {
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
  color: var(--ui-on-accent) !important;
  -webkit-text-fill-color: var(--ui-on-accent) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-accent) 26%, transparent) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-action--primary:hover {
  background: var(--ui-accent-strong) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-action--secondary {
  background: #202126 !important;
  border-color: #202126 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-modal-close {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/*
 * Legacy inline colour protection inside the same dialogs. These rules keep
 * secondary payment/bank rows readable until those older inline blocks are
 * migrated to semantic classes as well.
 */
:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="color:#0f172a"] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="color:#64748b"],
:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="color:#475569"],
:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="color:#94a3b8"] {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="color:#92400e"],
:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="color:#d97706"],
:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="color:#c2410c"] {
  color: var(--ui-soft-text) !important;
  -webkit-text-fill-color: var(--ui-soft-text) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="color:#f97316"] {
  color: var(--ui-accent-text) !important;
  -webkit-text-fill-color: var(--ui-accent-text) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="background:#fff7ed"],
:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="background:#fffbeb"] {
  background: var(--ui-soft) !important;
  border-color: var(--ui-soft-border) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="background:#eff6ff"] {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="background:#fff"] {
  background: #ffffff !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] [style*="background:#f8fafc"] {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Semantic variants follow legacy protection so their role always wins. */
:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-panel--dark {
  background: #202126 !important;
  border-color: #202126 !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-panel--dark .ui-label {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-panel--dark .ui-invoice-value {
  color: var(--ui-accent-on-dark) !important;
  -webkit-text-fill-color: var(--ui-accent-on-dark) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-action--primary {
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
  color: var(--ui-on-accent) !important;
  -webkit-text-fill-color: var(--ui-on-accent) !important;
}

:is(#successModal, #bkModal) [data-ui-surface="light"] .ui-action--secondary {
  background: #202126 !important;
  border-color: #202126 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 640px) {
  :is(#successModal, #bkModal) {
    align-items: center !important;
    padding: .75rem !important;
  }

  :is(#successModal, #bkModal) .ui-modal-card {
    width: 100% !important;
    max-width: 32rem !important;
    max-height: calc(100dvh - 1.5rem) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    padding: 1.25rem !important;
  }

  :is(#successModal, #bkModal) .ui-success-heading {
    margin-bottom: 1.1rem !important;
  }

  :is(#successModal, #bkModal) .ui-success-icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.65rem !important;
  }

  :is(#successModal, #bkModal) .ui-credentials-grid {
    gap: .625rem !important;
  }

  :is(#successModal, #bkModal) .ui-label {
    font-size: .72rem !important;
  }

  :is(#successModal, #bkModal) .ui-note {
    font-size: .76rem !important;
  }
}

@media (max-width: 360px) {
  :is(#successModal, #bkModal) .ui-credentials-grid {
    grid-template-columns: 1fr !important;
  }
}