/*
 * ShieldKid plugin styles
 *
 * These styles scope all elements within the .shieldkid wrapper to avoid
 * conflicting with the active theme. Colour variables mirror the standalone
 * application to provide a cohesive look. Media queries adjust layouts for
 * tablets and phones to ensure a mobile‑friendly experience.
 */

:root {
  --sk-primary:#4a6fa5;
  --sk-secondary:#166088;
  --sk-accent:#fd5e53;
  --sk-light:#f8f9fa;
  --sk-dark:#343a40;
  --sk-success:#28a745;
}

.shieldkid * {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  -webkit-tap-highlight-color:transparent;
}

.shieldkid {
  background:#f0f4f8;
  color:#333;
  line-height:1.6;
  padding-bottom:2rem;
  touch-action:manipulation;
}

/* Header */
.shieldkid-header {
  background:linear-gradient(135deg, var(--sk-primary) 0%, var(--sk-secondary) 100%);
  color:#fff;
  padding:1.5rem;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.shieldkid-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin-bottom:1rem;
}
.shieldkid-logo-icon {
  font-size:2.5rem;
}
.shieldkid-logo-text {
  font-size:2.2rem;
  font-weight:700;
}
.shieldkid-tagline {
  font-size:1.2rem;
  margin-bottom:1rem;
  opacity:.9;
}

/* Hero and info panels */
.shieldkid-hero {
  text-align:center;
  padding:2rem 1rem;
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.1);
  margin-bottom:2rem;
}
.shieldkid-hero h2 {
  font-size:1.8rem;
  color:var(--sk-secondary);
  margin-bottom:1.5rem;
}
.shieldkid-hero p {
  font-size:1.1rem;
  max-width:800px;
  margin:0 auto 2rem;
  color:#555;
}
.shieldkid-cta-button {
  display:inline-block;
  background:var(--sk-accent);
  color:#fff;
  padding:1rem 2rem;
  font-size:1.2rem;
  font-weight:600;
  border-radius:50px;
  text-decoration:none;
  transition:.3s;
  box-shadow:0 4px 10px rgba(253,94,83,.4);
  cursor:pointer;
  border:none;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.shieldkid-cta-button:hover,
.shieldkid-cta-button:active {
  transform:translateY(-3px);
  box-shadow:0 6px 15px rgba(253,94,83,.5);
}

/* App section */
.shieldkid-app {
  text-align:center;
  padding:1.5rem;
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.1);
  margin-bottom:2rem;
}
.shieldkid-app h2 {
  font-size:1.8rem;
  color:var(--sk-secondary);
  margin-bottom:1.5rem;
}
.shieldkid-app-interface {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  max-width:800px;
  margin:0 auto;
}

/* Upload area */
.shieldkid-upload-container {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.shieldkid-upload-area {
  width:100%;
  min-height:200px;
  border:3px dashed var(--sk-primary);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:1.5rem;
  cursor:pointer;
  transition:.3s;
  background:#f8f9fa;
  position:relative;
}
.shieldkid-upload-area:hover {
  background:#e2e6ea;
  border-color:var(--sk-accent);
}
.shieldkid-upload-icon {
  font-size:2.5rem;
  color:var(--sk-primary);
  margin-bottom:1rem;
}
.shieldkid-upload-text {
  font-size:1.1rem;
  text-align:center;
  color:#555;
  margin:.2rem 0;
}
.shieldkid-format-help {
  font-size:0.9rem;
  color:#666;
}

#shieldkid-file-input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  font-size:16px;
  width:100%;
  height:100%;
}

/* Preview area */
.shieldkid-image-preview {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.shieldkid-preview-container {
  position:relative;
  width:100%;
  max-width:400px;
  margin:0 auto;
  min-height:200px;
  display:flex;
  justify-content:center;
  align-items:center;
  border:1px dashed #ccc;
  border-radius:12px;
  background:#f8f9fa;
  overflow:hidden;
}
#shieldkid-preview-image {
  max-width:100%;
  max-height:400px;
  object-fit:contain;
  display:none;
}
.shieldkid-preview-placeholder {
  color:#6c757d;
  text-align:center;
  padding:1.5rem;
}

/* Controls */
.shieldkid-controls {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  width:100%;
  margin-top:1rem;
}
.shieldkid-button {
  padding:.8rem 1.5rem;
  background:var(--sk-primary);
  color:#fff;
  border:none;
  border-radius:50px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-width:44px;
  min-height:44px;
  justify-content:center;
}
.shieldkid-button:hover,
.shieldkid-button:active {
  background:var(--sk-secondary);
}
.shieldkid-button.shieldkid-success {
  background:var(--sk-success);
}
.shieldkid-button.shieldkid-success:hover,
.shieldkid-button.shieldkid-success:active {
  background:#218838;
}
.shieldkid-button:disabled {
  background:#6c757d;
  cursor:not-allowed;
  opacity:.6;
}

/* Results */
.shieldkid-results {
  width:100%;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  margin-top:2rem;
}
.shieldkid-info-section {
  background:#e9ecef;
  padding:1.5rem;
  border-radius:12px;
  margin-top:1.5rem;
}

/* Protection level */
.shieldkid-protection-level {
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin:1.5rem 0;
  width:100%;
}
.shieldkid-protection-level label {
  font-weight:600;
  color:var(--sk-secondary);
}
.shieldkid-protection-level input[type=range] {
  width:100%;
  height:44px;
}
.shieldkid-protection-labels {
  display:flex;
  justify-content:space-between;
}

/* Status messages */
.shieldkid-status-message {
  padding:1rem;
  border-radius:8px;
  margin:1rem 0;
  text-align:center;
  width:100%;
}
.shieldkid-status-message.success {
  background:#d4edda;
  color:#155724;
  border:1px solid #c3e6cb;
}
.shieldkid-status-message.error {
  background:#f8d7da;
  color:#721c24;
  border:1px solid #f5c6cb;
}

/* Privacy note */
.shieldkid-privacy-note {
  background:#e8f4f8;
  border-left:4px solid var(--sk-primary);
  padding:1rem;
  margin:1.5rem 0;
  border-radius:4px;
  text-align:left;
}
.shieldkid-privacy-note .shieldkid-lock-icon {
  margin-right:.5rem;
}

/* Hidden helper */
.shieldkid-hidden {
  display:none !important;
}

/* Responsive tweaks */
@media (max-width:768px) {
  .shieldkid-logo-text { font-size:1.8rem; }
  .shieldkid-hero h2 { font-size:1.6rem; }
  .shieldkid-app h2 { font-size:1.6rem; }
  .shieldkid-button { width:100%; }
  .shieldkid-upload-area { min-height:180px; padding:1rem; }
  .shieldkid-upload-icon { font-size:2rem; }
  .shieldkid-upload-text { font-size:1rem; }
  .shieldkid-protection-level input[type=range] { height:36px; }
}

@media (max-width:480px) {
  .shieldkid-logo-text { font-size:1.6rem; }
  .shieldkid-hero { padding:1.5rem 1rem; }
  .shieldkid-hero h2 { font-size:1.4rem; }
  .shieldkid-cta-button { padding:.8rem 1.5rem; font-size:1rem; }
  .shieldkid-app { padding:1rem; }
  .shieldkid-app h2 { font-size:1.4rem; }
  .shieldkid-info-section { margin-top:1rem; }
}