/* Simple stylesheet for Chinese pledge site */
:root{
  --bg:#ff5252;
  --card:#ff6b6b;
  --accent:#fff;
  --muted:#fff;
  --text:#fff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  background:#eaf4ec;
  min-height:100vh;
  position:relative;
}
body:not(.home-page){
  color:#1f3d2b;
}

body:not(.home-page) .container,
body:not(.home-page) .card,
body:not(.home-page) .table,
body:not(.home-page) .thank-you-container{
  background:#ffffff !important;
  border-radius:12px;
}

body:not(.home-page) h1,
body:not(.home-page) h2,
body:not(.home-page) h3{
  color:#1f3d2b !important;
}

.bg-slider{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
}

.bg-slider::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.38);
  z-index:2;
}

.bg-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 2s ease-in-out;
}

.bg-slide.active{
  opacity:1;
}
.container{
  max-width:720px;
  margin:0 auto;
  padding:48px 16px 64px;
  position:relative;
  z-index:5;
}
.hero{
  text-align:center;
  margin-bottom:28px;
}
.hero h1{
  font-size:48px;
  margin:6px 0 10px;
  color:var(--accent);
  font-weight:800;
  letter-spacing:1px;
  text-shadow:0 4px 20px rgba(0,0,0,0.25);
}
.hero .tagline{
  color:rgba(255,255,255,0.92);
  margin:0;
  font-size:17px;
}

.domain{margin-top:6px;color:var(--muted);font-size:13px}
.domain a{color:var(--muted);text-decoration:none}
.card{
  background:rgba(255,255,255,0.10);
  padding:24px;
  border-radius:20px;
  box-shadow:0 12px 40px rgba(0,0,0,0.18);
  margin-bottom:16px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.18);
}
.card.success-message{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
}
label{display:block;margin-bottom:12px;color:var(--text)}
input[type="text"],
input[type="email"],
input[type="date"],
select{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.15);

  background:rgba(255,255,255,0.92);

  color:#000 !important;
  font-size:16px;
  font-weight:600;

  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
select:focus{
  outline:none;
  border-color:rgba(0,0,0,0.2);
  background:#fff;
  color:#000 !important;
}
input::placeholder{
  color:rgba(0,0,0,0.45);
  font-size:15px;
  font-weight:500;
}
select option{
  background:#fff;
  color:#000;
}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn{padding:10px 14px;border-radius:8px;border:none;background:rgba(255,255,255,0.04);color:var(--text);cursor:pointer;text-decoration:none;display:inline-block}
.btn.primary{
  background:linear-gradient(135deg,#ff5252,#ff6b6b);
  color:#fff;
  font-weight:700;
  padding:14px 22px;
  border-radius:14px;

  box-shadow:
    0 10px 30px rgba(255,82,82,0.45),
    0 4px 12px rgba(0,0,0,0.15);

  transition:all .18s ease;
  animation:glowPulse 2.5s ease-in-out infinite;
}

.btn.primary:hover{
  transform:translateY(-2px) scale(1.02);

  box-shadow:
    0 16px 40px rgba(255,82,82,0.6),
    0 6px 16px rgba(0,0,0,0.2);
}

.btn.primary:active{
  transform:translateY(1px) scale(0.97);

  box-shadow:
    0 6px 16px rgba(255,82,82,0.35),
    0 3px 8px rgba(0,0,0,0.15);
}

.btn.primary:active{
  transform:translateY(1px) scale(0.98);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.notes{color:var(--muted);font-size:14px}
.hint{color:var(--muted);font-size:13px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form-row.stacked{grid-template-columns:1fr}
.form-col{flex:1}
.form-col label{margin-bottom:4px}
@media (max-width:520px){
  .hero h1{font-size:34px}
  .form-row{grid-template-columns:1fr}
  .container{padding:28px 14px 40px}
  .card{padding:18px;border-radius:16px}
}
/* inline rows: 我要 / 在 / 如果没有完成，我愿意支付 */
.form-row-inline{
  display:grid;
  grid-template-columns:max-content 1fr max-content;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.row-label{
  color:#fff !important;
  font-size:18px;
  font-weight:700;
  white-space:nowrap;
  margin:0;
}

.row-suffix{
  color:#fff !important;
  font-size:18px;
  font-weight:600;
  white-space:nowrap;
  margin:0;
}

.form-row-inline .form-col{
  margin:0;
}

.form-row-inline .form-col label{
  margin-bottom:0;
}

.form-row-inline input[type="text"],
.form-row-inline input[type="email"],
.form-row-inline input[type="date"],
.form-row-inline select{
  width:100%;
  margin:0;
}

@media (max-width:520px){
  .form-row-inline{
    grid-template-columns:1fr;
    gap:8px;
  }

  .row-label,
  .row-suffix{
    font-size:15px;
    margin:0;
  }
}

.flatpickr-calendar {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  border: none;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  overflow: hidden;
  transform: scale(1.08);
  transform-origin: top left;
}

.flatpickr-months {
  background: #fff;
}

.flatpickr-current-month {
  font-size: 18px;
  font-weight: 700;
  padding-top: 10px;
}

.flatpickr-weekdays {
  background: #fff;
}

span.flatpickr-weekday {
  color: #999;
  font-weight: 600;
}

.flatpickr-day {
  border-radius: 10px;
  font-weight: 500;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #ff5252;
  border-color: #ff5252;
  color: #fff;
}

.flatpickr-day:hover {
  background: rgba(255, 82, 82, 0.12);
  border-color: transparent;
}

.flatpickr-day.today {
  border-color: #ff5252;
}

.flatpickr-input[readonly] {
  cursor: pointer;
}

@keyframes glowPulse{
  0%{
    box-shadow:
      0 10px 30px rgba(255,82,82,0.35),
      0 4px 12px rgba(0,0,0,0.15);
  }

  50%{
    box-shadow:
      0 14px 38px rgba(255,82,82,0.55),
      0 6px 16px rgba(0,0,0,0.2);
  }

  100%{
    box-shadow:
      0 10px 30px rgba(255,82,82,0.35),
      0 4px 12px rgba(0,0,0,0.15);
  }
}

/* 强制所有输入内容变黑 */
input,
select {
  color:#000 !important;
  font-size:16px;
  font-weight:600;
}

/* 日期 input 特别处理（有些浏览器会单独控制） */
input[type="date"] {
  color:#000 !important;
}

/* select 下拉已选内容 */
select {
  color:#000 !important;
}

/* 下拉菜单里的选项 */
select option {
  color:#000;
  background:#fff;
}
/* ===== 首页前三行：最终稳定版 ===== */

/* 三行都占满整行 */
.form-row-main{
  display:grid;
  align-items:center;
  width:100%;
  column-gap:12px;
  margin-bottom:12px;
}

/* 第一行：我要 [长框] */
.form-row-goal{
  grid-template-columns:max-content minmax(0,1fr);
}

.form-row-goal .form-col{
  min-width:0;
}

.form-row-goal input{
  width:100%;
}

/* 第二行：在 [日期框] 之前完成 */
.form-row-date{
  grid-template-columns:max-content minmax(0,1fr) max-content;
}

.form-row-date .form-col{
  min-width:0;
}

.form-row-date input{
  width:100%;
}

.form-row-date .row-suffix{
  white-space:nowrap;
}

/* 第三行：如果没有完成，我愿意支付 [金额框] */
.form-row-amount{
  grid-template-columns:max-content minmax(400px,1fr);
}

.form-row-amount .amount-label{
  white-space:nowrap;
}

.form-row-amount .amount-col{
  min-width:0;
}

.form-row-amount .amount-col select{
  width:100%;
  min-width:340px;
  display:block;
}

/* 第三行右侧那个占位隐藏 */
.row-suffix-empty{
  display:none;
}

/* 手机端 */
@media (max-width:520px){
  .form-row-main,
  .form-row-goal,
  .form-row-date,
  .form-row-amount{
    grid-template-columns:1fr;
    row-gap:8px;
  }

  .form-row-amount .amount-col select{
    min-width:0;
  }

  .row-suffix-empty{
    display:none;
  }
}
.money-link-wrap{
  margin:-2px 0 18px 0;
  text-align:left;
}

.money-link{
  color:rgba(255,244,220,0.92);
  font-weight:600;
  text-decoration:underline;
  font-size:14px;
  letter-spacing:.2px;
  text-shadow:0 1px 8px rgba(0,0,0,0.18);
  transition:opacity .2s ease;
}

.money-link:hover{
  opacity:.7;
}