/* =========================
   1auto Compare — Clean UI (single source of truth)
   ========================= */

:root{
  --a1-accent: var(--accent, #0250ce);
  --a1-border: rgba(15, 23, 42, .10);
  --a1-border-soft: rgba(15, 23, 42, .07);
  --a1-text: #0f172a;
  --a1-muted: rgba(15, 23, 42, .65);
  --a1-shadow: 0 8px 22px rgba(15, 23, 42, .08);
  --a1-radius: 14px;

  /* set by JS for sticky subheads */
  --a1-sticky-top: 0px;

  /* equal column widths support (set by JS as --a1-cols) */
  --a1-label-col: 237px;
}

/* ====== Layout ====== */
#a1-compare-wrapper{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 12px 44px;
  color: var(--a1-text);
  font-family: inherit;
}

.a1-compare-title{
  font-size: 34px;
  font-weight: 850;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.a1-compare-subtitle{
  margin: 0 0 18px;
  color: var(--a1-muted);
  font-size: 15px;
  line-height: 1.45;
}

/* ===== Empty state ===== */
.a1-compare-empty-card{
  border-radius: var(--a1-radius);
  padding: 18px 18px;
  border: 1px solid var(--a1-border);
  background: linear-gradient(180deg, #fff, rgba(15,23,42,.01));
  box-shadow: var(--a1-shadow);
}

.a1-compare-empty-title{
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
}

.a1-compare-empty-text{
  margin: 0 0 12px;
  color: var(--a1-muted);
  line-height: 1.5;
}

.a1-compare-empty-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--a1-accent) 40%, white);
  background: color-mix(in srgb, var(--a1-accent) 8%, white);
  color: var(--a1-accent);
  font-weight: 750;
  font-size: 14px;
  transition: transform .14s ease, filter .18s ease, background .18s ease;
}
.a1-compare-empty-link:hover{
  filter: brightness(.98);
  transform: translateY(-1px);
}

/* ===== Table container ===== */
.a1-compare-table-container{
  margin-top: 10px;
  border-radius: var(--a1-radius);
  background: #fff;
  box-shadow: var(--a1-shadow);
  border: 1px solid var(--a1-border);
  overflow: hidden;
}

.a1-compare-table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.a1-compare-table-scroll > .a1-compare-table{
  display: table;
}

/* ===== Table ===== */
.a1-compare-table{
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  table-layout: fixed;
}

.a1-compare-table th,
.a1-compare-table td{
  border-right: 1px solid var(--a1-border-soft);
  border-bottom: 1px solid var(--a1-border-soft);
  padding: 10px 12px;
  vertical-align: top;
  background: #fff;
  overflow: visible;
  text-overflow: clip;
}

.a1-compare-table th:last-child,
.a1-compare-table td:last-child{
  border-right: none;
}

/* Sticky header (respect dynamic top offset like admin bar etc.) */
.a1-compare-table thead th{
  position: sticky !important;
  top: var(--a1-sticky-top, 0px) !important;
  z-index: 6;
  background: #fff;
  font-weight: 800;
  text-align: left;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .10);
}

/* Left labels column */
.a1-compare-row-label{
  width: var(--a1-label-col) !important;
  background: #fbfcfe;
  font-weight: 700;
  color: rgba(15, 23, 42, .85);
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto;
  z-index: 7;
}
.a1-compare-table thead th.a1-compare-row-label{
  z-index: 8;
}

/* distribute remaining width equally across vehicle columns */
.a1-compare-table thead th.a1-compare-vehicle,
.a1-compare-table tbody td:not(.a1-compare-row-label){
  width: calc((100% - var(--a1-label-col)) / var(--a1-cols, 1)) !important;
}

/* Zebra (skip special rows) */
.a1-compare-table tbody tr:nth-child(odd):not(.a1-compare-section-row):not(.a1-compare-varustus-subhead-row):not(.a1-compare-subsection-row) td{
  background: rgba(15, 23, 42, .012);
}

/* ===== Vehicle header cells ===== */
.a1-compare-vehicle{
  text-align: center;
  position: relative;
}

.a1-compare-table thead th.a1-compare-vehicle > a{
  display:block;
  text-decoration:none !important;
  color: inherit !important;
  transition: transform .18s ease;
  will-change: transform;
}
.a1-compare-table thead th.a1-compare-vehicle > a:hover{
  transform: translateY(-2px);
}
.a1-compare-table thead th.a1-compare-vehicle > a:hover *{
  color: inherit !important;
  text-decoration: none !important;
}

.a1-compare-vehicle-thumb{
  display: block;
  margin: 6px auto 10px;
  width: 190px !important;
  height: 124px !important;
  max-width: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--a1-border);
  background: #f5f6f8;
  transition: transform .18s ease;
}
.a1-compare-table thead th.a1-compare-vehicle > a:hover .a1-compare-vehicle-thumb{
  transform: scale(1.03);
}

/* Logo + title */
.a1-compare-vehicle-title{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start; /* left align */
  gap:10px;
  width:100%;
  min-width:0;
  white-space:normal;
  overflow:visible;
  text-align:left;
}

.a1-compare-vehicle-logo-wrap{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.a1-compare-vehicle-logo-wrap:empty{ display:none; }

.a1-compare-vehicle-logo{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display:block;
}

.a1-compare-vehicle-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align:left;
}

.a1-compare-vehicle-titletext{
  font-weight: 850;
  line-height: 1.18;
  color: var(--a1-text);
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  text-align:left !important;
}

.a1-compare-vehicle-md{
  margin-top: 3px;
  font-weight: 550;
  font-size: 12px;
  opacity: .72;
  line-height: 1.25;
  text-align:left !important;
}

/* Subtle pathname under header (bottom-left aligned, non-dominant) */
.a1-compare-pathline{
  margin-top: 8px;
  font-weight: 500;                 /* NOT bold */
  font-size: 11px;                  /* smaller */
  line-height: 1.2;
  color: rgba(15,23,42,.45);        /* more subtle */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  align-self: flex-start;           /* bottom-left feel */
}

/* Remove X */
.a1-compare-remove-x{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 9999px !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  color: rgba(15, 23, 42, .65);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .10) !important;
  transition: transform .14s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.a1-compare-remove-x:hover,
.a1-compare-remove-x:focus{
  transform: scale(1.10);
  color: #e3342f;
  border-color: #e3342f !important;
  box-shadow: 0 0 0 3px rgba(227, 52, 47, 0.12) !important;
}

/* ===== Main section headings (PÕHIANDMED, VÄRVID, ...) ===== */
tr.a1-compare-section-row td.a1-compare-section{
  padding: 12px 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  background: color-mix(in srgb, var(--a1-accent) 62%, white);
  color: #fff;
  border-top: 1px solid color-mix(in srgb, var(--a1-accent) 40%, black);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* ===== Price styling ===== */
.a1-compare-price{ font-weight: 900; color: var(--a1-text); }
.a1-compare-price--discount{ color: #dc2626 !important; font-weight: 900 !important; }
.a1-compare-price-old{ text-decoration: line-through; color: rgba(15,23,42,.45); margin-right: 6px; }

.a1-compare-price-notes{
  margin-top: 6px;
  font-size: 11.5px;
  color: rgba(15, 23, 42, .62);
  line-height: 1.35;
}
.a1-compare-price-notes > div{ display:block; }

/* ===== Multi-line value renderer ===== */
.a1-compare-lines{ display:flex; flex-direction:column; gap:4px; }
.a1-compare-line{ line-height: 1.25; }

/* ===== Plus/minus feature cells ===== */
.a1-compare-pm{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}
.a1-compare-pm-sign{
  font-weight:900;
  font-size:18px;
  line-height:1;
  margin:0;
  flex:0 0 auto;
  width:14px;
  text-align:center;
}
.a1-compare-pm-sign.is-yes{ color: #0250ce !important; }
.a1-compare-pm-sign.is-no{ color: rgba(15,23,42,.32); }
.a1-compare-pm-sub{ font-size: 12px; opacity: .78; line-height: 1.2; }

/* ===== VARUSTUS + TECH subhead rows — FULL WIDTH like main headings ===== */
tr.a1-compare-varustus-subhead-row td.a1-compare-varustus-subhead,
tr.a1-compare-subsection-row td.a1-compare-subsection{
  background: #eef2f7 !important;
  border-top: 1px solid rgba(15, 23, 42, .07) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .07) !important;

  padding: 10px 64px 10px 12px !important;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;

  position: sticky;
  top: var(--a1-sticky-top);
  z-index: 5;
}

/* Toggle pill (screen only) */
.a1-compare-varustus-toggle{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  padding: 3px 0;
  text-align: center;
  border: 0;
  background: var(--a1-accent);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
  border-radius: 999px;
  line-height: 1.6;
  font-size: 13px;
  box-shadow: 0 6px 14px rgba(2, 80, 206, .22);
  transition: transform .14s ease, filter .18s ease, box-shadow .18s ease;
}
.a1-compare-varustus-toggle:hover{
  filter: brightness(.98);
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 10px 20px rgba(2, 80, 206, .26);
}

/* ===== Smaller rows (compact) ===== */
tr.a1-compare-feature-row td{
  padding-top: 7px;
  padding-bottom: 7px;
}

/* ===== Smooth slide engine (NO FADE) ===== */
tr.a1v-hidden,
tr.a1t-hidden,
tr.a1m-hidden{
  display: none;
}

tr.a1-row-animating{
  display: table-row;
}
tr.a1-row-animating td{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.a1-row-anim{
  overflow: hidden;
  max-height: 0;
  transition: max-height 360ms cubic-bezier(.2,.8,.2,1);
  will-change: max-height;
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  #a1-compare-wrapper{ padding: 12px 8px 34px; }
  .a1-compare-title{ font-size: 26px; }
  .a1-compare-subtitle{ font-size: 13px; }

  .a1-compare-vehicle-thumb{
    width: 160px !important;
    height: 108px !important;
  }
  .a1-compare-table{ min-width: 660px; }
}

/* =========================
   PRINT (no URL/buttons, landscape, show all rows)
   ========================= */

@media print{
  @page{ size:A4 landscape; margin:10mm; }

  /* Hide site header/footer + cookie manage */
  header, .site-header, #masthead, .elementor-location-header,
  footer, .site-footer, #colophon, .elementor-location-footer,
  .cmplz-manage-consent, .cmplz-cookiebanner{
    display:none !important;
  }

  /* Hide interactive compare UI */
  .a1-compare-exportbar,
  .a1-compare-print-btn,
  .a1-compare-remove-x,
  .a1-compare-varustus-toggle{
    display:none !important;
  }

  /* Stop repeating table header on each page */
  .a1-compare-table thead{
    display:table-row-group !important;
  }

  /* Remove browser-added URLs after links */
  a[href]:after{ content:"" !important; }

  /* Remove clamps so ALL lines show */
  #a1-compare-wrapper.a1-printing .a1-row-anim,
  #a1-compare-wrapper.a1-printing .a1t-anim{
    max-height:none !important;
    overflow:visible !important;
  }

  /* Ensure hidden rows become rows in print mode */
  #a1-compare-wrapper.a1-printing tr.a1v-hidden,
  #a1-compare-wrapper.a1-printing tr.a1t-hidden{
    display:table-row !important;
  }

  /* wrap all cells fully */
  .a1-compare-table td,
  .a1-compare-table th{
    white-space:normal !important;
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  .a1-compare-lines,
  .a1-compare-line{
    display:block !important;
    height:auto !important;
    overflow:visible !important;
  }

  /* Keep subhead sizing consistent */
  tr.a1-compare-varustus-subhead-row td.a1-compare-varustus-subhead,
  tr.a1-compare-subsection-row td.a1-compare-subsection{
    color:#0f172a !important;
    font-size:14px !important;
    font-weight:900 !important;
  }

  /* Path line still visible but clean */
  .a1-compare-pathline{
    display:block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Kill fancy paint complexity when background graphics is ON */
  *{
    box-shadow:none !important;
    text-shadow:none !important;
    filter:none !important;
    transform:none !important;
  }

  /* Force plain white paper look */
  .a1-compare-table-container,
  .a1-compare-table th,
  .a1-compare-table td,
  tr.a1-compare-section-row td.a1-compare-section,
  tr.a1-compare-varustus-subhead-row td,
  tr.a1-compare-subsection-row td{
    background:#fff !important;
    background-image:none !important;
  }

  /* Headings strong without background fill */
  tr.a1-compare-section-row td.a1-compare-section{
    color:#0f172a !important;
    border-top:2px solid #0f172a !important;
    border-bottom:1px solid rgba(15,23,42,.25) !important;
    letter-spacing:.06em !important;
  }

  /* WIP BELOW:*/

/* Table-integrated print footer row */
.a1-print-endnote-row{
  display: none !important;
}

@media print{
  #a1-compare-wrapper.a1-printing .a1-print-endnote-row{
    display: table-row !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  #a1-compare-wrapper.a1-printing .a1-print-endnote-cell{
    text-align: center !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    color: #0f172a !important;
    background: #fff !important;
    padding: 10px 12px 2px !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(15,23,42,.12) !important;
  }
}

}

/* =========================
   Loading overlay: spinner only, centered, no background
   ========================= */

.a1-compare-loading{
  position:fixed;
  inset:0;
  background:transparent !important;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  pointer-events:none;
}

/* Fallback spinner */
.a1-compare-spinner{
  width:42px;
  height:42px;
  border-radius:999px;
  border:3px solid rgba(2,80,206,.18);
  border-top-color: rgba(2,80,206,.95);
  animation:a1spin .8s linear infinite;
}
@keyframes a1spin{
  to{ transform:rotate(360deg); }
}

/* =========================
   Export PDF icon button (force proper sizing)
   ========================= */

.a1-compare-exportbtn{
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  background: #fff !important;

  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.10) !important;
  cursor: pointer !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: var(--a1-accent) !important;
  line-height: 1 !important;

  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

.a1-compare-exportbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15,23,42,.14) !important;
  filter: brightness(.99);
}

.a1-compare-exportbtn:active{
  transform: translateY(0px);
}

/* Kill any theme pseudo-elements that might render weird bars */
.a1-compare-exportbtn::before,
.a1-compare-exportbtn::after{
  content: none !important;
  display: none !important;
}

/* Ensure the svg renders at a sane size */
.a1-compare-exportbtn svg{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* If your button lives in a top-left "white area", keep it from shifting layout */
.a1-compare-exportbtn{
  flex: 0 0 auto !important;
}

/* Print/footer copyright spacing */
.a1-print-endnote{
  margin-top: 14px !important;
  padding-top: 6px;
}

@media print{
  footer,
  .a1-compare-footer,
  .a1-print-footer{
    margin-top: 14px !important;
  }
}

/* =========================================================
   Header cell "footer strip" for /mototehnika/1234
   ========================================================= */

.a1-compare-table thead th.a1-compare-vehicle{
  position: relative !important;
  padding-bottom: 44px !important; /* reserve room for the strip */
}

/* Path strip */
.a1-compare-pathline{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  margin: 0 !important;
  padding: 9px 12px !important;

  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: rgba(15,23,42,.55) !important;

  text-align: left !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* "compartment" look */
  border-top: 1px solid rgba(15,23,42,.08) !important;
}

/* Print logo inside table header (works even when Background graphics is OFF) */
.a1-print-logo{ display:none; }

@media print{
  .a1-print-logo{
    display:block !important;
    margin: 0 0 6mm 0 !important;
  }
  .a1-print-logo img{
    height: 28mm !important;
    width: auto !important;
    display:block !important;
  }

  /* keep it visually top-left */
  th.a1-compare-row-label{
    vertical-align: top !important;
  }
}

/* =========================
   PDF logo — align with listing images (pixel perfect)
   ========================= */

/* The table header row defines the vertical rhythm */
.a1-compare-table thead{
  position: relative;
}

/* Logo container */
.a1-compare-pdf-logo{
  position: absolute;

  /* Align to SAME top as vehicle thumbnails */
  top: calc(6px + 10px); 
  /* 6px = thumb margin-top
     10px = th padding-top
     (matches .a1-compare-vehicle-thumb exactly) */

  left: 12px; /* same as cell padding */

  width: 200px;          /* stable, not tiny */
  height: auto;

  z-index: 9;            /* above table chrome, below close buttons */
  pointer-events: none;  /* never interfere */
}

/* Logo image itself */
.a1-compare-pdf-logo img{
  display: block;
  width: 200px;
  height: auto;
  max-width: none;
}

@media print{
  .a1-compare-pdf-logo{
    top: calc(6px + 10px) !important;
    left: 12px !important;
  }
}

/* === FINAL logo vertical alignment tweak === */
.a1-print-logo{
  margin-top: 7px !important; /* ? move logo down gently */
}

/* ===== RATTAD inner-table: remove top/bottom strips + align borders like VARUSTUS ===== */

td.a1v-inner-wrap{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;           /* removes the “strip” seams */
}

.a1-row-anim.a1v-inner-anim{
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Make the inner table behave like part of the main table grid */
table.a1v-inner-table{
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

/* Ensure borders come from inner cells, not wrapper */
table.a1v-inner-table td{
  border-bottom: 1px solid var(--a1-border-soft) !important;
  border-right: 1px solid var(--a1-border-soft) !important;
}

/* Respect your existing “no right border on last column” */
table.a1v-inner-table td:last-child{
  border-right: none !important;
}

/* Remove an extra bottom line that can appear as a “strip” */
table.a1v-inner-table tbody tr:last-child td{
  border-bottom: none !important;
}

/* ===== INNER RATTAD zebra: force it purely via CSS (no JS) ===== */

/* Ensure inner rows can actually show zebra (some rules force td to white) */
td.a1v-inner-wrap table.a1v-inner-table tbody tr > td{
  background-color: #fff !important;
}

/* ===== INNER RATTAD zebra: EXACTLY like main table (row-wide, no label exceptions) ===== */

td.a1v-inner-wrap table.a1v-inner-table tbody tr > td{
  background: #fff !important;
}

td.a1v-inner-wrap table.a1v-inner-table tbody tr:nth-child(odd) > td{
  background: rgba(15, 23, 42, .012) !important;
}

/* ===== FIX: Inner RATTAD labels must look EXACTLY like VARUSTUS (e.g. Sõiduabid) ===== */

/* 1) Restore label typography for inner tables (bold + same color as normal left column) */
td.a1v-inner-wrap table.a1v-inner-table td.a1-compare-row-label{
  font-weight: 700 !important;
  color: #0f172a !important;         /* same “strong text” look as Sõiduabid */
  line-height: 1.2 !important;
}

/* 2) Ensure inner value cells use the same base text styling as the main table */
td.a1v-inner-wrap table.a1v-inner-table td.a1-compare-cell{
  font-weight: 400 !important;
  color: #0f172a !important;
}

/* 3) Keep the same padding as the main table (prevents “off” alignment feel) */
td.a1v-inner-wrap table.a1v-inner-table td{
  padding: 10px 12px !important;
}

/* =========================
   ADD-ON v2: Compare UX fixes
   - Loader lasts until table is truly settled
   - Real sticky bar for logo + make/model
   - Left align header images
   ========================= */

/* Left-align the picture in header cells */
.a1-compare-vehicle-thumb{
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ---------- Loader overlay (OURS only; do NOT clone theme loader) ---------- */
#a1-compare-loading{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;           /* no ugly white flash (this IS the cover) */
  opacity: 1;
}
#a1-compare-loading.is-hidden{ display: none !important; }