/* ─── VARIABLES ─────────────────────────────────────────────── */
:root {
  --bg-modal:       #141b2d;
  --bg-item:        #1e2a40;
  --bg-item-hover:  #243050;
  --bg-checked:     #1a3a28;
  --bg-result:      #1e2a40;
  --bg-yellow:      #2a2515;
  --border-item:    #2a3a55;
  --border-checked: #2ecc71;
  --border-yellow:  #d4a017;
  --border-result:  #2a3a55;
  --accent-red:     #e8253d;
  --accent-blue:    #2563eb;
  --accent-green:   #2ecc71;
  --accent-yellow:  #f0b429;
  --text-primary:   #e8eef8;
  --text-secondary: #8fa0be;
  --text-badge:     #c8d8f0;
  --progress-track: #2a3a55;
  --progress-fill:  #e8253d;
  --num-bg:         #2a3a55;
  --num-checked-bg: #2ecc71;
}

/* * { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #0d1524; } */

/* ─── TRIGGER BUTTON (demo) ─────────────────────────────────── */
.demo-trigger {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
.btn-checklist-trigger {
  background: transparent;
  color: var(--accent-red);
  border: 2px solid var(--accent-red);
  border-radius: 8px;
  padding: 14px 32px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700; font-size: 15px;
  cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 10px;
}
.btn-checklist-trigger:hover {
  background: var(--accent-red); color: #fff;
}
.btn-checklist-trigger svg { flex-shrink: 0; }

/* ─── MODAL BACKDROP ────────────────────────────────────────── */
.modal-backdrop.show { opacity: .75; }

/* ─── MODAL DIALOG ──────────────────────────────────────────── */
#checklistModal .modal-dialog {
  max-width: 90%;
  margin: 20px auto;
}
#checklistModal .modal-content {
  background: var(--bg-modal);
  border: none;
  border-radius: 16px;
  color: var(--text-primary);
  overflow: hidden;
}
#checklistModal .modal-body { 
	padding: 36px 36px 28px; 
	
	@media (max-width : 1200px) {
		padding: 16px 16px 18px; 
	}
}

#checklistModal.modal {
  max-width: inherit;
  padding: inherit;
  height: 100%;
}

/* ─── BADGE ─────────────────────────────────────────────────── */
.cl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-red);
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
  margin-bottom: 16px;
}
.cl-badge::before {
  content: ''; width: 6px; height: 6px;
  background: #fff; border-radius: 50%;
}

/* ─── HEADING ───────────────────────────────────────────────── */
.cl-title {
  font-weight: 800; line-height: 1.2;
  color: var(--text-primary); margin-bottom: 4px;
}
.cl-title-accent { color: var(--accent-red); display: block; }
.cl-subtitle {
  font-size: 14px; color: var(--text-secondary);
  margin-bottom: 24px; line-height: 1.55;
}

/* ─── PROGRESS BAR ──────────────────────────────────────────── */
.cl-progress-wrap {
  background: #1a253d;
  border-radius: 12px;
  padding: 18px 20px 20px;
  margin-bottom: 0;
}
.cl-progress-label {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 10px;
}
.cl-progress-count { color: var(--text-primary); font-weight: 800; font-size: 13px; }
.cl-progress-bar-track {
  background: var(--progress-track);
  border-radius: 4px; height: 4px; overflow: hidden;
}
.cl-progress-bar-fill {
  height: 100%; background: var(--progress-fill);
  border-radius: 4px; transition: width .35s ease;
  width: 0%;
}

/* ─── ITEMS ─────────────────────────────────────────────────── */
.cl-items { padding: 0 0 0 0; }

.cl-item {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-item);
  border: 1px solid var(--border-item);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 8px;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .12s;
  user-select: none;
}
.cl-item:hover { background: var(--bg-item-hover); transform: translateX(2px); }
.cl-item.checked {
  background: var(--bg-checked);
  border-color: var(--border-checked);
}
.cl-item.yellow-item {
  background: var(--bg-yellow);
  border-color: var(--border-yellow);
}
.cl-item.yellow-item.checked {
  background: rgba(212,160,23,.15);
  border-color: var(--accent-yellow);
}

/* Number badge */
.cl-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: var(--num-bg);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  color: var(--text-secondary);
  transition: background .18s, color .18s;
  margin-top: 1px;
}
.cl-item.checked .cl-num {
  background: var(--accent-green); color: #fff;
}

/* Star icon for yellow */
.cl-star {
  flex-shrink: 0; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-top: 1px;
  background: rgba(245, 200, 66, 0.15);
  border-radius: 6px;
  font-weight: 800;
  color: var(--text-secondary);
  transition: background .18s, color .18s;
}

.cl-item-text {
  flex: 1; font-size: 15px; line-height: 1.2;
  color: var(--text-primary); font-weight: 400;
}
.cl-item.checked .cl-item-text { color: #d4f0de; }

/* Checkbox */
.cl-check {
  flex-shrink: 0; width: 22px; height: 22px;
  border: 2px solid #3a4f6a;
  border-radius: 6px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s; background: transparent;
}
.cl-item.checked .cl-check {
  background: var(--accent-green); border-color: var(--accent-green);
}
.cl-item.yellow-item.checked .cl-check {
  background: var(--accent-yellow); border-color: var(--accent-yellow);
}
.cl-check svg { display: none; }
.cl-item.checked .cl-check svg { display: block; }
.cl-check-yellow { border-color: var(--border-yellow) !important; }

/* Hint styles */
.cl-hint-emoji { font-size: 22px; line-height: 1;}
.cl-hint-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.cl-hint-text { font-size: 15px; color: var(--text-secondary); line-height: 1.55; }

/* Result yellow path styles */
.cl-result-icon { font-size: 36px; font-weight: 800; margin-bottom: 14px; }
.cl-result-icon-green { color: var(--accent-green); }
.cl-result-heading { font-size: 18px; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; }
.cl-result-body { font-size: 15px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 4px; }
.cl-result-block { margin: 15px 0 6px; }
.cl-result-block-title { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.cl-result-block-text { font-size: 15px; color: var(--text-secondary); }
.text-highlight { color: var(--text-primary); }

/* OR divider */
.cl-or {
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600;
  margin: 14px 0 4px;
  position: relative;
}

/* ─── RESULT SECTION ────────────────────────────────────────── */
.cl-result {
  background: var(--bg-result);
  border: 1px solid var(--border-result);
  border-radius: 12px;
  padding: 24px;
  animation: fadeSlideIn .35s ease both;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cl-result-count {
  font-size: 40px; font-weight: 800;
  color: var(--accent-red);
  margin-bottom: 16px; line-height: 1;
}
.cl-result-count span { color: var(--text-secondary); font-size: 28px; }

/* each warning block */
.cl-warn-block { margin-bottom: 16px; }
.cl-warn-block:last-of-type { margin-bottom: 0; }
.cl-warn-title {
  font-size: 15px; font-weight: 800;
  color: var(--text-primary); margin-bottom: 5px;
}
.cl-warn-title::before { 
    content: '';
    background-image: url('public/icons/icon-warning.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 16px;
    height: 16px;
    display: inline-block;
}
.cl-warn-body {
  font-size: 15px; color: var(--text-secondary); line-height: 1.6;
}

/* fixed summary text */
.cl-result-summary {
  font-size: 14px; line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid #2a3a55;
}
.cl-result-summary strong { color: var(--text-primary); }

/* badge tag */
.cl-result-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px;
}
.cl-result-tag.tag-blue   { background: rgba(37,99,235,.18); color: #60a5fa; border: 1px solid rgba(37,99,235,.35); }
.cl-result-tag.tag-yellow { background: rgba(240,180,41,.15); color: var(--accent-yellow); border: 1px solid rgba(240,180,41,.3); }
.cl-result-tag.tag-red    { background: rgba(232,37,61,.15); color: #f87171; border: 1px solid rgba(232,37,61,.3); }
.cl-result-tag.tag-green  { background: rgba(46,204,113,.12); color: var(--accent-green); border: 1px solid rgba(46,204,113,.3); }

/* "all good" result */
.cl-result-good .cl-result-count { color: var(--accent-green); }

/* ─── PROMO BANNER ──────────────────────────────────────────── */
.cl-promo {
  background: linear-gradient(135deg, #1a1f35 0%, #1e2540 100%);
  border: 1px solid #2a3a55;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 12px;
}
.cl-promo-icon {
  flex-shrink: 0; width: 36px; height: 36px;
  background: var(--accent-red);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.cl-promo-title {
  font-size: 13px; font-weight: 800;
  color: var(--text-primary); margin-bottom: 3px;
}
.cl-promo-sub {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}

/* ─── FOOTER BUTTONS ────────────────────────────────────────── */
.cl-footer {
  padding: 20px 36px 28px;
  display: flex; gap: 12px; flex-wrap: wrap;
  @media (max-width : 1200px) {
    padding: 20px;
	}
}

.btn-cl-red {
  flex: 1; min-width: 180px;
  background: var(--accent-red);
  color: #fff; border: none;
  border-radius: 8px; padding: 14px 20px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .2s, transform .12s;
  white-space: nowrap;
}
.btn-cl-red:hover { background: #c71e34; transform: translateY(-1px); }
.btn-cl-blue {
  flex: 1; min-width: 180px;
  background: var(--accent-blue);
  color: #fff; border: none;
  border-radius: 8px; padding: 14px 20px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .2s, transform .12s;
  white-space: nowrap;
}
.btn-cl-blue:hover { background: #1d4ed8; transform: translateY(-1px); }

/* ─── SCROLLABLE BODY ───────────────────────────────────────── */
#checklistModal .modal-body {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a3a55 transparent;
}
#checklistModal .modal-body::-webkit-scrollbar { width: 5px; }
#checklistModal .modal-body::-webkit-scrollbar-track { background: transparent; }
#checklistModal .modal-body::-webkit-scrollbar-thumb { background: #2a3a55; border-radius: 4px; }

/* ─── CLOSE BUTTON ──────────────────────────────────────────── */
#checklistModal .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .6; position: absolute; top: 16px; right: 16px; z-index: 10;
}
#checklistModal .btn-close:hover { opacity: 1; }
#checklistModal .modal-content { position: relative; }

/* ─── TWO COLUMN LAYOUT ───────────────────────────────────────── */
.left-section {
  width: 0;
  @media (max-width : 1200px) {
    width: auto;
	}
}
.right-section {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}