/* ==========================================================================
   English Test Lab — Multimedia & 3D Interactive Lab Styles
   Warm Ivory / Petrol / Sand editorial styling
   Child 9yo (5.º EGB) & Family friendly, accessible, zero emoji, no SaaS gradient.
   ========================================================================== */

/* Hero CTA Group */
.mm-hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-md, 16px);
  padding-top: var(--space-xs, 8px);
}

.mm-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: var(--font-size-sm, 0.95rem);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm, 6px);
  transition: background-color 0.15s ease, transform 0.1s ease;
  min-height: 44px;
}

.mm-hero-cta:active {
  transform: translateY(1px);
}

/* Nav Link adjustments */
.mm-nav-link {
  white-space: nowrap;
}

/* Section overrides and isolation */
.mm-section {
  scroll-margin-top: 80px;
  margin-bottom: var(--space-xl, 32px);
}

.mm-section-header {
  margin-bottom: var(--space-md, 16px);
}

.mm-tag {
  letter-spacing: 0.04em;
}

.mm-section-title {
  color: var(--petrol-900, #0f323a);
}

.mm-section-subtitle {
  color: var(--text-muted, #51626d);
}

/* Mount Containers */
.mm-mount-root {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  border-radius: var(--radius-md, 10px);
  background: var(--bg-card, #ffffff);
  min-height: 140px;
  overflow: hidden;
  word-wrap: break-word;
}

/* Placeholder and Idle Cards */
.mm-card-panel {
  background: var(--bg-card-alt, #f4eee2);
  border: 1px solid var(--sand-300, #d9cfbe);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 12px);
  box-sizing: border-box;
  max-width: 100%;
}

.mm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-status-pill {
  display: inline-block;
  font-size: var(--font-size-xs, 0.85rem);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 9999px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mm-status-ready {
  background-color: var(--petrol-50, #f0f7f8);
  color: var(--petrol-700, #195866);
  border: 1px solid var(--petrol-100, #d6e8ec);
}

.mm-status-loading {
  background-color: var(--hint-bg, #fff8e6);
  color: var(--hint-text, #735100);
  border: 1px solid var(--hint-border, #d4a017);
}

.mm-status-fallback {
  background-color: var(--sand-100, #f5f0e6);
  color: var(--sand-800, #665b4c);
  border: 1px solid var(--sand-300, #d9cfbe);
}

.mm-card-text {
  font-size: var(--font-size-base, 1.05rem);
  color: var(--text-main, #1f2a30);
  line-height: 1.5;
  margin: 0;
}

.mm-card-subtext {
  font-size: var(--font-size-sm, 0.92rem);
  color: var(--text-muted, #51626d);
  line-height: 1.45;
  margin: 0;
}

.mm-btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  background-color: var(--petrol-800, #14434e);
  color: var(--text-inverse, #ffffff);
  border: 1px solid var(--petrol-800, #14434e);
  border-radius: var(--radius-sm, 6px);
  padding: 9px 18px;
  font-size: var(--font-size-sm, 0.95rem);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mm-btn-action:hover {
  background-color: var(--petrol-600, #237486);
  border-color: var(--petrol-600, #237486);
}

.mm-btn-action:focus {
  outline: 2px solid var(--petrol-600, #237486);
  outline-offset: 2px;
}

/* Fallback Notice Box */
.mm-fallback-box {
  background-color: var(--petrol-50, #f0f7f8);
  border: 1px solid var(--petrol-100, #d6e8ec);
  border-left: 4px solid var(--petrol-700, #195866);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-md, 16px) var(--space-lg, 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  max-width: 100%;
}

.mm-fallback-title {
  font-size: var(--font-size-base, 1.05rem);
  font-weight: 700;
  color: var(--petrol-900, #0f323a);
  margin: 0;
}

.mm-fallback-message {
  font-size: var(--font-size-sm, 0.95rem);
  color: var(--text-muted, #51626d);
  line-height: 1.5;
  margin: 0;
}

.mm-btn-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  background-color: transparent;
  color: var(--petrol-800, #14434e);
  border: 1px solid var(--petrol-600, #237486);
  border-radius: var(--radius-sm, 6px);
  padding: 7px 15px;
  font-size: var(--font-size-xs, 0.88rem);
  font-weight: 700;
  cursor: pointer;
  min-height: 38px;
  transition: background-color 0.15s ease;
}

.mm-btn-retry:hover {
  background-color: var(--petrol-100, #d6e8ec);
}

.mm-btn-retry:focus {
  outline: 2px solid var(--petrol-600, #237486);
  outline-offset: 2px;
}

/* Subtle Loading State */
.mm-loading-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background-color: var(--bg-card-alt, #f4eee2);
  border: 1px solid var(--sand-200, #e8e1d3);
  border-radius: var(--radius-md, 10px);
  color: var(--text-muted, #51626d);
  font-size: var(--font-size-sm, 0.95rem);
}

.mm-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--sand-300, #d9cfbe);
  border-top-color: var(--petrol-700, #195866);
  border-radius: 50%;
  animation: mm-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes mm-spin {
  to { transform: rotate(360deg); }
}

/* Mobile responsive (320px down) */
@media (max-width: 480px) {
  .mm-hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .mm-hero-cta {
    width: 100%;
    text-align: center;
  }

  .mm-card-panel {
    padding: 14px 16px;
  }

  .mm-btn-action,
  .mm-btn-retry {
    width: 100%;
  }
}