/* ==========================================
   WISHLIST MANAGER
========================================== */

.wishlist-page{
    overflow:hidden;
}

.wishlist-topbar{
    min-height:78px;
    height:auto;
    padding:14px 26px;
}

.wishlist-topbar-title{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
}

.wishlist-topbar-title > div{
    min-width:0;
}

.wishlist-topbar-title span{
    display:block;
    color:var(--primary-hover);
    font-size:13px;
    font-weight:700;
    letter-spacing:1.4px;
}

.wishlist-topbar-title h1{
    margin:3px 0 0;
    color:var(--text);
    font-size:21px;
    line-height:1.2;
}

.wishlist-back-button,
.wishlist-browse-link{
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    background:var(--panel-light);
    color:var(--text-light);
    text-decoration:none;
    transition:var(--transition);
}

.wishlist-back-button{
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:11px;
}

.wishlist-browse-link{
    min-height:38px;
    gap:8px;
    padding:0 13px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
}

.wishlist-back-button:hover,
.wishlist-back-button:focus-visible,
.wishlist-browse-link:hover,
.wishlist-browse-link:focus-visible{
    border-color:var(--primary-hover);
    outline:none;
    background:rgba(124,92,252,.13);
    color:var(--text);
}

.wishlist-scroll{
    padding:22px 26px 34px !important;
}

.wishlist-shell{
    width:100%;
    max-width:1500px;
    margin:0 auto;
}

/* Hero */

.wishlist-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:30px;
    overflow:hidden;
    padding:28px 30px;
    border:1px solid rgba(124,92,252,.28);
    border-radius:20px;
    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(255,93,115,.16),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            rgba(124,92,252,.13),
            rgba(37,44,60,.95) 55%,
            rgba(29,34,48,.98)
        );
    box-shadow:0 18px 44px rgba(0,0,0,.2);
}

.wishlist-hero-copy{
    position:relative;
    z-index:1;
    min-width:0;
}

.wishlist-hero h2{
    margin:6px 0 0;
    color:var(--text);
    font-size:29px;
    line-height:1.2;
    letter-spacing:-.6px;
}

.wishlist-hero p{
    max-width:720px;
    margin:11px 0 0;
    color:var(--text-light);
    font-size:14px;
    line-height:1.7;
}

.wishlist-hero-mark{
    width:86px;
    height:86px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,93,115,.3);
    border-radius:26px;
    background:rgba(255,93,115,.1);
    color:var(--danger);
    box-shadow:0 0 34px rgba(255,93,115,.13);
    transform:rotate(-7deg);
}

.wishlist-hero-mark i{
    font-size:35px;
}

/* Summary */

.wishlist-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-top:15px;
}

.wishlist-summary-card{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:15px;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--panel);
}

.wishlist-summary-icon{
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:11px;
    font-size:15px;
}

.wishlist-summary-icon.total{
    background:rgba(124,92,252,.13);
    color:var(--primary-hover);
}

.wishlist-summary-icon.high{
    background:rgba(255,93,115,.12);
    color:var(--danger);
}

.wishlist-summary-icon.owned{
    background:rgba(66,211,146,.12);
    color:var(--success);
}

.wishlist-summary-icon.target{
    background:rgba(244,183,64,.12);
    color:var(--warning);
}

.wishlist-summary-card > div:last-child{
    min-width:0;
}

.wishlist-summary-card span{
    display:block;
    overflow:hidden;
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.wishlist-summary-card strong{
    display:block;
    margin-top:2px;
    color:var(--text);
    font-size:20px;
}

/* Controls */

.wishlist-controls{
    display:grid;
    grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(145px,.8fr));
    gap:11px;
    margin-top:15px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--panel);
}

.wishlist-control{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.wishlist-control > span{
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
}

.wishlist-control select,
.wishlist-search-control > div{
    height:41px;
    border:1px solid var(--border);
    border-radius:10px;
    outline:none;
    background:rgba(15,17,23,.38);
    color:var(--text);
    transition:var(--transition);
}

.wishlist-control select{
    width:100%;
    padding:0 11px;
    font-family:inherit;
    font-size:13px;
}

.wishlist-search-control > div{
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 12px;
}

.wishlist-search-control i{
    color:var(--text-light);
    font-size:13px;
}

.wishlist-search-control input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font-family:inherit;
    font-size:13px;
}

.wishlist-search-control input::placeholder{
    color:var(--text-light);
}

.wishlist-control select:focus,
.wishlist-search-control > div:focus-within{
    border-color:var(--primary-hover);
    box-shadow:0 0 0 3px rgba(124,92,252,.1);
}

.wishlist-results-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-top:24px;
}

.wishlist-results-heading h2{
    margin:4px 0 0;
    color:var(--text);
    font-size:21px;
}

.wishlist-results-heading > span{
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
}

/* Wishlist cards */

.wishlist-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(305px,1fr));
    gap:14px;
    margin-top:15px;
    padding-bottom:12px;
}

.wishlist-manager-card{
    --priority-color:var(--primary-hover);
    position:relative;
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:15px;
    min-width:0;
    overflow:hidden;
    padding:13px;
    border:1px solid var(--border);
    border-radius:17px;
    background:
        linear-gradient(
            145deg,
            rgba(37,44,60,.96),
            rgba(24,28,39,.98)
        );
    transition:var(--transition);
}

.wishlist-manager-card.priority-high{
    --priority-color:var(--danger);
}

.wishlist-manager-card.priority-medium{
    --priority-color:var(--warning);
}

.wishlist-manager-card.priority-low{
    --priority-color:#52a8ff;
}

.wishlist-manager-card:hover{
    border-color:color-mix(in srgb,var(--priority-color) 58%,var(--border));
    transform:translateY(-3px);
    box-shadow:0 15px 28px rgba(0,0,0,.22);
}

.wishlist-card-image{
    position:relative;
    align-self:start;
    overflow:hidden;
    aspect-ratio:2.5 / 3.5;
    border:1px solid rgba(255,255,255,.075);
    border-radius:11px;
    background:rgba(15,17,23,.6);
}

.wishlist-card-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.wishlist-card-image-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    align-content:center;
    gap:7px;
    color:var(--text-light);
    text-align:center;
}

.wishlist-card-image-placeholder i{
    color:var(--primary-hover);
    font-size:23px;
}

.wishlist-card-image-placeholder span{
    font-size:13px;
}

.wishlist-priority-badge{
    position:absolute;
    left:6px;
    bottom:6px;
    z-index:1;
    display:flex;
    align-items:center;
    gap:5px;
    padding:5px 7px;
    border:1px solid color-mix(in srgb,var(--priority-color) 45%,transparent);
    border-radius:999px;
    background:rgba(15,17,23,.88);
    color:var(--priority-color);
    font-size:13px;
    font-weight:700;
}

.wishlist-manager-content{
    min-width:0;
}

.wishlist-card-set{
    display:block;
    overflow:hidden;
    color:var(--primary-hover);
    font-size:13px;
    font-weight:700;
    letter-spacing:.6px;
    text-overflow:ellipsis;
    text-transform:uppercase;
    white-space:nowrap;
}

.wishlist-manager-content h3{
    margin:5px 0 0;
    overflow:hidden;
    color:var(--text);
    font-size:17px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.wishlist-card-meta{
    margin:5px 0 0;
    color:var(--text-light);
    font-size:13px;
    line-height:1.5;
}

.wishlist-owned-state{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:8px;
    color:var(--danger);
    font-size:13px;
    font-weight:600;
}

.wishlist-owned-state.is-owned{
    color:var(--success);
}

.wishlist-card-fields{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
    gap:8px;
    margin-top:13px;
    padding-top:12px;
    border-top:1px solid var(--border);
}

.wishlist-card-field{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}

.wishlist-card-field > span{
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
}

.wishlist-card-field select,
.wishlist-price-input{
    width:100%;
    height:35px;
    border:1px solid var(--border);
    border-radius:9px;
    outline:none;
    background:rgba(15,17,23,.45);
    color:var(--text);
    font-family:inherit;
    font-size:13px;
}

.wishlist-card-field select{
    padding:0 8px;
}

.wishlist-price-wrap{
    position:relative;
}

.wishlist-price-wrap > span{
    position:absolute;
    top:50%;
    left:9px;
    color:var(--text-light);
    font-size:13px;
    transform:translateY(-50%);
}

.wishlist-price-input{
    padding:0 8px 0 20px;
}

.wishlist-card-field select:focus,
.wishlist-price-input:focus{
    border-color:var(--priority-color);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--priority-color) 10%,transparent);
}

.wishlist-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:10px;
}

.wishlist-card-footer a,
.wishlist-remove-button{
    min-height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid var(--border);
    border-radius:9px;
    outline:none;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    transition:var(--transition);
}

.wishlist-card-footer a{
    flex:1;
    padding:0 9px;
    background:rgba(124,92,252,.1);
    color:var(--text);
}

.wishlist-remove-button{
    width:34px;
    flex-shrink:0;
    background:rgba(255,93,115,.07);
    color:var(--danger);
}

.wishlist-card-footer a:hover,
.wishlist-card-footer a:focus-visible{
    border-color:var(--primary-hover);
    background:rgba(124,92,252,.18);
}

.wishlist-remove-button:hover,
.wishlist-remove-button:focus-visible{
    border-color:var(--danger);
    background:rgba(255,93,115,.15);
}

/* Empty state */

.wishlist-empty-state{
    min-height:290px;
    margin-top:15px;
    padding:42px;
    border:1px dashed var(--border);
    border-radius:17px;
    background:var(--panel);
    color:var(--text-light);
    text-align:center;
}

.wishlist-empty-state:not([hidden]){
    display:grid;
    place-items:center;
    align-content:center;
    gap:9px;
}

.wishlist-empty-state > i{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(255,93,115,.1);
    color:var(--danger);
    font-size:21px;
}

.wishlist-empty-state strong{
    margin-top:5px;
    color:var(--text);
    font-size:16px;
}

.wishlist-empty-state span{
    max-width:410px;
    font-size:13px;
    line-height:1.6;
}

.wishlist-empty-state a{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:8px;
    padding:9px 12px;
    border:1px solid rgba(124,92,252,.4);
    border-radius:10px;
    background:rgba(124,92,252,.12);
    color:var(--text);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}

@media (max-width:1250px){
    .wishlist-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .wishlist-controls{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:1000px){
    .wishlist-page{
        overflow:auto;
    }

    .wishlist-page .app{
        min-height:100vh;
    }

    .wishlist-scroll{
        flex:1;
        overflow:visible !important;
    }
}

@media (max-width:700px){
    .wishlist-scroll{
        padding:18px !important;
    }

    .wishlist-hero{
        grid-template-columns:1fr;
        padding:23px;
    }

    .wishlist-hero-mark{
        display:none;
    }

    .wishlist-card-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:560px){
    .wishlist-topbar{
        padding:13px 16px;
    }

    .wishlist-browse-link{
        width:38px;
        padding:0;
        font-size:0;
    }

    .wishlist-browse-link i{
        font-size:13px;
    }

    .wishlist-summary-grid,
    .wishlist-controls{
        grid-template-columns:1fr;
    }

    .wishlist-manager-card{
        grid-template-columns:96px minmax(0,1fr);
        gap:12px;
    }

    .wishlist-card-fields{
        grid-template-columns:1fr;
    }
}

@media (max-width:390px){
    .wishlist-manager-card{
        grid-template-columns:1fr;
    }

    .wishlist-card-image{
        width:128px;
        justify-self:center;
    }
}

@media (prefers-reduced-motion:reduce){
    .wishlist-manager-card,
    .wishlist-back-button,
    .wishlist-browse-link{
        transition:none;
    }
}