/* 
 * デスクトップ版フォームコンポーネント
 * BEM命名規則に基づくフォーム構造
 */

/* Block: 基本フォーム */
.form {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 30px;
    padding: 20px;
    box-sizing: border-box;
    font-family: sans-serif;
}

/* Element: フォームタイトル */
.form__title {
    font-size: 24px;
    color: rgb(164, 11, 94);
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

/* Element: フォーム説明 */
.form__description {
    margin-bottom: 25px;
    text-align: center;
    line-height: 1.6;
    color: #333;
}

/* Element: フォームグループ */
.form__group {
    margin-bottom: 20px;
    position: relative;
}

/* Element: ラベル */
.form__label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

/* Element: 必須ラベル */
.form__label--required::after {
    content: '必須';
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    color: white;
    background-color: rgb(164, 11, 94);
    border-radius: 3px;
    padding: 2px 5px;
    vertical-align: middle;
}

/* Element: フォーム入力 */
.form__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form__input:focus {
    border-color: rgb(164, 11, 94);
    outline: none;
    box-shadow: 0 0 0 2px rgba(164, 11, 94, 0.2);
}

/* Element: テキストエリア */
.form__textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    min-height: 150px;
    resize: vertical;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form__textarea:focus {
    border-color: rgb(164, 11, 94);
    outline: none;
    box-shadow: 0 0 0 2px rgba(164, 11, 94, 0.2);
}

/* Element: セレクト */
.form__select {
    width: 100%;
    padding: 10px 30px 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%23333' d='M0 0h8L4 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 8px 6px;
    box-sizing: border-box;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form__select:focus {
    border-color: rgb(164, 11, 94);
    outline: none;
    box-shadow: 0 0 0 2px rgba(164, 11, 94, 0.2);
}

/* Element: チェックボックスとラジオボタングループ */
.form__check-group {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

/* Element: チェック入力 */
.form__check-input {
    margin-right: 8px;
}

/* Element: チェックラベル */
.form__check-label {
    font-size: 16px;
    color: #333;
}

/* Element: ヘルプテキスト */
.form__help-text {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #666;
}

/* Element: エラーメッセージ */
.form__error {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #d9534f;
}

/* Element: 送信ボタンコンテナ */
.form__actions {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 15px;
}

/* Modifier: 成功状態 */
.form__input--success,
.form__textarea--success,
.form__select--success {
    border-color: #5cb85c;
}

/* Modifier: エラー状態 */
.form__input--error,
.form__textarea--error,
.form__select--error {
    border-color: #d9534f;
}

/* Modifier: 無効状態 */
.form__input--disabled,
.form__textarea--disabled,
.form__select--disabled,
.form__input:disabled,
.form__textarea:disabled,
.form__select:disabled {
    background-color: #f5f5f5;
    border-color: #ddd;
    color: #777;
    cursor: not-allowed;
}

/* Modifier: 読み取り専用 */
.form__input--readonly,
.form__textarea--readonly,
.form__input[readonly],
.form__textarea[readonly] {
    background-color: #f9f9f9;
    border-color: #ddd;
}

/* Modifier: 二列レイアウト */
.form--two-columns .form__group {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    align-items: center;
}

.form--two-columns .form__label {
    margin-bottom: 0;
    text-align: right;
}

/* 
 * レガシーコード互換部分
 * 既存のコードとの互換性を保つための非BEMセレクタ
 */

/* 互換性: コンタクトフォーム */
.contact-form {
    /* .form と同等 */
    width: 100%;
    max-width: 800px;
    margin: 0 auto 30px;
    padding: 20px;
    box-sizing: border-box;
}

.form-group {
    /* .form__group と同等 */
    margin-bottom: 20px;
    position: relative;
}

.form-label {
    /* .form__label と同等 */
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.form-control {
    /* .form__input と同等 */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
    border-color: rgb(164, 11, 94);
    outline: none;
    box-shadow: 0 0 0 2px rgba(164, 11, 94, 0.2);
}

.textarea-control {
    /* .form__textarea と同等 */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    min-height: 150px;
    resize: vertical;
}

.required-label {
    /* .form__label--required の after 要素と同等 */
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    color: white;
    background-color: rgb(164, 11, 94);
    border-radius: 3px;
    padding: 2px 5px;
    vertical-align: middle;
}

.form-actions {
    /* .form__actions と同等 */
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 15px;
}

.form-text {
    /* .form__help-text と同等 */
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #666;
}

.form-error {
    /* .form__error と同等 */
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #d9534f;
}