/* hotel_comparison.css */

/* Custom Layout Control for Comparison Filter Bar */
.comparison-controls {
  margin-bottom: 20px;
}

.comparison-controls .controls-header {
  width: auto;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

@media (width <= 600px) {
  .comparison-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .comparison-controls .controls-header {
    width: 100%;
  }

  .comparison-controls .nav-back-btn {
    width: 100% !important;
  }
}

/* Filter Dropdown Additions (matched from hotel_prices) */
.dropdown-check-list .anchor::after {
  content: "\f0d7";
  font-family: "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  position: absolute;
  right: 12px;
  font-size: 1rem;
  color: var(--deep-midnight);
}

.dropdown-check-list .items {
  right: 0;
}

.btn-all {
  background: var(--golden-hour);
  color: var(--deep-midnight);
}

.btn-none {
  background: #eee;
  color: #777;
}

body.dark-mode .btn-none {
  background: #444;
  color: #ccc;
}

/* Table Container & Matrix Styling */
.table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--golden-hour, #e1a63c);
  margin-top: 20px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
}

body.dark-mode .table-container {
  background: rgba(27, 32, 50, 0.6);
  box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
}

.comparison-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: "Montserrat", sans-serif;
  color: var(--deep-midnight, #1b2032);
  min-width: max-content;
}

body.dark-mode .comparison-matrix {
  color: #fff;
}

.comparison-matrix th,
.comparison-matrix td {
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

body.dark-mode .comparison-matrix th,
body.dark-mode .comparison-matrix td {
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.comparison-matrix th {
  background: rgb(107 33 168 / 10%);
  color: var(--electric-grape, #6a1b82);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
}

body.dark-mode .comparison-matrix th {
  background: rgb(107 33 168 / 20%);
  color: var(--golden-hour, #e1a63c);
}

/* Sticky Left Column */
.sticky-col {
  position: sticky;
  left: 0;
  background: #fff !important;
  z-index: 10;
  text-align: left !important;
  border-right: 2px solid var(--golden-hour, #e1a63c);
  font-weight: 700;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  box-sizing: border-box;
  white-space: normal;
}

.comparison-matrix tr:not(.group-header-row) .sticky-col {
  padding: 12px 10px;
}

body.dark-mode .sticky-col {
  background: #1b2032 !important;
}

/* Full-Width Group Header Rows */
.group-header-row th,
.group-header-row td {
  background: var(--electric-grape, #6a1b82) !important;
  color: #ffffff !important;
  padding: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: none !important;
}

body.dark-mode .group-header-row th,
body.dark-mode .group-header-row td {
  background: rgb(107 33 168 / 20%) !important;
  color: var(--golden-hour, #e1a63c) !important;
}

/* Group Collapse Feature Styles */
.group-header-filler {
  cursor: pointer;
  padding: 12px 10px !important;
}

.group-toggle-btn {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  width: 100%;
  height: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 12px 10px;
  text-transform: inherit;
  letter-spacing: inherit;
  box-sizing: border-box;
}

.group-toggle-btn:focus-visible {
  outline: 2px solid var(--golden-hour, #e1a63c);
  outline-offset: -2px;
}

.toggle-icon {
  margin-left: 6px;
  flex-shrink: 0;
}

.collapsed-group-row {
  display: none !important;
}

/* Universal Perks Banner */
.universal-perks {
  background: rgb(107 33 168 / 5%);
  border: 1px dashed var(--electric-grape, #6a1b82);
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  text-align: center;
}

body.dark-mode .universal-perks {
  background: rgb(107 33 168 / 15%);
  border-color: var(--golden-hour, #e1a63c);
}

.perks-title {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
  color: var(--electric-grape, #6a1b82);
  text-transform: uppercase;
}

body.dark-mode .perks-title {
  color: var(--golden-hour, #e1a63c);
}

.perks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.perks-list li {
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.perks-list li i {
  color: var(--golden-hour, #e1a63c);
}

/* Status Icons */
.status-yes {
  color: var(--success-green, #007000);
  font-size: 1.2rem;
}

body.dark-mode .status-yes {
  color: #4ade80;
}

.status-no {
  color: #c0392b;
}

body.dark-mode .status-no {
  color: #f87171;
  opacity: 0.5;
}

/* Twinkle Rating Icons */
.twinkles-container {
  white-space: nowrap;
}

.twinkle-icon {
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
}

/* Specific Content Formatting */
.walking-text {
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: nowrap;
}

/* Row Hover for readability (Excluding headers) */
.comparison-matrix tr:not(.group-header-row):hover td {
  background: rgb(106 27 130 / 5%);
}

body.dark-mode .comparison-matrix tr:not(.group-header-row):hover td {
  background: rgb(225 166 60 / 5%);
}

/* Walk Pill Styles */
.walk-pill-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px; /* space if a hotel has both */
}

.walk-pill-container:last-child {
  margin-bottom: 0;
}

.walk-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Time Pill Colors */
.time-pill.pill-green {
  background-color: #14532d; /* dark green */
  color: #4ade80; /* light green text */
}

.time-pill.pill-yellow {
  background-color: #713f12; /* brown/dark yellow */
  color: #fde047; /* yellow text */
}

.time-pill.pill-orange {
  background-color: #7c2d12; /* dark orange */
  color: #fb923c; /* orange text */
}

.time-pill.pill-red {
  background-color: #7f1d1d; /* dark red */
  color: #f87171; /* light red text */
}

/* Park Outline Pills */
.park-pill {
  background-color: transparent;
  border: 1px solid;
  font-size: 0.75rem;
}

.studios-pill {
  border-color: #0ea5e9; /* blue border */
  color: #38bdf8; /* blue text */
}

.epic-pill {
  border-color: #ea580c; /* orange border */
  color: #fb923c; /* orange text */
}