/* --------------------------------------------------
/*  自定义后台扩展样式，需要在加载 console.css 后载入
/*  使用 php think xadmin:install static 时不会更新此文件
/* -------------------------------------------------- */

/* --------------------------------------------------
   弹窗滚动区：
   弹窗高度是按内容自动计算的，内容过高（比如带多张资质照片的详情页）
   会超出屏幕导致底部看不见。给内容块加上这个类，超出部分就在弹窗内部滚动。
   用法：<div class="layui-card-body think-modal-scroll"> ... </div>
-------------------------------------------------- */
.think-modal-scroll {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* --------------------------------------------------
   弹窗内图片墙（点击查看大图，多张可左右切换）
   配合框架的 data-tips-image 使用：把大图地址写在图片块容器上，
   这样同组图片互为兄弟节点，点击后可左右切换浏览。

   <div class="think-photo-grid">
       <div class="think-photo-item" data-tips-image="大图地址">
           <div class="think-photo-frame">
               <img class="think-photo-img" src="缩略图地址" alt="">
               <span class="think-photo-zoom"><i class="layui-icon layui-icon-search"></i></span>
           </div>
           <div class="think-photo-title">营业执照</div>
       </div>
       <div class="think-photo-item">
           <div class="think-photo-frame">
               <div class="think-photo-empty"><i class="layui-icon layui-icon-picture"></i><span>未上传</span></div>
           </div>
           <div class="think-photo-title">门头照</div>
       </div>
   </div>
-------------------------------------------------- */
.think-photo-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.think-photo-item {
    box-sizing: border-box;
    width: 33.333%;
    padding: 0 8px 16px;
}

.think-photo-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 6px;
}

.think-photo-item[data-tips-image] .think-photo-frame {
    cursor: zoom-in;
    transition: border-color .2s, box-shadow .2s;
}

.think-photo-item[data-tips-image]:hover .think-photo-frame {
    border-color: #009688;
    box-shadow: 0 4px 14px rgba(0, 150, 136, .18);
}

.think-photo-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.think-photo-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}

.think-photo-item[data-tips-image]:hover .think-photo-zoom {
    opacity: 1;
    transform: translateY(0);
}

.think-photo-title {
    margin-top: 8px;
    color: #666;
    font-size: 12px;
    text-align: center;
}

.think-photo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 130px;
    color: #c3c9d0;
    background: #fbfcfd;
    border: 1px dashed #dfe3e8;
    border-radius: 6px;
}

.think-photo-empty .layui-icon {
    margin-bottom: 6px;
    font-size: 22px;
}

.think-photo-empty span {
    font-size: 12px;
}

@media screen and (max-width: 620px) {
    .think-photo-item {
        width: 50%;
    }
}

/* --------------------------------------------------
   弹窗表单通用版式：信息头 / 分区 / 字段网格 / 照片上传 / 底部按钮
   用法：
   <form class="layui-form layui-card">
     <div class="layui-card-body think-modal-scroll">
       <div class="think-form-head">...</div>
       <div class="think-form-section">
         <div class="think-form-section-head">分区标题<em>右侧说明</em></div>
         <div class="think-form-grid">
           <label class="think-form-field"><span>字段名</span><input class="layui-input" name="x"></label>
         </div>
       </div>
     </div>
     <div class="think-form-foot"><button class="layui-btn">保存</button></div>
   </form>
-------------------------------------------------- */
.think-form-head {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f7fdfc 0%, #edf7f6 100%);
    border-bottom: 1px solid #eef0f3;
}

.think-form-avatar {
    flex: none;
    width: 50px;
    height: 50px;
    margin-right: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #00a693 0%, #14bdab 100%);
    box-shadow: 0 4px 12px rgba(0, 150, 136, .26);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 50px;
    text-align: center;
}

.think-form-head-main {
    flex: 1;
    min-width: 0;
}

.think-form-head-name {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 700;
    color: #1f2529;
}

.think-form-head-name > .layui-elip {
    min-width: 0;
}

.think-form-head-meta {
    margin-top: 8px;
    color: #8b939b;
    font-size: 12px;
}

.think-form-head-meta span {
    display: inline-block;
    margin-right: 16px;
}

.think-form-head-meta .layui-icon {
    margin-right: 4px;
    font-size: 12px;
}

.think-form-tag {
    flex: none;
    margin-left: 10px;
    padding: 0 10px;
    height: 22px;
    line-height: 20px;
    border: 1px solid;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 400;
}

.think-form-tag-wait {
    color: #d98800;
    border-color: #ffd79a;
    background: #fff9ee;
}

.think-form-tag-pass {
    color: #009688;
    border-color: #a6ded7;
    background: #f0fbf9;
}

.think-form-tag-reject {
    color: #e5483b;
    border-color: #ffc7c1;
    background: #fff5f4;
}

/* 顶部提示条 */
.think-form-notice {
    display: flex;
    align-items: flex-start;
    margin: 16px 20px 0;
    padding: 11px 14px;
    border: 1px solid #d7ece9;
    border-radius: 4px;
    background: #f4fbfa;
    color: #4a8b85;
    font-size: 12px;
    line-height: 20px;
}

.think-form-notice .layui-icon {
    flex: none;
    margin-right: 8px;
    font-size: 14px;
}

/* 分区 */
.think-form-section {
    padding: 18px 20px 0;
}

.think-form-section:last-child {
    padding-bottom: 18px;
}

.think-form-section-head {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #2b3238;
}

.think-form-section-head:before {
    content: '';
    width: 3px;
    height: 13px;
    margin-right: 8px;
    border-radius: 2px;
    background: #009688;
}

.think-form-section-head em {
    margin-left: auto;
    color: #9aa1a8;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

/* 字段网格 */
.think-form-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.think-form-field {
    position: relative;
    box-sizing: border-box;
    width: 50%;
    padding: 0 8px 14px;
}

.think-form-field-full {
    width: 100%;
}

.think-form-field > span {
    display: block;
    margin-bottom: 6px;
    color: #9aa1a8;
    font-size: 12px;
}

.think-form-field .layui-textarea {
    min-height: 80px;
}

/* 表单内照片上传（配合框架 uploadOneImage） */
.think-form-photos {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.think-form-photo {
    box-sizing: border-box;
    width: 33.333%;
    padding: 0 8px 10px;
}

.think-form-photo > span {
    display: block;
    margin-bottom: 6px;
    color: #9aa1a8;
    font-size: 12px;
}

.think-form-photo .uploadimage {
    margin: 0;
}

/* 必填星号（框架只给 required 的输入控件加，上传控件需手动标） */
.think-req {
    margin-left: 2px;
    color: red;
    font-style: normal;
    font-weight: 700;
}

/* 底部按钮条 */
.think-form-foot {
    padding: 14px 20px;
    border-top: 1px solid #f0f2f5;
    background: #fcfdfd;
    text-align: right;
}

@media screen and (max-width: 620px) {
    .think-form-field,
    .think-form-photo {
        width: 100%;
    }
}

/* --------------------------------------------------
   大图预览层（layer.photos）尺寸兜底
   layer 的模块样式是 layui 运行时动态注入的（css/modules/layer/default/layer.css），
   一旦注入失败或未及时生效，弹层位置尺寸靠内联样式还在，
   但图片的宽度约束会丢失 —— 大图就会按原始像素渲染并撑出屏幕。
   这里把关键约束固化到项目样式里，保证任何情况下大图都自适应。
-------------------------------------------------- */
.layui-layer-photos {
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
}

.layui-layer-photos .layui-layer-content {
    overflow: hidden;
    text-align: center;
}

.layui-layer-photos .layui-layer-phimg img {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    vertical-align: top;
}