.member-content {
    width: 900px;
    background-color: #fff;
    padding: 0;
    border-radius: 20px;
    margin: 0 auto;
    height: 670px;
    position: relative;
    overflow: hidden;
}

.membertop .btn-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 1000;
    cursor: pointer;
	 border-radius: 50%;


}

.membertop {
    background: url(../image/topimg.svg) 630px 10px no-repeat;
    padding-left: 60px;
    padding-top: 60px;

}

/* .mtopimg{ position: absolute; right: 40px; top: 10px; z-index: 1; } */
.fs18 {
    font-size: 16px;
}

.fs12 {
    font-size: 12px;
}

.fs14 {
    font-size: 14px;
}

.text-c {
    color: #767F8C;
}

.text_red {
    color: #CC302D;
}

.member-bar {
    background: white;
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    width: 780px;
    margin-top: 20px;
    overflow: hidden;
    position: absolute;
  
}
    .orbg{ background: url(../image/input-shadow.png) no-repeat center bottom; background-size: 80%; width: 780px;
    height: 143px; }
    .ortext{background: url(../image/titlbg.png) no-repeat center center; background-size: 80%; width: 780px; height: 50px; 
      text-align: center; color: #939393; font-size: 14px;    line-height: 50px;  margin-top: -35px; margin-bottom: 10px; 
    }

.member-bar .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 6px;
    padding: 0.75rem 2rem;
    font-weight: 500;
    width: 160px;
    float: right;
    cursor: pointer;
}

.member-bar .btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.member-bar .form-control {
    width: 580px;
    float: left;
	  font-size: 1.1rem;
    text-align: left;
    letter-spacing: 2px;
}

#verificationCode:focus::placeholder {
 color:#ccc
}
.modal-dialog {

    pointer-events: auto !important;
}

.membercont {
    display: flex;
    justify-content: space-around;
    padding: 30px 40px;
}

.mbox {
    width: 380px;
    padding: 40px 10px 20px;
    text-align: center;
    border-radius: 20px;
    margin: 10px;
}

.mbox p {
    margin-bottom: 0.2rem;
}

.bluebg {
    background-color: #E9F0F9;
}

.yellowbg {
    background-color: #FDF6E8;
}

.price {
    font-size: 40px;
    color: #CC302D;
    background: url(../image/linetop.svg) left 35px no-repeat;
    background-size: 36%;
    padding-bottom: 10px;
}

.text-line {
    text-decoration: line-through;
}


/* ---------- -------------- */
.member-content .card-container {
    display: flex;
    /* padding-top: 40px; */
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;

}

.member-content .menbercard {
    width: 250px;
    background-color: #E9F0F9;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    
}
.two_container .menbercard{ width: 370px;}


.member-content .menbercard.highlight {
    border: 1px solid #ff9e0c71;
    box-shadow: 0 0 20px rgba(112, 82, 0, 0.135);
    background-color: #FDF6E8;
}

.member-content .menbercard.highlight .card-tag {
    color: #D78100;
}

.member-content .card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-content .card-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #1660B6;
}


.member-content .card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-left: 10px;
}

.member-content .price-info {
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    gap: 4px;
	 flex-direction: row; /* 改为水平排列（关键） */
    flex-wrap: nowrap; /* 强制不换行（显式声明，默认也是nowrap） */
    align-items: center; /* 垂直居中对齐（根据视觉需求选择，可选baseline） */
    gap: 8px; /* 水平间距，原4px可按需调整 */
    /* 可选：若父容器宽度不足，添加min-width确保内容能完整显示 */
    min-width: fit-content; /* 让父容器宽度适应子元素总和，避免挤压 */
}

.member-content .price {
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 2px;
	 display: flex;
    align-items: baseline;
    gap: 4px;
     
  
}

.member-content .price-info.xf .price {
   
     width: 42%;   min-width: 120px; /* 可选：确保价格区域不被过度挤压 */
   
}

.price-info.xf .fs14 {
    /* 若父容器用align-items: baseline，可添加此属性确保对齐 */
    align-self: baseline;
    padding-top: 8px; /* 微调垂直位置，按需调整 */
}

.member-content .price span {
    font-size: 14px;
    opacity: 0.8;
    color: #767F8C;
    font-weight: 400;
}

.member-content .point-price {
    font-size: 14px;
    opacity: 0.8;
}

.member-content .buy-btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: linear-gradient(90deg, #3793fb, #4A90E2);
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-top: 10px;
    cursor: pointer;
    border: 0;
}

.member-content .buy-btn svg {
    vertical-align: sub;
}

.member-content .buy-btn:hover {
    transform: scale(1.02);
    background: linear-gradient(90deg, #2285f7, #3184e3);
}

.member-content .buy-btn.advanced-gradient {
    background: linear-gradient(90deg, #f89d15, #F2A93B);
}

.member-content .buy-btn.advanced-gradient:hover {
    background: linear-gradient(90deg, #ee9612, #ee9612);
}

.member-content .buy-btn.btn_dispnone {
    background: linear-gradient(90deg, #848484, #838383);
}

.member-content .buy-btn.btn_dispnone:hover {
    background: linear-gradient(90deg, #9a9a9a, #969696);
}

.member-content .quota {
    margin-top: 16px;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-content .quota-title {
    font-size: 14px;
    font-weight: 600;
}

.member-content .quota-desc {
    font-size: 12px;
    opacity: 0.8;
}

.member-content .feature-list {
    padding-left: 10px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.member-content .feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
	overflow:hidden
}

.member-content .feature-item::before {
    content: "✓";
    color: var(--primary-color);
}

.member-content .menbercard.highlight .feature-item::before {
    content: "✓";
    color: #D78100;
}
 .modal-lg,
 .modal-xl {
     --bs-modal-width: 1320px;
 }
.member-content .buy-btn.disabled {
    background-color: #ccc !important;
	background:none;
    cursor: not-allowed;
}



/* 特殊购买按钮样式 */
.special-buy-button {
    display: flex;
    width: 100%;
    height: 50px;
    background: #F5F5DC;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 10px;
}

.special-buy-button:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.discount-section {
    flex: 0.8;
    background-color: #fff;
    padding: 6px 0  13px 13px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    border-radius: 8px 0 0 8px;
}

.discount-amount {
    font-size: 20px;
    text-align: left;
    font-weight: bold;
    color: #D93026;
    line-height: 1;
    margin-bottom: 4px;
}

.discount-text {
    font-size: 11px;
    color: #A67C52;
    font-weight: 400;
    text-align: left;
    line-height: 1.2;
}
.lightning-divider svg {
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
}

.price-section {
    flex: 1.2;
    background:#fff url(https://youzhi.link/static/image/yhjbtnbg.png) no-repeat 0px top;
    background-size: auto 100%;
    padding: 8px 16px;
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    border-radius: 0 8px 8px 0;
    position: relative;
}
.pinfo{ display: flex;  flex-direction:column;
    padding-top: 6px;
    padding-left: 16px;
    width: 98px;}
.final-price {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 4px;
}

.price-label {
    font-size: 11px;
    color: #FFFFFF;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 4px;
}

.buy-text {
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;
    text-align: center;
}

/* 特殊购买按钮样式 */
.special-buy-button {
    display: flex;
    width: 100%;
    height: 50px;
    background: #F5F5DC;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 10px;
}

.special-buy-button:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.discount-section {
    flex: 0.8;
    background-color: #fff;
    padding: 6px 0  13px 13px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    border-radius: 8px 0 0 8px;
}

.discount-amount {
    font-size: 20px;
    text-align: left;
    font-weight: bold;
    color: #D93026;
    line-height: 1;
    margin-bottom: 4px;
}

.discount-text {
    font-size: 11px;
    color: #A67C52;
    font-weight: 400;
    text-align: left;
    line-height: 1.2;
}
.lightning-divider svg {
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
}

.price-section {
    flex: 1.2;
    background:#fff url(/static/image/yhjbtnbg.png) no-repeat 0px top;
    background-size: auto 100%;
    padding: 8px 16px;
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    border-radius: 0 8px 8px 0;
    position: relative;
}
.pinfo{ display: flex;  flex-direction:column;
    padding-top: 6px;
    padding-left: 16px;
    width: 98px;}
.final-price {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 4px;
}

.price-label {
    font-size: 11px;
    color: #FFFFFF;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 4px;
}

.buy-text {
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;
    text-align: center;
}