.shipping-hero {
    background: linear-gradient(135deg, #fff0f3 0%, #fce7ec 100%);
    padding: 48px 0 30px;
    position: relative;
}
.shipping-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.shipping-hero h1 {
    font-size: 30px; font-weight: 700; color: #1a1a1a;
    display: flex; align-items: center; gap: 14px; margin-bottom: 10px;
}
.shipping-hero h1 .hero-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, #D72850, #ff6b8a);
    color: #fff; font-size: 26px;
    box-shadow: 0 8px 20px rgba(215,40,80,0.25);
}
.shipping-hero .subtitle { font-size: 14px; color: #7a7a7a; max-width: 720px; line-height: 1.7;}

.shipping-form-card {
    background: #fff; border-radius: 14px;
    box-shadow: 0 8px 30px rgba(215,40,80,0.08);
    padding: 26px 28px; margin-bottom: 28px;
    border: 1px solid #fff;
    position: relative; z-index: 2;
}
.shipping-form-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
.shipping-form-row.dims { grid-template-columns: 1fr 1fr 1fr 2fr; }
.shipping-form-item { display: flex; flex-direction: column; gap: 6px; }
.shipping-form-item .item-label {
    font-size: 13px; font-weight: 600; color: #333;
    display: flex; align-items: center; gap: 4px;
}
.shipping-form-item .item-label .req { color: #D72850; }
.shipping-form-item .item-hint { font-size: 12px; color: #999; font-weight: 400; }
.shipping-form-item .el-input,
.shipping-form-item .el-select,
.shipping-form-item .el-input-number { width: 100%; }
.shipping-form-item .el-input-number { --el-input-number-controls-height: 34px; }

.dims-group-label {
    display: flex; align-items: flex-end; padding-bottom: 8px;
    font-size: 13px; color: #999; font-weight: 500;
}
.dims-x { color: #bbb; padding: 0 2px; align-self: center; }

.shipping-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 6px; }
.btn-calc {
    background: #D72850 !important; border-color: #D72850 !important; color: #fff !important;
    padding: 10px 34px !important; font-weight: 600 !important; font-size: 14px !important;
    border-radius: 8px !important; transition: all 0.2s;
}
.btn-calc:hover:not(:disabled) {
    background: #b91f42 !important; border-color: #b91f42 !important;
    box-shadow: 0 6px 16px rgba(215,40,80,0.35); transform: translateY(-1px);
}
.btn-reset {
    background: #fff !important; border-color: #dcdfe6 !important; color: #606266 !important;
    padding: 10px 24px !important; font-weight: 500 !important; font-size: 14px !important;
    border-radius: 8px !important;
}
.btn-reset:hover { color: #D72850 !important; border-color: #fbc9d4 !important; background: #fff7f9 !important; }

/* ---------- Result ---------- */
.shipping-result-card {
    background: #fff; border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.05);
    padding: 24px 28px; margin-bottom: 28px;
    border: 1px solid #f0f0f0;
}
.result-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px; margin-bottom: 18px;
}
.summary-cell {
    background: #fafbfc; border: 1px solid #f0f0f0;
    border-radius: 10px; padding: 12px 16px;
}
.summary-cell .s-label { font-size: 12px; color: #999; margin-bottom: 4px; }
.summary-cell .s-value { font-size: 15px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; gap: 6px; }
.summary-cell .s-value.accent { color: #D72850; }
.summary-cell .s-value.primary { color: #409eff; }
.summary-cell .country-flag-icon {
    width: 22px; height: 16px; object-fit: contain;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}

.result-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; margin-bottom: 14px;
}
.result-head .section-title {
    font-size: 16px; font-weight: 600; color: #1a1a1a;
    display: flex; align-items: center; gap: 8px;
}
.result-head .section-title .dot {
    width: 8px; height: 8px; border-radius: 50%; background: #D72850;
}
.result-head .hint { font-size: 12px; color: #999; }

.shipping-table .el-table { border-radius: 8px; overflow: hidden; font-size: 14px; }
.shipping-table .el-table th.el-table__cell { background: #fafbfc; color: #555; font-weight: 600; }
.fee-cell { font-size: 16px; font-weight: 700; color: #D72850; }
.fee-cell .fee-unit { font-size: 12px; font-weight: 500; color: #999; margin-left: 2px; }
.channel-main { font-weight: 500; color: #1a1a1a; }
.channel-sub { font-size: 12px; color: #999; margin-top: 2px; }

/* ---------- Tags ---------- */
.tag-source { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.tag-source-H { background: #ecf5ff; color: #409eff; }
.tag-source-C { background: #f0f9eb; color: #67c23a; }
.tag-source-T { background: #fdf6ec; color: #e6a23c; }

.tag-cargo { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.tag-cargo-0, .tag-cargo-General { background: #f0f0f0; color: #909399; }
.tag-cargo-1 { background: #f0f9eb; color: #67c23a; }
.tag-cargo-2, .tag-cargo-Battery { background: #fdf6ec; color: #e6a23c; }
.tag-cargo-3, .tag-cargo-Liquid { background: #ecf5ff; color: #409eff; }
.tag-cargo-4, .tag-cargo-Powder { background: #fef0f0; color: #f56c6c; }
.tag-cargo-5, .tag-cargo-Food { background: #f4ecff; color: #9b59b6; }

/* ---------- Country flag in el-select ---------- */
.country-option-content { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.country-option-content .country-flag-icon {
    width: 24px; height: 18px; object-fit: contain;
    flex-shrink: 0; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}
.country-option-content span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-flag-icon {
    width: 22px; height: 16px; object-fit: contain;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
    display: inline-block; vertical-align: middle;
}

/* ---------- Empty / tip ---------- */
.shipping-empty {
    text-align: center; padding: 70px 20px;
    background: #fff; border-radius: 14px;
    border: 1px dashed #e6e6e6; color: #999;
}
.shipping-empty .empty-icon { font-size: 56px; opacity: 0.3; margin-bottom: 10px; }
.shipping-empty .empty-text { font-size: 14px; }

.tip-bar {
    display: flex; gap: 8px; align-items: center;
    font-size: 12px; color: #909399; padding: 8px 0 0;
}
.tip-bar .fa { color: #D72850; }

[v-cloak] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .shipping-form-row, .shipping-form-row.dims { grid-template-columns: 1fr; }
    .shipping-hero h1 { font-size: 22px; }
    .shipping-hero { padding: 32px 0 0; }
    .shipping-hero .subtitle { margin-bottom: 32px; }
}