@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Asap Condensed", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  display: block;
  line-height: 2.3 !important;
  color: #002C4C;
}

.entry-content :where(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 0;
}

.css-19gv2o1-panel-header,
.css-biljvk-panel-title {
  display: block !important;
  -webkit-box-align: center;
  align-items: center;
}

h1 {
  /* font-size: 3rem !important; */
  /* line-height: 1 !important; */
  margin: 0;
  padding: 0;
  margin-top: 0.4rem !important;
}

h2 {
  /* font-size: 1rem !important; */
  /* line-height: 2 !important; */
}

.barcode {
  font-family: 'Libre Barcode 39', cursive;
  font-size: 48px;
}

.select2-container .select2-selection--single {
  height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 34px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: inherit;
  line-height: 38px !important;
}


#summary-wrapper {
  background: #f0f5fa;
  border-radius: 6px;
  border: 1px solid #002c4c;
  position: relative;
  /* width:100% !important; */
}

.order-actions {
  padding: 1rem;
  position: sticky !important;
  top: 30px;
}

div#salesorder-entry-form {
  margin-top: 1rem;
}

/* Order lines (reworked 1.41.0): flex columns with the PRODUCT column taking
   every spare pixel; headers and cells share the same flex bases so the
   columns line up; nothing is clipped at any width. */
#salesorder-entry-form .row {
  display: flex;
  align-items: center;
  column-gap: 10px;
  /* matches the data rows' inline gap */
  justify-content: end;
}

#salesorder-entry-form .row .header {
  flex: 0 0 80px;
  width: auto;
  font-size: 12px;
}

#salesorder-entry-form .row .header.qty,
#salesorder-entry-form .row .header.discount {
  flex-basis: 100px;
}

#salesorder-entry-form .row .header.cancel,
#salesorder-entry-form .row .remove-row {
  flex: 0 0 30px;
}

#salesorder-entry-form .row .header.product {
  flex: 1 1 auto;
  min-width: 220px;
}

/* width:auto!important beats the fixed inline width select2 computes at init
   (width:'resolve'); margin-top:0 cancels the global select2 top margin */
#salesorder-entry-form .row .select2-container {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 220px;
  margin-top: 0;
}

#salesorder-entry-form .row .cell {
  flex: 0 0 80px;
  min-width: 0;
  font-size: 12px;
}

#salesorder-entry-form .row .cell-qty,
#salesorder-entry-form .row .cell-discount {
  flex-basis: 100px;
}

#salesorder-entry-form .row .cell input[type="number"] {
  width: 100%;
  box-sizing: border-box;
}

/* Small screens (1.41.0): each order line stacks into two visual rows -
   product on top, values below, each value with its own mini label (the
   header row is hidden). Lines are boxed so they stay clearly separate.
   1.41.4: breakpoint raised 782 -> 1023 - the single-line desktop layout
   needs ~840px (fixed value columns + gaps + a usable product select), so
   just above 782 the product select was clipped off the edge. */
@media screen and (max-width: 1023px) {

  #salesorder-entry-form .row.header-row {
    display: none;
  }

  #salesorder-entry-form .row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  #productRows .row {
    border: 1px solid rgba(0, 44, 76, 0.25);
    border-radius: 8px;
    margin-bottom: 10px;
  }

  #salesorder-entry-form .row .select2-container {
    flex: 1 1 calc(100% - 42px);
    min-width: 0;
  }

  #salesorder-entry-form .row .cell {
    flex: 1 1 28%;
  }

  #salesorder-entry-form .row .cell::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 2px;
  }
}

/* (1.41.2: the small-screen rules for the Orders TOP section moved to the
   very END of this file - they were placed here in 1.41.1, BEFORE the base
   rules they override, so equal-specificity base rules later in the file
   were winning and the section never stacked.) */

div#order-shipping,
div#order-shipping-options {
  margin-top: 1rem;
  /* column-gap: 10px; */
  /* display: flex; */
}

button {
  padding: 0.6rem 1rem;
}

.hidden,
#order-result.hidden {
  display: none;
}



button.hidden {
  visibility: hidden;
  opacity: 0;
  display: initial;
}


.summary table,
.summary tr,
.summary td {
  border: none;
}

.summary table {
  font-size: 75%;
}

#summary-overlay {
  position: absolute;
  inset: 0;
  background: rgba(200, 200, 200, 0.6);
  backdrop-filter: blur(1px);
  z-index: 10;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* When loading */
#summary-overlay.loading {
  display: block;
  opacity: 1;
}

/* Optional: also visually fade the table */
#summary-table.loading {
  opacity: 0.5;
  filter: grayscale(0.8);
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: none;
}


/* Loader + spinner (unchanged) */
.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
  width: 100%;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(359deg);
  }
}

.spinner-box {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.circle-border {
  width: 50px;
  height: 50px;
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: linear-gradient(0deg,
      rgba(0, 44, 76, 0.1) 33%,
      rgba(0, 44, 76, 1) 100%);
  animation: spin 0.333s linear infinite;
}

.circle-core {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
}

.loader-inline {
  display: flex;
  column-gap: 6px;
  font-size: 90%;
  align-items: center;
  min-height: 40px;
  padding-left: 1rem;
}

.loader-inline .spinner-box {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.loader-inline .circle-border {
  width: 20px;
  height: 20px;
  padding: 1px;
}

.loader-inline p.loader-message {
  margin-bottom: 0;
}




.icon {
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: url(../images/status.svg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 100%;
  /* Blank */
  transition: all 0.2s ease;
  cursor: pointer;
}

.icon.success {
  background-position: 53%;
  /* Green */
}

.icon.success:hover {
  background-position: 0%;
  /* Green */
}


/* Small utilities */
.NetSalesValue,
.UnitCreditNet {
  text-align: right;
  display: table-cell;
}

/* .UnitNet {
  text-align: right;
  padding-right: 45px !important;
} */





#credit-score {
  font-size: 12px;
}

#credit-score span {
  font-weight: 600;
  font-size: 20px;
}

#credit-score span.good {
  color: #60d300;
}

#credit-score span.ok {
  color: #ed9124;
}

#credit-score span.poor {
  color: #e60606;
}

button.whole-order-problem {
  padding: 8px 13px;
  background: #7f7f7f;
}

button.whole-order-problem.clear {
  background: #982323;
}

button.whole-order-problem.clear.cleared {
  background: #bdbdbd;
}

/* make header cells more obvious when you use the header row */



/* Controls layout */
#order-controls,
#controls {
  display: grid;
  grid-template-columns: 50% 50%;
  /* Explicit equal columns */
  gap: 16px;
  /* Shorthand for row + column gap */
  align-items: start;
  /* Prevent tall items from stretching others */
}



.select2-container {
  margin-top: 1rem;
}




/* === Table-like layout (desktop/tablet) === */


/* Header row fix: make header behave like a table-row */




/* Each logical row is a row-group so it can contain visible row + details row */


/* The visible row (table-row) containing the main cells */


select {
  cursor: pointer;
}

/* Cells in the visible row */


/* Header row (when you add a header row with .rma-salesorder-header) */





/* Detail row (hidden by default). When shown becomes a table-row */



/* When parent group is expanded show the details row */



/* Inner content */







#productRows .row {
  padding: 10px;
  font-size: 12px;
}

/* Keep alternating backgrounds only on visible data rows */
#productRows .row:nth-of-type(odd) {
  background-color: #f1f1f1;
}

#productRows .row:nth-of-type(even) {
  background-color: #fafafa;
}


table#order-summary {
  font-size: 12px;
}









/* select.rma-reason{
  width:30rem;
} */








#order-summary-table {
  border-collapse: collapse;
  width: 100%;
  text-align: right;
}

#order-summary-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #e0e0e0;
}

#order-summary-table td:first-child {
  text-align: left;
}

.whole-order-problems {
  text-align: center;
  display: flex;
  justify-content: first baseline;
  padding: 1rem;
  column-gap: 1rem;
}

.whole-order-problems button {
  font-size: 80%;
  color: #fff;
}

button.remove-row {
  padding: 0.35rem;
  line-height: 1;
}

span.trade::before,
span.net::before,
span.subtotal::before,
span.vat::before,
.TaxCreditValue .amount::before {
  content: "£";
  font-size: 75%;
}

#productRows .row .net::before {
  content: "£";
  font-size: 75%;
}

#salesorder-entry-form span.trade::before,
#salesorder-entry-form span.net::before,
#salesorder-entry-form span.subtotal::before,
#salesorder-entry-form span.vat::before,
#salesorder-entry-form {
  content: "";
  display: none;
}

/* .rma-line-net::before {
  content: '£';
  position: absolute;
  left: 0.4em;
  color: #555;
  font-weight: 500;
} */


span.discount:after {
  content: "%";
  font-size: 75%;
}

#salesorder-entry-form span.discount:after {
  content: "";
  display: none;
}

button.remove-row.hidden {
  visibility: hidden;
}

.order-actions {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.order-actions.hidden {
  display: none;
}

.test-mode {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0094ff;
  border: none;
  margin: 0;
  padding: 0.25rem;
  color: #fff;
  font-family: "Asap Condensed", sans-serif !important;
  font-weight: 700 !important;
}





/* Instantly show/hide line action items (no fade) */
.action-wrapper,
.creditpercent,
.UnitCreditNet .amount,
.NetCreditValue .amount,
.TaxCreditValue .amount {
  transition: none !important;
}



option[data-js-only="true"] {
  display: none;
  /* Hides option in select field but it shows when selected by JS*/
}


.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: px;
}







select.address-select {
  font-size: 80%;
}

ul#select2-address-select-results,
span#select2-address-select-container {
  font-size: 75%;
}

ul#select2-address-select-results li:nth-of-type(odd) {
  background-color: #f1f1f1;
}

ul#select2-address-select-results li:nth-of-type(even) {
  background-color: #fafafa;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  /* background-color: #5897fb !important; */
  background-color: #002c4c !important;
  color: white;
}

li.select2-results__option,
span#select2-shipping_method_select-container {
  font-size: 12px;
}

table#customer-summary-table {
  font-size: 12px;
  margin-top: 1rem;
  border: none;
}

table#customer-summary-table tr td {
  padding: 2px 2px 2px 4px;
  border: none;
}

table#customer-summary-table tr:nth-of-type(odd) {
  background-color: #f1f1f1;
}

table#customer-summary-table tr:nth-of-type(even) {
  background-color: #fafafa;
}

div#ipc-search-container {
  position: relative;
}

/* Container for the autocomplete dropdown */
#address-suggestions {
  position: absolute;
  /* so it overlays nicely below input */
  z-index: 9999;
  /* above other elements */
  width: 100%;
  /* match the input width */
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  /* scrollable if too tall */
  overflow-y: auto;
  margin-top: 2px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/* List styles */
#address-suggestions ul.ipc-address-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Individual options */
#address-suggestions li.ipc-address {
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover effect (like Select2) */
#address-suggestions li.ipc-address:hover,
#address-suggestions li.ipc-address.selected {
  background-color: #002c4c;
  color: #fff;
}

/* Optional: add a subtle transition on hover */
#address-suggestions li.ipc-address {
  transition: background-color 0.1s ease;
}


/* span.van-option {
  background-image: url(../images/status.svg);
  background-repeat: no-repeat;
  background-size: auto 1rem;
  background-position: 0pm 0pm;
  padding-left:1.5rem
} */

button#collection {
  margin-left: 1rem;
}

.van-container {
  display: inline-block;
  width: 2rem;
  align-items: center;
  position: absolute;
  padding: 4px;
}

span.van-option {
  display: inline-block;
  padding-left: 2.4rem;
}

svg.van {
  width: 100%;
}

.select2-results__option--highlighted svg.van path {
  fill: #fff;
}



.delivery-collection button {
  position: relative;
}

/* Base checkmark positioning */
.delivery-collection button svg.checkmark {
  position: absolute;
  right: -10px;
  top: -10px;
  transform: translateY(-50%);
  height: 24px;
  width: 24px;
  display: none;
}

/* When selected */
.delivery-collection button.selected .checkmark {
  display: block;
  border-radius: 50%;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #bcce00;
  animation: fill 0.4s ease-in-out 0.4s forwards,
    scale 0.3s ease-in-out 0.9s both;
}

.delivery-collection button.selected .checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.delivery-collection button.selected .checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

/* Animations (unchanged) */
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {

  0%,
  100% {
    transform: none;
  }

  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

button {
  transition: all 0.2s ease;
}

button#submit-order {
  background-color: #5eb51a;
}

button#submit-order:hover,
button#submit-order:active {
  background-color: #468814;
}

button#clear-order {
  font-size: 11px;
  background: #a40000;
}

button#clear-order:hover,
button#clear-order:active {
  background: #7c0000;
}

button#get-delivery-options {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 12px;
  background: #336dc8;
}

div#shipping-options-container {
  margin-top: 1rem;
}

.summary {
  width: calc(100% - 1rem);
}

div#shipping-options-container .description .dispatch,
div#shipping-options-container .description .delivery {
  font-size: 10px;
  font-style: italic;
  font-weight: bold;
  line-height: 1;
}

.pp-user-warning {
  text-align: center;
  background: #a80000;
  padding: 1rem;
  color: #fff;
}





.notice.on-hold {
  font-size: 90%;
  font-style: italic;
}

.site-branding.ast-site-identity {
  display: flex;
  align-items: center;
  column-gap: 12px;
}

.company-logo {
  width: 250px;
  height: 60px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  display: inline-block;
}

.pp-home-wrapper {
  padding-top: 2rem;
}

canvas#timeline_northhdrop {
  margin-bottom: 2rem;
}


.hide {
  display: none;
}

.view {
  margin-top: 20px;
}

.carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.carousel .card,
.method-card .method {
  min-width: 180px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.method-card {
  margin-top: 10px;
}

.method-card.hide {
  display: none;
}



/* Carousel container */
#delivery-date-carousel {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 16px;
  padding: 8px 0;
  padding-right: 1px;
}

/* Hide scrollbar but still scrollable */
#delivery-date-carousel::-webkit-scrollbar {
  display: none;
}

#delivery-date-carousel {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Each delivery date card */
.delivery-date-option {
  flex: 0 0 calc(33.333% - 12px);
  /* 4 cards per view, minus gap */
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  /* text-align: center; */
  min-width: 200px;
  /* fallback width */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.delivery-date-option:hover {
  transform: translateY(-4px);
}

/* Shipping option inside each card */
.shipping-option {
  margin-top: 8px;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.shipping-option:hover {
  background: #e2e2e2;
  border-color: #819f75;
  cursor: pointer;
  /* color: #fff; */
}

.shipping-option p.shipping-code {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.shipping-option p.dispatch-date {
  color: inherit;
  font-size: 75%;
  font-style: italic;
}

p.spend-more {
  font-style: italic;
  font-size: 75%;
  font-weight: bold;
  margin-top: 10px;
}


.shipping-option h4 {
  display: flex;
  justify-content: space-between;
  line-height: 1 !important;
  font-size: 1rem;
  ;
}

.shipping-option p {
  line-height: 1;
  margin-bottom: 0;
}

#chosen-shipping span.discount:after {
  content: "";
}

#chosen-shipping span.fullprice::before{
  content: "Full Price £";
}
#chosen-shipping span.discount::before{
  content: "Discount ";
}
#chosen-shipping span.price::before {
  content: "Price £";
}



/* Carousel nav buttons (keep existing) */
.carousel-nav {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}

.carousel-nav button {
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: bold;
}

.carousel-nav button:hover {
  background: #005177;
}

/* Carousel container */
#delivery-date-carousel {
  display: flex;
  /* horizontal layout */
  overflow-x: auto;
  /* enable horizontal scrolling */
  scroll-behavior: smooth;
  /* smooth scrolling when clicking buttons */
  gap: 10px;
  /* spacing between cards */
  padding-bottom: 4px;
  /* optional, prevent scrollbar overlap */
}

/* Individual cards */
.delivery-date-option {
  flex: 0 0 calc((100% / 3) - 6.666px);
  /* 3 cards per view minus gap */
  box-sizing: border-box;
  /* include padding/border in width */
}


.shipping-option.van {
  background-color: #fffab9;
}

.shipping-option.van h4 {
  position: relative;
  padding-left: 25px;
}

.shipping-option.van h4::before {
  position: absolute;
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  left: 0;
  background-image: url(../images/van.svg);
  background-repeat: no-repeat;
}



.shipping-summary-icons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: space-around;
  margin: 1rem 0;
  border: 1px solid #ccc;
  padding: 1rem 0rem 0.9rem;
  border-radius: 4px;
}

.shipping-summary-icons.hidden,
#chosen-shipping.hidden,
button#change_shipping.hidden {
  display: none;
}

.shipping-summary-icons span {
  min-width: 24px;
  font-size: 85%;
  /* background-color: #e2e2e2; */
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: top;
  padding: 20px 0 0;
}


.shipping-summary-icons span.icon-postcode {
  background-image: url(../images/location.svg);
}

.shipping-summary-icons span.icon-address-type {
  background-image: url(../images/shop.svg);
}

.shipping-summary-icons span.icon-address-type.residential {
  background-image: url(../images/house.svg);
}

.shipping-summary-icons span.icon-van,
div#chosen-shipping .code.peregrine-van::before {
  background-image: url(../images/van.svg);
}

.shipping-summary-icons span.icon-weight {
  background-image: url(../images/weight.svg);
}

.shipping-summary-icons span.icon-max-dimension {
  background-image: url(../images/size.svg);
}

.shipping-summary-icons span.icon-animal {
  background-image: url(../images/frog.svg);
}

.shipping-summary-icons span.icon-frozen {
  background-image: url(../images/frozen.svg);
}

.shipping-summary-icons span.icon-livefood {
  background-image: url(../images/cricket.svg);
}

.shipping-summary-icons span.icon-hazardous {
  background-image: url(../images/hazardous.svg);
}

h3.delivery-date sup {
  font-size: 14px;
}



div#chosen-shipping {
  display: flex;
  justify-content: space-around;
  border: 1px solid #ccc;
  border-radius: 6px;
  align-items: center;
  margin: 1rem 0;
  padding: 1rem 0;
}

div#chosen-shipping .code::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 8px;
  background-position: center;
  margin-bottom: -4px;
}


.shipping-option h4.shipping-method {
  background-repeat: no-repeat;
  background-size: auto 1rem;
  background-position: left;
  margin-bottom: 5px;
  padding-left: 28px;
}

.shipping-option.apc h4.shipping-method,
div#chosen-shipping .code.apc::before {
  background-image: url(../images/apc.png);
}

.shipping-option.royal-mail h4.shipping-method,
div#chosen-shipping .code.royal-mail::before {
  background-image: url(../images/rm.svg);
}

.shipping-option.kings h4.shipping-method,
div#chosen-shipping .code.kings::before {
  background-image: url(../images/kings.png);
}

.shipping-option.dx h4.shipping-method,
div#chosen-shipping .code.dx::before {
  background-image: url(../images/dx.png);
}

span.discount {
  display: inline-flex;
  align-items: center;
  column-gap: 5px;
}

p.no-delivery-options {
  text-align: center;
  background: #9f0000;
  padding: 1rem;
  color: #fff;
  border-radius: 4px;
}

div#order-result {
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 2rem; */
  border-radius: 4px;
}

div#order-result .notice {
  padding: 0;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  font-size: 90%;
}

div#order-result .notice.success {
  border-left: 4px solid #39d939;
}

div#order-result .notice.error {
  border-left: 4px solid #a40100;
}

div#order-result p {
  margin-bottom: 0;
}

input#po_number {
  font-size: 0.75rem;
  height: auto;
  padding: 3px 6px;
  margin: 5px -3px;
}





#salesorder-load-save-container {
  display: flex;
  gap: 10px;
  /* space between the two main blocks */
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
}

#load-salesorder-container {
  width: 75%;
  height: 40px;
}

#salesorder-save-buttons {
  width: 25%;
  display: flex;
  gap: 10px;
  /* space between buttons */
}

#salesorder-save-buttons button {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  font-size: 10px;
  padding: 4px;
}

#salesorder-save-buttons button.disabled {
  background: #ccc;
  cursor: not-allowed;
}



div#order-notices {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 1rem;
  padding: 1rem;
  background: #f0f5fa;
}

div#order-notices.hidden {
  display: none;
}

div#order-notices .order-warning {
  display: list-item;
  margin-left: 1.5rem;
}

div#order-shipping-options-container {
  /* display: flex;
    justify-content: space-between; */
}

.delivery-collection {
  display: flex;
  justify-content: end;
  padding: 1rem;
}

span.no-saved-orders {
  border: 1px solid #ccc;
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0.75rem;
  font-size: 80%;
  border-radius: 4px;
}


.add-new-address {
  font-size: 12px;
  font-weight: 600;
  line-height: 2;
  display: block;
  padding: 4px 14px 4px 27px;
  color: #0794ee;
  background-color: #f7f7f7;
  border-radius: 4px;
  background-image: url(../images/location-blue.svg);
  background-repeat: no-repeat;
  background-position: 7px center;
  background-size: auto 22px;
}

/* Also expand the containing <li> if Select2 is using one */
.select2-results__option.add-new-address {
  min-height: auto !important;
  /* allow height to grow with content */
  white-space: normal !important;
  /* allow line wrapping */
}


/* =========================================================
   Paste order lines (since 1.3.0)
   ========================================================= */

/* PDF support notice inside the bulk-add panel (1.41.0) */
.paste-order-pdf-note {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FDF0DD;
  border-left: 3px solid #FFA933;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
}

.paste-order-pdf-note svg.pp-pdf-icon {
  flex: 0 0 36px;
}

#paste-order-bar {
  margin: 0.5rem 0;
}

button#paste-order-toggle {
  background: #336dc8;
  color: #fff;
  font-size: 12px;
  padding: 0.5rem 0.75rem;
}

button#paste-order-toggle:hover,
button#paste-order-toggle:active {
  background: #27529a;
}

#paste-order-panel {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f0f5fa;
  padding: 1rem;
  margin-bottom: 1rem;
}

#paste-order-panel.hidden {
  display: none;
}

.paste-order-hint {
  font-size: 12px;
  margin: 0 0 0.5rem;
}

#paste-order-pdf-drop {
  border: 2px dashed #9db8d8;
  border-radius: 6px;
  background: #fff;
  padding: 1rem;
  text-align: center;
  font-size: 13px;
  color: #555;
  margin-bottom: 0.5rem;
  transition: all 0.15s ease;
}

#paste-order-pdf-drop.dragover {
  border-color: #336dc8;
  background: #e8f0fb;
}

#paste-order-pdf-drop label.paste-pdf-browse {
  color: #336dc8;
  text-decoration: underline;
  cursor: pointer;
}

#paste-order-pdf-drop input[type="file"] {
  display: none;
}

#paste-order-pdf-status {
  font-size: 12px;
  color: #555;
  min-height: 1em;
  margin-bottom: 0.5rem;
}

#paste-order-pdf-status.error {
  color: #a40000;
}

textarea#paste-order-input {
  width: 100%;
  box-sizing: border-box;
  font-family: monospace;
  font-size: 12px;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.paste-order-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

button#paste-order-parse {
  background: #336dc8;
  color: #fff;
  font-size: 12px;
  padding: 0.5rem 0.75rem;
}

button#paste-order-cancel {
  background: #a40000;
  color: #fff;
  font-size: 11px;
  padding: 0.5rem 0.75rem;
}

#paste-order-review {
  margin-top: 1rem;
}

table#paste-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}

table#paste-review-table th,
table#paste-review-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  vertical-align: middle;
}

tr.paste-group-row td {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 0.6rem;
  border-bottom: 2px solid #ccc;
}

button.paste-remove-group {
  float: right;
  background: #a40000;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}

button.paste-remove-group:hover,
button.paste-remove-group:active {
  background: #7c0000;
}

tr.paste-group-row.ok td {
  background: #eef7e6;
  color: #468814;
}

tr.paste-group-row.warn td {
  background: #fdf6e3;
  color: #b07d00;
}

tr.paste-group-row.bad td {
  background: #fbeaea;
  color: #a40000;
}

input.paste-qty.paste-qty-check {
  border: 2px solid #b07d00;
  background: #fdf6e3;
}

.paste-status {
  white-space: nowrap;
  font-weight: 600;
}

.paste-status.ok {
  color: #468814;
}

.paste-status.warn {
  color: #b07d00;
}

.paste-status.bad {
  color: #a40000;
}

.paste-raw {
  color: #777;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.paste-code-fixed {
  font-family: monospace;
  font-weight: 600;
}

select.paste-code-select {
  max-width: 280px;
}

#paste-order-review .select2-container {
  max-width: 280px;
}

.paste-stock {
  color: #777;
}

input.paste-qty {
  width: 90px;
}

.paste-qty-assumed {
  font-size: 10px;
  color: #b07d00;
  margin-left: 0.25rem;
}

button.paste-remove {
  background: none;
  border: none;
  color: #a40000;
  font-size: 16px;
  cursor: pointer;
  padding: 0 0.25rem;
}

.paste-review-footer {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

button#paste-order-add {
  background: #5eb51a;
  color: #fff;
}

button#paste-order-add:hover:not(:disabled),
button#paste-order-add:active:not(:disabled) {
  background: #468814;
}

button#paste-order-add:disabled {
  background: #9fc983;
  cursor: not-allowed;
}

.paste-review-summary {
  font-size: 12px;
  color: #555;
}

/* While lines are being added, the panel shows ONLY the progress bar */
#paste-order-panel.paste-adding .paste-order-hint,
#paste-order-panel.paste-adding #paste-order-pdf-drop,
#paste-order-panel.paste-adding #paste-order-pdf-status,
#paste-order-panel.paste-adding textarea#paste-order-input,
#paste-order-panel.paste-adding .paste-order-actions,
#paste-order-panel.paste-adding table#paste-review-table,
#paste-order-panel.paste-adding details.paste-ignored {
  display: none;
}

.paste-progress {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.paste-progress-track {
  flex: 1;
  height: 14px;
  background: #e0e0e0;
  border-radius: 7px;
  overflow: hidden;
}

.paste-progress-fill {
  height: 100%;
  width: 0;
  background: #5eb51a;
  border-radius: 7px;
  transition: width 0.15s ease;
}

.paste-progress-text {
  font-size: 12px;
  color: #555;
  white-space: nowrap;
}

details.paste-ignored {
  margin-top: 0.75rem;
  font-size: 12px;
  color: #777;
}

details.paste-ignored ul {
  margin: 0.25rem 0 0 1.5rem;
}
/* ============================================================================
   Small screens (1.41.2, KEEP AT THE END OF THIS FILE): the Orders TOP
   section stacks into ONE column. These override equal-specificity base
   rules above (50/50 controls grid, 75/25 load-save split, summary width),
   so source order matters - anything appended below this block that touches
   the same selectors will beat it on small screens.
   1.41.4: breakpoint raised 782 -> 1023 to match the order-line stacking -
   two 50% columns are too cramped below ~1024px.
   ========================================================================= */
@media screen and (max-width: 1023px) {

  #order-controls {
    grid-template-columns: 100%;
  }

  .summary {
    width: 100%;
  }

  /* saved-orders picker above, the two save buttons side by side below */
  #salesorder-load-save-container {
    flex-wrap: wrap;
  }

  #load-salesorder-container,
  #salesorder-save-buttons {
    width: 100%;
  }

  #salesorder-save-buttons button {
    font-size: 12px;
    padding: 8px 6px;
  }

  /* summary card: label above the figures, figures use the full width */
  #order-summary-table>tbody>tr>td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  #order-summary-table table#order-summary {
    width: 100%;
  }

  /* sticky panels mid-flow just get in the way on a phone */
  .order-actions {
    position: static !important;
  }

  .delivery-collection {
    padding: 1rem 0;
    gap: 10px;
  }

  .delivery-collection button {
    flex: 1 1 auto;
  }
}

/* 1.41.3 + 1.41.5: the order summary panel fills its grid column at ALL
   widths and can never overflow it. The outer table is flattened to block
   flow (label above the figures) and the figures table uses FIXED layout
   with equal columns - auto table layout around a nested percentage-width
   table overflowed the panel as soon as real values replaced the '...'
   placeholders. Direct-child selectors keep the nested table's own cells
   as real table cells. */
.summary #summary-wrapper {
  width: 100%;
  box-sizing: border-box;
}

#order-summary-table,
#order-summary-table>tbody,
#order-summary-table>tbody>tr,
#order-summary-table>tbody>tr>td {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.summary table#order-summary {
  width: 100%;
  table-layout: fixed;
}

/* 1.41.4: the saved-order picker's select2 keeps the fixed pixel width it
   computed at init, so it spilled off phone screens and sat OVER the two
   save buttons on mid-size screens (~783-1660px). Pin it to its container
   at every width. */
#load-salesorder-container .select2-container {
  width: 100% !important;
  min-width: 0;
}

/* 1.41.4: the saved-order picker + save buttons flow instead of a rigid
   75/25 split - side by side when there is room, buttons dropping to their
   own full-width line when there is not (mid-size screens starved them). */
#salesorder-load-save-container {
  flex-wrap: wrap;
}

#load-salesorder-container {
  flex: 1 1 300px;
  width: auto;
}

#salesorder-save-buttons {
  flex: 1 1 220px;
  width: auto;
  min-width: 220px;
}

#salesorder-save-buttons button {
  font-size: 12px;
  padding: 8px 6px;
  white-space: nowrap;
}

/* Collection date picker (1.43.0) */
#collection-date-picker h4 {
  margin: 1rem 0 0.25rem;
}

.collection-date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collection-date-chip {
  background: #fff;
  border: 1px solid rgba(0, 44, 76, 0.35);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #002c4c;
  cursor: pointer;
}

.collection-date-chip:hover {
  border-color: #002c4c;
}

.collection-date-chip.selected {
  background: #002c4c;
  border-color: #002c4c;
  color: #fff;
  font-weight: 600;
}

/* 1.50.0: edit-template flow - draw the eye to Save changes */
#update-order.pp-edit-highlight {
  outline: 3px solid #BBCE00;
  outline-offset: 1px;
}

div#order-notices .order-template-notice {
  padding: 0;
}