/* SER-OS — Compare overlay styles (desktop + mobile) */

/* ── Overlay backdrop ──────────────────────────────────────── */
.ser-compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* NO overflow:hidden — it intercepts touch-scroll events on iOS before
     they reach the inner scroll container. Use overscroll-behavior instead. */
  overscroll-behavior: none;
  animation: ser-compare-overlay-in 200ms ease-out;
}

@keyframes ser-compare-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Panel ─────────────────────────────────────────────────── */
.ser-compare-overlay-panel {
  width: 100%;
  max-width: 1280px;
  max-height: 92vh;
  background: #FFFFFF;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12), 0 12px 24px rgba(15, 23, 42, 0.08);
}

/* Scrollable body — display:block is required for iOS Safari scroll to work */
.ser-compare-overlay-panel-body {
  flex: 1;
  min-height: 0;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
}

/* Sheet body — must be display:block (not flex) for overflow-y:auto to work
   on iOS Safari. Flex containers with overflow-y:auto don't scroll on iOS. */
.ser-compare-sheet-body {
  flex: 1;
  min-height: 0;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Header */
.ser-compare-sheet-header {
  padding: 20px 28px 14px;
  flex-shrink: 0;
}

/* Grab handle — hidden on all viewports (no drag-to-close) */
.ser-compare-sheet-handle { display: none; }
.ser-compare-sheet-grabber {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #D1D5DB;
}

/* ── Cards grid ────────────────────────────────────────────── */
.ser-compare-cards {
  display: grid;
  grid-template-columns: repeat(var(--compare-cols, 2), minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.ser-compare-card-slot {
  min-width: 0;
}

/* Carousel hint text — hidden on desktop */
.ser-compare-carousel-hint {
  display: none;
  font-size: 12px;
  color: #6B7A8F;
  text-align: center;
  margin: 0 0 10px;
  letter-spacing: -0.1px;
}

/* Subtitle variants */
.ser-compare-subtitle-mobile  { display: none; }
.ser-compare-subtitle-desktop { display: inline; }

/* ── Attribute table (desktop) ─────────────────────────────── */
.ser-compare-attrs--table {
  display: block;
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
}

/* ── Attribute stack (mobile) — hidden on desktop ──────────── */
.ser-compare-attrs--stack {
  display: none;
  flex-direction: column;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
}
.ser-compare-attr-stack {
  display: grid;
  grid-template-columns: repeat(var(--compare-cols, 2), minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 767px) {
  .ser-compare-attr-stack {
    grid-template-columns: repeat(var(--compare-cols, 2), minmax(140px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ser-compare-attr-stack::-webkit-scrollbar { display: none; }
}
.ser-compare-attr-stack-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #F8FAFC;
  border-radius: 8px;
  border: 1px solid #EEF2F6;
  min-width: 0;
}
.ser-compare-attr-stack-name {
  font-size: 12px;
  font-weight: 600;
  color: #6B7A8F;
  letter-spacing: -0.05px;
  line-height: 1.3;
}
.ser-compare-attr-stack-value {
  font-size: 14px;
  line-height: 1.4;
  color: #1F3A60;
  letter-spacing: -0.15px;
  word-break: break-word;
}
.ser-compare-attr-stack-value--price {
  font-size: 17px;
  font-weight: 600;
  font-feature-settings: "tnum";
}
.ser-compare-attr-stack-value--block {
  font-size: 13px;
  color: #574F40;
  line-height: 1.45;
}

/* ── Mobile (≤ 767px) ──────────────────────────────────────── */
@media (max-width: 767px) {
  /* Full-screen modal — fills the viewport with a small gap at top */
  .ser-compare-overlay {
    align-items: flex-end;
    padding: 0;
    background: rgba(15, 23, 42, 0.5);
  }
  .ser-compare-overlay-panel {
    max-width: 100%;
    width: 100%;
    max-height: calc(100vh - env(safe-area-inset-top, 16px) - 40px);
    border-radius:  0;
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.18);
    animation: ser-compare-modal-in 0.22s ease-out both;
  }
  @keyframes ser-compare-modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .ser-compare-overlay-panel-body.ser-compare-sheet-body {
    padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Grab handle hidden — no drag-to-close, close button is used instead */
  .ser-compare-sheet-handle { display: none; }

  /* Tighter header */
  .ser-compare-sheet-header { padding: 14px 16px; }

  /* Swipe hint */
  .ser-compare-carousel-hint { display: block; }

  /* Subtitle swap */
  .ser-compare-subtitle-mobile  { display: inline; }
  .ser-compare-subtitle-desktop { display: none; }

  /* Cards: horizontal snap carousel */
  .ser-compare-cards {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
    padding: 0 16px 8px;
    scrollbar-width: none;
  }
  .ser-compare-cards::-webkit-scrollbar { display: none; }

  .ser-compare-card-slot {
    flex: 0 0 calc(100vw - 48px);
    max-width: 360px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Table hidden, stack shown */
  .ser-compare-attrs--table { display: none !important; }
  .ser-compare-attrs--stack {
    display: flex;
    margin: 0 16px 8px;
  }

  /* Attribute row resets */
  .ser-compare-attr-row {
    padding: 14px;
    border-bottom: 1px solid #F0F1F4;
    background: #FFFFFF;
  }
  .ser-compare-attr-row:last-child { border-bottom: none; }
  .ser-compare-attr-row--highlight { background: #EFE7D4; }
  .ser-compare-attr-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6B7A8F;
    margin-bottom: 10px;
  }

  /* Inline compare (Package screen) — bleed carousel to viewport edges */
  .ser-compare-inline {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }
  .ser-compare-inline > div:first-of-type,
  .ser-compare-inline > .ser-compare-carousel-hint {
    margin-left: 16px;
    margin-right: 16px;
    width: auto;
  }
}

/* ── Tablet portrait (768–1023px) — side-by-side; landscape uses desktop ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .ser-compare-overlay {
    align-items: center;
    padding: 24px;
  }
  .ser-compare-overlay-panel {
    max-width: min(1100px, calc(100vw - 48px));
    width: 100%;
    max-height: min(92vh, 900px);
    border-radius: 12px;
  }

  /* Package/casket header cards stay in a real grid */
  .ser-compare-cards {
    display: grid;
    grid-template-columns: repeat(var(--compare-cols, 2), minmax(0, 1fr));
    gap: 16px;
    overflow-x: visible;
    padding: 0;
    margin-bottom: 20px;
  }
  .ser-compare-card-slot {
    flex: unset;
    max-width: none;
    min-width: 0;
  }

  /* Attribute matrix — columns per package, rows per category.
     Do not set touch-action: pan-x — it blocks vertical page scroll when
     the finger is on the matrix (package inline compare + casket overlay). */
  .ser-compare-attrs--table {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ser-compare-attrs--stack {
    display: none !important;
  }

  .ser-compare-carousel-hint { display: none; }
  .ser-compare-subtitle-mobile { display: none; }
  .ser-compare-subtitle-desktop { display: inline; }

  .ser-compare-inline {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}