/**
 * QuickTools — NFT Gallery Styles  v2
 * assets/css/nqt-nft.css
 */

/* ══ GALLERY ══ */
.nft-gallery { width:100%; max-width:1100px; margin:0 auto; }

.nft-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6); flex-wrap:wrap; }
.nft-gallery__title { font-size:var(--font-size-2xl); font-weight:700; color:var(--text-primary); margin:0 0 var(--space-1); }
.nft-gallery__subtitle { color:var(--text-secondary); font-size:var(--font-size-sm); margin:0; }

.nft-wallet-badge { display:flex; flex-direction:column; align-items:flex-end; background:var(--accent-bg); border:1px solid var(--accent-light); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); white-space:nowrap; }
.nft-wallet-badge__label { font-size:var(--font-size-xs); color:var(--text-secondary); }
.nft-wallet-badge__value { font-size:var(--font-size-lg); font-weight:700; color:var(--accent); }

.nft-admin-badge { background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; font-size:var(--font-size-xs); font-weight:600; padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); white-space:nowrap; box-shadow:0 0 12px rgba(124,58,237,.4); }

/* ══ TABS ══ */
.nft-tabs { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-6); padding-bottom:var(--space-4); border-bottom:1px solid var(--border); }
.nft-tab { padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); border:1px solid var(--border); background:transparent; color:var(--text-secondary); font-size:var(--font-size-sm); cursor:pointer; transition:all var(--transition-fast); display:flex; align-items:center; gap:6px; }
.nft-tab:hover { background:var(--bg-tertiary); color:var(--text-primary); }
.nft-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.nft-tab__count { background:rgba(255,255,255,.25); font-size:11px; padding:1px 6px; border-radius:99px; font-weight:600; }

/* ══ GRID ══ */
.nft-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-6); margin-bottom:var(--space-10); }

/* ══ CARD ══ */
.nft-card { background:var(--bg-elevated); border-radius:var(--radius-xl); border:1px solid var(--border); overflow:hidden; transition:transform var(--transition-base),box-shadow var(--transition-base); display:flex; flex-direction:column; }
.nft-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-xl); }
.nft-card--owned { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.nft-card--soldout { opacity:.6; }

/* Preview */
.nft-card__preview { position:relative; height:165px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.nft-card__preview svg { width:64px; height:64px; filter:drop-shadow(0 0 14px rgba(255,255,255,.2)); transition:transform var(--transition-base); }
.nft-card:hover .nft-card__preview svg { transform:scale(1.15) rotate(4deg); }

/* Rarity glow */
.nft-card__rarity-glow { position:absolute; bottom:0; left:0; right:0; height:60px; pointer-events:none; }

/* Badges flottants */
.nft-card__owned-badge,.nft-card__promo-badge,.nft-card__admin-badge { position:absolute; font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--radius-full); letter-spacing:.03em; top:10px; }
.nft-card__owned-badge  { right:10px; background:var(--accent); color:#fff; }
.nft-card__promo-badge  { left:10px; background:linear-gradient(135deg,#dc2626,#f97316); color:#fff; animation:pulseBadge 2s infinite; }
.nft-card__admin-badge  { left:10px; background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; }
.nft-card__soldout-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); color:#fff; font-size:var(--font-size-lg); font-weight:700; letter-spacing:.1em; }

@keyframes pulseBadge {
  0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.4); }
  50%      { box-shadow:0 0 0 6px rgba(239,68,68,0); }
}

/* Card body */
.nft-card__body { padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.nft-card__header-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.nft-rarity-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.05em; }
.nft-card__category-tag { font-size:11px; color:var(--text-tertiary); }
.nft-card__name { font-size:var(--font-size-base); font-weight:700; color:var(--text-primary); margin:0; }
.nft-card__desc { font-size:var(--font-size-sm); color:var(--text-secondary); margin:0; line-height:1.4; }

.nft-card__footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:var(--space-2); border-top:1px solid var(--border-light); flex-wrap:wrap; gap:4px; }
.nft-card__supply { font-size:var(--font-size-xs); color:var(--text-tertiary); }
.nft-card__cost { display:flex; align-items:center; gap:6px; font-size:var(--font-size-sm); }

/* Prix promo */
.nft-cost-original { text-decoration:line-through; color:var(--text-tertiary); font-size:12px; }
.nft-cost-sale { color:#fb923c; font-weight:700; }
.nft-cost-free { color:#a855f7; font-weight:700; letter-spacing:.03em; }

.btn--full { width:100%; margin-top:var(--space-3); }
.btn--sm   { padding:4px 10px; font-size:var(--font-size-xs); }

/* ══ MA COLLECTION ══ */
.nft-my-collection { margin-bottom:var(--space-10); }
.nft-section-title { font-size:var(--font-size-xl); font-weight:700; margin:0 0 var(--space-4); }
.nft-equipped-row { background:var(--bg-secondary); border-radius:var(--radius-lg); padding:var(--space-4); margin-bottom:var(--space-4); }
.nft-equipped-label { font-size:var(--font-size-sm); color:var(--text-secondary); margin:0 0 var(--space-2); }
.nft-equipped-empty { font-size:var(--font-size-sm); color:var(--text-tertiary); margin:0; }
.nft-equipped-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.nft-equipped-chip { background:var(--accent-bg); color:var(--accent-text); border:1px solid var(--accent-light); border-radius:var(--radius-full); padding:4px 10px; font-size:var(--font-size-xs); display:flex; align-items:center; gap:6px; }
.nft-unequip-btn { background:none; border:none; cursor:pointer; color:var(--text-secondary); font-size:14px; line-height:1; padding:0; margin:0; }
.nft-owned-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:var(--space-4); }
.nft-owned-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:transform var(--transition-fast); }
.nft-owned-card:hover { transform:translateY(-2px); }
.nft-owned-card--equipped { border-color:var(--accent); }
.nft-owned-card__preview { position:relative; height:90px; display:flex; align-items:center; justify-content:center; }
.nft-owned-card__preview svg { width:40px; height:40px; }
.nft-owned-equipped-tag { position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:10px; font-weight:700; color:var(--accent); }
.nft-owned-card__info { padding:var(--space-2) var(--space-3); display:flex; flex-direction:column; gap:2px; }
.nft-owned-card__name { font-size:var(--font-size-xs); font-weight:600; color:var(--text-primary); }
.nft-owned-card__serial { font-size:11px; color:var(--text-tertiary); }
.nft-equip-toggle { margin:0 var(--space-3) var(--space-3); }

/* ══ SECTION EXPLICATIVE ══ */
.nft-explainer { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-2xl); padding:var(--space-8); margin-top:var(--space-8); }

.nft-explainer__header { text-align:center; margin-bottom:var(--space-8); }
.nft-explainer__header h3 { font-size:var(--font-size-2xl); font-weight:700; margin:0 0 var(--space-3); }
.nft-explainer__lead { font-size:var(--font-size-base); color:var(--text-secondary); max-width:640px; margin:0 auto; line-height:1.6; }
.nft-explainer__lead strong { color:var(--text-primary); }

.nft-explainer__cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--space-4); margin-bottom:var(--space-8); }

.nft-explainer__card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-5); }
.nft-explainer__card--future { border-color:var(--accent-light); background:var(--accent-bg); }
.nft-explainer__icon { font-size:32px; margin-bottom:var(--space-3); }
.nft-explainer__card h4 { font-size:var(--font-size-base); font-weight:700; margin:0 0 var(--space-2); color:var(--text-primary); display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.nft-explainer__card p { font-size:var(--font-size-sm); color:var(--text-secondary); line-height:1.55; margin:0 0 var(--space-3); }
.nft-explainer__card p strong { color:var(--text-primary); }

.nft-explainer__example { background:var(--bg-tertiary); border-radius:var(--radius-md); padding:var(--space-3); display:flex; flex-direction:column; gap:4px; font-size:12px; }
.nft-ex-line { color:var(--text-secondary); }
.nft-ex-arrow { color:var(--text-tertiary); text-align:center; }
.nft-ex-burn { color:#f87171; font-weight:600; }
.nft-ex-up   { color:#4ade80; font-weight:600; }

.nft-explainer__promise { background:var(--bg-tertiary); border-radius:var(--radius-md); padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2); }
.nft-explainer__promise p { margin:0; font-size:var(--font-size-sm); color:var(--accent-text); }

.nft-badge-wip { font-size:10px; font-weight:600; background:rgba(245,158,11,.15); color:#d97706; border:1px solid rgba(245,158,11,.4); padding:2px 7px; border-radius:var(--radius-full); }

/* Flow résumé */
.nft-explainer__flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--space-2); background:var(--bg-elevated); border-radius:var(--radius-xl); padding:var(--space-5); }
.nft-flow-step { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.nft-flow-step span:last-child { font-size:var(--font-size-xs); color:var(--text-secondary); max-width:90px; line-height:1.3; }
.nft-flow-step--reward .nft-flow-num { background:var(--accent); color:#fff; }
.nft-flow-step--reward span:last-child { color:var(--text-primary); font-weight:600; max-width:115px; }
.nft-flow-num { width:28px; height:28px; border-radius:50%; background:var(--bg-tertiary); color:var(--text-primary); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nft-flow-arrow { color:var(--text-tertiary); font-size:18px; flex-shrink:0; }

/* ══ MODAL ══ */
.nft-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:var(--space-4); }
.nft-modal { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-2xl); padding:var(--space-8); max-width:420px; width:100%; position:relative; }
.nft-modal__close { position:absolute; top:16px; right:16px; background:var(--bg-tertiary); border:none; width:28px; height:28px; border-radius:50%; font-size:16px; cursor:pointer; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; }
.nft-modal__title { font-size:var(--font-size-xl); font-weight:700; margin:0 0 var(--space-4); }
.nft-modal__body { display:flex; flex-direction:column; gap:var(--space-3); }
.nft-modal__body p { margin:0; color:var(--text-secondary); font-size:var(--font-size-sm); }
.nft-modal__cost { font-size:var(--font-size-2xl); font-weight:700; color:var(--accent); text-align:center; padding:var(--space-4); background:var(--accent-bg); border-radius:var(--radius-lg); }
.nft-modal__item-name { font-weight:600; color:var(--text-primary)!important; font-size:var(--font-size-base)!important; text-align:center; }
.nft-modal__warning { font-size:var(--font-size-xs)!important; background:var(--error-bg); border:1px solid var(--error); color:var(--error)!important; padding:var(--space-3); border-radius:var(--radius-md); }
.nft-modal__balance { font-size:var(--font-size-sm); color:var(--text-secondary); text-align:right; }
.nft-modal__balance strong { color:var(--text-primary); }
.nft-modal__actions { display:flex; gap:var(--space-3); justify-content:flex-end; margin-top:var(--space-5); }

/* ══ EMPTY ══ */
.nft-empty { grid-column:1/-1; }
.empty-state { text-align:center; padding:var(--space-12) var(--space-6); color:var(--text-tertiary); }
.empty-state__icon { font-size:48px; margin-bottom:var(--space-4); opacity:.5; }

/* ══ RESPONSIVE ══ */
@media (max-width:768px) {
    .nft-explainer { padding:var(--space-5); }
    .nft-explainer__flow { flex-direction:column; }
    .nft-flow-arrow { transform:rotate(90deg); }
    .nft-flow-step span:last-child { max-width:100%; }
}

/* ═══════════════════════════════════════════════
   EXPLAINER v2 — SVG icons + visual flow
   ═══════════════════════════════════════════════ */

/* Header icon centré */
.nft-explainer__header-icon {
    width: 64px;
    height: 64px;
    background: var(--accent-bg);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

/* Icônes colorées par card */
.nft-explainer__card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.nft-explainer__card-icon--burn     { background: rgba(239,68,68,.12);  color: #EF4444; }
.nft-explainer__card-icon--value    { background: rgba(16,185,129,.12); color: #10B981; }
.nft-explainer__card-icon--collective{ background: rgba(59,130,246,.12); color: #3B82F6; }
.nft-explainer__card-icon--reward   { background: rgba(245,158,11,.12); color: #F59E0B; }

/* Rows dans les examples */
.nft-explainer__example {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nft-explainer__example-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}
.nft-explainer__example-row svg { flex-shrink: 0; margin-top: 2px; }
.nft-explainer__example-row--result { color: var(--accent); }
.nft-explainer__example-row--highlight { color: var(--text-primary); font-size: var(--font-size-sm); }

/* Promise rows dans card reward */
.nft-explainer__promise { display: flex; flex-direction: column; gap: 10px; }
.nft-explainer__promise-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.nft-explainer__promise-row svg { flex-shrink: 0; margin-top: 2px; }

/* ─── FLOW VISUEL ─── */
.nft-explainer__summary {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    overflow: hidden;
}
.nft-explainer__summary h4 {
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 32px;
}

.nft-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nft-flow__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 100px;
    max-width: 120px;
    text-align: center;
}

.nft-flow__bubble {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--step-color) 12%, var(--bg-secondary));
    border: 2px solid color-mix(in srgb, var(--step-color) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.nft-flow__item:hover .nft-flow__bubble {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--step-color) 25%, transparent);
}

/* Fallback pour navigateurs sans color-mix */
@supports not (color: color-mix(in srgb, red 10%, blue)) {
    .nft-flow__bubble { background: var(--bg-tertiary); border-color: var(--border); }
}

.nft-flow__icon { display: flex; }
.nft-flow__num {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--step-color);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.nft-flow__label {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
    font-weight: 500;
}

.nft-flow__item--final .nft-flow__label {
    color: var(--accent);
    font-weight: 600;
}

.nft-flow__connector {
    display: flex;
    align-items: center;
    opacity: .4;
    flex-shrink: 0;
}

/* Responsive flow */
@media (max-width: 768px) {
    .nft-flow { flex-direction: column; gap: 0; }
    .nft-flow__connector { transform: rotate(90deg); margin: 4px 0; }
    .nft-flow__item { max-width: 100%; flex-direction: row; text-align: left; min-width: unset; width: 100%; gap: 16px; }
    .nft-flow__bubble { flex-shrink: 0; width: 52px; height: 52px; }
    .nft-explainer__summary { padding: 20px 16px; }
}