.beckett-card {
    position: relative;
    overflow: hidden;
}

.beckett-label {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: linear-gradient(135deg, #FFD700 0%, #FFC200 40%, #F9AA00 100%);
    border: 1px solid #E5B700;
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.2);
/*    font-size: 0.7rem;
    line-height: 1.2em;
    min-height: 3.6em;
    max-height: 3.6em;*/
    overflow: hidden;
    color: #2b2b2b;
    margin-bottom: 0.1rem;
}

    .beckett-label .label-left {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        white-space: normal;
        flex: 1 1 auto;
        margin-right: 0.5rem;
    }

    .beckett-label a {
        color: inherit;
        text-decoration: none;
        padding: 0 2px;
    }

        .beckett-label a:hover {
            text-decoration: underline;
        }

.tracking-section {
    width: 100%;
    margin-top: auto;
    background: linear-gradient(135deg, #FFD700 0%, #FFC200 40%, #F9AA00 100%);
    border: 1px solid #E5B700;
    border-radius: 6px;
    padding: 6px 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.2);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

    .tracking-section button {
        background: transparent;
        border: none;
        color: #2b2b2b;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

        .tracking-section button:hover {
            color: #000;
        }

    .tracking-section i {
        margin-right: 0px;
        font-size: 1rem;
    }

/* Container styling */
.pokemon-filters {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    padding: 0.75rem 1rem;
    background-image: url('/images/pokeball.svg');
    background-position: right center;
    background-size: 2rem;
    background-repeat: no-repeat;
}

    /* Label styling */
    .pokemon-filters .form-label {
        font-size: 0.65rem;
        text-transform: uppercase;
        color: #3B4CCA; /* Pokémon blue */
        letter-spacing: 0.03em;
        margin-bottom: 0.2rem;
    }

    /* Input & select styling */
    .pokemon-filters .form-control,
    .pokemon-filters .form-select {
        border: 1px solid #3B4CCA;
        border-radius: 0.25rem;
        padding: 0.35rem 0.5rem;
        font-size: 0.85rem;
        height: auto;
    }

        .pokemon-filters .form-control:focus,
        .pokemon-filters .form-select:focus {
            border-color: #EE1515; /* Pokémon red */
            box-shadow: 0 0 0 0.2rem rgba(238,21,21,0.25);
        }

    /* Tighten up grid gutters */
    .pokemon-filters .row.g-2 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }

    /* Submit button styling */
    .pokemon-filters .btn-primary {
        background-color: #FFDE00; /* Pokémon yellow */
        border-color: #FFDE00;
        color: #212529;
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

        .pokemon-filters .btn-primary:hover {
            background-color: #FBE100;
            border-color: #FBE100;
        }
:root {
    /* Core Pokémon palette */
    --pokemon-red: #EE1515; /* Fire */
    --pokemon-blue: #6890F0; /* Water */
    --pokemon-green: #78C850; /* Grass */
    --pokemon-electric: #F8D030; /* Electric */
    --pokemon-base: #FFF7CB; /* Soft yellow */
    --pokeball-icon: url('/images/pokeball-icon.svg'); /* small, monochrome Poké Ball SVG */
}

.pokemon-background {
    background-color: var(--pokemon-base);
    /* Corner “element” accents */
    background-image: radial-gradient(circle at top left, var(--pokemon-red) 0%, transparent 40%), radial-gradient(circle at top right, var(--pokemon-blue) 0%, transparent 40%), radial-gradient(circle at bottom left, var(--pokemon-green) 0%, transparent 40%), radial-gradient(circle at bottom right, var(--pokemon-electric) 0%, transparent 40%),
    /* subtle, repeating Poké Ball pattern */
    var(--pokeball-icon);
    background-repeat: no-repeat, /* corner gradients */
    no-repeat, no-repeat, no-repeat, repeat; /* Poké Ball */
    /* size control for each layer */
    background-size: 12rem 12rem, /* top-left fire spot */
    12rem 12rem, /* top-right water spot */
    12rem 12rem, /* bottom-left grass spot */
    12rem 12rem, /* bottom-right electric spot */
    4rem 4rem; /* Poké Ball tiling */
    /* position the corners explicitly */
    background-position: top left, top right, bottom left, bottom right, center;
    /* a little texture to lift it off the page */
    box-shadow: inset 0 0 50px rgba(0,0,0,0.05);
}
:root {
    /* Core Pokémon palette */
    --pokemon-red: #EE1515; /* Fire */
    --pokemon-blue: #6890F0; /* Water */
    --pokemon-green: #78C850; /* Grass */
    --pokemon-electric: #F8D030; /* Electric */
    --pokemon-base: #FFF7CB; /* Soft yellow */
    --pokeball-icon: url('/images/pokeball-icon.svg'); /* small, monochrome Poké Ball SVG */
}

.pokemon-background {
    background-color: var(--pokemon-base);
    /* Corner “element” accents */
    background-image: radial-gradient(circle at top left, var(--pokemon-red) 0%, transparent 40%), radial-gradient(circle at top right, var(--pokemon-blue) 0%, transparent 40%), radial-gradient(circle at bottom left, var(--pokemon-green) 0%, transparent 40%), radial-gradient(circle at bottom right, var(--pokemon-electric) 0%, transparent 40%),
    /* subtle, repeating Poké Ball pattern */
    var(--pokeball-icon);
    background-repeat: no-repeat, /* corner gradients */
    no-repeat, no-repeat, no-repeat, repeat; /* Poké Ball */
    /* size control for each layer */
    background-size: 12rem 12rem, /* top-left fire spot */
    12rem 12rem, /* top-right water spot */
    12rem 12rem, /* bottom-left grass spot */
    12rem 12rem, /* bottom-right electric spot */
    4rem 4rem; /* Poké Ball tiling */
    /* position the corners explicitly */
    background-position: top left, top right, bottom left, bottom right, center;
    /* a little texture to lift it off the page */
    box-shadow: inset 0 0 50px rgba(0,0,0,0.05);
}

@media (max-width: 1400px) {
    /* ensure all form elements get a larger font */
    .mobile-filters,
    .mobile-filters .form-control,
    .mobile-filters .form-select,
    .mobile-filters .btn,
    .mobile-filters .form-label {
        font-size: 2rem; /* 20px */
    }

    .beckett-label {
        font-size: 2rem;
    }

    .card-footer{
        font-size:2rem;
    }
}