select.custom-field-select{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}.custom-field-group .component-card{
  border: 1px solid #e7e9ee;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}.custom-field-group .component-card.selected{
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}.custom-field-group .component-option-img img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}#pc-builder-custom-field-table .table{ margin-bottom: 16px; }#pc-builder-custom-field-table .builder-thumb{ max-width: 64px; height: auto; border-radius: 6px; }@media (max-width: 768px){#pc-builder-custom-field-table .table thead{ display: none; }#pc-builder-custom-field-table .table,
  #pc-builder-custom-field-table .table tbody,
  #pc-builder-custom-field-table .table tr,
  #pc-builder-custom-field-table .table td{ display: block; width: 100%; }#pc-builder-custom-field-table .table tr{
    background: #fff;
    border: 1px solid #e7e9ee;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
  }#pc-builder-custom-field-table .table td{
    padding: 6px 0 !important;
    border: 0 !important;
  }#pc-builder-custom-field-table .selection-container .preset-selected-value{
    display: block;
    padding: 8px 10px;
    background: #f5f7fb;
    border: 1px solid #e7e9ee;
    border-radius: 8px;
  }}.compatibility-message{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 13px;
}#compatibility-summary.alert{ border-radius: 12px; }#pc-builder-footer{
  position: static;
  bottom: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid #e7e9ee;
  padding: 12px 16px;
}
.selection-cell-inner { display: flex; flex-direction: column; gap: 6px; }
.selection-row-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.selection-row-tools .pcb-status { font-size: 12px; }
.selection-row-tools .pcb-status.ok { color: #2e7d32; }
.selection-row-tools .pcb-status.missing { color: #e65100; }
.selection-row-tools .pcb-quickview { font-size: 12px; text-decoration: underline; cursor: pointer; }
.selection-row-tools .pcb-clear { padding: 2px 6px; }
@media (max-width: 768px){#pc-builder-footer .btn{ width: 100%; margin-top: 8px; }}@media print{#pc-builder-footer,
  #button-save-build,
  #button-capture,
  #button-print,
  #button-review{ display: none !important; }.custom-field-group .component-card{ break-inside: avoid; }}.table.table-fixed thead th{ vertical-align: middle; }.table.table-fixed .thumb-container{ width: 96px !important; }.table.table-fixed .price-container{ width: 120px !important; text-align: right; }.table.table-fixed tbody td img[id^="custom-field-image"]{
  max-width: 120px; max-height: 120px; width: auto; height: auto; display: block; margin: 0 auto;
}.selection-cell-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;                /* merged (was 6px then 8/12px) */
  align-items: center;
}.selection-row-tools .pcb-status.ok{ color: #2e7d32; }.selection-row-tools .pcb-status.missing{ color: #e65100; }.pcb-fixedbar{ position: fixed; left: 0; right:0; bottom: 0; z-index: 9999; background: rgba(255,255,255,.96); border-top: 1px solid rgba(0,0,0,.1); box-shadow: 0 -2px 10px rgba(0,0,0,.06); }.pcb-fixedbar.hidden{ display: none; }.pcb-fixedbar .pcb-fixedbar-inner{ max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }.pcb-fixedbar .pcb-total{ font-size: 16px; }.pcb-fixedbar .pcb-total .pcb-total-label{ opacity: .75; margin-right: 6px; }#pc-builder-container .form-group{ margin-bottom: 12px; }#pc-builder-container .control-label{ padding-top: 8px; }@media (max-width: 767px){.table.table-fixed thead{ display: none; }.table.table-fixed,
  .table.table-fixed tbody,
  .table.table-fixed tr,
  .table.table-fixed td{ display: block; width: 100%; }.table.table-fixed tbody td{ padding: 6px 10px; }.table.table-fixed tbody td:last-child{ border-bottom: 1px solid rgba(0,0,0,.06); }.table.table-fixed .price-container{ text-align: left !important; }}#pc-builder-custom-field-table .table-fixed thead th.component-col{ width: 16%; white-space: nowrap; }#pc-builder-custom-field-table .table-fixed thead th.thumb-col{ width: 96px; }#pc-builder-custom-field-table .table-fixed thead th.selection-col{ width: auto; }#pc-builder-custom-field-table .table-fixed thead th.price-col{ width: 120px; text-align: right; }#pc-builder-custom-field-table .component-col-td{ width: 16%; vertical-align: middle; }#pc-builder-custom-field-table .thumb-col-td{ width: 96px; vertical-align: middle; overflow: hidden; }#pc-builder-custom-field-table .selection-col-td{ width: auto; }#pc-builder-custom-field-table .price-col-td{ width: 120px; text-align: right; vertical-align: middle; }#pc-builder-custom-field-table .thumb-col-td img{
  max-width: 92px; width: 92px; height: auto; display: inline-block; border-radius: 6px;
}.component-option-img img.pcb-zoom{
  max-width: 140px; width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px;
}@media (hover: hover) and (pointer: fine){img.pcb-zoom{ transition: transform .2s ease; will-change: transform; }.thumb-col-td img.pcb-zoom:hover,
  .component-option-img img.pcb-zoom:hover{ transform: scale(1.15); }}@media (prefers-reduced-motion: reduce){img.pcb-zoom{ transition: none !important; }}#form-pc-builder .label.label-success{ background-color: var(--brand-success, #5cb85c); }#form-pc-builder .label.label-danger{ background-color: var(--brand-danger, #d9534f); }#form-pc-builder .panel.panel-default{ border-color: rgba(0,0,0,.06); box-shadow: 0 1px 2px rgba(0,0,0,.04); }#pc-builder-custom-field-table table.table > tbody > tr > td{ padding-top: 10px; padding-bottom: 10px; }#pc-builder-custom-field-table table.table > thead > tr > th{ padding-top: 12px; padding-bottom: 12px; vertical-align: middle; }@media (max-width: 767px){#pc-builder-custom-field-table .component-col-td{ width: auto; }#pc-builder-custom-field-table .thumb-col-td{ width: 72px; }#pc-builder-custom-field-table .thumb-col-td img{ max-width: 68px; width: 68px; }}.pc-builder-header.panel{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
}.pc-builder-header .pull-left,
.pc-builder-header .pull-right{
  float: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}.pc-builder-header .label{
  display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; white-space: nowrap; margin-right: 6px; font-size: 13px;
}@media (max-width: 575.98px){.pc-builder-header .pull-right{ width: 100%; }.pc-builder-header #button-review{ width: 100%; height: 44px; font-weight: 600; border-radius: 10px; }.pc-builder-header #button-save-build,
  .pc-builder-header #button-capture,
  .pc-builder-header #button-print{
    width: 100%; height: 44px; font-weight: 600; border-radius: 10px;
  }.pc-builder-header #button-save-build{ margin-bottom: 8px; }.pc-builder-header #button-capture{ margin-bottom: 8px; }}#productModal{ z-index: 20000; }#productModal .modal-dialog{
  width: 70vw;
  height: 70vh;
  max-width: 95vw;
  max-height: 95vh;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  display: flex;
  overflow-x: visible;          /* don’t clip horizontal scrollers inside */
}#productModal .modal-content{
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow-x: visible;
}#productModal .modal-header{ top: 0; }#productModal .modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;          /* allow inner x-scroll areas */
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 12px;
}#productModal .modal-backdrop{ background-color: rgba(255,255,255,0.75) !important; }.modal-backdrop.in{ opacity: 1 !important; }@media (max-width: 767px){#productModal .modal-dialog{
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    box-sizing: border-box;
    padding: 0;
  }#productModal .modal-content{ border-radius: 0; }}body.modal-open{ overflow: hidden; }.pcb-x-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}.pcb-x-scroll::-webkit-scrollbar{ height: 6px; }#productModal .tab-content,
#productModal .tab-pane{ max-width: 100%; }#productModal #tab-description,
#productModal #tab-specification,
#productModal #productModalDescription,
#productModal #productModalSpecification{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}#productModal .tab-pane table,
#productModal #productModalDescription table,
#productModal #productModalSpecification table{
  display: block;
  width: max-content;
  max-width: none;
}#productModal .tab-pane img{ max-width: 100%; height: auto; }
/* ===== Mobile Modal Horizontal Scroll Hotfix (2025-08-18) ===== */
/* 1) Avoid transform-centering on phones (iOS bug with overflow inside transformed ancestors) */
@media (max-width: 767px){
  #productModal .modal-dialog{
    position: fixed;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  #productModal .modal-content{
    height: 100%;
    border-radius: 0;
  }
  #productModal .modal-body{
    max-width: 100vw; /* ensure inner scrollers clamp to viewport width */
  }
  /* Keep the header visible so the close button is always reachable */
  #productModal .modal-header{
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
  }
}
/* Make the footer a flex row everywhere (override Bootstrap's right-align) */
#productModal .modal-footer {
  background: #fff;
  z-index: 1;
  display: flex !important;
  align-items: center;
  justify-content: flex-end; /* keep other buttons (if any) on the right */
  gap: 10px;
  text-align: initial !important; /* neutralize Bootstrap's text-align:right */
}

/* Push only the Close button to the left side */
#productModal .modal-footer .btn-close {
  margin-right: auto; /* sends it to the far left in a flex row */
}