/* mobile.css - mobile-first overrides */

/* Mobile-specific styles (viewport ≤ 768px) */
@media (max-width: 768px) {
  .mobile-ordering-layout.show-mobile {
    display: block !important;
  }

  .mobile-ordering-layout {
    position: relative;
    overflow: visible;
    padding: 0.5rem;
    background: #fff;
  }

  /* Mobile base font and family */
  body {
    font-size: 18px !important;
    font-family: sans-serif !important;
  }

  /* Utility class for all mobile inputs/selects */
  .mobile-input {
    font-size: inherit !important;
    font-family: inherit !important;
    min-height: 3rem !important;
    padding: 0.75rem !important;
    box-sizing: border-box !important;
  }

  /* Utility toggles */
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }

  /* Layout stacking: full-bleed blocks with vertical spacing */
  .tool-header {
    min-height: 64px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 0.5rem !important;
    gap: 0.25rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .cart-icon-wrapper {
    min-width: 32px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Prevent header layout shift when Ecwid cart loads */
  .header-right {
    min-height: 44px; /* reserve the cart’s height */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Optional: reserve a small width to avoid width snap */
  .header-right .ec-cart-widget {
    min-height: 36px;
    min-width: 64px;
  }
  .tool-header {
    min-height: 210px;
  }

  /* Hide desktop-only components */
  .filter-product-container,
  .selector-panel .extrusion-selector-wrapper,
  .selector-panel .extrusion-selector {
    display: none !important;
  }

  /* Style for the Select Extrusion label */
  .mobile-extrusion-label {
    display: block;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: center !important;
    margin: 1rem 0;
    color: var(--color-text-error-highlight)!important;
  }



  /* Add horizontal padding to all stack blocks */
  .tool-header,
  #mobileExtrusionSelect,
  .order-panel,
  .details-panel {
    padding: 0 0.5rem;           /* 5px on left and right */
    box-sizing: border-box;
  }

  /* Hide order panel on mobile */
  .order-panel {
    display: none !important;
  }


  /* Hide desktop details panel on mobile */
  .details-panel {
    display: none !important;
  }

  /* Show mobile description panel */
  .mobile-description-panel {
    display: block;
    margin: 1rem 0;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }



  /* Prevent horizontal overflow */
  html, body {
    overflow-x: hidden !important;
  }

  /* Ensure flex-container fits within viewport */
  .flex-container,
  .main-ordering-tab {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }


  /* Style mobile aggregate card */
  .mobile-layout-aggregate-card {
    margin: 1rem 0;
  }

  .mobile-layout-aggregate-card .aggregate-card {
    width: 100%;
    border-radius: 4px;
    border-collapse: collapse;
  }

  .mobile-layout-aggregate-card .aggregate-card th {
    background-color: #f0f0f0;
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
  }

  .mobile-layout-aggregate-card .aggregate-card td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    word-break: break-word;
    border: 1px solid var(--color-border-pills-boxes-tableborders);
  }

  .mobile-layout-aggregate-card .aggregate-card tbody tr:last-child td {
    font-weight: 600;
  }

  /* Adjust column widths in mobile totals table */
  .mobile-layout-aggregate-card .aggregate-card td:first-child {
    width: 65%;
    text-align: left;
  }

  .mobile-layout-aggregate-card .aggregate-card td:last-child {
    width: 35%;
    text-align: right;
  }



  /* Global mobile font settings (except header) */
  .mobile-extrusion-label,
  .mobile-order-cards, .mobile-order-cards *,
  .mobile-layout-aggregate-card, .mobile-layout-aggregate-card *,
  .order-panel-placeholder *, /* if any placeholder elements */
  button, button * {
    font-size: 18px !important;
    font-family: sans-serif !important;
  }

  /* Revert header to default font-size and family */
  .tool-header, .tool-header * {
    font-size: 24px !important;
    font-family: sans-serif !important;
  }

  /* Mobile image scroller */
  .mobile-image-scroller {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    /* Reserve space for image scroller to prevent layout shift */
    --thumb: clamp(140px, 44vw, 200px);
    min-height: var(--thumb);
  }

  .mobile-image-scroller a {
    flex: 0 0 48% !important; /* two-up */
    height: var(--thumb);      /* reserve height even before images load */
    display: block;
    border-radius: 6px;
    background: #f3f3f3;       /* subtle skeleton bg */
    overflow: hidden;
    scroll-snap-align: start;
  }

  .mobile-image-scroller img {
    width: 100% !important;
    height: 100% !important;   /* fill the reserved tile */
    object-fit: cover !important;
    display: block;            /* remove inline-gap */
    aspect-ratio: 1 / 1;       /* retain square geometry */
    border-radius: 6px !important;
  }

  /* -----------------------------------------------
     Mobile Order Card Color Indicators (1–30)
     Each class is applied to .card-color-indicator
     to uniquely color-code order cards visually.
  ------------------------------------------------- */

  .card-color-1  { background-color: #E74C3C; }  /* Tomato */
  .card-color-2  { background-color: #F39C12; }  /* Coral */
  .card-color-3  { background-color: #FF6F91; }  /* Rose */
  .card-color-4  { background-color: #A93226; }  /* Dark Red */

  .card-color-5  { background-color: #E67E22; }  /* Orange */
  .card-color-6  { background-color: #F1C40F; }  /* Amber */
  .card-color-7  { background-color: #DAA520; }  /* Goldenrod */
  .card-color-8  { background-color: #D4AC0D; }  /* Mustard */

  .card-color-9  { background-color: #2ECC71; }  /* Lime Green */
  .card-color-10 { background-color: #228B22; }  /* Forest Green */
  .card-color-11 { background-color: #808000; }  /* Olive */
  .card-color-12 { background-color: #1ABC9C; }  /* Teal */

  .card-color-13 { background-color: #5DADE2; }  /* Sky Blue */
  .card-color-14 { background-color: #4682B4; }  /* Steel Blue */
  .card-color-15 { background-color: #2C3E50; }  /* Navy */
  .card-color-16 { background-color: #00CED1; }  /* Aqua */

  .card-color-17 { background-color: #DA70D6; }  /* Orchid */
  .card-color-18 { background-color: #8E44AD; }  /* Plum */
  .card-color-19 { background-color: #B497BD; }  /* Lavender */
  .card-color-20 { background-color: #6C3483; }  /* Grape */

  .card-color-21 { background-color: #8B4513; }  /* Saddle Brown */
  .card-color-22 { background-color: #A0522D; }  /* Sienna */
  .card-color-23 { background-color: #C2B280; }  /* Sand */
  .card-color-24 { background-color: #B87333; }  /* Clay */

  .card-color-25 { background-color: #708090; }  /* Slate Gray */
  .card-color-26 { background-color: #36454F; }  /* Charcoal */
  .card-color-27 { background-color: #BDC3C7; }  /* Silver */
  .card-color-28 { background-color: #2F4F4F; }  /* Gunmetal */

  .card-color-29 { background-color: #FF00FF; }  /* Fuchsia */
  .card-color-30 { background-color: #008B8B; }  /* Dark Cyan */

  /* Shared base style for the circular indicator */
  .card-color-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    right: 8px;
  }

  .mobile-order-cards .order-card {
    border: 1px solid var(--color-border-pills-boxes-tableborders);
    border-radius: 4px;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f9f9f9;
    position: relative;
  }

  .mobile-order-cards .order-card .card-title {
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    margin-bottom: 0.75rem;
  }

  .mobile-order-cards .order-card .card-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
  }

  .mobile-order-cards .order-card .card-row label {
    width: 70%;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
  }

  /* Bracket text goes to next line and is smaller */

  .mobile-order-cards .order-card .card-row label::after {
    display: block;
    content: attr(data-helper);
    font-size: 12px;
    color: #666;
    font-weight: normal;
    margin-top: 2px;
  }

  /* Smaller font size for tap/cbh helper text notes */
  .mobile-order-cards .card-tap-size-note,
  .mobile-order-cards .card-cbh-size-note {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .mobile-order-cards .order-card .card-row .card-input {
    width: 30%;
    border: 1px solid var(--color-border-pills-boxes-tableborders);
    border-radius: 4px;
    padding: 0.5rem;
    background: #fff;
    box-shadow: none;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
  }

  /* Reset & Remove buttons container */
  .mobile-order-cards .order-card .card-buttons {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .mobile-order-cards .order-card .card-buttons button {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--color-border-pills-boxes-tableborders);
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
  }

  .js-add-to-cart {
    width: 100%;
    padding: 0.75rem;
    font-size: 20px;
    background: #227bbe;
    color: #fff;
    border: none;
    border-radius: 4px;
  }

  .card-product-label {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: var(--color-boxes-selected);
    margin-bottom: 0.5rem;
  }
}

/* Desktop-only / Mobile-only toggles (viewport ≥ 769px) */
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }

  /* Responsive Preview Modal */
  #orderPreviewModal .modal-content {
    width: 90vw !important;
    max-width: 400px !important;
    max-height: 90vh !important;
    margin: 1rem auto !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  /* Ensure modal action buttons are full-width and always visible */
  #orderPreviewModal .modal-content button {
    width: 100% !important;
    margin-top: 0.75rem !important;
    font-size: 1rem !important;
  }
}
/* Unblock clicks by disabling Ecwid popup overlays */
.ec-popup__overlay,
.ec-popup,
.ec-popup--m {
  pointer-events: none !important;
}

/* Custom dropdown for mobile extrusion selector */
.custom-dropdown {
  position: relative;
  width: 100%;
  margin: 0.5rem 0;
  font-size: 16px;
}

.custom-dropdown .dropdown-selected {
  border: 1px solid var(--color-border-pills-boxes-tableborders);
  border-radius: 4px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background: #fff;
  cursor: pointer;
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}

.custom-dropdown .dropdown-selected .option-name {
  display: block;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 0.15rem;
}
.custom-dropdown .dropdown-selected .option-price {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 0.15rem;
}
.custom-dropdown .dropdown-selected .option-stock {
  display: block;
  font-size: 12px;
  color: red;
}
.custom-dropdown .dropdown-selected .option-stock:empty {
  display: none !important;
}

.custom-dropdown .dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid var(--color-border-pills-boxes-tableborders);
  background: #fff;
  max-height: 220px;
  overflow-y: auto;
  z-index: 1000;
  border-radius: 4px;
}

.custom-dropdown .dropdown-options.hidden {
  display: none;
}

.custom-dropdown .dropdown-option {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s ease;
}

.custom-dropdown .dropdown-option:last-child {
  border-bottom: none;
}

.custom-dropdown .dropdown-option:hover {
  background: var(--color-boxes-selected);
  color: var(--color-text-for-selected-boxes);
}

/* Highlight the selected option */
.custom-dropdown .dropdown-option.selected {
  background: #e6f0ff;
  border-left: 5px solid #227bbe;
}

.custom-dropdown .dropdown-option.out-of-stock {
  color: #999;
  cursor: pointer;
}

.custom-dropdown .dropdown-option .option-name {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 2px;
}

.custom-dropdown .dropdown-option .option-price {
  font-size: 12px;
  color: #333;
  margin-bottom: 2px;
}

.custom-dropdown .dropdown-option .option-stock {
  font-size: 12px;
  color: red;
}