@charset "UTF-8";

/* ==========================================================================
   1. 詳細ページ：タイマーバナー全体（女性向けコスメサイト・上品シームレス版）
   ========================================================================== */
#publish-emergency-banner {
    /* ── 変更：黒を廃止し、コスメバッジと同期する美しいグラデーションに ── */
    background: linear-gradient(135deg, #ff1493 0%, #ed293e 100%); 
    margin: 0;
    position: relative;
    
    /* ── 変更：威圧的な赤線を消し、上品な白い光のラインで透明感を演出 ── */
    border-top: 1px solid rgba(255, 255, 255, 0.6);    
    border-bottom: 1px solid rgba(255, 255, 255, 0.6); 
    
    /* ふんわりとした高級感のあるシャドウ */
    box-shadow: 0 4px 15px rgba(237, 41, 62, 0.2);
    transition: all 0.5s ease;
    width: 100%;
    z-index: 10;
}

/* 擬似要素：背景の広がりを維持 */
#publish-emergency-banner::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: var(--side-margin, 0); 
    right: var(--side-margin, 0);
    background: inherit;
    border-top: inherit;
    border-bottom: inherit;
    z-index: -1;
}

/* 💡 古いゼブラ柄（.hazard-strip）は非表示（HTMLから削除しなくても崩れない安全策） */
.hazard-strip {
    display: none !important;
}

/* ==========================================================================
   2. 詳細ページ：メインタイマー内のフォント・配置・アニメーション
   ========================================================================== */
.timer-body { 
    padding: 15px 10px; /* 少し縦幅をスマートに絞ってスタイリッシュに */
    text-align: center; 
    background: transparent; 
}

/* 上部のメッセージテキスト */
.timer-msg { 
    color: #ffffff;    /* ── 変更：赤文字を廃止し、可憐な白文字に ── */
    font-size: 13px; 
    font-weight: 600; 
    letter-spacing: 2px; 
    margin-bottom: 6px; 
    animation: cosmetic-flash 2.5s infinite ease-in-out; /* ── 変更：激しい点滅から優しい揺らぎに ── */
}

/* 優しく息をするような明滅エフェクト */
@keyframes cosmetic-flash { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0.7; } 
}

/* アイコンと数字を美しく中央横並びにするラッパー */
.timer-display-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
}

#publish-emergency-banner .timer-icon-main {
    font-size: 1.8rem!important;
    font-variation-settings: 'FILL' 1;
}


/* メインタイマーの時計アイコン */
.timer-icon-main {
    font-family: 'Material Symbols Outlined';
    font-size: 1.0rem!important;
    font-variation-settings: 'FILL' 0, 'wght' 300;
    line-height: 1 !important;
}

/* メインのカウントダウン数字 */
#publish-countdown-timer { 
    font-family: sans-serif; /* デジタル感を完全排除 */
    color: #ffffff; 
    font-size: 32px;         /* ── 変更：大きすぎて怖いサイズから、スマホに最適なサイズに ── */
    font-weight: 700; 
    line-height: 1; 
    letter-spacing: 1px;
}

/* タブレット・PC表示での最適化 */
@media (min-width: 768px) { 
    /* #publish-countdown-timer { font-size: 48px; }  */
    .timer-msg { font-size: 16px; } 
    .timer-body { padding: 20px 10px; } 
    /* .timer-icon-main { font-size: 32px !important; } */
}

/* 詳細ページ用の超緊急(5分前)ネオンエフェクト */
#publish-emergency-banner.emergency-mode {
    animation: cosmetic-glow 1.5s infinite ease-in-out !important;
}

@keyframes cosmetic-glow {
    0%, 100% { 
        background: linear-gradient(135deg, #ff1493 0%, #ed293e 100%);
        box-shadow: 0 4px 15px rgba(237, 41, 62, 0.2);
    }
    50% { 
        background: linear-gradient(135deg, #ff4500 0%, #ff1493 100%); 
        box-shadow: 0 4px 25px rgba(255, 20, 147, 0.6); 
    }
}

.emergency-mode .timer-msg {
    color: #fffb00; /* 超緊急時は少しゴールドがかった黄色にして特別感をプラス */
    font-weight: 700;
}


/* ==========================================================================
   3. 商品一覧カード内：カウントダウンバッジ（プレーンゴシック＆Googleアイコン版）
   ========================================================================== */
.item-countdown-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)!important;
    padding: 5px 10px; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 10;
    white-space: nowrap; 
    pointer-events: none;
    
    background: linear-gradient(90deg, #ff1493 0%, #ed293e 100%);
    border: 1px solid #ffffff;   
    border-radius: 50rem;          
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
    
    animation: emergency-glow-center 2s infinite ease-in-out;
}

/* タイマーの数字（サイト標準のゴシック体） */
.item-countdown-badge .item-timer-display {
    font-family: sans-serif;      
    font-size: 0.95rem;           
    font-weight: 700;             
    color: #ffffff;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* Google Material Symbols アイコン用のスタイル */
.item-countdown-badge .timer-icon-main {
    font-family: 'Material Symbols Outlined';
    line-height: unset;
    color: #ffffff;
    display: inline-block;
    font-variation-settings: 'FILL' 1; 
    animation: pulse 1s infinite;
}

@keyframes emergency-glow-center {
    0% { 
        transform: translate(-50%, -50%) scale(1); 
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.04); 
        box-shadow: 0 4px 14px rgba(237, 41, 62, 0.4); 
    }
    100% { 
        transform: translate(-50%, -50%) scale(1); 
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

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

/* ==========================================================================
   4. タイマー対象の商品画像枠：特別スタイル
   ========================================================================== */
ul#product_lists_wrap > li > a > ul > li.is-emergency {
    position: relative;
    border: 2px solid #ed293e; 
    animation: item-frame-pulse 2s infinite ease-in-out;
    z-index: 1;
}

@keyframes item-frame-pulse {
    0% {
        box-shadow: inset 0 0 5px rgba(237, 41, 62, 0.1), 0 0 5px rgba(237, 41, 62, 0.05);
        border-color: rgba(237, 41, 62, 0.4);
    }
    50% {
        box-shadow: inset 0 0 25px rgba(237, 41, 62, 0.35), 0 0 12px rgba(237, 41, 62, 0.3);
        border-color: rgba(237, 41, 62, 1);
    }
    100% {
        box-shadow: inset 0 0 5px rgba(237, 41, 62, 0.1), 0 0 5px rgba(237, 41, 62, 0.05);
        border-color: rgba(237, 41, 62, 0.4);
    }
}

ul#product_lists_wrap > li.is-emergency img {
    filter: sepia(10%) saturate(110%) hue-rotate(-5deg);
}

/* ==========================================================================
   5. 一覧ページ用：【5分前：超緊急モード (Critical)】
   ========================================================================== */
.item-countdown-badge.is-critical {
    background: #ed293e;
    border: 1px solid #fff;
    animation: critical-flash 0.5s infinite steps(2); 
    transform: translate(-50%, -50%) scale(1.06); 
}

.item-countdown-badge.is-critical .item-timer-display {
    color: #fff;
}

ul#product_lists_wrap > li > a > ul > li.is-emergency.is-critical {
    border: 2px solid #ed293e;
    animation: critical-frame-shake 0.2s infinite; 
}

@keyframes critical-flash {
    0% { background: #ed293e; box-shadow: 0 0 25px #ed293e; }
    50% { background: #ff1493; box-shadow: 0 0 25px #ff1493; } 
}

@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); }
}

/* 超緊急時にGoogleアイコンをくるくる高速回転させる設定 */
.item-countdown-badge.is-critical .timer-icon {
    animation: spin 0.8s infinite linear;
}

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


@media screen and (min-width: 1025px) {
    #publish-emergency-banner {
        margin-bottom: 20px;
    }
}