/* News Modal Overlay */
.news-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-modal-overlay * {
  user-select: text;
}

/* News Modal Container */
.news-modal {
  width: 60%;
  height: 80%;
  background: #fff;
  border-radius: 0.08rem;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* News Modal Header */
.news-modal-header {
  padding: 0.12rem 0.12rem 0.12rem 0.24rem;
  border-bottom: 1px solid #1b6bd2;
  display: flex;
  justify-content: flex-end;
}

.news-modal-title {
  flex-grow: 1;
}

.news-modal-title h1 {
  color: #1b69d4;
  font-size: 0.2rem;
  font-weight: bolder;
}

.news-modal-date {
  color: #1b69d3;
  font-size: 0.12rem;
}

.news-modal-close {
  background: none;
  border: none;
  font-size: 0.38rem;
  color: #1b69d4;
  cursor: pointer;
  width: 0.4rem;
  height: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.news-modal-close:hover {
  background: #f5f5f5;
  color: #333;
}

.news-modal-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 0.24rem);
  height: 0.8rem;
  background-color: #fff;
  mask-image: linear-gradient(to top, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%)
}

/* News Modal Content */
.news-modal-content {
  flex: 1;
  min-height: 0;
  padding: 0 0.12rem;
  width: calc(100% - 0.24rem);
  margin: 0.1rem 0.12rem;
  /* margin-bottom: 0.1rem; */
  overflow-y: auto;
  color: #1c69d4;
  line-height: 1.5;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 0.12rem;
  box-sizing: border-box;
  word-wrap: break-word;
  scrollbar-color: #1b69d4 rgba(27, 106, 209, 0.1);
}

/* Quill Editor Content Styles */
.news-modal-body {
  box-sizing: border-box;
  padding-bottom: 0.6rem;
}

.news-modal-body > * {
  cursor: text;
}

/* Loading Styles */
.news-modal-body.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #1b69d4;
}

.news-loading-container {
  height: 80%;
    display: flex ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.news-loading-spinner {
  width: 0.4rem;
  height: 0.4rem;
  border: 3px solid rgba(27, 105, 212, 0.2);
  border-top: 3px solid #1b69d4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error Message Styles */
.news-error-message {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e74c3c;
  font-size: 0.14rem;
  text-align: center;
  padding: 20px;
  background: #fdf2f2;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin: 20px;
}

/* Article Structure Styles */
.news-modal-body .news-article {
  width: 100%;
}

.news-modal-body .article-content {
  line-height: 1.6;
}

/* Reset and Base Styles for Content Elements */
.news-modal-body p,
.news-modal-body ol,
.news-modal-body ul,
.news-modal-body pre,
.news-modal-body blockquote,
.news-modal-body h1,
.news-modal-body h2,
.news-modal-body h3,
.news-modal-body h4,
.news-modal-body h5,
.news-modal-body h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  white-space: pre-wrap;
  margin: 0 0 0.02rem 0;
}

.news-modal-body h1 {
  font-size: 2em;
}

.news-modal-body h2 {
  font-size: 1.5em;
}

.news-modal-body h3 {
  font-size: 1.17em;
}

.news-modal-body h4 {
  font-size: 1em;
}

.news-modal-body h5 {
  font-size: 0.83em;
}

.news-modal-body h6 {
  font-size: 0.67em;
}

.news-modal-body p {
  margin: 0;
  padding: 0;
}

.news-modal-body a {
  text-decoration: underline;
  color: #06c;
}

.news-modal-body blockquote {
  border-left: 4px solid #005fcd;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}

.news-modal-body code,
.news-modal-body pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}

.news-modal-body pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}

.news-modal-body code {
  font-size: 85%;
  padding: 2px 4px;
}

.news-modal-body pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}

.news-modal-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.04rem;
  margin: 0.08rem 0;
}

/* Lists */
.news-modal-body ol,
.news-modal-body ul {
  padding-left: 1.5em;
}

.news-modal-body ol > li,
.news-modal-body ul > li {
  list-style-type: none;
}

.news-modal-body ul > li::before {
  content: "\2022";
}

.news-modal-body li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}

.news-modal-body li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}

.news-modal-body ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}

.news-modal-body ol li:before {
  content: counter(list-0, decimal) ". ";
}

/* Video */
.news-modal-body .ql-video {
  display: block;
  max-width: 100%;
}

.news-modal-body .ql-video.ql-align-center {
  margin: 0 auto;
}

.news-modal-body .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}

/* Mobile Responsive Styles */
@media screen and (orientation: portrait) {
  html {
    font-size: 18.8125vw;
  }

  .news-modal {
    width: 90%;
    height: 85%;
    border-radius: 0.04rem;
  }

  .news-modal-header {
    padding: 0.14rem 0.24rem;
  }

  .news-modal-title {
    font-size: 0.18rem;
  }
  .news-modal-title h2 {
    font-size: 0.24rem;
  }

  .news-modal-date {
    font-size: 0.16rem;
  }

  .news-modal-close {
    font-size: 0.36rem;
    width: 0.36rem;
    height: 0.36rem;
  }

  .news-modal-content {
    padding: 0.2rem;
    font-size: 0.16rem;
  }

  /* Mobile Article Structure */

  .news-modal-body .article-content {
    line-height: 1.5;
  }

  /* Mobile Content Element Spacing */
  .news-modal-body .article-content p,
  .news-modal-body .article-content h1,
  .news-modal-body .article-content h2,
  .news-modal-body .article-content h3,
  .news-modal-body .article-content h4,
  .news-modal-body .article-content h5,
  .news-modal-body .article-content h6,
  .news-modal-body .article-content ul,
  .news-modal-body .article-content ol,
  .news-modal-body .article-content blockquote,
  .news-modal-body .article-content pre {
    margin-bottom: 0.8em;
  }

  .news-modal-body h1 {
    font-size: 2em;
  }

  .news-modal-body h2 {
    font-size: 1.5em;
  }

  .news-modal-body h3 {
    font-size: 1.17em;
  }

  .news-modal-body h4 {
    font-size: 1em;
  }

  .news-modal-body h5 {
    font-size: 0.83em;
  }

  .news-modal-body h6 {
    font-size: 0.67em;
  }

  .news-modal-body p {
    margin: 0;
    padding: 0;
  }

  .news-modal-body img {
    border-radius: 0.03rem;
    margin: 0.06rem 0;
  }

  .news-modal-body blockquote {
    border-left: 0.04rem solid #ccc;
    margin-bottom: 0.05rem;
    margin-top: 0.05rem;
    padding-left: 0.16rem;
  }

  .news-modal-body pre {
    margin-bottom: 0.05rem;
    margin-top: 0.05rem;
    padding: 0.05rem 0.1rem;
  }

  .news-modal-body code {
    padding: 0.02rem 0.04rem;
  }
}

.news-modal-ar {
  direction: rtl;
}