:root {
  --website-primary-color: #eb8944;
  --website-primary-text-color: white;
  --main-color: #051;
  --font-size-base: 16px;
}

.main-primary-colour {
  background-color: var(--website-primary-color);
  color: var(--website-primary-text-color);
}

#draftConfirmModal {
  z-index: 1060 !important;
}

.modal-backdrop-1.show {
  z-index: 1055 !important;
}

/* COMPARE SYSTEMIC STYLES - PERMANENT LOCK STATE */
.compare {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default; /* Changed from pointer to default */
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  font-weight: 600;
  color: #475569;
  user-select: none;
  border: 1px solid rgba(241,245,249, 0.3);
  z-index: 10;
  transition: all 0.3s ease;
  overflow: hidden;
  pointer-events: none; /* Disable all clicks/interactions */
}

/* Blur the text and checkbox by default */
.compare input[type="checkbox"],
.compare span {
  opacity: 0.45; /* Increased from 0.15 for better visibility */
  filter: blur(1.2px); /* Slightly reduced blur */
  transition: opacity 0.3s ease;
}

.compare input[type="checkbox"] {
  pointer-events: none; /* Ensure checkbox specifically is unclickable */
}

.compare span {
  white-space: nowrap;
}

/* Permanent Center Lock Overlay */
.compare-lock-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: #2b78a5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1; /* Always visible */
  box-shadow: 0 2px 6px rgba(43, 120, 165, 0.4);
  pointer-events: none;
  z-index: 2;
}


.compare-lock-icon i {
  font-size: 10px;
  color: #fff;
}

/* Hover State: Slight brightness increase */
.compare:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(43, 120, 165, 0.3);
}

.compare:hover .compare-lock-icon {
  transform: translate(-50%, -50%) scale(1.1);
}