@font-face {
  font-family: "Belepotan";
  src: url("../assets/fonts/Belepotan.otf") format("opentype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bs-body-font-family: "Belepotan", Arial, sans-serif;
  --app-primary: #2254a3;
  --app-primary-dark: #183f7d;
  --app-bg: #f5f6f8;
  --app-border: #dfe3e8;
  --app-text: #242a31;
  --app-muted: #68717d;
}

html { scroll-behavior: smooth; }
body { color: var(--app-text); background: var(--app-bg); font-family: "Belepotan", Arial, sans-serif; font-size: 14px; }
button, input, select, textarea { font-family: inherit; }
.app-navbar { min-height: 64px; box-shadow: 0 1px 3px rgba(30, 43, 58, .05); }
.navbar-brand { color: var(--app-text); }
.navbar-brand:hover { color: var(--app-text); }
.navbar-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.navbar-brand strong { font-size: 18px; }
.navbar-brand small { margin-top: 4px; color: var(--app-muted); font-size: 10px; font-weight: 400; }
.brand-icon { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: var(--app-primary); border-radius: 8px; font-size: 19px; }
.navbar .nav-link { padding: .5rem .75rem !important; color: #555f6c; font-size: 13px; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--app-primary); }
.carrier-count { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; color: #356746; background: #ecf7ef; border: 1px solid #d3ead9; border-radius: 5px; font-size: 11px; font-weight: 600; }
.carrier-count::before { content: ""; width: 6px; height: 6px; margin-right: 7px; background: #41a35f; border-radius: 50%; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.page-heading h1 { margin: 0; font-size: 28px; font-weight: 650; letter-spacing: -.02em; }
.page-heading p, .section-title-row p { margin: 7px 0 0; color: var(--app-muted); font-size: 13px; }
.updated-label { color: #7b8490; font-size: 11px; white-space: nowrap; }
.demo-alert { padding: 13px 16px; color: #665619; background: #fff9df; border-color: #f0e1a4; font-size: 12px; }
.demo-alert > i { margin-top: 2px; color: #c59400; font-size: 17px; }
.demo-alert strong, .demo-alert span { display: block; }
.demo-alert span { margin-top: 2px; color: #7b6c35; }
.is-loading { opacity: .55; pointer-events: none; }
.app-card { border: 1px solid var(--app-border); border-radius: 8px; box-shadow: 0 1px 2px rgba(26, 39, 54, .035); }
.app-card > .card-header { display: flex; align-items: center; gap: 12px; min-height: 65px; padding: 14px 20px; background: #fff; border-bottom-color: #e8ebee; border-radius: 8px 8px 0 0; }
.section-number { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; color: var(--app-primary); background: #eaf1fb; border-radius: 50%; font-size: 12px; font-weight: 700; }
.card-header h2 { margin: 0; font-size: 16px; font-weight: 650; }
.card-header p { margin: 3px 0 0; color: var(--app-muted); font-size: 11px; }
.app-card .card-body { padding: 20px; }
.form-label { margin-bottom: 6px; color: #515a66; font-size: 12px; font-weight: 600; }
.form-control, .form-select, .input-group-text { min-height: 42px; border-color: #d8dde3; font-size: 13px; }
.form-control:focus, .form-select:focus { border-color: #77a0dc; box-shadow: 0 0 0 .2rem rgba(34, 84, 163, .12); }
.input-group-text { color: #737d89; background: #f8f9fa; }
.organization-mark { min-width: 48px; justify-content: center; color: #fff; background: var(--carrier-color, var(--app-primary)); border-color: var(--carrier-color, var(--app-primary)); font-weight: 700; }
.carrier-info { display: flex; align-items: flex-start; gap: 8px; color: #68717c; font-size: 11px; }
.carrier-info i { color: #8190a1; }
.route-summary, .calculated-values { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #e3e6ea; border-radius: 6px; overflow: hidden; }
.route-summary > div, .calculated-values > div { padding: 10px 12px; background: #f8f9fa; border-left: 1px solid #e3e6ea; }
.route-summary > div:first-child, .calculated-values > div:first-child { border-left: 0; }
.route-summary span, .calculated-values span { display: block; color: #7a8490; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .035em; }
.route-summary strong, .calculated-values strong { display: block; margin-top: 4px; font-size: 12px; font-weight: 650; }
.dimensions-box { padding: 15px; background: #f8f9fb; border: 1px solid #e3e6ea; border-radius: 7px; }
.dimensions-box strong, .dimensions-box small { display: block; }
.dimensions-box strong { font-size: 12px; }
.dimensions-box small { margin-top: 2px; color: #818a95; font-size: 10px; }
.dimensions-box > div > i { color: #8491a0; font-size: 20px; }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.service-card { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border: 1px solid #dfe3e8; border-radius: 7px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.service-card:hover { border-color: #aab5c1; }
.service-card.is-selected { background: #f4f8fe; border-color: #86a9db; }
.service-card > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.service-check { display: grid; place-items: center; width: 17px; height: 17px; color: transparent; background: #fff; border: 1px solid #b7c0ca; border-radius: 3px; }
.service-card.is-selected .service-check { color: #fff; background: var(--app-primary); border-color: var(--app-primary); }
.service-check i { font-size: 13px; line-height: 1; }
.service-icon { color: #60758e; font-size: 18px; }
.service-card strong, .service-card small { display: block; }
.service-card strong { font-size: 12px; font-weight: 650; }
.service-card small { margin-top: 2px; color: #7b8490; font-size: 10px; }
.service-wide { grid-column: 1 / -1; grid-template-columns: auto auto 1fr auto; }
.service-details { display: flex; gap: 6px; }
.service-details > span { display: flex; height: 34px; overflow: hidden; background: #fff; border: 1px solid #ccd3db; border-radius: 5px; }
.service-details input { width: 58px; padding: 0 7px; border: 0; outline: 0; font-size: 11px; }
.service-details b { align-self: center; padding-right: 7px; color: #7a8490; font-size: 9px; }
.tax-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.tax-row h2 { margin: 0; font-size: 14px; font-weight: 650; }
.tax-row p { margin: 4px 0 0; color: var(--app-muted); font-size: 11px; }
.vat-options { display: flex; padding: 3px; background: #eef1f4; border-radius: 6px; }
.vat-options label { cursor: pointer; }
.vat-options input { position: absolute; opacity: 0; pointer-events: none; }
.vat-options span { display: block; padding: 7px 10px; color: #66717d; border-radius: 4px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.vat-options input:checked + span { color: var(--app-primary); background: #fff; box-shadow: 0 1px 3px rgba(25,39,55,.12); }
.action-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: #fff; border: 1px solid var(--app-border); border-radius: 8px; }
.action-bar .btn { min-height: 42px; padding-left: 16px; padding-right: 16px; font-size: 12px; font-weight: 600; }
.action-bar .btn-primary { background: var(--app-primary); border-color: var(--app-primary); }
.action-bar .btn-primary:hover { background: var(--app-primary-dark); border-color: var(--app-primary-dark); }
.result-column { position: sticky; top: 88px; }
.result-card { min-height: 420px; overflow: hidden; border: 1px solid var(--app-border); border-radius: 8px; box-shadow: 0 2px 8px rgba(25,39,55,.06); }
.result-empty { min-height: 418px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px 25px; text-align: center; }
.empty-icon, .error-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 17px; color: #6280a5; background: #eef3f8; border-radius: 50%; font-size: 22px; }
.error-icon { color: #b24848; background: #fbeeee; font-size: 16px; font-weight: 700; }
.result-empty h2 { margin: 0; font-size: 16px; font-weight: 650; }
.result-empty p { max-width: 270px; margin: 8px 0 0; color: #7a8490; font-size: 11px; line-height: 1.55; }
.result-header { display: flex; justify-content: space-between; align-items: start; gap: 15px; padding: 20px; color: #fff; background: var(--app-primary); }
.result-header .eyebrow { margin: 0 0 7px; color: #dbe6f7; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.result-header h2 { margin: 0; font-size: 30px; font-weight: 650; }
.eta-badge { padding: 5px 8px; color: #eef4fc; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; font-size: 9px; white-space: nowrap; }
.result-route { padding: 14px 18px; background: #f7f9fc; border-bottom: 1px solid #e3e7eb; }
.result-route span, .result-route strong { display: block; }
.result-route span { color: #7a8490; font-size: 9px; text-transform: uppercase; }
.result-route strong { margin-top: 4px; font-size: 12px; }
.summary-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 14px 0; border: 1px solid #e3e6ea; border-radius: 6px; overflow: hidden; }
.summary-metric { min-width: 0; padding: 9px; border-left: 1px solid #e3e6ea; }
.summary-metric:first-child { border-left: 0; }
.summary-metric span, .summary-metric strong, .summary-metric small { display: block; }
.summary-metric span { color: #7e8792; font-size: 8px; text-transform: uppercase; }
.summary-metric strong { margin-top: 4px; font-size: 11px; }
.summary-metric small { margin-top: 2px; color: #939aa3; font-size: 7px; line-height: 1.3; }
.price-list { padding: 15px 18px 18px; }
.price-list-title, .price-row, .price-total { display: flex; justify-content: space-between; gap: 15px; }
.price-list-title { padding-bottom: 7px; color: #8a929c; font-size: 8px; text-transform: uppercase; }
.price-row { padding: 8px 0; border-top: 1px solid #eceef1; color: #59626e; font-size: 10px; }
.price-row span { max-width: 72%; }
.price-row strong { color: #303741; font-size: 10px; white-space: nowrap; }
.price-row strong.negative { color: #2c8a4a; }
.price-row.subtotal { margin-top: 3px; color: #303741; }
.price-row.vat { color: #737d88; }
.price-total { align-items: center; padding-top: 14px; margin-top: 4px; border-top: 1px solid #cfd5dc; font-size: 12px; font-weight: 650; }
.price-total strong { color: var(--app-primary); font-size: 20px; }
.result-footnote { display: none; }
.tariffs-section { scroll-margin-top: 75px; border-top: 1px solid #dfe3e8; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-title-row h2 { margin: 0; font-size: 22px; font-weight: 650; }
.tariff-carrier { display: flex; align-items: center; gap: 9px; padding: 7px 11px; background: #fff; border: 1px solid var(--app-border); border-radius: 6px; font-size: 12px; }
.tariff-carrier span { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: var(--carrier-color, var(--app-primary)); border-radius: 4px; font-size: 9px; font-weight: 700; }
.simple-header { min-height: 52px !important; }
.simple-header h3 { margin: 0; font-size: 13px; font-weight: 650; }
.simple-header i { margin-right: 7px; color: var(--app-primary); }
.tariff-table { font-size: 11px; }
.tariff-table th { padding: 10px 14px; color: #707985; background: #f8f9fa; font-size: 9px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.tariff-table td { padding: 11px 14px; color: #4f5965; vertical-align: middle; }
.tariff-table td:first-child { color: #292f37; font-weight: 600; }
.tariff-table td:last-child { text-align: right; }
.app-footer { padding: 20px 0; color: #858d97; background: #fff; border-top: 1px solid var(--app-border); font-size: 10px; }
.toast-message { position: fixed; left: 50%; bottom: 24px; z-index: 1100; padding: 10px 15px; color: #fff; background: #27313c; border-radius: 5px; box-shadow: 0 8px 25px rgba(0,0,0,.18); font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .18s ease; }
.toast-message.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 991.98px) {
  .result-column { position: static; }
  .result-card { min-height: 350px; }
  .result-empty { min-height: 348px; }
}
@media (max-width: 767.98px) {
  .navbar-collapse { padding: 10px 0; }
  .carrier-count { margin: 6px 0 4px; }
  .page-heading { align-items: start; flex-direction: column; }
  .page-heading h1 { font-size: 24px; }
  .updated-label { align-self: flex-start; }
  .services-grid { grid-template-columns: 1fr; }
  .service-wide { grid-column: auto; }
  .tax-row { align-items: stretch; flex-direction: column; }
  .vat-options label { flex: 1; }
  .vat-options span { text-align: center; }
  .section-title-row { align-items: start; flex-direction: column; }
}
@media (max-width: 575.98px) {
  main.container-xl { padding-left: 12px; padding-right: 12px; }
  .app-card > .card-header, .app-card .card-body { padding-left: 15px; padding-right: 15px; }
  .route-summary, .calculated-values { grid-template-columns: 1fr; }
  .route-summary > div, .calculated-values > div { border-left: 0; border-top: 1px solid #e3e6ea; }
  .route-summary > div:first-child, .calculated-values > div:first-child { border-top: 0; }
  .service-wide { grid-template-columns: auto auto 1fr; }
  .service-details { grid-column: 2 / -1; }
  .action-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .action-bar .btn-primary { grid-column: 1 / -1; }
  .action-bar .ms-sm-auto { margin-left: 0 !important; }
  .summary-metrics { grid-template-columns: 1fr; }
  .summary-metric { border-left: 0; border-top: 1px solid #e3e6ea; }
  .summary-metric:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}