/* Wrapper */
.msic { display: grid; gap: 1.25rem; max-width: 100vw; }

/* Controls: stacked, centered, compact */
.msic-controls {
  display: grid; gap: .75rem; grid-template-columns: 1fr;
  max-width: 520px; margin: 0 auto;
}
.msic-field { display: grid; gap: .35rem; }
.msic-label { font-weight: 600; color: #fff; letter-spacing: .2px; }
.msic-select, .msic-btn {
  appearance: none; border: 1px solid #3a3a3a; border-radius: 10px;
  padding: .75rem .9rem; background: #252525; color: #fff; font-size: 16px; line-height: 1.2;
  box-sizing: border-box; width: 100%;
}
.msic-select:focus, .msic-btn:focus { outline: none; border-color: #96885f; box-shadow: 0 0 0 2px #96885f33; }
.msic-btn { background: #96885f; border-color: #96885f; cursor: pointer; font-weight: 600; }
.msic-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Calendar shell: centered, fixed height, no horizontal wiggle */
.msic-cal {
  border: 1px solid #3a3a3a; border-radius: 12px; background: #1f1f1f;
  padding: 8px; max-width: 860px; margin: 0 auto; overflow-x: hidden;
  /* prevent collapse from parent builders */
  min-width: 320px;
}
.msic-placeholder { color: #cfcfcf; padding: 1rem 1.25rem; font-size: 15px; }

/* Iframe itself (we control this, not Calendly's script) */
.msic-iframe {
  display: block; width: 100%; border: 0; overflow: hidden;
  /* Height gets set from JS (default 900px) */
}