#pricing{
    padding-bottom:80px;
    padding-top: 36px
}

#pricing .switch-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      height: 42px;
      border: 2px solid #fff;
      border-radius: 21px;
      cursor: pointer;
      user-select: none;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }
#pricing .switch-container  .switch-highlight {
      position: absolute;
      height: 100%;
      border-radius: 22px;
      background: #5900FF;
      transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
      z-index: 1;
      width: 0;
      left: 0; 
    }
#pricing .switch-container .switch-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      position: relative;
      font-size:14px;
      z-index: 2;
      text-align: center;
      padding: 0 8px;
      transition: color 0.3s linear;
      color: var(--primary-color); /* 默认文字颜色 */
      white-space: nowrap;
    }
#pricing .switch-container .switch-item.active {
      color: #fff; /* 选中后的文字颜色 */
}

#pricing .switch-container .switch-item .switch-tag {
        background: linear-gradient( 128.43deg, rgba(246, 209, 236, 1), rgba(187, 227, 235, 1) 100% );
        border-radius: 13px;
        width: 68px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: var(--primary-color);
    }

    #pricing .pricing-list {
        position: relative;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 84px;
        padding-top: 40px;
    }
    #pricing .pricing-list .pricing-card {
          width: 320px;                         
          padding:16px 16px 24px 16px;                
          border-radius: 24px;                 
          box-shadow: 1px 4px 20px 0 rgba(0,0,0,0.3);
          background-color: #ffffff;  
    }
    #pricing .pricing-list .pricing-card.main {
        transform: scale(1.05);               
        transition: transform 0.3s ease;  
    }
    #pricing .pricing-list .pricing-card .card-header {
         position: relative;             /* relative */
          display: flex;                  /* flex */
          align-items: center;            /* items-center */
          justify-content: space-between; /* justify-between */
          gap: 10px;   
    }
    #pricing .pricing-list .pricing-card .card-header .header-logo {
        display:flex;
        align-items:center;
        justify-content:center;
        width:32px;
        height:32px;
        border-radius:50%;
        background-color:var(--primary-color)
    }
    #pricing .pricing-list .pricing-card .card-header .header-name {
        font-size:20px
    }
    #pricing .pricing-list .pricing-card .card-header .header-discount {
        background-color:#7d00ff;
        color:#fff;
        font-size:12px;
        padding: 4px 10px;
        border-radius:4px
    }
    #pricing .pricing-list .pricing-card .card-money {
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        color: #333;
        margin-top: 32px;
    }
    #pricing .pricing-list .pricing-card .card-money .main-d,.main-q {
        font-size: 32px !important;
        font-weight: bold !important;
        color: #333;
    }
    #pricing .pricing-list .pricing-card .pay-btn {
        display: flex;                          
        align-items: center;            
        justify-content: center;
        width: 100%;
        height:36px;
        margin-top:20px;
        border-radius:22px;
        cursor:pointer;
        padding:2px;
        overflow:hidden;
        font-size:14px;
        background:linear-gradient(135deg, rgb(223,109,222) 0%, rgb(123,125,219) 100%)
    }
    #pricing .pricing-list .pricing-card .pay-btn:hover {
        opacity:.6
    }
    #pricing .pricing-list .pricing-card .pay-btn .default {
      height: 100%;              
      width: 100%;                
      display: flex;              
      align-items: center;
      justify-content: center;
      border-radius: 22px;          
      background-color: #ffffff;   
    }
    #pricing .pricing-list .pricing-card .pay-btn .default span {
          display: flex;
          align-items: center;
          justify-content: center;

          background: linear-gradient(
            135deg,
            rgb(223, 109, 222) 0%,
            rgb(123, 125, 219) 100%
          );
  
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;  
    }
    #pricing .pricing-list .pricing-card .pay-btn .main {
         background-color:unset
    }
    #pricing .pricing-list .pricing-card .pay-btn .main span {
        color:#fff
    }
    #pricing .pricing-list .pricing-card .module-desc{
        margin-top:20px;
        padding-top:12px;
        border-top:1px solid #f1f1f1;
        font-size:14px
    }
    #pricing .pricing-list .pricing-card .module-desc .desc-content{
        display:flex;
        flex-direction: column;
        gap:4px
    }
    #pricing .pricing-list .pricing-card .module-desc .module-cotent{
       display:flex;
        flex-direction: column;
        gap:4px;
        margin-top:8px;
        color:#8c8c8c;
        font-size:12px
    }
    #pricing .pricing-list .pricing-card .info{
        margin-top:12px;
        border-top: 1px solid #f1f1f1;
        padding-top: 12px;
        display:flex;
        flex-direction: column;
        gap:8px
    }
    #pricing .pricing-list .pricing-card .info .info-item{
        display:flex;
        align-items:center;
        gap:6px;
        font-size:12px;
    }
    #pricing .pricing-list .pricing-card .info .info-item .icon{
        display:flex;
        justify-content:center;
        align-items:center;
        width:12px;
        height:12px
    }
    #pricing .pricing-list .pricing-card .info .info-item .icon img{
        width:100%;
        height:100%
    }
    #pricing .pricing-list .pricing-card .footer{
       padding-top:12px;
       margin-top:12px;
       font-size:12px;
       border-top:1px solid #f1f1f1
    }



@media (max-width: 768px) {
    #pricing .pricing-list {
        gap: 40px;
    }
}