/* =========================================================
   Shop Review — Single Shop Page Styles
   File: shop-review/assets/review.css
   作用范围尽量限定在 .single-shop，避免影响主题其它页面
   ========================================================= */

/* ------------------------------
 * 全局：限制影响范围 + 基础卡片
 * ------------------------------*/
.single-shop .sr-section {
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:8px;
  padding:16px;
  margin:16px 0;
}

.single-shop .sr-title {
  margin:0 0 12px;
  font-size:18px;
  font-weight:700;
  color:#111;
}

/* 让主题正文区域更贴边显示（不破坏布局） */
.single-shop .entry-content { margin-top:0; padding-top:0; }
.single-shop .entry-content::before { content:none !important; display:none !important; }

/* 图片通用 */
.single-shop img { max-width:100%; height:auto; display:block; }

/* 通用“链接样式按钮” */
.single-shop .sr-link {
  color:#0ea5e9; text-decoration:none;
  background:transparent; border:0; cursor:pointer; padding:0;
}
.single-shop .sr-link:hover { text-decoration:underline; }

/* 小芯片（标签） */
.single-shop .chip {
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:#f2f4f7;
  border:1px solid rgba(0,0,0,.06);
  color:#333;
  font-size:12px;
  line-height:1;
}

.sr-card-title {
  font-size: 20px;         /* 调整字号 */
  font-weight: 600;        /* 半粗 */
  margin: 16px 0;          /* 上下间距 */
  background-color: #000;  /* 黑色背景 */
  color: #fff;             /* 白色字体 */
  padding: 8px 12px;       /* 内边距，让文字不紧贴背景边缘 */
  border-radius: 8px;      /* 圆角 8px */
  display: inline-block;   /* 让背景只包住文字，不占整行 */
}

/* =========================================================
   模块#1：封面 + 名称与标签（左下角模糊渐变）
   需要结构：
   .sr-cover  (容器)
     img      (封面)
     .sr-cover__overlay
     .sr-cover__inner
       .sr-cover__title
       .sr-cover__meta  (.chip)
   ========================================================= */
.single-shop .sr-cover {
  position:relative;
  overflow:hidden;
  border-radius:8px;
  aspect-ratio:16/9; /* 保持比例 */
}
.single-shop .sr-cover img {
  width:100%; height:100%; object-fit:cover;
}
.single-shop .sr-cover__overlay {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.60) 0%,
    rgba(0,0,0,0.38) 28%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.00) 100%
  );
}
.single-shop .sr-cover__inner {
  position:absolute; left:20px; right:20px; bottom:20px; z-index:2; color:#fff;
  backdrop-filter: blur(2px);
}
.single-shop .sr-cover__title {
  margin:0 0 8px;
  font-size:30px; line-height:1.2; font-weight:800;
}
@media (max-width:768px){
  .single-shop .sr-cover__title { font-size:22px; }
}
.single-shop .sr-cover__meta { display:flex; flex-wrap:wrap; gap:8px; }
.single-shop .sr-cover__meta .chip {
  background:rgba(255,255,255,.16);
  color:#fff;
  border-color:rgba(255,255,255,.2);
}

/* =========================================================
   模块#2：店铺介绍
   结构：.sr-section（可直接放富文本）
   ========================================================= */
.single-shop .sr-desc p { margin:0 0 10px; color:#111; line-height:1.7; }

/* =========================================================
/* ====== 模块3：评分 三列 ====== */

/* 整体用 grid 三列：左(自适应) | 中(固定) | 右(最小/1fr) */
.single-shop .sr-rate{
  --rate-gap: 40px; /* 统一的水平间距 */
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 140px; /* 左：维度评分，右：综合分 */
  align-items: center;
  column-gap: var(--rate-gap);
}

/* 左列：维度行 —— 紧凑左对齐 */
.single-shop .sr-rate__dims{}

/* 每行：标签 + 星星+分数 紧挨着 */
.single-shop .sr-dim{
  display:flex;
  align-items:center;
  gap:10px;                  /* 标签与星星之间的距离 */
  padding:5px 0;
  border-bottom:none;        /* 去掉分隔线 */
}
.single-shop .sr-dim__label{
  font-weight:600;
  color:#111;
  flex:0 0 auto;
}
.single-shop .sr-stars{
  display:flex;
  align-items:center;
  gap:6px;                   /* 星星之间 / 星星与数字之间 */
}
.single-shop .sr-stars img{ width:18px; height:18px; }
.single-shop .sr-dim__score{
  margin-left:4px;
  color:#555;
  min-width:auto;            /* 不固定宽度，跟随内容 */
  text-align:left;
}

/* 左列：综合评分徽章 */
.single-shop .sr-rate__overall{
  justify-self: center;
}

.single-shop .sr-overall__badge{
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 800;
  border-radius: 50%;
  color: #000;
  background: linear-gradient(to right, #12fff7, #b3ffab);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  margin: 0;                        /* ← 关键：不要再用 margin-left 推 */
}

.sr-overall__count {
  font-size: 12px;        
  color: #666;            
  margin-top: 0.25rem;    
  line-height: 1.4;
  text-align: center;     /* 文本居中 */
  font-weight: normal;    
  display: block;         
  width: 100%;            /* 占满父容器 */
  box-sizing: border-box; /* 避免 padding 影响 */
}

.single-shop .sr-overall__text{ color:#666; }
/* 响应式：平板/手机堆叠 */
@media (max-width: 900px){
  .single-shop .sr-rate{
    grid-template-columns: 1fr 140px;   /* 先两列：左+中 */
    grid-template-areas:
      "dims overall"
      "reviews reviews";
    gap:16px;
  }
  .single-shop .sr-rate__dims{ grid-area: dims; }
  .single-shop .sr-rate__overall{ grid-area: overall; }
  .single-shop .sr-rate__reviews{
    grid-area: reviews;
    padding-left:0;
    margin-top:12px;
  }
}
@media (max-width: 600px){
  .single-shop .sr-rate{
    grid-template-columns: 1fr;         /* 全部一列 */
    gap:12px;
  }
  .single-shop .sr-rate__overall{
    align-items:flex-start;
  }
}

/* =========================================================
   模块#4：三列 地址 | 地图 | 到这去
   结构：
   .sr-loc-grid
     .sr-loc__addr
     .sr-loc__map  #shop-map
     .sr-loc__actions  (.btn)
   ========================================================= */
.sr-loc-grid {
  display: grid;
  grid-template-columns: 1fr;  /* 单列布局：上=地址，下=地图 */
  gap: 16px;
  align-items: start;
}

.sr-loc-grid .shop-map {
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 320px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 8px;
  overflow: hidden;
  background: #f6f7f8;
  z-index: 1;
}

/* Leaflet attribution 隐藏国旗 */
.leaflet-attribution-flag {
  display: none;
}

/* 地图容器裁剪，避免溢出 */
.single-shop .sr-loc-col--map,
.single-shop .sr-loc-grid .shop-map {
  overflow: hidden;
  border-radius: 8px;
}

/* 让 Leaflet 严格填满容器 */
.single-shop .shop-map,
.single-shop .shop-map .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}


/* =========================================================
   模块#5：店铺详情（四行）
   ① 营业时间（可折叠、显示休息日）
   ② 联系电话
   ③ 网址
   ④ 标签
   结构：
   .sr-detail-row
     .sr-detail__label
     .sr-detail__value
   折叠触发：.sr-hours-toggle
   面板：.sr-hours-panel（默认 display:none）
   当前开关徽章：#sr-open-status（JS 会改背景色）
   ========================================================= */
/* === 店铺详情模块 === */
.single-shop .sr-detail-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.single-shop .sr-detail-row:last-child {
  border-bottom: 0;
}

/* 左侧：icon + 标题 */
.single-shop .sr-detail__label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 88px;
  flex: 0 0 88px;
  color: #333;
    font-size: 15px;
  font-weight: 600;
}
.single-shop .sr-detail__label .sr-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 右侧：值 */
.single-shop .sr-detail__value {
  flex: 1;
}

/* ================== 营业时间 ================== */

/* 状态 Badge：默认样式 */
.single-shop .sr-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:4px;
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  margin-right:6px;
}
/* 开放/休息状态（红底白字 + 灰底白字） */
.single-shop .sr-badge--open{   background:#dc2626; color:#fff; }
.single-shop .sr-badge--closed{ background:#6b7280; color:#fff; }

/* 附加说明：普通文字 */
.single-shop .sr-status-extra{
  color:#333;
  margin-left:4px;
  font-size:15px;
}

/* 展开按钮 */
.single-shop .sr-hours-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  background:none;
  border:none;
  color:#111;
  cursor:pointer;
  font-size:15px;
}
.single-shop .sr-hours-toggle:hover{ text-decoration:underline; }

/* 展开按钮里的小图标 */
.single-shop .sr-icon-sm{ width:12px; height:12px; display:inline-block; }

/* —— 展开面板：只做间距，不要边框/灰底（避免外圈第二层边框） —— */
.single-shop .sr-hours-panel{
  display:none;
  margin-top:8px;
  padding:0;          /* 去掉内边距 */
  background:transparent;
  border:none;        /* 去掉外层边框 */
  border-radius:0;
}

/* 表格：只保留一层——单元格细线 */
.single-shop .hours{
  width:100%;
  border-collapse:collapse;   /* 合并边框 */
  border:none;                /* 表格本身不画边 */
}
.single-shop .hours th,
.single-shop .hours td{
  border:1px solid #eee;      /* 单元格细线 = 唯一一层边框 */
  text-align:left;
  padding:12px 16px;
  font-size:13px;
}
.single-shop .hours th{
  width:82px;
  color:#6b7280;
  font-weight:500;
}
.single-shop .hours td{ color:#111; }
.single-shop .hours-closed{ color:#b91c1c; }

/* 电话（普通文字样式） */
.single-shop .phone-list {
  display: block;    /* 直接一行一行展示 */
}
.single-shop .phone-item {
  display: inline;   /* 直接文字 */
  padding: 0;        /* 去掉内边距 */
  border: none;      /* 去掉边框 */
  border-radius: 0;  /* 去掉圆角 */
  background: none;  /* 去掉背景 */
  color: inherit;    /* 继承默认文字颜色 */
  cursor: auto;      /* 普通文字，不要小手 */
}

/* 标签 */
.single-shop .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.single-shop .sr-tag {
  display: inline-block;
  border: none;            /* 去掉边框 */
  color: #000;             /* 白色文字 */
}

/* 网址 */
.single-shop .website-link {
  word-break: break-all;
}

/* =========================================================
   模块#6：店铺评论（容器：#sr-reviews）
   结构：<ul class="sr-related__list"><li class="sr-related__item">...</li></ul>
   布局：左头像 .sr-review-ava + 右侧两行 .sr-meta（昵称 / 星星+分数）
   星星：使用你的 full/half/gray PNG 图片
   ========================================================= */

/* 统一去掉列表默认样式（小黑点、缩进） */
.sr-reviews-list,
.sr-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 每条评论的外观（保留你原来的“虚线分隔”风格） */
.single-shop .sr-related__item {
  padding: 12px 0;
  border-bottom: 1px dashed #eee;
}
.single-shop .sr-related__item:last-child {
  border-bottom: 0;
}

/* --- 如果想要卡片风格，而不是虚线分隔，启用下面这段并注释掉上面两段 --- */
/*
.sr-related__item {
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  margin-bottom: 12px;
}
*/

/* 头部：左头像 + 右侧信息区（两行） */
.sr-review-head {
  display: grid;
  grid-template-columns: 40px 1fr; /* 左 40 为头像，右自适应 */
  grid-column-gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}

/* 头像 */
.sr-review-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 右侧信息区：昵称 + 星星行 */
.sr-meta {
  min-width: 0;                    /* 让省略号生效 */
  display: grid;
  grid-template-rows: auto auto;   /* 上：昵称；下：星星+分数 */
  row-gap: 4px;
}

/* 昵称（更醒目一些） */
.sr-meta__name,
.sr-review-user {                  /* 兼容旧类名 .sr-review-user */
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: #222;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 星星 + 分数一行 */
.sr-meta__scoreRow {
  display: inline-flex;
  align-items: center;
  gap: 6px;                        /* 星星组与分数字的间距 */
}

/* 星星容器（使用图片版本） */
.sr-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;                        /* 星星之间距离（可调） */
  vertical-align: middle;
}

/* 星星图片尺寸（按你的 PNG） */
.sr-stars img {
  width: 16px;                     /* 可改：22px 更显眼 */
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* 兼容：如果你更喜欢通过 margin 控距，打开下面两行并去掉上面的 gap */
/*
.sr-stars img { margin-right: 3px; }
.sr-stars img:last-child { margin-right: 0; }
*/

/* 分数文本 */
.sr-score,
.sr-stars em {                     /* 兼容旧写法 em */
  font-style: normal;
  font-weight: 600;
  font-size: 15px;                 /* 与昵称有层级区分，可根据喜好调整 */
  color: #333;
}

/* 正文内容 */
.sr-review-content {
  color: #111;
  line-height: 1.7;
  font-size: 16px;
}

/* 时间（如需显示） */
.sr-review-time {
  color: #999;
  margin-top: 4px;
  font-size: 12px;
}

/* =========================================================
   模块#7：相关资讯（按标签）
   建议结构与评论类似：ul > li
   ========================================================= */
.single-shop .sr-news-list { list-style:none; padding:0; margin:0; }
.single-shop .sr-news-item {
  padding:10px 0; border-bottom:1px dashed #eee;
}
.single-shop .sr-news-item:last-child { border-bottom:0; }
.single-shop .sr-news-title { margin:0 0 4px; font-weight:700; }
.single-shop .sr-news-meta { color:#999; font-size:12px; }