/* ==========================================================================
   Damu Survey Component Styles
   Class names match the JS render engine (sv-app, sv-welcome-title, etc.)
   ========================================================================== */

.sv-app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.5;
}

/* Welcome screen */
.sv-welcome {
  text-align: center;
  padding: 48px 16px;
}
.sv-welcome-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #007A33;
}
.sv-welcome-subtitle {
  font-size: 16px;
  color: #555;
  margin-bottom: 32px;
}

/* Language switcher */
.sv-lang-switcher {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.sv-lang-btn {
  padding: 8px 20px;
  border: 2px solid #007A33;
  background: #fff;
  color: #007A33;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
}
.sv-lang-btn:hover,
.sv-lang-btn--active {
  background: #007A33;
  color: #fff;
}

/* Buttons */
.sv-btn {
  display: inline-block;
  padding: 12px 36px;
  background: #007A33;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.sv-btn:hover {
  background: #006629;
}
.sv-btn:disabled {
  background: #999;
  cursor: not-allowed;
}
.sv-btn--outline {
  background: #fff;
  color: #007A33;
  border: 2px solid #007A33;
}
.sv-btn--outline:hover {
  background: #e6f4ec;
}
.sv-btn--export {
  display: inline-block;
  padding: 10px 28px;
  background: #007A33;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.sv-btn--export:hover {
  background: #006629;
  color: #fff;
  text-decoration: none;
}

/* Progress steps */
.sv-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.sv-progress-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid #ccc;
  color: #999;
  background: #fff;
  transition: all .2s;
  flex-shrink: 0;
}
.sv-progress-step--active {
  border-color: #007A33;
  color: #007A33;
  background: #e6f4ec;
}
.sv-progress-step--done {
  border-color: #28a745;
  color: #fff;
  background: #28a745;
}
.sv-progress-line {
  width: 12px;
  height: 2px;
  background: #ccc;
  flex-shrink: 0;
}

/* Section header */
.sv-section-header {
  font-size: 18px;
  font-weight: 700;
  color: #007A33;
  margin-bottom: 8px;
}
.sv-section-counter {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
}

/* Questions */
.sv-question {
  margin-bottom: 28px;
  padding: 16px;
  background: #fafbfc;
  border-radius: 8px;
  border: 1px solid #e8ecf0;
}
.sv-question--error {
  border-color: #dc3545;
}
.sv-question-text {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}
.sv-error-msg {
  color: #dc3545;
  font-size: 13px;
  margin-top: 6px;
}

/* Radio & Checkbox groups */
.sv-radio-group,
.sv-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sv-radio-label,
.sv-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  transition: border-color .2s;
}
.sv-radio-label:hover,
.sv-checkbox-label:hover {
  border-color: #007A33;
}
.sv-radio-label--selected,
.sv-checkbox-label--selected {
  border-color: #007A33;
  background: #e6f4ec;
}
.sv-radio-label input,
.sv-checkbox-label input {
  margin-top: 3px;
  flex-shrink: 0;
}

/* Text inputs */
.sv-other-input {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}
.sv-text-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  box-sizing: border-box;
}
.sv-text-input:focus,
.sv-other-input:focus {
  outline: none;
  border-color: #007A33;
  box-shadow: 0 0 0 2px rgba(0,122,51,.15);
}
.sv-textarea {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
.sv-textarea:focus {
  outline: none;
  border-color: #007A33;
  box-shadow: 0 0 0 2px rgba(0,122,51,.15);
}

/* Scale 1-5 */
.sv-scale5 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sv-scale5-item {
  flex: 1;
  min-width: 80px;
  text-align: center;
}
.sv-scale5-btn {
  display: block;
  width: 100%;
  padding: 10px 4px;
  border: 2px solid #ddd;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
  color: #333;
}
.sv-scale5-btn:hover {
  border-color: #007A33;
}
.sv-scale5-btn--selected {
  border-color: #007A33;
  background: #007A33;
  color: #fff;
}
.sv-scale5-label {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  line-height: 1.3;
}

/* Matrix */
.sv-matrix {
  width: 100%;
  overflow-x: auto;
}
.sv-matrix table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}
.sv-matrix th,
.sv-matrix td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid #e8ecf0;
  font-size: 13px;
}
.sv-matrix th {
  font-weight: 600;
  color: #007A33;
  background: #f0f7f2;
}
.sv-matrix td:first-child,
.sv-matrix th:first-child {
  text-align: left;
}
.sv-matrix input[type=radio] {
  cursor: pointer;
}
.sv-matrix-cards {
  display: none;
}

/* Navigation */
.sv-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #e8ecf0;
}

/* Success screen */
.sv-success {
  text-align: center;
  padding: 60px 16px;
}
.sv-success-icon {
  font-size: 64px;
  margin-bottom: 16px;
  color: #28a745;
}
.sv-success-title {
  font-size: 22px;
  font-weight: 700;
  color: #007A33;
  margin-bottom: 12px;
}
.sv-success-text {
  font-size: 15px;
  color: #555;
  max-width: 500px;
  margin: 0 auto;
}
.sv-submit-error {
  color: #dc3545;
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
}

/* Mobile */
@media (max-width: 600px) {
  .sv-scale5 {
    flex-direction: column;
  }
  .sv-scale5-item {
    min-width: unset;
  }
  .sv-scale5-btn {
    text-align: left;
    padding: 10px 14px;
  }
  .sv-scale5-label {
    display: none;
  }
  .sv-matrix table {
    display: none;
  }
  .sv-matrix-cards {
    display: block;
  }
  .sv-matrix-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
  }
  .sv-matrix-card-title {
    font-weight: 600;
    margin-bottom: 8px;
  }
  .sv-matrix-card-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .sv-matrix-card-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
  }
  .sv-welcome-title {
    font-size: 20px;
  }
  .sv-progress-step {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
}