/* =========================================================
   sp_common.css：SP共通（見た目・操作性のみ） 大掃除・統合版
   対象：.gn-contact スコープ内のみ
   SP定義：max-width: 959px
   方針：
   - レイアウト（配置/段組/間隔）は sp_contact.css 側で担当
   - ここでは入力の押しやすさ、共通の見た目、select安定化、角丸に限定
========================================================= */

@media (max-width: 959px){

  /* =========================================================
     0) 基本
  ========================================================= */
  .gn-contact,
  .gn-contact *{
    box-sizing: border-box;
  }

  /* =========================================================
     1) 入力の押しやすさ（共通）
  ========================================================= */
  .gn-contact input[type="text"],
  .gn-contact input[type="email"],
  .gn-contact input[type="tel"],
  .gn-contact select,
  .gn-contact textarea{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;
    margin: 0 !important;
  }

  /* =========================================================
     2) 入力枠：角丸（見た目だけ・レイアウト非干渉）
  ========================================================= */
  .gn-contact input[type="text"],
  .gn-contact input[type="email"],
  .gn-contact input[type="tel"],
  .gn-contact select,
  .gn-contact textarea{
    border-radius: 8px !important; /* 好みで 6px / 10px も可 */
  }

  /* =========================================================
     3) textarea 仕様（あなたの理想）
  ========================================================= */
  .gn-contact textarea{
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;

    resize: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* =========================================================
     4) 必須バッジ（見た目）
     - sp_contact.css のレイアウトに干渉しない範囲で見た目を固定
  ========================================================= */
  .gn-contact .gn-required-badge{
    color: #FFF !important;
    background: #D93025 !important;

    height: 20px !important;
    line-height: 20px !important;
    padding: 0 10px !important;

    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    vertical-align: middle !important;
  }

  /* =========================================================
     5) SELECT 安定化（959以下で同じ見た目）
     - 文字の縦位置を中央に
     - テーマ側の背景矢印を無効化
     - 自前矢印（∨）は CF7 wrap に付与して上下センターを安定させる
  ========================================================= */

  /* select本体（共通） */
  .gn-contact select{
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;

    padding: 0 44px 0 14px !important; /* 右に矢印スペース */
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;

    border: 1px solid #dcdcdc !important;
    background-color: #fff !important;

    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     5-1) 自前矢印（∨）：ご用件（subject）のみ
     重要：
     - .gn-field は sp_contact.css 側で padding-top が入るため、基準にするとズレやすい
     - そこで select を直接包む .wpcf7-form-control-wrap を基準にする
  --------------------------------------------------------- */

  /* 既存の gn-field::after を使っていた場合は完全無効化（競合防止） */
  .gn-contact .gn-row.gn-row-basic.gn-row-subject .gn-field::after{
    content: none !important;
    display: none !important;
  }

  /* wrap を矢印の基準点にする */
  .gn-contact .gn-row.gn-row-basic.gn-row-subject .gn-field .wpcf7-form-control-wrap{
    position: relative !important;
    display: block !important;
  }

  /* wrap の上端＝selectの上端（padding-top等の影響を受けない） */
  .gn-contact .gn-row.gn-row-basic.gn-row-subject .gn-field .wpcf7-form-control-wrap::after{
    content: "∨" !important;
    position: absolute !important;
    right: 14px !important;
    top: 0 !important;
    height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    pointer-events: none !important;
    line-height: 1 !important;
    font-size: 14px !important;

    transform: none !important;
  }
}