/*
 * 店舗一覧ページの動的表示で追加になった状態のスタイル
 *
 * 既存デザインは css/style.css（css_org/_module/__detail/_store.scss から生成）が担当する。
 * ここには、JSでの描画によって新しく必要になった要素だけを置く。
 * SCSS のビルド工程を持たないため、このファイルは手書きで維持する。
 */

/*
 * hidden 属性を確実に効かせる
 *
 * .p-store-map 配下の要素は style.css 側で display を指定しており、
 * その詳細度がブラウザ既定の [hidden]{display:none} を上回るため、
 * JSで hidden を立てても消えない。ここで明示的に打ち消す。
 */
.p-store-map [hidden],
.p-store-results [hidden] {
    display: none !important;
}

/* 地図本体。既存の .p-store-map iframe と同じく枠いっぱいに広げる */
.p-store-map__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* APIキー未設定・読み込み失敗時の代替表示 */
.p-store-map__fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 20px;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #6b7280;
}

/*
 * 該当0件のダイアログ
 *
 * 位置情報の案内（.p-store-map__permission）と同じオーバーレイ表現を使う。
 * 0件のときは現在位置の案内より優先して出す。
 */
.p-store-map__notice-text {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #6b7280;
}

/* 情報ウィンドウ */
.p-store-map__info {
    display: grid;
    gap: 4px;
    font-size: 1.3rem;
    line-height: 1.5;
}

.p-store-map__info strong {
    font-size: 1.4rem;
    font-weight: 700;
}

/* 該当0件・読み込みエラー */
.p-store-results__empty {
    margin: 0;
    padding: 32px 28px;
    font-size: 1.5rem;
    line-height: 1.7;
    text-align: center;
    color: #6b7280;
}

/* 地図のピンと連動して選択中のカードを目立たせる */
.c-store-card {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.c-store-card:hover {
    background-color: #f7fafc;
}

.c-store-card.is-selected {
    background-color: #eef6ff;
}

/* 「その他」欄。専用アイコンは持たないため、アイコン分の余白だけ詰める */
.c-store-card__detail--note {
    padding-left: 0;
}

.c-store-card__detail--note::before {
    content: none;
}