/*! toastr.override.css
 *  Purpose: Override toastr CSS to use relative font sizes (rem/em) for WCAG AA.
 *  Usage: Load AFTER toastr.min.css
 *  Notes: Base calculation assumes 1rem = 16px → 20px ≈ 1.25rem
 */

/* ----- Base toast text sizing (relative units) ----- */
#toast-container .toast {
    width: auto;
    max-width: 90vw;
    display: inline-block;
    white-space: nowrap;
    overflow-x: auto; 
    font-size: 1.25rem; /* 20px → 1.25rem */
    line-height: 1.4; /* readable line-height */
}

    /* Title and message inherit from .toast; keep relative scaling */
    #toast-container .toast .toast-title {
        font-size: 1em; /* same as .toast (relative) */
        font-weight: 600; /* semi-bold for readability */
        line-height: 1.3;
    }

    #toast-container .toast .toast-message {
        font-size: 1em; /* relative to .toast */
        line-height: 1.5;
    }

    /* Close button: a bit smaller but still relative */
    #toast-container .toast .toast-close-button {
        font-size: 0.875em; /* relative to .toast */
        line-height: 1;
    }

    /* Progress bar height in em for relative sizing */
    #toast-container .toast .toast-progress {
        height: 0.25em; /* relative, scales with font-size */
    }

    /* ----- Accessibility niceties ----- */
    /* Keyboard focus ring for close button (better visibility) */
    #toast-container .toast .toast-close-button:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }


/* 通用圖示占位（避免被別的 background 覆蓋） */
#toast-container .toast-error {
    padding-left: 3rem; /* 騰出圖示空間 */
    position: relative;
    background-image: none !important; /* 保險起見，避免殘留 */
}

    /* 紅色錯誤圖示（用字元或自訂 SVG） */
    #toast-container .toast-error::before {
        content: "✖"; /* 也可改成 SVG background 或 icon font */
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25em; /* 會跟著你的 rem/em 縮放 */
        line-height: 1;
        opacity: 0.9;
    }

/* 通用圖示占位（避免被別的 background 覆蓋） */
#toast-container .toast-error {
    padding-left: 3rem; /* 騰出圖示空間 */
    position: relative;
    background-image: none !important; /* 保險起見，避免殘留 */
}

    /* 紅色錯誤圖示（用字元或自訂 SVG） */
    #toast-container .toast-error::before {
        content: "✖"; /* 也可改成 SVG background 或 icon font */
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25em; /* 會跟著你的 rem/em 縮放 */
        line-height: 1;
        opacity: 0.9;
    }


/* 通用圖示占位（避免被別的 background 覆蓋） */
#toast-container .toast-warning {
    padding-left: 3rem; /* 騰出圖示空間 */
    position: relative;
    background-image: none !important; /* 保險：移除預設 background-image */
}

    /* 黃色警告圖示（字元） */
    #toast-container .toast-warning::before {
        content: "⚠"; /* 警告符號 */
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25em; /* 跟著字級縮放 */
        line-height: 1;
        opacity: 0.95;
    }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    #toast-container .toast {
        animation: none !important;
        transition: none !important;
    }
}

/* ----- Optional: if the original CSS uses !important on font-size -----
   Uncomment the block below to force the override. Use only if needed. */
/*
#toast-container .toast,
#toast-container .toast .toast-title,
#toast-container .toast .toast-message,
#toast-container .toast .toast-close-button {
  font-size: inherit !important;
}
#toast-container .toast { font-size: 1.25rem !important; }
*/