@charset "utf-8";
/* ============================================================
   顾客作品（zuopin）模块共用样式
   使用页面：dianzhu/zuopin.asp（展示）、dianzhu/zuopin_add.asp（发布）、dianzhu/zuopin_xq.asp（详情）
   ============================================================ */

@font-face {
	font-family: 'iconfont';
	src: url('/font/iconfont.woff2') format('woff2'),
	     url('/font/iconfont.woff') format('woff'),
	     url('/font/iconfont.ttf') format('truetype');
}
.iconfont {
	font-family: "iconfont" !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------- 通用容器 ---------- */
.zp-box{
	background:#fff;border-radius:12px;padding:18px 16px 22px;
	box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.zp-hd{
	display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:6px;
}
.zp-hd-note{color:#008a7c;font-size:14px;font-weight:800;line-height:1.7;}
.zp-new{
	display:inline-block;background:#008A7C;color:#fff;font-size:14px;
	padding:8px 16px;border-radius:20px;text-decoration:none;white-space:nowrap;
}
.zp-new:hover{
	color: #FFCC00;
}
/* 列表页右上角的发布按钮组：两个按钮并排成一组靠右，不再被 .zp-hd 的 space-between 各自拉开 */
.zp-hd-btn{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
/* 按钮里的小相机图标（内联 SVG，描边取 currentColor 跟着文字色） */
.zp-ico{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;vertical-align:-2px;margin-right:5px;}
/* 给自己拍照：橙色，与给顾客拍照的绿色区分开 */
.zp-new-self{background:#FF6A00;}
.zp-new-self:hover{background:#E85F00;color:#fff;}

/* ---------- 列表筛选栏 ---------- */
.zp-filter{
	display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;
	margin:12px 0 0;padding:12px;background:#f7faf9;
	border:1px solid #eaf3f1;border-radius:10px;
}
.zp-filter .fi{flex:1 1 150px;min-width:0;}
.zp-filter .fi label{display:block;font-size:12px;color:#888;margin-bottom:4px;}
.zp-filter .fi input{
	width:100%;box-sizing:border-box;border:1px solid #dcdcdc;border-radius:8px;
	background:#fff;color:#444;font-size:14px;padding:8px 10px;line-height:1.5;font-family:inherit;
}
.zp-filter .fi input:focus{border-color:#008A7C;outline:none;}
.zp-filter .fbtns{display:flex;gap:8px;flex:none;}
.zp-filter .fbtn{
	border:0;background:#008A7C;color:#fff;font-size:14px;padding:9px 18px;
	border-radius:8px;cursor:pointer;text-decoration:none;line-height:1.4;display:inline-block;
}
.zp-filter .fbtn2{background:#fff;color:#666;border:1px solid #ddd;}

/* ---------- 作品卡片 ---------- */
.zp-works{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;}
.zp-work{
	display:block;width:calc((100% - 24px)/3);box-sizing:border-box;
	border:1px solid #eee;border-radius:10px;overflow:hidden;background:#fff;
	text-decoration:none;color:inherit;transition:box-shadow .2s ease,border-color .2s ease;
}
.zp-work:hover{border-color:#cfeee9;box-shadow:0 4px 14px rgba(0,138,124,.12);}
.zp-work .wk-pic{position:relative;width:100%;height:0;padding-bottom:100%;background:#f2f4f4;}
.zp-work .wk-pic img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;}
.zp-work .wk-info{padding:8px 10px 10px;}
.zp-work .wk-info b{display:block;font-size:14px;color:#333;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.zp-work .wk-info span{display:block;font-size:12px;color:#999;line-height:1.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ---------- 卡片内层链接：图片和标题各是一条到详情页的链接，底部门店/发型师各自可点 ---------- */
.zp-work .wk-pic .wk-link{position:absolute;left:0;top:0;width:100%;height:100%;display:block;}
.zp-work .wk-info .wk-tt{display:block;text-decoration:none;color:inherit;}
.zp-work .wk-info .wk-f{color:#999;text-decoration:none;}
.zp-work .wk-info .wk-f:hover{color:#008A7C;text-decoration:underline;}

.zp-work .wk-tag{
	position:absolute;right:6px;bottom:6px;margin:0;font-size:11px;line-height:18px;
	padding:0 7px;border-radius:9px;font-style:normal;border:1px solid transparent;
	background:rgba(255,255,255,.92);
}
.zp-work .wk-num{
	position:absolute;right:6px;top:6px;background:rgba(0,0,0,.5);color:#fff;
	font-size:11px;line-height:18px;padding:0 7px;border-radius:9px;font-style:normal;
}

/* ---------- 状态彩标 ---------- */
.zp-tag2{background:#e8f7f4;color:#008A7C;border-color:#bfe3dd;}
.zp-tag1{background:#eef3fd;color:#2b6fd0;border-color:#cadcfb;}
.zp-tag0{background:#f4f4f4;color:#888;border-color:#e2e2e2;}
.zp-tagw{background:#fff4e5;color:#b26a00;border-color:#ffe0b2;}

/* ---------- 分页 ---------- */
.zp-page{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:20px;}
.zp-page a,.zp-page span{
	display:inline-block;min-width:34px;text-align:center;font-size:13px;line-height:32px;
	padding:0 10px;border:1px solid #e2e8e6;border-radius:8px;color:#555;
	background:#fff;text-decoration:none;box-sizing:border-box;
}
.zp-page a:hover{border-color:#008A7C;color:#008A7C;}
.zp-page .cur{background:#008A7C;border-color:#008A7C;color:#fff;font-weight:600;}
.zp-page .sum{border:0;background:transparent;color:#999;min-width:0;}

/* ---------- 空态 ---------- */
.zp-empty{text-align:center;color:#999;font-size:14px;padding:36px 0;line-height:2;}
.zp-back{display:inline-block;margin-top:14px;color:#008A7C;font-size:14px;}

/* ---------- 发布 / 编辑表单 ---------- */
.zp-edit-tip{
	background:#fff8e6;border:1px solid #ffe3a3;color:#8a5b00;border-radius:8px;
	padding:9px 12px;font-size:13px;line-height:1.7;margin-top:14px;
}
.zp-edit-tip a{color:#b26a00;text-decoration:underline;}

.zp-cust{
	display:flex;align-items:center;gap:12px;background:#f4faf8;border:1px solid #e3f2ef;
	border-radius:10px;padding:12px 14px;margin:14px 0 4px;
}
.zp-cust img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#eaeaea;flex:none;}
.zp-cust .ci{min-width:0;}
.zp-cust .ci b{display:block;font-size:16px;color:#0a5e55;line-height:1.5;word-break:break-all;}
.zp-cust .ci span{display:block;font-size:13px;color:#777;line-height:1.7;}

.zp-field{margin-top:16px;}
.zp-field label{display:block;font-size:14px;color:#444;font-weight:600;margin-bottom:7px;}
.zp-field label i{color:#c00;font-style:normal;margin-left:2px;}
.zp-field .hint{display:block;font-size:12px;color:#999;line-height:1.6;margin-top:6px;font-weight:400;}
.zp-field label .hint{display:inline;margin:0 0 0 8px;font-size:12px;font-weight:400;color:#999;}
.zp-input,.zp-select,.zp-area{
	width:100%;box-sizing:border-box;border:1px solid #dcdcdc;border-radius:8px;background:#fff;
	color:#444;font-size:15px;padding:10px 12px;line-height:1.6;font-family:inherit;-webkit-appearance:none;
}
.zp-input:focus,.zp-select:focus,.zp-area:focus{
	border-color:#008A7C;outline:none;box-shadow:0 0 0 2px rgba(0,138,124,.12);
}
.zp-area{min-height:80px;resize:vertical;}
.zp-row{display:flex;gap:12px;flex-wrap:wrap;}
.zp-row>div{flex:1 1 240px;min-width:0;}

.zp-upload{border:1px dashed #cfe6e2;border-radius:10px;padding:8px;background:#fbfefd;}
.zp-upload iframe{width:100%;height:96px;border:0;display:block;transition:height .18s ease;}

.zp-radio{display:flex;gap:10px;flex-wrap:wrap;}
.zp-radio label{
	display:flex;align-items:center;gap:6px;border:1px solid #dcdcdc;border-radius:8px;
	padding:9px 12px;cursor:pointer;font-weight:400;font-size:14px;color:#555;background:#fff;
	margin:0;flex:1 1 150px;min-width:0;
}
.zp-radio label.on{border-color:#008A7C;background:#f2fbf9;color:#0a5e55;}
.zp-radio input{margin:0;accent-color:#1a73e8;}
.zp-ck{
	display:inline-block;width:16px;height:16px;line-height:16px;flex:none;text-align:center;
	background:#1a73e8;color:#fff;font-size:11px;border-radius:3px;font-weight:400;
}

.zp-alert{
	background:#fff7e6;border:1px solid #ffe0a3;color:#8a5b00;border-radius:8px;
	padding:10px 12px;font-size:13px;line-height:1.7;margin-top:12px;
}
.zp-submit{
	display:block;width:100%;margin-top:22px;border:0;border-radius:24px;
	background:linear-gradient(135deg,#008A7C 0%,#009E8E 55%,#14B8A6 100%);
	color:#fff;font-size:16px;font-weight:600;padding:13px 0;cursor:pointer;
	box-shadow:0 4px 10px rgba(0,138,124,.25);
}
.zp-submit:active{transform:translateY(1px);}
.zp-submit[disabled]{opacity:.6;cursor:default;box-shadow:none;}

.zp-old{margin-top:10px;}
.zp-old-t{font-size:12px;color:#888;margin-bottom:6px;}
.zp-old-l{display:flex;flex-wrap:wrap;gap:10px;}
.zp-old-i{position:relative;width:88px;height:88px;flex:none;border-radius:8px;overflow:hidden;background:#f2f4f4;}
.zp-old-i img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;}
.zp-old-i a{
	position:absolute;right:0;top:0;width:22px;height:22px;line-height:22px;text-align:center;
	background:rgba(0,0,0,.55);color:#fff;font-size:12px;text-decoration:none;border-bottom-left-radius:8px;
}

/* ---------- 详情页 ---------- */
.sh-tbar{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sh-box{background:#fff;border-radius:12px;padding:18px 16px 22px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.sh-hd{padding-bottom:10px;border-bottom:1px dashed #eee;}
.sh-hd b{font-size:18px;color:#1a1a1a;line-height:1.5;}
/* 详情页头部：状态说明与授权按钮排成一行，文字可折行、按钮固定不换行 */
.sh-gkrow{display:flex;align-items:flex-start;gap:12px;margin-top:2px;}
.sh-gkrow .sh-gkt{flex:1 1 auto;min-width:0;font-size:13px;color:#ff5a00;line-height:1.7;}
.sh-gkrow .sh-btn{flex:0 0 auto;margin-top:-1px;}

.sh-btn{
	display:inline-block;font-size:13px;padding:7px 14px;border-radius:18px;
	border:1px solid #dfe6e4;color:#0a5e55;background:#f4faf8;text-decoration:none;white-space:nowrap;
}
.sh-btn:hover{border-color:#008A7C;color:#008A7C;}
.sh-btn.del{color:#c0392b;border-color:#f0d6d2;background:#fcf5f4;}
.sh-btn.del:hover{background:#c0392b;color:#fff;border-color:#c0392b;}
.sh-btn.back{font-size:12px;padding:4px 12px;border-radius:15px;color:#666;background:#fff;font-weight:400;}
.sh-btn.priv{color:#666;border-color:#e6e6e6;background:#f7f7f7;}
.sh-btn.priv:hover{background:#8a8a8a;color:#fff;border-color:#8a8a8a;}
.sh-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;color:#888;padding:12px 0 2px;line-height:1.8;}
.sh-meta span b{color:#444;font-weight:600;}
.sh-g{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.sh-g a{
	position:relative;width:calc((100% - 20px)/3);height:0;padding-bottom:calc((100% - 20px)/3);
	border-radius:10px;overflow:hidden;background:#f2f4f4;display:block;
}
.sh-g a img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;}
.sh-g a i{
	position:absolute;right:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;font-size:11px;
	line-height:18px;padding:0 7px;border-top-left-radius:8px;font-style:normal;
}
.sh-txt{
	margin-top:16px;background:#fbfcfc;border:1px solid #eee;border-radius:10px;
	padding:12px 14px;font-size:14px;color:#444;line-height:1.9;word-break:break-all;
}
.sh-none{color:#bbb;}
.sh-foot{margin-top:16px;font-size:12px;color:#999;line-height:2;}
.sh-foot span{display:inline-block;margin-right:18px;}
.sh-bot{
	display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:14px;
	padding-right:10px;border-top:1px dashed #eee;
}

/* ---------- 自适应 ---------- */
@media (max-width: 640px){
	.zp-work{width:calc((100% - 12px)/2);}
	.sh-g a{width:calc((100% - 10px)/2);padding-bottom:calc((100% - 10px)/2);}
	.sh-foot span{display:block;margin-right:0;}
}
@media (max-width: 700px){
	.zp-hd{display:block;}
	/* 窄屏：两个按钮仍并排在一行、各占一半，不再一个按钮占一行 */
	.zp-hd-btn{margin-top:10px;gap:8px;}
	.zp-hd-btn .zp-new{display:block;flex:1 1 0;margin-top:0;text-align:center;padding:8px 10px;font-size:13px;}
	.zp-back{display:block;margin-top:8px;}
	.zp-filter .fbtns{width:100%;}
	.zp-filter .fbtns .fbtn{flex:1;text-align:center;}
}

/* 详情页：门店/发型师行右侧操作按钮 */
.sh-meta .sh-act{margin-left:auto;display:flex;gap:8px;align-items:center;}
.sh-btn.grant{color:#fff;background:#008A7C;border-color:#008A7C;}
.sh-btn.grant:hover{background:#00786d;color:#fff;border-color:#00786d;}
/* 顾客授权弹层 */
.zp-grant-mask{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9000;display:none;align-items:center;justify-content:center;}
.zp-grant{width:86%;max-width:360px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.25);}
.zp-grant-t{padding:18px 18px 4px;font-size:16px;font-weight:600;color:#1a1a1a;text-align:center;}
.zp-grant-c{padding:0 18px 18px;font-size:13px;line-height:1.8;color:#666;}
.zp-grant-c em{font-style:normal;color:#999;font-size:12px;}
.zp-grant-b{display:flex;border-top:1px solid #eee;}
.zp-grant-b a{flex:1;text-align:center;padding:14px 0;font-size:15px;color:#666;text-decoration:none;}
.zp-grant-b a+a{border-left:1px solid #eee;}
.zp-grant-b a.ok{color:#008A7C;font-weight:600;}
/* ===== 门店/理发师：一个输入框里可手打、可点箭头下拉（组合框） ===== */
.zp-combo{position:relative;}
.zp-combo .zp-input{padding-right:38px;}
.zp-combo-ar{
	position:absolute;right:1px;top:1px;bottom:1px;width:34px;
	display:flex;align-items:center;justify-content:center;
	color:#8ca7a2;font-size:13px;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;
}
.zp-combo-list{
	position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:30;display:none;
	max-height:220px;overflow-y:auto;-webkit-overflow-scrolling:touch;
	background:#fff;border:1px solid #dfe9e6;border-radius:10px;
	box-shadow:0 8px 22px rgba(0,0,0,.1);
}
.zp-combo-list .zp-opt{padding:10px 12px;font-size:14px;color:#444;line-height:1.45;cursor:pointer;}
.zp-combo-list .zp-opt:hover,.zp-combo-list .zp-opt.on{background:#f2fbf9;color:#0a5e55;}
.zp-combo-list .zp-opt small{color:#9aa7a3;font-size:12px;}