/*
 * 30周年イベント特別販売パック — LP 販売セクション / 参加権 CTA / 詳細 popup 等のスタイル。
 * spec: docs/features/event30-special-pack/spec.md §「LP UI」
 *
 * コイン購入ページの inline 販促行 (.ev30-payment-select-row-wrap 等) は
 * resources/views/components/event30/payment-select-row.blade.php 内の @once <style> ブロックに
 * 集約されており、本ファイルには含めない (component と一体で管理する方が変更コストが低い)。
 *
 * スコープは `.ev30-*` プレフィックスで event30 に閉じ、既存 UI の CSS を汚染しない。
 */

/* 虹色 border（keyframes は 1 個に集約して他クラスと重複しない名前空間 ev30- で登録） */
@keyframes ev30-rainbow-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ---------- LP 販売セクション ---------- */
.ev30-sales {
    position: relative;
    margin: 12px 0 24px;
    padding: 3px;
    background: linear-gradient(90deg, #ff0080, #ff8c00, #ffd700, #00ff00, #00bfff, #8a2be2, #ff0080);
    background-size: 200% 100%;
    animation: ev30-rainbow-shift 6s linear infinite;
    border-radius: 12px;
    overflow: hidden;
}
.ev30-sales__inner {
    position: relative;
    background: linear-gradient(180deg, rgba(4, 8, 26, 0.96), rgba(1, 4, 16, 0.96));
    border-radius: 10px;
    padding: 22px 18px 20px;
    color: #fff;
}
.ev30-sales__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    text-align: center;
}
.ev30-sales__gift {
    width: 32px;
    height: 32px;
    color: #ffe08a;
    filter: drop-shadow(0 0 8px rgba(255, 224, 138, 0.65));
    flex-shrink: 0;
}
.ev30-sales__title {
    margin: 0;
    font-size: clamp(14px, 4.5vw, 18px);
    font-weight: 900;
    letter-spacing: 0.04em;
    background: linear-gradient(180deg, #fff8e0, #ffe08a 50%, #c08e26);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
}
/* セクション内 CV ボタン */
.ev30-sales__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
/* .gummy-btn の height: 36px を上書きするため .gummy-btn.ev30-sales__cta で
   specificity を 020 に上げる (.ticket__grant と同じ指定強度) */
.gummy-btn.ev30-sales__cta {
    width: auto;
    min-width: min(320px, 82%);
    max-width: 420px;
    height: auto;
    padding: 12px 22px;
    gap: 10px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.08em;
}
.ev30-sales__cta-gift {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.ev30-sales__cta-label {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.ev30-sales__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-content: center;
    margin: 6px 0 14px;
}
.ev30-sales__price-value {
    font-family: "Antonio", "Zen Kaku Gothic New", sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #fffbe6;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
.ev30-sales__price-yen {
    font-size: 16px;
    color: #ffe08a;
    font-weight: 700;
}
.ev30-sales__benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ev30-sales__benefit {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 224, 138, 0.35);
    border-radius: 8px;
}
.ev30-sales__benefit-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #ffe08a;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}
.ev30-sales__benefit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd75e, #e3b552);
    color: #2a1c02;
    font-size: 12px;
    font-weight: 900;
    flex-shrink: 0;
}
.ev30-sales__benefit-body {
    font-size: 14px;
    color: #f5f8ff;
    line-height: 1.5;
}
.ev30-sales__benefit-body strong {
    color: #fffbe6;
    font-weight: 900;
    font-size: 15px;
}
/* 特典①: コイン獲得 (中央大表示) */
.ev30-sales__benefit-body--coin {
    padding: 8px 0 4px;
}
.ev30-sales__coin-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.ev30-sales__coin-icon {
    width: 56px;
    height: 56px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.ev30-sales__coin-text {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #ffeeb8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ev30-sales__coin-amount {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
}
.ev30-sales__coin-unit {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

/* 特典クーポン (item_pack の payment_code_id が設定 & 使用可能なとき) */
.ev30-sales__coupon-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,224,114,0.16), rgba(255,204,0,0.10));
    border: 1px dashed rgba(255,224,114,0.55);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 8px;
    color: #fffbe6;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
}
.ev30-sales__coupon-name {
    font-size: 15px;
    line-height: 1.35;
}

.ev30-sales__lottery-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
}
.ev30-sales__lottery-card {
    display: block;
    text-decoration: none;
    color: #ffeeb8;
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
}
.ev30-sales__lottery-card:hover,
.ev30-sales__lottery-card:active {
    background: transparent;
    text-decoration: none;
    color: #fff;
    opacity: 0.92;
}
/* 虹枠ラッパー: gummy-btn-rainbow-ring と同色系の conic-gradient を padding で描画 */
.ev30-sales__lottery-ring {
    display: block;
    width: 100%;
    padding: 3px;
    border-radius: 10px;
    background: conic-gradient(from var(--ev30-lot-ring-angle, 0deg),
        #ffc8c8, #ffe6b0, #fffaaa, #b8f0b8, #b0d8ff, #d4b0ff, #ffb8e0, #ffc8c8);
    animation: ev30-lot-ring-rotate 3s linear infinite;
    box-sizing: border-box;
}
.ev30-sales__lottery-ring img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 7px;
    background: #0b0b12;
}
@property --ev30-lot-ring-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes ev30-lot-ring-rotate {
    to { --ev30-lot-ring-angle: 360deg; }
}
.ev30-sales__lottery-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

/* 特典③ アイテム: 2 列表示・画像のみ・枠なし */
.ev30-sales__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.ev30-benefit-item {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    position: relative;
    display: block;
    width: 100%;
}
.ev30-benefit-item img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.ev30-benefit-item__count {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
}

/* 販売終了 / 販売開始前ラベル */
.ev30-sales__status {
    margin-top: 14px;
    padding: 10px;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #ffe08a;
}
.ev30-sales__status--sold {
    color: #ffbebe;
    background: rgba(255, 61, 208, 0.12);
}

/* 購入済み: 「獲得済み」ボタンだけをグレーぐみボタン風に。本体コンテンツはそのまま。 */

/* prefers-reduced-motion: LP セクションの虹色アニメを止める */
@media (prefers-reduced-motion: reduce) {
    .ev30-sales {
        animation: none !important;
    }
}

/* ---------- 参加権付ガチャ詳細ページの CTA ---------- */
/* gummy-btn gummy-btn-yellow gummy-btn-rainbow-ring と組み合わせて使う。
   本クラスはサイズ (幅・padding・font-size) だけを指定し、色系は gummy-btn に任せる。 */
.gummy-btn.ev30-participation-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 隣接する「1 連」ボタン等の gummy-btn (36px) と高さを揃える */
    height: 36px;
    padding: 0 12px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-decoration: none;
    line-height: 1.2;
}
.gummy-btn.ev30-participation-cta > span:first-child {
    /* 長い文言 (「XXX パックを購入すると参加できます」) の折返し / 省略対応 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ev30-participation-note {
    padding: 10px 12px;
    background: rgba(255, 224, 138, 0.12);
    border: 1px solid rgba(255, 224, 138, 0.4);
    border-radius: 8px;
    color: #6b4a00;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    margin-top: 8px;
}

/* ---------- 決済完了 popup に相乗りする 1 行（event benefit ラベル） ---------- */
.pc-header-sub.pc-header-event-benefit {
    font-weight: 900;
    color: #d93691;
}

/* ---------- 参加権が必要な gacha ページ着地時の確認 popup ---------- */
.ev30-participation-popup { position: fixed; inset: 0; z-index: 100003; display: block; }
.ev30-participation-popup[hidden] { display: none; }
.ev30-participation-popup__overlay {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65);
}
.ev30-participation-popup__panel {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 92%; max-width: 380px;
    background: linear-gradient(180deg, #0d0620 0%, #1e1240 100%);
    border-radius: 14px;
    padding: 24px 20px 18px;
    color: #ffeeb8;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 224, 138, 0.3);
    text-align: center;
}
.ev30-participation-popup__close {
    position: absolute; top: 6px; right: 10px;
    background: transparent; border: none; color: #ffeeb8;
    font-size: 24px; line-height: 1; cursor: pointer;
}
.ev30-participation-popup__title {
    font-size: 18px; font-weight: 900;
    background: linear-gradient(90deg, #ffd75e 0%, #fff2c6 50%, #ffd75e 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
    letter-spacing: 0.04em;
}
.ev30-participation-popup__body {
    font-size: 13px; line-height: 1.6;
    margin-bottom: 18px;
    color: #f5edd0;
}
.ev30-participation-popup__cta {
    display: block; width: 100%;
    padding: 12px 18px;
    background: linear-gradient(180deg, #ff6584 0%, #E84545 100%);
    color: #fff;
    font-size: 14px; font-weight: 900;
    border: none; border-radius: 24px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 12px rgba(232, 69, 69, 0.4);
}
.ev30-participation-popup__cta:hover,
.ev30-participation-popup__cta:active {
    color: #fff; text-decoration: none;
}
.ev30-participation-popup__later {
    display: block; width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: transparent; border: none;
    color: rgba(255, 224, 138, 0.7);
    font-size: 12px; cursor: pointer;
}