/*!
 * 首页样式（views/pages/home/index.php）
 * ─────────────────────────────────────────────────────────────────
 * 设计系统 page 层样板：全 --ds-* 语义 token
 *
 * 作用域
 *   .home-page → views/pages/home/index.php
 *
 * 结构
 *   .home-hero          → 品牌头图（绿色弧形底）
 *   .home-shell         → 内容容器 (720px)
 *   .home-section/panel → 白色圆角卡片
 *   .selector-grid      → 物种选择（DOG/CAT 二选一）
 *   .plan-grid          → 套餐选择（标准版 / 高级版）
 *   .uploader-panel     → 图片上传区
 *   .phone-shield       → 手机号隐私提示气泡
 *   .agreement-box      → 服务协议同意框
 *   .footer-panel       → 底部 footer
 *   .home-toast         → 顶部浮层提示
 *
 * 设计原则
 *   - 字号 / 间距 / 圆角 / 阴影 / 颜色 全部走 --ds-* token
 *   - 白色背景上的 rgba(255,255,255,.X) / rgba(0,0,0,.X) 作为功能性 alpha 保留
 *   - 品牌色 alpha 用 rgba(var(--ds-color-primary-rgb), 0.X)
 *
 * 2026-04-21 首次抽离 · 2026-04-25 重写为设计系统样板
 */

/* ═══════════════════════ 页面骨架 ═══════════════════════ */

.home-page {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  background: var(--ds-bg-page);
  overflow-x: hidden;
}

.home-shell {
  max-width: 720px;
  margin: 0 auto;
}

/* ═══════════════════════ Hero 头图（绿色弧形底）═══════════════════════ */

.home-hero {
  position: relative;
  width: 100%;
  background: var(--ds-color-primary);
  padding: calc(28px + env(safe-area-inset-top)) 20px 48px;
  margin-bottom: 60px;
}

.home-hero::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -30px;
  height: 60px;
  background: var(--ds-color-primary);
  border-radius: 0 0 50% 50%;
  z-index: 0;
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.hero-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display-hero);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-tight);
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--ds-text-inverse);
}

.hero-desc {
  font-size: var(--ds-text-base);
  line-height: 1.5;
  color: hsla(0, 0%, 100%, 0.84);
  max-width: 560px;
  margin: 0 auto;
}

/* 城市定位药丸（点击可改城市）*/
.hero-location {
  margin-top: var(--ds-space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: hsla(0, 0%, 100%, 0.18);
  backdrop-filter: blur(4px);
  padding: 6px 10px 6px 14px;
  border-radius: 20px;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-inverse);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero-location:active {
  background: hsla(0, 0%, 100%, 0.28);
}
.hero-location.is-visible {
  opacity: 1;
}

.hero-location__icon {
  display: inline-flex;
  width: var(--ds-text-lg);
  height: var(--ds-text-lg);
  background: hsla(0, 0%, 100%, 0.3);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}
.hero-location__text { white-space: nowrap; }
.hero-location__arrow {
  font-size: var(--ds-text-sm);
  opacity: 0.7;
  margin-left: 2px;
}

/* ═══════════════════════ 圆角面板 & Section 标题 ═══════════════════════ */

.home-panel,
.home-section {
  margin: var(--ds-space-4);
  background: var(--ds-bg-surface);
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
  box-shadow: var(--ds-shadow-xs);
}

.home-section__hd {
  padding: 14px var(--ds-space-4) 0;
}
.home-section__title {
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-primary);
  margin: 0;
}

/* v_top 同城寻宠列表 */
.home-nearby__count {
  font-size: var(--ds-text-base);
  color: var(--ds-text-tertiary);
  font-weight: var(--ds-weight-regular);
}
.home-nearby__list {
  padding: 0 var(--ds-space-4) var(--ds-space-3);
}
.home-nearby__list .weui-media-box {
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-border-subtle, #f0f0f0);
}
.home-nearby__list .weui-media-box:last-child {
  border-bottom: none;
}
.home-nearby__list .weui-media-box__thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
}
.home-nearby__list .weui-media-box__title {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
}
.home-nearby__list .weui-media-box__title a {
  color: var(--ds-text-primary);
  text-decoration: none;
}
.home-nearby__list .weui-media-box__desc {
  font-size: 13px;
  color: var(--ds-text-secondary);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.home-nearby__list .weui-media-box__info {
  font-size: 12px;
  color: var(--ds-text-tertiary);
}
/* 决策锚点段（套餐选择）：升级 typography 权重，从中段平铺中突围 */
.home-section--decision .home-section__title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-h2);
  letter-spacing: var(--ds-tracking-tight);
}
.home-section__desc {
  font-size: var(--ds-text-base);
  color: var(--ds-text-tertiary);
  margin-top: var(--ds-space-1);
}

/* 面板内 weui-cells 去默认外距与分割线 */
.home-panel .weui-cells,
.home-section .weui-cells {
  margin-top: 0;
  box-shadow: none;
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
}
.home-panel .weui-cells:before,
.home-panel .weui-cells:after,
.home-section .weui-cells:before,
.home-section .weui-cells:after {
  display: none;
}

/* ═══════════════════════ 物种 / 套餐网格（2 列）═══════════════════════ */

.selector-grid,
.plan-grid {
  display: grid;
  gap: var(--ds-space-4);
  padding: var(--ds-space-4);
}
.selector-grid { grid-template-columns: repeat(2, 1fr); }
.plan-grid     { grid-template-columns: repeat(2, 1fr); }

.selector-item,
.plan-item {
  position: relative;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 14px var(--ds-space-3);
  background: var(--ds-bg-surface);
  overflow: hidden;
}
.selector-item input,
.plan-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.selector-item.is-active,
.plan-item.is-active {
  border-color: var(--ds-color-primary);
  box-shadow: 0 0 0 1px rgba(var(--ds-color-primary-rgb), 0.15);
  background: rgba(var(--ds-color-primary-rgb), 0.04);
}

.selector-item__title,
.plan-item__name {
  display: block;
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-primary);
}
.selector-item__title { text-align: center; }

.selector-item__icon {
  display: block;
  font-size: 48px;
  line-height: 1;
  text-align: center;
  margin-bottom: 6px;
}

.selector-item__desc,
.plan-item__desc {
  display: block;
  margin-top: 6px;
  font-size: var(--ds-text-xs);
  line-height: 1.5;
  color: var(--ds-text-tertiary);
}

.plan-item__price {
  display: block;
  margin-top: 10px;
  color: var(--ds-color-primary);
  font-size: var(--ds-text-display);
  font-weight: var(--ds-weight-bold);
}
.plan-item__price small {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-regular);
  color: var(--ds-text-tertiary);
}

.plan-item__badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 10px;
  border-radius: 0 0 0 10px;
  background: var(--ds-color-primary);
  color: var(--ds-text-inverse);
  font-size: var(--ds-text-xxs);
}

/* ═══════════════════════ 文本计数器 ═══════════════════════ */

.textarea-counter {
  padding: var(--ds-space-2) var(--ds-space-4) 14px;
  font-size: var(--ds-text-xs);
  color: var(--ds-text-tertiary);
  text-align: right;
}

/* ═══════════════════════ 图片上传（3 列方格）═══════════════════════ */

.uploader-panel {
  padding: var(--ds-space-4);
}
.uploader-panel .weui-uploader { width: 100%; }
.uploader-panel .weui-uploader__bd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.uploader-panel .weui-uploader__files { display: contents; }
.uploader-panel .weui-uploader__file {
  position: relative;
  float: none;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  margin: 0;
  border-radius: var(--ds-radius-sm);
}
.uploader-panel .weui-uploader__hd { text-align: right; }
.uploader-panel .weui-uploader__input-box {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  float: none;
  margin: 0;
  border-color: var(--ds-text-inverse);
  background: var(--ds-bg-muted);
}
.uploader-panel .weui-uploader__input-box::before,
.uploader-panel .weui-uploader__input-box::after {
  background-color: var(--ds-text-tertiary);
  width: 3px;
}
.uploader-panel .weui-uploader__input-box::after {
  width: 39.5px;
  height: 3px;
}

.uploader-status {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.45);
  color: var(--ds-text-inverse);
  font-size: var(--ds-text-xxs);
  text-align: center;
  padding: 4px 0;
}

.weui-dialog__btn.warn {
  color: var(--ds-color-danger);
}

/* ═══════════════════════ 手机号隐私气泡 ═══════════════════════ */

.phone-shield {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ds-color-primary);
  cursor: pointer;
}
.phone-shield .weui-icon-safe-success {
  font-size: var(--ds-text-h2);
}

.phone-shield__tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 200px;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  background: rgba(0, 0, 0, 0.78);
  color: var(--ds-text-inverse);
  font-size: var(--ds-text-xs);
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  white-space: normal;
  z-index: 10;
}
.phone-shield__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: var(--ds-space-3);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.78);
}
.phone-shield:hover .phone-shield__tip,
.phone-shield:active .phone-shield__tip {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════ 协议同意框 ═══════════════════════ */

.agreement-box {
  padding: var(--ds-space-4);
}
.agreement-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
}
.agreement-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 21px;
  cursor: pointer;
}
.agreement-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.agreement-check__icon {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ds-border-default);
  box-sizing: border-box;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.agreement-check input:checked + .agreement-check__icon {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary);
}
.agreement-check input:checked + .agreement-check__icon::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--ds-text-inverse);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.agreement-row .weui-agree__text {
  color: var(--ds-text-secondary);
}
.agreement-row .weui-agree__text a {
  color: var(--ds-color-link);
  text-decoration: none;
}

/* ═══════════════════════ 提交 & Footer ═══════════════════════ */

.submit-box {
  padding: 0 var(--ds-space-4) var(--ds-space-4);
}
.submit-box .weui-btn {
  margin-top: 0;
}

.footer-panel {
  padding: var(--ds-space-5) var(--ds-space-4) var(--ds-space-5);
  margin: var(--ds-space-5) var(--ds-space-4) 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.footer-panel .weui-footer {
  margin: 0;
}

/* ═══════════════════════ Toast 浮层 ═══════════════════════ */

.home-toast {
  position: fixed;
  left: 50%;
  bottom: calc(100px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 999;
  background: rgba(0, 0, 0, 0.78);
  color: var(--ds-text-inverse);
  border-radius: 999px;
  padding: 10px var(--ds-space-4);
  font-size: var(--ds-text-sm);
  display: none;
}

/* ═══════════════════════ 杂项覆盖 ═══════════════════════ */

.city-picker .picker-item {
  font-size: var(--ds-text-lg);
}

.home-panel .weui-select {
  color: var(--ds-color-link);
}

.home-panel input[type='date'].weui-input {
  text-align: left !important;
}

/* ═══════════════════════ WeUI Uploader 图片上传（from common.css 章节 11） ═══════════════════════ */
/* 仅 home/index.php 使用 */

.weui-uploader__file {
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}

.weui-uploader__input-box {
  border-radius: var(--ds-radius-md);
  border-color: var(--ds-text-disabled);
  transition: border-color var(--ds-duration-fast) ease;
}

.weui-uploader__input-box:active {
  border-color: var(--ds-color-primary);
}

/* ═══════════════════════ SPEC 1.1 · Hero Disclosure ═══════════════════════ */
/* 服务边界声明：从 hero-desc 末尾的 12px 灰字提升为视觉权重适中的卡片 */

.home-disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  margin: 0 var(--ds-space-4) var(--ds-space-4);
  background: var(--ds-bg-subtle);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-secondary);
}

.home-disclosure__icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: var(--ds-text-lg);
  color: var(--ds-text-tertiary);
}

.home-disclosure__text {
  margin: 0;
  flex: 1;
}

.home-disclosure__text strong {
  color: var(--ds-text-primary);
  font-weight: var(--ds-weight-semibold);
}