.wr-available-coupons .coupon-desc {
    max-width: 50%;
    line-height: 1.3em;
}

@media (max-width: 1024px) {
    .wr-available-coupons .coupon-desc {
        max-width: 400px;
    }
}

@media (max-width: 750px) {
    .wr-available-coupons .coupon-desc {
        max-width: 100%;
        width: 100%;
    }
     .wr-available-coupons .coupon-code {
        order: 1;
     }
     .wr-available-coupons .coupon-desc {
        order: 3;
     }
     .wr-available-coupons .coupon-button {
        order: 2;
     }
}

.wr-available-coupons {
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 4px;
}

/* 額外優惠券容器的動畫效果 */
.extra-coupons-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    max-height: 0; /* 初始狀態設為0 */
    transition: max-height 0.5s ease;
}

.extra-coupons-wrapper.expanded {
    /* 展開時的高度由 JavaScript 動態設定 */
}

/* 箭頭包裝容器 */
.coupon-toggle-wrapper {
    text-align: center;
    margin: 10px 0;
}

/* 箭頭樣式 */
.coupon-toggle-arrow {
    width: 100%;
    display: inline-block;
    cursor: pointer;
    padding: 14px 16px;
    border-radius: 4px;
    background-color: #f5f5f5;
    font-size: 14px;
    transition: all 0.3s ease;
}

.coupon-toggle-arrow:hover {
    background-color: #ebebeb;
}

/* 箭頭旋轉動畫 */
.toggle-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 10px;
    position: relative;
    bottom: 2px;
}

.coupon-toggle-arrow.expanded .toggle-arrow {
    transform: rotate(180deg);
}

.toggle-text {
    margin-right: 4px;
}