/*
 * 旧テーマと EC-CUBE 4.3 標準CSSの差を埋める上書き。旧テーマのCSSの後に読む。
 * 4.3 の front.bundle.js が差し込む slick-theme の指定（ドットの絶対配置など）を、旧サイトの見た目に戻す。
 */

/* スライダーのサムネイル帯：旧サイトはスライダーの下に通常配置 */
.slick-dots {
    position: static;
    bottom: auto;
    margin: 0;
}

/* 強調色：4.3 標準（Bootstrap 5）が !important で青・赤系に上書きするため、旧テーマの色に戻す */
.text-primary { color: #DE5D50 !important; }
.text-danger  { color: #DE5D50 !important; }
.bg-primary   { color: #fff; background-color: #DE5D50 !important; }
.bg-danger    { color: #fff; background-color: #F99 !important; }

/* 注文手続きのステップ表示：4.3 は「ご注文手続き」「ご注文内容確認」が別画面のため、非会員は5段（旧テーマは4段まで） */
.flowline.step5 ul::before { width: 80%; left: 10%; }
.flowline.step5 ul li { width: 20%; }

/* 注文手続き：ヤマト決済プラグイン用の入れ物（.ec-orderPayment / .ec-rectHeading）に 4.3 標準の装飾が付かないようにする */
#shopping_confirm .ec-orderPayment,
#shopping_confirm .ec-rectHeading { margin: 0; padding: 0; background: none; border: 0; }

/* 注文手続きの合計欄：牛のイラストの上に余白（旧サイトと同じ間隔）、戻るボタンとの間隔 */
#summary_box__confirm_button { margin-top: 30px; }
#summary_box__confirm_button .otomo_back_button { margin-top: 10px; }

/* ヤマト決済のカード入力欄：プラグインの入力項目には旧テーマの form-control が付かないため、同じ見た目にする */
#yamato_payment42_credit input[type="text"],
#yamato_payment42_credit input[type="tel"],
#yamato_payment42_credit input[type="password"],
#yamato_payment42_credit input:not([type]),
#yamato_payment42_credit select {
    font-size: 16px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #C4CCCE;
    border-radius: 3px;
    background-color: #fff;
}
#yamato_payment42_credit select { min-width: 80px; }
#yamato_payment42_credit select[id$="_pay_way"] { min-width: 200px; }

/* ご利用ポイント：入力欄の右に「pt」を並べる */
.otomo_point_input { display: flex; align-items: center; gap: 8px; max-width: 260px; }
.otomo_point_input .form-control { flex: 1; width: auto; }

/* 選択欄：4.3 標準（Bootstrap 5）の .form-control が appearance:none にして下向き矢印が消えるため、ブラウザ標準の見た目に戻す */
select.form-control { -webkit-appearance: menulist; -moz-appearance: menulist; appearance: auto; }

/* 入力欄の文字の大きさ：旧テーマは html の文字サイズを 10px（62.5%）にしているため、4.3 標準の rem 指定（16px 前提）が
   6割ほどに縮む。会員登録・ログイン・会員情報変更・お問い合わせなどの入力欄を、旧サイトと同じ 16px にする */
.ec-input input, .ec-birth input, .ec-select input, .ec-telInput input,
.ec-zipInput input, .ec-numberInput input, .ec-halfInput input,
.ec-input textarea, .ec-select select, .ec-birth select,
.form-control, .form-select, .input-group-text { font-size: 16px; line-height: 1.5; }
.form-control, .input-group-text { padding: 6px 12px; }
.form-select { padding: 6px 36px 6px 12px; }
.form-control-sm, .form-select-sm { font-size: 14px; }
/* マイページの購入履歴 */
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle,
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice { font-size: 16px; }

/* お買い物ガイド（フッター）：配送の注意書きの見出しの上をあける */
.otomo_guide_gap { margin-top: 20px; }