/* ==========================================================
   OGIG CSV Product Tables — Theme-aligned styling
   - Constrains plugin UI to theme global width
   - Keeps table horizontally scrollable with a "more" affordance
   - Styles DataTables controls to match OGIG theme
   - Desktop: sticky right-side diagram (supports 2 stacked images for lockwashers)
   - Mobile: floating "View diagram" button + modal (supports 2 images)
   Updated: Sticky diagram now uses viewport-relative sticky (Solution 1)
========================================================== */

/* ---------- Design tokens (inherit theme vars when present) ---------- */
:root {
  --ogig-table-max: var(--wp--style--global--content-size, 1200px);
  --ogig-table-gutter: var(--ogig-gutter, clamp(16px, 4vw, 32px));

  --ogig-table-border: rgba(15, 23, 42, 0.12);
  --ogig-table-border-strong: rgba(15, 23, 42, 0.18);
  --ogig-table-bg: #ffffff;
  --ogig-table-bg-soft: rgba(15, 23, 42, 0.03);

  --ogig-table-radius: 14px;
  --ogig-table-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);

  --ogig-accent: var(--brand-color, #e83f39);

  --ogig-font-body: var(--ogig-body-font, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  --ogig-font-head: var(--ogig-heading-font, Georgia, "Times New Roman", serif);
  --ogig-type-small: var(--type-small, 14px);
  --ogig-type-body: var(--type-body, 16px);

  /* IMPORTANT: adjust this to match your actual header + admin bar height */
  --ogig-sticky-top: 200px;   /* ← change this if your header is taller/shorter */
}

/* ---------- Outer section: can be full-bleed but inner is constrained ---------- */
.ogig-table-outer {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Full-bleed wrapper */
.ogig-table-outer.ogig-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- Shell: match theme container width ---------- */
.ogig-table-shell {
  width: min(var(--ogig-table-max), calc(100% - (2 * var(--ogig-table-gutter))));
  margin-inline: auto;
  padding-inline: var(--ogig-table-gutter);
  position: relative;                    /* ← now a positioning context for sticky children */

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
  overflow: visible;
}

/* Desktop: reserve a right column for diagram */
@media (min-width: 1025px) {
  .ogig-table-shell {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

/* ---------- Table main card ---------- */
.ogig-table-main {
  background: var(--ogig-table-bg);
  border: 1px solid var(--ogig-table-border);
  border-radius: var(--ogig-table-radius);
  box-shadow: var(--ogig-table-shadow);
  overflow: hidden;
  position: relative;
}

/* ---------- DataTables wrapper spacing ---------- */
.ogig-table-main .dataTables_wrapper {
  padding: clamp(12px, 2vw, 18px);
  font-family: var(--ogig-font-body);
  font-size: var(--ogig-type-small);
  color: inherit;
}

.ogig-table-main .dataTables_wrapper .dataTables_length,
.ogig-table-main .dataTables_wrapper .dataTables_filter {
  margin: 0 0 12px 0;
}

.ogig-table-main .dataTables_wrapper .dataTables_length label,
.ogig-table-main .dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
}

.ogig-table-main .dataTables_wrapper select,
.ogig-table-main .dataTables_wrapper input[type="search"] {
  font-family: var(--ogig-font-body);
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ogig-table-border-strong);
  background: #fff;
  outline: none;
}

.ogig-table-main .dataTables_wrapper input[type="search"]:focus,
.ogig-table-main .dataTables_wrapper select:focus {
  border-color: var(--ogig-accent);
  box-shadow: 0 0 0 3px rgba(232,63,57,0.18);
}

/* Info + pagination row */
.ogig-table-main .dataTables_wrapper .dataTables_info {
  margin-top: 12px;
  color: rgba(15, 23, 42, 0.7);
}

.ogig-table-main .dataTables_wrapper .dataTables_paginate {
  margin-top: 10px;
}

.ogig-table-main .dataTables_wrapper .paginate_button {
  border-radius: 10px !important;
  border: 1px solid var(--ogig-table-border) !important;
  background: #fff !important;
  margin: 0 4px !important;
  padding: 6px 10px !important;
  font-weight: 700 !important;
  color: inherit !important;
}

.ogig-table-main .dataTables_wrapper .paginate_button.current,
.ogig-table-main .dataTables_wrapper .paginate_button:hover {
  border-color: var(--ogig-accent) !important;
  box-shadow: 0 0 0 3px rgba(232,63,57,0.14);
  color: black !important;
}

/* ---------- Horizontal scroll area + “more” affordance ---------- */
.ogig-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.ogig-table-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .2s ease;
}

.ogig-table-shell.ogig-show-scroll-hint .ogig-table-scroll::after {
  opacity: 1;
}

.ogig-table-scroll.scrolled::after {
  opacity: 0 !important;
}

/* ---------- Actual table styling ---------- */
table.ogig-product-table {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--ogig-font-body);
  font-size: 14px;
}

table.ogig-product-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--ogig-table-border-strong);
  color: rgba(15, 23, 42, 0.92);
  font-weight: 800;
  white-space: normal;
  line-height: 1.15;
  padding: 10px 10px !important;
  vertical-align: bottom;
}

table.ogig-product-table tbody td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 10px 10px !important;
  white-space: nowrap;
}

table.ogig-product-table tbody tr:nth-child(even) {
  background: var(--ogig-table-bg-soft);
}
table.ogig-product-table tbody tr:hover {
  background: rgba(232,63,57,0.06);
}

table.ogig-product-table tbody td:nth-child(2) {
  font-weight: 800;
  letter-spacing: .02em;
}

table.ogig-product-table a {
  color: var(--ogig-accent);
  text-decoration: none;
  font-weight: 800;
}
table.ogig-product-table a:hover {
  text-decoration: underline;
}

table.ogig-product-table a.button {
  background-color: var(--ogig-button-bg, #32373c) !important;
  border: 1px solid var(--ogig-button-bg, #32373c) !important;
  color: var(--ogig-button-text, #fff) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-transform: none !important;
}
table.ogig-product-table a.button:hover {
  background-color: var(--ogig-button-bg-hover, #444b52) !important;
  border-color: var(--ogig-button-bg-hover, #444b52) !important;
}

/* ---------- “See More” button ---------- */
.ogig-scroll-btn{
  position:absolute;
  right:14px;
  top:50px;
  transform:scale(.75);
  z-index:5;
  display:none;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;

  /* Keep foreground fully opaque */
  color: black !important;                 /* text color */
  font-weight:900;
  font-size:13px;

  /* Semi-transparent BACKGROUND only */
  background: rgba(255,255,255,.78) !important;  /* tweak: .70–.85 usually best */

  /* Border/shadow still visible */
  border:1px solid rgba(15,23,42,.20);
  box-shadow:0 12px 30px rgba(15,23,42,.12);

  cursor:pointer;
}

.ogig-table-shell.ogig-show-scroll-btn .ogig-scroll-btn {
  display: inline-flex;
}

.ogig-table-shell.ogig-scroll-btn-hide .ogig-scroll-btn {
  display: none !important;
}

@media (max-width: 640px) {
  .ogig-scroll-btn {
    top: 108px;
    right: 12px;
  }
}

/* ---------- Diagram aside (desktop sticky to viewport) ---------- */
.ogig-table-aside-fixed {
  display: none;
}

/* Desktop: reserve a right column for diagram */
@media (min-width: 1025px) {
  .ogig-table-shell {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;                    /* Ensures grid items don't stretch */
  }

  .ogig-table-aside-fixed {
    display: block;
    position: sticky;
    /*margin-top: 12rem;*/
    top: var(--ogig-sticky-top);           /* e.g. 140px or whatever your header needs */
    align-self: start;                     /* ← key: prevents stretching in grid */
    height: fit-content;                   /* ← crucial: size to content, not stretch */
    z-index: 3;

    background: #fff;
    border: 1px solid var(--ogig-table-border);
    border-radius: var(--ogig-table-radius);
    box-shadow: var(--ogig-table-shadow);
    padding: 12px;

    max-height: calc(100vh - var(--ogig-sticky-top) - 28px);
    overflow-y: auto;                      /* scroll inside aside if images are super tall */
  }

  .ogig-aside-stack {
    display: grid;
    gap: 12px;
  }

  .ogig-table-sticky-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: #fff;
  }
}

/* ---------- Diagram button (mobile) ---------- */
.ogig-diagram-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: none;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: var(--ogig-accent);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

@media (max-width: 1024px) {
  .ogig-diagram-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
}

/* ---------- Modal ---------- */
html.ogig-no-scroll {
  overflow: hidden;
}

.ogig-diagram-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.ogig-diagram-modal.is-open {
  display: block;
}

.ogig-diagram-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.ogig-diagram-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 920px);
  max-height: 88vh;
  background: #fff;
  border-radius: 16px;
  overflow: auto;
  padding: 14px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.35);
}

.ogig-diagram-close {
  appearance: none;
  border: 0;
  background: #fff;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 26px;
  line-height: 40px;
  font-weight: 900;
  position: sticky;
  top: 10px;
  margin-left: auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.ogig-diagram-content {
  display: grid;
  gap: 12px;
}

.ogig-diagram-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ---------- Small tweaks: make DataTables not fight your theme ---------- */
.ogig-table-main .dataTables_wrapper .dataTables_filter {
  float: right;
}
.ogig-table-main .dataTables_wrapper .dataTables_length {
  float: left;
}
.ogig-table-main .dataTables_wrapper::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 640px) {
  .ogig-table-main .dataTables_wrapper .dataTables_filter,
  .ogig-table-main .dataTables_wrapper .dataTables_length {
    float: none;
    width: 100%;
    display: block;
  }

  .ogig-table-main .dataTables_wrapper .dataTables_filter label,
  .ogig-table-main .dataTables_wrapper .dataTables_length label {
    width: 100%;
    justify-content: space-between;
  }

  .ogig-table-main .dataTables_wrapper input[type="search"],
  .ogig-table-main .dataTables_wrapper select {
    width: 60%;
  }
}
.ogig-table-outer,
.ogig-table-shell {
  overflow: visible !important;
}