/* e 页专用 · 厄瓜多尔 · 询盘表单
   只被 public/e/index.html 引用，不动 personal.css，避免影响 a/b/c/d 页。
   设计要点：头图与表单底图同源衔接（接缝为零）；表单区压白色柔光保证可读；
   输入框一律纯白底深墨字，底图再丰富也压不住文字。 */

:root{
  --paper:#f8fbfd;          /* 与头图底边同色，接缝为零 */
  --ink:#16232e;
  --ink-2:#3f5462;
  --line:#d5e2ec;
  --line-2:#9dc4e6;
  --brand:#0a2d69;          /* 与头图口号同色 */
  --go-1:#12a065;
  --go-2:#0b8a55;
  --font:"Helvetica Neue",-apple-system,"SF Pro Text",system-ui,"Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}

body{
  min-height:100svh;
  padding:22px 14px 34px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  background:#eef5fa;
}

/* 卡片外的留白：用同一张厄瓜多尔底图做柔和氛围填充。
   白纱盖 74%~86%，画面只作为可见的质感，永远不会抢走表单文字。 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(180deg,
      rgba(248,251,253,.82) 0%,
      rgba(248,251,253,.74) 40%,
      rgba(238,245,250,.86) 100%),
    url("/assets/ecuador-bg.jpg");
  background-size:auto,cover;
  background-position:top,center 42%;
  background-repeat:no-repeat,no-repeat;
}

.sheet{
  width:100%;
  max-width:560px;
  border-radius:26px;
  overflow:hidden;
  background:var(--paper);
  border:1px solid #ffffffd9;
  box-shadow:0 20px 48px rgba(11,40,72,.20), 0 2px 6px rgba(11,40,72,.07);
}

/* ---------- 头图 ---------- */
.hero{position:relative;line-height:0;background:var(--paper)}
.hero-img{display:block;width:100%;height:auto}

/* 公司标识：头图右上角，用网页真实渲染的透明 PNG，不烧进照片像素，
   放大缩小都不会糊。白色柔边保证压在浅色天空上也看得清。 */
.hero-brand{
  position:absolute;
  top:9px;
  right:14px;
  width:min(45%,280px);
  height:auto;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95))
         drop-shadow(0 1px 5px rgba(255,255,255,.85));
}

/* ---------- 表单区：厄瓜多尔底图 + 渐入白柔光 ---------- */
.panel-area{
  position:relative;
  padding:11px 18px 4px;
  background-image:
    linear-gradient(180deg,
      #f8fbfd 0%,
      rgba(248,251,253,.97) 3%,
      rgba(248,251,253,.86) 12%,
      rgba(248,251,253,.90) 34%,
      rgba(248,251,253,.94) 62%,
      rgba(248,251,253,.97) 100%),
    url("/assets/ecuador-bg.jpg");
  background-size:auto,cover;
  background-position:top,center 42%;
  background-repeat:no-repeat,no-repeat;
}

/* ---------- 顶部一行：最低采购额标签 + 语言 ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 2px 10px;
}
.chip{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand);
  padding:7px 11px;
  border-radius:9px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(10,45,105,.16);
}
.lang{display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.86);border:1px solid rgba(10,45,105,.13)}
.lang-btn{
  appearance:none;border:0;cursor:pointer;
  font:800 11px/1 var(--font);letter-spacing:.04em;
  color:#5b7280;
  padding:7px 12px;border-radius:999px;background:transparent;
}
.lang-btn.is-on{background:var(--brand);color:#fff}

/* ---------- 表单卡片（磨砂玻璃，保证文字永远清晰） ---------- */
.card{
  position:relative;
  display:grid;
  gap:13px;
  padding:18px 16px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(1.05) blur(8px);
  backdrop-filter:saturate(1.05) blur(8px);
  box-shadow:0 12px 28px rgba(11,40,72,.11);
}

.field{display:flex;flex-direction:column;gap:6px}
.lab{font-size:12.5px;font-weight:750;line-height:1.35;color:#123342}

.e input,.e select,.e textarea{
  font:400 16px/1.35 var(--font);
  color:#14313e;
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  padding:11px 12px;
  width:100%;
  min-width:0;
}
.e textarea{height:98px;resize:vertical}
.e select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#5b7280 50%),linear-gradient(135deg,#5b7280 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:34px}
.e input::placeholder,.e textarea::placeholder{color:#93a7b4}
.e input:focus,.e select:focus,.e textarea:focus{
  outline:2px solid var(--line-2);
  outline-offset:1px;
  border-color:var(--line-2);
}
.e input:disabled,.e select:disabled,.e textarea:disabled{background:#f4f8fb;color:#8fa3af}

.hint{font-size:11px;font-weight:650;color:#5d7280}
.hint.ok{color:#0a7a50}
.hint.bad{color:#b45309}

#submitButton{
  height:50px;
  border:0;
  border-radius:12px;
  cursor:pointer;
  color:#fff;
  font:800 15px/1 var(--font);
  letter-spacing:.02em;
  background:linear-gradient(180deg,var(--go-1),var(--go-2));
  box-shadow:0 8px 18px rgba(11,138,85,.26);
  transition:filter .16s, transform .16s;
}
#submitButton:hover{filter:brightness(1.05)}
#submitButton:active{transform:translateY(1px)}
#submitButton:disabled{opacity:.65;cursor:wait;box-shadow:none}

#tip{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
#tip:empty{display:none}
#tip a{color:#0a7a50;font-weight:800}
/* 与 personal.css 里 .continue-wa 保持一致的观感（e 页不加载 personal.css） */
#tip .continue-wa{
  display:block;
  text-align:center;
  padding:13px 16px;
  margin-top:10px;
  border-radius:10px;
  background:#087951;
  color:#fff;
  text-decoration:none;
  font-size:17px;
}
#tip{scroll-margin-bottom:24px}

.foot{text-align:center;color:#5c7381;font-size:11.5px;padding:15px 4px 16px;letter-spacing:.01em}

@media (max-height:760px){ .e textarea{height:80px} }

@media (max-width:390px){
  body{padding:12px 8px 22px}
  .sheet{border-radius:20px}
  .panel-area{padding:12px 12px 2px}
  .card{padding:15px 13px 14px;gap:11px}
  .chip{font-size:10px;padding:6px 9px}
  .hero-brand{top:7px;right:11px;width:min(46%,240px)}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}