/* market/item/index.php styles */

/* 限定商品・期間限定アラート */
.limited-alert {
  background: #ffe000;
  color: #cc0000;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 0.92rem;
}
.limited-alert a { color: #cc0000; }
.time-limited-alert {
  background: #ffe000;
  color: #cc0000;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 0.92rem;
}
.time-limited-alert a { color: #cc0000; }

/* ジャンルタグ ＞ アイコン */
#genre-section .genre-tag::before {
    content: "›";
    margin-right: 3px;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1;
}

/* Video Player */
.product-detail-container .mlvpw{position:relative;width:90%;margin:0 auto;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden}.product-detail-container .mlvpw_v{width:100%;height:100%;display:block;object-fit:contain;background:#000}.product-detail-container .mlvpw_p{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease,opacity .15s ease}.product-detail-container .mlvpw_p::before{content:"";display:block;width:0;height:0;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:4px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}.product-detail-container .mlvpw[data-mlvpw-playing="1"] .mlvpw_p{opacity:0;pointer-events:none}

/* Custom video controls - semi-transparent gray bar, orange/yellow accent */
.product-detail-container video,
.video-player-styled video,
.video-player-window video {
  accent-color: #f5a623;
}
.product-detail-container video::-webkit-media-controls-panel,
.video-player-styled video::-webkit-media-controls-panel,
.video-player-window video::-webkit-media-controls-panel {
  background: rgba(20, 20, 20, 0.75);
  backdrop-filter: blur(6px);
}
.product-detail-container video::-webkit-media-controls-play-button,
.video-player-styled video::-webkit-media-controls-play-button,
.video-player-window video::-webkit-media-controls-play-button,
.product-detail-container video::-webkit-media-controls-mute-button,
.video-player-styled video::-webkit-media-controls-mute-button,
.video-player-window video::-webkit-media-controls-mute-button,
.product-detail-container video::-webkit-media-controls-fullscreen-button,
.video-player-styled video::-webkit-media-controls-fullscreen-button,
.video-player-window video::-webkit-media-controls-fullscreen-button {
  filter: brightness(1.3) saturate(0);
}
.product-detail-container video::-webkit-media-controls-timeline,
.video-player-styled video::-webkit-media-controls-timeline,
.video-player-window video::-webkit-media-controls-timeline {
  accent-color: #f5a623;
  border-radius: 4px;
  height: 5px;
}
.product-detail-container video::-webkit-media-controls-volume-slider,
.video-player-styled video::-webkit-media-controls-volume-slider,
.video-player-window video::-webkit-media-controls-volume-slider {
  accent-color: #f5a623;
}
.product-detail-container video::-webkit-media-controls-current-time-display,
.video-player-styled video::-webkit-media-controls-current-time-display,
.video-player-window video::-webkit-media-controls-current-time-display,
.product-detail-container video::-webkit-media-controls-time-remaining-display,
.video-player-styled video::-webkit-media-controls-time-remaining-display,
.video-player-window video::-webkit-media-controls-time-remaining-display {
  color: #fff;
  font-size: 0.75rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
/* Firefox */
.product-detail-container video::-moz-range-track,
.video-player-styled video::-moz-range-track,
.video-player-window video::-moz-range-track {
  background: rgba(255,255,255,0.2);
}
.product-detail-container video::-moz-range-progress,
.video-player-styled video::-moz-range-progress,
.video-player-window video::-moz-range-progress {
  background: #f5a623;
}

/* Dedicated styles for Payment UI */
.pay-header { text-align: center; margin-bottom: 20px; background: linear-gradient(135deg, rgba(230, 126, 34, 0.15), rgba(192, 57, 43, 0.15)); border-radius: 12px; padding: 20px 16px; border: 1px solid rgba(230, 126, 34, 0.2); }
.pay-title { font-size: 1.1rem; color: #aaa; margin-bottom: 8px; font-weight: bold; animation: pay-title-glow 2.5s ease-in-out infinite; }
.pay-price { font-size: 2rem; font-weight: bold; color: #fff; line-height: 1; text-shadow: 0 0 20px rgba(230, 126, 34, 0.4); display: inline; }
.pay-unit { font-size: 1rem; color: #e67e22; }
.pay-sub { font-size: 0.65rem; color: #888; display: inline; margin-left: 8px; vertical-align: baseline; }
/* Share button tooltips */
.share-btn { position: relative; }
.share-btn[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; white-space: nowrap; z-index: 100; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.share-btn[data-tooltip]:hover::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #333; z-index: 100; }

/* Share + Affiliate row */
.share-aff-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.affiliate-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .share-aff-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
}

.pay-section { margin-bottom: 24px; }
.pay-sec-title { font-size: 0.85rem; color: #888; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.pay-sec-title::after { content: ""; flex: 1; height: 1px; background: #333; }

.pay-card {
  background: #252525; border-radius: 12px; padding: 16px; margin-bottom: 12px;
  border: 1px solid #333; position: relative; overflow: hidden;
}
.pay-card.recommend { border-color: #8e44ad; background: linear-gradient(145deg, #2a2a2a, #202020); }
.pay-card.recommend::before {
  content: "★ RECOMMENDED"; position: absolute; top: 0; right: 0;
  background: #8e44ad; color: #fff; font-size: 0.6rem; padding: 2px 8px;
  border-bottom-left-radius: 8px; font-weight: bold;
}

.pay-chain-info { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pay-chain-icon { width: 24px; height: 24px; border-radius: 50%; }
.pay-chain-name { font-weight: bold; font-size: 0.95rem; color: #fff; }
.pay-badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: #333; color: #ccc; }
.pay-badge.gas-free { background: #27ae60; color: #fff; }
.pay-badge.gas-high { background: #c0392b; color: #fff; }

.pay-btn-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pay-btn-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 16px; background: #333; border: none; border-radius: 8px;
  cursor: pointer; transition: all 0.2s; text-decoration: none; color: #fff;
}
.pay-btn-item:hover { background: #444; transform: translateY(-2px); }
.pay-btn-left { display: flex; align-items: center; gap: 10px; }
.pay-icon { width: 28px; height: 28px; }
.pay-symbol { font-weight: bold; font-size: 1.1rem; }
.pay-arrow { color: #666; font-size: 1.2rem; }

.pay-note-btn { text-align: center; margin-top: 20px; }
.pay-note-link { color: #666; font-size: 0.8rem; text-decoration: underline; background: none; border: none; cursor: pointer; }

@media (max-width: 768px) {
    .purchase-section {
        box-sizing: border-box !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* === 以下 market/item/index.php から移動（FOUC対策） === */

/* Button styles */
@keyframes pulseGlowRed {
  0% { box-shadow: 0 0 5px rgba(255, 77, 77, 0.4); }
  50% { box-shadow: 0 0 20px rgba(255, 77, 77, 0.8); }
  100% { box-shadow: 0 0 5px rgba(255, 77, 77, 0.4); }
}
.btn-crypto {
  width: 100%;
  border: none;
  font-weight: bold;
  font-size: 1.15em;
  padding: 16px;
  display: block;
  text-align: center;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  animation: pulseGlowRed 2s infinite;
  transition: transform 0.2s;
}
.btn-crypto:hover { transform: scale(1.02); }
.btn-credit {
  width: 100%;
  border: none;
  font-weight: bold;
  font-size: 1.15em;
  padding: 16px;
  display: block;
  text-align: center;
  background: #888;
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s;
  box-sizing: border-box;
}
.btn-credit:hover { transform: scale(1.02); }

/* Mobile sticky purchase bar */
@keyframes mobileBarGlow {
  0% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
  100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
}
.mobile-purchase-bar {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10000;
  background: linear-gradient(135deg, #f1c40f, #f39c12); padding: 8px 10px 10px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 3px;
}
.mobile-bar-top { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.mobile-bar-title { font-size: 0.85rem; color: #222; font-weight: bold; }
.mobile-bar-price { font-weight: bold; color: #c0392b; font-size: 1.2rem; }
.mobile-bar-sub { text-align: center; font-size: 0.6rem; color: #555; margin-bottom: 2px; }
.mobile-bar-buttons { display: flex; gap: 6px; }
.mobile-bar-crypto {
  flex: 1; padding: 10px 4px; background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: #fff; border: none; border-radius: 6px; font-weight: bold; font-size: 0.9rem;
  cursor: pointer; white-space: nowrap;
  animation: mobileBarGlow 2s infinite;
}
.mobile-bar-credit {
  flex: 0.7; padding: 10px 4px; background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff; border: none;
  border-radius: 6px; font-size: 0.8rem; font-weight: bold; cursor: pointer; white-space: nowrap;
  transition: transform 0.2s;
}
.mobile-bar-credit:hover { transform: scale(1.02); }
@media (min-width: 769px) {
  .mobile-purchase-bar { display: none !important; }
  .purchased-sp { display: none !important; }
}
@media (max-width: 768px) {
  .mobile-purchase-bar { display: flex !important; }
  .desktop-payment-content { display: none !important; }
  body { padding-bottom: 90px !important; }
  .purchased-pc { display: none !important; }
  .pwa-sidebar-promo { display: none !important; }
}

/* Heart button size overrides */
#productImageWrapper .product-image-like-button { width: 72px !important; height: 72px !important; }
#productImageWrapper .product-image-heart-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; }
@media (max-width: 768px) {
  #productImageWrapper .product-image-like-button { width: 80px !important; height: 80px !important; }
  #productImageWrapper .product-image-heart-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; }
}

/* Custom video player */
.custom-player { position:relative; background:#000; border:2px solid #333; border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.5); transition:all .3s; width:65%; margin:0 auto; }
.custom-player video { width:100%; display:block; cursor:pointer; object-fit:contain; aspect-ratio:16/9; }
.custom-player video.cp-ratio-loaded { aspect-ratio:unset; }
@media (max-width:768px) { .custom-player { width:100%; } }
.custom-player.cp-expanded { position:fixed!important; top:0; left:0; width:100vw!important; height:100vh!important; max-width:none!important; z-index:9998; border-radius:0; border:none; }
.custom-player.cp-expanded video { height:calc(100vh - 56px); object-fit:contain; }
.cp-overlay { position:absolute; top:0; left:0; width:100%; height:calc(100% - 56px); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; }
.cp-play-overlay svg { filter:drop-shadow(0 4px 16px rgba(0,0,0,0.6)); transition:transform .15s; }
.cp-play-overlay:hover svg { transform:scale(1.1); }
.cp-controls { display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(25,25,25,0.88); backdrop-filter:blur(6px); height:56px; box-sizing:border-box; }
.cp-btn { background:none; border:none; cursor:pointer; padding:2px; display:flex; align-items:center; opacity:0.9; transition:opacity .15s; }
.cp-btn:hover { opacity:1; }
.cp-btn svg { width:28px; height:28px; }
.cp-time { color:#f5a623; font-size:0.75rem; white-space:nowrap; min-width:80px; text-align:center; font-weight:bold; }
.cp-seek { flex:1; height:24px; display:flex; align-items:center; cursor:pointer; }
.cp-seek-bar { width:100%; height:5px; background:rgba(255,255,255,0.2); border-radius:3px; position:relative; }
.cp-seek-progress { height:100%; background:linear-gradient(90deg,#f5a623,#ffc107); border-radius:3px; width:0; position:relative; }
.cp-seek-progress::after { content:''; position:absolute; right:-7px; top:50%; transform:translateY(-50%); width:14px; height:14px; background:#f5a623; border-radius:50%; box-shadow:0 0 6px rgba(245,166,35,0.6); }
.cp-vol-wrap { position:relative; }
.cp-vol-popup { display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); width:36px; height:120px; background:rgba(25,25,25,0.92); backdrop-filter:blur(6px); border-radius:8px; padding:10px 0; margin-bottom:8px; align-items:center; justify-content:center; flex-direction:column; cursor:pointer; z-index:10; }
.cp-vol-popup.cp-vol-open { display:flex; }
.cp-vol-track-v { width:5px; height:100%; background:rgba(255,255,255,0.2); border-radius:3px; position:relative; }
.cp-vol-fill-v { position:absolute; bottom:0; left:0; width:100%; background:#f5a623; border-radius:3px; height:100%; }
@media (max-width:600px) { .cp-vol-wrap { display:none!important; } .cp-time { font-size:0.6rem; min-width:55px; } .cp-btn svg { width:22px; height:22px; } }
.custom-player:-webkit-full-screen { border-radius:0; border:none; }
.custom-player:fullscreen { border-radius:0; border:none; }
.custom-player:-webkit-full-screen .cp-overlay { height:calc(100% - 56px); }
.custom-player:fullscreen .cp-overlay { height:calc(100% - 56px); }

/* Recommend modal grid */
@media (max-width: 768px) {
  #recommendGrid { grid-template-columns: 1fr !important; }
  .recommend-modal-item { flex-direction: row !important; padding: 12px !important; gap: 12px !important; align-items: flex-start !important; }
  .recommend-modal-item .search-product-image-wrapper { width: 120px !important; flex-shrink: 0 !important; aspect-ratio: 1 !important; border-radius: 6px !important; }
  .recommend-modal-item .search-product-content-wrapper { flex: 1 !important; }
}