/*
* page-contact.css
* お問い合わせページのスタイル定義
* 
* セクション:
* - ページ構造: コンテナとフォーム全体のレイアウト
* - フォームフィールド: 入力フィールド（テキスト、セレクト）のスタイル
* - タブナビゲーション: 予約フォーム/その他の切り替えタブ
* - 確認画面: 送信前の確認画面レイアウト
* - メッセージ: 成功/エラーメッセージの表示
*/

/* =====================================
   PAGE STRUCTURE - ページコンテナ
   ===================================== */
.contact-page-wrapper {
    width: 70%;
    margin: 0 auto;
}

/* =====================================
   FORM LAYOUT - フォーム全体
   ===================================== */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* =====================================
   FORM FIELDS - 入力フィールド
   ===================================== */

/* 基本的なフォームフィールド（テキスト・セレクト） */
.contact-name,
.contact-email-address,
.contact-ticket-livedate,
.contact-ticket-count {
    width: 100%;
    border-bottom: 1px solid var(--site-border-color);
}

.contact-name label,
.contact-email-address label,
.contact-ticket-livedate label,
.contact-ticket-count label {
    display: block;
    width: 30%;
    margin-bottom: 5px;
}

.contact-name input,
.contact-email-address input,
.contact-ticket-livedate select,
.contact-ticket-count select {
    width: 100%;
    border: none;
    outline: none;
    padding: 5px 0;
    text-align: center;
    /* 注: 下線はフィールドの親要素 .contact-* で定義 */
}

/* メッセージフィールド */
.contact-message {
    width: 100%;
    border-bottom: 1px solid var(--site-border-color);
}

.contact-message textarea {
    width: 100%;
    border: none;
    outline: none;
    padding: 10px 0;
    resize: vertical;
    line-height: 1.6;
}

/* =====================================
   TICKET NOTES - 注意事項
   ===================================== */
.contact-notes {
    background-color: #fafafa;
    /* border-left: 4px solid #ff6b6b; */
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 4px;
}

.contact-notes h3 {
    margin: 0 0 15px 0;
    font-size: var(--fs-h4);
    color: #333;
}

.contact-notes ul {
    margin: 0;
    padding-left: 25px;
    list-style: disc;
}

.contact-notes li {
    margin-bottom: 12px;
    line-height: 1.6;
    color: #444;
    font-size: var(--fs-small);
}

/* 旧セレクタの互換性維持 */
.ticket-notes {
    all: inherit;
}

/* 送信ボタン */
.contact-form button {
    width: 30%;
    padding: 10px;
    border: none;
    background-color: var(--form-button-background-color);
    color: var(--form-button-text-color);
    cursor: pointer;
    margin: 0 auto;
    display: block;
}

/* =====================================
   TAB NAVIGATION - タブ切り替え
   ===================================== */
/* 
 * 機能: 「チケット予約」と「その他お問い合わせ」の切り替えタブ
 * JS側で .active クラス を付与して表示内容を変更
 */
.contact-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 30px;
    /* 注: ボーダーは .contact-tab-btn.active で個別に表示 */
}

.contact-tab-btn {
    background-color: transparent;
    border: none;
    font-size: var(--fs-tab);
    cursor: pointer;
    padding: 10px 0px;
    margin-right: 10px;
}

/* アクティブ状態のタブ: 下線と太字で強調 */
.contact-tab-btn.active {
    border-bottom: 2px solid var(--site-text-color);
    font-weight: bold;
}

.contact-tab-btn:hover {
    color: var(--site-text-color);
}

/* =====================================
   CONFIRMATION SCREEN - 確認画面
   ===================================== */
.contact-confirm {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-confirm div {
    padding: 10px 0;
    /* border-bottom: 1px solid var(--site-border-color); */
}

/* =====================================
   SELECT BOXES - セレクトボックス（カスタマイズ）
   ===================================== */
/* 
 * 機能: チケット予約フォームのドロップダウンメニュー
 * -webkit-appearance: noneでブラウザデフォルトスタイルを上書き
 */
.contact-ticket-livedate select,
.contact-ticket-count select {
    width: 100%;
    border: none;
    /* 注: 下線はセレクトボックスの親要素 .contact-ticket-* で定義 */
    outline: none;
    padding: 5px 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: var(--fs-input);
}

/* =====================================
   MESSAGES - メッセージ表示（成功・エラー）
   ===================================== */
/* 成功メッセージ: 緑色でポジティブな状態を表示 */
.contact-success {
    padding: 15px;
    background-color: #f0f8f0;
    border-left: 4px solid #4caf50;
    margin-bottom: 20px;
}

/* エラーメッセージ: 赤色でネガティブな状態を表示 */
.contact-errors {
    padding: 15px;
    background-color: #fff8f0;
    border-left: 4px solid #f44336;
    margin-bottom: 20px;
}

/* エラーメッセージ内のリスト表示 */
.contact-errors ul {
    margin: 0;
    padding-left: 20px;
}

/* =====================================
   MOBILE RESPONSIVE - スマートフォン対応
   ===================================== */

/* タブレット以下: max-width 768px */
@media (max-width: 768px) {
    .contact-page-wrapper {
        width: 95%;
        padding: 0 10px;
    }

    .contact-form {
        gap: 20px;
    }

    /* 送信ボタンを100%幅に */
    .contact-form button {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
    }

    /* タブナビゲーションの調整 */
    .contact-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }

    .contact-tab-btn {
        padding: 8px;
        margin-right: 5px;
    }

    /* 注意事項のスタイル調整 */
    .contact-notes {
        padding: 18px;
        margin-bottom: 25px;
    }

    .contact-notes h3 {
        font-size: var(--fs-info);
        margin-bottom: 12px;
    }

    .contact-notes li {
        margin-bottom: 10px;
        font-size: var(--fs-small);
    }
}

/* スマートフォン: max-width 600px */
@media (max-width: 600px) {
    .contact-page-wrapper {
        width: 90%;
        margin: 0 auto;
    }

    .contact-form {
        gap: 15px;
    }

    /* フォームフィールドのスタイル調整 */
    .contact-name,
    .contact-email-address,
    .contact-ticket-livedate,
    .contact-ticket-count,
    .contact-message {
        width: 100%;
    }

    /* ラベルも100%幅に調整 */
    .contact-name label,
    .contact-email-address label,
    .contact-ticket-livedate label,
    .contact-ticket-count label {
        width: 100%;
        margin-bottom: 8px;
    }

    .contact-name input,
    .contact-email-address input,
    .contact-ticket-livedate select,
    .contact-ticket-count select {
        font-size: 16px;
        /* iOSのズーム問題を防止 */
        padding: 8px 0;
    }

    /* メッセージフィールドの調整 */
    .contact-message textarea {
        font-size: 16px;
        padding: 10px 0;
        min-height: 120px;
    }

    /* 送信ボタン */
    .contact-form button {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
    }

    /* タブナビゲーション */
    .contact-tabs {
        flex-direction: row;
        gap: 0;
    }

    .contact-tab-btn {
        flex: 1;
        padding: 10px 5px;
        margin-right: 0;
        text-align: center;
    }

    .contact-tab-btn.active {
        border-bottom: 2px solid #000000;
    }

    /* 確認画面の調整 */
    .contact-confirm div {
        padding: 10px 0;
    }

    /* メッセージの調整 */
    .contact-success,
    .contact-errors {
        padding: 12px;
    }

    /* 注意事項のスマホ対応 */
    .contact-notes {
        padding: 15px;
        margin-bottom: 20px;
        border-left-width: 3px;
    }

    .contact-notes h3 {
        font-size: var(--fs-info);
        margin-bottom: 12px;
    }

    .contact-notes ul {
        padding-left: 20px;
    }

    .contact-notes li {
        margin-bottom: 8px;
        font-size: var(--fs-small);
        line-height: 1.5;
    }
}

/* =====================================
   SWIPE ANIMATION - スワイプアニメーション
   ===================================== */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.contact-tab-content.slide-in {
    animation: slideIn 0.4s ease-in-out forwards;
}

.contact-tab-content.slide-out {
    animation: slideOut 0.4s ease-in-out forwards;
}