/* =========================================
   TVC – custom overrides for NetTalk / jQuery-UI
   ========================================= */

/* Brand colour (if you ever want to use CSS vars) */
:root {
  --cnvs-themecolor: #001aff;
  --cnvs-themecolor-rgb: 0, 26, 255;
}

/* Limit accordion height a bit so it doesn’t run off screen */
.ui-accordion-content {
    max-height: 600px;
}

/* create size for prompts */
.nt-form-flex-cell-prompt, .nt-form-grid-cell-prompt {
        max-width: 36em;
    }
	
	
	

/* Browse row tweaks – fix typo on flex-wrap */
.nt-browse-flex-row {
    display: flex;
    flex-wrap: wrap;          /* <- the old file had “wrap;d” */
    flex-direction: column;
    border: 0px solid #00EE00;
    align-items: flex-start;
}

/* =========================================
   Freight highlights
   ========================================= */

.tvc-freight-required-info {
    background-color: #ffcccc;
}

.tvc-freight-totals {
    font-size: 1.2em;
    font-weight: bold;
	border: 1px solid #444;  /* dark grey solid border */
    margin: 0;               /* no outside margin */
}


.tvc-freight-amount {
    font-size: 1.2em;
    font-weight: bold;
}

.freight_total { 
    font-size: 150%; 
    font-weight: bold;
}

/* Prompts: left-align labels globally */
.nt-prompt {
    text-align: left;
}



/* =========================================
   Transport method cards (ord__tranmeth_isn)
   ========================================= */

/* Container with the two/three options */
#ord__tranmeth_isn {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
}

/* Hide the default jQuery-UI radio visuals */
#ord__tranmeth_isn .ui-checkboxradio-icon,
#ord__tranmeth_isn .ui-checkboxradio-icon-space {
    display: none;
}

/* Each option “card” */
#ord__tranmeth_isn > label.nt-flex {
    display: flex;
    flex-direction: column;    /* stack lines vertically */
    align-items: flex-start;   /* left edge inside card */
    text-align: left;
    padding: 0.75rem 1rem;
    gap: 0.2rem;
    cursor: pointer;
    border: 1px solid #ccc;
    min-width: 12rem;
    max-width: 18rem;
    box-sizing: border-box;
}

/* Make sure the main heading always forces a new line */
#ord__tranmeth_isn > label.nt-flex strong {
    display: block;
}

/* Hide the native radios but keep them accessible */
#ord__tranmeth_isn input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Simple icon before the label (○ / ✓) */
#ord__tranmeth_isn > label.nt-flex::before {
    content: "○";
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}

/* When checked, switch to ✓ */
#ord__tranmeth_isn input[type="radio"]:checked + label.nt-flex::before {
    content: "✓";
    font-weight: bold;
}

/* Extra text helpers (if you use the span classes) */
.tvc_tranmeth_container {
    display: inline-block;
}
.tvc_tranmeth_amount {
    font-weight: bold;
    font-size: 1.4rem;
    display: block;
}
.tvc_tranmeth_header {
    font-weight: bold;
    font-size: 1rem;
    display: block;
}
.tvc_tranmeth_line {
    font-size: 1rem;
    display: block;
}



/* jQuery UI modal stacking fix */
.ui-widget-overlay.ui-front{
  z-index: 10000 !important;
}

.ui-dialog.ui-front{
  z-index: 10001 !important;
}

/* In case something else is creating a click-shield 
.ui-dialog,
.ui-dialog *{
  pointer-events: auto;
}

*/


/* MOBILE: stack prompt above value so it can't overlap */
@media (max-width: 768px) {

  /* each row becomes a simple vertical stack */
  .nt-form-grid-row > .nt-form-grid-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* prompt should take normal space, not float/overlap */
  .nt-form-grid-cell .nt-prompt {
    position: static !important;
    width: 100% !important;
    margin: 0 0 .35rem 0 !important;
  }

  /* value should also be normal flow + full width */
  .nt-form-grid-cell .nt-form-value,
  .nt-form-grid-cell .nt-form-value-ntformcell,
  .nt-form-grid-cell .nt-form-last-in-cell {
    position: static !important;
    width: 100% !important;
  }

  /* inputs full width */
  .nt-form-grid-cell input.nt-entry,
  .nt-form-grid-cell select.nt-entry,
  .nt-form-grid-cell textarea.nt-entry {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) {

  /* stop shrink-wrapping rows */
  .nt-browse-grid-row,
  .nt-browse-row-data {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* if the browse container is also shrink-wrapping */
  .nt-browse,
  .nt-browse-body,
  .nt-browse-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* KEEP this (it prevents overflow in flex/grid children) */
  .nt-browse-row-data,
  .nt-browse-row-data * {
    min-width: 0 !important;
  }
}


/* Replace icons with + / - 
.ui-spinner-up .ui-icon {
  background-image: none !important;
}
.ui-spinner-up .ui-icon::before {
  content: "+";
  font-size: 1.4rem;
  font-weight: bold;
}

.ui-spinner-down .ui-icon {
  background-image: none !important;
}
.ui-spinner-down .ui-icon::before {
  content: "−";
  font-size: 1.4rem;
  font-weight: bold;
}

@media (max-width: 768px) {
  .ui-spinner {
    max-width: 100%;
  }

  .ui-spinner-button {
    min-height: 3rem;
    font-size: 1.4rem;
  }
}
*/

/* =========================================================
   TVC Bottles Spinner (jQuery UI) – left (-) | input | right (+)
   - Buttons fixed width
   - Input expands
   - Minimum width = button * 3
   - Works on mobile + desktop
   Target: #orderfreight_ord__chkin_amt_bottles_value_div
   ========================================================= */

#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner {
  --tvc-spin-btn: 44px;
  --tvc-spin-h: 48px;

  position: relative !important;
  display: block !important;

  height: var(--tvc-spin-h) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: calc(var(--tvc-spin-btn) * 3) !important;

  box-sizing: border-box !important;
  overflow: hidden !important;

  border: 1px solid #2a4f7a !important;
  border-radius: 2px !important;
  background: #ffffff !important;
}

/* INPUT: fill full width, but leave space for left & right buttons */
#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner-input,
#orderfreight_ord__chkin_amt_bottles_value_div input#ord__chkin_amt_bottles {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 100% !important;
  line-height: var(--tvc-spin-h) !important;

  margin: 0 !important;

  /* space for the two buttons */
  padding-left: calc(var(--tvc-spin-btn) + 8px) !important;
  padding-right: calc(var(--tvc-spin-btn) + 8px) !important;

  border: 0 !important;
  background: transparent !important;

  text-align: center !important;
  box-sizing: border-box !important;
}

/* BUTTONS: force visible & clickable */
#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner a.ui-spinner-button {
  position: absolute !important;
  top: 0 !important;

  width: var(--tvc-spin-btn) !important;
  height: 100% !important;

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

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  visibility: visible !important;
  opacity: 1 !important;

  background: #e8eef6 !important;
  border: 0 !important;

  z-index: 3 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

/* LEFT = down (we use it as minus) */
#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner a.ui-spinner-down {
  left: 0 !important;
  right: auto !important;
  border-right: 1px solid rgba(0,0,0,.15) !important;
}

/* RIGHT = up (we use it as plus) */
#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner a.ui-spinner-up {
  right: 0 !important;
  left: auto !important;
  border-left: 1px solid rgba(0,0,0,.15) !important;
}

/* Remove the jQuery UI spacer */
#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner .ui-button-icon-space {
  display: none !important;
}

/* Replace the jQuery UI triangle icons with text + / - */
#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner .ui-button-icon,
#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner .ui-icon {
  background-image: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

/* Put symbols on the INNER icon span (most reliable) */
#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner a.ui-spinner-down .ui-button-icon::before,
#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner a.ui-spinner-down .ui-icon::before {
  content: "−";
  font-size: 20px;
  font-weight: 700;
  color: #1f2b3a;
}

#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner a.ui-spinner-up .ui-button-icon::before,
#orderfreight_ord__chkin_amt_bottles_value_div .ui-spinner a.ui-spinner-up .ui-icon::before {
  content: "+";
  font-size: 20px;
  font-weight: 700;
  color: #1f2b3a;
}

/* =========================================
   Fix jQuery UI dialog CLOSE button sizing
   (stable square, centered vertically)
   ========================================= */

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute !important;

  /* lock size */
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;

  /* anchor + center vertically */
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%) !important;

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

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 4px !important;
  box-sizing: border-box !important;

  background: #e66b6b !important;                 /* your red */
  border: 1px solid rgba(0,0,0,.15) !important;
}

/* keep the X centered and consistent */
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  position: static !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

/* remove spacer + any text artifacts */
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none !important;
}
.ui-dialog .ui-dialog-titlebar-close::after {
  display: none !important;
  content: "" !important;
}

/* =========================================
   Dialog CLOSE button – force clean X icon
   ========================================= */

/* Remove jQuery UI sprite behaviour */
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  background-image: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

/* Draw a real X */
.ui-dialog .ui-dialog-titlebar-close .ui-icon::before {
  content: "×";
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;   /* white X on red button */
}

/* Ensure icon is perfectly centered */
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}


/* Emphasised readable field – scales with screen size */
.tvc-emphasis {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.45;
}

.tvc-emphasis-lg {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.5;
}

/* =========================================
   TVC Responsive Form Scaling
   Keeps desktop compact, improves usability on tablets/phones
   Place near the end of custom CSS
   ========================================= */

/* Desktop default */
:root {
  --entry-height: 2.7em;
  --input-font-size: 1rem;
  --tvc-form-row-mb: 0.75rem;
}

/* Tablets */
@media (max-width: 1024px) {
  :root {
    --entry-height: 3.0em;
    --input-font-size: 1.05rem;
    --tvc-form-row-mb: 0.85rem;
  }
}

/* Phones */
@media (max-width: 768px) {
  :root {
    --entry-height: 3.3em;
    --input-font-size: 1.1rem;
    --tvc-form-row-mb: 1rem;
  }

  /* Make prompts slightly larger and easier to read */
  .nt-prompt {
    font-size: 1.05em;
  }
}


/* =========================================================
   Responsive visibility helpers
   ========================================================= */

/* Hide when screen is small (phones) */
@media (max-width: 640px) {
  .tvc-hide-sm {
    display: none !important;
  }
}

/* Optional: hide on medium+small (tablets & phones) */
@media (max-width: 900px) {
  .tvc-hide-md {
    display: none !important;
  }
}

/* Optional: show ONLY on small screens */
.tvc-show-sm {
  display: none !important;
}
@media (max-width: 640px) {
  .tvc-show-sm {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .nt-browse-row-data > .nt-browse-grid-cell.tvc-hide-sm,
  .nt-browse-row-header > .nt-browse-grid-cell.tvc-hide-sm {
    display: none !important;
  }
}


/* =========================================================
   FIX: Browse "Menu" dropdown must appear BELOW the button,
   not inside its border, and must not be clipped.
   ========================================================= */
@media (max-width: 767px) {

  /* The menu container must be able to "let the dropdown out" */
  .nt-browse-menu,
  .nt-browse-menu > li,
  .nt-browse-menu .ui-menu-item,
  .nt-browse-menu .ui-menu-item-wrapper{
    position: relative !important;
    overflow: visible !important;
  }

  /* Also ensure the browse cell doesn't clip */
  .nt-browse-grid-cell:has(.nt-browse-menu),
  .nt-browse-cell:has(.nt-browse-menu){
    overflow: visible !important;
  }

  /* The dropdown list itself */
  .nt-browse-menu .nt-menu-items.ui-menu{
    position: absolute !important;
    top: 100% !important;          /* start at bottom edge of the button */
    margin-top: 6px !important;     /* push it below the border */
    left: 0 !important;
    right: 0 !important;
    width: auto !important;

    max-height: 60vh !important;
    overflow-y: auto !important;

    z-index: 10060 !important;
  }
}


.big-panels {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    margin: 15px 0;
}

/* Side by side on wider screens */
@media (min-width: 800px) {
    .big-panels {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Panel styling */
.big-panel {
    display: block;
    padding: 20px;
    background: #e8edf5;   /* button color */
    border-radius: 8px;
    text-decoration: none; /* removes underline */
    color: #000;           /* normal text color */
    border: 1px solid #c5ceda;
    transition: background 0.15s, transform 0.1s;
}

/* Hover effect */
.big-panel:hover {
    background: #d8e2f0;
    transform: translateY(-2px);
}

/* Title */
.panel-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
}

/* Description */
.panel-text {
    font-size: 14px;
    opacity: 0.9;
}