/* 电影列表的标题和内容位置布局 */
.table th, .table td {
  text-align: center;
}

/* 主要内容距离顶部距离 */
.contentTop {
  margin-top: 80px; /* 为固定导航栏留出空间 */
}

/* 评论区和视频的间距 */
.panelTop {
  margin-top: 30px;
}

/* 导航栏样式（Bootstrap 4 调整） */
.navbar.fixed-top {
  z-index: 1030; /* 与 Bootstrap 4 一致 */
}

/* 确保视频容器在小屏幕下不会被压缩 */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 比例的视频 */
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title-rating-container {
  background-color: #e3f2fd; /* 统一背景色 */
  border-radius: 8px;
  padding: 0.5rem;
}

/* 在style.css中添加 */
.bg-blue-50 {
 /* background-color: #e3f2fd; /* 浅蓝色 */
 background-color: #e3f2fd;
}

.bg-white-50  {
  background-color:  #f0fdf4; /* 浅蓝色 */
}



/* 小屏幕下，确保电影介绍部分正常显示 */
@media (max-width: 767px) {
  .movie-info-container {
    margin-top: 20px;
  }
}

/* 防止微信浏览器下的缩放问题 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  -webkit-overflow-scrolling: touch;
}

/* 导航栏高度调整 */
.navbar {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  font-size: 0.9rem;
}

.navbar-brand {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto;
}

.navbar-toggler {
  padding: 0.2rem 0.5rem;
  font-size: 0.9rem;
}

/* 搜索框整体尺寸调整 */
.navbar .form-inline {
  max-width: 200px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/* 输入框和按钮样式调整 */
.navbar .form-control,
.navbar .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.2;
}

/* 按钮单独微调 */
.navbar .btn {
  padding: 0.25rem 0.75rem;
}

/* 确保搜索框和按钮在所有屏幕下同行 */
.navbar .form-inline {
  flex-wrap: nowrap !important;
}

/* 调整输入框和按钮间距 */
.navbar .form-control {
  margin-right: 8px !important;
}





/* 小屏幕下让搜索框占满宽度 */
@media (max-width: 992px) {
  .navbar .form-control {
    width: 100% !important;
  }
}

/* 电影卡片悬停效果 */
.card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 确保分页控件在小屏幕下正常显示 */
.pagination {
  flex-wrap: wrap;
}

.page-item {
  margin-bottom: 5px;
}

/* 新增：优化内容容器布局 */
.container.content-wrapper {
  margin-bottom: 30px; /* 减少底部空白 */
}

/* 修复：移除错误的 flex 布局 */
.contentTop {
  display: block; /* 恢复默认布局 */
}

/* 新增：小屏幕优化 */
@media (max-width: 768px) {
  .contentTop {
    margin-top: 70px; /* 小屏幕上稍微减少顶部间距 */
  }
}