/*
 * 掃碼支付入口頁面的自定義樣式。
 */

/* ==========================================================================
   SweetAlert2 全螢幕覆蓋
   ========================================================================== */

/*
 * 讓 SweetAlert2 彈窗在行動裝置上呈現全螢幕的樣式。
 * 當瀏覽器支援時，使用 `dvh` 單位以更好地處理動態變化的瀏覽器工具列。
 */

.swal2-popup.FullScreen-popup {
    border-radius: 0;
    margin: 0;
    padding: 0 30px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@supports (height: 100dvh) {
    .swal2-popup.FullScreen-popup {
        min-height: 100dvh;
    }
}

.swal2-popup.FullScreen-popup .swal2-title {
    padding: 0.5em 0;
    line-height: normal;
}

.swal2-popup.FullScreen-popup .swal2-actions {
    width: 100%;
}

/* ==========================================================================
   元件樣式
   ========================================================================== */

.SwalConfirmButton {
    color: black;
    background-color: #06c755;
    text-align: center;
    width: 100%;
    border-radius: 5px;
    line-height: 19px;
    font-weight: 400;
}

/* 行動呼籲 (Call-to-Action) 按鈕樣式 */
.btn-cta {
    background-color: #06c755;
    border-color: #06c755;
    color: white;
    font-weight: 500;
}
.btn-cta:hover {
    background-color: #05a647;
    border-color: #05a647;
}


/* ==========================================================================
   自定義 SweetAlert2 錯誤圖示
   ========================================================================== */

/*
 * 一個更大、更顯眼的錯誤圖示，以提高在行動裝置螢幕上的可見性。
 */
.swal2-icon.swal2-error.custom-error-icon {
    width: 120px;
    height: 120px;
    border-width: 6px;
}

.swal2-icon.swal2-error.custom-error-icon .swal2-x-mark {
    width: 100%;
    height: 100%;
}

.swal2-icon.swal2-error.custom-error-icon .swal2-x-mark-line-left,
.swal2-icon.swal2-error.custom-error-icon .swal2-x-mark-line-right {
    top: 24px;
    width: 8px;
    height: 72px;
    background-color: #f27474;
    border-radius: 3px;
    position: absolute;
}

.swal2-icon.swal2-error.custom-error-icon .swal2-x-mark-line-left {
    left: 57px;
    transform: rotate(45deg);
}

.swal2-icon.swal2-error.custom-error-icon .swal2-x-mark-line-right {
    right: 57px;
    transform: rotate(-45deg);
}