:root { --ink:#153a49; --muted:#627b87; --teal:#007f9a; --cyan:#00b8d4; --orange:#ffad3d; --green:#8cc63f; --line:#dce9ed; --paper:#f7fbfc; }
.review-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
.review-details div { min-width:0; border-bottom:1px solid #edf1f2; padding-bottom:12px; }
.review-details dt { font-size:11px; color:#637782; margin-bottom:5px; }
.review-details dd { margin:0; font-size:14px; overflow-wrap:anywhere; white-space:pre-wrap; }
.review-actions { display:flex; justify-content:space-between; gap:16px; margin-top:24px; }
.review-header { border-top:3px solid #00b8d4; }
@media(max-width:580px) { .review-details { grid-template-columns:1fr; } .review-actions { flex-direction:column; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; font-family:'Segoe UI',Arial,sans-serif; color:var(--ink); background:var(--paper); font-size:15px; line-height:1.55; }
[hidden] { display:none !important; }
a { color:inherit; }
.skip-link { position:absolute; left:16px; top:-80px; z-index:100; background:white; padding:12px; }
.skip-link:focus { top:8px; }
.topbar { min-height:94px; background:white; display:flex; align-items:center; justify-content:space-between; padding:20px max(28px,calc((100vw - 1320px)/2)); gap:24px; }
.brand { display:flex; align-items:center; gap:15px; text-decoration:none; font-size:14px; font-weight:750; letter-spacing:.04em; }
.brand-mark { background:var(--teal); color:white; border-radius:12px 12px 12px 2px; font-size:24px; padding:10px; letter-spacing:-2px; }
.brand-mark span { color:#b8e2c9; font-size:18px; }
.company-logo { width:205px; height:76px; object-fit:contain; }
.brand small { display:block; color:var(--muted); font-size:9px; letter-spacing:.18em; margin-top:3px; font-weight:600; }
.portal-label { color:var(--muted); font-size:13px; display:flex; align-items:center; gap:9px; }
.status-dot { height:7px; width:7px; border-radius:50%; background:var(--teal); }
.hero { position:relative; overflow:hidden; background:linear-gradient(115deg,#083e58 0%,#006c8a 65%,#008eaa 100%); border-bottom:4px solid var(--orange); color:white; padding:58px max(28px,calc((100vw - 1320px)/2)) 62px; }
.hero-inner { position:relative; z-index:1; max-width:730px; }
.eyebrow { font-size:10px; letter-spacing:.18em; font-weight:750; color:var(--teal); margin:0 0 15px; }
.hero .eyebrow { color:#ffce8b; }
h1 { font-size:clamp(34px,4vw,54px); line-height:1.12; letter-spacing:-.035em; font-weight:650; margin:0 0 22px; }
h1 span { color:#83e4ed; }
.hero-description { color:#c4d5d7; font-size:16px; max-width:565px; line-height:1.8; }
.hero-tags { display:flex; flex-wrap:wrap; gap:22px; margin-top:28px; font-size:11px; color:#d6e4e5; }
.hero-symbol { position:absolute; right:10%; top:45px; width:270px; height:270px; border:1px solid #ffffff15; border-radius:50%; display:grid; place-items:center; transform:rotate(-12deg); }
.hero-symbol span { font-size:94px; color:#ffffff09; font-weight:800; letter-spacing:-8px; }
.orbit { position:absolute; inset:-38px; border:1px solid #ffffff0d; border-radius:50%; }
.portal-layout { max-width:1376px; margin:0 auto; padding:48px 28px 70px; display:grid; grid-template-columns:245px minmax(0,1fr); gap:48px; align-items:start; }
.sidebar { position:sticky; top:28px; }
.sidebar h2 { font-size:22px; line-height:1.4; font-weight:600; letter-spacing:-.02em; margin:0 0 24px; }
.section-nav { display:grid; gap:4px; margin-bottom:30px; }
.section-nav a { text-decoration:none; font-size:13px; padding:11px 0; display:flex; align-items:center; gap:12px; color:#546c77; }
.section-nav a:hover { color:var(--teal); }
.section-nav span { border:1px solid #cfdddf; border-radius:50%; width:28px; height:28px; display:grid; place-items:center; font-size:10px; background:white; }
.preparation { padding:22px; background:#f0f6e7; border:1px solid #e0eacb; border-radius:12px; }
.preparation h3 { font-size:14px; margin:8px 0; }
.preparation p,.sidebar-note { font-size:12px; color:#5b716b; line-height:1.8; }
.small-icon { color:var(--teal); font-size:22px; }
.sidebar-note { padding:8px 10px; color:var(--muted); }
.form-column { min-width:0; }
.form-intro { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:20px; }
.form-intro .eyebrow { margin-bottom:5px; }
.form-intro h2 { margin:0; font-size:27px; font-weight:600; letter-spacing:-.025em; }
.intro-badge { font-size:10px; background:#e5efed; padding:6px 12px; border-radius:30px; color:#47776d; white-space:nowrap; }
.disclaimer { background:#fffcf3; border:1px solid #e9dfbd; border-radius:8px; margin-bottom:24px; padding:14px 20px; font-size:12px; color:#706139; }
.disclaimer summary { cursor:pointer; font-weight:600; }
.disclaimer summary span { float:right; }
.disclaimer p { line-height:1.9; }
.form-card { background:white; border:1px solid var(--line); border-radius:12px; padding:28px; margin-bottom:22px; box-shadow:0 3px 6px #12394003; }
.section-heading { display:flex; gap:15px; align-items:flex-start; border-bottom:1px solid #edf1f2; padding-bottom:21px; margin-bottom:24px; }
.section-number { display:grid; place-items:center; flex-shrink:0; width:35px; height:35px; border-radius:10px; background:#e5f7fc; color:var(--teal); font-size:11px; font-weight:700; }
.section-heading h2 { font-size:18px; font-weight:650; margin:0 0 3px; letter-spacing:-.015em; }
.section-heading p { font-size:12px; color:var(--muted); margin:0; }
.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 24px; }
.fields > div { min-width:0; }
label { display:block; font-size:12px; font-weight:600; margin-bottom:8px; color:#3a5360; }
.required { color:#b9583d; }
input,select,textarea { width:100%; min-height:46px; border:1px solid #d5dfe3; border-radius:6px; background:#fcfdfd; padding:11px 12px; font:inherit; font-size:13px; color:var(--ink); transition:border-color .15s,box-shadow .15s; }
input:hover,select:hover,textarea:hover { border-color:#a4bac1; }
input:focus,select:focus,textarea:focus { outline:2px solid #00858c; outline-offset:2px; background:white; }
button { font:inherit; font-size:12px; font-weight:600; border:1px solid #b8d4d5; border-radius:6px; padding:12px 18px; background:white; color:var(--teal); cursor:pointer; }
button:hover { background:#edf7f6; }
button:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
fieldset.product { min-width:0; border:1px solid #dce7e7; border-radius:8px; margin:22px 0; padding:22px; background:#fafcfc; }
legend { padding:0 10px; font-size:12px; font-weight:700; color:var(--teal); }
.product .fields { gap:20px; }
.product [data-field=description] { grid-column:1/-1; }
.remove-product { margin-top:20px; border:0; background:none; color:#8e5750; padding:4px 0; font-size:11px; }
.delete-control { display:none; }
.totals { background:#e8f0ef; border:1px solid #dce7e5; border-radius:10px; padding:23px 28px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:24px 0; }
.totals span { display:block; font-size:10px; color:#5d7777; margin-bottom:5px; }
.totals output { font-size:23px; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.upload-area { background:#f7fbfa; border:1px dashed #acc8c8; border-radius:8px; padding:25px; text-align:center; }
.upload-icon { display:block; color:var(--teal); font-size:30px; line-height:1; margin-bottom:15px; }
.upload-area input { background:white; max-width:100%; font-size:12px; }
input::file-selector-button { border:0; border-radius:4px; padding:8px 12px; color:var(--teal); background:#eaf4f2; margin-right:10px; cursor:pointer; }
.upload-area p { font-size:11px; color:var(--muted); }
.submit-area { display:flex; gap:24px; justify-content:space-between; align-items:center; border-top:1px solid #edf1f2; padding-top:25px; margin-top:28px; }
.submit-area p { font-size:12px; color:var(--muted); max-width:360px; margin:0; }
.submit { background:var(--teal); color:white; border:0; white-space:nowrap; padding:14px 22px; }
.submit:hover { background:#00686e; }
.submit span { margin-left:12px; }
.submission-note { font-size:10px; color:var(--muted); margin:18px 0 0; }
.errorlist { color:#a52f30; font-size:12px; padding-left:18px; }
.error-summary { background:#fff0ef; border:1px solid #efc1ba; padding:18px; border-radius:8px; margin-bottom:20px; color:#9d3434; }
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true] { border-color:#bd5656; }
.searchable-select > .select-clear { top:6px; height:34px; background:#fcfdfd; }
.select-panel { border-radius:0 0 8px 8px; }
.select-panel input { margin-bottom:8px; }
footer { border-top:1px solid var(--line); max-width:1320px; padding:25px 0; margin:0 auto; display:flex; justify-content:space-between; gap:20px; color:#6e838a; font-size:10px; letter-spacing:.03em; }
@media(min-width:1200px) { #permit .fields { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1000px) { .portal-layout { grid-template-columns:190px minmax(0,1fr); gap:25px; } .hero-symbol { right:-90px; } .form-card { padding:22px; } }
@media(max-width:760px) { .topbar { padding:18px 20px; min-height:78px; } .portal-label { display:none; } .hero { padding:36px 22px; } .hero-description { font-size:14px; } .hero-tags { gap:13px; font-size:10px; } .portal-layout { display:block; padding:28px 16px 40px; } .sidebar { display:none; } .form-intro h2 { font-size:23px; } .intro-badge { display:none; } .form-card { padding:20px; } .fields { gap:20px; } .totals { padding:20px; gap:12px; } .totals output { font-size:20px; } .submit-area { display:block; } .submit { width:100%; margin-top:20px; } footer { padding:22px; flex-wrap:wrap; } }
@media(max-width:480px) { .fields { grid-template-columns:1fr; } .brand { font-size:12px; } .brand-mark { font-size:21px; } .hero-tags { flex-direction:column; gap:8px; } .totals output { font-size:17px; } .totals span { font-size:9px; } fieldset.product { padding:16px; } .upload-area { padding:18px 12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* Give product descriptions and long choices room; keep short values compact. */
@media(min-width:1100px) {
    .portal-layout { max-width:1540px; grid-template-columns:210px minmax(0,1fr); gap:32px; }
    .product .fields { grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px 20px; }
    .product [data-field] { grid-column:span 2; }
    .product [data-field=hs_code] { grid-column:span 3; }
    .product [data-field=description] { grid-column:span 3; }
    .product [data-field=description] textarea { min-height:46px; height:46px; resize:vertical; }
    .product [data-field=condition],
    .product [data-field=quantity],
    .product [data-field=package_quantity] { grid-column:span 1; }
    .product [data-field=unit_of_measure] { grid-column:span 2; }
    .product [data-field=package_type] { grid-column:span 3; }
    .product [data-field=country_of_origin],
    .product [data-field=registration_number] { grid-column:span 3; }
    .product [data-field=brand_name],
    .product [data-field=generic_name],
    .product [data-field=manufacturer] { grid-column:span 3; }
    .product .select-panel { min-width:min(380px,75vw); }
}

/* Compact service header: readable title, company branding and useful steps. */
.topbar { min-height:100px; border-bottom:1px solid #e1ecef; }
.company-logo { width:220px; height:82px; }
.hero { display:flex; justify-content:space-between; align-items:center; gap:40px; background:#fff; color:var(--ink); border-bottom:1px solid #dce9ed; padding-top:36px; padding-bottom:38px; }
.hero::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#00b8d4 0%,#00b8d4 65%,#ffad3d 65%,#ffad3d 83%,#8cc63f 83%); }
.hero-inner { max-width:740px; }
.hero .eyebrow { color:#587581; font-size:10px; letter-spacing:.15em; margin-bottom:14px; }
.hero h1 { font-size:clamp(30px,3.1vw,44px); font-weight:650; letter-spacing:-.035em; line-height:1.2; margin-bottom:16px; }
.hero h1 span { color:#007e96; }
.hero-description { color:#627985; font-size:14px; line-height:1.8; margin:0; }
.application-steps { list-style:none; padding:0 0 0 35px; margin:0; border-left:1px solid #e1ecef; min-width:265px; }
.application-steps li { display:flex; gap:12px; align-items:center; padding:9px 0; }
.step-dot { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border:1px solid #cce9ef; border-radius:50%; color:#007e96; background:#f0fafc; font-size:10px; font-weight:700; }
.application-steps li:nth-child(2) .step-dot { color:#976020; border-color:#f0ddc0; background:#fffbf3; }
.application-steps li:nth-child(3) .step-dot { color:#54752a; border-color:#deebcb; background:#f7faef; }
.application-steps strong { display:block; font-size:12px; font-weight:600; }
.application-steps small { display:block; font-size:11px; color:#738993; margin-top:2px; }
@media(max-width:850px) {
    .hero { display:block; }
    .application-steps { display:flex; gap:20px; border-left:0; border-top:1px solid #e1ecef; padding:20px 0 0; margin-top:25px; min-width:0; }
    .application-steps li { flex:1; align-items:flex-start; }
    .application-steps small { display:none; }
}
@media(max-width:480px) {
    .topbar { padding:14px 18px; }
    .company-logo { width:170px; height:64px; }
    .hero { padding:28px 22px; }
    .application-steps { gap:10px; }
    .application-steps li { display:block; }
    .step-dot { margin-bottom:8px; }
    .application-steps strong { font-size:10px; }
}
/* Original company artwork, framed without changing the image file. */
.logo-window { display:block; position:relative; overflow:hidden; width:250px; aspect-ratio:2.8125; flex-shrink:0; background:white; }
.logo-window .company-logo { position:absolute; width:166.6667%; max-width:none; height:auto; left:-33.3333%; top:-90.625%; }
.brand-divider { width:1px; height:38px; background:#dce9ed; margin:0 8px; }
.brand-portal { font-size:11px; color:#35515e; letter-spacing:.12em; }
.brand-portal small { font-size:9px; letter-spacing:.08em; }
.topbar { min-height:120px; padding-top:14px; padding-bottom:14px; }
.status-dot { background:var(--green); }
.hero { background:linear-gradient(110deg,#fff 30%,#f0fbfd 100%); }
.hero h1 span { color:#007c94; text-decoration:underline; text-decoration-color:var(--cyan); text-decoration-thickness:4px; text-underline-offset:9px; }
.hero .eyebrow { color:#54752a; }
.section-number { background:var(--cyan); color:#123844; }
.section-nav a:hover span { border-color:var(--cyan); background:#e5fafe; }
.section-nav a:first-child span { background:var(--cyan); color:#123844; border-color:var(--cyan); }
.preparation { background:#f5faeb; border-top:3px solid var(--green); }
.preparation .small-icon { color:#547b24; }
.intro-badge { background:#fff2db; color:#7f571c; }
.totals { background:#eaf9fc; border-color:#c2eaf1; border-top:3px solid var(--cyan); }
.submit { background:var(--cyan); color:#123844; border:1px solid #00a6c1; font-weight:750; }
.submit:hover { background:#9de8f3; color:#123844; }
#add-product { border-color:#a4ce69; color:#476b20; background:#f6faef; }
#add-product:hover { background:#eaf4d9; }
.upload-area { background:#f2fcfe; border-color:#71ccdc; }
.upload-icon { color:#007e96; }
.application-steps li:nth-child(1) .step-dot { background:var(--cyan); color:#123844; border-color:var(--cyan); }
.application-steps li:nth-child(2) .step-dot { background:#fff0d7; color:#81520e; border-color:#ffc86d; }
.application-steps li:nth-child(3) .step-dot { background:#edf6dc; color:#476b20; border-color:#b7d985; }
@media(max-width:760px) { .topbar { min-height:100px; } .logo-window { width:215px; } .brand-divider,.brand-portal { display:none; } }
@media(max-width:480px) { .logo-window { width:190px; } .topbar { min-height:92px; } .hero h1 span { text-decoration-thickness:3px; text-underline-offset:6px; } }
/* Product groups use consistent columns instead of mixed-width automatic rows. */
.product .product-group { padding:20px 0; border-bottom:1px solid #e2ebee; }
.product .product-group:first-of-type { padding-top:4px; }
.product .product-group:last-of-type { border-bottom:0; padding-bottom:4px; }
.product-group h3 { margin:0 0 15px; font-size:11px; color:#526e7a; font-weight:650; letter-spacing:.055em; text-transform:uppercase; }
.product .product-group .fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
.product .product-group [data-field] { grid-column:auto; }
.product .product-group [data-field=description] textarea { min-height:46px; height:46px; resize:vertical; }
.product .product-group label { font-size:12px; }
.product .product-group-registration [data-field=registration_number] { max-width:none; }
@media(min-width:1100px) {
    .product .product-group-packaging .fields { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .product .product-group-amounts .fields { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:580px) {
    .product .product-group .fields { grid-template-columns:1fr; }
}
/* Keep the four packaging inputs on one balanced desktop row. */
@media(min-width:900px) {
    .product .product-group-packaging .fields {
        grid-template-columns:minmax(0,1.5fr) minmax(0,0.85fr) minmax(0,1.5fr) minmax(0,0.85fr);
        gap:16px;
    }
    .product .product-group-packaging .fields > [data-field] { grid-column:auto; min-width:0; }
    .product .product-group-packaging input,
    .product .product-group-packaging select { min-height:40px; padding-top:8px; padding-bottom:8px; }
    .product .product-group-packaging .select-clear { top:3px; }
}
.section-nav a[aria-disabled=true] { pointer-events:none; cursor:default; color:#8b9ba3; opacity:.65; }
.review-details .review-answer { position:relative; }
.edit-answer { float:right; border:1px solid #c9e5eb; border-radius:5px; background:#edf9fc; color:#007b94; padding:2px 8px; font-size:18px; line-height:1.4; margin-left:8px; }
.edit-answer:hover { background:#d3f2f9; }
button:disabled { opacity:.55; cursor:default; }
.review-editor { padding-top:8px; }
.review-editor .review-edit-actions { display:flex; gap:10px; margin-top:12px; }
.review-editor .review-edit-actions button { margin:0; padding:8px 14px; font-size:12px; }
.review-editor .searchable-select { margin-bottom:10px; }
.totals .total-unit { display:inline; margin:0 0 0 4px; font-size:12px; font-weight:600; color:#50717e; }
/* Numeric fields accept typed values without browser spinner controls. */
#application-form input[type=number],
.review-editor input[type=number] {
    -moz-appearance:textfield;
    appearance:textfield;
}
#application-form input[type=number]::-webkit-inner-spin-button,
#application-form input[type=number]::-webkit-outer-spin-button,
.review-editor input[type=number]::-webkit-inner-spin-button,
.review-editor input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance:none;
    margin:0;
}
/* Compact desktop product rows, with room for wrapped descriptions. */
#application-form input[data-decimal-places],
.review-editor input[data-decimal-places] {
    text-align:right;
    font-variant-numeric:tabular-nums;
}
.product .product-group { padding:16px 0; }
.product-group h3 { margin-bottom:12px; }
.product .product-group [data-field=description] textarea {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    overflow-y:hidden;
    resize:vertical;
    min-height:42px;
}
@media(min-width:1000px) {
    .product .product-group-identity .fields {
        grid-template-columns:minmax(0,1.1fr) minmax(0,1.8fr) minmax(0,.7fr) minmax(0,1.2fr);
        align-items:start;
        gap:16px;
    }
    .product .product-group-amounts .fields {
        grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);
        gap:16px;
    }
    .product .product-group-identity .fields > [data-field],
    .product .product-group-amounts .fields > [data-field] { grid-column:auto; min-width:0; }
}
.field-help { display:block; font-size:11px; line-height:1.6; color:#627b87; margin-top:6px; }
.attachment-list { list-style:none; padding:0; margin:16px 0; text-align:left; }
.attachment-list li { display:flex; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid #dce9ed; }
.attachment-list li span { flex:1; min-width:0; overflow-wrap:anywhere; font-size:12px; }
.attachment-list button { padding:6px 10px; }
.attachment-dialog { width:min(1000px,94vw); max-height:92vh; padding:20px; border:1px solid #c5dce3; border-radius:10px; }
.attachment-dialog::backdrop { background:#102e3caa; }
.attachment-dialog h2 { font-size:16px; overflow-wrap:anywhere; margin:0 0 12px; }
.attachment-preview-content { margin-top:15px; }
.attachment-preview-content iframe { width:100%; height:68vh; border:0; }
.attachment-preview-content img { max-width:100%; max-height:68vh; object-fit:contain; display:block; margin:auto; }