/* dynamic-municipality.css */

/* ウィジェット全体のコンテナとして機能する要素 (テーマのbefore_widgetで生成される要素など) */
/* このCSSは、ウィジェットのコンテンツが直接そのテーマの枠内に収まることを前提とします。 */
/* 親要素に .municipality-selector-widget-container クラスを付与する場合、このスタイルが適用されます */
.municipality-selector-widget-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    font-size: 14px; /* 基本の文字サイズを14pxに設定 */
}

/* 各フォーム行 (ラベルとドロップダウンのグループ) */
.municipality-form-row {
    margin-bottom: 15px; /* 各行間のスペース */
    display: flex;       /* ラベルとドロップダウンを横並びに */
    align-items: center; /* 垂直方向中央揃え */
    flex-wrap: wrap;     /* 画面が狭い場合に折り返しを許可 (デフォルトの挙動) */
    gap: 10px;           /* 要素間の隙間 */
}

/* ラベル */
.municipality-label {
    display: block;
    margin-bottom: 0;
    font-weight: bold;
    color: #555;
    flex-shrink: 0;      /* 縮小しない */
    text-align: center;  /* ラベルを中央寄せ (画像に合わせる) */
    line-height: 1.4;    /* 行の高さ */
    /* font-size は親から継承されるため、ここで明示的に指定しない */
}

/* ドロップダウン (select要素) - 画像のようなテキスト入力フィールド風 */
.municipality-dropdown {
    flex-grow: 1; /* 残りのスペースを埋める */
    width: calc(100% - 100px); /* ラベル幅(90px) + gap(10px) を考慮した基本幅 */
    padding: 8px 12px; /* 左右のパディングを調整 */
    border: 1px solid #ccc; /* 薄いボーダー */
    border-radius: 5px;    /* 角丸 */
    background-color: #fff; /* 白い背景 */
    font-size: 14px;       /* ここで明示的に14pxを指定 */
    line-height: 1.4;      /* 行の高さを調整 */
    cursor: pointer;
    box-sizing: border-box; /* paddingとborderをwidthに含める */

    /* デフォルトの矢印を非表示にし、カスタム矢印を適用 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* カスタム矢印のSVGデータ (下向きの小さな矢印) */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22%23888%22%20d%3D%22M205.5%2090.5L128%20168l-77.5-77.5%2017.7-17.7%2059.8%2059.7%2059.8-59.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center; /* 矢印の位置を調整 */
    background-size: 10px; /* 矢印のサイズを調整 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* ホバーやフォーカス時のアニメーション */
}

/* ドロップダウンの無効化状態 */
.municipality-dropdown[disabled] {
    background-color: #f5f5f5; /* 少しグレーがかった背景 */
    cursor: not-allowed;
    border-color: #e0e0e0; /* 薄いグレーのボーダー */
    color: #a0a0a0;       /* 文字色を薄く */
    /* 無効化されたドロップダウンの矢印の色も調整 */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22%23ccc%22%20d%3D%22M205.5%2090.5L128%20168l-77.5-77.5%2017.7-17.7%2059.8%2059.7%2059.8-59.7z%22%2F%3E%3C%2Fsvg%3E');
}

/* ドロップダウンのホバー時 */
.municipality-dropdown:not([disabled]):hover {
    border-color: #999;
}

/* ドロップダウンのフォーカス時 */
.municipality-dropdown:not([disabled]):focus {
    border-color: #0073aa; /* WordPressのデフォルトリンク色に近い色 */
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* 検索ボタンのコンテナ */
.municipality-button-container {
    text-align: right; /* ボタンを右寄せ */
    margin-top: 10px;
    margin-bottom: 5px;
}

/* 検索ボタン */
.municipality-button {
    background-color: #e0e0e0; /* 画像のような薄いグレーの背景 */
    color: #555;               /* 文字色もグレー */
    padding: 10px 20px;
    border: 1px solid #ccc;  /* 薄いボーダー */
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;       /* ここで明示的に14pxを指定 */
    font-weight: bold;
    line-height: 1.4;      /* 行の高さ */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 80px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* わずかな影で立体感 */
}

/* 検索ボタンのホバー時 */
.municipality-button:not([disabled]):hover {
    background-color: #d0d0d0; /* ホバーで少し濃く */
    border-color: #bbb;
}

/* 検索ボタンの有効化時 (JavaScriptでdata-urlが設定された状態) */
.municipality-button:not([disabled]) {
    /* 有効時もグレーのままにする場合 */
    background-color: #e0e0e0; 
    color: #555;
    border-color: #ccc;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 検索ボタンの有効化時のホバー */
.municipality-button:not([disabled]):hover {
    background-color: #d0d0d0;
    border-color: #bbb;
}


/* 検索ボタンの無効化時 */
.municipality-button[disabled] {
    background-color: #d0d0d0; /* 無効時は濃いめのグレー */
    color: #888;
    cursor: not-allowed;
    box-shadow: none;
}