/* ============================================================
   出租房报备页面 - 独立样式文件
   CSS REM 布局，根为 100px，所有文字最小 0.22rem
   参考基准：1rem = 100px
   ============================================================ */

/* ---------- 全局重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 100px; /* 1rem = 100px */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background-color: #f4f6f9;
  color: #333;
  min-height: 100vh;
  font-size: 0.22rem; /* 最小字号 0.22rem */
}

/* ---------- 头部导航栏 ---------- */
.gov-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: 0.8rem; line-height: 0.8rem;
  background: linear-gradient(135deg, #0d2137 0%, #1a3a5c 40%, #1e4a6e 100%);
  color: #fff; z-index: 999;
  display: flex; align-items: center;
  box-shadow: 0 0.02rem 0.12rem rgba(13,33,55,.35);
}
.gov-header .back-btn {
  width: 0.5rem; text-align: center; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gov-header .back-btn:active { opacity: .7; }
.gov-header .back-btn svg { width: 0.4rem; height: 0.4rem; fill: none; stroke: #fff; stroke-width: 2.2; }
.gov-header h1 {
  flex: 1; font-size: 0.22rem; font-weight: 600; letter-spacing: 0.01rem;
  text-align: center; padding-right: 0.5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gov-header::after {
  content: ''; display: block;
  position: absolute; bottom: 0; left: 0; right: 0; height: 0.02rem;
  background: linear-gradient(90deg, #2196F3, #64B5F6, #2196F3);
}

/* ---------- 主体内容区 ---------- */
.main-body {
  padding-top: 1rem; padding-bottom: 0.3rem; max-width: 6rem; margin: 0 auto;
}

/* ---------- 标题区 ---------- */
.page-title {
  margin: 0.16rem 0.18rem 0.12rem;
  padding: 0.14rem 0.16rem;
  background: linear-gradient(135deg, #1a3a5c, #234b73);
  border-radius: 0.08rem; color: #fff;
  display: flex; align-items: center; gap: 0.1rem;
  box-shadow: 0 0.03rem 0.1rem rgba(26,58,92,.25);
}
.page-title .title-icon {
  width: 0.32rem; height: 0.32rem; flex-shrink: 0;
  background: rgba(255,255,255,.15); border-radius: 0.08rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.22rem;
}
.page-title .title-text h2 { font-size: 0.22rem; font-weight: 700; }
.page-title .title-text p { font-size: 0.22rem; color: rgba(255,255,255,.65); margin-top: 0.02rem; letter-spacing: 0.005rem; }

/* ---------- 表单卡片 ---------- */
.form-card {
  margin: 0 0.14rem 0.14rem;
  background: #fff; border-radius: 0.1rem;
  box-shadow: 0 0.01rem 0.06rem rgba(0,0,0,.06);
  overflow: hidden;
}
.form-card-header {
  padding: 0.12rem 0.16rem 0;
  font-size: 0.22rem; font-weight: 700; color: #1a3a5c;
  display: flex; align-items: center; gap: 0.06rem;
  border-bottom: 0.01rem solid #eef2f7; padding-bottom: 0.1rem;
}
.form-card-header .dot {
  width: 0.04rem; height: 0.14rem; border-radius: 0.02rem;
  background: linear-gradient(180deg, #2196F3, #1565C0);
}

/* ---------- 表单项 ---------- */
.form-item {
  display: flex; align-items: center;
  padding: 0.12rem 0.16rem; border-bottom: 0.01rem solid #f0f3f7;
  min-height: 0.52rem;
}
.form-item:last-child { border-bottom: none; }
.form-item .label {
  width: 1.5rem; flex-shrink: 0;
  font-size: 0.22rem; color: #455a64; font-weight: 500;
  display: flex; align-items: center; gap: 0.02rem;
}
.form-item .label .required {
  color: #e53935; font-size: 0.22rem; font-weight: 700;
}
.form-item .input-wrap {
  flex: 1; display: flex; align-items: center;
}
.form-item input[type="text"],
.form-item input[type="tel"],
.form-item select {
  flex: 1; width: 100%;
  height: 0.46rem; padding: 0 0.1rem;
  border: 0.015rem solid #dde4ec; border-radius: 0.06rem;
  font-size: 0.22rem; color: #333; outline: none;
  transition: all .2s ease; background: #fafbfd;
}
.form-item input:focus,
.form-item select:focus {
  border-color: #2196F3; box-shadow: 0 0 0 0.03rem rgba(33,150,243,.12);
  background: #fff;
}
.form-item select {
  appearance: auto; -webkit-appearance: menulist;
  cursor: pointer; padding-right: 0.06rem;
}
.form-item .hint {
  font-size: 0.22rem; color: #90a4ae; margin-top: 0.04rem; line-height: 1.4;
}

/* ---------- 提交按钮 ---------- */
.submit-section { padding: 0.2rem 0.14rem 0; }
.btn-submit {
  width: 100%; height: 0.56rem; border: none; border-radius: 0.1rem;
  font-size: 0.22rem; font-weight: 700; letter-spacing: 0.04rem; color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #2196F3 100%);
  box-shadow: 0 0.04rem 0.14rem rgba(25,118,210,.35);
  transition: all .2s ease; position: relative; overflow: hidden;
}
.btn-submit:active {
  transform: translateY(0.01rem); box-shadow: 0 0.02rem 0.08rem rgba(25,118,210,.3);
}
.btn-submit:disabled {
  opacity: .6; cursor: not-allowed;
  transform: none; box-shadow: 0 0.02rem 0.08rem rgba(25,118,210,.2);
}
.btn-submit::before {
  content: ''; position: absolute; top: 0; left: -100%; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s ease;
}
.btn-submit:active::before { left: 100%; }

/* ---------- 底部说明 ---------- */
.footer-note {
  margin: 0.18rem 0.18rem 0.1rem;
  text-align: center; font-size: 0.22rem; color: #b0bec5; line-height: 1.6;
}

/* ---------- 级联提示 ---------- */
.cascade-hint {
  font-size: 0.22rem; color: #78909c; padding: 0 0.16rem 0.1rem;
}

/* ---------- 房间号提示 ---------- */
.fangjian-hint {
  font-size: 0.22rem; padding: 0 0.16rem 0.1rem;
}

/* ---------- 派出所显示 ---------- */
#paichushuoDisplay {
  font-size: 0.22rem; color: #78909c;
}

/* ---------- 房间号输入行 ---------- */
.room-input-row {
  display: flex; align-items: center; gap: 0.06rem;
  margin-bottom: 0.06rem;
}
.room-input-row:last-child { margin-bottom: 0; }

.room-input-row .room-input {
  flex: 1; height: 0.36rem;
  padding: 0 0.1rem;
  border: 0.015rem solid #dde4ec; border-radius: 0.06rem;
  font-size: 0.22rem; color: #333; outline: none;
  background: #fafbfd; transition: all .2s ease;
}
.room-input-row .room-input:focus {
  border-color: #2196F3; box-shadow: 0 0 0 0.03rem rgba(33,150,243,.12);
  background: #fff;
}

.room-btn {
  width: 0.46rem; height: 0.46rem; border: none; border-radius: 0.06rem;
  font-size: 0.22rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s ease;
}
.room-btn:active { transform: scale(.92); }
.room-btn-add { background: #e3f2fd; color: #1565C0; }
.room-btn-add:active { background: #bbdefb; }
.room-btn-del { background: #ffebee; color: #c62828; }
.room-btn-del:active { background: #ffcdd2; }

/* ---------- 确认弹窗中的房间标签 ---------- */
.confirm-room-tag {
  display: inline-block; padding: 0.02rem 0.08rem;
  background: #e3f2fd; color: #1565C0; border-radius: 0.04rem;
  font-size: 0.22rem; margin: 0.02rem 0.04rem 0.02rem 0;
}

/* ============================================================
   确认弹窗样式
   ============================================================ */
.confirm-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s ease;
}

.confirm-dialog {
  width: 85%; max-width: 4.8rem;
  background: #fff; border-radius: 0.12rem;
  overflow: hidden; box-shadow: 0 0.08rem 0.3rem rgba(0,0,0,.2);
  animation: slideUp .25s ease;
}

.confirm-title {
  padding: 0.18rem 0.16rem 0.1rem;
  font-size: 0.22rem; font-weight: 700; color: #1a3a5c;
  text-align: center; border-bottom: 0.01rem solid #eef2f7;
}

.confirm-body {
  padding: 0.12rem 0.16rem;
}

.confirm-row {
  display: flex; padding: 0.08rem 0;
  border-bottom: 0.01rem solid #f5f5f5;
}
.confirm-row:last-child { border-bottom: none; }

.confirm-label {
  width: 1rem; flex-shrink: 0;
  font-size: 0.22rem; color: #78909c;
}

.confirm-value {
  flex: 1; font-size: 0.22rem; color: #333;
  word-break: break-all;
}

.confirm-footer {
  display: flex; border-top: 0.01rem solid #eef2f7;
}

.confirm-btn {
  flex: 1; height: 0.46rem; border: none;
  font-size: 0.22rem; font-weight: 600; cursor: pointer;
  transition: background .2s ease;
}

.confirm-cancel {
  background: #f5f5f5; color: #666;
}
.confirm-cancel:active { background: #e8e8e8; }

.confirm-ok {
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #2196F3 100%);
  color: #fff;
}
.confirm-ok:active { opacity: .85; }

/* ============================================================
   结果提示弹窗样式
   ============================================================ */
.result-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s ease;
}

.result-dialog {
  width: 75%; max-width: 4rem;
  background: #fff; border-radius: 0.12rem;
  padding: 0.3rem 0.2rem 0.2rem;
  text-align: center; box-shadow: 0 0.08rem 0.3rem rgba(0,0,0,.2);
  animation: slideUp .25s ease;
}

.result-icon {
  width: 0.56rem; height: 0.56rem; margin: 0 auto 0.16rem;
}
.result-icon svg { width: 100%; height: 100%; }

.result-msg {
  font-size: 0.22rem; color: #333; line-height: 1.5; margin-bottom: 0.2rem;
}

.result-btn {
  width: 60%; height: 0.42rem; border: none; border-radius: 0.08rem;
  font-size: 0.22rem; font-weight: 600; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #2196F3 100%);
}
.result-btn:active { opacity: .85; }

/* ---------- 动画 ---------- */
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(0.3rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}