/**
 * Suopu Child Theme - Custom CSS
 * 
 * 此文件用于添加自定义样式，绝对在所有其他 CSS 文件之后加载（优先级999）
 * 适合用于覆盖和修改主题其他样式，确保开发新功能时不影响现有样式
 * 
 * 加载顺序：绝对最后加载，优先级最高，可以覆盖所有其他样式
 */

/* 可以在这里添加您的自定义样式 */

/* 示例：覆盖现有元素样式 */
/*
.your-class {
    color: #333;
    background-color: #f5f5f5;
    padding: 15px;
}
*/

/* Swiper幻灯片样式优化 - 修复图片下方空白过多问题 */
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    overflow: hidden;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

/* 扁平轮播样式 - 确保图片铺满整个slide */
.swiper-container.flat-carousel .swiper-slide {
    padding: 0;
    line-height: 0;
}

.swiper-container.flat-carousel .swiper-slide-content {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: relative;
}

/* 修复图片轮播样式 */
.swiper-slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* 确保内容容器不添加额外空白 */
.swiper-slide-content {
    padding: 0;
    margin: 0;
    line-height: normal;
}

/* 圆形头像轮播样式优化 */
.swiper-container.circle-avatar-carousel .swiper-slide {
    height: 100%;
    box-sizing: border-box;
    padding: 0;
}

.swiper-container.circle-avatar-carousel .swiper-slide img,
.swiper-container.circle-avatar-carousel .swiper-slide .circle-avatar {
    border-radius: 50%;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin: 0 auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* 修复圆形头像下面空白过多的问题 */
.swiper-container.circle-avatar-carousel .swiper-wrapper {
    align-items: center;
    padding-bottom: 0;
}

/* 高亮圆形头像样式 */
.swiper-container.circle-avatar-carousel .swiper-slide-active {
    z-index: 2;
}

.swiper-container.circle-avatar-carousel .swiper-slide-active img,
.swiper-container.circle-avatar-carousel .swiper-slide-active .circle-avatar {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
    border: 4px solid #fff;
}

/* Stunning Flat Carousel Style 2 特定样式 */
.swiper-container.stunning-flat-style-2 {
    overflow: visible;
    padding: 50px 0;
    margin-top: 50px;
    margin-bottom: 50px;
}

.swiper-container.stunning-flat-style-2 .swiper-slide {
    position: relative;
    height: auto;
    transition: all 0.3s ease;
    transform: scale(0.85);
    opacity: 0.5;
    overflow: visible;
}

.swiper-container.stunning-flat-style-2 .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
    z-index: 10;
}

.swiper-container.stunning-flat-style-2 .swiper-slide img {
    width: 100%;
    border-radius: 8px;
}

/* 圆形头像在扁平轮播中的样式 */
.swiper-container.stunning-flat-style-2 .swiper-slide .circle-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 5px solid #fff;
    z-index: 2;
}

.swiper-container.stunning-flat-style-2 .swiper-slide .circle-avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 彩色背景元素样式 */
.swiper-container.stunning-flat-style-2 .swiper-slide .slide-bg-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: 0;
}

/* 修复特殊轮播中图片下方空白问题 */
.swiper-container.stunning-flat-style-2 .swiper-wrapper {
    display: flex;
    align-items: center;
}

/* 完全匹配图片中的Stunning Flat Carousel Style 2样式 */
.stunning-flat-carousel-style-2 {
    position: relative;
    margin: 50px auto;
    max-width: 1200px;
}

.stunning-flat-carousel-style-2 .swiper-container {
    overflow: visible;
}

.stunning-flat-carousel-style-2 .swiper-slide {
    height: 350px;
    background-color: transparent;
    transition: all 0.5s ease;
    position: relative;
    border-radius: 15px;
    overflow: visible;
}

.stunning-flat-carousel-style-2 .swiper-slide-active {
    z-index: 11;
}

/* 彩色背景层 */
.stunning-flat-carousel-style-2 .slide-color-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.7;
}

.stunning-flat-carousel-style-2 .swiper-slide:nth-child(1) .slide-color-bg {
    background: linear-gradient(to right, #a18cd1, #b8a6db);
}

.stunning-flat-carousel-style-2 .swiper-slide:nth-child(2) .slide-color-bg {
    background: linear-gradient(to right, #d1a18c, #dbb8a6);
}

.stunning-flat-carousel-style-2 .swiper-slide:nth-child(3) .slide-color-bg {
    background: linear-gradient(to right, #8cd1a1, #a6dbb8);
}

.stunning-flat-carousel-style-2 .swiper-slide:nth-child(4) .slide-color-bg {
    background: linear-gradient(to right, #a18cd1, #fbc2eb);
}

.stunning-flat-carousel-style-2 .swiper-slide:nth-child(5) .slide-color-bg {
    background: linear-gradient(to right, #84fab0, #8fd3f4);
}

.stunning-flat-carousel-style-2 .swiper-slide:nth-child(6) .slide-color-bg {
    background: linear-gradient(to right, #ff9a9e, #fad0c4);
}

/* 圆形头像样式 */
.stunning-flat-carousel-style-2 .avatar-circle {
    position: absolute;
    width: 140px;
    height: 140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 5px solid white;
    overflow: hidden;
    z-index: 3;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.stunning-flat-carousel-style-2 .avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 修复箭头样式 */
.stunning-flat-carousel-style-2 .swiper-button-next,
.stunning-flat-carousel-style-2 .swiper-button-prev {
    color: #555;
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stunning-flat-carousel-style-2 .swiper-button-next:after,
.stunning-flat-carousel-style-2 .swiper-button-prev:after {
    font-size: 16px;
}

/* 证书样式特定修复 - 解决5个时显示问题 */
.certificate-style {
    overflow: hidden !important;
    padding: 0 !important;
    margin: 30px 0 !important;
}

.certificate-style .swiper-wrapper {
    align-items: center !important;
    justify-content: center !important;
    transition-timing-function: ease-out !important;
}

.certificate-style .swiper-slide {
    height: auto !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    backface-visibility: hidden;
    will-change: transform;
    transform-origin: center center;
    transform: scale(0.85);
    opacity: 0.7;
    cursor: pointer;
    pointer-events: auto !important;
}

.certificate-style .swiper-slide-active {
    transform: scale(1) !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

.certificate-style .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 450px;
    margin-bottom: 0;
    display: block;
}

/* 优化图片宽高比和适配性 */
.certificate-style .swiper-slide-bg {
    padding-bottom: 140%;
    /* 控制高宽比 */
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    border: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

/* 特别处理5个证书显示的情况 */
.certificate-style[data-certificate-display-count="5"] .swiper-wrapper {
    align-items: center !important;
    justify-content: center !important;
}

.certificate-style[data-certificate-display-count="5"] .swiper-slide {
    width: calc(20% - 20px) !important;
    margin: 0 10px !important;
    transform: scale(0.75) !important;
    opacity: 0.6 !important;
}

.certificate-style[data-certificate-display-count="5"] .swiper-slide-active {
    transform: scale(1) !important;
    opacity: 1 !important;
    z-index: 5 !important;
}

/* 删除额外的border */
.certificate-style .swiper-slide-content {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

/* 修复点击问题 */
.certificate-style .swiper-slide {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 修复Swiper过渡问题 */
.swiper-container-css-mode .swiper-wrapper {
    touch-action: pan-y;
    scroll-snap-type: none !important;
}

/* 确保活动幻灯片正确显示 */
.certificate-style .swiper-slide-visible.swiper-slide-active {
    transform: scale(1) !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

/* 为非活动幻灯片添加暗色处理 */
.certificate-style .swiper-slide:not(.swiper-slide-active) {
    filter: brightness(0.95);
}

/* 禁用任何浏览器默认行为可能导致的问题 */
.certificate-style * {
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
}

/* 优惠券区域样式调整 - 将优惠券移动到订单总计下方 */
/* 首先隐藏原始位置的优惠券 */
.e-coupon-box {
    display: none !important;
}

/* 为新位置的优惠券设置样式 */
.e-checkout__order_review-2 .order-total-coupon {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.order-total-coupon .e-coupon-box {
    display: block !important;
    margin-bottom: 0;
}

.order-total-coupon .e-coupon-anchor {
    display: block !important;
}

.order-total-coupon input[type="text"] {
    width: 100%;
    margin-bottom: 10px;
}

.order-total-coupon button.e-apply-coupon {
    width: 100%;
}