/* =========================================================
   contact.css（お問い合わせページ専用）
   - 共通フォームUIは base.css
   - contact固有のUIだけここ
   ========================================================= */

/* layout */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

/* =========================
   Alert（contact専用）
   ========================= */

.form-alert{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;

  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-soft);
  padding:12px;
  font-size:13px;
  line-height:1.65;
  margin:12px 0;
  box-shadow:var(--shadow-chip);
}

/* 左アクセントバー */
.form-alert::after{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:4px;
  background:transparent;
}

/* アイコン（Material Symbols） */
.form-alert::before{
  content:"info";
  font-family:'Material Symbols Rounded';
  font-size:20px;
  line-height:1;
  margin-top:1px;
  color:var(--text-muted);
  opacity:.95;
}

/* error */
.form-alert.is-error{
  background:#fdecec;
  border-color:rgba(244,168,163,0.95);
  color:#7f1d1d;
}
.form-alert.is-error::before{
  content:"error";
  color:#b91c1c;
}
.form-alert.is-error::after{
  background:var(--pette-red);
}

/* ok */
.form-alert.is-ok{
  background:#e9f7ef;
  border-color:rgba(180,227,211,0.95);
  color:#14532d;
}
.form-alert.is-ok::before{
  content:"check_circle";
  color:#15803d;
}
.form-alert.is-ok::after{
  background:var(--pette-green);
}

/* =========================
   Labels（contact固有）
   ========================= */

.form-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.form-badge{
  font-size:11px;
  color:var(--text-muted);
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:999px;
  padding:4px 8px;
  white-space:nowrap;
}

.req{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-main-deep);
  border:1px solid var(--accent-border);
  vertical-align:middle;
}

/* =========================
   Select iOS対策（contactだけ）
   ========================= */

.form-select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:36px;
}

/* =========================
   Readonly（contact固有）
   ========================= */

.readonly-field{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border-soft);
  background:#fff;
  color:var(--text-main);
}

.readonly-field .icon{
  font-family:'Material Symbols Rounded';
  font-size:18px;
  line-height:1;
  color:var(--text-muted);
}

/* =========================
   Buttons layout（contact専用）
   - ボタンの見た目は base.css
   - contact.css では配置だけ調整
   ========================= */

.form-actions{
  margin-top:2px;
}

.form-actions .btn{
  flex:1;
}

/* 小さめ端末で縦積み */
@media (max-width:360px){
  .form-actions{
    flex-direction:column;
  }

  .form-actions .btn{
    width:100%;
  }
}

/* honeypot */
.hp-field{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}