/**
 * @file
 * Custom styling for Commerce POS.
 */

/* Make "Park Order" button same size as "Pay Now" button */
.commerce-pos-form .form-actions input[name="park_order"] {
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  font-weight: 600;
}

/* Ensure all action buttons have consistent sizing */
.commerce-pos-form .form-actions input[type="submit"] {
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  min-height: 44px;
}

/* POS Sidebar reorganization - Customer on top */
.layout-region-pos-sidebar {
  display: flex;
  flex-direction: column;
}

.layout-region-pos-customer {
  order: 1;
}

.layout-region-pos-totals {
  order: 2;
}

.layout-region-pos-footer {
  order: 3;
}

/* =====================================================
   POS Order Item List - Product Image Size Control
   ===================================================== */

/* Limit product image size in the order item list */
.layout-region-pos-list table[id*="edit-order-items"] td:first-child,
.layout-region-pos-list table tbody tr td:first-child,
table[id*="edit-order-items-target-id-order-items"] tbody > tr > td:first-child {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}

/* Constrain any images or sliders in the order item list */
.layout-region-pos-list .slick,
.layout-region-pos-list .slick-slider,
.layout-region-pos-list .slick-list,
.layout-region-pos-list .slick-track,
.layout-region-pos-list .slick-slide,
table[id*="edit-order-items-target-id-order-items"] .slick,
table[id*="edit-order-items-target-id-order-items"] .slick-slider,
table[id*="edit-order-items-target-id-order-items"] .slick-list,
table[id*="edit-order-items-target-id-order-items"] .slick-track,
table[id*="edit-order-items-target-id-order-items"] .slick-slide {
  width: 60px !important;
  max-width: 60px !important;
  height: 60px !important;
  max-height: 60px !important;
}

/* Limit image dimensions directly */
.layout-region-pos-list table td img,
.layout-region-pos-list .slick img,
.layout-region-pos-list .slick-slide img,
table[id*="edit-order-items-target-id-order-items"] td img,
table[id*="edit-order-items-target-id-order-items"] .slick img,
table[id*="edit-order-items-target-id-order-items"] .slick-slide img {
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  object-fit: cover;
}

/* Hide slick navigation arrows in order list (not needed for small images) */
.layout-region-pos-list .slick-arrow,
.layout-region-pos-list .slick-prev,
.layout-region-pos-list .slick-next,
table[id*="edit-order-items-target-id-order-items"] .slick-arrow,
table[id*="edit-order-items-target-id-order-items"] .slick-prev,
table[id*="edit-order-items-target-id-order-items"] .slick-next {
  display: none !important;
}

/* Product image container styling */
.layout-region-pos-list .field--type-image,
.layout-region-pos-list .field--name-field-images-mode,
.layout-region-pos-list .field--name-field-bilder,
.layout-region-pos-list .field--name-field-bild,
table[id*="edit-order-items-target-id-order-items"] .field--type-image,
table[id*="edit-order-items-target-id-order-items"] .field--name-field-images-mode,
table[id*="edit-order-items-target-id-order-items"] .field--name-field-bilder,
table[id*="edit-order-items-target-id-order-items"] .field--name-field-bild {
  width: 60px !important;
  height: 60px !important;
  overflow: hidden;
}

/* Media entity image container */
.layout-region-pos-list .media--type-image,
table[id*="edit-order-items-target-id-order-items"] .media--type-image {
  width: 60px !important;
  height: 60px !important;
}

/* Blazy container */
.layout-region-pos-list .blazy,
.layout-region-pos-list .blazy__wrapper,
table[id*="edit-order-items-target-id-order-items"] .blazy,
table[id*="edit-order-items-target-id-order-items"] .blazy__wrapper {
  width: 60px !important;
  height: 60px !important;
}