/* 全体 */
.shop-status-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    flex-wrap: wrap;
}

.shop-wrapper{
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
}
/* 営業時間テキスト部分 */
.header .shop-label {
	font-size:14px;
    color: #707070;
	margin-top:3px;
    margin-right: 0.75rem;
}
.header .shop-time {
    color: #707070;
	font-weight:500;
    margin-right: 0.5rem;
	transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* 状態バッジ共通 - 丸のスタイルを削除 */
.header .shop-status {
    display: inline-flex; /* flexにして、丸と文字を横並びにする */
    align-items: center;
    font-size: 1rem;
    line-height: 1.5; /* 行の高さを調整 */
    transition: all 0.3s ease;
    margin-left: 0.5rem;
}

/* **新しい丸のインジケーター (::before)** */
.shop-status::before {
    content: ""; /* 擬似要素には必須 */
    display: inline-block;
    width: 1em; /* 丸のサイズ */
    height: 1em; /* 丸のサイズ */
    margin-right: 0.5em; /* 文字との間にスペース */
    border-radius: 50%;
    vertical-align: middle; /* 上下中央寄せ */
}

/* 営業中 */
.status-open{
	color: #28a745;
}
.status-open::before {
    background-color: #28a745; /* 緑 */
    animation: pulseOpen 1.5s infinite;
}

/* 営業時間外 */
.status-out{
	color: #3602af;
}
.status-out::before {
    background-color: #3602af; /* グレー */
}

/* 臨時休業 */
.status-closed{
	color: #dc3545
}
.status-closed::before {
    background-color: #dc3545; /* 赤 */
}


/* 営業中だけ軽いアニメーション */
@keyframes pulseOpen {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/* スマホ幅700px以下 */
@media (max-width: 700px) {
	.header #open_hour{
		background-color:white;
		padding-right:0;
	}
    /* ラベル＋時間＋区切りをまとめて非表示 */
    .shop-wrapper .shop-label,
    .shop-wrapper .shop-time,
    .shop-wrapper .separator {
        display: none;
    }

    /* ステータスだけ表示 */
    .shop-wrapper .shop-status {
        cursor: pointer;
    }
}

/* ===== モーダル ===== */
.shop-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.shop-modal.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.shop-modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    max-width: 90%;
    width: 400px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    position: relative;
    animation: slideUp 0.3s ease;
}

.shop-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    cursor: pointer;
    color: #666;
}

.shop-modal-body {
    margin: .5em;
    color: #333;
    text-align: center;
    font-size: 15px;
}

.shop-modal-body .shop-label {
    /* モーダル内ではブロック要素として表示 */
    display: block; 
    color: #707070;
    font-size: 14px;
    margin-bottom: 4px;
}

.shop-modal-body .shop-time {
    font-size: 16px;
    font-weight: bold;
}

/* モーダルアニメーション */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


/* -------------------------------------- */
/* 営業再開日ホバーアニメーションのためのスタイル */
/* -------------------------------------- */

/* 営業再開日の時間詳細（アニメーションの基礎設定） */
.shop-resume-info .shop-resume-time-detail {
    /* アニメーションの準備: 初期状態は幅0で隠す */
    display: inline-block; 
    max-width: 0; /* 初期幅0 */
    overflow: hidden;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    padding: 0;
    margin: 0; /* マージンも初期値0 */
    opacity: 0;
    
    /* 要素が垂直方向に影響を与えないようにする */
    vertical-align: top;
    
    /* アニメーションの速度設定 */
    transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, opacity 0.4s ease-out;
}

/* PCでのホバー表示（769px以上） */
@media (min-width: 769px) {
    .shop-resume-info:hover .shop-resume-time-detail {
        /* ホバー時に最大幅を設定してスライドイン */
        max-width: 200px; /* テキストが十分収まる幅を設定 */
        margin-left: 0.5rem; /* 日付と時間の間にスペースを作成 */
        opacity: 1; /* 表示 */
        color: inherit;
    }
}

/* -------------------------------------- */
/* モーダル表示修正のためのスタイル (最終修正ポイント) */
/* -------------------------------------- */

/* 1. PHPで追加したモーダル専用の時間を通常時は完全に隠す */
.shop-modal-only {
    display: none !important;
}

/* 2. モーダル内で非表示にしたい要素 (区切り線とステータス) を隠す (NEW) */
.shop-modal-body .shop-info .shop-wrapper .separator,
.shop-modal-body .shop-info .shop-wrapper .shop-status {
    display: none !important;
}

/* 3. モーダル内では、ラベルと時間を強制的に表示する（日付表示用） */
.shop-modal-body .shop-info .shop-wrapper .shop-label {
    display: block !important; /* ブロックにして独立した行に表示 */
    margin: 0 !important;
}
.shop-modal-body .shop-info .shop-wrapper .shop-time {
    display: block !important; /* ブロックにして独立した行に表示 */
    font-weight: bold;
    margin: 0 !important;
}

/* 4. モーダル専用要素 (時間情報) を強制的に表示する (臨時休業時の時間) */
.shop-modal-body .shop-modal-only {
    display: block !important; /* ブロックにして独立した行に表示 */
    margin-top: 5px; /* 上部とのスペース */
    text-align: center;
}

/* 5. モーダル内の時間表記に適切なスタイルを適用 */
.shop-modal-body .shop-modal-only .shop-time {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* 6. PCホバー用の時間詳細要素はモーダル内で非表示に (二重表示防止のため) */
.shop-modal-body .shop-resume-time-detail {
    display: none !important;
}