/* =========================================================
   fish-cards.css
   Premium product-card upgrade for fishvarieties.html
   Purely visual/behavioral — does not alter any text content.
   ========================================================= */

:root{
    --cat-goldfish:#f3961c;
    --cat-guppy:#ff4fa1;
    --cat-platy:#22c55e;
    --cat-cichlid:#00b4ff;
    --cat-other:#8b5cf6;

    --stock-good:#22c55e;
    --stock-low:#f59e0b;
    --stock-out:#ef4444;
    --stock-preorder:#3b82f6;
}

/* ---------- Card shell ---------- */
.fish-card{
    position:relative;
    background:var(--white);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(7,26,45,0.08);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
    will-change:transform;
    border:1px solid rgba(7,26,45,0.05);
}

.fish-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:18px;
    padding:2px;
    background:linear-gradient(135deg, var(--card-accent, var(--blue-color)), transparent 60%);
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    z-index:2;
}

.fish-card:hover{
    transform:translateY(-10px) scale(1.015);
    box-shadow:
        0 20px 40px rgba(7,26,45,0.16),
        0 0 0 1px rgba(255,255,255,0.4) inset,
        0 0 28px -4px var(--card-accent, var(--blue-color));
}

.fish-card:hover::before{
    opacity:1;
}

/* Category accent colors */
.fish-card[data-category="goldfish"]{ --card-accent:var(--cat-goldfish); }
.fish-card[data-category="guppy"]{ --card-accent:var(--cat-guppy); }
.fish-card[data-category="platy"]{ --card-accent:var(--cat-platy); }
.fish-card[data-category="cichlid"]{ --card-accent:var(--cat-cichlid); }
.fish-card[data-category="other"]{ --card-accent:var(--cat-other); }

/* ---------- Image area ---------- */
.fish-img-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#e9eef5;
}

/* Skeleton shimmer while the photo loads */
.fish-img-wrap.is-loading{
    background:linear-gradient(100deg, #e9eef5 30%, #f5f8fc 50%, #e9eef5 70%);
    background-size:250% 100%;
    animation:fish-skeleton 1.4s ease-in-out infinite;
}

@keyframes fish-skeleton{
    0%{ background-position:200% 0; }
    100%{ background-position:-50% 0; }
}

.fish-img-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:0;
    transform:scale(1.06);
    transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

.fish-img-wrap img.is-loaded{
    opacity:1;
    transform:scale(1);
}

/* Zoom on hover once loaded */
.fish-card:hover .fish-img-wrap img.is-loaded{
    transform:scale(1.1);
}

/* Gradient overlay for legibility of badges + polish */
.fish-img-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(7,26,45,0.35) 0%, rgba(7,26,45,0) 28%, rgba(7,26,45,0) 70%, rgba(7,26,45,0.25) 100%);
    pointer-events:none;
}

/* ---------- Badges over the image ---------- */
.availability-badge{
    position:absolute;
    top:14px;
    left:14px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:.2px;
    color:#fff;
    background:rgba(7,26,45,0.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.availability-badge .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--stock-good);
    box-shadow:0 0 8px var(--stock-good);
}

.availability-badge[data-level="low"] .dot{
    background:var(--stock-low);
    box-shadow:0 0 8px var(--stock-low);
}

.availability-badge[data-level="out"] .dot{
    background:var(--stock-out);
    box-shadow:0 0 8px var(--stock-out);
}

.availability-badge[data-level="preorder"] .dot{
    background:var(--stock-preorder);
    box-shadow:0 0 8px var(--stock-preorder);
}

.category-badge{
    position:absolute;
    top:14px;
    right:14px;
    z-index:3;
    padding:6px 12px;
    border-radius:999px;
    font-size:0.72rem;
    font-weight:700;
    color:#fff;
    background:var(--card-accent, var(--blue-color));
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

/* ---------- Info area ---------- */
.fish-info{
    padding:20px;
    position:relative;
}

.fish-info h3{
    margin-bottom:8px;
    color:#071a2d;
    font-size:1.15rem;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), color .35s ease;
}

/* Fish name nudges slightly right and picks up the card's accent color */
.fish-card:hover .fish-info h3{
    transform: translateX(4px);
    color: var(--card-accent, var(--blue-color));
}

.fish-info > p:first-of-type{
    color:#5a6b7a;
    margin-bottom:14px;
    line-height:1.5;
    font-size:0.92rem;
    opacity: 0.85;
    transform: translateY(2px);
    transition: opacity .4s ease .04s, transform .4s ease .04s;
}

.fish-card:hover .fish-info > p:first-of-type{
    opacity: 1;
    transform: translateY(0);
}

/* Icon-based stat row (Size / Stock) */
.fish-stats-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:10px;
    opacity: 0.88;
    transform: translateY(3px);
    transition: opacity .4s ease .08s, transform .4s ease .08s;
}

.fish-card:hover .fish-stats-grid{
    opacity: 1;
    transform: translateY(0);
}

.fish-stats-grid .fish-stock,
.fish-price-row .fish-stock{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    padding:8px 10px;
    background:#f3f7fc;
    border-radius:10px;
    font-size:0.82rem;
    font-weight:600;
    color:#071a2d;
    line-height:1.3;
}

.fish-stats-grid .fish-stock i,
.fish-price-row .fish-stock i{
    color:var(--card-accent, var(--blue-color));
    font-size:0.9rem;
    flex-shrink:0;
}

.fish-price-row{
    margin-bottom:6px;
    opacity: 0.88;
    transform: translateY(3px);
    transition: opacity .4s ease .12s, transform .4s ease .12s;
}

.fish-card:hover .fish-price-row{
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fish-info h3, .fish-info > p:first-of-type, .fish-stats-grid, .fish-price-row {
        transition: none !important;
    }
}

.fish-price-row .fish-stock{
    background:linear-gradient(90deg, rgba(0,180,255,0.08), rgba(0,180,255,0.02));
    border:1px dashed rgba(0,180,255,0.3);
}

.fish-info span{
    display:inline-block;
    margin-top:6px;
    background:var(--card-accent, var(--blue-color));
    color:white;
    padding:8px 14px;
    border-radius:20px;
    font-size:0.85rem;
}

/* ---------- Responsive tweak ---------- */
@media (max-width:420px){
    .fish-stats-grid{
        grid-template-columns:1fr;
    }
}

/* ==========================================================
   Merit badges — used sparingly (at most one ribbon per card)
   ========================================================== */

/* Ribbon badge, top-left over the image, stacked under the
   availability pill so a card never shows more than the
   availability + one merit badge at once. */
.merit-badge{
    position:absolute;
    top:50px;
    left:14px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:.2px;
    color:#071a2d;
    box-shadow:0 4px 10px rgba(0,0,0,0.25);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.merit-badge[data-merit="popular"]{
    background:linear-gradient(135deg,#ffd166,#ff8a3d);
    color:#3a1e00;
}

.merit-badge[data-merit="premium"]{
    background:linear-gradient(135deg,#f3d9ff,#c9a6ff);
    color:#2c0a4a;
}

.merit-badge[data-merit="new"]{
    background:linear-gradient(135deg,#8bf5c8,#38d19a);
    color:#043524;
}

.merit-badge[data-merit="locally-bred"]{
    background:linear-gradient(135deg,#ffe0b8,#ffc98a);
    color:#4a2600;
}

/* Small inline tag near the price row for bulk / wholesale
   pricing — informational, not a "sticker", so it lives in the
   info area rather than stacked on the photo. */
.wholesale-tag{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-left:8px;
    padding:3px 9px;
    border-radius:999px;
    font-size:0.68rem;
    font-weight:700;
    color:var(--primary-color, #071a2d);
    background:rgba(0,180,255,0.14);
    border:1px solid rgba(0,180,255,0.35);
    vertical-align:middle;
}

/* ---------------------------------------------------------------
   Fish catalog live/cached status pill (fish-catalog.js)
   Sits above the fish grid so visitors always know whether what
   they're looking at is a live feed from the server or a cached
   snapshot from an earlier visit — never both claimed at once.
   --------------------------------------------------------------- */
.fish-catalog-status{
    grid-column:1 / -1;
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:fit-content;
    margin:0 0 16px;
    padding:6px 14px;
    border-radius:999px;
    font-size:0.78rem;
    font-weight:700;
    line-height:1.3;
}

.fish-catalog-status[data-state="live"]{
    color:#166534;
    background:rgba(34,197,94,0.12);
    border:1px solid rgba(34,197,94,0.35);
}

.fish-catalog-status[data-state="cached"]{
    color:#854d0e;
    background:rgba(245,158,11,0.14);
    border:1px solid rgba(245,158,11,0.4);
}

.fish-catalog-status__dot{
    line-height:1;
}

.fish-catalog-status__age{
    font-weight:500;
    opacity:0.8;
}