/*
 * Plugin CSS for Egaku Attara Iina Functions
 * Version: 2.14 (CSSのみでのフォームデザイン改善)
 * Author: Your Name (or Egaku)
 * Description: フロントエンドのフォーム、リスト、単一投稿の表示スタイル。CSSのみでフォームデザインをさらに改善します。
 */

/* --- ユーティリティクラス --- */
.hidden {
    display: none !important;
}

/* --- フォーム & メッセージ共通スタイル --- */
.eai-form {
    max-width: 600px;
    margin: 30px auto;
    padding: 30px; /* パディングを少し増やす */
    background-color: #ffffff;
    border-radius: 12px; /* 角丸をさらに大きく */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 影をより強調 */
    border: 1px solid #e5e5e5; /* フォーム全体に薄い境界線を追加 */
}

.eai-form-group {
    margin-bottom: 30px; /* マージンをさらに大きく */
}

/* フォームのラベル（見出し）の色を黒系に、カーソルをデフォルトに */
.eai-form-group label {
    display: block;
    margin-bottom: 10px; /* マージンを調整 */
    font-weight: 700; /* より太く */
    cursor: default;
    color: #2c3e50; /* より濃い黒系 */
    font-size: 1.1em; /* ラベルのフォントサイズを微調整 */
    position: relative; /* 必須マークの配置のため */
}

/* 必須項目のアスタリスクをCSSで追加 (HTMLに 'required' 属性がある前提) */
.eai-form-group label[for]:has(+ [required])::after {
    content: " *";
    color: #e74c3c; /* 赤色のアスタリスク */
    font-size: 0.9em;
    vertical-align: super; /* 上付き文字 */
    margin-left: 3px;
}

.eai-form-group input[type="text"],
.eai-form-group textarea,
.eai-form-group select {
    width: 100%;
    padding: 12px 15px; /* パディングをさらに増やす */
    border: 1px solid #d0d0d0; /* 枠線を少し明るく */
    border-radius: 8px; /* 角丸を調整 */
    font-size: 1.05em; /* フォントサイズを微調整 */
    cursor: text;
    background-color: #fcfcfc; /* 背景色をより明るく */
    color: #333;
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* ホバーとフォーカスのトランジションを強化 */
}

/* ホバー時の入力フィールドのスタイル */
.eai-form-group input[type="text"]:hover,
.eai-form-group textarea:hover,
.eai-form-group select:hover {
    border-color: #a0a0a0;
    background-color: #f5f5f5;
}

.eai-form-group input[type="text"]:focus,
.eai-form-group textarea:focus,
.eai-form-group select:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25); /* フォーカス時の影を強調 */
    outline: none;
    background-color: #ffffff;
}

/* プルダウン（select）要素の文字切れを解消 */
.eai-form-group select {
    padding: 12px 15px; /* パディングを統一 */
    line-height: 1.5;
    height: auto;
}

.eai-form-group textarea {
    height: 200px; /* 高さを少し増やす */
    resize: vertical;
}

/* フォーム送信ボタン（一般的なボタン） */
.eai-submit-button {
    background-color: #0073aa;
    color: white;
    padding: 15px 30px; /* パディングを増やす */
    border: none;
    border-radius: 8px; /* 角丸を調整 */
    font-size: 1.05em; /* フォントサイズを微調整 */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* アニメーションを強化 */
    font-weight: bold;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 115, 170, 0.2); /* ボタンに影を追加 */
}

.eai-submit-button:hover {
    background-color: #00568c;
    transform: translateY(-3px); /* 浮き上がりを強調 */
    box-shadow: 0 6px 15px rgba(0, 115, 170, 0.3); /* ホバー時の影を強調 */
}

.eai-submit-button:active {
    transform: translateY(0); /* クリック時に少し沈むように */
    box-shadow: 0 2px 5px rgba(0, 115, 170, 0.2);
}

/* メッセージ表示エリア */
.eai-message {
    padding: 20px 25px; /* パディングを調整 */
    margin-bottom: 30px;
    border-radius: 8px; /* 角丸を調整 */
    border: 1px solid transparent;
    font-weight: bold;
    font-size: 1.1em; /* メッセージのフォントサイズを微調整 */
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* メッセージにも影を追加 */
}

.eai-message.success {
    background-color: #e6ffee; /* より明るい緑の背景 */
    color: #277b47; /* 濃い緑の文字 */
    border-color: #c0f0d0;
}

.eai-message.error {
    background-color: #ffeeee; /* より明るい赤の背景 */
    color: #a03c3c; /* 濃い赤の文字 */
    border-color: #f0c0c0;
}

/* 子ジャンルラッパーの表示/非表示 */
#eai-child-genre-wrapper.hidden {
    display: none;
}

/* --- レスポンシブ調整（スマホ向け） --- */
@media (max-width: 767px) {
    /* フォーム全体のパディングを減らす */
    .eai-form {
        padding: 20px; /* 左右のパディングを減らす */
        margin: 20px auto; /* 上下のマージンも調整 */
        border-radius: 8px; /* スマホでは角丸を少し控えめに */
    }

    /* 入力フィールドのパディングを減らす */
    .eai-form-group input[type="text"],
    .eai-form-group textarea,
    .eai-form-group select {
        padding: 10px 12px; /* 左右のパディングを減らす */
        border-radius: 6px; /* スマホでは角丸を少し控えめに */
        font-size: 1em; /* フォントサイズも少し小さく */
    }

    /* テキストエリアの高さをスマホ向けに調整 */
    .eai-form-group textarea {
        height: 150px;
    }

    /* ラベルのフォントサイズも調整 */
    .eai-form-group label {
        font-size: 1em;
        margin-bottom: 8px;
    }

    /* 送信ボタンのパディングとフォントサイズを調整 */
    .eai-submit-button {
        padding: 12px 20px;
        font-size: 0.95em;
        border-radius: 6px;
    }

    /* メッセージ表示のパディングとフォントサイズを調整 */
    .eai-message {
        padding: 15px 20px;
        font-size: 1em;
        border-radius: 6px;
    }
}


/* --- 投稿一覧 [attara_iina_list] スタイル --- */

/* ★追加：一覧情報の表示スタイル */
.eai-list-info {
    margin-bottom: 15px; /* リスト本体との間の余白 */
    font-size: 0.95em; /* フォントサイズを少し調整 */
    color: #555; /* 文字色 */
    background-color: #f8f8f8; /* 背景色を少しつける */
    padding: 10px 15px; /* 内側の余白 */
    border: 1px solid #eee; /* 枠線 */
    border-radius: 5px; /* 角丸 */
    text-align: center; /* 中央寄せ */
}

.eai-list-info p {
    margin: 0; /* pタグのデフォルトマージンをリセット */
    padding: 0;
}


.eai-list {
    list-style: none; /* 親要素からリストスタイルを削除 */
    padding: 0;
    margin: 20px 0; /* 上下のマージンを調整 */
}

/* 各リストアイテムをカード風に */
.eai-list-item {
    list-style: none; /* 各アイテムからリストスタイルを削除 */
    border: 1px solid #e0e0e0; /* 枠線 */
    border-radius: 8px; /* 角丸 */
    padding: 20px; /* 内側の余白 */
    margin-bottom: 20px; /* 各カードの下の余白 */
    background-color: #ffffff; /* 背景色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影 */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* ホバー時のアニメーション */
}

.eai-list-item:last-child {
    margin-bottom: 0; /* 最後のカードの下の余白はなし */
}

.eai-list-item:hover {
    transform: translateY(-5px); /* 少し上に浮き上がる */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 影を濃くする */
}

.eai-list-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 5px;
}

.eai-list-title a {
    text-decoration: none;
    color: #0073aa;
}

.eai-list-title a:hover {
    text-decoration: underline;
}

.eai-list-content {
    margin: 0 0 10px;
    color: #555;
}

.eai-list-meta {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 10px;
}

.eai-list-meta span {
    margin-right: 15px;
    display: inline-block;
}

.eai-status-private {
    font-weight: bold;
    color: #d9534f;
}

.eai-actions a {
    margin-right: 10px;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: white; /* ボタンの文字色を白に統一 */
}

.eai-actions a.view {
    background-color: #6c757d; /* 落ち着いたグレー */
}
.eai-actions a.view:hover {
    background-color: #5a6268; /* ホバー時の色 */
    transform: translateY(-2px); /* ホバー時のアニメーション */
}

.eai-actions a.edit {
    background-color: #f0ad4e; /* 黄色 */
}
.eai-actions a.edit:hover {
    background-color: #dea63b;
}

.eai-actions a.toggle {
    background-color: #5bc0de; /* 水色 */
}
.eai-actions a.toggle:hover {
    background-color: #46b8da;
}

.eai-actions a.delete {
    background-color: #d9534f; /* 赤色 */
}
.eai-actions a.delete:hover {
    background-color: #c9302c;
}

/* ★修正：ページネーションのスタイル */
.eai-pagination {
    text-align: center; /* ページネーションリンクを中央寄せ */
    margin-top: 30px; /* リストとの間の余白 */
    margin-bottom: 20px; /* 下の余白 */
    font-size: 0.9em; /* ページネーション全体のフォントサイズを少し小さめに */
}

.eai-pagination .page-numbers {
    display: inline-block;
    vertical-align: middle; /* ★追加：垂直方向の中央揃え */
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #0073aa;
    background-color: #fff;
    transition: all 0.3s ease;
    line-height: 1; /* ★調整：行の高さを1に設定して、文字がボックスの中央に来るように */
    box-sizing: border-box; /* ★追加：パディングとボーダーを幅に含める */
    min-width: 30px; /* ★追加：ページ番号のボックスの最小幅を確保 */
    text-align: center; /* ★追加：ページ番号の文字を中央寄せ */
}

.eai-pagination .page-numbers:hover {
    background-color: #eaf2f8;
    border-color: #b3d4f4;
}

.eai-pagination .page-numbers.current {
    background-color: #0073aa;
    color: white;
    border-color: #0073aa;
    font-weight: bold;
    cursor: default;
}

/* 「前へ」「次へ」の矢印部分の調整 */
.eai-pagination .page-numbers.prev,
.eai-pagination .page-numbers.next {
    padding: 8px 10px; /* 矢印部分の左右パディングを少し調整 */
}


.eai-pagination .page-numbers.dots {
    border: none;
    background: none;
    cursor: default;
    padding: 8px 4px; /* ドット部分のパディングを調整 */
    color: #888; /* ドットの色を少し薄く */
    min-width: auto; /* ドットは最小幅を適用しない */
}


/* --- 個別投稿ページ スタイル --- */
.eai-single-post-details {
    margin-top: 20px;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* 各セクションのH3見出しに共通スタイル */
.eai-single-post-details .eai-section h3 {
    font-size: 1.2em;
    color: #0073aa; /* 見出しのh3は水色でOK */
    margin-top: 25px; /* 上部の余白を調整 */
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    cursor: default !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* 「商品・サービス名」セクションのスタイル */
.eai-single-post-details .eai-product-service-name-section p {
    font-weight: bold !important; /* 強制的に太字に */
    color: inherit !important; /* 親要素から色を継承 (黒系) */
    background-color: transparent !important; /* 背景色を透明に */
    padding: 0 !important; /* パディングをリセット */
    border-radius: 0 !important; /* ボーダー半径をリセット */
    display: block !important; /* ブロック要素として表示 */
    margin: 0 0 15px 0 !important; /* マージンを調整 */
    white-space: normal !important; /* 折り返しを許可 */
    cursor: default !important; /* カーソルをデフォルトに */
    text-decoration: none !important; /* テキスト装飾なし */
}

/* 本文の内容を囲む eai-content-body のスタイル */
.eai-single-post-details .eai-content-body {
    font-size: 1em; /* 基本フォントサイズ */
    line-height: 1.7; /* 行の高さ */
    color: #333; /* 文字色 */
    margin: 0 0 15px 0; /* 下の余白 */
    
    /* 他のスタイルとの競合を避けるための !important */
    cursor: default !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* 本文内の <p> タグに対するスタイル */
/* eai-content-body の中の p タグに適用 */
.eai-single-post-details .eai-content-body p {
    margin: 0 0 1em 0; /* 段落間の下マージン */
    padding: 0;
    font-weight: normal !important; /* 強制的に標準の太さに */
    color: inherit !important; /* 親から色を継承 */
    background-color: transparent !important;
    white-space: normal !important;
    text-align: left !important;
    cursor: default !important;
    text-decoration: none !important;
}

/* 本文内のリスト (ul, ol) */
.eai-single-post-details .eai-content-body ul,
.eai-single-post-details .eai-content-body ol {
    margin: 0 0 15px 20px; /* マージンと左インデント */
    padding: 0;
    list-style-position: outside; /* マーカーがテキストの外側 */
    color: #333; /* 文字色 */
}

/* 本文内のリストアイテム (li) */
.eai-single-post-details .eai-content-body ul li,
.eai-single-post-details .eai-content-body ol li {
    margin-bottom: 5px; /* リストアイテム間の余白 */
    line-height: 1.5; /* 行の高さ */
}

/* 本文内の画像 */
.eai-single-post-details .eai-content-body img {
    max-width: 100%; /* 親要素からはみ出さないように */
    height: auto; /* アスペクト比を維持 */
    display: block; /* ブロック要素にして中央寄せなどをしやすく */
    margin: 15px auto; /* 上下左右中央寄せ */
    border-radius: 5px; /* 角丸 */
}

/* 本文内のリンク */
.eai-single-post-details .eai-content-body a {
    color: #0073aa; /* リンク色 */
    text-decoration: underline; /* 下線 */
}
.eai-single-post-details .eai-content-body a:hover {
    color: #005177; /* ホバー時のリンク色 */
    text-decoration: none; /* ホバーで下線をなくす */
}

/* 投稿メタ情報（投稿日など） */
.eai-single-post-details .eai-post-meta {
    font-size: 0.9em;
    color: #888;
    text-align: right;
    margin-bottom: 25px;
    cursor: default !important;
    background-color: transparent !important;
    color: #888 !important;
    text-decoration: none !important;
}

/* 「見てもらいたい対象」と「アイデアの分類」の内容を非太字＆タグ風デザインに */
.eai-single-post-details .eai-target-company-section p,
.eai-single-post-details .eai-genre-section p {
    font-weight: normal !important;
    color: #4A6785 !important;
    background-color: #ECF2F7 !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-right: 8px !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    cursor: default !important;
    text-decoration: none !important;
}

/* 違反報告ボタンを囲むフッター部分 */
.eai-actions-footer {
    text-align: right; /* ボタンを右寄せにする */
    margin-top: 20px; /* 上部の余白 */
}

/* 「この投稿の問題を報告する」ボタンのスタイル（控えめ） */
.eai-actions-footer .eai-open-report-modal-button {
    background-color: #f0f0f0; /* 控えめなグレーの背景色 */
    color: #555; /* 暗めの文字色 */
    padding: 8px 15px; /* パディングを調整 */
    border: 1px solid #ccc; /* 枠線を追加 */
    border-radius: 4px;
    font-size: 0.9em; /* 少し小さめのフォントサイズ */
    cursor: pointer;
    transition: all 0.3s ease; /* ホバー時のトランジションをスムーズに */
    box-shadow: none; /* デフォルトの影があれば削除 */
}

.eai-actions-footer .eai-open-report-modal-button:hover {
    background-color: #e0e0e0; /* ホバーで少し濃いグレー */
    color: #333; /* ホバーで文字色を少し濃く */
    border-color: #bbb; /* ホバーで枠線を少し濃く */
    transform: none; /* 浮き上がるアニメーションを削除 */
}

/* --- 違反報告モーダル スタイル --- */
.eai-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px; /* Location of the box */
}

.eai-modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Responsive width */
    max-width: 600px; /* Max width */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    /* Animation for modal entry */
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Animation for modal entry */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.eai-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
}

.eai-modal-close:hover,
.eai-modal-close:focus {
    color: black;
    text-decoration: none;
}

/* 報告フォーム内の送信ボタン (モーダル内のボタンは目立つ青のまま) */
.eai-modal-content .eai-submit-report-button {
    background-color: #0073aa;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-top: 15px; /* フォーム要素との間にスペース */
}
.eai-modal-content .eai-submit-report-button:hover {
    background-color: #005177;
}