/* =========================================================================
   クーポン状態表示の共通プリミティブ（単一ソース）
   一覧(/coupons/) ・ 買取カート ・ 注文確認 で共有して読み込む。
   var(--iosys-*) は使わずリテラル値（カート側は :root 変数が無いため）。
   - ローディングスケルトン
   - 空状態 / エラー（.coupons-empty）
   - トースト通知（Popover API + 非対応フォールバック）
   ここは「全画面で同一」のリーフ規則のみ。チケット本体や画面固有のボタンは各CSS側。
   ========================================================================= */

/* ===== ローディングスケルトン ===== */
.skeleton {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    border-radius: 4px;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

.card-skeleton {
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.skeleton-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-line {
    height: 12px;
    border-radius: 4px;
}

.skeleton-line-short {
    width: 40%;
}

.skeleton-line-medium {
    width: 70%;
}

/* ===== 空状態 / エラー ===== */
.coupons-empty {
    text-align: center;
    padding: 32px 24px;
    color: #666;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
}

/* ===== トースト通知 =====
   対応ブラウザ: :popover-open のときだけ表示。非対応: :popover-open 規則は捨てられ
   .notifications[popover] の fixed と .notifications の flex で常時表示の固定コンテナになる。 */
.notifications[popover] {
    position: fixed;
    inset: auto auto max(16px, env(safe-area-inset-bottom)) 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 500px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
    z-index: 1000;
}

.notifications[popover]:popover-open {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notifications[popover]:not(:popover-open) {
    display: none;
}

.notifications {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flash-message {
    padding: 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    border-left-width: 4px;
    border-left-style: solid;
    transition: opacity 0.4s ease, transform 0.4s ease;
    cursor: pointer;
}

.flash-message.is-dismissing {
    opacity: 0;
    transform: translateY(-8px);
}

.flash-success {
    background: #e6f7ed;
    color: #1b7f3a;
    border: 1px solid #b7e4c6;
    border-left-color: #1b7f3a;
}

.flash-error {
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c2be;
    border-left-color: #b3261e;
}