/* 
   Pink Theme Override CSS 
   This file overrides all yellow colors to pink colors in both PC and mobile versions
*/

/* Yellow to Pink color mapping */
:root {
  --pink-light: #ffcad5;
  --pink-medium-light: #ffa2b5;
  --pink-medium: #ff8599;
  --pink-base: #ff7a90;
  --pink-dark: #ff5478;
  --pink-extra-dark: #ff3e65;
  --pink-bright: #ff97a8;
  --pink-highlight: #ff9fb4;
  --pink-soft: #ff8599;
  --pink-vibrant: #ff5b80;
  --pink-background-light: #fff0f3;
  --pink-background-lighter: #fff7f9;
}

/* Scrollbar styles */
::-webkit-scrollbar-thumb {
  background-color: var(--pink-medium) !important;
}

/* Button styles */
.yt-button {
  background: var(--pink-base) !important;
}

.btn-group .el-button:nth-child(2) {
  background: linear-gradient(152deg, var(--pink-dark), var(--pink-base)) !important;
}

/* Progress bar */
#nprogress .bar {
  background: var(--pink-bright) !important;
}

#nprogress .spinner-icon {
  border-color: var(--pink-bright) !important;
}

#nprogress .peg {
  -webkit-box-shadow: 0 0 10px var(--pink-bright), 0 0 5px var(--pink-bright) !important;
  box-shadow: 0 0 10px var(--pink-bright), 0 0 5px var(--pink-bright) !important;
}

/* Element UI overrides */
.el-step__head.is-finish,
.el-step__title.is-finish,
.el-step__description.is-finish {
  color: var(--pink-base) !important;
}

.el-step__head.is-finish {
  border-color: var(--pink-base) !important;
}

.el-carousel__arrow:hover {
  background-color: var(--pink-base) !important;
}

.el-collapse-item__header.focusing:focus:not(:hover) {
  color: var(--pink-base) !important;
}

.el-tag--dark {
  background-color: var(--pink-base) !important;
  border-color: var(--pink-base) !important;
}

.el-cascader .el-input .el-input__inner:focus,
.el-cascader .el-input.is-focus .el-input__inner {
  border-color: var(--pink-base) !important;
}

.el-cascader__suggestion-item.is-checked {
  color: var(--pink-base) !important;
}

.el-color-predefine__color-selector.selected {
  -webkit-box-shadow: 0 0 3px 2px var(--pink-base) !important;
  box-shadow: 0 0 3px 2px var(--pink-base) !important;
}

.el-color-dropdown__btn:hover {
  color: var(--pink-base) !important;
  border-color: var(--pink-base) !important;
}

.el-color-dropdown__link-btn {
  color: var(--pink-base) !important;
}

.el-color-dropdown__link-btn:hover {
  color: tint(var(--pink-base), 20%) !important;
}

.el-textarea__inner:focus,
.el-input__inner:focus,
.el-input.is-active .el-input__inner {
  border-color: var(--pink-base) !important;
}

.el-transfer-panel__item:hover {
  color: var(--pink-base) !important;
}

.el-alert--warning.is-light {
  background-color: var(--pink-base) !important;
}

.home-carousel .is-active .el-carousel__button {
  background: var(--pink-base) !important;
}

/* Video player styles */
.video .video-item-img .play>i {
  color: var(--pink-soft) !important;
}

/* Home page styles */
.home .el-dialog /deep/ .el-dialog__header {
  background: -webkit-gradient(linear, left top, right top, from(var(--pink-highlight)), to(var(--pink-vibrant))) !important;
  background: linear-gradient(90deg, var(--pink-highlight), var(--pink-vibrant)) !important;
}

.home .home-area .rank-content .rank-item:first-child .rank-level {
  background-image: -webkit-linear-gradient(bottom, var(--pink-dark), var(--pink-extra-dark)) !important;
}

.home .home-area .rank-content .rank-item:nth-child(2) .rank-level {
  background-image: -webkit-linear-gradient(bottom, var(--pink-soft), var(--pink-medium)) !important;
}

/* Mobile specific overrides */
.login .phone-login .sms-btn {
  color: var(--pink-vibrant) !important;
}

.login .phone-login .botton-area .van-button {
  background-image: linear-gradient(133deg, var(--pink-highlight), var(--pink-vibrant)) !important;
}

.ad-container .dow-cont .right {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--pink-highlight)), to(var(--pink-vibrant))) !important;
  background-image: linear-gradient(180deg, var(--pink-highlight), var(--pink-vibrant)) !important;
}

.contanner.vip-bg .left .van-tab--active:after {
  background-color: var(--pink-medium) !important;
}

.contanner .right:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 181, 197, .2)), color-stop(40%, rgba(255, 181, 197, .8)), color-stop(50%, rgba(255, 181, 197, .9)), to(#ffb5c5)) !important;
  background-image: linear-gradient(90deg, rgba(255, 181, 197, .2) 0, rgba(255, 181, 197, .8) 40%, rgba(255, 181, 197, .9) 50%, #ffb5c5) !important;
}

/* Background colors */
.background-light {
  background-color: var(--pink-background-light) !important;
}

.background-lighter {
  background-color: var(--pink-background-lighter) !important;
}