/* 分割した姓/名の裏で保持している FluentCart 標準の氏名欄を隠す。
   required は外してあるので、非表示でもブラウザの検証を妨げない。 */
.jffc_hidden_field {
    display: none !important;
}

/* 姓・名を横並びにする。
 *
 * FluentCart は氏名とメールを縦に連結した1つの入力グループとして描画し、
 * 先頭の欄に上側の角丸、末尾の欄に下側の角丸を当てている。
 * 姓・名を横に並べるとこの前提が崩れるため、角丸も引き取って整える。
 *
 * 以前は inline-block + calc(50% - 4px) で並べていたが、
 * インライン要素間の空白ぶんだけ右端が短くなり、下のメール欄と揃わなかった。
 * 親を flex にすると空白が無視されるので、ちょうど半分ずつに割れる。
 */
.fct_checkout_input_group {
    display: flex;
    flex-wrap: wrap;
}

.fct_checkout_input_group > * {
    flex: 0 0 100%;
    min-width: 0;
}

.fct_checkout_input_group > #fct_wrapper_billing_last_name,
.fct_checkout_input_group > #fct_wrapper_billing_first_name,
.fct_checkout_input_group > #fct_wrapper_shipping_last_name,
.fct_checkout_input_group > #fct_wrapper_shipping_first_name {
    flex: 0 0 50%;
}

/* 姓は左上だけ、名は右上だけを丸める。
 * 8px は FluentCart 側の角丸に合わせた値。
 *
 * 姓はグループの :first-child にあたり、FluentCart が
 *   .fct_checkout_input_group .fct_input_wrapper:first-child input:not(#billing_city, ...)
 * という詳細度の高いルール（:not の中に id があるぶん id 1つぶん加算される）で
 * 上側の角丸を当てている。素直に詳細度で勝てないため !important で上書きする。 */
.fct_checkout_input_group > #fct_wrapper_billing_last_name input,
.fct_checkout_input_group > #fct_wrapper_shipping_last_name input {
    border-top-right-radius: 0 !important;
}

.fct_checkout_input_group > #fct_wrapper_billing_first_name input,
.fct_checkout_input_group > #fct_wrapper_shipping_first_name input {
    border-top-left-radius: 0;
    border-top-right-radius: 8px;
    /* 姓との境界で線が二重にならないようにする。 */
    border-left-width: 0;
}

.jffc_postcode_loading {
    opacity: 0.6;
}

.jffc_postcode_error {
    margin: 4px 0 0;
    font-size: 0.85em;
    color: #b32d2e;
}

/* 「住所を追加」ダイアログの入力欄を日本式に並べ替える。
 *
 * このダイアログはチェックアウト本体とは別のフォームで、
 * 住所ラベルや氏名を含む。ラッパーに id が振られているので order で並べ替える。
 *
 *   住所ラベル → 氏名 → 国 → 郵便番号 → 都道府県 → 市区町村 → 番地 → 建物名
 *
 * 市区町村と郵便番号は #billing_city_zip_section という別の入れ子の中に
 * 2カラムでまとめられている。そのままでは郵便番号を都道府県より上に出せないので、
 * 入れ子を display:contents で解体し、中の2つを親の flex 直下に出してから並べ替える。
 *
 * 解体後の要素は DOM 上は入れ子のままなので、子セレクタ（>）では拾えない。
 * すべて子孫セレクタで書く必要がある。 */
#billing_city_zip_section,
#shipping_city_zip_section,
#billing_city_zip_section > .fct_form_section_body,
#shipping_city_zip_section > .fct_form_section_body {
    display: contents;
}

/* FluentCart が .fct_add_new_address_form を含む詳細度の高いルールで
 * grid を指定しているため、こちらも同じ形にして上回る。 */
.fct_add_new_address_form #billing_city_zip_section .fct_checkout_input_group,
.fct_add_new_address_form #shipping_city_zip_section .fct_checkout_input_group {
    display: contents;
}

.fct_checkout_input_group #billing_label_wrapper,
.fct_checkout_input_group #shipping_label_wrapper { order: 10; }

.fct_checkout_input_group #billing_name_wrapper,
.fct_checkout_input_group #shipping_name_wrapper { order: 20; }

.fct_checkout_input_group #billing_country_wrapper,
.fct_checkout_input_group #shipping_country_wrapper { order: 30; }

.fct_checkout_input_group #billing_postcode_wrapper,
.fct_checkout_input_group #shipping_postcode_wrapper { order: 40; }

.fct_checkout_input_group #billing_state_wrapper,
.fct_checkout_input_group #shipping_state_wrapper { order: 50; }

.fct_checkout_input_group #billing_city_wrapper,
.fct_checkout_input_group #shipping_city_wrapper { order: 60; }

.fct_checkout_input_group #billing_address_1_wrapper,
.fct_checkout_input_group #shipping_address_1_wrapper { order: 70; }

.fct_checkout_input_group #billing_address_2_wrapper,
.fct_checkout_input_group #shipping_address_2_wrapper { order: 80; }

.fct_checkout_input_group #billing_business_details_section,
.fct_checkout_input_group #shipping_business_details_section { order: 90; }