/* 动态页面（博客/商城/登录/管理页）补充样式，与 Elizium 模板风格保持一致 */

/* 表单（allauth 默认渲染的 input 无 bootstrap class） */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="number"] {
  display: block;
  width: 100%;
  padding: .65rem .9rem;
  margin: .35rem 0 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
}
.auth-card h1 + p { margin-top: 14px; margin-bottom: 22px; }
.auth-card label { font-weight: 500; }
.auth-card button[type="submit"], .auth-card .btn-primary {
  background: #111;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: .7rem 1.6rem;
  cursor: pointer;
  margin-top: 16px;
}
.auth-card .helptext { font-size: 13px; color: #888; display: block; }
.auth-card ul.errorlist { color: #c0392b; padding-left: 1rem; }
.auth-card a { text-decoration: underline; }

/* 社交登录按钮 */
.socialaccount_providers { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.socialaccount_providers a {
  display: inline-block;
  padding: .55rem 1.2rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #333;
}

/* 商品卡片 */
.product-card { border: 1px solid #eee; border-radius: 10px; overflow: hidden; transition: box-shadow .2s; height: 100%; display: flex; flex-direction: column; }
.product-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.product-card .thumb { aspect-ratio: 1/1; background: #f6f6f6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-card .thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
/* 商品详情主图固定比例 */
.product-detail-img { aspect-ratio: 1/1; overflow: hidden; border-radius: 12px; background: #f6f6f6; }
.product-detail-img img { width: 100% !important; height: 100% !important; object-fit: cover; }
.product-card .body { padding: 1rem 1.2rem 1.4rem; flex: 1; }
.price { font-weight: 700; font-size: 1.15rem; }
.price-compare { color: #999; text-decoration: line-through; margin-left: .5rem; font-weight: 400; font-size: .95rem; }

/* 博客卡片：统一封面尺寸 + 工具栏按钮对齐 */
.blog-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
}
.blog-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.blog-cover .content.top {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 12px;
  z-index: 2;
}
.blog-card h5 { margin-bottom: .4rem; }
/* 文章列表缩略图右上角阅读量 */
.blog-cover .blog-view-count {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 12px; line-height: 1; color: #fff;
  background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.blog-cover .blog-view-count i { font-size: 13px; }

/* 工具栏：搜索框与按钮强制等高、垂直居中、不换行 */
.blog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* form 用 contents：让里面的输入框/按钮直接成为工具栏的同级 flex 项，彻底对齐 */
.blog-toolbar form { display: contents; }
.blog-toolbar .form-control,
.blog-toolbar .button {
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

/* 设置页行内表单：输入框与按钮等高对齐 */
.settings-inline .form-control,
.settings-inline .button {
  height: 46px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* 表格操作列：编辑/删除等按钮垂直居中对齐、间距一致 */
.table td .button,
.table td form {
  vertical-align: middle !important;
  margin: 0 2px !important;
}
.table td form {
  display: inline-block !important;
}
.table td .button {
  display: inline-flex !important;
  align-items: center;
}

/* 文件选择框由 site-public.js 替换为自定义选择器（见 enhanceFileInputs） */

/* 媒体库：操作按钮不换行、等分对齐 */
.media-actions { display: flex; gap: 6px; }
.media-actions > .button,
.media-actions > form { flex: 1; }
.media-actions form { display: flex; margin: 0; }
.media-actions .button {
  width: 100%;
  white-space: nowrap !important;
  padding: 6px 4px !important;
  justify-content: center;
  display: inline-flex;
  align-items: center;
}

/* 富文本正文 */
.article-content img { max-width: 100%; height: auto; border-radius: 8px; }
.article-content { line-height: 1.9; font-size: 1.05rem; }
.article-content p { margin-bottom: 1.1rem; }

/* ===== 文章详情页 ===== */
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  color: #888; font-size: 14px;
}
.post-meta a { color: #888; }
.post-meta a:hover { color: #3478f6; }
.post-meta i { margin-right: 4px; }

/* 侧栏：最新文章小卡片 */
.blog-side-title { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #1c1c1e; }
.side-post {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #eee; text-decoration: none;
}
.side-post:last-child { border-bottom: 0; }
.side-thumb {
  width: 84px; height: 60px; flex: none; border-radius: 6px; overflow: hidden;
  background: #f1f1f1; display: flex; align-items: center; justify-content: center; color: #bbb;
}
.side-thumb img { width: 100%; height: 100%; object-fit: cover; }
.side-info { display: flex; flex-direction: column; min-width: 0; }
.side-t {
  color: #1c1c1e; font-weight: 500; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.side-post:hover .side-t { color: #3478f6; }
.side-d { color: #999; font-size: 12px; margin-top: 4px; }

/* 评论区 */
.comment-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid #eee; }
.comment-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: #1c1c1e; color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 18px;
}
.comment-body { flex: 1; }
.comment-head { display: flex; align-items: center; gap: 10px; }
.article-content pre { background: #f5f5f5; border-radius: 8px; padding: 1rem; overflow-x: auto; }

/* 表格 */
.table-cart img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }

/* TinyMCE 工具栏紧凑化：配合 toolbar_mode:wrap，两行尽量完整放下全部按钮 */
.tox .tox-toolbar__group { padding: 0 5px !important; }
.tox .tox-tbtn { margin: 1px 0 !important; }
.tox .tox-tbtn--select .tox-tbtn__select-label { max-width: 5.2em !important; }

/* ---------- 拖拽式菜单构建器 ---------- */
.mn-pool { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-chip-wrap {
  display: inline-flex; align-items: stretch;
  border: 1px solid #d4d6da; background: #f7f8fa; border-radius: 16px; overflow: hidden;
}
.mn-chip-wrap:hover { border-color: #3478f6; }
.mn-chip {
  border: 0; background: transparent; color: #1c1c1e;
  padding: 4px 10px; font-size: 13px; cursor: pointer;
}
.mn-chip:hover { color: #3478f6; }
.mn-chip-wrap { cursor: grab; }
.mn-preview {
  display: inline-flex; align-items: center; padding: 0 9px;
  color: #6b7280; border-left: 1px solid #e0e2e6; font-size: 12px; text-decoration: none;
}
.mn-preview:hover { background: #3478f6; color: #fff; }

.mn-list { list-style: none; margin: 0; padding: 0; }
.mn-children {
  margin-left: 30px;
  padding: 4px 0 4px 12px;
  border-left: 2px dashed #e0e2e6;
  min-height: 26px;            /* 空子菜单也能作为拖放目标 */
}
.mn-item { margin: 6px 0; }
.mn-row {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e3e3e6; border-radius: 8px;
  padding: 7px 10px;
}
.mn-row:hover { border-color: #c3c6cc; }
.mn-handle { cursor: grab; color: #9aa0a6; font-size: 18px; line-height: 1; }
.mn-title { max-width: 200px; }
.mn-del {
  border: 0; background: #f1f2f4; color: #d9534f; border-radius: 6px;
  width: 28px; height: 28px; font-size: 18px; line-height: 1; cursor: pointer; flex: none;
}
.mn-del:hover { background: #d9534f; color: #fff; }
.sortable-ghost { opacity: .4; }
.sortable-chosen .mn-row { border-color: #3478f6; box-shadow: 0 4px 14px rgba(52,120,246,.18); }

@media (max-width: 575px) {
  .mn-row { flex-wrap: wrap; }
  .mn-title, .mn-url { max-width: none; flex: 1 1 100%; }
}

/* 轮播卡片 */
.slide-card { list-style: none; border: 1px solid #e3e3e6; border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #fff; }
.slide-thumb { width: 200px; height: 112px; flex: none; border-radius: 6px; background: #eee center/cover no-repeat; border: 1px solid #e3e3e6; }
@media (max-width: 575px) { .slide-thumb { width: 140px; height: 80px; } }

/* 移动端优化 */
@media (max-width: 768px) {
  .table { font-size: 14px; }
  .table-cart img { width: 44px; height: 44px; }
  .button.button-sm { padding: 4px 10px; font-size: 12px; }
  .article-content { font-size: 1rem; }
  .tox-tinymce { min-height: 320px !important; }
}

/* ============================================================
   统一前台应用页面（博客/商城/购物车/订单/支付/管理）的风格
   —— 输入框、按钮、卡片、徽章、聚焦、动效与网站主题一致
   主题强调色：#373e98（站点 .color-primary）
   ============================================================ */
:root { --elz-accent: #373e98; }

/* 输入框 / 下拉 / 文本域 */
.form-control, .form-select, textarea.form-control,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="url"], input[type="search"], input[type="datetime-local"] {
  border: 1px solid #d9dce1;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #1c1c1e;
  background-color: #fff;
  box-shadow: none;
  transition: border-color .18s, box-shadow .18s;
}
.form-control-sm, .form-select-sm { padding: 7px 11px; font-size: 13px; border-radius: 7px; }
.form-control:focus, .form-select:focus, textarea.form-control:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--elz-accent);
  box-shadow: 0 0 0 3px rgba(55, 62, 152, .14);
  outline: none;
}
.form-control::placeholder { color: #aeb3ba; }

/* 勾选框 / 开关：选中用主题强调色 */
.form-check-input:checked { background-color: var(--elz-accent); border-color: var(--elz-accent); }
.form-check-input:focus { border-color: var(--elz-accent); box-shadow: 0 0 0 3px rgba(55, 62, 152, .14); }

/* 按钮：统一为站点风格——圆角(0.5em) + 悬停动效（与「预约试听 / 发送留言」一致） */
.button { border-radius: .5em; transition: transform .15s ease, box-shadow .15s ease, background-color .15s, color .15s, border-color .15s; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
/* 描边按钮：透明底 + 深色描边/文字，悬停填充 */
.button-outline-dark {
  background: transparent !important;
  border: 1px solid #181c20 !important;
  color: #181c20 !important;
}
.button-outline-dark:hover { background: #181c20 !important; color: #fff !important; }
/* 兜底：把零散的 Bootstrap .btn 映射成站点观感 */
.btn { border-radius: 8px; transition: all .15s; }
.btn-primary, .btn-dark { background: #1c1c1e; border-color: #1c1c1e; }
.btn-primary:hover, .btn-dark:hover { background: #000; border-color: #000; }
.btn-outline-primary { color: #1c1c1e; border-color: #1c1c1e; }
.btn-outline-primary:hover { background: #1c1c1e; color: #fff; }

/* 卡片：柔和边框 + 阴影，与订单/支付卡一致 */
.border.rounded-3 { border-color: #eef0f3 !important; box-shadow: 0 6px 18px rgba(20, 24, 40, .05); }

/* 徽章圆润统一 */
.badge { border-radius: 20px; font-weight: 600; padding: 5px 12px; }

/* 表格行内控件竖直对齐更整齐 */
.table td, .table th { vertical-align: middle; }

/* 链接强调色 */
a { transition: color .15s; }

/* ============================================================
   控件高度统一（修复按钮/输入框「一大一小、缺一截、不对齐」）
   所有按钮与单行输入框统一 44px、文字垂直居中
   ============================================================ */
/* 输入框：直角（与网站一致）、统一 44px 高 */
.form-control, .form-select {
  height: 44px !important; min-height: 44px !important;
  border-radius: 0 !important;
}
textarea.form-control { height: auto !important; min-height: 96px !important; }
/* 按钮：圆角（与网站一致）、统一 44px 高、文字垂直居中 */
.button {
  height: 44px !important; min-height: 44px !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  border-radius: .5em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center;
}
.blog-toolbar .form-control, .blog-toolbar .button { height: 44px !important; min-height: 44px !important; }

/* 绿色渐变 CTA（去支付 / 取消订单等），与网站绿色一致 */
.button-green, a.button-green, button.button-green {
  background: linear-gradient(120deg, #22c97b 0%, #07b15f 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(8, 177, 95, .22);
}
.button-green:hover { color: #fff !important; filter: brightness(1.05); }

/* 商品卡片内容居中 */
.product-card .body { text-align: center; }
.product-card .body .d-flex { flex-direction: column; align-items: center; gap: 10px; }

/* 输入组前缀（如「/」）与输入框等高、直角，对齐一致 */
.input-group { align-items: stretch; }
.input-group-text {
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 0 !important;
  background: #f4f5f7;
  border-color: #d9dce1;
}
.input-group > .form-control { height: 44px !important; }

/* 红色按钮（取消订单等） */
.button-red, a.button-red, button.button-red {
  background: linear-gradient(120deg, #ff6a6a 0%, #e23b3b 100%) !important;
  border: 0 !important; color: #fff !important;
  box-shadow: 0 8px 18px rgba(226, 59, 59, .22);
}
.button-red:hover { color: #fff !important; filter: brightness(1.05); }

/* iOS 风格开关（购物车勾选） */
.ios-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.ios-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ios-switch span { position: absolute; inset: 0; background: #d9dce1; border-radius: 26px; cursor: pointer; transition: background .2s; }
.ios-switch span::before { content: ""; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.ios-switch input:checked + span { background: #34c759; }
.ios-switch input:checked + span::before { transform: translateX(20px); }

/* ===== 后台统一表格风格 + 移动端横向滚动 ===== */
.table-responsive { border: 1px solid #eef0f3; border-radius: 12px; background: #fff; }
.table { margin: 0 !important; vertical-align: middle; color: #1c1f26; }
.table > thead > tr > th {
	background: #f7f8fa; color: #5b6270; font-weight: 600; font-size: 13px;
	border-bottom: 1px solid #eef0f3; padding: 13px 16px; white-space: nowrap; }
.table > tbody > tr > td {
	padding: 13px 16px; border-bottom: 1px solid #f1f3f6; vertical-align: middle; white-space: nowrap; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr:hover > td { background: #fafbfc; }
.table > thead > tr > th:first-child,
.table > tbody > tr > td:first-child { padding-left: 18px; }
.table > thead > tr > th:last-child,
.table > tbody > tr > td:last-child { padding-right: 18px; }

/* 移动端：自定义文件选择框占满容器宽度 */
@media (max-width: 768px) { .elz-file { max-width: none !important; } }

/* 页眉右侧图标：任意用户都垂直居中对齐 + 图标间距一致 */
.header-menu-extra ul.list-inline-sm { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.header-menu-extra ul.list-inline-sm > li { margin: 0; padding: 0; display: inline-flex; align-items: center; }
.header-menu-extra ul.list-inline-sm > li > a { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.header-menu-extra ul.list-inline-sm > li > a > i { font-size: 18px; line-height: 1; vertical-align: middle; }


/* 页眉功能入口：除微信/邮件/电话外全部收进「齿轮」，点开为半透明圆角下拉(图标+文字)，桌面/移动端一致 */
.hx-tools { position: relative; display: inline-flex; align-items: center; }
.header-menu-extra ul.list-inline-sm > li > a.hx-gear { display: inline-flex; align-items: center; }
.hx-gear > i { font-size: 18px; line-height: 1; }
.hx-drop { display: none; position: absolute; right: 0; top: calc(100% + 12px); list-style: none;
  flex-direction: column; align-items: stretch; gap: 2px; width: max-content; max-width: 72vw; padding: 6px; margin: 0;
  background: rgba(28,32,38,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28); z-index: 99999; }
.hx-tools.hx-open .hx-drop { display: flex; }
.hx-drop > li { margin: 0; padding: 0; }
.hx-drop > li > a { display: flex; align-items: center; gap: 12px;
  border-radius: 10px; color: #fff !important; white-space: nowrap; font-size: 14px; padding: 10px 26px 10px 16px; }
.hx-drop > li > a > i { font-size: 17px; width: 20px; text-align: center; }
.hx-drop > li > a:hover, .hx-drop > li > a:active { background: rgba(255,255,255,.14); }
.hx-drop .hx-label { display: inline; }

/* PC 端：主导航自带二级菜单改用与齿轮菜单一致的半透明玻璃质感 */
@media (min-width: 992px) {
  .header .header-menu .nav .nav-item .nav-dropdown,
  .header .header-menu .nav .nav-item .nav-dropdown .nav-dropdown-item .nav-subdropdown {
    background: rgba(28,32,38,.55) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.28);
    padding: 6px;
  }
  .header .header-menu .nav .nav-item .nav-dropdown .nav-dropdown-item { padding: 0; }
  .header .header-menu .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]),
  .header .header-menu .nav .nav-item .nav-dropdown .nav-dropdown-link,
  .header .header-menu .nav .nav-item .nav-dropdown .nav-subdropdown-link { color: #fff; }
  .header .header-menu .nav .nav-item .nav-dropdown .nav-dropdown-item .nav-dropdown-link,
  .header .header-menu .nav .nav-item .nav-dropdown .nav-subdropdown .nav-subdropdown-item .nav-subdropdown-link {
    border-radius: 10px; padding: 10px 16px;
  }
  .header .header-menu .nav .nav-item .nav-dropdown .nav-dropdown-item .nav-dropdown-link:hover,
  .header .header-menu .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):hover,
  .header .header-menu .nav .nav-item .nav-dropdown .nav-subdropdown .nav-subdropdown-item .nav-subdropdown-link:hover {
    background: rgba(255,255,255,.14); color: #fff; padding: 10px 16px;
  }
}