/**
 * Collab ERP Theme — Components
 * Additional component styles loaded after main style.css
 */

/* Module checkbox + plan selector (used in registration) */
.module-checkbox { display: block; }
.module-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.module-checkbox .module-card {
  background: var(--c-card);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.module-checkbox .module-card .check-icon { opacity: 0; transition: opacity var(--t-base); }
.module-checkbox input:checked + .module-card {
  border-color: var(--c-brand);
  background: linear-gradient(135deg, rgba(56,139,255,.08), rgba(56,139,255,.02));
  box-shadow: 0 4px 16px rgba(56,139,255,.15);
}
.module-checkbox input:checked + .module-card .check-icon { opacity: 1; }
.module-checkbox input:focus + .module-card { outline: 2px solid var(--c-brand); outline-offset: 2px; }

.plan-option { display: block; }
.plan-option input { position: absolute; opacity: 0; pointer-events: none; }
.plan-option .plan-card {
  border: 2px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  background: var(--c-card);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.plan-option input:checked + .plan-card {
  border-color: var(--c-brand);
  background: linear-gradient(135deg, rgba(56,139,255,.08), var(--c-card));
}
.plan-option input:focus + .plan-card { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* Step indicator (used in registration wizard) */
.step-indicator { transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base); }
.step-indicator .step-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-card);
  border: 2px solid var(--c-border-2);
  color: var(--c-text-3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-weight: 700;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.step-indicator .step-label {
  font-size: 12px;
  margin-top: 8px;
  color: var(--c-text-3);
  transition: color var(--t-base);
}
.step-indicator.active .step-circle {
  background: var(--c-brand) !important;
  border-color: var(--c-brand) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(56,139,255,.4);
}
.step-indicator.active .step-label { color: var(--c-text); }
.step-indicator.done .step-circle {
  background: var(--c-green) !important;
  border-color: var(--c-green) !important;
  color: #fff !important;
}

/* Comparison badges */
.compare-cell-success { color: var(--c-green); font-weight: 700; }
.compare-cell-fail    { color: var(--c-red);   font-weight: 700; }

/* Visited state for nav menu */
.nav-menu li a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--r-sm); }

/* Search form */
.search-form { display: flex; gap: var(--sp-2); }
.search-form input[type="search"] {
  flex: 1;
  background: var(--c-elevated);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
  padding: 9px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 14px;
}
.search-form button {
  background: var(--c-brand);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  cursor: pointer;
}

/* Sidebar widgets */
.widget {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.widget-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-2);
  margin-bottom: var(--sp-4);
}
.widget ul { list-style: none; padding: 0; }
.widget li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13.5px; }
.widget li:last-child { border-bottom: none; }
.widget a { color: var(--c-text-2); }
.widget a:hover { color: var(--c-brand); }

/* Tag cloud */
.tagcloud a {
  display: inline-block;
  padding: 4px 10px;
  background: var(--c-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: 12px !important;
  color: var(--c-text-2);
  margin: 2px;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.tagcloud a:hover {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}

/* Comments */
.comments-area { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--c-border); }
.comment-list { list-style: none; padding: 0; }
.comment { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.comment-author { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.comment-author .avatar { width: 38px; height: 38px; border-radius: 50%; }
.comment-meta a { font-size: 12px; color: var(--c-text-3); }
.comment-respond input,
.comment-respond textarea {
  width: 100%;
  background: var(--c-elevated);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 14px;
  margin-bottom: var(--sp-3);
}

/* Block editor compatibility */
.wp-block-button__link { background: var(--c-brand); color: #fff; padding: 12px 28px; border-radius: var(--r-md); font-weight: 600; transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base); }
.wp-block-button__link:hover { background: var(--c-brand-h); color: #fff; }
.wp-block-quote { border-left: 3px solid var(--c-brand); padding-left: var(--sp-5); }
.wp-block-image figcaption { font-size: 13px; color: var(--c-text-3); text-align: center; margin-top: var(--sp-2); }

/* Print styles */
@media print {
  #site-header, #site-footer, .btn, .menu-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}