/* Basic responsive layout, symmetrical, mobile-friendly */
.qps-container { max-width: 960px; margin: 16px auto; border:1px solid #e6e6e6; padding:18px; border-radius:8px; background:#fff; font-family: Arial, Helvetica, sans-serif; }
.qps-header h3 { margin:0; color:#0b57d0;font-size: 20px;text-align: center;}
.qps-subheading { margin:0px 0 0px 0; color:#666; font-weight: bold;text-align: center;}
.qps-main { padding:12px 0; }
.qps-step-intro { display:flex; gap:16px; justify-content:center; margin-bottom:12px; flex-wrap:wrap; }
.qps-btn { padding:10px 18px; border-radius:8px; border:none; cursor:pointer; font-weight:600; }
.qps-btn-primary { background:#0b57d0; color:#fff; }
.qps-btn-secondary { background:#f0f0f0; color:#333; }
.qps-disabled, .qps-btn[disabled] { background:#8b8b8b !important; color:#fff !important; cursor:not-allowed; }
.qps-sqp-top {display:block; background: #fafafa; border-radius: 6px;padding:8px 10px;border:1px solid #eee; font-size:13px; color: #ff0000;font-weight: bold;}
/* Grid for step1 */
.qps-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; align-items:start; }
.qps-grid label { display:block; font-size:13px; color:#333; }
.qps-grid input[type="text"], .qps-grid input[type="number"], .qps-grid select { width:100%; padding:8px; border:1px solid #ddd; border-radius:6px; box-sizing:border-box; }

/* availability */
.qps-availability { background:#fafafa; padding:10px; border-radius:6px; border:1px solid #eee; }
.qps-availability-row { margin:6px 0; font-size:13px; }

/* accordions */
.qps-accordions { margin-top:12px; }
.qps-accordion { border:1px solid #e6e6e6; margin-bottom:8px; border-radius:6px; overflow:hidden; }
.qps-acc-header { background:#f7f9fb; padding:10px 12px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.qps-acc-body { padding:12px; display:none; background:#fff; }
.qps-accordion.open .qps-acc-body { display:block; }
.qps-badge { padding:4px 8px; border-radius:12px; font-size:12px; background:#eee; }
.qps-unsaved { background:#f9c0c0; }
.qps-saved { background:#bfe3bf; color:#0b662b; }

/* qtype rows */
.qps-qtype-row { display:flex; gap:12px; align-items:center; padding:6px 0; }
.qps-qtype-label { flex:1; }

/* preview area */
.qps-preview-area { margin-top:18px; border-top:1px dashed #eee; padding-top:12px; }

/* Inline Availability (horizontal) */
.qps-availability-inline {
  display: block;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  /*white-space: nowrap;*/
  overflow: auto;
}
.qps-availability-inline strong { color: #0b74de; margin-right:6px; }
.qps-availability-item { margin-right:10px; display:inline-block; }
.qps-availability-sep { margin: 0 8px; color:#cfcfcf; }

/* Inline warning for weightage input */
.qps-weightage-warning {
  color: #b71c1c;
  background: #fff6f6;
  border: 1px solid #f6c5c5;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 6px;
}
.qps-weightage-warning strong { color: #b71c1c; }

/* Mobile-friendly accordion header layout */
@media (max-width: 640px) {
  .qps-accordion-section .qps-acc-header {
    display: flex;
    flex-direction: column;     /* stack content vertically */
    align-items: flex-start;    /* left-align both lines */
    line-height: 1.4;
  }

  /* ensure section title and marks text don't fight for space */
  .qps-accordion-section .qps-acc-header > * {
    width: 100%;
    flex: none;
  }

  /* optional: lighten font for second line */
  .qps-accordion-section .qps-header-marks {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
  }
}
/*----------------------*/
/* Edge-to-edge mobile layout adjustments */
@media (max-width: 640px) {

  /* Main step container — use almost full width */
  .qps-container,
  .qps-step,
  .qps-wrapper,
  .qps-main-area {
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Accordions stretch closer to edges */
  .qps-accordion-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 6px; /* keep soft corners */
  }

  /* Accordion header + body spacing */
  .qps-acc-header,
  .qps-acc-body {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Buttons occupy almost full width, with tiny side gaps */
  .qps-btn,
  .qps-btn-primary {
    width: calc(100% - 12px);
    margin: 4px 6px;
  }

  /* Availability / info blocks — flush with sides */
  .qps-availability-inline,
  .qps-availability-inline-small {
    margin-left: 0;
    margin-right: 0;
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Prevent the whole page from being constrained by body margins (some themes do this) */
  body {
    margin-left: 5px;
    margin-right: 5px;
  }
}