/* shop */

.categorys {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 330px;
}

.select-group{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.select-group.VIP{
    font-family: "creamfont-1.1";
}

.select-group.ADD{
    font-family: "jf-jinxuan-medium";
}

.select {
    flex: 1;
    position: relative;
    width: 100%;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.select .selected {
    flex: 1;
}

.select-group.open .options {
    display: block;
}


.category {
    flex: 1;
    color: var(--FFFFFF);
    font-size: 14px;
    letter-spacing: 1px;
    padding: 8px 10px;
    position: relative;
    line-height: 1;
    gap: 5px;
    width: 100px;
    height: 30px;
    display: flex;
    justify-content: space-between;
}

#region-select.ADD .category{
    background: var(--13AE67);
}

#category-select.ADD .category{
    background: var(--F4C138);
}

#input-search.ADD.category {
    background: var(--B5B5B5);
}

.category.ADD .selected {
    cursor: pointer;
    color: var(--FFFFFF);
}

.category.ADD {
    border-radius: 10px 10px 0px 0px;
}


#region-select.VIP .category {
    background: var(--592814);
}

#category-select.VIP .category{
    background: var(--D5BA3C);
}

#input-search.VIP.category{
    background: var(--B5B5B5);
}

.category.VIP {
    transform: skewX(-15deg);
    border-radius: 5px 10px 0px 0px;
}

.category.VIP .selected,
.category.VIP i {
    transform: skewX(15deg);
    cursor: pointer;
    color: var(--FFFFFF);
}



.category input,
.category input::placeholder,
.category input:focus,
.category input:focus-visible,
.category input:active
 {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--DCDDDD);
    font-size: 11px;
    outline: none;
}



.options {
    display: none;
    position: absolute;
    top: 30px;
    padding: 5px 15px;
    z-index: 1000;
    width: 100px;
    line-height: 1.5;
    font-size: 11px;
}

.options {
    background: var(--FFFFFF);
    color: var(--3E3A39);
}

.options .group{
    margin-bottom: 10px;
}


.options .group-title {
  font-weight: bold;
  padding: 6px 10px;
  color: #666;
  cursor: default;
  pointer-events: none; 
  background: #f5f5f5;
  text-align: center;
}

.options .option {
    border-bottom: 0.5px solid var(--B5B5B5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: center;
    padding: 0 10px;
}

.option.all{
    border-bottom: none;
    margin-bottom: 10px;
}

.options .option:last-child {
    border-bottom: none;
}

.options .option span {
    text-align: center;
    white-space: nowrap;
}


#region-select.ADD .options {
    border: 1px solid var(--13AE67);
    left: 0;
}

#region-select.ADD .option:hover {
    background: var(--13AE67);
    color: var(--FFFFFF);
}

#category-select.ADD .options {
    border: 1px solid var(--F4C138);
    left: 0;
}

#category-select.ADD .option:hover {
    background: var(--F4C138);
    color: var(--FFFFFF);
}

#region-select.VIP .options {
    border: 1px solid var(--592814);
    left: -4px;
}

#region-select.VIP .option:hover {
    background: var(--592814);
    color: var(--FFFFFF);
}

#category-select.VIP .options {
    border: 1px solid var(--D5BA3C);
    left: -4px;
}

#category-select.VIP .option:hover {
    background: var(--D5BA3C);
    color: var(--FFFFFF);
}

@media (min-width: 451px) {

    .categorys {
        width: 100%;
    }

    .category {
        font-size: 14pt;
        width: 150px;
        height: auto;
    }

    .category input,
    .category input::placeholder,
    .category input:focus,
    .category input:focus-visible,
    .category input:active
    {
        font-size: 11pt;
    }

    .options {
        font-size: 11pt;
        width: 150px;
        padding: 10px 20px;
        top: 35px;
    }

    #category-select.VIP .options,
    #region-select.VIP .options {
        left: -5px;
    }
}



/* news */

.newsTitle{
    text-align: center;
    color: var(--FFFFFF);
    position: absolute;
    top: -15px;
    padding: 8px 15px;
    line-height: 1;
    border: 1px solid var(--FFFFFF);
    letter-spacing: 2px;
    font-size: 20px;
}

.newsTitle.ADD{
    font-family: "jf-jinxuan-medium";
    background: var(--13AE67);
    border-radius: 20px;
}

.newsTitle.VIP{
    font-family: "creamfont-1.1";
    background: var(--592814);
    border-radius: 10px 0 10px 0;
}

@media (min-width: 451px) {

    .newsTitle {
        font-size: 20pt;
    }
}