/**
 * AI Store Theme - AI Tools Generator & Utility Styles
 * Loaded conditionally on AI Tool archives, single pages, and shortcode locations.
 * Fully Mobile-Optimized for All Viewports (320px to 1920px+).
 */

.ai-tool-interface-shell {
  box-shadow: var(--ai-shadow-elevated);
  width: 100%;
  box-sizing: border-box;
}

.ai-tool-result-box {
  border: 1px solid var(--ai-border-medium);
  background-color: rgba(9, 10, 15, 0.85);
  line-height: 1.6;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
}

/* Copy Feedback Badge Effect */
.copy-success-badge {
  background-color: rgba(34, 197, 94, 0.2) !important;
  color: #4ADE80 !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

/* ═══════════════════════════════════════════════════
   Universal AI Tool Textarea & Input Full-Width System
   ═══════════════════════════════════════════════════ */

/* Force ALL AI Tool Textareas & Inputs to span 100% full width */
.ai-tool-form textarea,
.ai-textarea,
#ai-tool-input-text,
textarea.ai-textarea,
textarea#ai-tool-input-text {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  background: var(--ai-surface-elevated) !important;
  border: 1px solid var(--ai-border-medium) !important;
  color: var(--ai-text) !important;
  font-family: var(--ai-font-primary) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  outline: none !important;
  resize: vertical !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ai-tool-form textarea:focus,
.ai-textarea:focus,
#ai-tool-input-text:focus,
textarea.ai-textarea:focus,
textarea#ai-tool-input-text:focus {
  border-color: var(--ai-accent) !important;
  box-shadow: 0 0 0 3px var(--ai-accent-soft), 0 4px 15px rgba(59, 130, 246, 0.15) !important;
}

.ai-tool-form input[type="text"],
.ai-tool-form input[type="email"],
.ai-tool-form input[type="number"],
.ai-tool-form select,
.ai-input {
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  height: 46px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  background: var(--ai-surface-elevated) !important;
  border: 1px solid var(--ai-border-medium) !important;
  color: var(--ai-text) !important;
  font-size: 0.92rem !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ai-tool-form input:focus,
.ai-tool-form select:focus,
.ai-input:focus {
  border-color: var(--ai-accent) !important;
  box-shadow: 0 0 0 3px var(--ai-accent-soft) !important;
}

/* Force AI Tool form grid containers to stack vertically so textarea spans 100% wide */
.ai-tool-form > div[style*="grid-template-columns"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.ai-tool-form > div[style*="grid-template-columns"] > div {
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════
   Generous Section & Card Padding for All AI Tools Pages
   ═══════════════════════════════════════════════════ */

/* Single AI Tool Container & Section Spacing (Scoped strictly to site-main) */
.single-ai_tool .site-main .ai-container,
.post-type-archive-ai_tool .site-main .ai-container {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-top: 1.5rem !important;
  padding-bottom: 4rem !important;
  box-sizing: border-box !important;
}

/* Tool Execution Zone & Interactive Shells */
.ai-tool-top-execution-zone {
  margin-top: 1.5rem !important;
  margin-bottom: 3.5rem !important;
}

.ai-seo-generator-shell,
.ai-prompt-security-shell,
.ai-saas-ltv-shell,
.ai-payload-transformer-shell,
.ai-hero-optimizer-shell,
.ai-llm-cost-shell,
.ai-video-timing-shell,
.ai-ad-deconstruct-shell,
.ai-rag-architect-shell,
.ai-wc-copy-shell,
.ai-agency-proposal-shell,
.ai-agent-builder-shell,
.ai-multi-agent-shell,
.ai-openapi-schema-shell,
.ai-vector-config-shell,
.ai-micro-prd-shell,
.ai-tool-interface-shell,
.ai-social-content-shell,
.ai-system-prompt-shell,
.ai-blueprint-shell,
.ai-cold-email-shell,
.ai-content-rewriter-shell,
.ai-saas-pricing-shell {
  padding: 2.75rem 2.25rem !important;
  margin-bottom: 2.75rem !important;
  border-radius: var(--ai-radius-card) !important;
  box-sizing: border-box !important;
}

/* Tool Specification & Description Cards ("About This AI Tool", "How It Works") */
.ai-tool-specifications .ai-glass-card {
  padding: 2.75rem 2.25rem !important;
  border-radius: var(--ai-radius-featured) !important;
  margin-bottom: 2.25rem !important;
  box-sizing: border-box !important;
}

/* Related Tools Grid & Tool Cards ("More Interactive AI Tools") */
.ai-related-tools-section {
  margin-top: 3.5rem !important;
  margin-bottom: 3.5rem !important;
  padding-top: 1.5rem !important;
}

.ai-related-tools-section .ai-grid,
.ai-tools-grid {
  gap: 2rem !important;
}

.ai-tool-card {
  padding: 2rem 1.85rem !important;
  border-radius: var(--ai-radius-card) !important;
  margin-bottom: 0.5rem !important;
  box-sizing: border-box !important;
}

/* 📱 MOBILE RESPONSIVE MEDIA QUERIES */

@media (max-width: 991px) {
  .ai-tools-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 768px) {
  .ai-tool-form div[style*="grid-template-columns"],
  .ai-saas-ltv-shell div[style*="grid-template-columns"],
  .ai-llm-cost-shell div[style*="grid-template-columns"],
  .ai-vector-config-shell div[style*="grid-template-columns"],
  .ai-saas-mrr-shell div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .ai-tools-hero-banner {
    padding: 3rem 1rem 2.5rem 1rem !important;
  }

  .ai-tools-hero-banner h1 {
    font-size: 1.85rem !important;
  }

  .ai-tools-hero-banner p {
    font-size: 0.95rem !important;
  }

  .ai-prompt-security-shell,
  .ai-saas-ltv-shell,
  .ai-payload-transformer-shell,
  .ai-hero-optimizer-shell,
  .ai-llm-cost-shell,
  .ai-video-timing-shell,
  .ai-ad-deconstruct-shell,
  .ai-rag-architect-shell,
  .ai-wc-copy-shell,
  .ai-agency-proposal-shell,
  .ai-agent-builder-shell,
  .ai-multi-agent-shell,
  .ai-openapi-schema-shell,
  .ai-vector-config-shell,
  .ai-micro-prd-shell {
    padding: 1.5rem 1.25rem !important;
    margin: 1.25rem 0 !important;
    border-radius: 16px !important;
  }

  /* 44px Touch Target Optimization for Mobile Devices */
  .ai-tool-form select.ai-input,
  .ai-tool-form button[type="submit"],
  .ai-tools-filter-bar .ai-tool-filter-btn {
    min-height: 46px !important;
    font-size: 0.9rem !important;
  }

  .ai-tools-filter-bar {
    justify-content: flex-start !important;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  .ai-tools-filter-bar .ai-tool-filter-btn {
    white-space: nowrap !important;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .ai-tools-grid {
    grid-template-columns: 1fr !important;
  }

  .ai-tool-card {
    padding: 1.25rem !important;
  }

  #ai-tools-live-search {
    height: 48px !important;
    font-size: 0.9rem !important;
  }

  .multi-agent-visual-graph {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .multi-agent-visual-graph div[style*="rotate"] {
    display: none !important;
  }
}