/* ============================================================ */
/* site.css — สไตล์กลางที่ใช้ร่วมกันทุกหน้า (view.html / connect.html) */
/* ดีไซน์อิงจากเว็บ canniehouse: แถบนำทางขาว, แบนเนอร์ม่วงเทา, ปุ่มสีแมกเจนตา, การ์ดขอบบาง */
/* ============================================================ */

:root {
  --brand: #f217cf;        /* สีหลัก: แมกเจนตา */
  --brand-dark: #d10eb0;
  --brand-soft: #fde3f8;   /* พื้นปุ่มอ่อน */
  --brand-ink: #b8009c;    /* ตัวหนังสือบนพื้นอ่อน */
  --text: #1d1d22;
  --muted: #8b8b95;
  --border: #e7e7ec;
  --gray: #f3f3f6;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: #fff; color: var(--text);
  font-family: "Prompt", "Sarabun", -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.65;
}
.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }

/* ---------- แถบนำทางด้านบน ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--border); }
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 52px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: 0.3px; }
.brand img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.nav { display: flex; align-items: stretch; gap: 20px; margin-left: 6px; height: 100%; }
.nav a {
  display: flex; align-items: center; gap: 6px; height: 100%; color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--brand-ink); }
.nav a.active { color: var(--brand-ink); border-bottom-color: var(--brand); }
.nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- แบนเนอร์ (hero) ม่วงเทาพร้อมประกายดาว ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: center; padding: 44px 16px 96px; }
.hero::before { content: ""; position: absolute; inset: -24px; z-index: -2; background: url(img/bg.jpg) center / cover; filter: blur(8px); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 7% 28%, rgba(255, 255, 255, 0.6) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 19% 72%, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 31% 20%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 78%, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.6) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 91% 66%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    linear-gradient(rgba(104, 86, 118, 0.88), rgba(84, 68, 100, 0.92));
}
.hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.hero p { margin: 0 auto; max-width: 620px; font-size: 13.5px; color: #f1e7f6; }

/* ---------- การ์ด / กล่องประกาศ ---------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 10px rgba(60, 40, 80, 0.06); }
.pull-up { position: relative; z-index: 2; margin-top: -60px; }
.notice { margin-top: 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: #3a3a42; background: #fff; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 12px; }
.section-head h2 { margin: 0; font-size: 15px; font-weight: 600; }

/* ---------- ฟอร์ม ---------- */
.field-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.field-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.input {
  width: 100%; padding: 11px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--gray);
  font: inherit; color: var(--text); outline: none; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: #a3a3ad; }
.input:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(242, 23, 207, 0.15); }

/* ---------- ปุ่ม ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px;
  border: 1px solid transparent; border-radius: 4px; background: var(--brand); color: #fff;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.btn:hover:not(:disabled) { background: var(--brand-dark); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); }
.btn-soft:hover:not(:disabled) { background: #f9cdf1; }
.btn-lg { padding: 11px 20px; font-size: 14px; }

/* ---------- ท้ายหน้า ---------- */
.site-footer { margin-top: 48px; padding: 16px 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-footer img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; }

@media (max-width: 640px) {
  .hero { padding: 32px 16px 88px; }
  .hero h1 { font-size: 22px; }
}