/**
 * MangaBTT Tool Interfaces, Status Checker, and Platform Directory Styling
 *
 * @package MangaBTT
 * @since 1.0.0
 */

/* ==========================================================================
   1. Tool Containers & Headers
   ========================================================================== */
.mbtt-tool-container {
  background-color: var(--mbtt-surface);
  border: 1px solid var(--mbtt-border);
  border-radius: var(--mbtt-radius-lg);
  padding: 2.25rem;
  box-shadow: var(--mbtt-shadow-md);
  margin-bottom: 2.5rem;
}

.mbtt-tool-header {
  margin-bottom: 2rem;
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.mbtt-tool-title {
  font-size: 1.875rem;
  margin-bottom: 0.75rem;
}
.mbtt-tool-desc {
  font-size: 1rem;
  color: var(--mbtt-text-secondary);
}

/* ==========================================================================
   2. MangaBTT Status Checker Form
   ========================================================================== */
.mbtt-checker-form {
  max-width: 600px;
  margin: 0 auto;
}
.mbtt-input-group {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.mbtt-tool-input {
  flex: 1;
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
  border: 2px solid var(--mbtt-border);
  border-radius: var(--mbtt-radius);
  background-color: #ffffff;
  color: var(--mbtt-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mbtt-tool-input:focus {
  border-color: var(--mbtt-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
  outline: none;
}
.mbtt-tool-btn {
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  white-space: nowrap;
}

/* Quick Domains Selection */
.mbtt-quick-domains {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--mbtt-muted);
  margin-top: 0.75rem;
}
.mbtt-quick-domain-btn {
  background: #f1f5f9;
  border: 1px solid var(--mbtt-border);
  border-radius: var(--mbtt-radius-sm);
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-family: var(--mbtt-font-mono);
  color: var(--mbtt-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.mbtt-quick-domain-btn:hover {
  background: var(--mbtt-primary-light);
  color: var(--mbtt-primary);
  border-color: #bfdbfe;
}

/* Status Result Card */
.mbtt-status-result {
  margin-top: 2rem;
  background-color: var(--mbtt-background);
  border: 1px solid var(--mbtt-border);
  border-radius: var(--mbtt-radius);
  padding: 1.75rem;
  display: none;
  animation: mbttFadeIn 0.25s ease-in-out;
}
.mbtt-status-result.is-active {
  display: block;
}

@keyframes mbttFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--mbtt-border);
  flex-wrap: wrap;
  gap: 0.75rem;
}
.result-domain-name {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--mbtt-font-mono);
  color: var(--mbtt-text);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.result-metric-card {
  background: #ffffff;
  border: 1px solid var(--mbtt-border);
  border-radius: var(--mbtt-radius-sm);
  padding: 0.85rem 1rem;
}
.result-metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mbtt-muted);
  margin-bottom: 0.25rem;
}
.result-metric-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mbtt-text);
}

.result-explanation {
  background: #ffffff;
  border: 1px solid var(--mbtt-border);
  border-left: 4px solid var(--mbtt-primary);
  border-radius: 0 var(--mbtt-radius-sm) var(--mbtt-radius-sm) 0;
  padding: 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.935rem;
  line-height: 1.6;
}

.result-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--mbtt-muted);
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Loading Spinner */
.mbtt-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: mbttSpin 0.7s linear infinite;
}
@keyframes mbttSpin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   3. Platform Alternatives Directory Filter & Grid
   ========================================================================== */
.mbtt-directory-controls {
  background: #ffffff;
  border: 1px solid var(--mbtt-border);
  border-radius: var(--mbtt-radius);
  padding: 1.25rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mbtt-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.mbtt-filter-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mbtt-text);
  min-width: 90px;
}
.mbtt-filter-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mbtt-filter-btn {
  background: #f1f5f9;
  border: 1px solid transparent;
  color: var(--mbtt-text-secondary);
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--mbtt-radius-full);
  cursor: pointer;
  transition: all 0.15s ease;
}
.mbtt-filter-btn:hover {
  background: #e2e8f0;
  color: var(--mbtt-text);
}
.mbtt-filter-btn.is-active {
  background: var(--mbtt-primary);
  color: #ffffff;
}

.platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

.platform-card {
  background: #ffffff;
  border: 1px solid var(--mbtt-border);
  border-radius: var(--mbtt-radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--mbtt-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.platform-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mbtt-shadow-md);
  border-color: #cbd5e1;
}
.platform-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.platform-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}
.platform-card-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--mbtt-text-secondary);
  margin-bottom: 1.25rem;
  flex: 1 0 auto;
}
.platform-specs-list {
  background: var(--mbtt-background);
  border-radius: var(--mbtt-radius-sm);
  padding: 0.85rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  list-style: none;
}
.platform-specs-list li {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.spec-pro {
  color: #166534;
}
.spec-con {
  color: #991b1b;
}
.platform-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--mbtt-border-light);
}

/* ==========================================================================
   4. Terminology Guide
   ========================================================================== */
.mbtt-glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.mbtt-glossary-card {
  background: #ffffff;
  border: 1px solid var(--mbtt-border);
  border-radius: var(--mbtt-radius);
  padding: 1.25rem;
}
.mbtt-glossary-term {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--mbtt-primary);
}
.mbtt-glossary-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mbtt-muted);
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}
.mbtt-glossary-def {
  font-size: 0.875rem;
  color: var(--mbtt-text-secondary);
  line-height: 1.55;
  margin-bottom: 0.5rem;
}
.mbtt-glossary-details {
  font-size: 0.8125rem;
  color: var(--mbtt-muted);
  line-height: 1.5;
  margin: 0;
}

/* Quick Test Chips & Tool Card Wrapper */
.mbtt-tool-card {
  background: #ffffff;
  border: 1px solid var(--mbtt-border);
  border-radius: var(--mbtt-radius);
  padding: 2.25rem;
  box-shadow: var(--mbtt-shadow-sm);
}
.mbtt-chip-btn {
  background: var(--mbtt-background);
  border: 1px solid var(--mbtt-border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mbtt-text-secondary);
  cursor: pointer;
  transition: all var(--mbtt-transition);
  font-family: inherit;
}
.mbtt-chip-btn:hover {
  background: var(--mbtt-primary);
  border-color: var(--mbtt-primary);
  color: #ffffff;
}