/* v2/modules/extrusions/extrusion.css
   Layout scaffold for the V2 Extrusions module.
   Handles both the facet-selection screen and the order screen.
   Detailed visual styling will be added later.
*/

/* Scope all rules to the Extrusion tool container */
.v2-tool--extrusions .v2-tool__body {
  /* Base flex + padding comes from base.css */
}

/* =========================
   Facet-selection screen
   ========================= */

.v2-tool--extrusions .v2-extrusions__screen--filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Facet cards now use global utilities */
.v2-tool--extrusions .v2-extrusions__facet {
  /* Global card */
  composes: v2-facet;
}

/* Facet title now uses global utilities */
.v2-tool--extrusions .v2-extrusions__facet-title {
  composes: v2-facet__title;
}

/* Track + Pills now use global scroll utilities */
.v2-tool--extrusions .v2-extrusions__facet-track {
  composes: v2-facet__track;
}

.v2-tool--extrusions .v2-extrusions__facet-pills {
  composes: v2-facet__pills;
}

/* Actions under the facets */
.v2-tool--extrusions .v2-extrusions__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =========================
   Order screen
   ========================= */

.v2-tool--extrusions .v2-extrusions__screen--order {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Back-to-filters button area */
.v2-tool--extrusions .v2-extrusions__back {
  /* Button itself inherits .v2-btn styling */
}

/* Main extrusion image block */
.v2-tool--extrusions .v2-extrusions__image {
  /* Later replaced with real carousel / images */
}

/* =========================
   Media visibility rules
   Ensure ONLY one media UI is visible at a time:
   - Mobile: carousel
   - Tablet/Desktop: 2x2 grid
   ========================= */

/* Mobile-first: hide grid, show carousel */
.v2-tool--extrusions .v2-media-grid {
  display: none !important;
}

.v2-tool--extrusions .v2-carousel {
  display: block !important;
}

/* >= 769px: show grid, hide carousel */
@media (min-width: 769px) {
  .v2-tool--extrusions .v2-media-grid {
    display: grid !important;
  }

  .v2-tool--extrusions .v2-carousel {
    display: none !important;
  }
}

/* Placeholder tone adjustment */
.v2-tool--extrusions .v2-tool__placeholder {
  font-size: 13px;
  color: #555;
}

/* Stock message under "You are ordering" */
.v2-tool--extrusions .v2-selection-summary__stock {
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.v2-tool--extrusions .v2-selection-summary__stock--out {
  color: #b94242; /* soft red matching OOS pill */
}

/* Make Extrusions module action buttons full width */
.v2-tool--extrusions .v2-btn {
  width: 100%;
}

/* Price line below product name in the selection summary */

.v2-tool--extrusions .v2-selection-summary__price {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
  margin-bottom: 2px;
  color: #222;
}

/* Extrusion name shown under Order Summary heading */
.v2-tool--extrusions .v2-extrusions__summary-extrusion-name {
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  text-align: center;
}

/* =========================
   Extrusion order table
   ========================= */

.v2-tool--extrusions .v2-extrusions__order-table-wrapper {
  margin-top: 8px;
}

/* Use the global .v2-table base styles and tighten typography for this module */
.v2-tool--extrusions .v2-extrusions__order-table th,
.v2-tool--extrusions .v2-extrusions__order-table td {
  font-size: 14px;
  text-align: center;
}

/* Column widths for extrusion order table (module-level) */
.v2-tool--extrusions .v2-extrusions__order-table th:nth-child(1),
.v2-tool--extrusions .v2-extrusions__order-table td:nth-child(1) {
  width: 25%;
}

.v2-tool--extrusions .v2-extrusions__order-table th:nth-child(2),
.v2-tool--extrusions .v2-extrusions__order-table td:nth-child(2) {
  width: 25%;
}
.v2-tool--extrusions .v2-extrusions__order-table th:nth-child(3),
.v2-tool--extrusions .v2-extrusions__order-table td:nth-child(3) {
  width: 20%;
}

.v2-tool--extrusions .v2-extrusions__order-table th:nth-child(4),
.v2-tool--extrusions .v2-extrusions__order-table td:nth-child(4) {
  width: 20%;
}

/* Header label + helper inside each th */
.v2-tool--extrusions .v2-extrusions__header-label {
  font-weight: 600;
}

.v2-tool--extrusions .v2-extrusions__header-helper {
  font-size: 10px;
  color: #352ef9;
  margin-top: 2px;
}

/* Inputs inside the table cells: sizing + alignment only (visual styling comes from .v2-input / .v2-input--sm) */
.v2-tool--extrusions .v2-extrusions__order-input {
  width: 100%;
  max-width: 100%;
  text-align: left;
}

/* Placeholder styling for input fields (independent of input text size) */
.v2-tool--extrusions .v2-extrusions__order-input::placeholder {
  font-size: 13px;
  color: #999;
  opacity: 1; /* ensures consistent visibility on iOS */
}

/* Remove number input spinners (mobile-friendly numeric fields) */
.v2-tool--extrusions .v2-extrusions__order-input::-webkit-outer-spin-button,
.v2-tool--extrusions .v2-extrusions__order-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.v2-tool--extrusions .v2-extrusions__order-input {
  -moz-appearance: textfield;
}

/* =========================
   Extrusion summary table
   ========================= */

.v2-tool--extrusions .v2-extrusions__summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  margin-bottom: 12px;
}


.v2-tool--extrusions .v2-extrusions__summary-table th,
.v2-tool--extrusions .v2-extrusions__summary-table td {
  padding: 6px 4px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-table-border);
}

/* Unit price labels like (@₹500/m), (@₹30/tap), (@₹70/hole) */
.v2-tool--extrusions .v2-extrusions__summary-unit-price {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #666;
}

/* Left column (labels) */
.v2-tool--extrusions .v2-extrusions__summary-table td:first-child,
.v2-tool--extrusions .v2-extrusions__summary-table th:first-child {
  font-weight: 600; /* bold */
  text-align: left;
  width: 65%;      /* adjustable */
}

/* Right column (values) */
.v2-tool--extrusions .v2-extrusions__summary-table td:last-child,
.v2-tool--extrusions .v2-extrusions__summary-table th:last-child {
  font-weight: 400;
  text-align: left;
  padding-left: 15px;
  width: 35%;      /* adjustable */
}

/* Summary table header row (if used) */
.v2-tool--extrusions .v2-extrusions__summary-table thead th {
  background: var(--color-table-header-bg);
  border-bottom: 1px solid var(--color-table-border);
}
/* Order table action bar: Reset + Add Row side by side */
.v2-extrusions__table-actions {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;              /* space between the two buttons */
  margin-top: 12px;
}

/* Override global full-width behavior just inside the table actions */
.v2-extrusions__table-actions .v2-btn {
  width: auto;
  flex: 1 1 0;
}

/* =========================
   Extrusion Confirmation Modal
   ========================= */

.v2-extrusions-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: #333;
}

.v2-extrusions-confirm__intro {
  margin: 0;
  font-size: 14px;
  color: #444;
}

.v2-extrusions-confirm__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v2-extrusions-confirm__list li {
  line-height: 1.45;
  font-size: 14px;
}

.v2-extrusions-confirm__total {
  margin-top: 4px;
  font-weight: 600;
  font-size: 15px;
  color: #222;
}

.v2-extrusions-confirm__shipping-note {
  margin-top: 6px;
  padding: 8px 10px;
  background: #fff8e5;
  border: 1px solid #f2d9a6;
  border-radius: 4px;
  font-size: 13px;
  color: #664d00;
  line-height: 1.4;
}

/* =========================
   Extrusion description block
   ========================= */

/* Prevent overflowing media/markup inside the description from breaking layout */
.v2-tool--extrusions .v2-extrusions__description-body {
  overflow-x: hidden;
}

/* Images, tables, iframes should never exceed the description width */
.v2-tool--extrusions .v2-extrusions__description-body img,
.v2-tool--extrusions .v2-extrusions__description-body table,
.v2-tool--extrusions .v2-extrusions__description-body iframe {
  max-width: 100%;
  box-sizing: border-box;
}

/* Make embedded videos (YouTube iframes) responsive on mobile */
.v2-tool--extrusions .v2-extrusions__description-body iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* =========================
   Desktop layout (order screen)
   ========================= */

@media (min-width: 992px) {
  /* Desktop: two-column layout using left/right containers */

  /* Desktop: facet row across the top */
  .v2-tool--extrusions .v2-extrusions__facet-row--desktop {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 0.6fr 1.1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .v2-tool--extrusions .v2-extrusions__facet-row--desktop .v2-extrusions__facet {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 263px; /* tuned for worst-case Size/Profile facet */
    min-width: 0;      /* allow the grid to shrink width and let content wrap */
    overflow: hidden;  /* prevent content from forcing the column to grow */
  }

  /* Let the track/pills fill the remaining height and wrap naturally */
  .v2-tool--extrusions
    .v2-extrusions__facet-row--desktop
    .v2-extrusions__facet-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    white-space: normal; /* default: allow wrap for series/finish */
    justify-content: flex-start;
  }

  /* Desktop: Type & Size facets use single-row horizontal scroll */
  .v2-tool--extrusions
    .v2-extrusions__facet-row--desktop
    .v2-extrusions__facet:nth-child(1) .v2-extrusions__facet-pills,
  .v2-tool--extrusions
    .v2-extrusions__facet-row--desktop
    .v2-extrusions__facet:nth-child(4) .v2-extrusions__facet-pills {
    flex-wrap: nowrap;      /* no wrapping, keep a single row */
    white-space: nowrap;    /* pills stay in one line */
    overflow-x: auto;       /* horizontal scroll if too many pills */
    overflow-y: hidden;     /* prevent vertical scroll */
  }

  .v2-tool--extrusions .v2-extrusions__desktop-layout--desktop {
    display: flex;
    align-items: flex-start;
    gap: 16px 24px; /* vertical, horizontal */
  }

  .v2-tool--extrusions .v2-extrusions__desktop-left,
  .v2-tool--extrusions .v2-extrusions__desktop-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 0;
  }

  /* Left column: media at top, description below */
  .v2-tool--extrusions .v2-extrusions__desktop-left .v2-card {
    margin: 0; /* rely on column gap instead of margins */
  }

  /* Ensure media and selection summary align at the top edge */
  .v2-tool--extrusions .v2-extrusions__media,
  .v2-tool--extrusions .v2-extrusions__selection {
    margin-top: 0;
  }

  /* Desktop: stabilise card heights to avoid layout jumps */
  .v2-tool--extrusions .v2-extrusions__media {
    min-height: 320px;          /* slightly tighter than before */
    padding: 8px;               /* breathing room for grid */
  }

  /* Desktop: refine media grid appearance for extrusions */
  .v2-tool--extrusions .v2-media-grid {
    max-width: 100%;            /* fill the media card width (no empty right gap) */
  }

  .v2-tool--extrusions .v2-media-grid__item {
    background: #fafafa;        /* subtle tile background */
    border: 1px solid #e5e5e5;  /* light definition without heaviness */
  }

  .v2-tool--extrusions .v2-media-grid__item:hover {
    border-color: #cfcfcf;
  }

  .v2-tool--extrusions .v2-extrusions__description {
    min-height: 220px; /* holds description block without jumping */
  }

  .v2-tool--extrusions .v2-extrusions__selection {
    min-height: 105px; /* keeps "You are ordering" area stable */
  }

  /* =========================
     Ghost Media (side‑by‑side images)
     ========================= */
  .v2-extrusions__ghost-media {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .v2-extrusions__ghost-media-item img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 6px;
    object-fit: cover;
    opacity: 0.4; /* dim ghost media */
  }

  /* Right column: selection summary, order table, cost summary, waste policy stacked */
  .v2-tool--extrusions .v2-extrusions__desktop-right .v2-card {
    margin: 0;
  }

  /* Slightly tighten spacing around order table and summary on desktop */
  .v2-tool--extrusions .v2-extrusions__order-table-wrapper {
    margin-top: 6px;
  }

  .v2-tool--extrusions .v2-extrusions__summary-table {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  /* Desktop: keyboard focus styling for text pills (Series + Finish) */
  .v2-tool--extrusions .v2-text-pill:focus {
    outline: none; /* remove default browser outline on mouse click */
  }

  .v2-tool--extrusions .v2-text-pill:focus-visible {
    outline: 2px solid #004C93; /* same industrial blue as icon pills */
    outline-offset: 2px;
    border-radius: 8px; /* match pill shape */
  }
  /* Hide the Back-to-Filters button on desktop */
  @media (min-width: 992px) {
  .v2-tool--extrusions .v2-extrusions__back {
    display: none !important;
  }
  }
}