/*
Theme Name: Tozem Website
Theme URI: https://tozem.net
Author: Botarhythm Studio
Author URI: https://botarhythm.com
Description: Custom theme for Tozem Website
Version: 4.5.16
Text Domain: tozem
*/

/* ==========================================================================
   Contact Form 7 Custom Styles
   ========================================================================== */

/* フォーム全体の最大幅と中央揃え */
.wpcf7 {
    max-width: 800px;
    margin: 0 auto;
}

/* CF7が自動挿入する p 要素の余白を調整（無駄な改行スペースを削減） */
.wpcf7 p {
    margin-bottom: 1.5rem;
}

/* ラベルテキストのスタイル調整 */
.wpcf7 label {
    display: block;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: #374151;
    /* gray-700 */
    font-weight: 500;
}

/* CF7の入力欄を囲むラッパーをブロック化して全幅に */
.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* ただし、人数などの数字入力欄のラッパーはインライン化して横並びを維持 */
.wpcf7-form-control-wrap:has(input[type="number"]) {
    display: inline-block;
    width: auto;
    margin: 0 0.5rem;
}

/* 各種入力欄（テキスト、メール、テキストエリア等）の全幅化と装飾 */
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-email,
.wpcf7 .wpcf7-textarea,
.wpcf7 .wpcf7-date,
.wpcf7 .wpcf7-select,
.wpcf7 .wpcf7-number {
    width: 100% !important;
    max-width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    /* gray-300 */
    border-radius: 0.25rem;
    /* rounded */
    background-color: #ffffff;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    /* gray-800 */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-sizing: border-box;
    display: block;
}

/* 数字入力欄（人数など）の固有スタイル */
.wpcf7 .wpcf7-number {
    width: 80px !important;
    display: inline-block !important;
    padding: 0.5rem;
    text-align: right;
}

/* フォーカス時のスタイル */
.wpcf7 .wpcf7-text:focus,
.wpcf7 .wpcf7-email:focus,
.wpcf7 .wpcf7-textarea:focus,
.wpcf7 .wpcf7-date:focus,
.wpcf7 .wpcf7-select:focus,
.wpcf7 .wpcf7-number:focus {
    outline: none;
    border-color: #111827;
    /* gray-900 (テーマカラー) */
    box-shadow: 0 0 0 1px #111827;
}

/* 「その他ご要望」などのテキストエリアの最低高を確保 */
.wpcf7 .wpcf7-textarea {
    min-height: 180px;
    resize: vertical;
}

/* フォーム内のすべての入力要素のデフォルトリセット */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100% !important;
    max-width: none !important;
}

/* 数字入力は全幅にしない */
.wpcf7 input[type="number"] {
    width: 80px !important;
    max-width: none !important;
}

/* 送信ボタンのスタイル化（フッターの色 #111827 に合わせる） */
.wpcf7 input[type="submit"].wpcf7-submit,
.wpcf7 .wpcf7-submit {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    background-color: var(--color-black, #111827) !important;
    /* gray-900 */
    color: #ffffff !important;
    padding: 1rem 3rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border: none !important;
    border-radius: 0.25rem !important;
    /* rounded */
    cursor: pointer !important;
    transition: background-color 0.2s ease-in-out, transform 0.1s !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
    margin-top: 1.5rem !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ホバー時のリアクション */
.wpcf7 input[type="submit"].wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:hover {
    background-color: #374151 !important;
    /* gray-700 */
}

/* 送信ボタンが押された時のリアクション */
.wpcf7 input[type="submit"].wpcf7-submit:active,
.wpcf7 .wpcf7-submit:active {
    transform: scale(0.98) !important;
}

/* スピナー画像の余白調整 */
.wpcf7 .wpcf7-spinner {
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Smash Balloon: Admin-only error messages
   Force-hidden on the front end as a defensive fallback.
   These should never be visible to site visitors.
   ============================================================ */
.sbi_admin_error,
.sbi-sb-link+.sbi_admin_error {
    display: none !important;
}