/* ============================================================
   WEDDY - Front Language Switcher & LTR Styles
   Loaded directly as a static asset to ensure 100% reliability
   ============================================================ */

/* LTR Alignment Adjustments */
html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .text-right {
  text-align: left;
}

html[dir="ltr"] .btn i.fa-arrow-left::before,
html[dir="ltr"] .link-arrow i.fa-arrow-left::before,
html[dir="ltr"] .article-read-more i.fa-arrow-left::before {
  content: "\f061"; /* fa-arrow-right */
}

/* ============================================================
   Language Dropdown Menu (Desktop)
   ============================================================ */
.lang-dropdown {
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.lang-dropdown-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  line-height: 1.4 !important;
}

.lang-dropdown-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.lang-dropdown.is-open .lang-dropdown-btn {
  border-color: #23ABD5 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(35, 171, 213, 0.15) !important;
  color: #23ABD5 !important;
}

.lang-dropdown-btn .lang-flag {
  font-size: 15px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.lang-dropdown-btn .lang-current-label {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.lang-dropdown-btn .lang-chevron {
  font-size: 10px !important;
  color: #94a3b8 !important;
  margin-inline-start: 2px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
}

.lang-dropdown.is-open .lang-dropdown-btn .lang-chevron {
  transform: rotate(180deg) !important;
  color: #23ABD5 !important;
}

/* Floating Glassmorphic Menu */
.lang-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  inset-inline-end: 0 !important;
  min-width: 195px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.05) !important;
  padding: 6px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) scale(0.97) !important;
  transform-origin: top right !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.2s !important;
  z-index: 1050 !important;
}

html[dir="ltr"] .lang-dropdown-menu {
  transform-origin: top left !important;
}

.lang-dropdown.is-open .lang-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

/* Desktop Hover Support */
@media (hover: hover) and (pointer: fine) {
  .lang-dropdown:hover .lang-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
  }
  .lang-dropdown:hover .lang-dropdown-btn {
    border-color: #cbd5e1 !important;
  }
  .lang-dropdown:hover .lang-chevron {
    transform: rotate(180deg) !important;
    color: #23ABD5 !important;
  }
}

/* Menu Items */
.lang-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #334155 !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}

.lang-dropdown-item:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.lang-dropdown-item.is-active {
  background: rgba(35, 171, 213, 0.08) !important;
  color: #23ABD5 !important;
}

.lang-item-flag-wrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.lang-dropdown-item:hover .lang-item-flag-wrap {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  transform: scale(1.05) !important;
}

.lang-dropdown-item.is-active .lang-item-flag-wrap {
  background: #ffffff !important;
  border-color: rgba(35, 171, 213, 0.3) !important;
  box-shadow: 0 2px 6px rgba(35, 171, 213, 0.15) !important;
}

.lang-item-text {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  text-align: start !important;
}

.lang-item-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #1e293b !important;
}

.lang-dropdown-item.is-active .lang-item-name {
  color: #23ABD5 !important;
  font-weight: 700 !important;
}

.lang-item-sub {
  font-size: 11px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.lang-dropdown-item.is-active .lang-item-sub {
  color: #0284c7 !important;
}

.lang-check-icon {
  font-size: 12px !important;
  color: #23ABD5 !important;
  margin-inline-start: 6px !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   Mobile Language Dropdown
   ============================================================ */
.mobile-lang-dropdown {
  position: relative !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.mobile-lang-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.mobile-lang-btn:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.mobile-lang-dropdown.is-open .mobile-lang-btn {
  border-color: #23ABD5 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(35, 171, 213, 0.15) !important;
}

.mobile-lang-current {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.mobile-lang-btn .lang-chevron {
  font-size: 11px !important;
  color: #94a3b8 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
}

.mobile-lang-dropdown.is-open .mobile-lang-btn .lang-chevron {
  transform: rotate(180deg) !important;
  color: #23ABD5 !important;
}

.mobile-lang-menu {
  display: none !important;
  margin-top: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.mobile-lang-dropdown.is-open .mobile-lang-menu {
  display: block !important;
  animation: mobileDropdownSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes mobileDropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-lang-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}

.mobile-lang-item:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.mobile-lang-item.is-active {
  background: rgba(35, 171, 213, 0.08) !important;
  color: #23ABD5 !important;
}

.mobile-lang-item-content {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* LTR Alignment Adjustments */
html[dir="ltr"] .faq-question {
  text-align: left !important;
}

html[dir="ltr"] .features-preview-item,
html[dir="ltr"] .stat-card,
html[dir="ltr"] .feature-card,
html[dir="ltr"] .testimonial-card,
html[dir="ltr"] .pricing-card,
html[dir="ltr"] .contact-info-card,
html[dir="ltr"] .guide-card,
html[dir="ltr"] .footer {
  text-align: left !important;
}

html[dir="ltr"] .footer-links a,
html[dir="ltr"] .footer-brand p {
  text-align: left !important;
}

html[dir="ltr"] .timeline-step,
html[dir="ltr"] .timeline-step-content {
  text-align: left !important;
}
