/**
 * CF7 Datetime Field - スタイル
 */

/* カスタム日時入力のラッパー */
.cf7-datetime-custom-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* 改行しないように変更 */
}

/* 日付入力 */
.cf7-datetime-custom-wrapper .cf7-datetime-date {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    min-width: 180px; /* カレンダー時より少し広めに設定 */
    background-color: #fff;
}

/* 時・分セレクト */
.cf7-datetime-custom-wrapper .cf7-datetime-hour,
.cf7-datetime-custom-wrapper .cf7-datetime-minute {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    min-width: 60px;
    background-color: #fff;
    cursor: pointer;
}

/* セパレーター */
.cf7-datetime-custom-wrapper .cf7-datetime-separator {
    color: #666;
    margin: 0 4px;
}

.cf7-datetime-custom-wrapper .cf7-datetime-colon {
    color: #666;
    font-weight: bold;
    margin: 0 2px;
}

/* フォーカス時 */
.cf7-datetime-custom-wrapper .cf7-datetime-date:focus,
.cf7-datetime-custom-wrapper .cf7-datetime-hour:focus,
.cf7-datetime-custom-wrapper .cf7-datetime-minute:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

/* 必須フィールドのインジケーター */
.wpcf7-validates-as-required .cf7-datetime-custom-wrapper .cf7-datetime-date,
.wpcf7-validates-as-required .cf7-datetime-custom-wrapper .cf7-datetime-hour,
.wpcf7-validates-as-required .cf7-datetime-custom-wrapper .cf7-datetime-minute {
    border-left: 3px solid #d63638;
}

/* エラー状態 */
.wpcf7-not-valid .cf7-datetime-custom-wrapper .cf7-datetime-date,
.wpcf7-not-valid .cf7-datetime-custom-wrapper .cf7-datetime-hour,
.wpcf7-not-valid .cf7-datetime-custom-wrapper .cf7-datetime-minute {
    border-color: #d63638;
    background-color: #fff5f5;
}

/* バリデーションメッセージのスタイル */
.cf7-datetime-validation-message {
    display: inline-block;
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 0.9em;
    animation: cf7-datetime-fade-in 0.3s ease;
}

@keyframes cf7-datetime-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* datetime-localフィールドの基本スタイル（カスタム入力未使用時） */
input[type="datetime-local"].wpcf7-form-control {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

input[type="datetime-local"].wpcf7-form-control:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

/* 必須フィールドの視覚的表示 */
input[type="datetime-local"].wpcf7-form-control.wpcf7-validates-as-required {
    border-left: 3px solid #d63638;
}

/* エラー状態 */
input[type="datetime-local"].wpcf7-form-control.wpcf7-not-valid {
    border-color: #d63638;
    background-color: #fff5f5;
}

input[type="datetime-local"].wpcf7-form-control.wpcf7-not-valid:focus {
    border-color: #d63638;
    box-shadow: 0 0 0 1px #d63638;
}

/* Contact Form 7のバリデーションエラーメッセージ */
.wpcf7-form-control-wrap[data-name] .wpcf7-not-valid-tip {
    color: #d63638;
    font-size: 0.9em;
    margin-top: 5px;
    display: block;
}

/* モバイル対応 - 横一列表示を維持 */
@media (max-width: 768px) {
    .cf7-datetime-custom-wrapper {
        flex-wrap: nowrap; /* 改行しない */
        gap: 4px; /* スペースを少し狭く */
        overflow-x: auto; /* 幅が足りない場合はスクロール */
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-date {
        font-size: 16px; /* iOSの自動ズームを防ぐ */
        min-width: 120px; /* モバイルでは少し狭く */
        padding: 8px 6px;
        flex-shrink: 0; /* 縮小しない */
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-hour,
    .cf7-datetime-custom-wrapper .cf7-datetime-minute {
        font-size: 16px;
        min-width: 50px; /* モバイルでは少し狭く */
        padding: 8px 6px;
        flex-shrink: 0; /* 縮小しない */
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-separator {
        display: inline; /* モバイルでも表示 */
        font-size: 14px;
        flex-shrink: 0;
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-colon {
        font-size: 14px;
        margin: 0 1px;
        flex-shrink: 0;
    }
    
    input[type="datetime-local"].wpcf7-form-control {
        font-size: 16px;
        max-width: 100%;
    }
    
    .cf7-datetime-validation-message {
        display: block;
        margin-left: 0;
        margin-top: 8px;
    }
}

/* 小さいスマホ対応（320px以下） */
@media (max-width: 360px) {
    .cf7-datetime-custom-wrapper {
        gap: 2px;
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-date {
        min-width: 100px;
        padding: 6px 4px;
        font-size: 14px;
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-hour,
    .cf7-datetime-custom-wrapper .cf7-datetime-minute {
        min-width: 45px;
        padding: 6px 4px;
        font-size: 14px;
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-colon {
        font-size: 12px;
    }
}

/* タブレット対応 */
@media (min-width: 769px) and (max-width: 1024px) {
    .cf7-datetime-custom-wrapper .cf7-datetime-date {
        min-width: 180px;
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-hour,
    .cf7-datetime-custom-wrapper .cf7-datetime-minute {
        min-width: 70px;
    }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .cf7-datetime-custom-wrapper .cf7-datetime-date,
    .cf7-datetime-custom-wrapper .cf7-datetime-hour,
    .cf7-datetime-custom-wrapper .cf7-datetime-minute {
        background-color: #2d2d2d;
        color: #fff;
        border-color: #555;
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-date:focus,
    .cf7-datetime-custom-wrapper .cf7-datetime-hour:focus,
    .cf7-datetime-custom-wrapper .cf7-datetime-minute:focus {
        border-color: #4a9eff;
        box-shadow: 0 0 0 1px #4a9eff;
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-separator,
    .cf7-datetime-custom-wrapper .cf7-datetime-colon {
        color: #aaa;
    }
    
    input[type="datetime-local"].wpcf7-form-control {
        background-color: #2d2d2d;
        color: #fff;
        border-color: #555;
    }
    
    input[type="datetime-local"].wpcf7-form-control:focus {
        border-color: #4a9eff;
        box-shadow: 0 0 0 1px #4a9eff;
    }
    
    .cf7-datetime-validation-message {
        background-color: #4a4a2a;
        border-color: #8a8a4a;
        color: #fff3cd;
    }
}

/* アクセシビリティ: ハイコントラストモード対応 */
@media (prefers-contrast: high) {
    .cf7-datetime-custom-wrapper .cf7-datetime-date,
    .cf7-datetime-custom-wrapper .cf7-datetime-hour,
    .cf7-datetime-custom-wrapper .cf7-datetime-minute,
    input[type="datetime-local"].wpcf7-form-control {
        border-width: 2px;
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-date:focus,
    .cf7-datetime-custom-wrapper .cf7-datetime-hour:focus,
    .cf7-datetime-custom-wrapper .cf7-datetime-minute:focus,
    input[type="datetime-local"].wpcf7-form-control:focus {
        outline: 3px solid;
        outline-offset: 2px;
    }
}

/* RTL（右から左）言語対応 */
[dir="rtl"] .cf7-datetime-validation-message {
    margin-left: 0;
    margin-right: 10px;
}

[dir="rtl"] .wpcf7-validates-as-required .cf7-datetime-custom-wrapper .cf7-datetime-date,
[dir="rtl"] .wpcf7-validates-as-required .cf7-datetime-custom-wrapper .cf7-datetime-hour,
[dir="rtl"] .wpcf7-validates-as-required .cf7-datetime-custom-wrapper .cf7-datetime-minute {
    border-left: 1px solid #ddd;
    border-right: 3px solid #d63638;
}

[dir="rtl"] input[type="datetime-local"].wpcf7-form-control.wpcf7-validates-as-required {
    border-left: 1px solid #ddd;
    border-right: 3px solid #d63638;
}

/* プリントスタイル */
@media print {
    .cf7-datetime-custom-wrapper {
        display: inline;
    }
    
    .cf7-datetime-custom-wrapper .cf7-datetime-date,
    .cf7-datetime-custom-wrapper .cf7-datetime-hour,
    .cf7-datetime-custom-wrapper .cf7-datetime-minute {
        border: none;
        background: none;
        padding: 0;
    }
    
    .cf7-datetime-validation-message {
        display: none;
    }
}

/* 横スクロールバーのスタイリング（Webkit系ブラウザ） */
.cf7-datetime-custom-wrapper::-webkit-scrollbar {
    height: 4px;
}

.cf7-datetime-custom-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.cf7-datetime-custom-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}

.cf7-datetime-custom-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}