/* 進口稅費試算 widget v3 - 2026-04-22 整合版 (無按鈕 / 自動試算) */

/* 計費規則綠框保持原樣, 不動 */

/* 統一試算表單 */
.unified-calc {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 0;
    margin: 0;
}

/* 每一橫列 */
.uc-row { display: flex; flex-direction: column; gap: .3rem; }
.uc-row-2col {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: .8rem;
    align-items: start;
}

/* Label */
.uc-label {
    display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
    font-size: .88rem; font-weight: 600; color: #0f172a; line-height: 1.3;
}
.uc-label > i { color: #4338ca; font-size: .85rem; }
.uc-hint {
    font-size: .72rem; color: #64748b; font-weight: 400;
}
.uc-required { color: #ef4444; font-weight: 700; }

/* 基礎輸入 */
.uc-input {
    padding: .5rem .7rem;
    border: 1px solid #cbd5e1; border-radius: 7px;
    font-size: .92rem; color: #0f172a; background: #fff;
    transition: border-color .15s, box-shadow .15s;
    width: 100%; min-width: 0;
}
.uc-input:focus {
    outline: none; border-color: #4338ca;
    box-shadow: 0 0 0 3px rgba(67,56,202,.12);
}
.uc-input::placeholder { color: #94a3b8; }

/* 缺欄位脈動特效 */
.uc-input.is-missing,
.uc-price-group.is-missing,
.uc-input-unit.is-missing {
    animation: pulseMissing 1.4s ease-in-out infinite;
    border-color: #fb923c !important;
}
.uc-price-group.is-missing { border-color: transparent !important; }
.uc-price-group.is-missing .uc-currency,
.uc-price-group.is-missing .uc-input {
    border-color: #fb923c !important;
}
@keyframes pulseMissing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,146,60,.5); }
    50% { box-shadow: 0 0 0 4px rgba(251,146,60,.22); }
}

/* 商品描述 + AI 按鈕 */
.uc-desc-row { display: flex; gap: .4rem; align-items: stretch; }
.uc-desc-row .uc-input { flex: 1 1 auto; min-width: 0; }
.uc-ai-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .5rem .8rem;
    border: 0; border-radius: 7px;
    background: linear-gradient(135deg,#6366f1 0%,#4338ca 100%);
    color: #fff; font-weight: 600; font-size: .85rem;
    cursor: pointer; white-space: nowrap;
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
}
.uc-ai-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -3px rgba(67,56,202,.4); }
.uc-ai-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.uc-ai-btn i { font-size: .9rem; }

.uc-ai-status {
    font-size: .78rem; color: #64748b; min-height: 0; line-height: 1.3;
}
.uc-ai-status:empty { display: none; }
.uc-ai-status.is-success { color: #059669; }
.uc-ai-status.is-error { color: #dc2626; }

/* 資料來源指示燈 (Lucky vs 關務署 vs Cached) */
.uc-src-badge {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .08rem .45rem; margin-left: .35rem;
    border-radius: 999px; font-size: .68rem; font-weight: 600;
    vertical-align: middle; line-height: 1.3;
    cursor: help; white-space: nowrap;
}
.uc-src-badge.src-lucky {
    background: linear-gradient(90deg,#d1fae5,#a7f3d0);
    color: #065f46;
    border: 1px solid #34d399;
}
.uc-src-badge.src-customs {
    background: linear-gradient(90deg,#fef3c7,#fde68a);
    color: #92400e;
    border: 1px solid #fbbf24;
}
.uc-src-badge.src-unknown {
    background: #f1f5f9; color: #475569;
    border: 1px solid #cbd5e1;
}
.uc-src-cached {
    display: inline-block;
    margin-left: .25rem; padding: .05rem .4rem;
    background: #e0e7ff; color: #4338ca;
    border-radius: 999px; font-size: .65rem; font-weight: 600;
    vertical-align: middle;
}
.uc-ai-status.is-loading { color: #4338ca; }

/* CCC 候選卡 */
.uc-ccc-list {
    display: flex; flex-direction: column; gap: .3rem; margin-top: .15rem;
}
.uc-ccc-option {
    display: flex; align-items: center; gap: .55rem;
    padding: .42rem .6rem;
    border: 1.5px solid #e2e8f0; border-radius: 7px;
    background: #fff; cursor: pointer;
    transition: all .15s;
}
.uc-ccc-option:hover { border-color: #c7d2fe; background: #f5f3ff; }
.uc-ccc-option.is-selected {
    border-color: #4338ca; background: #eef2ff;
}
.uc-ccc-option input { margin: 0; accent-color: #4338ca; }
@keyframes uc-ccc-pulse-anim {
    0%   { transform: scale(1);    background: #fff; }
    40%  { transform: scale(0.985); background: #e0e7ff; box-shadow: 0 0 0 3px rgba(67,56,202,.18); }
    100% { transform: scale(1);    background: #fff; }
}
.uc-ccc-option.uc-ccc-pulse { animation: uc-ccc-pulse-anim .24s ease-out; }
.uc-ccc-option.is-selected.uc-ccc-pulse { animation-name: uc-ccc-pulse-anim; }
.uc-ccc-name, .uc-ccc-code { user-select: none; }
.uc-ccc-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.uc-ccc-code { font-family: ui-monospace, monospace; font-size: .72rem; color: #64748b; font-weight: 600; line-height: 1.25; }
.uc-ccc-name { font-size: .86rem; color: #0f172a; font-weight: 500; line-height: 1.3; }
.uc-ccc-confidence {
    flex-shrink: 0; padding: .15rem .5rem;
    border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.conf-high { background: #d1fae5; color: #065f46; }
.conf-mid  { background: #fef3c7; color: #92400e; }
.conf-low  { background: #fee2e2; color: #991b1b; }

/* 重量欄 (輸入 + 單位貼右邊) */
.uc-input-unit {
    position: relative; display: flex; align-items: stretch;
    border-radius: 7px;
}
.uc-input-unit .uc-input { padding-right: 2.3rem; }
.uc-input-unit .uc-unit {
    position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
    font-size: .82rem; color: #64748b; font-weight: 600; pointer-events: none;
}

/* 金額: 幣別 + 價格 並排 */
.uc-price-group {
    display: flex; gap: .35rem; align-items: stretch;
    min-width: 0;
}
.uc-currency {
    flex: 0 0 auto; width: 100px;
    padding: .5rem .4rem .5rem .6rem;
    border: 1px solid #cbd5e1; border-radius: 7px;
    background: #fff; font-size: .88rem; font-weight: 600; color: #0f172a;
    cursor: pointer;
}
.uc-price-group .uc-input { flex: 1 1 auto; }

/* 尺寸列: L × W × H cm */
.uc-dim-group {
    display: flex; align-items: center; gap: .3rem;
    min-width: 0;
}
.uc-dim-item {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .2rem;
    position: relative;
}
.uc-dim-item .uc-input {
    padding-right: 2.1rem; text-align: center;
}
.uc-dim-item .uc-dim-unit {
    position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
    font-size: .78rem; color: #64748b; font-weight: 600; pointer-events: none;
}
.uc-dim-sep {
    color: #94a3b8; font-weight: 700; font-size: .9rem; flex-shrink: 0;
}

/* 即時試算結果 */
.uc-result {
    margin-top: .1rem;
    display: none;
    border: 1px solid #e2e8f0; border-radius: 10px;
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
    overflow: hidden;
    animation: slideDown .28s cubic-bezier(.2,.8,.2,1);
}
.uc-result.is-show { display: block; }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.uc-result-head {
    padding: .55rem .85rem;
    background: linear-gradient(135deg,#0f766e 0%,#4338ca 100%);
    color: #fff;
    display: flex; align-items: center; gap: .4rem;
    font-weight: 700; font-size: .88rem;
}
.uc-result-head.is-air { background: linear-gradient(135deg,#4338ca 0%,#6366f1 100%); }
.uc-result-head .uc-result-cached { margin-left: auto; font-size: .7rem; opacity: .8; font-weight: 400; }
.uc-result-body {
    padding: .65rem .85rem .55rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.uc-res-row {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .18rem 0; font-size: .86rem;
}
.uc-res-row .uc-res-label { color: #475569; }
.uc-res-row .uc-res-value { color: #0f172a; font-weight: 600; font-family: ui-monospace, monospace; font-size: .9rem; }
.uc-res-row--section {
    border-top: 1px dashed #e2e8f0; margin-top: .25rem; padding-top: .4rem;
    font-weight: 700; color: #334155;
}
.uc-res-row--section .uc-res-label { color: #334155; font-weight: 700; }
.uc-res-row--total {
    border-top: 2px solid #4338ca; margin-top: .4rem; padding-top: .5rem;
    font-size: .95rem;
}
.uc-res-row--total .uc-res-label { color: #0f172a; font-weight: 700; }
.uc-res-row--total .uc-res-value { color: #4338ca; font-size: 1.08rem; font-weight: 800; }

/* 商品相關列 (灰色, 提示「不算進集運商應付」) */
.uc-res-row--muted .uc-res-label,
.uc-res-row--muted .uc-res-value { color: #94a3b8; font-weight: 500; }
.uc-res-row--muted .uc-res-value { font-weight: 600; }

/* 整體到府支出 (含商品, 次要) */
.uc-res-row--grand {
    margin-top: .15rem;
    padding-top: .3rem; padding-bottom: .15rem;
    border-top: 1px dashed #cbd5e1;
    font-size: .82rem;
}
.uc-res-row--grand .uc-res-label { color: #64748b; font-weight: 500; }
.uc-res-row--grand .uc-res-value { color: #64748b; font-size: .9rem; font-weight: 600; }

.uc-exempt {
    display: flex; align-items: flex-start; gap: .45rem;
    padding: .5rem .7rem; margin: .3rem 0;
    background: linear-gradient(90deg, #d1fae5 0%, #bbf7d0 100%);
    color: #065f46; border-radius: 8px; font-weight: 700; font-size: .85rem; line-height: 1.35;
}
.uc-exempt i { margin-top: .12rem; flex-shrink: 0; font-size: .95rem; }
.uc-exempt-sub { font-size: .72rem; font-weight: 400; color: #047857; margin-top: .1rem; }

.uc-disclaimer {
    padding: .45rem .65rem;
    background: #fff7ed;
    color: #9a3412; border-radius: 6px; font-size: .72rem; line-height: 1.45;
    display: flex; gap: .4rem; margin-top: .3rem;
}
.uc-disclaimer i { flex-shrink: 0; margin-top: .15rem; font-size: .8rem; }

/* 缺欄位提示條 */
.uc-missing-hint {
    display: flex; align-items: center; gap: .4rem;
    padding: .45rem .65rem;
    margin-top: .1rem;
    background: #fff7ed;
    color: #9a3412; border: 1px dashed #fdba74; border-radius: 7px;
    font-size: .8rem; font-weight: 500;
    animation: gentleBlink 2s ease-in-out infinite;
}
.uc-missing-hint i { flex-shrink: 0; color: #ea580c; }
@keyframes gentleBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .75; }
}

/* 手機 */
@media (max-width: 640px) {
    .unified-calc { gap: .7rem; }
    /* 2026-04-23: keep 實際重量 / 商品總金額 on the same row on mobile */
    /* 2026-04-28: widen currency so "¥ 人民幣" doesn't truncate; tighten dim group */
    .uc-row-2col { grid-template-columns: 1fr 1.5fr; gap: .45rem; }
    .uc-currency { width: 108px; font-size: .82rem; padding: .5rem .3rem .5rem .5rem; }
    .uc-price-group { gap: .25rem; }
    .uc-ai-btn { padding: .5rem .65rem; font-size: .8rem; }
    .uc-dim-group { gap: .25rem; }
    .uc-dim-sep { font-size: .85rem; }
    .uc-dim-item .uc-input { font-size: .85rem; padding-right: 1.9rem; text-align: center; }
    .uc-dim-item .uc-dim-unit { font-size: .7rem; right: .4rem; }
    .uc-res-row { font-size: .82rem; }
}

@media (max-width: 480px) {
    .uc-desc-row { flex-direction: column; }
    .uc-ai-btn { justify-content: center; min-height: 42px; }
    .uc-row-2col { grid-template-columns: 1fr; gap: .65rem; }
    .uc-price-group { display: grid; grid-template-columns: minmax(96px, .8fr) minmax(0, 1fr); }
    .uc-currency { width: 100%; }
}

/* 超窄手機 (iPhone SE / 360px Android): 重量+金額改堆疊, 尺寸列收緊 */
@media (max-width: 380px) {
    .uc-row-2col { grid-template-columns: 1fr; gap: .55rem; }
    .uc-currency { width: 108px; }
    .uc-dim-group { gap: .2rem; }
    .uc-dim-item .uc-input { padding-right: 1.7rem; font-size: .8rem; }
    .uc-dim-item .uc-dim-unit { font-size: .65rem; right: .3rem; }
    .uc-dim-sep { font-size: .78rem; }
}