/**
 * Базовые компоненты — прямая реализация design-system.md, разделы 2, 4-7.
 * Используются как в стандартных WP-шаблонах, так и внутри Elementor-виджетов
 * плагина 3D Lab Core (виджеты используют эти же классы, не свои стили).
 */

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  font-size: var(--body-mobile);
  line-height: var(--line-height-body);
}
@media (min-width: 1024px) {
  body { font-size: var(--body-desktop); }
}

h1, h2, h3 { font-weight: 500; line-height: var(--line-height-heading); margin: 0; }
h1.threedlab-hero-title { font-size: var(--h1-hero-mobile); }
h1 { font-size: var(--h1-page-mobile); }
h2 { font-size: var(--h2-mobile); }
h3 { font-size: var(--h3-mobile); }

@media (min-width: 1024px) {
  h1.threedlab-hero-title { font-size: var(--h1-hero-desktop); }
  h1 { font-size: var(--h1-page-desktop); }
  h2 { font-size: var(--h2-desktop); }
  h3 { font-size: var(--h3-desktop); }
}

.threedlab-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
}
@media (min-width: 1024px) {
  .threedlab-container {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}

.threedlab-section { padding-top: var(--section-spacing-mobile); padding-bottom: var(--section-spacing-mobile); }
@media (min-width: 1024px) {
  .threedlab-section { padding-top: var(--section-spacing-desktop); padding-bottom: var(--section-spacing-desktop); }
}

/* --- Кнопки (раздел 4) --- */
.threedlab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-button);
  font-size: 14px; padding: 13px 24px; cursor: pointer;
  text-decoration: none; border: none;
  transition: transform var(--transition-fast), filter var(--transition-fast), opacity var(--transition-fast);
}
.threedlab-btn:active { transform: scale(0.98); }

.threedlab-btn--primary { background: var(--accent-blue); color: #fff; }
.threedlab-btn--primary:hover { filter: brightness(1.08); }

.threedlab-btn--secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--chrome); }
.threedlab-btn--secondary:hover { border-color: var(--accent-blue); }

.threedlab-btn--ghost { background: transparent; color: var(--accent-blue); padding: 0; }
.threedlab-btn--ghost:hover { text-decoration: underline; }

.threedlab-btn--whatsapp { background: var(--bg-surface-2); color: var(--text-primary); }
.threedlab-btn--whatsapp:hover { filter: brightness(1.1); }

.threedlab-btn--disabled,
.threedlab-btn[disabled] { opacity: 0.5; cursor: not-allowed; background: var(--bg-surface-2); color: var(--text-muted); }

/* --- Карточки (раздел 5) --- */
.threedlab-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--card-padding-mobile);
  transition: border-color var(--transition-medium), transform var(--transition-medium);
}
.threedlab-card:hover { border-color: var(--chrome); transform: translateY(-4px); }
@media (min-width: 1024px) { .threedlab-card { padding: var(--card-padding-desktop); } }

.threedlab-card--flagship {
  border-radius: var(--radius-card-flagship);
  padding: calc(var(--card-padding-desktop) * 1.3);
  border-color: var(--accent-cyan);
}

/* --- Формы (раздел 6) --- */
.threedlab-quote-form input[type="text"],
.threedlab-quote-form input[type="tel"],
.threedlab-quote-form input[type="email"],
.threedlab-quote-form textarea {
  width: 100%;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-button);
  color: var(--text-primary);
  padding: 0 16px;
  height: 44px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 14px;
}
@media (min-width: 1024px) {
  .threedlab-quote-form input[type="text"],
  .threedlab-quote-form input[type="tel"],
  .threedlab-quote-form input[type="email"] { height: 48px; }
}
.threedlab-quote-form textarea { height: 96px; padding-top: 12px; resize: vertical; }

.threedlab-quote-form input:focus,
.threedlab-quote-form textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.threedlab-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.threedlab-form-result--success { color: var(--success); }
.threedlab-form-result--error { color: var(--danger); }

.threedlab-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-secondary); margin: 12px 0; }

/* --- Статусы товара (раздел 7) --- */
.threedlab-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.threedlab-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.threedlab-status--in_stock::before { background: var(--success); }
.threedlab-status--on_order::before { background: var(--accent-blue); }
.threedlab-status--preorder::before { background: var(--chrome); }
.threedlab-status--unavailable::before { background: var(--text-muted); }
.threedlab-status--unavailable { color: var(--text-muted); }

/* --- Липкая мобильная панель (раздел 10) --- */
.threedlab-mobile-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  height: 56px; display: flex; gap: 8px; padding: 8px;
  background: rgba(18, 21, 27, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-hairline);
}
@media (min-width: 1024px) { .threedlab-mobile-bar { display: none; } }
.threedlab-mobile-bar .threedlab-btn { flex: 1; padding: 0; height: 100%; }

/* --- Появление блоков при скролле (раздел 8) --- */
.threedlab-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--transition-reveal), transform var(--transition-reveal); }
.threedlab-reveal.is-visible { opacity: 1; transform: translateY(0); }