/**
 * Elementor Comparison Table - Frontend Styles
 * Eco Organic Design System
 * Version: 1.0.0
 *
 * Uses CSS custom properties injected by the PHP widget
 * via inline styles on the .ect-wrap element.
 */

/* ============================================
   1. WRAPPER — Scroll container, border, radius
   ============================================ */
.ect-wrap {
  position: relative;
  background-color: var(--ect-table-bg, #ffffff);
  border: var(--ect-table-border-width, 1px)
    var(--ect-table-border-style, solid) var(--ect-table-border-color, #fff0db);
  border-radius: var(--ect-table-border-radius, 24px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  transition: border-color var(--ect-transition-duration, 0.2s)
    var(--ect-transition-easing, ease);
}

/* Hide visual scrollbar while keeping scroll functionality. */
.ect-wrap.ect-hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ect-wrap.ect-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ============================================
   2. CUSTOM SCROLLBAR — WebKit (Chrome, Safari, Edge)
   ============================================ */
.ect-wrap::-webkit-scrollbar {
  height: 9px;
}

.ect-wrap::-webkit-scrollbar-track {
  background: #f4f8f1;
  border-radius: var(--ect-table-border-radius, 24px);
}

.ect-wrap::-webkit-scrollbar-thumb {
  background: var(--ect-scrollbar-thumb, #ffaa55);
  border-radius: var(--ect-table-border-radius, 24px);
}

/* ============================================
   3. FIREFOX SCROLLBAR
   ============================================ */
.ect-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--ect-scrollbar-thumb, #ffaa55) #f4f8f1;
}

/* ============================================
   4. TABLE — Base styles
   ============================================ */
.ect-table {
  width: 100%;
  min-width: var(--ect-table-min-width, 0);
  border-collapse: collapse;
  table-layout: fixed;
  background-color: var(--ect-table-bg, #ffffff);
  margin: 0;
  border: none;
  font-family: inherit;
}

/* ============================================
   5. COLUMN WIDTHS — Label & Product columns
   ============================================ */
.ect-col-label {
  width: var(--ect-label-col-width, 190px);
  min-width: var(--ect-label-col-width, 190px);
  max-width: var(--ect-label-col-width, 190px);
}

.ect-col-prod {
  width: var(--ect-product-col-width, 150px);
  min-width: var(--ect-product-col-width, 150px);
}

/* ============================================
   6. FEATURED COLUMN WIDTH
   ============================================ */
.ect-col-prod.ect-col-featured {
  width: calc(var(--ect-product-col-width, 150px) + 10px);
  min-width: calc(var(--ect-product-col-width, 150px) + 10px);
}

/* ============================================
   7. HEADER CELLS
   ============================================ */
.ect-table th {
  padding: var(--ect-header-padding-top, 24px)
    var(--ect-header-padding-right, 10px) var(--ect-header-padding-bottom, 24px)
    var(--ect-header-padding-left, 10px);
  vertical-align: top;
  border: 0;
  border-top: 0 !important;
  border-bottom: 2px solid var(--ect-header-border-color, #fff0db);
  background-color: var(--ect-header-bg, #ffffff);
  font-weight: normal;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

/* ============================================
   8. BODY CELLS
   ============================================ */
.ect-table td {
  padding: var(--ect-cell-padding-top, 16px) var(--ect-cell-padding-right, 10px)
    var(--ect-cell-padding-bottom, 16px) var(--ect-cell-padding-left, 10px);
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid var(--ect-border-cell, #fff0db);
  background-color: transparent;
  text-align: center;
  box-sizing: border-box;
  transition: background-color var(--ect-transition-duration, 0.2s)
    var(--ect-transition-easing, ease);
}

/* Remove bottom border from the last row's cells. */
.ect-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* ============================================
   9. FEATURED COLUMN BACKGROUND
   ============================================ */
th.ect-featured,
td.ect-featured {
  background-color: var(--ect-featured-bg, #fff5e6);
}

th.ect-featured {
  border-bottom: 2px solid var(--ect-header-border-color, #fff0db);
}

/* ============================================
   10. FEATURED COLUMN HOVER
   ============================================ */
.ect-table tr:hover td.ect-featured {
  background-color: var(--ect-featured-bg-hover, #ffe4c2);
}

/* ============================================
   11. LABEL COLUMN — Left-aligned, sticky-capable
   ============================================ */
.ect-label {
  text-align: left;
  background-color: var(--ect-label-bg, #ffffff);
  color: var(--ect-label-color, #8c6b40);
  font-size: var(--ect-label-font-size, 13px);
  font-weight: var(--ect-label-font-weight, 600);
  line-height: var(--ect-label-line-height, 1.4);
  padding-left: 24px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ============================================
   12. ROW HOVER — Non-featured columns
   ============================================ */
.ect-table tbody tr:hover td:not(.ect-label):not(.ect-featured) {
  background-color: var(--ect-row-hover-bg, #fff8ed);
}

.ect-table tbody tr:hover td.ect-label {
  background-color: var(--ect-row-hover-bg, #fff8ed);
}

/* ============================================
   13. HEADER CONTAINER — Flexbox column layout
   ============================================ */
.ect-th-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 100%;
}

/* ============================================
   14. EMPTY HEADER CORNER CELL
   ============================================ */
.ect-th-empty {
  background-color: var(--ect-label-bg, #ffffff);
  border-bottom: 2px solid var(--ect-header-border-color, #fff0db);
}

/* ============================================
   15. BADGE WRAP — FIXED 22px height for alignment
   ============================================ */
.ect-badge-wrap {
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 1;
}

/* ============================================
   16. PRODUCT LOGO
   ============================================ */
.ect-logo {
  height: 42px;
  width: 85px;
  aspect-ratio: 85 / 42;
  object-fit: contain;
  object-position: center;
  margin-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   17. PRODUCT NAME
   ============================================ */
.ect-name {
  font-size: var(--ect-name-font-size, 16px);
  font-weight: var(--ect-name-font-weight, 700);
  color: var(--ect-name-color, #3d2b15);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  text-align: center;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ============================================
   18. RATING PILL
   ============================================ */
.ect-rating {
  font-size: var(--ect-rating-font-size, 13px);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ect-rating-text, #cc6a00);
  background-color: var(--ect-rating-bg, #fff5e6);
  border: 1px solid rgba(255, 136, 0, 0.1);
  padding: var(--ect-rating-padding, 4px 10px);
  border-radius: var(--ect-rating-radius, 16px);
  box-shadow: 0 1px 2px rgba(34, 49, 29, 0.05);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.3;
  min-width: 44px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ect-rating:hover {
  box-shadow: 0 2px 5px rgba(34, 49, 29, 0.08);
}

/* Text rating style variants */

.ect-rating.ect-rating-style-minimal {
  background-color: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: auto;
}

.ect-rating.ect-rating-style-minimal:hover {
  box-shadow: none;
}

.ect-rating.ect-rating-style-brackets {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0 8px;
  min-width: auto;
}

.ect-rating.ect-rating-style-brackets::before,
.ect-rating.ect-rating-style-brackets::after {
  color: var(--ect-rating-text, #cc6a00);
  opacity: 0.45;
  font-weight: 400;
}

.ect-rating.ect-rating-style-brackets::before {
  content: "[";
  margin-right: 5px;
}

.ect-rating.ect-rating-style-brackets::after {
  content: "]";
  margin-left: 5px;
}

/* ============================================
   19. BADGES — Product header badges only (ect-badge-best, ect-badge-alt, ect-badge-featured)
   ============================================ */
.ect-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ect-badge-best {
  background-color: #e6f4ea;
  color: #137333;
}

.ect-badge-alt {
  background-color: #fdf2e9;
  color: #b06000;
}

.ect-badge-featured {
  background-color: var(--ect-primary, #ff8800);
  color: #ffffff;
}

/* ============================================
   20. BUTTONS — Base + Primary + Secondary
   ============================================ */
.ect-btn {
  display: inline-block;
  font-family: inherit;
  font-size: var(--ect-btn-font-size, 13px);
  font-weight: var(--ect-btn-font-weight, 600);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: var(--ect-btn-radius, 30px);
  padding: var(--ect-btn-padding, 10px 16px);
  width: 100%;
  transition:
    background-color var(--ect-transition-duration, 0.2s)
      var(--ect-transition-easing, ease),
    color var(--ect-transition-duration, 0.2s)
      var(--ect-transition-easing, ease),
    border-color var(--ect-transition-duration, 0.2s)
      var(--ect-transition-easing, ease),
    transform var(--ect-transition-duration, 0.2s)
      var(--ect-transition-easing, ease);
  box-sizing: border-box;
}

.ect-wrap .ect-btn-primary {
  background-color: var(--ect-btn-primary-bg, #ff8800);
  color: var(--ect-btn-primary-text, #ffffff);
  border: 1px solid var(--ect-btn-primary-bg, #ff8800);
}

.ect-wrap .ect-btn-primary:hover {
  background-color: var(--ect-btn-primary-bg-hover, #e67300);
  border-color: var(--ect-btn-primary-bg-hover, #e67300);
  color: var(--ect-btn-primary-text-hover, #ffffff);
}

.ect-wrap .ect-btn-secondary {
  background-color: var(--ect-btn-secondary-bg, #fff5e6);
  color: var(--ect-btn-secondary-text, #cc6a00) !important;
  border: 1px solid var(--ect-btn-secondary-border, #ffcc80);
}

.ect-wrap .ect-btn-secondary:hover {
  background-color: var(--ect-btn-secondary-bg-hover, #ffe4c2);
  color: var(--ect-btn-secondary-text-hover, #b35900) !important;
  border-color: var(--ect-btn-secondary-border-hover, #ffb84d);
}

/* ============================================
   21. ICONS — Check & Cross
   ============================================ */
.ect-icon-check {
  color: var(--ect-check-color, #ff8800);
  font-weight: bold;
  line-height: 1;
  display: inline-block;
}

.ect-icon-cross {
  color: var(--ect-cross-color, #c2cbd1);
  line-height: 1;
  display: inline-block;
}

.ect-cell .ect-icon-primary,
.ect-cell .ect-icon-primary.ect-icon-check,
.ect-cell .ect-icon-primary.ect-icon-cross,
.ect-cell .ect-icon-primary svg {
  color: var(--ect-icon-primary, #ff8800);
  fill: var(--ect-icon-primary, #ff8800);
}

.ect-cell .ect-icon-success,
.ect-cell .ect-icon-success.ect-icon-check,
.ect-cell .ect-icon-success.ect-icon-cross,
.ect-cell .ect-icon-success svg {
  color: var(--ect-icon-success, #5a8c4c);
  fill: var(--ect-icon-success, #5a8c4c);
}

.ect-cell .ect-icon-danger,
.ect-cell .ect-icon-danger.ect-icon-check,
.ect-cell .ect-icon-danger.ect-icon-cross,
.ect-cell .ect-icon-danger svg {
  color: var(--ect-icon-danger, #d9534f);
  fill: var(--ect-icon-danger, #d9534f);
}

.ect-cell .ect-icon-warning,
.ect-cell .ect-icon-warning.ect-icon-check,
.ect-cell .ect-icon-warning.ect-icon-cross,
.ect-cell .ect-icon-warning svg {
  color: var(--ect-icon-warning, #f0ad4e);
  fill: var(--ect-icon-warning, #f0ad4e);
}

.ect-cell .ect-icon-muted,
.ect-cell .ect-icon-muted.ect-icon-check,
.ect-cell .ect-icon-muted.ect-icon-cross,
.ect-cell .ect-icon-muted svg {
  color: var(--ect-icon-muted, #c2cbd1);
  fill: var(--ect-icon-muted, #c2cbd1);
}

/* ============================================
   22. FEATURED TEXT — Emphasis in featured column
   ============================================ */
.ect-featured-text {
  font-weight: 700;
  color: var(--ect-name-color, #3d2b15);
}

/* ============================================
   23. CELL IMAGES — Images inside body cells
   ============================================ */
.ect-cell-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
}

/* ============================================
   23a. IMAGE WRAPPER — Container for logo and cell images
   Supports overlay pseudo-element for color overlays.
   ============================================ */
.ect-image-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  overflow: hidden;
}

.ect-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  pointer-events: none;
  z-index: 1;
  transition: background-color 0.2s ease;
}

/* ============================================
   24. RATING CELL — Rating inside body cells
   ============================================ */
.ect-rating-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ect-rating-text, #cc6a00);
}

.ect-rating-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 14px;
}

.ect-rating-stars .fa-star,
.ect-rating-stars .fa-star-half-alt,
.ect-rating-stars .far.fa-star {
  font-size: 14px;
}

/* ============================================
   28. STICKY HEADER — Optional sticky header
   ============================================ */
.ect-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--ect-header-bg, #ffffff);
  box-shadow: 0 1px 0 var(--ect-header-border-color, #fff0db);
}

.ect-sticky-header.ect-wrap {
  overflow-y: auto;
  max-height: 70vh;
}

/* ============================================
   29. ENTRANCE ANIMATION
   ============================================ */
.ect-animated {
  animation: ectFadeIn var(--ect-transition-duration, 0.5s)
    var(--ect-transition-easing, ease-out) both;
}

@keyframes ectFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation for table rows */
.ect-animated tbody tr {
  animation: ectFadeIn var(--ect-transition-duration, 0.4s)
    var(--ect-transition-easing, ease-out) both;
}

.ect-animated tbody tr:nth-child(1) {
  animation-delay: 0.05s;
}
.ect-animated tbody tr:nth-child(2) {
  animation-delay: 0.1s;
}
.ect-animated tbody tr:nth-child(3) {
  animation-delay: 0.15s;
}
.ect-animated tbody tr:nth-child(4) {
  animation-delay: 0.2s;
}
.ect-animated tbody tr:nth-child(5) {
  animation-delay: 0.25s;
}
.ect-animated tbody tr:nth-child(6) {
  animation-delay: 0.3s;
}
.ect-animated tbody tr:nth-child(7) {
  animation-delay: 0.35s;
}
.ect-animated tbody tr:nth-child(8) {
  animation-delay: 0.4s;
}
.ect-animated tbody tr:nth-child(9) {
  animation-delay: 0.45s;
}
.ect-animated tbody tr:nth-child(10) {
  animation-delay: 0.5s;
}

/* ============================================
   30. STICKY FIRST COLUMN
   ============================================ */
.ect-wrap.ect-sticky-first-col .ect-label {
  position: sticky;
  left: 0;
  z-index: 5;
}

.ect-wrap.ect-sticky-first-col.ect-sticky-shadow .ect-label {
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

.ect-wrap.ect-sticky-first-col .ect-th-empty {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 6;
  background-color: var(--ect-label-bg, #ffffff);
}

.ect-wrap.ect-sticky-first-col.ect-sticky-shadow .ect-th-empty {
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

/* ============================================
   31. RESPONSIVE — Mobile styles
   ============================================ */
@media (max-width: 768px) {
  .ect-wrap {
    border-radius: calc(var(--ect-table-border-radius, 24px) / 2);
  }

  .ect-col-prod {
    width: 130px;
    min-width: 130px;
  }

  .ect-table th {
    padding: 16px 8px;
  }

  .ect-table td {
    padding: 12px 8px;
    font-size: 13px;
  }

  .ect-label {
    padding-left: 16px;
    font-size: 12px;
  }

  .ect-name {
    font-size: 14px;
  }

  .ect-logo {
    height: 36px;
    width: 72px;
    aspect-ratio: 72 / 36;
  }

  .ect-btn {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* ============================================
   32. PRINT STYLES
   ============================================ */
@media print {
  .ect-wrap {
    overflow-x: visible;
    border: 1px solid #cccccc;
    border-radius: 0;
  }

  .ect-table {
    table-layout: auto;
    width: 100%;
  }

  .ect-col-label,
  .ect-col-prod {
    width: auto;
    min-width: auto;
  }

  /* Hide buttons in print */
  .ect-btn {
    display: none !important;
  }

  /* Show all columns */
  .ect-featured th,
  .ect-featured td {
    background-color: #fff5e6 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Remove shadows */
  .ect-sticky-header thead th {
    box-shadow: none;
    position: static;
  }

  /* Ensure colors print */
  .ect-badge-best {
    background-color: #e6f4ea !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .ect-badge-alt {
    background-color: #fdf2e9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Force text colors */
  .ect-name {
    color: #3d2b15 !important;
  }

  .ect-label {
    color: #8c6b40 !important;
  }

  /* Remove hover effects for print */
  .ect-table tbody tr:hover td {
    background-color: transparent !important;
  }
}

/* ============================================
   32. ACCESSIBILITY — Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .ect-wrap {
    scroll-behavior: auto;
  }

  .ect-animated,
  .ect-animated tbody tr {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .ect-btn {
    transition: none !important;
  }

  .ect-btn:hover {
    transform: none !important;
  }

  .ect-table td {
    transition: none !important;
  }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */
@media (prefers-contrast: more) {
  .ect-table th {
    border-bottom-width: 3px;
  }

  .ect-table td {
    border-bottom-width: 2px;
  }

  .ect-label {
    font-weight: 700;
  }

  .ect-btn {
    border-width: 2px;
  }

  .ect-btn-primary {
    outline: 2px solid transparent;
  }

  .ect-btn-primary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

/* ============================================
   FOCUS STYLES — Keyboard accessibility
   ============================================ */
.ect-btn:focus-visible {
  outline: 2px solid var(--ect-primary, #ff8800);
  outline-offset: 2px;
}

/* ============================================
   SCREEN READER ONLY — Visually hidden text
   ============================================ */
.ect-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ============================================
   STAR RATING - PARTIAL FILL SUPPORT
   ============================================ */

.ect-rating-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 14px;
}

.ect-rating-stars .fa-star,
.ect-rating-stars .fa-star-half-alt,
.ect-rating-stars .far.fa-star {
  font-size: 14px;
}

/* Partial star container */
.ect-star-partial {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
}

.ect-star-partial .star-empty {
  color: var(--ect-star-inactive, #c2cbd1);
  position: absolute;
  left: 0;
  top: 0;
}

.ect-star-partial .star-fill {
  color: var(--ect-star-active, #ff8800);
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 0%;
  transition: width 0.3s ease;
}