/* =========================================================
   オリパカード（残数メーター・タグ）と絞り込みバー
   ========================================================= */
:root {
    --pc-green: #2fbf71;
    --pc-orange: #f5a623;
    --pc-red: #e50012;
    --pc-gray: #d9d9d9;
    --pc-blue: #4495d2;
}

/* ---------- タグ ---------- */
.pack-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pack-card-tag {
    display: inline-block; font-size: 10px; line-height: 1; padding: 4px 8px; border-radius: 999px;
    background: #eef3f8; color: #345; font-weight: 700;
}
.pack-card-tag--type { color: #fff; background: #777; }
.pack-card-tag--mieru { background: #0062eb; }
.pack-card-tag--tehaisho { background: #8a4b08; }
.pack-card-tag--normal { background: var(--pc-blue); }
.pack-card-tag--ended { background: #e9e9e9; color: #666; }
.pack-card-tag--sms { background: #fff3cd; color: #7a5a00; border: 1px solid #f1d27a; }

/* ---------- 残数メーター ---------- */
.pack-meter { width: 100%; }
.pack-meter__label {
    text-align: center; font-size: 11px; line-height: 1.2; color: #333; margin-bottom: 4px;
}
.pack-meter__label b { font-size: 14px; }
.pack-meter__total { color: #666; }
.pack-meter__track {
    position: relative; height: 10px; border-radius: 999px; background: var(--pc-gray); overflow: hidden;
}
.pack-meter__bar {
    height: 100%; border-radius: 999px; background: var(--pc-green);
    transition: width .4s ease;
}
.pack-meter--warning .pack-meter__bar { background: var(--pc-orange); }
.pack-meter--danger .pack-meter__bar { background: var(--pc-red); }
.pack-meter--danger .pack-meter__label b { color: var(--pc-red); }
.pack-meter--empty .pack-meter__label { color: #999; }
.pack-meter--empty .pack-meter__bar { width: 0 !important; }

/* ---------- 絞り込みバー ---------- */
.pack-filter-section { margin-bottom: 36px; }
@media screen and (max-width: 768px) { .pack-filter-section { margin-bottom: 24px; } }
.pack-filter {
    background: #f7f9fb; border: 1px solid #e3e8ee; border-radius: 10px; padding: 10px 12px; margin-top: 16px;
}
.pack-filter__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pack-filter__row + .pack-filter__row { margin-top: 8px; }
.pack-filter__row--bottom { border-top: 1px dashed #dde3ea; padding-top: 8px; margin-top: 10px; gap: 8px 16px; }
.pack-filter__label { font-size: 12px; font-weight: 700; color: #456; white-space: nowrap; min-width: 3.5em; }
.pack-filter__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pack-filter__chip {
    border: 1px solid #cfd8e3; background: #fff; color: #234; border-radius: 999px;
    padding: 5px 12px; font-size: 12px; line-height: 1.2; cursor: pointer; white-space: nowrap;
}
.pack-filter__chip.is-active { background: var(--pc-blue); border-color: var(--pc-blue); color: #fff; font-weight: 700; }
.pack-filter__chip:disabled { opacity: .4; cursor: default; }
.pack-filter__sort { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pack-filter__sort select {
    border: 1px solid #cfd8e3; border-radius: 6px; padding: 5px 28px 5px 8px; font-size: 13px; background: #fff;
    appearance: auto; -webkit-appearance: menulist;
}
.pack-filter__check { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; cursor: pointer; }
.pack-filter__check input { width: 16px; height: 16px; accent-color: var(--pc-blue); }
.pack-filter__count { margin-left: auto; font-size: 12px; color: #567; white-space: nowrap; }
.pack-filter__reset {
    border: 1px solid #cfd8e3; background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.pack-filter__reset[hidden] { display: none !important; }

/* 絞り込みで空になったセクション */
.pack-section[hidden] { display: none !important; }
.pack-section .pack-section__empty { text-align: center; color: #888; padding: 16px 0; font-size: 13px; }
.pack-section .pack-section__empty[hidden] { display: none !important; }
.pack-card-item[hidden] { display: none !important; }
.pack-filter-empty { text-align: center; color: #666; padding: 32px 0; font-size: 14px; }
.pack-filter-empty[hidden] { display: none !important; }

@media screen and (max-width: 768px) {
    .pack-filter { margin-left: -6px; margin-right: -6px; padding: 10px; }
    .pack-filter__label { min-width: auto; }
    .pack-filter__count { width: 100%; margin-left: 0; text-align: right; }
}