/* Shared visual system for all four public calculators. */
#app.quote-page{font-size:16px;line-height:1.65;padding-top:36px}
#app.quote-page .hero{font-size:16px;line-height:1.65;gap:32px;align-items:center;margin-bottom:28px;min-height:0}
#app.quote-page .hero>div:first-child{flex:1;min-width:0}
#app.quote-page .hero h1{font-size:30px;line-height:1.4;font-weight:700;letter-spacing:0;margin:0 0 12px}
#app.quote-page .hero p{font-size:15px;line-height:1.8;color:#536b7b;max-width:650px}
#app.quote-page .eyebrow{font-size:12px;line-height:1.5;letter-spacing:2px;margin-bottom:12px}
#app.quote-page .hero-aside{flex-shrink:0;gap:20px}
#app.quote-page .live{font-size:14px;white-space:nowrap}
#app.quote-page .tiny-stat{padding-left:20px}
#app.quote-page .tiny-stat strong{font-size:24px;line-height:1.5}
#app.quote-page .tiny-stat span{font-size:12px;color:#536b7b}
#app.quote-page .workspace,#app.quote-page .service-workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
#app.quote-page .card-pad,#app.quote-page .quote-body{padding:28px}
#app.quote-page .service-tabs{gap:10px;margin-bottom:24px}
#app.quote-page .btn{font-size:15px;min-height:46px;padding:11px 16px;line-height:1.5}
#app.quote-page label{font-size:15px;line-height:1.6;margin-bottom:16px;font-weight:600}
#app.quote-page input:not([type=checkbox]),#app.quote-page select,#app.quote-page textarea{font-size:16px;line-height:1.5;min-height:50px;padding:12px;margin-top:7px;border-radius:8px;min-width:0}
#app.quote-page input[type=checkbox]{width:18px;height:18px;min-height:18px;flex-shrink:0}
#app.quote-page .input-unit input{padding-right:60px}
#app.quote-page .input-unit span{font-size:14px;top:14px}
#app.quote-page .hint,#app.quote-page label .hint,#app.quote-page .notice,#app.quote-page .warning,#app.quote-page .fx-strip,#app.quote-page .form-bottom,#app.quote-page .invoice small{font-size:14px;line-height:1.7;color:#536b7b}
#app.quote-page .invoice strong,#app.quote-page .country strong{font-size:16px}
#app.quote-page .country small{font-size:13px}
#app.quote-page .section-title{margin-bottom:18px}
#app.quote-page .section-title h2,#app.quote-page .service-step h2{font-size:18px;line-height:1.5;font-weight:700}
#app.quote-page .section-title small,#app.quote-page .service-step>small{font-size:12px;line-height:1.5;color:#536b7b}
#app.quote-page .step,#app.quote-page .service-step>span{font-size:13px}
#app.quote-page .service-step{margin:24px 0 18px;padding-top:24px}
#app.quote-page .service-step:first-child{margin-top:0;padding-top:0}
#app.quote-page .quote-top{padding:26px 28px}
#app.quote-page .quote-heading{font-size:15px;line-height:1.6;gap:12px;flex-wrap:wrap}
#app.quote-page .quote-top .amount{font-size:44px;line-height:1.3;margin:18px 0 10px;overflow-wrap:anywhere}
#app.quote-page .quote-top .sub{font-size:14px;line-height:1.7;color:#d3e3ec}
#app.quote-page .pill{font-size:12px}
#app.quote-page .fee-row{font-size:15px;line-height:1.65;padding:16px 0;gap:16px}
#app.quote-page .fee-row small{font-size:14px;line-height:1.65;color:#536b7b;margin-top:5px}
#app.quote-page .fee-row strong{font-size:17px}
#app.quote-page .quote-note,#app.quote-page .quote-meta{font-size:14px;line-height:1.75;color:#536b7b;overflow-wrap:anywhere}
#app.quote-page .quote-note{padding:14px;margin:18px 0}
#app.quote-page .quote-meta{display:block;margin-top:18px}
#app.quote-page .benefit h3{font-size:15px}#app.quote-page .benefit p{font-size:14px}
#app.quote-page .guide-banner p,#app.quote-page .guide-banner a{font-size:14px}
#app.quote-page .field-row:has(#items-field.hidden){grid-template-columns:1fr}
/* A shipment is one group; each cargo line is a compact row inside it. */
#app.quote-page #service-form .shipment{padding:18px;border:1px solid #dce6ed;border-radius:10px;margin:18px 0;background:#fff}
#app.quote-page #service-form .shipment .section-title{margin:0 0 14px;min-height:32px}
#app.quote-page #service-form .shipment .section-title h3{font-size:17px;line-height:1.5}
#app.quote-page #service-form .ctn-cargo{padding:14px;background:#f4f7f8;border-radius:8px;margin:12px 0}
#app.quote-page .cargo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;min-height:30px}
#app.quote-page .cargo-heading strong{font-size:14px;color:#536b7b}
#app.quote-page .ctn-fields{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px;align-items:start}
#app.quote-page .ctn-fields label{margin:0;min-width:0;font-size:14px}
#app.quote-page .ctn-fields label:first-child{grid-column:auto}
#app.quote-page .ctn-fields select,#app.quote-page .ctn-fields input{font-size:15px;min-height:46px;padding:10px}
#app.quote-page .wm-fields{grid-template-columns:1fr 1fr}
#app.quote-page .wm-fields label:first-child{grid-column:1/-1}
#app.quote-page .cargo-note{font-size:14px;line-height:1.6;color:#536b7b;margin:10px 0 0}
#app.quote-page .table-action{font-size:14px;min-height:32px;padding:4px 0}
#app.quote-page .shipment>.btn{width:100%;border-style:dashed;background:#fff;margin-top:4px}
#app.quote-page #add-bill{width:100%;margin-top:0}
#app.quote-page .service-form-footer{margin-top:22px}
#app.quote-page .service-choices{gap:10px;margin-bottom:20px}
#app.quote-page .service-choice{padding:16px;min-height:84px}
@media(max-width:1100px){#app.quote-page .hero-aside{display:none}}
@media(max-width:900px){#app.quote-page .workspace,#app.quote-page .service-workspace{grid-template-columns:1fr}#app.quote-page .hero{min-height:0}}
@media(max-width:650px){
 #app.quote-page .hero h1{font-size:26px}#app.quote-page .hero p{font-size:14px}
 #app.quote-page .card-pad,#app.quote-page .quote-body{padding:20px 16px}
 #app.quote-page .quote-top{padding:22px 20px}#app.quote-page .quote-top .amount{font-size:36px}
 #app.quote-page .section-title small,#app.quote-page .service-step>small{display:none}
 #app.quote-page .ctn-fields{grid-template-columns:1fr}#app.quote-page .wm-fields{grid-template-columns:1fr 1fr}
 #app.quote-page .wm-fields label:first-child{grid-column:1/-1}
 #app.quote-page #service-form .shipment{padding:14px}
 #app.quote-page .fee-row{flex-wrap:wrap}#app.quote-page .fee-row>div{flex:1 1 170px}#app.quote-page .fee-row strong{margin-left:auto}
 #app.quote-page .actions{flex-wrap:wrap}#app.quote-page .actions .btn{flex:1 1 130px}
 #app.quote-page .service-tabs .btn{font-size:14px;padding:10px 12px}
}
/* Compact controls, shared across all quotation forms. */
#app.quote-page input:not([type=checkbox]),
#app.quote-page select,
#app.quote-page #service-form input:not([type=checkbox]),
#app.quote-page #service-form select{
 height:42px;min-height:42px;font-size:14px;font-weight:400;line-height:20px;padding:10px 12px;
}
#app.quote-page textarea{font-size:14px;font-weight:400}
#app.quote-page select,#app.quote-page #service-form select{
 appearance:none;-webkit-appearance:none;padding-right:40px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%2314354b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
}
#app.quote-page .input-unit input{padding-right:58px}
#app.quote-page .input-unit span{top:10px;font-size:13px;font-weight:400}
#app.quote-page #service-form > label.inline-check{display:flex;align-items:center;gap:10px} #app.quote-page #service-form > label.inline-check input[type=checkbox]{margin:0;flex:0 0 18px}