/* ============================================
   COMPARISON TABLE - PREMIUM GLASSMORPHISM DESIGN
   Modern SaaS-style pricing table (2025)
   ============================================ */

/* Table structure */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(17, 24, 39, 0.4);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(155, 135, 245, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ============================================
   HEADER - Premium Glassmorphism
   ============================================ */
.comparison-table thead {
  background: linear-gradient(135deg, rgba(155, 135, 245, 0.08), rgba(124, 58, 237, 0.06));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(155, 135, 245, 0.15);
}

.comparison-table thead th {
  padding: 1.25rem 1.5rem !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-weight: 600 !important;
  font-size: 1.313rem !important;
  color: #ffffff !important;
  letter-spacing: 0.3px;
  text-transform: none !important;
  position: relative;
}

/* First column header - left aligned */
.comparison-table thead th:first-child {
  text-align: left !important;
  padding-left: 2rem !important;
  font-weight: 700 !important;
}

/* Remove gradient/gray from header spans (override Tailwind) */
.comparison-table thead th .text-gradient,
.comparison-table thead th .text-gray-400 {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-clip: unset !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Subtle glow for Creonix header */
.comparison-table thead th:nth-child(2) {
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
}

/* ============================================
   BODY ROWS
   ============================================ */
.comparison-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.comparison-table tbody tr:hover:not(.total-row) {
  background: rgba(155, 135, 245, 0.04);
  transform: translateY(-1px);
}

.comparison-table tbody tr:last-child {
  border-bottom: none;
}

/* Feature name column (first column) */
.comparison-table tbody td:first-child {
  font-weight: 700 !important;
  width: 22% !important;
  padding: 1.125rem 1.75rem !important;
  color: #f9fafb !important;
  font-size: 1.0rem !important;
  vertical-align: middle !important;
  text-align: left !important;
}

/* All cells - proper padding and alignment */
.comparison-table tbody td {
  padding: 1.125rem 1.25rem !important;
  vertical-align: middle !important;
}

/* Creonix Pro and Competitors columns */
.comparison-table tbody td:nth-child(2),
.comparison-table tbody td:nth-child(3),
.comparison-table tbody td:nth-child(4) {
  background: transparent;
  text-align: center !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Fix vertical alignment for Premium column (4th column) */
.comparison-table tbody td:nth-child(4) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ============================================
   CELL CONTENT STRUCTURE
   ============================================ */

/* Icon styling - larger and prominent */
.cell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 1rem;
  vertical-align: middle;
  flex-shrink: 0;
}

.cell-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Green checkmark for Creonix */
.cell-icon-check {
  color: #10b981;
}

/* Red X for Competitors */
.cell-icon-x {
  color: #ef4444;
}

/* Cell content wrapper - inline with icon */
.cell-content {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 48px);
}

/* Main text - bold and WHITE */
.cell-main {
  font-weight: 700;
  font-size: 0.875rem;
  color: #ffffff !important;
  line-height: 1.4;
  margin-bottom: 0.375rem;
}

/* Details text - smaller and muted */
.cell-details {
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.5;
}

/* Highlight text - WHITE */
.cell-highlight {
  color: #ffffff !important;
  font-weight: 800;
}

/* Competitor name styling */
.competitor-name {
  font-weight: 700;
  color: #e5e7eb;
}

/* Price styling - red for competitors */
.competitor-price {
  color: #ef4444;
  font-weight: 800;
  font-size: 0.875rem;
}

/* ============================================
   TOTAL ROW - Premium Design with Horizontal Layout
   ============================================ */
.comparison-table tbody tr.total-row {
  background: linear-gradient(
    135deg,
    rgba(155, 135, 245, 0.06),
    rgba(124, 58, 237, 0.04)
  ) !important;
  border-top: 2px solid rgba(155, 135, 245, 0.2) !important;
  box-shadow: 0 -10px 30px rgba(155, 135, 245, 0.05);
}

.comparison-table tbody tr.total-row td {
  padding: 1.5rem 1.25rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.comparison-table tbody tr.total-row td:first-child {
  font-size: 0.938rem !important;
  text-align: left !important;
  padding-left: 1.75rem !important;
}

/* HORIZONTAL LAYOUT WRAPPER - Key fix! */
.total-price-wrapper {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  flex-wrap: nowrap !important;
}

/* Total row prices - INLINE, not block */
.total-price {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline !important;
  letter-spacing: -0.02em;
}

.total-price-creonix {
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.3));
}

.total-price-competitor {
  color: #ef4444 !important;
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.3));
}

/* Subtext - INLINE next to price */
.total-subtext {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: inline !important;
  opacity: 0.8;
  white-space: nowrap;
}

/* Override Tailwind text-gray-400 */
.total-subtext.text-gray-400 {
  color: #9ca3af !important;
}

/* Savings badge - green and prominent */
.savings-badge {
  color: #10b981 !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
}

/* ============================================
   HOVER EFFECTS & ANIMATIONS
   ============================================ */

/* Smooth transitions */
.comparison-table tbody tr,
.cell-icon svg,
.total-price {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Row hover - subtle lift */
.comparison-table tbody tr:hover:not(.total-row) {
  box-shadow: 0 4px 12px rgba(155, 135, 245, 0.1);
}

/* Icon hover - slight scale */
.cell-icon:hover svg {
  transform: scale(1.1);
}

/* ============================================
   RESPONSIVE - MOBILE OPTIMIZATION
   ============================================ */
@media (max-width: 768px) {
  .comparison-table thead th {
    padding: 1.25rem 1rem !important;
    font-size: 1.125rem !important;
  }

  .comparison-table tbody td {
    padding: 1.25rem 1rem !important;
  }

  .comparison-table tbody td:first-child {
    padding: 1.25rem 1.25rem !important;
    font-size: 1.0rem !important;
  }

  .cell-icon {
    width: 28px;
    height: 28px;
    margin-right: 0.75rem;
  }

  .cell-main {
    font-size: 0.938rem;
  }

  .cell-details {
    font-size: 0.813rem;
  }

  .total-price {
    font-size: 1.25rem !important;
  }

  .total-subtext {
    font-size: 0.75rem !important;
  }

  /* Stack on very small screens */
  @media (max-width: 480px) {
    .total-price-wrapper {
      flex-direction: column !important;
      gap: 0.25rem !important;
      align-items: center !important;
    }
  }
}

/* ============================================
   UTILITY OVERRIDES
   ============================================ */

/* Ensure no old styles interfere */
.comparison-table .benefit-cell,
.comparison-table .competitor-cell {
  text-align: left !important;
}

/* Clean up any inherited text styles */
.comparison-table tbody td * {
  text-align: inherit;
}

/* Ensure centering in Total row */
.comparison-table tbody tr.total-row .text-center {
  text-align: center !important;
}