/* 平滑過渡動畫 */
.transition-custom {
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 選單動畫 */
.dropdown-enter {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.95);
    pointer-events: none;
}
.dropdown-enter-active {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    pointer-events: auto;
}

/* 卡片選取發光效果 (完全還原截圖的粉紅霓虹光圈) */
button {
  outline: none;
  -webkit-tap-highlight-color: transparent; /* 消除手機端點擊灰底 */
}
/* 滑鼠點擊不顯示外框，僅鍵盤 Tab 切換時顯示自訂柔和框 */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.card-item.selected img{
    /* filter: drop-shadow(0 0 2px #FF4D79)
    drop-shadow(0 0 2px #FF4D79)
    drop-shadow(0 0 2px #FF4D79); */
    /* box-shadow: 0 0 0 3px #FF4D79, 0 0 16px rgba(255, 77, 121, 0.6);
    transform: translateY(-2px) scale(1.03); */
    -webkit-filter: drop-shadow(0 0 4px #FF4D79);
    filter: drop-shadow(0 0 4px #FF4D79);
    transform: translateZ(0);
    will-change: filter;
}

/* 隱藏原生捲軸但保持滾動 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 隨機碼欄位展開/收合高度平滑過渡 */
.random-code-box {
    transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease;
}
.random-code-box.hidden-field {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    pointer-events: none;
}
.random-code-box.visible-field {
    max-height: 100px;
    opacity: 1;
    overflow: visible;
}


.data-form{
    width: calc(100dvw*960/1920);
    padding: calc(100dvw*60/1920);
    background-color: #ffedb6;
}

/* 動態文字 */
#lotteryForm {
    gap: calc(100dvw*30/1920);
    font-size: calc(100dvw*32/1920);
}

#lotteryForm>div,
.form-block{gap: calc(100dvw*40/1920);}
.form-block>label,
.label-sp{width: calc(100dvw*160/1920); white-space: nowrap;}


#lotteryForm input, #lotteryForm button, #previewContainer .img-preview, #invoiceNoticeText{
    max-width: calc(100dvw*640/1920);
}
@media (max-width: 768px) {
    .data-form{width: calc(100dvw*584/640); padding: calc(100dvw*90/640) calc(100dvw*30/640);}
    #lotteryForm {gap: calc(100dvw*25/640); font-size: calc(100dvw*32/640);}
    #lotteryForm>div,
    .form-block{gap: calc(100dvw*20/640);}
    .form-block>label,.label-sp{width: calc(100dvw*140/640);}

    #lotteryForm input, #lotteryForm button, #previewContainer .img-preview, #invoiceNoticeText{
        max-width: calc(100dvw*360/640);
    }
}


/* 小卡 */
#cardsGrid{
    max-width: calc(100dvw*790/1920);
}
@media (max-width: 768px) {
    #cardsGrid{
        max-width: calc(100dvw*513/640);
    }
}

/* hover 顯示 */
.card-hover:hover:after{
    content: "";
    display: block;
    background-image: url(../img/tip.png);
    background-size: cover;
    width: calc(100dvw*215/1920);
    aspect-ratio: 215/202;
    position: absolute;
    left: 100%;
    transform: translate(5%, -63%);
    z-index: 20;
}
@media (max-width: 768px) {
    .card-hover:hover:after{
        width: calc(100dvw*146/640);
        transform: translate(5%, -63%);
    }
}


section{padding-bottom: calc(100dvw * 60 / 1920);}
.card-deco-1{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100dvw * 201 / 1920);
    height: calc(100dvw * 209 / 1920);
    transform: translate(-10%, -80%);
}
.card-deco-2{
    position: absolute;
    top: 10%;
    right: 0;
    width: calc(100dvw * 201 / 1920);
    height: calc(100dvw * 239 / 1920);
    transform: translate(60%, 0%);
}
@media (max-width: 768px) {
    section{padding-bottom: calc(100dvw * 60 / 640);}
    .card-deco-1{
        width: calc(100dvw * 147 / 640);
        height: calc(100dvw * 153 / 640);
    }
    .card-deco-2{
        width: calc(100dvw * 154 / 640);
        height: calc(100dvw * 175 / 640);
        top: 0;
        transform: translate(0%, -70%);
    }
}