:root {
  --mtii-notice-navy: #14365a;
  --mtii-notice-blue: #2f6fa3;
  --mtii-notice-cyan: #83d1f0;
  --mtii-notice-red: #ff4936;
  --mtii-notice-orange: #ff9f2f;
  --mtii-notice-chartreuse: #c3ff4d;
  --mtii-notice-gold: #ffd36e;
  --mtii-notice-white: #ffffff;
  --mtii-notice-shadow: 0 22px 55px rgba(8, 26, 46, 0.20);
}

.mtii-language-notice-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin: 1.25rem auto 2rem;
  box-shadow: var(--mtii-notice-shadow);
  background:
    radial-gradient(circle at 8% 25%, rgba(255,0,4,0.90), rgba(255,255,255,0) 60%),
    radial-gradient(circle at 82% 18%, rgba(216,111,28,0.45), rgba(255,159,47,0) 22%),
    radial-gradient(circle at 78% 82%, rgba(195,255,77,0.42), rgba(195,255,77,0) 25%),
    linear-gradient(120deg, #124688 20%, #46627B 30%, #4D448D 50%, #3C3967 70%, #92453B 100%);
  color: #fff;
}

.mtii-language-notice-wrap::before,
.mtii-language-notice-wrap::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
}

.mtii-language-notice-wrap::before {
  background:
    linear-gradient(110deg,
      rgba(255,255,255,0.01) 0%,
      rgba(255,255,255,0.02) 22%,
      rgba(255,255,255,0.11) 40%,
      rgba(195,255,77,0.10) 52%,
      rgba(255,159,47,0.08) 70%,
      rgba(255,73,54,0.07) 85%,
      rgba(255,255,255,0.00) 100%);
  transform: translateX(-22%);
  animation: mtiiColorWash 16s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.mtii-language-notice-wrap::after {
  background-image:
    radial-gradient(2px 2px at 12% 26%, rgba(255,255,255,0.95), transparent 80%),
    radial-gradient(2px 2px at 22% 62%, rgba(255,215,110,0.95), transparent 80%),
    radial-gradient(1.5px 1.5px at 38% 34%, rgba(255,255,255,0.90), transparent 80%),
    radial-gradient(2px 2px at 54% 76%, rgba(195,255,77,0.95), transparent 80%),
    radial-gradient(2px 2px at 70% 28%, rgba(255,159,47,0.90), transparent 80%),
    radial-gradient(1.5px 1.5px at 82% 58%, rgba(255,255,255,0.82), transparent 80%),
    radial-gradient(2px 2px at 92% 42%, rgba(255,73,54,0.90), transparent 80%);
  animation: mtiiTwinkle 5.8s ease-in-out infinite;
  opacity: 0.9;
}

.mtii-language-notice-card {
  position: relative;
  z-index: 2;
  padding: 1.2rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
}

.mtii-notice-kicker {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.16);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
}

.mtii-notice-title {
  font-size: 2.1rem;
  line-height: 1.08;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.mtii-notice-lead {
  max-width: 62rem;
  color: rgba(255,255,255,0.93);
  font-size: 1.02rem;
  margin-bottom: 1.1rem;
}

.mtii-notice-link,
.mtii-notice-link:hover,
.mtii-notice-link:focus {
  color: #fff8cf;
  font-weight: 700;
  text-decoration: underline;
}

.mtii-notice-actions .btn {
  border-radius: 999px;
  font-weight: 700;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
  box-shadow: 0 12px 26px rgba(0,0,0,0.14);
}

.mtii-notice-actions .btn-light {
  color: #153657;
}

.mtii-notice-actions .btn-outline-light {
  border-width: 2px;
}

.mtii-notice-pills {
  margin-top: 1.25rem;
}

.mtii-notice-pill {
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  height: 100%;
  padding: .8rem .5rem 0.85rem;
}

.mtii-notice-pill strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
}

.mtii-modal .modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(8,26,46,0.30);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.mtii-modal .modal-header {
  border-bottom: 0;
  background:
    radial-gradient(circle at top right, rgba(255,159,47,0.18), transparent 30%),
    linear-gradient(135deg, rgba(20,54,90,0.10), rgba(131,209,240,0.12));
  padding: 1.2rem 1.4rem 1rem;
}

.mtii-modal .modal-title {
  color: #14365a;
  font-weight: 700;
}

.mtii-modal .modal-body {
  color: #17324d;
  padding: 1rem 1.4rem 1.2rem;
}

.mtii-language-picker {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(20,54,90,0.05), rgba(131,209,240,0.10));
  border: 1px solid rgba(20,54,90,0.08);
  border-radius: 12px;
  padding: 0.9rem;
  margin-bottom: 1rem;
}

.mtii-language-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  grid-gap: 0.55rem;
  margin-top: 0.85rem;
}

.mtii-language-buttons .btn {
  border-radius: 999px;
  font-weight: 700;
  border-width: 2px;
}

.mtii-language-buttons .btn.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #14365a, #2f6fa3);
  box-shadow: 0 10px 22px rgba(20,54,90,0.18);
}

.mtii-alert-card,
.mtii-detail-card {
  border-radius: 12px;
  padding: 1rem 1rem 0.9rem;
  margin-bottom: 1rem;
}

.mtii-alert-card {
  background: linear-gradient(180deg, #fff4f2 0%, #fffdf7 100%);
  border: 1px solid rgba(255,73,54,0.18);
  border-left: 5px solid #ff4936;
}

.mtii-detail-card {
  background: linear-gradient(180deg, rgba(234,246,255,0.70), rgba(255,255,255,0.96));
  border: 1px solid rgba(20,54,90,0.10);
}

.mtii-alert-card h6,
.mtii-detail-card h6 {
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.mtii-alert-card h6 { color: #b12d1b; }
.mtii-detail-card h6 { color: #14365a; }

.mtii-policy-link {
  word-break: break-word;
  font-weight: 500;
}

.mtii-modal .modal-footer {
  border-top: 0;
  padding: 0 1.4rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mtii-modal .modal-footer .btn {
  border-radius: 999px;
  font-weight: 700;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

@keyframes mtiiColorWash {
  0% { transform: translateX(-20%) translateY(-2%) rotate(0deg) scale(1.05); }
  50% { transform: translateX(7%) translateY(1%) rotate(2deg) scale(1.10); }
  100% { transform: translateX(22%) translateY(-1%) rotate(-1deg) scale(1.06); }
}

@keyframes mtiiTwinkle {
  0%, 100% { opacity: 0.65; transform: scale(1) translateY(0); }
  25% { opacity: 0.92; transform: scale(1.08) translateY(-2px); }
  50% { opacity: 0.78; transform: scale(0.98) translateY(1px); }
  75% { opacity: 1; transform: scale(1.05) translateY(-1px); }
}

@media (max-width: 991.98px) {
  .mtii-notice-title { font-size: 1.8rem; }
}

@media (max-width: 767.98px) {
  .mtii-language-notice-card { padding: 1.4rem 1.15rem 1.2rem; }
  .mtii-notice-title { font-size: 1.55rem; }
  .mtii-modal .modal-footer {
    display: block;
  }
  .mtii-modal .modal-footer .btn {
    width: 100%;
    margin-top: 0.8rem;
  }
}