/* 一、查詢區與操作說明 */
#antiFraudChecker {
    box-sizing: border-box;
    width: 100%;
}

#antiFraudChecker .textArea {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
}

#antiFraudChecker p {
    line-height: 1.6;
}

/* 指定提示文字的色彩與大小，限定在本查詢區內覆寫共用樣式 */
#antiFraudChecker #urlIntro,
#antiFraudChecker .af-intro {
    margin: 0 0 16px;
    color: #161573 !important;
    font-family: inherit;
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.6;
}

#antiFraudChecker .af-label {
    display: block;
    margin: 0 0 8px;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

/* 二、桌機版表單：填滿查詢區，輸入框與按鈕保持並排 */
#antiFraudChecker #checkForm {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0;
    padding: 0;
    float: none;
}

#antiFraudChecker #rawUrl {
    box-sizing: border-box;
    display: block;
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 48px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    background: #fff;
    color: #000;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    float: none;
}

#antiFraudChecker #rawUrl::placeholder {
    color: #6b7280;
    opacity: 1;
}

/* 三、查詢按鈕：使用 ID，讓 input 與 button 都套用相同樣式 */
#antiFraudChecker #send {
    box-sizing: border-box;
    display: block;
    flex: 0 0 120px !important;
    width: 120px !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 48px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid #e70012;
    border-radius: 6px;
    background-color: #e70012;
    background-image: none;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    float: none;
    -webkit-appearance: none;
    appearance: none;
}

#antiFraudChecker #send:hover:not(:disabled) {
    background-color: #cc0010;
    border-color: #cc0010;
}

#antiFraudChecker #send:active:not(:disabled) {
    background-color: #b7000e;
    border-color: #b7000e;
}

/* 空白、頁面不可使用或查詢中：依參考圖採灰底、淺灰字及灰色邊框 */
#antiFraudChecker #send:disabled {
    background-color: #c5c5c5;
    color: #e4e4e4;
    border-color: #c5c5c5;
    opacity: 1;
    cursor: default;
}

/* 四、查詢結果：沿用 JavaScript 設定的 valid、review、error 類別 */
#antiFraudChecker #result {
    display: none;
    margin-top: 16px;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

#antiFraudChecker #result.valid {
    display: block;
    background: #eff4fa;
    color: #143e6a;
}

#antiFraudChecker #result.review {
    display: block;
    background: #fff5e8;
    color: #8a4806;
}

#antiFraudChecker #result.error {
    display: block;
    background: #fff0ef;
    color: #8c2620;
}

/* 五、備註統一為常駐段落，不使用 details 或 summary 展開元件 */
#antiFraudChecker .af-notes {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #d1d5db;
    color: #000;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    overflow-wrap: anywhere;
}

#antiFraudChecker .hint,
#antiFraudChecker .af-notes p {
    margin: 0 0 12px;
    color: #000 !important;
    font-family: inherit;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6 !important;
    letter-spacing: 0.5px;
    text-align: left;
    text-indent: 0;
    overflow-wrap: anywhere;
}

#antiFraudChecker .af-notes p:last-child {
    margin-bottom: 0;
}

/* 查詢說明清單：沿用 hint 的字級、文字顏色與行高 */
#antiFraudChecker .af-notes-list {
    margin: 0;
    padding-left: 24px;
    list-style: disc outside;
}

#antiFraudChecker .af-notes-list > li {
    display: list-item;
    margin: 0 0 12px;
}

#antiFraudChecker .af-notes-list > li:last-child {
    margin-bottom: 0;
}

/* 六、鍵盤操作時的焦點提示 */
#antiFraudChecker #rawUrl:focus-visible,
#antiFraudChecker #send:focus-visible {
    outline: 3px solid #e70012;
    outline-offset: 3px;
}

/* 七、手機版：以視窗寬度切換，不以瀏覽器品牌或裝置名稱判定 */
@media (max-width: 767px) {
    #antiFraudChecker #checkForm {
        flex-direction: column !important;
        align-items: stretch;
        gap: 12px;
    }

    #antiFraudChecker #rawUrl,
    #antiFraudChecker #send {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}