/* css/item-detail-modal.css */

.dmm-plugin-modal-content.item-detail-modal-window {
    width: 800px; /* モーダルの基本幅 */
    max-width: 95%; /* 画面幅に対する最大幅 */
    /* item-detail モーダル固有のウィンドウスタイルがあれば追加 */
}

/* --- 商品詳細モーダル固有のスタイル --- */
.item-detail-modal-body {
    padding-top: 15px;
    padding-bottom: 15px;
}

.item-detail-modal-affiliate-link {
    text-align: center;
}
.item-detail-modal-affiliate-link.bottom-button {
    margin-top: 25px;
    margin-bottom: 5px;
}
.item-detail-modal-affiliate-link .btn-highlight {
    font-size: 1.05em;
    padding: 10px 25px;
}

.item-detail-modal-info {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #f8f8f8;
    border: 1px solid #e7e7e7;
    border-radius: var(--border-radius);
    font-size: 0.9em;
}

.item-detail-modal-info p {
    margin-bottom: 7px;
    line-height: 1.65;
    /* ★★★ 情報項目全体を枠線で囲むスタイル（必要なら） ★★★ */
    /* padding-bottom: 7px; */
    /* border-bottom: 1px dashed #ddd; */
}
/* ★★★ 最後のp要素の下線を消す場合 ★★★ */
/*
.item-detail-modal-info p:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
*/

/* ★★★ 「タイトル：」のスタイル ★★★ */
.item-detail-modal-info p.item-detail-modal-product-title {
    font-size: 1.2em; /* タイトルは少し大きめに */
    font-weight: bold; /* 太字に */
    color: var(--text-color); /* 通常のテキストカラー */
    margin-bottom: 12px; /* 次の項目との間隔を少し広めに */
}

.item-detail-modal-info p b {
    display: inline-block;
    min-width: 85px; /* ラベルの最小幅 */
    font-weight: bold;
    color: #333;
    margin-right: 8px; /* ラベルと値の間隔を少し広げる */
}

.item-detail-modal-info a.internal-link {
    color: #0056b3; /* ★ 濃い青色に変更 (例) */
    text-decoration: none;
    border-bottom: 1px dotted #0056b3; /* ★ ボーダー色も合わせる */
    transition: color 0.2s, border-color 0.2s;
}
.item-detail-modal-info a.internal-link:hover {
    color: #003d80; /* ★ ホバー時の色も濃いめに調整 (例) */
    border-bottom-color: #003d80; /* ★ ホバー時のボーダー色も合わせる */
}

.item-detail-modal-sample-images {
    margin-top: 20px;
    text-align: left;
}

.sample-image-modal-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2px;
    line-height: 0;
    padding: 5px 0;
}

.sample-image-modal-grid a,
.sample-image-modal-grid img {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
    max-width: none;
    width: auto;
    height: 80px;
    vertical-align: top;
    object-fit: cover;
    border-radius: 3px;
    background-color: #f0f0f0;
    transition: opacity 0.2s;
}
.sample-image-modal-grid a {
    font-size: 0;
}
.sample-image-modal-grid img:hover {
    opacity: 0.8;
}

body.modal-open-item-detail {
    overflow: hidden;
}

.item-detail-modal-body .loading-message,
.item-detail-modal-body .error-message {
    padding: 30px;
    font-size: 1.1em;
    color: #777;
    text-align: center;
}
.item-detail-modal-body .error-message {
    color: red;
}

@media (max-width: 768px) {
    .dmm-plugin-modal-content.item-detail-modal-window {
        width: 95%;
        padding: 20px 15px;
    }
    /* H2用のスタイルは不要になったのでコメントアウト
    .item-detail-modal-title {
        font-size: 1.4em;
        padding: 8px 12px;
    }
    */
    .item-detail-modal-info p.item-detail-modal-product-title {
        font-size: 1.1em; /* スマホではタイトルのフォントサイズ調整 */
    }
    .item-detail-modal-info p b {
        min-width: auto;
    }
    .sample-image-modal-grid img {
        height: 70px;
    }
}
@media (max-width: 480px) {
    /* H2用のスタイルは不要になったのでコメントアウト
    .item-detail-modal-title {
        font-size: 1.3em;
    }
    */
    .item-detail-modal-info p.item-detail-modal-product-title {
        font-size: 1.05em; /* より小さい画面でのタイトルフォントサイズ調整 */
    }
    .item-detail-modal-affiliate-link .btn-highlight {
        font-size: 1em;
        padding: 10px 20px;
    }
    .item-detail-modal-info {
        font-size: 0.85em;
    }
    .sample-image-modal-grid img {
        height: 60px;
    }
}