/* VoiceTextTranslate Brand Overrides
   Primary:   #389dd8
   Secondary: #8bb4e6
   Ternary:   #a6a6a6
*/

:root {
  --bs-primary: #389dd8;
  --bs-primary-rgb: 56, 157, 216;
  --bs-link-color: #389dd8;
  --bs-link-color-rgb: 56, 157, 216;
  --bs-link-hover-color: #2a7fb0;
}

.btn-primary {
  --bs-btn-bg: #389dd8;
  --bs-btn-border-color: #389dd8;
  --bs-btn-hover-bg: #2a7fb0;
  --bs-btn-hover-border-color: #2a7fb0;
  --bs-btn-active-bg: #2272a0;
  --bs-btn-active-border-color: #2272a0;
  --bs-btn-disabled-bg: #389dd8;
  --bs-btn-disabled-border-color: #389dd8;
}

.text-primary {
  color: #389dd8 !important;
}

.bg-brand-primary {
  background-color: #389dd8;
}

.bg-brand-secondary {
  background-color: #8bb4e6;
}

.bg-brand-navy {
  background-color: #1a3a4f;
}

.text-brand-navy {
  color: #1a3a4f;
}

.policy-page {
  max-width: 800px;
}

/* Beta badge */
.badge-beta {
  background-color: #8bb4e6;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3em 0.65em;
  border-radius: 0.4rem;
  vertical-align: middle;
}

/* Invitation banner */
.invitation-banner {
  background-color: #eaf4fb;
  border-inline-start: 4px solid #389dd8;
  color: #1e5f88;
}

/* Mirror directional Bootstrap Icons under RTL. Bootstrap's RTL CSS bundle
   handles utility-class flipping (margins, paddings, etc.) but icon glyphs
   are static — bi-arrow-left still renders as a left-pointing arrow even
   under dir="rtl". The class names (which JS uses to toggle expand/collapse
   state) stay untouched — only the rendered glyph mirrors. Vertical
   chevrons/arrows (up/down) are excluded because they aren't
   reading-order-sensitive.

   Apply to ::before because Bootstrap Icons render the glyph there as
   display: inline-block — transforms on the parent <i> can be inconsistent
   since <i> is display: inline by default. */
[dir="rtl"] .bi-arrow-left::before,
[dir="rtl"] .bi-arrow-right::before,
[dir="rtl"] .bi-chevron-left::before,
[dir="rtl"] .bi-chevron-right::before,
[dir="rtl"] .bi-arrow-left-short::before,
[dir="rtl"] .bi-arrow-right-short::before,
[dir="rtl"] .bi-arrow-bar-left::before,
[dir="rtl"] .bi-arrow-bar-right::before {
  transform: scaleX(-1);
}

/* Landing feature cards — force wrapping so any translation fits, even if a
   token would normally be unbreakable (long compound words, URLs, etc.). */
#pricing .card-body,
#pricing .card-body * {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Sidebar — brand pastel blue */
.sidebar {
  background-color: #8bb4e6;
}

/* Page headings — brand dark navy (matches landing section headings) */
h2 {
  color: #1a3a4f;
}

/* Outline primary button — brand blue */
.btn-outline-primary {
  --bs-btn-color: #389dd8;
  --bs-btn-border-color: #389dd8;
  --bs-btn-hover-bg: #389dd8;
  --bs-btn-hover-border-color: #389dd8;
  --bs-btn-active-bg: #2a7fb0;
  --bs-btn-active-border-color: #2a7fb0;
}

/* Active list-group item — brand light blue so badges/buttons stay visible */
.list-group-item.active {
  --bs-list-group-active-bg: #8bb4e6;
  --bs-list-group-active-border-color: #8bb4e6;
}

/* Floating language dropdown */
.lang-floating-menu {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  max-height: 280px;
}

.lang-floating-search {
  padding: 0.4rem;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.lang-floating-list {
  overflow-y: auto;
  flex: 1;
}

.lang-option:hover {
  background-color: #f0f0f0;
}

/* VAD speech activity bar */
.vad-bar {
  position: relative;
  height: 10px;
  background-color: #ced4da;
  border-radius: 5px;
  overflow: hidden;
}

.vad-segment {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #389dd8;
  border-radius: 2px;
  min-width: 1px;
}

/* Upload progress badge tooltip */
.upload-progress-badge:hover .upload-tooltip {
  display: block !important;
}

.upload-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.4;
  padding: 0.3rem 0.6rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1070;
}

.lang-info-tip {
  background: #333;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 0.4rem 0.6rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  pointer-events: none;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */