:root{
    --primary:#283675;
    --primary-dark:#1d2a5e;
    --page:#eef6fc;
    --border:#cbd3e1;
    --muted:#778197;
    --text:#202632;
    --soft-bg:#f7f8fa;
    --card-bg:#ffffff;
    --danger:#ff4052;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    background:var(--page);
    color:#202632;
    font-family:Arial,Helvetica,sans-serif;
    /* font-size: 18px; */
}

button,
input,
select,
textarea{
    font-family:Arial,Helvetica,sans-serif;
}

.page{
    width:100%;
}

.page-title{
    text-align:center;
    padding:28px 20px 26px;
}

.page-title h1{
    margin:0;
    color:var(--primary);
    font-size:36px;
    font-weight:800;
    letter-spacing:.2px;
    text-transform:lowercase;
}

.wrapper{
    width:min(1200px,calc(100% - 40px));
    margin:0 auto;
}

.section-title{
    margin:0 0 10px;
    color:var(--primary);
    font-size:22px;
    font-weight:800;
}

.quick-card,
.shipment-card,
.summary-card{
    background:#fff;
    border-radius:15px;
    box-shadow:0 2px 5px rgba(0,0,0,.18);
}

.quick-card{
    padding:20px 38px;
}

.quick-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.quick-head h2{
    margin:0 0 4px;
    color:var(--primary);
    font-size:19px;
}

.quick-head p{
    margin:0;
    color:#999;
    font-size: 14px;
}

.quick-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:14px;
}

.form-label{
    display:block;
    margin:0 0 5px;
    color:var(--primary);
    font-size: 14px;
    font-weight:800;
}

input,
select,
textarea{
    width:100%;
    min-width:0;
    border:1px solid var(--primary);
    border-radius:14px;
    background:#fff;
    color:#66728a;
    outline:none;
}

input,
select{
    height:42px;
    padding:0 13px;
    font-size: 14px;
}

textarea{
    padding:12px 13px;
    font-size: 14px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    box-shadow:0 0 0 2px rgba(40,54,117,.12);
}

.estimate-btn,
.add-items-btn,
.calculate-btn{
    display:block;
    width:320px;
    max-width:100%;
    height:48px;
    margin:16px auto 0;
    border:0;
    border-radius:14px;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 3px 4px rgba(0,0,0,.25);
}

.quick-result{
    width:100%;
    max-width:100%;
    margin:14px 0;
    /* padding:10px 10px; */
    border-radius:10px;
    /* background:#eef4fa; */
    color:var(--primary);
    display:flex;
    justify-content:space-between;
    line-height: 2rem;
}

.quick-estimate-result-box {
    width: 100%;
    background: #edf3fc;
    border: 1px solid #d5def0;
    border-radius: 14px;
    padding: 16px 20px;
    color: var(--primary);
}

.quick-estimate-line {
    display: flex;
    /* justify-name: space-between; */
    justify-content: space-between;
    align-items: center;
    /* padding: 8px 0; */
    font-size: 15px;
}

.quick-estimate-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid #cbd5e5;
    font-size: 16px;
    font-weight: 800;
}
.quick-estimate-note{
    color: rgb(234, 86, 86);
}

.quick-estimate-result-box .q-label {
    color: #55627c;
    font-weight: 600;
}

.quick-estimate-result-box .q-val {
    color: var(--primary);
    font-weight: 800;
    text-align: right;
}

.shipment-section{
    padding:12px 0 45px;
}

.shipment-card{
    padding:20px 38px 24px;
}

.form-section{
    margin-bottom:10px;
}

.form-section h3,
.items-section h3,
.remarks-section h3,
.notes-section h3{
    margin:0 0 6px;
    color:var(--primary);
    font-size:17px;
    font-weight:800;
}

.optional{
    color:var(--danger);
    font-size:10px;
}

.sender-grid,
.receiver-grid{
    display:grid;
    grid-template-columns:1.55fr .72fr .72fr;
    gap:14px;
}

.sender-grid textarea{height:88px}
.receiver-grid{gap:10px 14px}
.receiver-message{grid-row:span 2}
.receiver-message textarea{height:92px}
.email-field{grid-column:2/4}

.two-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.two-inputs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 14px;
}

.section-description{
    margin:0 0 10px;
    color:#999;
    font-size: 14px;
}

.dynamic-items{
    width:100%;
}

.dynamic-item{
    margin-bottom:12px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#f8fafc;
}

.item-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}

.item-title{
    color:var(--primary);
    font-size:14px;
    font-weight:800;
}

.remove-item{
    width:32px;
    height:32px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#ffe5e5;
    color:#c0392b;
    cursor:pointer;
}

.dynamic-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 14px;
}

.full{grid-column:1/-1}

.notes-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
}

.transport-note{
    position:relative;
    min-height:80px;
    padding:8px;
    border:1px solid var(--primary);
    border-radius:12px;
    background:#fff;
    color:var(--primary);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
}

.transport-note i{font-size:25px}
.transport-note strong{font-size:15px}
.transport-note small{font-size:10px;color:#7c8291}

.transport-note.active{
    background:#edf2fc;
}

.transport-note.active::after{
    content:"✓";
    position:absolute;
    top:0;
    right:0;
    width:20px;
    height:20px;
    border-radius:0 10px 0 8px;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
}

.tvc-note{
    margin-top:16px;
    color:var(--danger);
    font-size: 14px;
    line-height:1.4;
}

.calculate-section{
    margin-top:4px;
}

.summary-section{
    width:min(1200px,calc(100% - 40px));
    margin:0 auto 50px;
}

.summary-card{
    padding:12px;
}

.parcel-summary{
    border:1px solid #cbd1dc;
    border-radius:6px;
    background:#fff;
    padding:20px;
}

.summary-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:12px;
    background:#f5f8fb;
    border-radius:6px;
}

.summary-brand{
    display:flex;
    align-items:center;
    gap:8px;
    color:#25304b;
    font-size: 14px;
}

.summary-brand img{
    width:20px;
    height:20px;
    border-radius:50%;
}

.summary-transport{
    padding:7px 12px;
    border-radius:4px;
    background:#dff0ff;
    color:#245b86;
    font-size: 14px;
    font-weight:800;
}

.summary-info{
    margin-top:12px;
    padding:13px;
    border:1px solid #d7dce4;
    border-radius:5px;
    background:#fbfbfc;
    font-size: 14px;
}

.summary-info strong{
    display:block;
    margin-bottom:7px;
}

.summary-info p{
    margin:3px 0;
}

.summary-title{
    margin-top:18px;
    padding-bottom:6px;
    border-bottom:2px solid var(--primary);
    color:var(--primary);
    font-size: 16px;
}

.summary-item{
    margin-top:10px;
}

.summary-item-title{
    padding:10px;
    border:1px solid var(--border);
    border-radius:5px 5px 0 0;
    background:#f7f8fa;
    color:var(--primary);
    font-size:15px;
    font-weight:800;
}

.summary-item-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    margin-top:5px;
}

.summary-item-grid div{
    min-height:52px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.summary-item-grid div span{
    display:block;
    margin-bottom:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
}

.summary-item-grid div strong{
    display:block;
    color:#202632;
    font-size:13px;
    font-weight:700;
}

/* =========================
   OVERALL COMBINED TOTALS
   ========================= */

.summary-total{
    margin-top:14px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:6px;
    background:#f8fafc;
}

.summary-total-title{
    padding:10px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#f7f8fa;
    color:var(--primary);
    font-size:15px;
    font-weight:800;
}

.summary-total-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    margin-top:5px;
}

.summary-total-grid div{
    min-height:52px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.summary-total-grid div span{
    display:block;
    margin-bottom:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
}

.summary-total-grid div strong{
    display:block;
    color:#202632;
    font-size:13px;
    font-weight:700;
}

/* .summary-remarks{
    margin-top:12px;
    padding:14px;
    min-height:65px;
    border:1px solid #d7dce4;
    border-radius:5px;
    background:#fff;
    font-size: 14px;
} */

/* .summary-remarks p{
    margin:8px 0 0;
    white-space:pre-wrap;
} */

.summary-note{
    margin:12px 0;
    color:var(--danger);
    text-align:center;
    font-size:12px;
}

.timeline{
    margin-top:12px;
    padding:15px 12px 8px;
    border:1px solid #f0d76b;
    border-radius:6px;
    background:#fff9c9;
}

.timeline-dates{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.timeline-dates div{
    padding:10px;
    border:1px solid #d8dee7;
    border-radius:6px;
    background:#fff;
    text-align:center;
}

.timeline-date-card span{
    font-size:11px;
    font-weight:500;
    color:#555;
}

.timeline-date-card strong{
    font-size:14px;
    font-weight:800;
    color:#252a34;
    margin-left:3px;
}

.timeline-line{
    position:relative;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    margin-top:17px;
}

.timeline-line::before{
    content:"";
    position:absolute;
    top:16px;
    left:5%;
    right:5%;
    height:2px;
    background:#9eafc5;
}

.timeline-step{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.timeline-icon{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#e1e5eb;
    color:#4d5665;
    display:flex;
    align-items:center;
    justify-content:center;
}

.timeline-icon i{
    font-size:13px;
}

.timeline-step p{
    margin:6px 0 0;
    font-size:10px;
    line-height:1.15;
    font-weight:700;
    color:#374151;
    text-align:center;
}

.timeline-step.active .timeline-icon{
    background:#fff;
    color:#2e80e5;
    border:1px solid #2e80e5;
}

.fee-box{
    margin-top:12px;
    padding:14px;
    border:1px solid #d7dce4;
    border-radius:6px;
    background:#fff;
    text-align:center;
}

.fee-title{
    color:var(--primary);
    font-size:16px;
    font-weight:800;
}

.fee-price{
    margin-top:4px;
    color:var(--primary);
    font-size:24px;
    font-weight:900;
}

.fee-note{
    margin-top:4px;
    color:#777;
    font-size:11px;
    font-weight:500;
}

.summary-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:14px;
}

.summary-action{
    min-width:180px;
    height:42px;
    border:0;
    border-radius:10px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}

.summary-action.primary{
    background:var(--primary);
    color:#fff;
}

.summary-action.secondary{
    background:#e9edf4;
    color:var(--primary);
}

.site-footer{
    background:var(--primary);
    color:#fff;
    padding:28px 42px 15px;
}

.footer-grid{
    width:min(1200px,100%);
    margin:auto;
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:40px;
}

.footer-grid h3{
    margin:0 0 8px;
    font-size:15px;
}

.footer-grid p{
    margin:4px 0;
    font-size: 14px;
    line-height:1.5;
}

.footer-bottom{
    margin-top:20px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.25);
    text-align:center;
    font-size:10px;
    opacity:.8;
}

.chat-btn{
    position:fixed;
    right:20px;
    bottom:25px;
    width:58px;
    height:58px;
    border:0;
    border-radius:50%;
    background:#168de2;
    color:#fff;
    z-index:1000;
    cursor:pointer;
}


@media(max-width:900px){
    .notes-grid{grid-template-columns:repeat(3,1fr)}
    .sender-grid,.receiver-grid{grid-template-columns:1fr 1fr}
    .receiver-message{grid-row:auto}
    .email-field{grid-column:1/-1}
}

@media(max-width:650px){
    .page-title{padding:22px 15px}
    .page-title h1{font-size:28px}

    .wrapper,
    .summary-section{
        width:calc(100% - 20px);
    }

    .quick-card,
    .shipment-card{
        padding:16px;
    }

    .quick-head{align-items:flex-start}
    .quick-grid,
    .two-cols,
    .two-inputs,
    .sender-grid,
    .receiver-grid,
    .dynamic-grid{
        grid-template-columns:1fr;
    }

    .email-field{grid-column:auto}

    .notes-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .summary-card{padding:6px}
    .parcel-summary{padding:10px}

    .summary-item-grid,
    .summary-total-grid{
        grid-template-columns:1fr 1fr;
    }

    .summary-actions{
        flex-direction:column;
    }

    .summary-action{width:100%}

    .footer-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .site-footer{
        padding:24px 20px 14px;
    }
}


/* =========================================================
   SHIPPING LABEL
   ========================================================= */

.shipment-confirmation {
    width:min(1200px,calc(100% - 40px));
    margin: 30px auto;
}

.shipping-label {
    background: #ffffff;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 5px 18px rgba(20, 40, 70, 0.08);
}


/* Header */

.shipping-label-header {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.shipping-logo {
    width: 34px;
    height: 34px;
    border: 1px solid #d5dce5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.shipping-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shipping-label-title{
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:5px;
    background:#f7f8fa;
    color:var(--primary);
    font-size:15px;
    font-weight:800;
    letter-spacing:.3px;
}

.shipping-transport{
    min-width:90px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#edf3fc;
    color:var(--primary);
    font-size:14px;
    font-weight:700;
}


/* Sender / Receiver / Contact */

.label-info-row{
    min-height:26px;
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:5px;
    padding:5px 8px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#ffffff;
    font-size:12px;
    color:#202632;
}

.label-info-row strong{
    font-size:12px;
    font-weight:700;
}


/* Section title */

.label-section-title {
    margin-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #283d8f;
    color: #263879;
    font-size: 15px;
    font-weight: 700;
}


/* Item */

.label-item{
    margin-top:10px;
    padding:5px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#f8fafc;
}

.label-item-title{
    padding:10px;
    margin-bottom:5px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#f7f8fa;
    color:var(--primary);
    font-size:15px;
    font-weight:800;
}

.label-item-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
}

.label-item-grid div{
    min-height:52px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.label-item-grid span{
    display:block;
    margin-bottom:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
}

.label-item-grid strong{
    display:block;
    margin-top:0;
    color:#202632;
    font-size:13px;
    font-weight:700;
}

.label-chargeable{
    min-height:52px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:left;
}

.label-chargeable span{
    display:block;
    margin-bottom:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
}

.label-chargeable strong{
    display:block;
    color:#202632;
    font-size:13px;
    font-weight:700;
}



/* =========================
   SHIPPING LABEL
   OVERALL COMBINED TOTALS
   ========================= */

.label-total-card{
    margin-top:14px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:6px;
    background:#f8fafc;
}

.label-total-title{
    padding:10px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#f7f8fa;
    color:var(--primary);
    font-size:15px;
    font-weight:800;
}

.label-total-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    margin-top:5px;
}

.label-total-grid div{
    min-height:52px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
}

.label-total-grid span{
    display:block;
    margin-bottom:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
}

.label-total-grid strong{
    display:block;
    color:#202632;
    font-size:13px;
    font-weight:700;
}

/* Remarks */

/* .label-remarks {
    margin-top:8px;
    padding:9px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#ffffff;
    font-size:11px;
    color:#202632;
} */

/* .label-remarks strong {
    display:block;
    margin-bottom:5px;
    color:var(--primary);
    font-size:11px;
} */




/* Note */

.label-note {
    margin:8px 0;
    text-align:center;
    color:var(--danger);
    font-size:12px;
    line-height:1.4;
}


/* Tracking code */

.barcode-area{
    text-align:center;
    margin-top:5px;
    padding:5px;
    border:1px dashed #ccc;
    border-radius:8px;
    background:#fafafa;
}

.barcode-area p{
    margin-bottom:8px;
    font-size:14px;
}

.barcode-area svg{
    display:inline-block;
    vertical-align:middle;
    max-width:100%;
}

.qr{
    width:95px;
    border:1px solid #eee;
    padding:4px;
    border-radius:6px;
    background:#fff;
    display:inline-block;
    vertical-align:middle;
}



/* Buttons */

.label-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 12px;
}

.label-actions button {
    height:38px;
    border:0;
    border-radius:8px;
    background:#293889;
    color:#ffffff;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.label-actions button:hover {
    background: #1f2d73;
}


/* =========================================================
   ORDER TRACKING
   ========================================================= */

.order-tracking-card {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #d9dee5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(20, 40, 70, 0.06);
}

.tracking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.tracking-header strong {
    color: #293889;
}

#trackingTransportBadge{
    padding:5px 9px;
    border-radius:5px;
    background:#edf3fc;
    color:var(--primary);
    font-size:10px;
    font-weight:700;
}


/* Timeline */

.tracking-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin-top: 18px;
}

.tracking-timeline::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 7%;
    right: 7%;
    height: 1px;
    background: #d5d8dd;
    z-index: 0;
}

.tracking-step {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #6b7280;
}

.tracking-icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #666;
    font-size: 12px;
}

.tracking-step.active .tracking-icon {
    background: #293889;
    color: #ffffff;
}

.tracking-step strong {
    display:block;
    font-size:9px;
    font-weight:700;
    color:#374151;
}

.tracking-step small {
    display:block;
    margin-top:3px;
    font-size:8px;
    color:#9ca3af;
}


/* Current status */

.current-status {
    margin-top:12px;
    color:#555;
    font-size:10px;
}

.current-status strong {
    color:var(--primary);
    font-weight:700;
}

/* =========================
   REMARKS
   ========================= */

.summary-remarks,
.label-remarks{
    margin-top:12px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:5px;
    background:#ffffff;
    color:var(--text);
    font-size:14px;
    line-height:1.4;
}

.summary-remarks strong,
.label-remarks strong{
    display:block;
    margin-bottom:6px;
    color:var(--primary);
    font-size:14px;
    font-weight:800;
}

.summary-remarks p{
    margin:8px 0 0;
    white-space:pre-wrap;
}


/* Mobile */

@media (max-width: 650px) {

    .shipping-label {
        padding: 8px;
    }

    .shipping-label-header {
        grid-template-columns: 30px 1fr;
    }

    .shipping-transport {
        grid-column: 2;
        width: fit-content;
    }

    .label-item-grid,
    .label-total-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tracking-timeline {
        overflow-x: auto;
        grid-template-columns: repeat(6, 95px);
        padding-bottom: 8px;
    }

    .tracking-timeline::before {
        left: 45px;
        right: 45px;
    }
}

/* =========================================================
   IV / PL CONTAINER WIDTH
   SAME WIDTH AS ORDER TRACKING
   ========================================================= */

#ivplExtraForm,
#printArea {
    width:min(1200px,calc(100% - 40px));
    margin-left:auto;
    margin-right:auto;
}

#ivplExtraForm {
    margin-top:10px;
}

#printArea {
    margin-top:14px;
}

/* =========================================================
   IV / PL DOCUMENTS
   MATCH OLD STYLE
   ========================================================= */

.docs-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    align-items:start;
}

.docs-wrapper .card{
    display:flex;
    flex-direction:column;
    background:#ffffff;
    border:1px solid #cbd3e1;
    border-radius:5px;
    padding:4px;
    box-shadow:none;
}


/* =========================================================
   DOCUMENT TITLE
   ========================================================= */

.doc-title{
    text-align:center;
    font-size:18px;
    font-weight:800;
    color:#202632;
    margin:4px 0 8px;
    padding:4px;
}


/* =========================================================
   INFORMATION GRID
   ========================================================= */

.doc-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:8px;
    width:100%;
}
/* Exporter / Consigner + Importer / Consignee */
.doc-grid .exporter,
.doc-grid .consigner,
.doc-grid .importer,
.doc-grid .consignee{
    grid-column:span 1;
}


/* =========================================================
   INFORMATION BOX
   ========================================================= */

.box{
    min-width:0;
    min-height:48px;
    padding:8px 9px;
    border:1.5px solid #6bc048;
    border-radius:4px;
    background:#fbfdf9;
    color:#202632;
    font-size:12px;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.box span{
    display:block;
    margin-top:4px;
    color:#202632;
    font-size:12px;
    font-weight:500;
    line-height:1.35;
}

/* Exporter / Consigner = span 2 columns */
#commercialInvoice .doc-grid .box.wide{
    grid-column:span 2;
}
/* Packing List: Exporter / Importer stay 1 column */
#packingList .doc-grid .box.wide{
    grid-column:span 1;
}

/* Commercial Invoice stays unchanged */
#commercialInvoice .doc-grid .box.big{
    grid-column:span 1;
}

/* Packing List: Packing Information spans 3 columns */
#packingList .doc-grid.extra-info .box.big{
    grid-column:1 / -1;
}

.box.big{
    min-height:55px;
}


/* =========================================================
   EXTRA INFORMATION
   ========================================================= */

#packingList .extra-info{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:4px;
}

#packingList .extra-info .box.big{
    grid-column:1 / -1;
}


/* =========================================================
   BOTTOM INFORMATION
   ========================================================= */

.bottom-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    margin-top:4px;
}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.table-wrapper{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

.docs-wrapper .card{
    min-width:0;
    display:flex;
    flex-direction:column;
    background:#ffffff;
    border:1px solid #cbd3e1;
    border-radius:5px;
    padding:6px;
    box-shadow:none;
}


/* =========================================================
   COMMERCIAL INVOICE TABLE
   ========================================================= */


.invoice-table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    margin-top:6px;
    font-size:10px;
}

.invoice-table th,
.invoice-table td{
    border:1.5px solid #6bc048;
    padding:6px 4px;
    text-align:center;
    vertical-align:middle;
    line-height:1.25;
    word-wrap:break-word;
    overflow-wrap:anywhere;
}

.invoice-table th{
    background:#f3f8ef;
    color:#202632;
    font-weight:700;
    white-space:normal;
}

.invoice-table td{
    background:#ffffff;
    color:#202632;
    font-weight:500;
}

/* Commercial Invoice column proportions */

.invoice-table th:nth-child(1),
.invoice-table td:nth-child(1){
    width:15%;
}

.invoice-table th:nth-child(2),
.invoice-table td:nth-child(2){
    width:24%;
}

.invoice-table th:nth-child(3),
.invoice-table td:nth-child(3){
    width:12%;
}

.invoice-table th:nth-child(4),
.invoice-table td:nth-child(4){
    width:8%;
}

.invoice-table th:nth-child(5),
.invoice-table td:nth-child(5){
    width:9%;
}

.invoice-table th:nth-child(6),
.invoice-table td:nth-child(6){
    width:15%;
}

.invoice-table th:nth-child(7),
.invoice-table td:nth-child(7){
    width:17%;
}


/* =========================================================
   PACKING LIST TABLE
   ========================================================= */

.packing-table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    border:1.5px solid #6bc048;
    font-size:10px;
    margin-top:6px;
}

.packing-table th,
.packing-table td{
    border:1.5px solid #6bc048;
    padding:6px 4px;
    text-align:center;
    vertical-align:middle;
    line-height:1.25;
    word-wrap:break-word;
    overflow-wrap:anywhere;
}

.packing-table th{
    background:#f3f8ef;
    color:#202632;
    font-weight:700;
    white-space:normal;
}

.packing-table td{
    background:#ffffff;
    color:#202632;
    font-weight:500;
}

.packing-body{
    height:10px;
}

/* Packing List column proportions */

.packing-table th:nth-child(1),
.packing-table td:nth-child(1){
    width:14%;
}

.packing-table th:nth-child(2),
.packing-table td:nth-child(2){
    width:21%;
}

.packing-table th:nth-child(3),
.packing-table td:nth-child(3){
    width:10%;
}

.packing-table th:nth-child(4),
.packing-table td:nth-child(4){
    width:7%;
}

.packing-table th:nth-child(5),
.packing-table td:nth-child(5){
    width:8%;
}

.packing-table th:nth-child(6),
.packing-table td:nth-child(6){
    width:10%;
}

.packing-table th:nth-child(7),
.packing-table td:nth-child(7){
    width:10%;
}

.packing-table th:nth-child(8),
.packing-table td:nth-child(8){
    width:10%;
}

.packing-table th:nth-child(9),
.packing-table td:nth-child(9){
    width:10%;
}


/* =========================================================
   FORM ABOVE IV / PL
   ========================================================= */

#ivplExtraForm{
    width:min(1200px,calc(100% - 40px));
    margin:10px auto 0;
    padding:20px 38px 24px;
    background:#ffffff;
    border:1px solid #cbd3e1;
    border-radius:15px;
    box-shadow:0 2px 5px rgba(0,0,0,.18);
}

#ivplExtraForm h3{
    text-align:center;
    margin:0 0 16px;
    color:var(--primary);
    font-size:20px;
    font-weight:800;
}


/* =========================================================
   IV / PL FORM GRID
   ========================================================= */

.form-gridpacking{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    width:100%;
}

.form-gridpacking .field label{
    display:block;
    margin-bottom:6px;
    color:#202632;
    font-size:14px;
    font-weight:600;
}

.form-gridpacking .field input,
.form-gridpacking .field select{
    height:42px;
    padding:0 12px;
    font-size:14px;
}

.form-gridpacking .field textarea{
    width:100%;
    min-height:80px;
    padding:10px 12px;
    font-size:14px;
    line-height:1.4;
}

/* Full-width fields */

.full{
    grid-column:1/-1;
}


/* =========================================================
   ITEM ROWS
   ========================================================= */

.item-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:5px;
    margin-bottom:5px;
}

.item-row input,
.item-row select{
    width:100%;
    padding:5px;
    border-radius:3px;
    border:1px solid #ccc;
    font-size:11px;
}

.remove-btn{
    width:100%;
    min-height:30px;
    background:#d94c5c;
    color:white;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-weight:bold;
}


/* =========================================================
   ADD / CONFIRM BUTTONS
   ========================================================= */

.btn-row{
    display:flex;
    gap:6px;
    margin-top:8px;
}

.btn-row button{
    flex:1;
    padding:8px;
    border-radius:4px;
    border:none;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
}

.btn-secondary{
    background:#2f3c7e;
    color:#ffffff;
}

.btn-primary{
    background:#2f3c7e;
    color:#ffffff;
}


/* =========================================================
   DOWNLOAD BUTTON AREA
   ========================================================= */

.download-area{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-top:8px;
    flex-wrap:wrap;
}

.download-area .confirm-btn{
    padding:7px 10px;
    border-radius:5px;
    font-size:10px;
}


/* =========================================================
   OTHER DOCUMENTS
   ========================================================= */

.docs-card{
    background:#f9fafc;
    border-radius:6px;
    padding:8px;
    margin-top:8px;
}

.docs-title{
    margin-bottom:8px;
    font-weight:700;
    color:#2f3c7e;
    font-size:12px;
}

.docs-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:6px;
}

@media (max-width:768px){

    .docs-wrapper{
        grid-template-columns:1fr;
    }

    #commercialInvoice .doc-grid,
    #packingList .doc-grid{
        grid-template-columns:1fr 1fr;
    }

    #commercialInvoice .doc-grid .box.wide,
    #commercialInvoice .doc-grid .box.big,
    #packingList .doc-grid .box.wide,
    #packingList .doc-grid .box.big{
        grid-column:span 2;
    }

    .doc-title{
        font-size:18px;
    }


    .extra-info{
        grid-template-columns:1fr 1fr;
    }

    .bottom-grid{
        grid-template-columns:1fr;
    }

    .form-gridpacking{
        grid-template-columns:1fr;
    }

    #ivplExtraForm{
        width:calc(100% - 20px);
        padding:16px;
        margin-top:10px;
    }

    .item-row{
        grid-template-columns:1fr 1fr;
    }

    .download-area{
        flex-direction:column;
    }

    .download-area .confirm-btn{
        width:100%;
    }

    .doc-title{
        font-size:16px;
    }

    #commercialInvoice .table-wrapper,
    #packingList .table-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #commercialInvoice .invoice-table,
    #packingList .packing-table {
        min-width: 900px;
        width: 900px;
    }
}

/* =========================================================
   UPLOAD AREA
   ========================================================= */

.upload-area {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 20px;
}

/* File names stay on the LEFT */
.upload-preview {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Upload button stays on the RIGHT */
.upload-area .upload-btn {
    margin-left: auto;
    flex: 0 0 auto;
}

/* Hide preview when there are no files */
.upload-preview:empty {
    display: none;
}

/* Each uploaded file */
.upload-file {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 10px;
    background: #f1f4fc;
    border-radius: 6px;
    font-size: 13px;
    color: #27336b;
}

/* File name */
.upload-file-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: #27336b;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-file-name:hover {
    text-decoration: underline;
}

/* Remove button */
.remove-upload {
    border: none;
    background: transparent;
    color: #777;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
}

.remove-upload:hover {
    color: #d33;
}

/* Upload button - RIGHT */
.upload-area .upload-btn {
    flex: 0 0 auto;
}

.upload-btn {
    min-width: 100px;
    height: 34px;
    border: none;
    border-radius: 18px;
    background: #edf3ff;
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* =========================================================
   PRINT SUMMARY
========================================================= */

@media print {

    html,
    body,
    body.print-summary > main {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.print-summary > * {
        display: none !important;
    }

    body.print-summary > main {
        display: block !important;
        background: #fff !important;
    }

    body.print-summary > main > * {
        display: none !important;
    }

    body.print-summary > main > #summaryBox {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.print-summary > main > #summaryBox,
    body.print-summary > main > #summaryBox * {
        visibility: visible !important;
    }

    body.print-summary #summaryBox .summary-actions {
        display: none !important;
    }

    body.print-summary #summaryBox .summary-card {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
        box-shadow: none !important;

        background: #fff !important;
    }

    body.print-summary #summaryBox #summaryContent {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    @page {
        size: A4 portrait;
        margin: 10mm;
    }
}