/* 既存のadmin.cssの内容があればここに追記してください */

/* 追加商品画像メタボックスの全体ラッパー */
.bousai-additional-images-wrapper {
    display: flex;
    flex-wrap: wrap; /* 画像アイテムを折り返す */
    gap: 15px; /* アイテム間のスペース */
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    border-radius: 5px;
}

/* 各画像アイテムのコンテナ */
.bousai-additional-image-item {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 中央寄せ */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    width: calc(25% - 15px); /* 4列表示 (gapを考慮) */
    min-width: 120px; /* 最小幅 */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

/* 各画像アイテムの区切り */
.bousai-additional-image-item:not(:first-child) {
    margin-top: 20px; /* 上部に余白を追加して区切りを明確に */
    padding-top: 20px; /* 上部にパディングも追加して区切りを強調 */
    border-top: 1px dashed #e0e0e0; /* 点線で区切りを視覚的に表現 */
}

/* 画像プレビューのラッパー */
.bousai-image-preview-wrapper {
    width: 100px;
    height: 100px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 10px;
    background-color: #f0f0f0;
    border-radius: 4px;
}

/* 画像プレビュー */
.bousai-image-preview {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: none; /* デフォルトで非表示 */
    border-radius: 4px;
}

/* 画像がある場合に表示 */
.bousai-image-preview.has-image {
    display: block;
}

/* ボタンを横並びにするためのラッパー */
.bousai-additional-image-item .bousai-image-buttons-wrapper {
    display: flex;
    flex-direction: row; /* 明示的に横並びを指定 */
    gap: 5px; /* ボタン間のスペース */
    width: 100%; /* 親要素の幅に合わせる */
    margin-top: 5px; /* 上部の余白 */
    flex-wrap: wrap; /* 小さい画面で折り返す */
    justify-content: center; /* 中央寄せ */
}

/* ボタンのスタイル */
.bousai-additional-image-item .bousai-image-buttons-wrapper .bousai-upload-image-button,
.bousai-additional-image-item .bousai-image-buttons-wrapper .bousai-remove-image-button {
    width: calc(50% - 2.5px); /* 2つのボタンが横並びになるように幅を設定 (gap 5px の半分を引く) */
    min-width: 80px; /* ボタンの最小幅 */
    font-size: 0.85em; /* フォントサイズを少し小さく */
    padding: 8px 5px; /* パディングを調整 */
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center; /* テキスト中央寄せ */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.bousai-additional-image-item .bousai-image-buttons-wrapper .bousai-upload-image-button {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

.bousai-additional-image-item .bousai-image-buttons-wrapper .bousai-upload-image-button:hover {
    background-color: #005177;
    border-color: #005177;
}

.bousai-additional-image-item .bousai-image-buttons-wrapper .bousai-remove-image-button {
    background-color: #dc3232;
    color: #fff;
    border-color: #dc3232;
}

.bousai-additional-image-item .bousai-image-buttons-wrapper .bousai-remove-image-button:hover {
    background-color: #a00;
    border-color: #a00;
}

/* JSで制御する非表示クラス (削除ボタンの初期状態にも使用) */
.bousai-hidden {
    display: none !important; /* !important を使用して確実に非表示にする */
}

/* 削除ボタンの初期状態（画像がない場合） */
/* class-admin.php で 'no-image' クラスが付与される */
.bousai-remove-image-button.no-image {
    display: none;
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
    .bousai-additional-image-item {
        width: calc(33.333% - 15px); /* 3列表示 */
    }
}

@media (max-width: 768px) {
    .bousai-additional-image-item {
        width: calc(50% - 15px); /* 2列表示 */
    }
    /* 768px以下ではボタンを縦並びに戻す */
    .bousai-additional-image-item .bousai-image-buttons-wrapper {
        flex-direction: column; /* 縦並びに戻す */
        gap: 5px;
    }
    .bousai-additional-image-item .bousai-image-buttons-wrapper .bousai-upload-image-button,
    .bousai-additional-image-item .bousai-image-buttons-wrapper .bousai-remove-image-button {
        flex: none; /* flexの指定を解除 */
        width: 100%; /* 全幅にする */
        font-size: 0.9em;
        padding: 8px 10px;
    }
}

.cart-clear-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.cart-clear-wrapper .empty-button {
    position: fixed;
    top: 200px;
    right: 10px;
    padding: 10px;
    background-color: #eee;
    border: 1px solid #999;
    border-radius: 5px;
    font-size: 12px;
}

.cart-clear-wrapper .empty-button:hover {
    background-color: #ccc;
}

@media (max-width: 480px) {
    .bousai-additional-image-item {
        width: 100%; /* 1列表示 */
    }
}

@media (max-width: 1000px) {
    .cart-clear-wrapper .empty-button {
        position: fixed;
        top: 158px;
        right: 15px;
        padding: 6px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 5px;
        font-size: 12px;
    }
}