@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/* Main Modal Overlay */
.mia-vocab-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(4, 9, 44, 0.82) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 2147483647 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', Roboto, sans-serif !important;
  box-sizing: border-box !important;
}

/* Font Awesome Protection (Prevents Poppins from overriding icon font) */
.mia-vocab-overlay i.fa,
.mia-vocab-overlay i.fas,
.mia-vocab-overlay i.fa-solid {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.mia-vocab-overlay i.fab,
.mia-vocab-overlay i.fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", FontAwesome !important;
  font-weight: 400 !important;
  font-style: normal !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.mia-vocab-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Modal Card Box - Wide Horizontal 2-Column */
.mia-vocab-modal {
  background: #ffffff !important;
  width: 100% !important;
  max-width: 900px !important; /* Fits perfectly on laptops & desktops without scrolling */
  max-height: 92vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(2, 1, 60, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  position: relative !important;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box !important;
}

.mia-vocab-overlay.active .mia-vocab-modal {
  transform: translateY(0) scale(1) !important;
}

.mia-vocab-modal::-webkit-scrollbar {
  width: 6px;
}
.mia-vocab-modal::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

/* Close Button */
.mia-vocab-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #475569 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}
.mia-vocab-close:hover {
  background: #e02424 !important;
  color: #ffffff !important;
  border-color: #e02424 !important;
  transform: rotate(90deg) !important;
}

/* 2-Column Split Layout */
.mia-modal-split-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  min-height: 520px !important;
  box-sizing: border-box !important;
}

/* LEFT COLUMN STYLING */
.mia-split-left {
  flex: 0 0 46% !important;
  width: 46% !important;
  max-width: 46% !important;
  background: linear-gradient(180deg, #edf6ff 0%, #f7fbff 60%, #ffffff 100%) !important;
  padding: 24px 22px !important;
  border-right: 1px solid #edf2f7 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.mia-vocab-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.mia-vocab-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mia-brand-logo {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.mia-brand-text {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #020192 !important;
}
.mia-vocab-tagline {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
  font-style: italic !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}
.mia-german-flag-strip {
  width: 42px !important;
  height: 3px !important;
  margin-top: 3px !important;
  background: linear-gradient(to right, #000 33.3%, #DD0000 33.3%, #DD0000 66.6%, #FFCC00 66.6%) !important;
  border-radius: 2px !important;
}

.mia-hero-title {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #020192 !important;
  line-height: 1.15 !important;
  margin: 0 0 8px 0 !important;
}
.mia-title-accent {
  color: #0284c7 !important;
}
.mia-sparkle-icon {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif !important;
  font-size: 1.1rem !important;
  vertical-align: middle !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

.mia-smart-companion-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  padding: 5px 10px !important;
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #0369a1 !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}
.mia-wa-icon-green {
  color: #25D366 !important;
  font-size: 1.05rem !important;
}

.mia-hero-desc {
  font-size: 0.74rem !important;
  color: #475569 !important;
  line-height: 1.4 !important;
  margin: 0 0 10px 0 !important;
}

/* REAL MOBILE MOCKUP IMAGE */
.mia-mockup-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 8px 0 12px 0 !important;
}
.mia-real-mockup-img {
  width: 100% !important;
  max-width: 190px !important; /* Compact high-res phone card */
  height: auto !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px rgba(2, 1, 60, 0.16) !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}
.mia-real-mockup-img:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

/* 6 Feature Badges Row */
.mia-vocab-features-row {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 4px !important;
  text-align: center !important;
  padding-top: 8px !important;
  border-top: 1px solid #e2e8f0 !important;
}
.mia-feat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
}
.mia-feat-circle {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
}
.circle-blue { background: #dbeafe !important; color: #2563eb !important; }
.circle-green { background: #dcfce7 !important; color: #16a34a !important; }
.circle-orange { background: #ffedd5 !important; color: #ea580c !important; }
.circle-red { background: #fee2e2 !important; color: #dc2626 !important; }
.circle-purple { background: #f3e8ff !important; color: #9333ea !important; }
.circle-cyan { background: #cffafe !important; color: #0891b2 !important; }

.mia-feat-item span {
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.15 !important;
}

/* RIGHT COLUMN: FORM STYLING */
.mia-split-right {
  flex: 0 0 54% !important;
  width: 54% !important;
  max-width: 54% !important;
  padding: 24px 26px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.mia-badge-gift {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #e6f9f0 !important;
  border: 1px solid #bbf7d0 !important;
  color: #047857 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  margin-bottom: 6px !important;
}

.mia-form-title {
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  color: #020192 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
}

.mia-form-subtitle {
  font-size: 0.76rem !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  margin: 0 0 12px 0 !important;
}
.mia-form-subtitle strong {
  color: #0284c7 !important;
}

/* Inputs */
.mia-input-group {
  margin-bottom: 9px !important;
}
.mia-input-label {
  display: block !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 3px !important;
}
.mia-req {
  color: #e11d48 !important;
}

.mia-field-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}
.mia-field-wrap:focus-within {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.14) !important;
}

.mia-field-icon {
  width: 34px !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.84rem !important;
  flex-shrink: 0 !important;
}

.mia-input-control {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 8px 12px 8px 0 !important;
  font-size: 0.82rem !important;
  font-family: inherit !important;
  color: #0f172a !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.mia-input-control::placeholder {
  color: #94a3b8 !important;
}

/* Phone input with Flag */
.mia-phone-wrap .mia-field-icon {
  width: 32px !important;
}
.mia-flag-pill {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 6px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  margin-right: 6px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  flex-shrink: 0 !important;
}
.mia-in-flag {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

/* 2-Column Row for Level + Goal */
.mia-row-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.mia-select-control {
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 28px !important;
}
.mia-select-arrow {
  position: absolute !important;
  right: 10px !important;
  pointer-events: none !important;
  color: #64748b !important;
  font-size: 0.7rem !important;
}

/* Submit CTA Button */
.mia-btn-submit-whatsapp {
  width: 100% !important;
  margin-top: 8px !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 11px 18px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.35) !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}
.mia-btn-submit-whatsapp:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px rgba(5, 150, 105, 0.45) !important;
}
.mia-btn-submit-whatsapp i.fa-whatsapp {
  font-size: 1.15rem !important;
}
.mia-arrow-icon {
  font-size: 0.8rem !important;
  transition: transform 0.2s ease !important;
}
.mia-btn-submit-whatsapp:hover .mia-arrow-icon {
  transform: translateX(4px) !important;
}

/* 3 Trust Badges */
.mia-trust-badges-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
}
.mia-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.mia-trust-item i {
  font-size: 1rem !important;
}
.mia-badge-green { color: #059669 !important; }
.mia-badge-dark { color: #1e293b !important; }
.mia-badge-emerald { color: #0284c7 !important; }

.mia-trust-item strong {
  display: block !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
}
.mia-trust-item span {
  display: block !important;
  font-size: 0.58rem !important;
  color: #64748b !important;
  line-height: 1.15 !important;
}

/* Consent Box */
.mia-consent-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: 8px !important;
  background: #f8fafc !important;
  border: 1px dashed #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}
.mia-consent-box i {
  color: #64748b !important;
  font-size: 0.65rem !important;
  margin-top: 2px !important;
}
.mia-consent-box p {
  font-size: 0.6rem !important;
  color: #64748b !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

/* RESPONSIVE MOBILE STACKING */
@media (max-width: 650px) {
  .mia-vocab-modal {
    max-width: 480px !important;
    max-height: 95vh !important;
    border-radius: 20px !important;
  }
  .mia-modal-split-layout {
    flex-direction: column !important;
  }
  .mia-split-left,
  .mia-split-right {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .mia-split-left {
    padding: 18px 16px 14px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid #edf2f7 !important;
  }
  .mia-mockup-wrap {
    display: flex !important;
    justify-content: center !important;
    margin: 6px 0 8px 0 !important;
  }
  .mia-real-mockup-img {
    max-width: 110px !important;
    border-radius: 10px !important;
  }
  .mia-vocab-features-row {
    grid-template-columns: repeat(3, 1fr) !important;
    row-gap: 6px !important;
  }
  .mia-split-right {
    padding: 16px 16px !important;
  }
  .mia-row-2col {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}