/**
 * POWERFUL CARE フォーム関連スタイル
 * 入力欄のフォーカス、数量スピナー非表示、ステップ切り替え等。
 */

/* フォーム要素のフォーカス時の枠色・シャドウ
 * カート（.step-section）・問い合わせ（.form-section）のフォームにのみ適用。
 * トップページのメールマガジン登録フォームは 01_index と同様、Tailwind の focus:border-brand-sage を使用するため除外。 */
.form-section input[type="text"],
.form-section input[type="email"],
.form-section input[type="tel"],
.form-section input[type="number"],
.form-section select,
.form-section textarea,
.step-section input[type="text"],
.step-section input[type="email"],
.step-section input[type="tel"],
.step-section input[type="number"],
.step-section select,
.step-section textarea,
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form select,
.auth-form textarea {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-section input:focus,
.form-section select:focus,
.form-section textarea:focus,
.step-section input:focus,
.step-section select:focus,
.step-section textarea:focus,
/* ログイン・新規登録フォーム用（.form-section の display:none は適用しない） */
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
    outline: none;
    border-color: #C47B5A;
    box-shadow: 0 0 0 1px rgba(196, 123, 90, 0.2);
}

/* 数量入力のスピナーボタン非表示（カート画面等） */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* カート・問い合わせのステップ切り替え用。
 * .active が付いた要素のみ表示。opacity でフェードインする。
 */
.step-section,
.form-section {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.step-section.active,
.form-section.active {
    display: block;
    opacity: 1;
}

/* 問い合わせページのステップインジケーター用 */
.step-indicator {
    position: relative;
}
.step-indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #E5E2DC;
    z-index: 0;
}

/* カートのステップインジケーター：円が進行線より手前に表示される */
#progress-container .step-item {
    position: relative;
    z-index: 1;
}