/* page-post-review.php 用のスタイル */

.page-post-review-wrapper {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.entry-header {
    text-align: center;
    margin-bottom: 30px;
}

.entry-title {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 10px;
}

.activity-target-info {
    text-align: center;
    font-size: 1.2em;
    color: #555;
    margin-bottom: 25px;
    padding: 15px;
    background-color: #eaf7f7;
    border-left: 5px solid #00a0b8;
    border-radius: 4px;
}

.review-form {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 1.3em;
    margin-bottom: 8px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* paddingとborderをwidthに含める */
    transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #00a0b8;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 160, 184, 0.3);
}

.form-group textarea {
    resize: vertical; /* 縦方向のみリサイズ可能 */
}

/* スターレーティングのスタイル */
.rating-stars {
    display: flex; /* 追加：フレックスボックスで横並びにする */
    flex-direction: row-reverse; /* 星の順番を右から左にする */
    justify-content: flex-end; /* 星を右寄せにする */
}

.rating-stars input[type="radio"] {
    display: none; /* ラジオボタン自体は非表示 */
}

.rating-stars label {
    color: #ccc; /* 未選択の星の色 */
    font-size: 2.5em;
    padding: 0 5px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.rating-stars label:hover,
.rating-stars label:hover ~ label {
    color: #f5a623; /* ホバー時の星の色 */
}

.rating-stars input[type="radio"]:checked ~ label {
    color: #f5a623; /* 選択済みの星の色 */
}

/* ファイル選択ボタンのスタイル */
.form-group input[type="file"] {
    display: none; /* デフォルトのファイル選択ボタンを非表示にする */
}

.custom-file-upload {
    display: inline-block !important;
    background-color: #00a0b8;
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 1em !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-right: 10px; /* テキストとの間にスペース */
    vertical-align: middle; /* 追加: 中央揃え */
}

.custom-file-upload:hover {
    background-color: #007c91;
    transform: translateY(-2px);
}

.file-name-display {
    display: inline-block; /* span要素とinput[type="text"]の両方に適用されるように */
    vertical-align: middle;
    /* width を調整してカスタムファイルアップロードボタンの隣に収まるように */
    /* custom-file-uploadの幅を約120px、margin-rightを10pxと仮定して計算 */
    width: calc(100% - 130px - 20px); /* フォームの全体幅からボタンとマージン、余白を引く */
    /* もしくは最大幅を設定して、ボタンと並ぶように調整 */
    max-width: 200px; /* 例: ファイル名表示の最大幅 */

    box-sizing: border-box;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    font-size: 1em;
    color: #555;
    white-space: nowrap; /* ファイル名が長すぎても改行させない */
    overflow: hidden; /* はみ出した部分は隠す */
    text-overflow: ellipsis; /* はみ出した部分を「...」で表示 */
}

/* 画像プレビュー用ラッパーのスタイル */
.image-preview-wrapper {
    margin-top: 15px;
    text-align: center; /* プレビュー画像を中央に表示する場合 */
}

/* プレビュー画像の基本的なスタイル */
.image-preview-wrapper img {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 100%; /* 親要素からはみ出さないように */
    height: auto;
    display: block; /* センター寄せのためにブロック要素に */
    margin: 0 auto; /* センター寄せ */
}

/* アイコンプレビュー用の特殊なスタイル */
#reviewer-icon-preview {
    border-radius: 50%; /* 円形にする */
    width: 80px;
    height: 80px;
    object-fit: cover; /* 画像がはみ出さないようにトリミング */
}

.form-help-text {
    font-size: 0.9em;
    color: #777;
    margin-top: 5px;
    display: block;
}

.required-star {
    color: red;
    margin-left: 5px;
}

.form-submit-group {
    text-align: center;
    margin-top: 30px;
}

.submit-button {
    background-color: #00a0b8 !important;
    color: white !important;
    padding: 15px 30px !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.submit-button:hover {
    background-color: #007c91;
    transform: translateY(-2px);
}

/* メッセージのスタイル */
.form-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #badbcc;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.info-message {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
    padding: 20px;
    text-align: center;
    font-size: 1.1em;
    border-radius: 5px;
    margin-top: 30px;
}

/* アクティビティ選択セクション */
.activity-selection-section {
    padding: 20px;
    background-color: #f0f8ff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 30px;
}

.activity-selection-section h2 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 25px;
    font-size: 1.8em;
}

.activity-search-input {
    width: calc(100% - 20px);
    padding: 12px 10px;
    margin-bottom: 20px;
    border: 1px solid #b0c4de;
    border-radius: 5px;
    font-size: 1em;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.activity-list-wrapper {
    max-height: 400px; /* スクロール可能にする */
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #ffffff;
}

.activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-list-item {
    border-bottom: 1px solid #eee;
}

.activity-list-item:last-child {
    border-bottom: none;
}

.activity-select-link {
    display: block;
    padding: 15px 20px;
    color: #3498db;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.activity-select-link:hover {
    background-color: #e8f5fe;
    color: #2980b9;
}

.no-activity {
    padding: 20px;
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .page-post-review-wrapper {
        margin: 20px auto;
        padding: 15px;
    }

    .entry-title {
        font-size: 2em;
    }

    .activity-target-info {
        font-size: 1em;
        padding: 10px;
    }

    .review-form {
        padding: 15px;
    }

    .form-group label {
        font-size: 1em;
    }

    .form-group input[type="text"],
    .form-group textarea,
    .form-group select {
        padding: 10px;
        font-size: 0.9em;
    }

    .rating-stars label {
        font-size: 2em;
        padding: 0 2px;
    }

    .submit-button {
        padding: 12px 20px;
        font-size: 1em;
    }

    .custom-file-upload {
        padding: 8px 15px;
        font-size: 0.9em;
    }

    .file-name-display {
        /* スマートフォンなど狭い画面での調整 */
        width: calc(100% - 120px - 15px); /* custom-file-uploadの幅とマージンを調整 */
        padding: 8px 10px;
        font-size: 0.8em;
    }
    .custom-file-upload {
        padding: 8px 15px;
        font-size: 0.9em;
    }
}