/*
  * 全局样式
  */
:root {
    --main-color: #ed0083;
    --auxiliary-color: #5a5a4f;
    --background-color: #d0d0c8;
    --text-color: #f6f7f8;
    --text-color-every: #f6f7f8;
    --bg-color: #252525;
    --bg-color-block: #000000;
    --font-size-xs: 18px;
    --font-size-s: 20px;
    --font-size-m: 24px;
    --font-size-l: 36px;
    --font-size-xl: 40px;
    --font-size-xxl: 48px;
    --gap-xs: 10px;
    --gap-s: 20px;
    --gap-m: 30px;
    --gap-l: 40px;
    --gap-xl: 50px;
    --gap-xxl: 60px;
    --border-size: 1px;
    --border-radius: 5px;
    --box-shadow: 0 2px 4px rgba(255, 255, 255, 0.4);
}

.lightmode {
    --text-color: #252525;
    --bg-color: #f6f7f8;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

body {
    font-family: Microsoft YaHei, Sans-serif;
    font-weight: lighter;
    color: var(--text-color);
    background-color: var(--bg-color);
}

a {
    color: var(--main-color);
    text-decoration: none;
}

a:hover {
    text-shadow: var(--box-shadow);
}

ul,
li {
    list-style: none;
}

p {
    font-size: var(--font-size-s);
    line-height: 2;
    text-align: justify;
}

img {
    max-width: 100%;
}

.container {
    max-width: 768px;
    min-width: 360px;
    padding: 0 var(--gap-l);
    margin: 0 auto;
}

.cover {
    max-width: 768px;
    min-width: 360px;
    margin: 0 auto;
}


/*
  * 其他通用样式
  */
/* 提示信息样式 */
.notice {
    font-size: var(--font-size-s);
    line-height: 32px;
    text-align: justify;
}

/* 提示样式 */
.tips {
    font-size: var(--font-size-m);
    line-height: 36px;
    text-align: center;
}

/* 警告样式 */
.warning.visible {
    display: flex;
}

.warning {
    border: var(--border-size) solid var(--main-color);
    border-radius: var(--border-radius);
    display: none;
    justify-content: flex-start;
    align-items: center;
    padding-right: var(--gap-l);
    gap: var(--gap-s);
}

.warning .bgc {
    display: block;
    height: 100%;
    width: var(--gap-l);
    background-color: var(--main-color);
    opacity: 0.3;
    margin-right: -35px;
}

.warning .icon {
    width: 30px;
    height: auto;
}

.warning .notice {
    padding: var(--gap-s) 0;
}

/* VIP / 促销样式 */
.sales .title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
}

.sales .title img {
    width: var(--gap-m);
    height: auto;
}

.sales .title div,
.sales .title span {
    font-size: var(--font-size-m);
}

.sales .info {
    color: var(--auxiliary-color);
    font-size: var(--font-size-s);
    padding: var(--border-radius) 0 0 var(--gap-l);
    display: block;
}

/* 分割线样式 */
hr {
    border-width: var(--border-size) 0 0 0;
    border-style: solid;
    border-color: var(--auxiliary-color);
    margin: var(--gap-m) auto 0;
    width: 100%;
}


/*
  * 通用 input / button 样式
  */
input {
    background-color: transparent;
    border: var(--border-size) solid var(--auxiliary-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
    font-weight: lighter;
}

input:focus {
    outline: none;
    border-color: var(--main-color);
}

/* 输入框包装器样式 */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input {
    width: 100%;
    padding: var(--gap-s) var(--gap-s);
    font-size: var(--font-size-m);
}

/* 默认状态下span的样式 */
.input-wrapper .input-text {
    position: absolute;
    left: var(--gap-s);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    pointer-events: none;
    font-size: var(--font-size-m);
}

/* 当input聚焦时或有内容时，span的样式 */
.input-wrapper input:focus+.input-text,
.input-wrapper input:not(:placeholder-shown)+.input-text {
    top: 0;
    left: var(--gap-xs);
    transform: translateY(-50%) scale(0.75);
    background-color: var(--bg-color);
    padding: 0 var(--gap-xs);
}

/* 通用 button 样式 */
.btn {
    background-color: var(--main-color);
    border: none;
    border-radius: 100px;
    /* 100%圆角 */
    color: var(--text-color-every);
    cursor: pointer;
    font-weight: lighter;
}

.btn:hover {
    opacity: 0.9;
}

.btn:active {
    transform: scale(0.9);
}

/* 验证失败时的input-text样式 */
.input-wrapper .input-text.error {
    color: var(--main-color);
}

/* 验证失败时的input样式 */
.input-wrapper input.error {
    border-color: var(--main-color);
}

/* 验证失败时的label样式 */
label.error {
    border-color: var(--main-color);
    color: var(--main-color);
}


/*
  * 导航条样式
  */
nav.nav-bar {
    background-color: var(--auxiliary-color);
    padding: var(--font-size-m) 0;
    position: fixed;
    bottom: 0px;
    width: 100%;
    left: 0;
    z-index: 999;
}

.nav-bar .container {
    display: flex;
    justify-content: space-between;
}

.nav-bar a {
    display: block;
    width: 42px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    color: var(--background-color);
}

.nav-bar a:hover,
.nav-bar a.acctive {
    color: var(--main-color);
}

.nav-bar a:nth-child(1) {
    background-image: url("../img/home.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nav-bar a:nth-child(1):hover,
.nav-bar a:nth-child(1).acctive {
    background-image: url("../img/home-hover.png");
}

.nav-bar a:nth-child(2) {
    font-size: var(--font-size-l);
    font-weight: bold;
    font-style: italic;
    width: auto;
}

.nav-bar a:nth-child(3) {
    background-image: url("../img/user.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nav-bar a:nth-child(3):hover,
.nav-bar a:nth-child(3).acctive {
    background-image: url("../img/user-hover.png");
}

/*
  * 顶部条样式
  */
.top-bar {
    display: flex;
    justify-content: space-between;
    padding-top: var(--gap-s);
    padding-bottom: var(--gap-s);
}

.top-bar .title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-s);
}

.top-bar .title img {
    width: var(--gap-m);
    height: auto;
}

.top-bar .title text {
    font-size: var(--font-size-m);
    color: var(--text-color);
}


/* 搜索框样式 */
.search {
    margin: var(--gap-l) auto var(--gap-xxl);
}

.search-form {
    position: relative;
}

.search-form input,
.message {
    width: 100%;
    padding: var(--gap-s);
    border-radius: var(--gap-l);
    font-size: var(--font-size-m);
}


.search-form .btn {
    position: absolute;
    right: var(--gap-xs);
    top: var(--border-radius);
    width: var(--gap-xxl);
    height: var(--gap-xxl);
    display: flex;
    background-image: url("../img/search.png");
    background-size: var(--gap-l);
    background-position: center;
    background-repeat: no-repeat;
    background-color: unset;
}


/*
  * 数据列表样式
  */
.data-list {
    margin-bottom: 150px;
}

.data-list .list-cont {
    display: grid;
    gap: var(--gap-m);
}

.data-list .list-item {
    aspect-ratio: 16/9;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    font-size: var(--font-size-s);
    color: var(--text-color-every);
}

/* 暂无数据 */
.data-list .list-item.no-data {
    aspect-ratio: unset;
    font-size: var(--font-size-m);
    gap: var(--gap-xs);
}

.data-list .no-data .icon {
    height: 24px;
}

.location-range {
    position: absolute;
    top: 20px;
    width: 100%;
    padding: 0 var(--gap-s);
    display: flex;
    justify-content: space-between;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.location-range .location,
.location-range .range {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-xs);
}

.location-range .icon {
    height: 24px;
}

.user-data {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: var(--gap-s);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-s);
    background-color: rgba(0, 0, 0, 0.5);
}

.user-data .avatar {
    max-width: 160px;
    max-height: 160px;
    border-radius: 160px;
    border: 2px var(--text-color-every) solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-data .user-info {
    display: grid;
    gap: var(--gap-s);
}

.user-data .user-info .info-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-xs);
}

.user-data .user-info .name {
    font-size: var(--font-size-l);
    font-weight: bold;
    margin-right: var(--gap-xs);
    color: var(--text-color-every);
}

.user-data .user-info .icon {
    max-width: 30px;
    height: 30px;
}


/*
  * 单页样式
  */
.single-head {
    margin-bottom: var(--gap-xxl);
}

.single-head hr {
    margin: unset;
}

.single-cont {
    display: grid;
    gap: var(--gap-m);
    margin-bottom: 80px;
}

.data-list.favorites {
    margin-bottom: 80px;
}

/*
  * 移动端样式
  */
@media (max-width: 576px) {
    .container {
        padding-left: 5%;
        padding-right: 5%;
    }

    .data-list .user-data .avatar {
        max-width: 120px;
        max-height: 120px;
    }

    .data-list .user-data .user-info {
        gap: var(--gap-xs);
    }
}