.promoHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}

.sectionHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.sectionHeader h2{
    margin:0;
    font-size:20px;
}

.addTextBtn{
    border:none;
    background:none;
    color:#FF9F0A;
    font-size:24px;
    cursor:pointer;
}

.promoScroll{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-bottom:8px;
}

.promoCard{
    flex:0 0 300px;
    width:300px;
}

.promoBanner,
.promoCard img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:18px;
    display:block;
}

.promoCard h4{
    margin:8px 0 0;
}

.creditCard{
    flex:0 0 320px;
    width:320px;
    min-width:320px;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #E5E5EA;
    background:
        linear-gradient(
            135deg,
            #0A84FF,
            #5AC8FA
        );
    color:white;
    position:relative;
}

.deleteCardBtn{
    position:absolute;
    top:8px;
    right:8px;
    width:28px;
    height:28px;
    border:none;
    border-radius:50%;
    background:#FF3B30;
    color:white;
    font-size:18px;
    cursor:pointer;
}

.creditCardImage{
    width:100%;
    height:200px;
    object-fit:cover;
    display:none;
}

.creditCard.hasImage{
    background:white;
    color:#000;
}

.creditCardName{
    padding:16px;
    font-size:20px;
    font-weight:600;
    color:inherit;
}

.creditCard img{
    display:block;
    width:100%;
    height:200px;
    object-fit:cover;
}

.creditCard span{
    font-weight:600;
}

.creditCardScroll{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:16px;
    padding-bottom:8px;
    scrollbar-width:none;
}

.promoScroll,
.creditCardScroll{
    cursor:grab;
    user-select:none;
}

.promoScroll.dragging,
.creditCardScroll.dragging{
    cursor:grabbing;
}

.promoScroll::-webkit-scrollbar,
.creditCardScroll::-webkit-scrollbar{
    display:none;
}

.promoScroll img,
.creditCard img{
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
}

.promoCard{
    flex:0 0 300px;
    width:300px;
}

.promoBanner{
    height:220px;
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            #FF9F0A,
            #FFD60A
        );
}

.promoCard h4{
    margin:10px 0 0;
}

.promoSection,
.creditCardSection{
    border:1px solid #E5E5EA;
    border-radius:24px;
    padding:20px;
    margin-bottom:24px;
    background:white;
    overflow:hidden;
}

.sheet{
    position:fixed;
    inset:0;
    background:
        rgba(0,0,0,.3);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    z-index:9999;
}

.sheet.hidden{
    display:none;
}

.sheetCard{
    width:100%;
    max-width:500px;
    background:white;
    border-radius:
        24px 24px 0 0;
    padding:20px;
    box-sizing:border-box;
}

.sheetCard button{
    width:100%;
    padding:16px;
    margin-bottom:12px;
    border:none;
    border-radius:16px;
    background:#F2F2F7;
    font-size:18px;
    text-align:left;
    cursor:pointer;
}

.sheetCard button:hover{
    background:#E5E5EA;
}

.rewardRow{
    position:relative;
    border:1px solid #E5E5EA;
    border-radius:16px;
    padding:16px;
    margin-bottom:16px;
    background:white;
}

.rewardTop{
    display:grid;
    grid-template-columns:
        2fr 1fr 1fr;
    gap:10px;
    margin-bottom:12px;
}

.rewardBottom{
    display:grid;
    grid-template-columns:
        1fr 1fr;
    gap:12px;
}

.rewardBottom label{
    display:block;
    margin-bottom:6px;
    font-size:14px;
    font-weight:600;
    color:#666
}

.rewardRow input,
.rewardRow textarea{
    width:100%;
    border:1px solid #D1D1D6;
    border-radius:8px;
    padding:10px;
    box-sizing:border-box;
}

.rewardRow textarea{
    height:100px;
    resize:vertical;
}

.rewardRow label{
    display:block;
    margin-top:10px;
    margin-bottom:4px;
    font-size:14px;
    font-weight:600;
}

.removeRewardBtn{
    position:absolute;
    top:12px;
    right:12px;
    border:none;
    background:#FF3B30;
    color:white;
    border-radius:8px;
    padding:8px 12px;
    cursor:pointer;
}

#cardTheme{
    width:60px;
    height:40px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
}

.availableCard{
    padding:16px;
    margin-bottom:10px;
    border:1px solid #E5E5EA;
    border-radius:12px;
    cursor:pointer;
}

.availableCard{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    margin-bottom:10px;
    border:1px solid #E5E5EA;
    border-radius:12px;
    cursor:pointer;
    background:white;
}

.availableCardImage{
    width:100px;
    height:60px;
    flex-shrink:0;
    border-radius:8px;
    overflow:hidden;
    background:#F2F2F7;
}

.availableCardImage img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.availableCardInfo{
    flex:1;
}

.availableCardName{
    font-size:16px;
    font-weight:600;
}

.availableCardIssuer{
    margin-top:4px;
    color:#8E8E93;
    font-size:10px;
}

.availableCardName,
.availableCardIssuer {
    text-align:left;
    margin-left: 8px;
}

.availableCardSkeleton{
    height:70px;
    margin-bottom:10px;
    border-radius:12px;
}

.creditCardSkeleton{
    width:320px;
    min-width:320px;
    height:240px;
    border-radius:20px;
    flex-shrink:0;
}

.availableCardSkeleton, .creditCardSkeleton {
    background:
        linear-gradient(
            90deg,
            #F2F2F7 25%,
            #E5E5EA 50%,
            #F2F2F7 75%
        );

    background-size:
        400% 100%;

    animation:
        skeletonLoading
        1.2s infinite;
}

@keyframes skeletonLoading{
    0%{
        background-position:
            100% 0;
    }
    100%{
        background-position:
            -100% 0;
    }
}

#detailCardImage{
    width:140px;
    height:auto;
    border-radius:12px;
    flex-shrink:0;
}

.rewardBlock{
    padding:12px 0;
    border-top:1px solid #E5E5EA;
    text-align:left;
}

.rewardBlock ul{
    margin:8px 0 0 20px;
    padding:0;
}

.rewardBlock li{
    margin-bottom:4px;
}

.cardDetailHeader{
    display:flex;
    align-items:center;
    gap:24px;
    max-width:500px;
    margin:0 auto 20px;
}

.cardDetailInfo{
    flex:1;
    text-align:left;
}

.cardDetailInfo div{
    margin-bottom:8px;
}

.rewardHeader{
    display:flex;
    justify-content:space-between;
    font-weight:600;
}

.rewardLabel{
    margin-top:8px;
    color:#666;
    font-size:14px;
}

#detailRewards{
    padding-bottom:40px;
}

.headerButtons{
    display:flex;
    gap:8px;
    align-items:center;
}

#promoDescription{
    min-height:100px;
    resize:vertical;
}

#promotionModal .modal-content{
    padding:24px;
}

#promotionModal input,
#promotionModal textarea{
    width:100%;
    box-sizing:border-box;
}

#promotionModal textarea{
    min-height:100px;
    resize:vertical;
}

#promotionModal .promoSourceRow{
    display:flex;
    gap:12px;
}

#promotionModal .promoSourceRow input{
    flex:1;
    min-width:0;
}

#promotionModal .promoFieldTitle{
    font-weight:600;
    margin-top:4px;
    margin-bottom:-4px;
}

#savePromotionBtn{
    width:100%;
    margin-top:20px;
    margin-bottom:24px;
}

#detailPromoBanner{
    width:100%;
    max-height:300px;
    object-fit:cover;
    border-radius:16px;
}

#detailPromoDescription{
    white-space:pre-line;
}

.promoSkeleton{
    width:300px;
    min-width:300px;
    height:260px;
    border-radius:18px;
    flex-shrink:0;
    background:
        linear-gradient(
            90deg,
            #F2F2F7 25%,
            #E5E5EA 50%,
            #F2F2F7 75%
        );
    background-size:
        400% 100%;
    animation:
        skeletonLoading
        1.2s infinite;
}

.promoSourceBlock{
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid #E5E5EA;
}

.promoSourceName{
    font-weight:600;
    margin-bottom:8px;
}

#detailPromoSourceUrl{
    color:#0A84FF;
    word-break:break-all;
    text-decoration:none;
}

#detailPromoSourceUrl:hover{
    text-decoration:underline;
}

.promoDetailSpacer{
    height:80px;
}

#detailPromoDate{
    color:#8E8E93;
    font-size:14px;
    margin-bottom:16px;
}

#detailPromoDescription{
    white-space:pre-line;
    line-height:1.6;
    margin-bottom:24px;
}

.promoTags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
    margin-bottom:24px;
}

.promoTag{
    background:#F2F2F7;
    color:#444;
    padding:6px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:500;
}

.promoCardDate{
    margin-top:6px;
    font-size:13px;
    color:#8E8E93;
}

.expiredPromo{
    opacity:.6;
}

#promoSearch{
    margin-bottom:16px;
    background:#F2F2F7;
}

#promoSearch{
    background:#F2F2F7;
    padding:10px 14px;
    margin:0 0 16px 0;
    border-radius:12px;
}

.promoSearchRow{
    margin-bottom:16px;
}

.emptyState{
    padding:40px;
    color:#8E8E93;
    text-align:center;
}

.promoAdminActions{
    display:flex;
    gap:12px;
    margin-top:24px;
}

.promoAdminActions button{
    flex:1;
    height:48px;
    border:none;
    border-radius:12px;
    cursor:pointer;
}

#editPromotionBtn{
    background:#0A84FF;
    color:white;
}

#deletePromotionBtn{
    background:#FF3B30;
    color:white;
}

/* Global Modal */
.modal-content{
    max-height:85vh;
    overflow-y:auto;
    scrollbar-width:none;
}

.modal-content::-webkit-scrollbar{
    display:none;
}

.relatedPromotionsSection{
    margin-top:24px;
    text-align:left;
}

.relatedPromotionsScroll{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-bottom:8px;
    scrollbar-width:none;
}

.relatedPromotionsScroll::-webkit-scrollbar{
    display:none;
}

.relatedPromoCard{
    flex:0 0 180px;
    width:180px;
    cursor:pointer;
}

.relatedPromoCard img{
    width:100%;
    height:100px;
    object-fit:cover;
    border-radius:12px;
}

.relatedPromoCardTitle{
    margin-top:8px;
    font-size:14px;
    font-weight:600;
}

.relatedPromoDate{
    margin-top:4px;
    font-size:12px;
    color:#8E8E93;
}

.pendingPromotionCard{
    padding:16px;
    margin-bottom:12px;
    border-radius:12px;
    background:#F2F2F7;
}

.pendingPromotionCard button{
    margin-right:8px;
}