/* css/auto-play-movie.css */

.dmm-auto-play-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

#dmm-auto-play-video {
    max-width: 720px;
    height: auto;
    width: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* multiple モード用のスタイル */
.dmm-auto-play-container.multiple-videos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    width: 100%;
    margin-bottom: 0;
}

.dmm-auto-play-container.multiple-videos.two-videos {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}


.dmm-video-wrapper {
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding: 2px;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    box-sizing: border-box;
    max-width: 720px;
    margin: 0 auto;
}

.dmm-auto-play-container.single-video .dmm-video-wrapper {
    padding-bottom: 0;
    height: auto;
}

.dmm-video-wrapper video {
    max-width: none;
    object-fit: contain;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.dmm-auto-play-container.single-video .dmm-video-wrapper video {
    position: static;
    max-height: none;
}


/* スマホ横画面での動画表示調整 */
@media (orientation: landscape) and (max-width: 1024px) {
    .dmm-video-wrapper {
        padding-bottom: 0; /* JSで高さを制御するため、アスペクト比固定は解除 */
        height: calc((100vh - 100px) * 1.5);
    }

    .dmm-auto-play-container.multiple-videos .dmm-video-wrapper {
        /* 4画面表示の時 */
        height: calc((50vh - 60px) * 1.5);
    }

    .dmm-auto-play-container.multiple-videos.two-videos .dmm-video-wrapper {
        /* 2画面表示の時 */
        height: calc((100vh - 100px) * 1.5);
    }

    .dmm-video-wrapper video {
        position: relative; /* absoluteから変更 */
        height: 100%; /* 親要素の高さに合わせる */
    }
}


.simple-button { background-color: #f0f0f0; border: 1px solid #ccc; padding: 3px 8px; font-size: 0.8em; cursor: pointer; border-radius: 3px; color: #333; text-decoration: none; }
.simple-button:hover { background-color: #e0e0e0; text-decoration: none; color: #333; }
.favorite-star { position: absolute; top: 8px; left: 8px; padding: 3px 5px; font-size: 1.5em; cursor: pointer; border-radius: 3px; z-index: 10; color: #ffa500; background-color: rgba(255, 255, 255, 0.8); transition: color 0.2s, background-color 0.2s; }
.favorite-star:hover { background-color: rgba(255, 255, 255, 1); color: #ff6347; }
.favorite-star input[type="checkbox"] { display: none; }
.purchase-button { position: absolute; top: 5px; right: 5px; z-index: 10; background-color: rgba(255, 111, 97, 0.7); margin-top: 2px; }
.dmm-auto-play-container .dmm-video-wrapper a.purchase-button:hover { background-color: rgba(255, 111, 97, 1); color: #fff !important; transform: translateY(-2px); }
@media (max-width: 500px) { .dmm-auto-play-container .dmm-video-wrapper a.purchase-button { padding: 5px 8px; font-size: 0.7em; } }
.dmm-auto-play-container { margin-bottom: 0 !important; }
.dmm-auto-play-container.multiple-videos { padding-bottom: 0 !important; }
@media (orientation: portrait) and (max-width: 600px) {
    .dmm-auto-play-container.multiple-videos .dmm-video-wrapper .video-overlay-buttons { gap: 3px; }
    .dmm-auto-play-container.multiple-videos .dmm-video-wrapper .favorite-star { font-size: 0.6em; padding: 1px 3px; }
    .dmm-auto-play-container.multiple-videos .dmm-video-wrapper a.purchase-button { font-size: 0.5em; padding: 2px 4px; }
    .dmm-auto-play-container.single-video .video-overlay-buttons { gap: 5px; top: 5px; }
    .dmm-auto-play-container.single-video .favorite-star { font-size: 0.6em; padding: 1px 3px; }
    .dmm-auto-play-container.single-video a.purchase-button { font-size: 0.5em; padding: 2px 4px; }
}


/* 絞り込みボタンとソートフォームのコンテナ */
.autoplay-controls-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* PCでは折り返しを許可 */
    gap: 10px;
    margin-top: 0 !important; /* ★★★ 修正 ★★★ */
    margin-bottom: 0 !important; /* ★★★ 修正 ★★★ */
}

/* ソートフォームの基本スタイル */
.autoplay-controls-wrapper .dmm-sort-form {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
    width: auto;
}

/* スマホ (600px以下) でのスタイル */
@media (max-width: 600px) {
    .autoplay-controls-wrapper {
        flex-wrap: nowrap; /* スマホでは折り返さない */
        width: 100%;
        padding: 0 5px; /* 左右に少し余白 */
        box-sizing: border-box;
    }
    .autoplay-controls-wrapper #open-genre-search-modal {
        flex-shrink: 0;
        padding: 8px 10px;
        font-size: 0.8em;
        white-space: nowrap;
    }
    .autoplay-controls-wrapper .dmm-sort-form {
        flex-grow: 1;
        min-width: 100px;
    }
    .autoplay-controls-wrapper .dmm-sort-form select {
        width: 100%;
        font-size: 0.9em;
    }
}