/*
 * 購入金額ベース制限（purchase_draw）コンパクト表示のスタイル
 *
 * ⚠️ このファイルは **ガチャ詳細ページと一覧のガチャカードの両方** から読み込まれる。
 *    元は lottery-page.css（詳細ページ専用）と purchase-draw-compact.blade.php の
 *    @once <style> に分かれていたが、同じコンポーネントをカードでも使うため 1 箇所に集約した。
 *
 * ⛔ このスタイルを @once <style> へ戻さないこと。
 *    TOP の並び替え差分リロード（?fragment=main-gacha）は、サーバー側で <style> / <script> /
 *    <link rel="stylesheet"> を無条件に strip する（TopPageController::stripInlineAssets()）。
 *    @once に置くと「初期表示に対象ガチャが 1 枚も無い並び順から並び替えた」ときに
 *    スタイルが一切当たらない状態になる。
 *
 * 読み込み元:
 *   - app/Lottery/Views/lottery_page.blade.php（詳細ページ）
 *   - resources/views/components/gacha-card.blade.php（一覧カード）
 */

/* 購入金額ベース制限 詳細ページセクション（コンパクト版・コイン型） */
.purchase-draw-detail-section--compact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 4px;
    margin: 0 0 10px;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.purchase-draw-compact-card {
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 12px 13px;
    box-sizing: border-box;
    background:
        linear-gradient(to right, rgba(255, 241, 104, 0.5), rgba(203, 255, 250, 0.5), rgba(251, 214, 255, 0.5)) padding-box,
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(to right, #ff3884, #ff8800, #ffdd00, #00cc88, #0088ff, #8844ff, #ff3884) border-box;
}

/* 未達成時のカードを button 化した際のリセット + タップフィードバック */
button.purchase-draw-compact-card--clickable {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
button.purchase-draw-compact-card--clickable:active {
    transform: scale(0.99);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.purchase-draw-compact-card-inner {
    padding: 0;
}

.purchase-draw-compact-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
}

.purchase-draw-compact-cookie {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.purchase-draw-compact-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #6f6969;
    line-height: 1.2;
}

.purchase-draw-compact-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    flex-shrink: 0;
    color: #6f6969;
    font-size: 12px;
    font-weight: 400;
}

.purchase-draw-compact-badge b {
    font-size: 12px;
    font-weight: 700;
    color: #6f6969;
}

.purchase-draw-compact-badge span {
    font-size: 12px;
    font-weight: 400;
    color: #6f6969;
}

.purchase-draw-compact-progress-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.purchase-draw-compact-charge-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #6f6969;
}

.purchase-draw-compact-charge-label img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.purchase-draw-compact-amount {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #6f6969;
}

.purchase-draw-compact-amount-separator {
    color: #6f6969;
    font-weight: 400;
}

.purchase-draw-compact-progress-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 4px;
}

.purchase-draw-compact-progress-fill {
    height: 100%;
    background: #f4a0b8;
    border-radius: 3px;
    min-width: 0;
    transition: width 0.3s ease;
}

.purchase-draw-compact-note {
    margin-top: 7px;
    font-size: 11px;
    color: #999;
    text-align: center;
}

.purchase-draw-compact-cta {
    margin-top: 8px;
    display: flex;
    justify-content: center;
}

.purchase-draw-compact-cta-button {
    width: 100%;
    max-width: 320px;
    height: 42px;
    font-size: 15px;
}

/* --- 旧 purchase-draw-compact.blade.php の @once <style> から移設 --- */
.purchase-draw-compact-pass-ticket { margin: 8px 0 10px; }
.purchase-draw-compact-limit-banner {
    align-self: stretch;
    margin: 6px 0 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff1f1;
    border: 1px solid #f0b9b9;
    color: #b3261e;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}
.purchase-draw-compact-limit-banner b { font-size: 13px; }
/* 計測開始前（Issue #2473-a）。「引けません」の警告ではなく中立の情報なので配色を分ける */
.purchase-draw-compact-pending-banner {
    align-self: stretch;
    margin: 6px 0 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f5f7fb;
    border: 1px solid #c9d4e5;
    color: #3a4a63;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}
.purchase-draw-compact-pending-banner b { font-size: 13px; }
.purchase-draw-compact-pass-explain {
    font-size: 11px;
    line-height: 1.7;
    color: #5a5a5a;
    background: #faf5ff;
    border: 1px solid #e3c8f5;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 2px 0 6px;
    text-align: left;
}
.purchase-draw-compact-pass-explain b { color: #7a2494; }
.purchase-draw-compact-stock-note {
    /* 在庫で使えない枚数の明示（Issue #2922 PR2）。
       ⚠️ インライン style だと親の余白設定と噛み合わず枠外へはみ出して
       下の要素と重なった（実機で確認）。同ファイルの pass-explain と同じ
       ブロック要素の作りに揃える */
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: #C0392B;
    background: #FFF4F4;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 2px 0 6px;
    text-align: left;
    box-sizing: border-box;
}
.purchase-draw-compact-exclusive-hint {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #8a5a00;
    background: #fff7e0;
    border-radius: 8px;
    padding: 6px 10px;
}

/* 一覧カード内では詳細ページ用の max-width / 中央寄せを外す */
.gacha-card .purchase-draw-detail-section--compact {
    max-width: none;
    margin: 8px 0 0;
    padding: 0;
}