/* =========================
   Tags
========================= */


.tag-title {

    font-size:18px;

    font-weight:bold;

    margin-bottom:15px;

}


.tag-category {

    display:flex;

    align-items:flex-start;

    width:100%;

    margin-bottom:12px;

}


.tag-category-title {

    width:110px;

    flex:none;

    font-size:13px;

    font-weight:bold;

    color:#aaa;

    padding-top:6px;

}


.tag-category-items {

    flex:1;

    display:flex;

    flex-wrap:wrap;

    gap:6px;

}


.tag-item {

    display:inline-flex;

    align-items:center;

    padding:6px 12px;

    margin:3px;

    border-radius:14px;

    background:var(--bg-card);

    border:1px solid var(--border);

    color:var(--text-main);

    text-decoration:none;

    font-size:13px;

    line-height:1.2;

    transition:.15s ease;

}


.tag-item:hover {

    opacity:.8;

    transform:translateY(-1px);

}



.tag-more,
.tag-badge {

    display:inline-block;

    padding:4px 10px;

    border-radius:12px;

    font-size:13px;

}


/* category colors */

.category-copyright {
    background:#542020;
    color:#ffb0b0;
}

.category-character {
    background:#34205c;
    color:#d5b0ff;
}

.category-species {
    background:#164d2b;
    color:#9cffbd;
}

.category-clothing {
    background:#153d66;
    color:#9ed0ff;
}

.category-body {
    background:#663d22;
    color:#ffd39b;
}

.category-pose {
    background:#4c315c;
    color:#e7baff;
}

.category-style {
    background:#205050;
    color:#9fffff;
}

.category-environment {
    background:#333;
    color:#ccc;
}

.category-action {
    background:#5c2525;
    color:#ffaaaa;
}

.category-meta {
    background:#444;
    color:#aaa;
}


/* extra categories */

.category-appearance {
    background:#333;
    color:#ddd;
}

.category-expression {
    background:#444;
    color:#ddd;
}

.category-object {
    background:#333;
    color:#ddd;
}

.category-accessory {
    background:#333;
    color:#ddd;
}

.category-background {
    background:#333;
    color:#ddd;
}


/* =========================
   Image Detail Tag UI
========================= */


.image-tags{

    margin-top:25px;

    padding:20px;

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

}


.image-tags .tag-title{

    font-size:18px;

    font-weight:bold;

    margin-bottom:20px;

}



.tag-category{

    display:flex;

    align-items:flex-start;

    width:100%;

    margin-bottom:12px;

}



.tag-category-title{

    width:110px;

    flex:none;

    font-size:13px;

    font-weight:bold;

    color:var(--text-sub);

    padding-top:7px;

}



.tag-category-items{

    flex:1;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}



.tag-item{

    display:inline-flex;

    align-items:center;

    padding:6px 12px;

    border-radius:20px;

    background:#222;

    color:#ddd;

    text-decoration:none;

    font-size:13px;

    line-height:1;

}



.tag-item:hover{

    opacity:.8;

    transform:translateY(-1px);

}



@media(max-width:768px){

    .tag-category{

        flex-direction:column;

    }


    .tag-category-title{

        width:auto;

        margin-bottom:6px;

    }

}




/* detail tag chip polish */

.tag-item:hover {

    transform:translateY(-2px);

    opacity:.85;

}


.tag-item.category-copyright,
.tag-item.category-character,
.tag-item.category-species,
.tag-item.category-clothing,
.tag-item.category-body,
.tag-item.category-pose,
.tag-item.category-style,
.tag-item.category-environment,
.tag-item.category-action,
.tag-item.category-meta,
.tag-item.category-appearance,
.tag-item.category-expression,
.tag-item.category-object,
.tag-item.category-accessory,
.tag-item.category-background {

    border-width:1px;

}


/* detail page tag chip force */

.tag-category-items{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}


.tag-category-items .tag-item{

    display:inline-flex !important;

    padding:6px 12px !important;

    margin:0 !important;

    border-radius:14px !important;

    background:#222 !important;

    border:1px solid #555 !important;

    color:#eee !important;

    font-size:13px;

    text-decoration:none;

    white-space:nowrap;

}


.tag-category-items .tag-item:hover{

    background:#333 !important;

    transform:translateY(-2px);

}



/* image detail wrapper */

.image-tags{
    margin-top:20px;
}


.image-tags .tag-title{
    font-size:18px;
    font-weight:bold;
    margin-bottom:15px;
}


.image-tags .tag-list{
    display:block;
}


.image-tags .tag-category{
    display:flex;
    align-items:flex-start;
    margin-bottom:12px;
}


.image-tags .tag-category-title{
    width:110px;
    flex:none;
    font-size:13px;
    font-weight:bold;
    padding-top:7px;
}


.image-tags .tag-category-items{

    flex:1;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}


.image-tags .tag-item{

    display:inline-flex;

    padding:6px 12px;

    border-radius:14px;

    background:#222;

    border:1px solid #555;

    color:#eee;

    text-decoration:none;

    font-size:13px;

    white-space:nowrap;

}




/* detail tag colors final override */

.image-tags .tag-item.category-copyright{
    background:#542020 !important;
    color:#ffb0b0 !important;
}

.image-tags .tag-item.category-character{
    background:#34205c !important;
    color:#d5b0ff !important;
}

.image-tags .tag-item.category-species{
    background:#164d2b !important;
    color:#9cffbd !important;
}

.image-tags .tag-item.category-clothing{
    background:#153d66 !important;
    color:#9ed0ff !important;
}

.image-tags .tag-item.category-body{
    background:#663d22 !important;
    color:#ffd39b !important;
}

.image-tags .tag-item.category-pose{
    background:#4c315c !important;
    color:#e7baff !important;
}

.image-tags .tag-item.category-style{
    background:#205050 !important;
    color:#9fffff !important;
}

.image-tags .tag-item.category-environment{
    background:#333 !important;
    color:#ccc !important;
}

.image-tags .tag-item.category-action{
    background:#5c2525 !important;
    color:#ffaaaa !important;
}

.image-tags .tag-item.category-object,
.image-tags .tag-item.category-accessory,
.image-tags .tag-item.category-background{
    background:#333 !important;
    color:#ddd !important;
}

.image-tags .tag-item.category-meta{
    background:#444 !important;
    color:#aaa !important;
}

.image-tags .tag-item.category-general{
    background:#222 !important;
    color:#eee !important;
}