/*
 * GT Center — Produktjämförelse
 * Component: compare
 * Root font size: 62.5% (1rem = 10px)
 */

/* ── Wrapper ──────────────────────────────────────────────── */
.gtc-compare {
  --gtc-font-display: 'Barlow Semi Condensed', sans-serif;
  --gtc-font-body:    'Barlow', sans-serif;
  width: 100%;
}

.gtc-compare__actions {
  margin-bottom: 2.4rem;
}

.gtc-compare__back {
  font-size:      1.3rem;
  font-weight:    600;
  text-decoration: none;
  color:          inherit;
  opacity:        0.45;
  transition:     opacity 0.15s;
}
.gtc-compare__back:hover { opacity: 1; }

/* ── Scroll-wrap (horisontell scroll på mobil) ────────────── */
.gtc-compare__table-wrap {
  width:    100%;
  overflow-x: auto;
}

/* ── Tabell ───────────────────────────────────────────────── */
.gtc-compare__table {
  width:           100%;
  border-collapse: collapse;
  table-layout:    fixed;
}

/* Etikett-kolumn */
.gtc-compare__label-col {
  width: 18rem;
}

/* ── Header-rad ───────────────────────────────────────────── */
.gtc-compare__row--header th {
  vertical-align: bottom;
  padding:        0 2rem 2.4rem;
  border-bottom:  2px solid rgba(128,128,128,0.15);
}

.gtc-compare__label-col {
  padding-left: 0 !important;
}

.gtc-compare__product-link {
  display:         flex;
  flex-direction:  column;
  gap:             1.2rem;
  text-decoration: none;
  color:           inherit;
}

.gtc-compare__product-img {
  aspect-ratio: 4 / 3;
  overflow:     hidden;
  border-radius: 2px;
}

.gtc-compare__product-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.4s ease;
}
.gtc-compare__product-link:hover .gtc-compare__product-img img {
  transform: scale(1.03);
}

.gtc-compare__product-title {
  font-family: var(--gtc-font-display);
  font-weight: 700;
  font-size:   2rem;
  line-height: 1.15;
}

.gtc-compare__remove {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  margin-top:      1rem;
  line-height:	   1;
  padding:         0.5rem 1rem 0.5rem 0.8rem;
  font-family:     'Barlow Semi Condensed', sans-serif;
  font-size:       1.1rem;
  font-weight:     700;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  text-decoration: none;
  color:           inherit;
  background:      rgba(128,128,128,0.08);
  border-radius:   3px;
  opacity:         0.6;
  transition:      opacity 0.15s, background 0.15s, color 0.15s;
}

.gtc-compare__remove::before {
  content: "×";
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}

.gtc-compare__remove:hover {
  opacity:    1;
  background: rgba(220,60,60,0.12);
  color:      #b32020;
}

/* ── Spec-rader ───────────────────────────────────────────── */
.gtc-compare__row td {
  padding:       1.4rem 2rem;
  border-bottom: 1px solid rgba(128,128,128,0.1);
  vertical-align: middle;
  font-size:     1.5rem;
  transition:    background 0.12s;
}

.gtc-compare tbody .gtc-compare__row:hover td {
  background: rgba(128,128,128,0.06);
}

.gtc-compare__label {
  font-family:    var(--gtc-font-display);
  font-weight:    700;
  font-size:      1.5rem;
  color:          rgba(27,25,16,0.55); /* dämpad text utan opacity (sticky-cellen måste vara solid) */
  padding-left:   0 !important;
  white-space:    nowrap;
}

.gtc-compare__value {
  font-family: var(--gtc-font-body);
  font-weight: 500;
  font-size:   1.5rem;
}

.gtc-compare__value--empty {
  font-weight: 400;
}

.gtc-compare__dash {
  opacity: 0.25;
}

/* ── CTA-rad ──────────────────────────────────────────────── */
.gtc-compare__row--cta td {
  padding-top:    2.4rem;
  border-bottom:  none;
}

.gtc-compare__cta {
  font-family:     var(--gtc-font-display);
  font-weight:     700;
  font-size:       1.4rem;
  letter-spacing:  0.04em;
  text-decoration: none;
  color:           inherit;
  opacity:         0.5;
  transition:      opacity 0.15s;
}
.gtc-compare__cta:hover { opacity: 1; }

/* ── Tom state ────────────────────────────────────────────── */
.gtc-compare__empty-msg {
  font-size: 1.6rem;
  opacity:   0.45;
}

/* ═══════════════════════════════════════════════════════════
   FLYTANDE JÄMFÖRELSEPANEL
   ═══════════════════════════════════════════════════════════ */

.gtc-compare-bar {
  position: fixed;
  left:     50%;
  bottom:   2rem;
  transform: translate(-50%, calc(100% + 4rem));
  z-index:  9999;
  width:    auto;
  max-width: calc(100vw - 4rem);
  background: #1B1910;
  color:     #EAE5D4;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
  font-family: 'Barlow', sans-serif;
}

.gtc-compare-bar.is-visible {
  transform: translate(-50%, 0);
}

.gtc-compare-bar__inner {
  display:     flex;
  align-items: center;
  gap:         1.6rem;
  padding:     1.2rem 1.6rem;
}

.gtc-compare-bar__label {
  font-family:    'Barlow Semi Condensed', sans-serif;
  font-weight:    700;
  font-size:      1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity:        0.55;
  white-space:    nowrap;
}

.gtc-compare-bar__items {
  display: flex;
  gap:     0.8rem;
}

.gtc-compare-bar__item {
  position:    relative;
  display:     flex;
  align-items: center;
  gap:         0.8rem;
  padding:     0.4rem 2.4rem 0.4rem 0.4rem;
  background:  rgba(255,255,255,0.06);
  border-radius: 3px;
}

.gtc-compare-bar__item img {
  width:       4rem;
  height:      4rem;
  object-fit:  cover;
  border-radius: 2px;
  display:     block;
}

.gtc-compare-bar__item-title {
  font-size:   1.3rem;
  font-weight: 600;
  white-space: nowrap;
  max-width:   16rem;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.gtc-compare-bar__remove {
  position: absolute;
  top:      50%;
  right:    0.3rem;
  transform: translateY(-50%);
  width:    2rem;
  height:   2rem;
  background: #d23b3b;
  border:   0;
  border-radius: 50%;
  cursor:   pointer;
  padding:  0;
  font-size: 0; /* dölj text-× — krysset ritas nedan */
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: background 0.15s;
}
.gtc-compare-bar__remove::before,
.gtc-compare-bar__remove::after {
  content:  "";
  position: absolute;
  top:      50%;
  left:     50%;
  width:    0.9rem;
  height:   0.15rem;
  background: #fff;
  border-radius: 1px;
}
.gtc-compare-bar__remove::before { transform: translate(-50%,-50%) rotate(45deg); }
.gtc-compare-bar__remove::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.gtc-compare-bar__remove:hover { background: #b32020; }

.gtc-compare-bar__go {
  display:         inline-flex;
  align-items:     center;
  padding:         1rem 1.6rem;
  background:      #F5C400;
  color:           #1B1910 !important;
  font-family:     'Barlow Semi Condensed', sans-serif;
  font-weight:     700;
  font-size:       1.3rem;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  text-decoration: none;
  border-radius:   3px;
  white-space:     nowrap;
  transition:      background 0.15s, color 0.15s;
}
.gtc-compare-bar__go:hover {
  background: #FFD835;
  color:      #1B1910 !important;
}
.gtc-compare-bar__go.is-disabled {
  background: rgba(255,255,255,0.08);
  color:      #EAE5D4;
  opacity:    0.7;
  pointer-events: none;
}

.gtc-compare-bar__clear {
  background: transparent;
  border:     0;
  color:      inherit;
  opacity:    0.4;
  font-size:  2rem;
  line-height: 1;
  cursor:     pointer;
  padding:    0.4rem 0.6rem;
}
.gtc-compare-bar__clear:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   JÄMFÖRELSE-MODAL
   ═══════════════════════════════════════════════════════════ */
.gtc-compare-modal {
  position: fixed;
  inset:    0;
  z-index:  10000;
  display:  none;
}
.gtc-compare-modal.is-open { display: block; }

.gtc-compare-modal__overlay {
  position:   absolute;
  inset:      0;
  background: rgba(27,25,16,0.6);
  backdrop-filter: blur(2px);
}

.gtc-compare-modal__dialog {
  position:      relative;
  max-width:     110rem;
  width:         calc(100% - 4rem);
  max-height:    calc(100vh - 6rem);
  margin:        3rem auto;
  background:    #fff;
  border-radius: 6px;
  overflow:      auto;
  box-shadow:    0 20px 60px rgba(0,0,0,0.35);
}

.gtc-compare-modal__close {
  position:    sticky;
  top:         0;
  margin-left: auto;
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       4.4rem;
  height:      4.4rem;
  border:      0;
  background:  none;
  font-size:   2.8rem;
  line-height: 1;
  cursor:      pointer;
  color:       #1B1910;
  float:       right;
}
.gtc-compare-modal__close:hover { opacity: 0.6; }

.gtc-compare-modal__body { padding: 1rem 2.5rem 3rem; }

.gtc-compare-modal__loading {
  padding:    6rem 2rem;
  text-align: center;
  font-family:'Barlow Semi Condensed', sans-serif;
  font-size:  1.8rem;
  opacity:    0.6;
}

body.gtc-modal-open { overflow: hidden; }

/* Markerad "vald"-state på kortikonen */
.gtc-card__compare.is-selected {
  opacity:    1;
  background: #F5C400;
  color:      #1B1910;
}

/* Låst — produkt i annan kategori än pågående jämförelse */
.gtc-card__compare.is-cat-locked {
  opacity: 0.2;
}
.gtc-card__compare.is-cat-locked:hover {
  opacity: 0.4;
}

/* ── Responsiv panel — bottom sheet ──────────────────────── */
@media (max-width: 700px) {
  .gtc-compare-bar {
    left:          0;
    right:         0;
    bottom:        0;
    max-width:     none;
    width:         auto;
    border-radius: 8px 8px 0 0;
    transform:     translateY(100%);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .gtc-compare-bar.is-visible { transform: translateY(0); }

  .gtc-compare-bar__inner  { flex-wrap: wrap; gap: 1rem 0.8rem; padding: 1.2rem 1.4rem; }
  .gtc-compare-bar__label  { display: none; }

  /* Valda produkter: lika breda kolumner som fyller hela ytan */
  .gtc-compare-bar__items  {
    flex:             1 1 100%;
    order:            1;
    display:          grid;
    grid-auto-flow:   column;
    grid-auto-columns: 1fr;
    gap:              0.8rem;
  }
  .gtc-compare-bar__item       { padding: 0; }
  .gtc-compare-bar__item img   { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .gtc-compare-bar__item-title { display: none; }
  .gtc-compare-bar__remove     { top: 0.3rem; right: 0.3rem; transform: none; }

  /* Visa jämförelse: full bredd under produkterna */
  .gtc-compare-bar__go    { order: 2; flex: 1 1 auto; justify-content: center; }
  .gtc-compare-bar__clear { order: 3; }
}

/* ── Responsiv tabell — scroll + fast etikettkolumn ──────── */
@media (max-width: 700px) {
  .gtc-compare__table-wrap { -webkit-overflow-scrolling: touch; }

  /* Auto-layout + min-bredd → kolumnerna klams inte ihop, wrappen scrollar.
     border-collapse: separate krävs för att sticky-cellens bakgrund ska målas
     pålitligt (annars lyser scrollande innehåll igenom). */
  .gtc-compare__table {
    table-layout:    auto;
    width:           auto;
    min-width:       100%;
    border-collapse: separate;
    border-spacing:  0;
  }

  /* Produktkolumner får ordentlig bredd så rubrik/värde inte radbryts tecken-vis */
  .gtc-compare__product-col,
  .gtc-compare__value { min-width: 13rem; }

  /* Etikettkolumnen fryses till vänster vid scroll — helt täckande + skugga på högerkant */
  .gtc-compare__label-col,
  .gtc-compare__label {
    position:   sticky;
    left:       0;
    z-index:    3;
    background: #fff;
    width:      11rem;
    min-width:  11rem;
  }
  /* Skugga endast på dataraderna, inte i header-delen.
     Ta bort radlinjen på den frysta kolumnen så skuggan blir obruten. */
  .gtc-compare__label {
    box-shadow:    6px 0 8px -4px rgba(0,0,0,0.18);
    border-bottom: none;
  }

  .gtc-compare__row td { padding: 1rem 1.2rem; }
  .gtc-compare__product-title { font-size: 1.5rem; line-height: 1.2; }
  .gtc-compare__product-img { max-width: 9rem; }
}

/* ── Responsiv modal — nästan helskärm ───────────────────── */
@media (max-width: 700px) {
  .gtc-compare-modal__dialog {
    width:        100%;
    max-height:   100vh;
    margin:       0;
    border-radius: 0;
  }
  .gtc-compare-modal__body { padding: 0.5rem 1.4rem 2.5rem; }
  .gtc-compare-modal__close { width: 5rem; height: 5rem; }
}