/*
 * Django 版专用样式补充。
 *
 * 与原 Nuxt 版的差异及原因：
 *   1. 弹窗显隐：原版用 Vue 的 v-if 把节点移出 DOM，所以 main.css 里的
 *      .modal-mask 直接写死 display:flex。Django 版节点常驻，改由 .open 类控制。
 *   2. 卡片/表格切换等原本由前端状态驱动的元素，改为链接 + 服务端渲染。
 *
 * ⚠️ main.css 与 components.css 都是自动生成的移植产物，不要往里加规则；
 *    所有 Django 侧的新增/覆盖写在本文件，便于日后对照与回滚。
 */

/* 弹窗 */
.modal-mask { display: none; }
.modal-mask.open { display: flex; }
[data-modal-body][hidden],
[data-modal-success][hidden] { display: none; }

/* 打开弹窗时锁住页面滚动 */
body.modal-open { overflow: hidden; }

/* 语言下拉：原版无提交按钮（change 即生效），表单外观需与裸 select 一致 */
.lang-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.lang-form noscript button { margin-inline-start: 4px; }

/* 无 JS 时的兜底：把 AJAX 表单也当作普通表单提交（Django 侧会正常处理并重定向） */
.no-js .modal-mask { display: none; }

/* ── 车辆详情页：图库舞台 / Tab 面板 / 灯箱 ──
   原版靠 Vue 的 v-if 与 :class 绑定控制显隐，Django 版全部渲染后用 class 切换。
   选择器加上属性限定以提高特异性，确保覆盖 main.css 里的同名规则。 */
[data-gallery-main] > [data-slide] { display: none; }
[data-gallery-main] > [data-slide].active { display: block; height: 100%; }

[data-tabs] > [data-panel] { display: none; }
[data-tabs] > [data-panel].active { display: block; }

.lightbox[data-lightbox] { display: none; }
.lightbox[data-lightbox].open { display: flex; }
[data-lightbox] .lb-stage > [data-slide] { display: none; }
[data-lightbox] .lb-stage > [data-slide].active { display: block; }

/* 缩略图选中态（原版用 :class="{ active: i === active }"）。
   2026-10-06 清理：border-color 对 border:none 的按钮无效，删掉；光圈保留 */
.gal-thumb.active { box-shadow: 0 0 0 2px var(--primary-soft); }

/* 无 JS 时至少展示第一张，避免舞台空白 */
.no-js [data-gallery-main] > [data-slide]:first-child { display: block; }
.no-js [data-tabs] > [data-panel]:first-of-type { display: block; }