/* styles.css 文件内容 */
@font-face {
  font-family: 'Symbola';
  src:
    url('../fonts/Symbola.woff2') format('woff2'),
      url('../fonts/Symbola.woff') format('woff');         
  unicode-range: U+2E4E, U+204B, U+204C, U+2E3F;
}

.special-character {
  font-family: 'Georgia', 'Times New Roman', 'Symbola', 'Segoe UI Symbol', 'Arial Unicode MS', 'Apple Symbols', 'Helvetica Neue', monospace; /* Fallback fonts */
}

@media (max-width: 600px) {
  body {
      font-size: 14px;
      max-width: max-w-xl;
  }

  #luminaTitle{
    font-size:x-large;
  }

  #searchContainer {
      flex-direction: column;
      padding: 10px;
  }

  #searchInput {
      width: 100%;
      margin: 5px 0;
  }

  #lumina {
      padding: 10px;
  }
}

body {
  font-family: "Arial", "Helvetica Neue", sans-serif;
  color: #333; /* 默认文本颜色 */
  flex-direction: column;
  min-height: 100vh; /* 视口高度 */
  margin: 0; /* 移除默认边距 */
  background-color: rgba(255, 255, 255, 0.3); /* 可选：提高前景内容可读性 */
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/background.jpg"); /* 替换为你的图片路径 */
  opacity: 10%;
  background-size:cover;
  background-position: center;
  /*filter: blur(5px); /* 调整数值以控制模糊程度 */
  z-index: -1;
}

.main-content {
  flex: 1; /* 弹性填充所有剩余空间 */
}

.lumina-logo {
  font-weight: bold;
  background: linear-gradient(var(--angle, 0deg), #FFB627,#FFB627,#FFD166 ,#fcfa71 );
  background-size: 24% 150%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: reflect 3s ease-in-out infinite;
}

/* Tag badge base */
.tag-badge {
  display: inline-block;
  font-size: 0.75rem;
  margin-right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  background-color: #f9fafb;
}

/* Color-specific variants, based on Zotero's "Tag Color" palette */
.tag-color-bittersweet {
  color: #ff6666;
}
.tag-color-carrot-orange {
  color: #ff8c19;
}
.tag-color-grey {
  color: #999999;
}
.tag-color-leefy-green {
  color: #5fb236;
}
.tag-color-teal {
  color: #009980;
}
.tag-color-butterfly-blue {
  color: #2ea8e5;
}
.tag-color-dark-periwinkle{
  color: #576dd9;
}
.tag-color-lavender{
  color: #a28ae5;
}
.tag-color-french-beige{
  color: #a6507b;
}


/* Shelf tag styling */
.shelf-tag {
  font-size: x-large;
  color: #008281;
}

/* Invalid shelf tag */
.shelf-tag-invalid {
  font-size: x-large;
  color: red;
}

/* Result item styling */
.result-item {
  border-bottom: 1px solid #e5e7eb; /* Tailwind's border-gray-200 */
  padding-bottom: 1rem;            /* Tailwind's pb-4 */
}

.result-title {
  font-size: 1.125rem;             /* Tailwind's text-lg */
  font-weight: 500;                /* Tailwind's font-medium */
  white-space: wrap;
  overflow: hidden;
  /*text-overflow: ellipsis;*/
}

.result-meta {
  font-size: 0.875rem;             /* Tailwind's text-sm */
  color: #4b5563;                  /* Tailwind's text-gray-600 */
  white-space: wrap;
  overflow: hidden;
  /*text-overflow: ellipsis;*/
}

.result-tags {
  font-size: 0.875rem;             /* Tailwind's text-sm */
  margin-top: 0.25rem;             /* Tailwind's mt-1 */
  white-space: wrap;
  overflow: hidden;
  /*text-overflow: ellipsis;*/
}

/* 分页按钮样式 */
.pagination-btn {
  padding: 6px 12px;
  margin: 2px;
  background-color: #f0f0f0;
  color: #008281;
}

.pagination-btn:hover {
  background-color: #d0d0d0;
}

.pagination-btn:disabled {
  color:#999999;
  background-color: #f8f8f8;
}

/*.pagination-btn:active {
  background-color: #007071; 
  color:#f0f0f0;
}*/

.pagination-btn.highlighted {
  background-color: #007071; /* 深色背景 */
  color: #ffffff; /* 白色文字，增加对比 */
  font-weight: bold; /* 加粗文字 */
}

/*.pagination-ellipsis {
  padding: 6px 12px;
  color: white;
}*/

.pagination-jump-container {
  display: inline-block;
  margin-left: 1rem;
}

.pagination-jump-input {
  width: 4rem;
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  text-align: center;
}

/* 自定义 <mark> 标签的样式 */
mark {
  background-color: #ff0; /* 背景颜色，黄色 */
  color: black; /* 文本颜色 */
}

/* 更柔和的颜色示例 */
mark.soft-highlight {
  background-color: #ffd779; /* lightbulb emoji color? */
}

/* 更深色的背景示例 */
mark.deep-highlight {
  background-color: #d3d3aa; /* 深黄色 */
}

.ellipsis {
  white-space: nowrap; /* 确保内容不换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  /*text-overflow: ellipsis;*/ /* 超出内容显示省略号 */
  cursor: pointer; /* 鼠标悬停时显示手型光标，表明可以交互 */
}

/* 页面条目数量下拉框的样式 */
#pageSize {
  display: true; /* 默认隐藏，搜索后显示 */
}

/* 搜索动画样式（选择旋转） */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mark {
  background: #fffacd;
}

/* 搜索容器背景色 */
#searchContainer {
  background-color: #f0f0f0; /* 浅灰色背景 */
}

#clearCacheBtn {
  padding: 6px 12px;
  background-color: #b30004; /* 设定新的背景颜色 */
  color: white;
  border-radius: 4px;
  transition: background-color 1s ease; /* 平滑背景颜色变化 */
  border: none;
  cursor: pointer;
  opacity: 1;
}

#clearCacheBtn:hover {
  background-color: #800003; /* 悬停时的背景颜色稍暗一些 */
}

#searchBtn {
  padding: 6px 12px;
  background-color: #008281; /* 设定新的背景颜色 */
  color: white;
  border-radius: 4px;
  transition: background-color 0.3s ease; /* 平滑背景颜色变化 */
  border: none;
  cursor: pointer;
  opacity: 1;
}

#searchBtn:hover {
  background-color: #007071; /* 悬停时的背景颜色稍暗一些 */
}

#searchBtn:disabled {
  opacity: 0.5;
  cursor: default;
}

.pulser {
  display: inline-block;
  padding-top: 10px; /* 留出顶部空间 */
  color: #008281;
  animation: pulse 1s infinite ease-in-out;
}

.pulser::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #008281;
}

.pulser-error {
  display: inline-block;
  padding-top: 10px; /* 留出顶部空间 */
  color: #b30004; /* 文本颜色 */
  animation: pulse 0.75s infinite ease-in-out;
}

.pulser-error::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #b30004;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.5);
  }
}

@keyframes reflect {
  0%, 100% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
}

#loading {
  min-height: 20px; /* 根据实际内容调整这个高度 */
}

.skeleton-box {
  height: 20px;
  background-color: #ddd;
  margin-top: 10px;
  animation: skeleton-loading 1.5s infinite linear;
}

@keyframes skeleton-loading {
  0% {
    background-color: #ddd;
  }
  50% {
    background-color: #ccc;
  }
  100% {
    background-color: #ddd;
  }
}

#resultsContainer {
  position: relative;
  min-width: 320px; /* Adjust the width as necessary */
}

/* Fix the position of the dropdown */
#pageSize {
  position: relative;
  right: 0; /* Adjust alignment as needed */
  top: 0; /* Adjust to align with other elements */
}

/* kanged from ereed.org */
hr.padded {
  padding-top: 20px;
  border-bottom: 1px solid #4a4a4a
}

.row {
  max-width: 62.1875rem;
  margin-left: auto;
  margin-right: auto
}

footer {
  margin: auto;
  color: #bdc3c7;
  font-size: 14px;
  font-family: HelveticaNeue, sans-serif;
  transition: .3s
}

footer.open {
  -webkit-transform: translateX(300px);
  transform: translateX(300px)
}

footer .social-icon {
  display: inline-block;
  width: 49%
}

@media screen and (min-width:767px) {
  footer .social-icon {
      width: 100%
  }
}

.active-filters footer .active-filter-clear, .filter .filter-content-wrapper footer .clear-filter, footer .active-filters .active-filter-clear, footer .filter .filter-content-wrapper .clear-filter, footer a {
  text-decoration: underline;
  color: #fefefe;
  transition: .3s
}

.active-filters footer .active-filter-clear:hover, .filter .filter-content-wrapper footer .clear-filter:hover, footer .active-filters .active-filter-clear:hover, footer .filter .filter-content-wrapper .clear-filter:hover, footer a:hover {
  color: #c9ced2
}

.active-filters footer .footer-social.active-filter-clear, .filter .filter-content-wrapper footer .footer-social.clear-filter, footer .active-filters .footer-social.active-filter-clear, footer .filter .filter-content-wrapper .footer-social.clear-filter, footer a.footer-social {
  margin-bottom: 10px;
  display: inline-block;
  width: 49%;
  vertical-align: middle;
  margin-left: 5px
}

@media screen and (min-width:767px) {
  .active-filters footer .footer-social.active-filter-clear, .filter .filter-content-wrapper footer .footer-social.clear-filter, footer .active-filters .footer-social.active-filter-clear, footer .filter .filter-content-wrapper .footer-social.clear-filter, footer a.footer-social {
      width: auto
  }
}

.active-filters footer .footer-social.active-filter-clear object, .filter .filter-content-wrapper footer .footer-social.clear-filter object, footer .active-filters .footer-social.active-filter-clear object, footer .filter .filter-content-wrapper .footer-social.clear-filter object, footer a.footer-social object {
  width: 19px
}

footer p {
  color: #bdc3c7
}

footer .footer-content {
  background: #070707;
  width: 100%;
  padding: 20px 0
}

@media screen and (min-width:767px) {
  footer .footer-content {
      padding: 20px 15px
  }
}

footer .footer-content p {
  margin-bottom: 10px
}

footer .footer-heading {
  font-weight: 700;
  color: #fafafa;
  display: block;
  padding-bottom: 10px;
  font-size: 12px
}

footer .footer-logos {
  background: #fefefe;
  padding: 20px 20%;
  position: relative
}

@media screen and (min-width:767px) {
  footer .footer-logos {
      padding: 20px 0
  }
}

footer .footer-logos .row {
  max-width: 900px
}

footer .footer-logos .row.last-logos .logo img {
  width: 412px;
  max-width: 100%
}

footer .footer-logos .logo {
  position: relative;
  padding-bottom: 20px
}

@media screen and (min-width:767px) {
  footer .footer-logos .logo {
      padding-bottom: 0;
      padding-top: 20px
  }
}

footer .footer-logos .logo img {
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  max-height: 65px
}

@media screen and (min-width:767px) {
  footer .footer-logos .logo img {
      -webkit-transform: translateZ(0) translateY(-50%);
      transform: translateZ(0) translateY(-50%);
      -ms-transform: translateY(-50%);
      margin-top: 0;
      position: relative;
      top: 50%
  }
}

footer .footer-logos .logo.last {
  padding-bottom: 0
}

footer .footer-bottom {
  padding: 10px 45px
}

@media screen and (min-width:767px) {
  footer .footer-bottom {
      padding: 10px 15px
  }
}

footer .footer-bottom .copyright {
  font-size: 12px;
  color: #4a4a4a
}