/*! PC Builder – Always-Native Selects (2025-08-09)
   Drop-in stylesheet. Put after your theme CSS.
   Forces native <select> everywhere and hardens mobile UX.
*/

/* --- Native select styling (desktop + mobile) --- */
select.custom-field-select,
select.select2, /* in case class remains on HTML */
select {
  font-size: 16px;            /* prevents iOS zoom on focus */
  max-width: 100%;
}

/* Closed control: keep single line in tight layouts */
select.custom-field-select {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* If any Select2 markup slips into DOM, hide it */
/* Mobile: force native selects, hide Select2 UI */
@media (max-width: 991.98px) {
  .pc-builder .select2-container,
  .pc-builder .select2-dropdown {
    display: none !important;
  }
  .pc-builder select {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    height: auto;
    max-width: 100%;
  }
}

/* Desktop: use Select2 UI */
@media (min-width: 992px) {
  .pc-builder .select2-container {
    display: inline-block !important;
    visibility: visible;
    opacity: 1;
  }
}

/* ---- General Builder UI polishing (kept from prior fixes) ---- */

/* Cards & images */
.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;
}

/* Table → card on small screens */
#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 messages */
.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; }

/* Sticky footer actions on phones */
#pc-builder-footer {
  position: sticky; bottom: 0; z-index: 50; background: #fff;
  border-top: 1px solid #e7e9ee; padding: 12px 16px;
}
@media (max-width: 768px) {
  #pc-builder-footer .btn { width: 100%; margin-top: 8px; }
}

/* Modal sizing */
#productModal .modal-dialog { max-width: 860px; }
@media (max-width: 576px) {
  #productModal .modal-dialog { margin: 8px; max-width: 100%; }
  #productImages img { max-width: 80px; }
}

/* Print */
@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; }
}