/**
 * Dynamic Filter Pro フィルターフォーム用スタイル
 */

/* ==========================================================================
   フィルターフォーム
   ========================================================================== */

.dfp-filter-form-container {
    margin-bottom: 2rem;
    max-width: 100%;
    overflow-x: hidden;
}

.dfp-filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
}

.dfp-filter-form .dfp-form-actions {
    margin-top: 1rem;
}

.dfp-field-container {
    max-width: 100%;
    box-sizing: border-box;
}

/* 依存フィールドのグループ化 */
.dfp-field-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.dfp-field-group .dfp-field-container {
    flex: 0 0 auto;
}

/* スマホでは縦並びに変更 */
@media (max-width: 480px) {
    .dfp-field-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dfp-field-group .dfp-field-container {
        flex: 1 1 auto;
    }
}

.dfp-field-label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    color: #333;
}

/* セレクトフィールド */
.dfp-select-field {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    min-width: 150px;
}

.dfp-select-field:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

/* チェックボックスフィールド */
.dfp-checkbox-group {
    display: flex;
    flex-wrap: wrap;
   /* gap: 6px;*/
    max-width: 100%;
    box-sizing: border-box;
}

.dfp-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
    max-width: 100%;
    box-sizing: border-box;
    margin-right: 8px;
    margin-bottom: 4px;
}

.dfp-checkbox-field {
    margin-right: 5px;
    flex-shrink: 0;
}

.dfp-checkbox-text {
    font-size: 14px;
    white-space: nowrap;
}

/* ラジオボタンフィールド */
.dfp-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    box-sizing: border-box;
}

.dfp-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
    max-width: 100%;
    box-sizing: border-box;
    margin-right: 8px;
    margin-bottom: 4px;
}

.dfp-radio-field {
    margin-right: 5px;
    flex-shrink: 0;
}

.dfp-radio-text {
    font-size: 14px;
    white-space: nowrap;
}

/* 範囲指定フィールド */
.dfp-range-container {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

.dfp-range-min,
.dfp-range-max {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    transition: border-color 0.2s ease;
    min-width: 0;
}

.dfp-range-min {
    order: 0;
}

.dfp-range-max {
    order: 2;
}

.dfp-range-min:focus,
.dfp-range-max:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

/* 範囲指定フィールドの区切り文字 */
.dfp-range-container::before {
    content: "〜";
    color: #666;
    font-weight: bold;
    flex-shrink: 0;
    order: 1;
}

/* フリー入力フィールド */
.dfp-text-field {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.dfp-text-field:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

.dfp-text-field::placeholder {
    color: #999;
}

/* フォームアクション */
.dfp-form-actions {
    display: flex;
    gap: 8px;
}

.dfp-filter-button,
.dfp-reset-button {
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.dfp-filter-button {
    background-color: #0073aa;
    color: #fff;
    border-radius: 4px;
}

.dfp-filter-button:hover {
    background-color: #005a87;
    color: #fff;
    text-decoration: none;
}

.dfp-reset-button {
    background-color: #666;
    color: #fff;
    border-radius: 4px;
}

.dfp-reset-button:hover {
    background-color: #555;
    color: #fff;
    text-decoration: none;
}

/* ローディング */
.dfp-loading {
    position: relative;
    display: inline-block;
    color: transparent;
}

.dfp-loading:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid #ccc;
    border-radius: 50%;
    border-top-color: #0073aa;
    animation: dfp-spin 1s ease-in-out infinite;
}

@keyframes dfp-spin {
    to { transform: rotate(360deg); }
}

/* 依存フィールド */
.dfp-dependent-field.dfp-hidden {
    display: none;
}

.dfp-dependent-field {
    transition: opacity 0.3s ease;
}

.dfp-dependent-field.dfp-loading {
    opacity: 0.5;
}

.dfp-dependent-field.dfp-loading::after {
    content: '読み込み中...';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
}

/* 事前フィルター用の依存フィールド */
.dfp-preset-dependent {
    margin-top: 1rem;
}

.dfp-preset-dependent-group {
    margin-top: 0.5rem;
}

.dfp-preset-dependent-group::before {
    content: '条件に一致するオプション:';
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    font-style: italic;
}

/* 画像マッピング対応のチェックボックス・ラジオボタン */
.dfp-image-mapped {
    display: none; /* テキストを非表示 */
}

.dfp-text-unmapped {
    display: inline; /* 画像がない場合はテキストを表示 */
}

.dfp-checkbox-image,
.dfp-radio-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 5px;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.dfp-checkbox-label,
.dfp-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
    max-width: 100%;
    box-sizing: border-box;
    margin-right: 8px;
    margin-bottom: 4px;
    position: relative;
}

.dfp-checkbox-label:hover,
.dfp-radio-label:hover {
    opacity: 0.8;
}

.dfp-checkbox-label:has(input:checked),
.dfp-radio-label:has(input:checked) {
    opacity: 1;
}

.dfp-checkbox-label.checked,
.dfp-radio-label.checked {
    opacity: 1;
}

/* チェックボックス・ラジオボタンの非表示 */
.dfp-checkbox-label input,
.dfp-radio-label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dfp-checkbox-label.dfp-has-image input,
.dfp-radio-label.dfp-has-image input {
    display: none;
}

.dfp-checkbox-label.dfp-has-image,
.dfp-radio-label.dfp-has-image {
    margin-right: 4px;
}

.dfp-checkbox-label.dfp-has-image .dfp-checkbox-image,
.dfp-radio-label.dfp-has-image .dfp-radio-image {
    margin-right: 0;
}

.dfp-checkbox-image:hover,
.dfp-radio-image:hover {
    border-color: #0073aa;
    opacity: 0.8;
}

/* 画像マッピング対応のレスポンシブ */
.dfp-checkbox-group,
.dfp-radio-group {
    gap: 4px;
}

.dfp-checkbox-group:not(:has(.dfp-checkbox-image)) .dfp-checkbox-label,
.dfp-radio-group:not(:has(.dfp-radio-image)) .dfp-radio-label {
    /* 画像がない場合の通常スタイル */
    margin-right: 8px;
    margin-bottom: 4px;
}

/* モバイルレスポンシブ */
@media (max-width: 768px) {
    .dfp-filter-form {
        gap: 8px;
    }
    
    .dfp-field-container {
        margin-bottom: 8px;
    }
    
    .dfp-form-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .dfp-filter-form-container {
        margin-bottom: 1.5rem;
    }
    
    .dfp-checkbox-group {
        gap: 4px;
    }
    
    .dfp-checkbox-label {
        margin-right: 4px;
        margin-bottom: 2px;
        font-size: 13px;
    }
    
    .dfp-checkbox-text,
    .dfp-radio-text {
        font-size: 13px;
    }
    
    .dfp-radio-group {
        gap: 4px;
    }
    
    .dfp-radio-label {
        margin-right: 4px;
        margin-bottom: 2px;
        font-size: 13px;
    }
    
    .dfp-range-container {
        flex-direction: column;
        gap: 4px;
    }
    
    .dfp-range-min,
    .dfp-range-max {
        width: 100%;
    }
    
    .dfp-range-container::before {
        content: "〜";
        text-align: center;
    }
    
    .dfp-select-field {
        width: 100%;
    }
    
    .dfp-text-field {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .dfp-form-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .dfp-filter-button,
    .dfp-reset-button {
        width: 100%;
    }
    
    .dfp-filter-form-container {
        margin-bottom: 1rem;
    }
    
    .dfp-field-label {
        font-size: 14px;
    }
    
    .dfp-checkbox-text,
    .dfp-radio-text {
        font-size: 12px;
    }
    
    .dfp-checkbox-label,
    .dfp-radio-label {
        margin-right: 2px;
        margin-bottom: 2px;
    }
    
    .dfp-checkbox-image,
    .dfp-radio-image {
        width: 32px;
        height: 32px;
    }
}