/**
 * Cascade — live Dutch-auction marketplace theme.
 * Layered on top of the order plugin's Bootstrap; everything is scoped to .cascade.
 */
.cascade {
    /* --c-accent / --c-accent-2 default to the Cascade indigo but are overridden at render
       time from the active Blesta client theme's primary colour (see the theme probe in the
       template), so the storefront follows the site branding. --c-on-accent is the readable
       text colour chosen for that accent. */
    --c-accent: #4f46e5;
    --c-accent-2: #06b6d4;
    --c-on-accent: #ffffff;
    --c-ink: #0f172a;
    --c-muted: #64748b;
    --c-line: #e5e9f2;
    --c-bg: #f7f8fc;
    --c-good: #10b981;
    --c-warn: #f59e0b;
    --c-bad: #ef4444;
    color: var(--c-ink);
}

/* Hero */
.cascade-hero {
    background: linear-gradient(120deg, var(--c-accent), var(--c-accent-2));
    color: var(--c-on-accent);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 16px;
    box-shadow: 0 12px 30px -16px rgba(15, 23, 42, .45);
}
.cascade-hero h2 { margin: 0; font-weight: 700; letter-spacing: -.02em; color: var(--c-on-accent); }
.cascade-hero p { margin: 6px 0 0; opacity: .92; }

/* Explanatory intro banner (what this page is) */
.cascade-intro {
    background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-accent);
    border-radius: 12px; padding: 14px 18px; margin-bottom: 22px;
}
.cascade-intro .cascade-perks {
    display: block; font-weight: 800; color: var(--c-ink); letter-spacing: .01em;
    text-transform: uppercase; font-size: .82rem;
}
.cascade-intro p { margin: 6px 0 0; color: var(--c-muted); font-size: .95rem; }
.cascade-live {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .58em; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
    vertical-align: middle; background: rgba(0, 0, 0, .18); padding: 4px 10px; border-radius: 999px;
}
.cascade-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); animation: cascade-pulse 1.6s infinite;
}
@keyframes cascade-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Sidebar */
.cascade-aside { margin-bottom: 18px; }
.cascade-panel {
    background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 14px;
}
.cascade-label {
    display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--c-muted); margin-bottom: 8px;
}
.cascade-range { display: flex; align-items: center; gap: 8px; }
.cascade-range .form-control { text-align: center; }
.cascade-range-sep { color: var(--c-muted); }
.cascade-checks { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow: auto; }
.cascade-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .92rem; cursor: pointer; }
.cascade-check input { margin: 0; }

/* Toolbar */
.cascade-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.cascade-count { color: var(--c-muted); font-size: .95rem; }
.cascade-count strong { color: var(--c-ink); font-size: 1.15rem; }

/* Grid + cards — hidden until cascade.js applies live feed prices, so the package
   list price never flashes before the auction price is painted */
.cascade-grid { display: none; flex-direction: column; gap: 12px; }
.cascade-grid.cascade-ready { display: flex; }
.cascade-card {
    display: grid;
    grid-template-columns: 1fr 200px 220px;
    align-items: center; gap: 18px;
    background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
    padding: 16px 20px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.cascade-card:hover { box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .35); transform: translateY(-1px); border-color: #d7dcea; }
.cascade-card.cascade-soldout { opacity: .55; }
.cascade-card.cascade-hidden { display: none; }

.cascade-tag {
    display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--c-accent); background: #eef0ff;
    padding: 3px 9px; border-radius: 999px; margin-bottom: 6px;
}
.cascade-name { margin: 0; font-size: 1.12rem; font-weight: 700; }
.cascade-term { color: var(--c-muted); font-size: .85rem; margin-top: 2px; }
.cascade-progress {
    margin-top: 12px; height: 6px; background: #eef1f7; border-radius: 999px; overflow: hidden; max-width: 320px;
}
.cascade-bar {
    display: block; height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent));
    border-radius: 999px; transition: width .4s ease;
}

.cascade-card-stats { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cascade-expiry {
    display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--c-ink); background: #fff7ed; border: 1px solid #fde7c8;
    padding: 5px 10px; border-radius: 8px; font-size: .9rem;
}
.cascade-expiry i { color: var(--c-warn); }
.cascade-expiry.cascade-soon { background: #fef2f2; border-color: #fecaca; }
.cascade-expiry.cascade-soon i { color: var(--c-bad); }
.cascade-units { font-size: .85rem; color: var(--c-muted); font-weight: 600; }
.cascade-units.cascade-low { color: var(--c-bad); }

.cascade-card-buy { text-align: right; }
.cascade-price { line-height: 1.1; margin-bottom: 10px; }
.cascade-now {
    display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--c-ink); font-variant-numeric: tabular-nums;
}
.cascade-now.cascade-tick { animation: cascade-flash .6s ease; }
@keyframes cascade-flash { 0% { color: var(--c-good); } 100% { color: var(--c-ink); } }
.cascade-was {
    display: inline-block; font-size: .85rem; color: var(--c-muted);
    text-decoration: line-through; margin-right: 6px;
}
.cascade-off {
    display: inline-block; font-size: .72rem; font-weight: 800; color: #fff;
    background: var(--c-bad); padding: 2px 7px; border-radius: 6px; vertical-align: middle;
}
.cascade-btn { font-weight: 700; border-radius: 10px; padding: 9px 18px; }
.cascade-btn-buy {
    background: linear-gradient(120deg, var(--c-accent), var(--c-accent-2)); border: 0; color: #fff;
    box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .7);
}
.cascade-btn-buy:hover { color: #fff; filter: brightness(1.06); }

/* Inline-select buttons (per-auction page reuses the stock boxes select flow) */
.cascade-card .order { display: inline-block; }
.cascade-card .order.selected-btn { display: none; }
.cascade-card.selected { border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(79, 70, 229, .18); }
.cascade-card.selected .order.selected-btn { display: inline-block; }
.cascade-card.selected .order.unselected-btn { display: none; }
.cascade-card .order .btn { font-weight: 700; border-radius: 10px; padding: 9px 18px; }

/* States */
.cascade-empty, .cascade-loading {
    text-align: center; color: var(--c-muted); padding: 40px 10px; display: none;
}
.cascade-loading { display: block; }

/* Responsive */
@media (max-width: 900px) {
    .cascade-card { grid-template-columns: 1fr; gap: 12px; }
    .cascade-card-stats { flex-direction: row; gap: 16px; }
    .cascade-card-buy { text-align: left; }
    .cascade-now { font-size: 1.5rem; }
}