@charset "UTF-8";

/* ベース：デザインはそのまま維持 */
#publish-emergency-banner {
    background: #000;
    margin: 0;
    border-top: 3px solid #ff0000;
    border-bottom: 3px solid #ff0000;
    position: relative;
    /* 左右の影を0にし、上下に強い光を出す（白い余白対策） */
    filter: drop-shadow(0 5px 8px rgba(255, 0, 0, 0.3)) 
    drop-shadow(0 -5px 8px rgba(255, 0, 0, 0.3));
    transition: all 0.3s ease;
    width: 100%;
    border-left: none;
    border-right: none;
    z-index: 1;
}

/* 擬似要素：初期値は0にしておき、JSで左右に飛ばす */
#publish-emergency-banner::before,
.hazard-strip::before {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: var(--side-margin, 0); 
    right: var(--side-margin, 0);
    background: inherit;
    border-top: inherit;
    border-bottom: inherit;
    /* 影も左右に引き継ぐ */
    z-index: -1;
    background-position: var(--bg-pos, 0) 0;
}

.hazard-strip::before {
    top: 0;
    bottom: 0;
}

/* --- 以下、既存のアニメーションやフォント設定はそのまま --- */
.emergency-mode {
    animation: bg-panic 0.5s infinite !important;
    /** border-top: 5px solid #fff !important;
    border-bottom: 5px solid #fff !important; **/
}
.emergency-mode::before { animation: inherit; }
@keyframes bg-panic {
    0%, 100% { background-color: #000; }
    50% { background-color: #ff0000; }
}
.hazard-strip {
    position: relative;
    height: 12px;
    background: repeating-linear-gradient(45deg, #000, #000 10px, #ff0000 10px, #ff0000 20px);
}
.timer-body { padding: 20px 10px; text-align: center; background: transparent; }
.timer-msg { color: #ff0000; font-size: 14px; font-weight: 900; letter-spacing: 3px; margin-bottom: 8px; animation: flash-text 0.8s infinite; }
@keyframes flash-text { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
#publish-countdown-timer { font-family: 'Orbitron', sans-serif; color: #fff; font-size: 50px; font-weight: 700; line-height: 1.2; text-shadow: 0 0 20px #ff0000; }
@media (min-width: 768px) { #publish-countdown-timer { font-size: 90px; } .timer-msg { font-size: 24px; } .timer-body { padding: 30px 10px; } }

@media screen and (min-width: 1025px)
{

}


/* タイマーの数字：Orbitronを適用 */
/* Orbitronを適用した中央配置の決定版 */
.item-countdown-badge {
    position: absolute;
    /* --- 中央配置の魔法 --- */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -------------------- */
    
    padding: 4px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 10;
    white-space: nowrap; /* 改行を防ぐ */
    
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    
    /* 元々のアニメーションに中央配置のtransformを維持したまま適用 */
    animation: emergency-glow-center 1.5s infinite ease-in-out;
    pointer-events: none;
    opacity: 0.9;
}

/* タイマーの数字 */
.item-timer-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem; /* 中央配置なので少し大きく */
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.9),
        0 0 20px rgba(231, 76, 60, 0.8);
    letter-spacing: 2px;
}

/* ⏳アイコン */
.timer-icon {
    font-size: 1rem;
    display: inline-block;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
    animation: pulse 1s infinite;
}

/* 中央配置(translate)を維持したアニメーション */
@keyframes emergency-glow-center {
    0% { 
        transform: translate(-50%, -50%) scale(1); 
        box-shadow: 0 0 10px #d9534f;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.1); /* 中央を軸に拡大 */
        box-shadow: 0 0 30px #d9534f, 0 0 15px rgba(255,255,255,0.5);
    }
    100% { 
        transform: translate(-50%, -50%) scale(1); 
        box-shadow: 0 0 10px #d9534f;
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* タイマーがある商品画像枠だけの特別スタイル */
ul#product_lists_wrap > li > a > ul > li.is-emergency {
    position: relative;
    border: 2px solid #e74c3c; /* 常に赤い枠線を細く出しておく */
    animation: item-frame-pulse 1.5s infinite ease-in-out;
    z-index: 1;
}

/* 枠と内側の発光アニメーション */
@keyframes item-frame-pulse {
    0% {
        box-shadow: 
            inset 0 0 5px rgba(231, 76, 60, 0.2),
            0 0 5px rgba(231, 76, 60, 0.1);
        border-color: rgba(231, 76, 60, 0.4);
    }
    50% {
        /* バッジの拡大・発光と同期して強く光る */
        box-shadow: 
            inset 0 0 30px rgba(231, 76, 60, 0.5),
            0 0 15px rgba(231, 76, 60, 0.4);
        border-color: rgba(231, 76, 60, 1);
    }
    100% {
        box-shadow: 
            inset 0 0 5px rgba(231, 76, 60, 0.2),
            0 0 5px rgba(231, 76, 60, 0.1);
        border-color: rgba(231, 76, 60, 0.4);
    }
}

/* 画像が少しだけ赤く染まるようなオーバーレイ効果（任意） */
ul#product_lists_wrap > li.is-emergency img {
    filter: sepia(20%) saturate(120%) hue-rotate(-10deg);
}

/* --- 5分前：超緊急モード (Critical) --- */

/* バッジ：背景を高速で赤と黒に切り替える（サイレン効果） */
.item-countdown-badge.is-critical {
    background: #ff0000;
    border: 2px solid #fff;
    animation: critical-flash 0.5s infinite steps(2); /* 0.5秒でパッパッと切り替え */
    transform: translate(-50%, -50%) scale(1.1); /* 少し大きく保つ */
}

/* 文字：ネオンのように激しく明滅 */
.item-countdown-badge.is-critical .item-timer-display {
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #ff0000;
}

/* 商品枠：画面が揺れるような、より強い発光 */
ul#product_lists_wrap > li > a > ul > li.is-emergency.is-critical {
    border: 3px solid #ff0000;
    animation: critical-frame-shake 0.2s infinite; /* 小刻みに震える */
}

/* アニメーション：背景色の交互切り替え */
@keyframes critical-flash {
    0% { background: #ff0000; box-shadow: 0 0 30px #ff0000; }
    50% { background: #ffcc00; color: #000; box-shadow: 0 0 30px #ffcc00; } /* 黄色を混ぜて警戒レベルを上げる */
}

/* アニメーション：震え（緊急性） */
@keyframes critical-frame-shake {
    0% { transform: translate(1px, 1px); }
    25% { transform: translate(-1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, -1px); }
    100% { transform: translate(1px, 1px); }
}

/* ⏳アイコンを高速回転させる */
.item-countdown-badge.is-critical .timer-icon {
    animation: spin 0.5s infinite linear;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}