/*
  Newsletter subscribe component (shared).

  Scope:
  - Only shared inner styles (typography + input/button chrome).
  - Page/layout-specific spacing (section padding, background images, positioning)
    should remain in page CSS.

  Sources (initial extraction):
  - static/css/news-blog.css
  - static/css/investment.css
  - static/css/market-dashboard.css
  - static/css/advisor.css
  - static/css/encyclopedia.css
  - static/css/blog-detail.css
  - static/css/blog-detail-mobile.css (partial)
*/

/* Body copy */
.news-letter-subscribe p {
  font-size: var(--font-size-16);
  font-weight: 400;
  color: #667085;
  margin: 1.5rem 0rem 2rem;
  font-family: manrope;
}

/* Form controls */
.news-letter-subscribe .form-control {
  height: 52px;
  border-radius: 14px;
}

/* Ensure the input group renders above decorative imagery where present */
.news-letter-subscribe .input-group {
  z-index: 10;
}

/* Right-side submit/button styling */
.news-letter-subscribe .input-group-text {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 14px;
  border-top-right-radius: 14px;
  font-family: manrope;
}

.news-letter-subscribe .input-group-append {
  background: #1D2939;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 14px;
  border-top-right-radius: 14px;
  border: 1px solid #1d2939;
}

/* Text treatment for the input-group "button" */
.news-letter-subscribe .input-group-text {
  font-size: var(--font-size-16);
  font-weight: 600;
  color: #FFFFFF;
  background: transparent;
  border: 1px solid #1d2939;
  padding: 0 2rem;
}


/* Mail List Modal */
#MailListModal {
  background-color: rgba(255, 255, 255, 0.745);
}
#MailListModal .modal-content {
  border-radius: 6px;
}
#MailListModal .modal-body {
  padding: 2rem 1rem;
}
#addMailDiv h3 {
  font-weight: 700!important;
  color: var(--darkgrey);
  font-size: var(--font-size-22);
}
#successDiv, #successDiv .row, #successDiv .col-md {
  height: 100%;
}
#successDiv .col-md {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}